salix-front/src/components/LeftMenu.vue

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
// import { useRole } from 'src/composables/useRole';
// import { useQuasar } from 'quasar';
import { useNavigation } from 'src/composables/useNavigation';
import routes from 'src/router/modules';

const { t } = useI18n();
// const { hasAny } = useRole();
const navigation = useNavigation();

const $props = defineProps({
    source: {
        type: String,
        default: 'main',
    },
});

const items = ref([]);
for (const module of navigation.modules) {
    const moduleDef = routes.find((route) => route.name.toLowerCase() === module);
    const moduleMeta = moduleDef.meta;

    const item = {
        name: moduleDef.name,
        title: moduleMeta.title,
        icon: moduleMeta.icon,
        module: module,
        children: [],
    };

    if (moduleDef.menus) {
        const mainMenus = moduleDef.menus[$props.source];

        for (const menu of mainMenus) {
            const mainMenuItems = moduleDef.children[0].children;
            const mainMenuItemDef = mainMenuItems.find((route) => route.name === menu.name);
            const mainMenuItemMeta = mainMenuItemDef.meta;

            item.children.push({
                name: mainMenuItemDef.name,
                title: mainMenuItemMeta.title,
                icon: mainMenuItemMeta.icon,
            });
        }
    }

    items.value.push(item);
}
// const quasar = useQuasar();

// async function onToggleFavoriteModule(moduleName, event) {
//     await navigation.toggleFavorite(moduleName, event);
//
//     quasar.notify({
//         message: t('globals.dataSaved'),
//         type: 'positive',
//     });
// }
</script>

<template>
    <q-list padding>
        <q-item-label header>{{ t('globals.favoriteModules') }}</q-item-label>
        <template v-for="item in items" :key="item.name">
            <q-expansion-item
                group="somegroup"
                class="module"
                active-class="text-primary"
                :label="item.title"
                :to="{ name: item.name }"
                expand-separator
            >
                <template #header>
                    <q-item-section avatar>
                        <q-icon :name="item.icon"></q-icon>
                    </q-item-section>
                    <q-item-section>{{ t(`${item.module}.pageTitles.${item.title}`) }}</q-item-section>
                    <!--                    <q-item-section side>-->
                    <!--                        <div-->
                    <!--                            @click="onToggleFavoriteModule(module.name, $event)"-->
                    <!--                            class="row items-center"-->
                    <!--                            v-if="module.name != 'dashboard'"-->
                    <!--                        >-->
                    <!--                            <q-icon name="vn:pin"></q-icon>-->
                    <!--                        </div>-->
                    <!--                    </q-item-section>-->
                </template>
                <template v-for="section in item.children" :key="section.name">
                    <q-item clickable v-ripple active-class="text-primary" :to="{ name: section.name }">
                        <q-item-section avatar :if="section.icon">
                            <q-icon :name="section.icon" />
                        </q-item-section>
                        <q-item-section>{{ t(`${item.module}.pageTitles.${section.title}`) }}</q-item-section>
                    </q-item>
                </template>
            </q-expansion-item>
        </template>
        <!--        <template v-for="module in navigation.favorites.value" :key="module.title">-->
        <!--            <div class="module" v-if="!module.children">-->
        <!--                <q-item-->
        <!--                    clickable-->
        <!--                    v-ripple-->
        <!--                    active-class="text-primary"-->
        <!--                    :key="module.title"-->
        <!--                    :to="{ name: module.stateName }"-->
        <!--                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
        <!--                >-->
        <!--                    <q-item-section avatar :if="module.icon">-->
        <!--                        <q-icon :name="module.icon" />-->
        <!--                    </q-item-section>-->
        <!--                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
        <!--                    <q-item-section side>-->
        <!--                        <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">-->
        <!--                            <q-icon name="vn:pin_off"></q-icon>-->
        <!--                        </div>-->
        <!--                    </q-item-section>-->
        <!--                </q-item>-->
        <!--            </div>-->

        <!--            <template v-if="module.children">-->
        <!--                <q-expansion-item-->
        <!--                    class="module"-->
        <!--                    active-class="text-primary"-->
        <!--                    :label="t(`${module.name}.pageTitles.${module.title}`)"-->
        <!--                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
        <!--                    :to="{ name: module.stateName }"-->
        <!--                >-->
        <!--                    <template #header>-->
        <!--                        <q-item-section avatar>-->
        <!--                            <q-icon :name="module.icon"></q-icon>-->
        <!--                        </q-item-section>-->
        <!--                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
        <!--                        <q-item-section side>-->
        <!--                            <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">-->
        <!--                                <q-icon name="vn:pin_off"></q-icon>-->
        <!--                            </div>-->
        <!--                        </q-item-section>-->
        <!--                    </template>-->
        <!--                    <template v-for="section in module.children" :key="section.title">-->
        <!--                        <q-item-->
        <!--                            clickable-->
        <!--                            v-ripple-->
        <!--                            active-class="text-primary"-->
        <!--                            :to="{ name: section.stateName }"-->
        <!--                            v-if="!section.roles || !section.roles.length || hasAny(section.roles)"-->
        <!--                        >-->
        <!--                            <q-item-section avatar :if="section.icon">-->
        <!--                                <q-icon :name="section.icon" />-->
        <!--                            </q-item-section>-->
        <!--                            <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>-->
        <!--                        </q-item>-->
        <!--                    </template>-->
        <!--                </q-expansion-item>-->
        <!--            </template>-->
        <!--        </template>-->
    </q-list>

    <q-separator />

    <!--    <q-expansion-item :label="t('moduleIndex.allModules')">-->
    <!--        <q-list padding>-->
    <!--            <template v-for="module in navigation.modules.value" :key="module.title">-->
    <!--                <div class="module" v-if="!module.children">-->
    <!--                    <q-item-->
    <!--                        class="module"-->
    <!--                        clickable-->
    <!--                        v-ripple-->
    <!--                        active-class="text-primary"-->
    <!--                        :key="module.title"-->
    <!--                        :to="{ name: module.stateName }"-->
    <!--                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
    <!--                    >-->
    <!--                        <q-item-section avatar :if="module.icon">-->
    <!--                            <q-icon :name="module.icon" />-->
    <!--                        </q-item-section>-->
    <!--                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
    <!--                        <q-item-section side>-->
    <!--                            <div-->
    <!--                                @click="onToggleFavoriteModule(module.name, $event)"-->
    <!--                                class="row items-center"-->
    <!--                                v-if="module.name != 'dashboard'"-->
    <!--                            >-->
    <!--                                <q-icon name="vn:pin"></q-icon>-->
    <!--                            </div>-->
    <!--                        </q-item-section>-->
    <!--                    </q-item>-->
    <!--                </div>-->

    <!--                <template v-if="module.children">-->
    <!--                    <q-expansion-item-->
    <!--                        class="module"-->
    <!--                        active-class="text-primary"-->
    <!--                        :label="t(`${module.name}.pageTitles.${module.title}`)"-->
    <!--                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
    <!--                        :to="{ name: module.stateName }"-->
    <!--                    >-->
    <!--                        <template #header>-->
    <!--                            <q-item-section avatar>-->
    <!--                                <q-icon :name="module.icon"></q-icon>-->
    <!--                            </q-item-section>-->
    <!--                            <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
    <!--                            <q-item-section side>-->
    <!--                                <div-->
    <!--                                    @click="onToggleFavoriteModule(module.name, $event)"-->
    <!--                                    class="row items-center"-->
    <!--                                    v-if="module.name != 'dashboard'"-->
    <!--                                >-->
    <!--                                    <q-icon name="vn:pin"></q-icon>-->
    <!--                                </div>-->
    <!--                            </q-item-section>-->
    <!--                        </template>-->
    <!--                        <template v-for="section in module.children" :key="section.title">-->
    <!--                            <q-item-->
    <!--                                clickable-->
    <!--                                v-ripple-->
    <!--                                active-class="text-primary"-->
    <!--                                :to="{ name: section.stateName }"-->
    <!--                                v-if="!section.roles || !section.roles.length || hasAny(section.roles)"-->
    <!--                            >-->
    <!--                                <q-item-section avatar :if="section.icon">-->
    <!--                                    <q-icon :name="section.icon" />-->
    <!--                                </q-item-section>-->
    <!--                                <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>-->
    <!--                            </q-item>-->
    <!--                        </template>-->
    <!--                    </q-expansion-item>-->
    <!--                </template>-->
    <!--            </template>-->
    <!--        </q-list>-->
    <!--    </q-expansion-item>-->
</template>

<style>
.module .icon-pin,
.module .icon-pin_off {
    visibility: hidden;
}
.module:hover .icon-pin,
.module:hover .icon-pin_off {
    visibility: visible;
}
</style>