101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<script setup>
|
|
import { onMounted, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import LeftMenu from 'components/LeftMenu.vue';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
|
|
|
const stateStore = useStateStore();
|
|
const navigation = useNavigationStore();
|
|
const { t } = useI18n();
|
|
|
|
onMounted(() => navigation.fetchPinned());
|
|
|
|
const pinnedModules = computed(() => navigation.getPinnedModules());
|
|
</script>
|
|
|
|
<template>
|
|
<QDrawer
|
|
v-model="stateStore.leftDrawer"
|
|
show-if-above
|
|
:width="256"
|
|
:breakpoint="1000"
|
|
>
|
|
<QScrollArea class="fit text-grey-8">
|
|
<LeftMenu />
|
|
</QScrollArea>
|
|
</QDrawer>
|
|
<QPageContainer>
|
|
<QPage class="q-pa-md">
|
|
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">
|
|
{{ t('globals.pinnedModules') }}
|
|
</div>
|
|
<QCard class="row flex-container q-pa-md">
|
|
<div class="text-grey-5" v-if="pinnedModules.length === 0">
|
|
{{ t('pinnedInfo') }}
|
|
</div>
|
|
<template v-if="pinnedModules.length">
|
|
<div
|
|
v-for="item of pinnedModules"
|
|
:key="item.title"
|
|
class="row no-wrap q-pa-xs flex-item"
|
|
>
|
|
<QBtn
|
|
align="evenly"
|
|
padding="16px"
|
|
flat
|
|
stack
|
|
size="lg"
|
|
:icon="item.icon"
|
|
color="orange-6"
|
|
class="col-4 button"
|
|
:to="{ name: item.name }"
|
|
>
|
|
<div class="text-center text-primary button-text">
|
|
{{ t(item.title) }}
|
|
</div>
|
|
</QBtn>
|
|
</div>
|
|
</template>
|
|
</QCard>
|
|
</div>
|
|
</div>
|
|
</QPage>
|
|
</QPageContainer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
.flex-item {
|
|
width: 100px;
|
|
}
|
|
.button {
|
|
width: 100%;
|
|
line-height: normal;
|
|
align-items: center;
|
|
}
|
|
.button-text {
|
|
font-size: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"pinnedInfo": "Your pinned modules will be shown here..."
|
|
},
|
|
"es": {
|
|
"pinnedInfo": "Tus módulos fijados aparecerán aquí..."
|
|
}
|
|
}
|
|
</i18n>
|