95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<Box v-if="deviceType === 'desktop'" padding="closed" class="view">
|
|
<IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
|
|
<component :is="actualComponent.component" v-bind="actualComponent.props"/>
|
|
</Box>
|
|
<div v-else-if="deviceType === 'mobile' && !actualComponent.default" class="view-mobile">
|
|
<IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
|
|
<component :is="actualComponent.component" v-bind="actualComponent.props"/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Box from '../UI/Box.vue';
|
|
import Events from '@/utils/Events';
|
|
import { computed, ref, watch } from 'vue';
|
|
import Loading from '@/components/Widget/View/LoadingView.vue'
|
|
import SearchResults from '@/components/Widget/View/SearchResults.vue';
|
|
import Default from '../Widget/View/Default.vue';
|
|
import IconAction from '../UI/IconAction.vue';
|
|
|
|
//TODO: Render compatibility with mobile
|
|
//TODO: Make Default.vue a real default view
|
|
//TODO: Make the search request
|
|
//TODO: Make the medias
|
|
|
|
const deviceType = ref((window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop');
|
|
|
|
watch(() => window.innerWidth, () => {
|
|
deviceType.value = (window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop';
|
|
});
|
|
|
|
const defaultComponent = {
|
|
component: Default,
|
|
unclosable: true,
|
|
default: true,
|
|
props: {}
|
|
};
|
|
|
|
function returnDefault() {
|
|
actualComponent.value = defaultComponent;
|
|
}
|
|
|
|
const actualComponent = ref(defaultComponent);
|
|
|
|
Events.on("SEARCH_STARTED", () => {
|
|
setLoading("Recherche en cours ...")
|
|
})
|
|
Events.on("SEARCH_RESULT", (data) => {
|
|
console.log("Search results received:", data);
|
|
actualComponent.value = {
|
|
component: SearchResults,
|
|
props: {
|
|
results: data
|
|
}
|
|
};
|
|
});
|
|
|
|
function setLoading(messageLoading) {
|
|
|
|
actualComponent.value = {
|
|
component: Loading,
|
|
unclosable: true,
|
|
props: {
|
|
message: messageLoading
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
</script>
|
|
<style scoped>
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.view {
|
|
position: relative;
|
|
}
|
|
|
|
.view-mobile {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--background-secondary);
|
|
z-index: 1000;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
</style> |