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 { useRoute } from 'vue-router';
import { useNavigation } from 'src/composables/useNavigation';
import routes from 'src/router/modules';

const { t } = useI18n();
const role = useRole();
const route = useRoute();
const navigation = useNavigation();

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

function toLowerCamel(value) {
    return value.charAt(0).toLowerCase() + value.slice(1);
}

function findMatches(search, item) {
    const matches = [];
    function findRoute(search, item) {
        for (const child of item.children) {
            if (search.indexOf(child.name) > -1) {
                matches.push(child);
            } else if (child.children) {
                findRoute(search, child);
            }
        }
    }

    findRoute(search, item);

    return matches;
}

function addChildren(module, route, parent) {
    if (route.menus) {
        const mainMenus = route.menus[props.source];
        const matches = findMatches(mainMenus, route);
        for (const child of matches) {
            addMenuItem(module, child, parent);
        }
    }
}

function addMenuItem(module, route, parent) {
    const { meta } = route;

    if (meta && meta.roles && role.hasAny(meta.roles) === false) return;

    const item = {
        name: route.name,
    };

    if (meta) {
        item.title = `${module}.pageTitles.${meta.title}`;
        item.icon = meta.icon;
    }

    parent.push(item);

    return item;
}

const items = ref([]);
if (props.source === 'main') {
    for (const module of navigation.modules) {
        const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);

        const item = addMenuItem(module, moduleDef, items.value);
        item.children = [];

        if (!item) continue;
        addChildren(module, moduleDef, item.children);
    }
}

if (props.source === 'card') {
    const currentRoute = route.matched[1];
    const currentModule = toLowerCamel(currentRoute.name);
    const moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);

    addChildren(currentModule, moduleDef, items.value);
}

// const quasar = useQuasar();

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

function isOpen(name) {
    const { matched } = route;

    return matched.some((item) => item.name === name);
}
</script>

<template>
    <q-list padding>
        <q-item-label v-if="$props.source === 'main'" header>
            {{ t('globals.favoriteModules') }}
        </q-item-label>
        <template v-for="item in items" :key="item.name">
            <template v-if="item.children">
                <q-expansion-item
                    group="group"
                    class="module"
                    active-class="text-primary"
                    :label="item.title"
                    :to="{ name: item.name }"
                    expand-separator
                    :default-opened="isOpen(item.name)"
                >
                    <template #header>
                        <q-item-section avatar>
                            <q-icon :name="item.icon"></q-icon>
                        </q-item-section>
                        <q-item-section>{{ t(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 v-if="section.icon">
                                <q-icon :name="section.icon" />
                            </q-item-section>
                            <q-item-section avatar v-if="!item.icon">
                                <q-icon name="disabled_by_default" />
                            </q-item-section>
                            <q-item-section>{{ t(section.title) }}</q-item-section>
                        </q-item>
                    </template>
                </q-expansion-item>
            </template>
            <template v-if="!item.children">
                <q-item clickable v-ripple active-class="text-primary" :to="{ name: item.name }">
                    <q-item-section avatar v-if="item.icon">
                        <q-icon :name="item.icon" />
                    </q-item-section>
                    <q-item-section avatar v-if="!item.icon">
                        <q-icon name="disabled_by_default" />
                    </q-item-section>
                    <q-item-section>{{ t(item.title) }}</q-item-section>
                </q-item>
            </template>
        </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-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>-->