salix-front/src/components/PinnedModules.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() {
    let section = route.path.substring(1);
    if (!route.path.includes('/')) return (window.location.href = await getUrl(section));
    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 + 'dashboard'));
}
</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"
                class="col-5"
                @click="redirect($route.params.id)"
            >
                <div class="text-center button-text">Salix</div>
            </QBtn>
            <QBtn flat stack size="lg" icon="home" class="col-5" to="/">
                <div class="text-center 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>