salix-front/src/components/PinnedModules.vue

87 lines
2.4 KiB
Vue

<script setup>
import { onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useNavigationStore } from 'src/stores/useNavigationStore';
import { getUrl } from 'src/composables/getUrl';
import { useRoute } from 'vue-router';
const navigation = useNavigationStore();
const { t } = useI18n();
const route = useRoute();
onMounted(() => {
navigation.fetchPinned();
});
defineExpose({
redirect,
});
const pinnedModules = computed(() => navigation.getPinnedModules());
async function redirect() {
if (route.path == '/dashboard') return (window.location.href = await getUrl(''));
let section = route.path.substring(1);
section = section.substring(0, section.indexOf('/'));
if (route?.params?.id)
return (window.location.href = await getUrl(
`${section}/${route.params.id}/summary`
));
return (window.location.href = await getUrl(section + '/index'));
}
</script>
<template>
<QMenu anchor="bottom left" max-width="300px" max-height="400px">
<div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
<QBtn flat stack size="lg" icon="more_up" @click="redirect($route.params.id)">
<div class="button-text">Salix</div>
</QBtn>
<QBtn flat stack size="lg" icon="home" to="/">
<div class="button-text">{{ t('Home') }}</div>
</QBtn>
<div class="row col-12 justify-around q-mt-md">
<QBtn
flat
stack
size="lg"
:icon="item.icon"
color="primary"
class="col-5"
:to="{ name: item.name }"
v-for="item of pinnedModules"
:key="item.title"
>
<div class="text-center text-primary button-text">
{{ t(item.title) }}
</div>
</QBtn>
</div>
</div>
<div v-else>
<div
class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
style="min-width: 200px"
>
{{ t('globals.noPinnedModules') }}
</div>
</div>
</QMenu>
</template>
<style lang="scss" scoped>
.button-text {
font-size: 10px;
margin-top: 5px;
}
</style>
<i18n>
en:
Home: Home
es:
Home: Inicio
</i18n>