salix-front/src/components/LeftMenu.vue

<script setup>
import axios from 'axios';
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useNavigationStore } from 'src/stores/useNavigationStore';
import { toLowerCamel } from 'src/filters';
import routes from 'src/router/modules';
import LeftMenuItem from './LeftMenuItem.vue';
import LeftMenuItemGroup from './LeftMenuItemGroup.vue';

const { t } = useI18n();
const route = useRoute();
const quasar = useQuasar();
const navigation = useNavigationStore();

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

onMounted(async () => {
    await navigation.fetchPinned();
    getRoutes();
});

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) {
            navigation.addMenuItem(module, child, parent);
        }
    }
}

const pinnedItems = computed(() => {
    return items.value.filter((item) => item.isPinned);
});

const items = ref([]);
function getRoutes() {
    if (props.source === 'main') {
        const modules = Object.assign([], navigation.getModules().value);

        for (const item of modules) {
            const moduleDef = routes.find((route) => toLowerCamel(route.name) === item.module);
            item.children = [];

            if (!moduleDef) continue;

            addChildren(item.module, moduleDef, item.children);
        }

        items.value = modules;
    }

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

        if (!moduleDef) return;

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

async function togglePinned(item, event) {
    if (event.defaultPrevented) return;
    event.preventDefault();
    event.stopPropagation();

    const data = { moduleName: item.module };
    const response = await axios.post('StarredModules/toggleStarredModule', data);

    item.isPinned = false;

    if (response.data && response.data.id) {
        item.isPinned = true;
    }

    navigation.togglePinned(item.module);

    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
    });
}
</script>

<template>
    <q-list padding>
        <template v-if="$props.source === 'main'">
            <q-item-label header>
                {{ t('globals.pinnedModules') }}
            </q-item-label>
            <template v-for="item in pinnedItems" :key="item.name">
                <template v-if="item.children">
                    <left-menu-item-group :item="item" group="pinnedModules" class="pinned">
                        <template #side>
                            <q-btn
                                v-if="item.isPinned === true"
                                @click="togglePinned(item, $event)"
                                icon="vn:pin_off"
                                size="xs"
                                flat
                                round
                            >
                                <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
                            </q-btn>
                            <q-btn
                                v-if="item.isPinned === false"
                                @click="togglePinned(item, $event)"
                                icon="vn:pin"
                                size="xs"
                                flat
                                round
                            >
                                <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
                            </q-btn>
                        </template>
                    </left-menu-item-group>
                </template>

                <left-menu-item v-if="!item.children" :item="item" />
            </template>
            <q-separator />
            <q-expansion-item :label="t('moduleIndex.allModules')">
                <template v-for="item in items" :key="item.name">
                    <template v-if="item.children">
                        <left-menu-item-group :item="item" group="modules">
                            <template #side>
                                <q-btn
                                    v-if="item.isPinned === true"
                                    @click="togglePinned(item, $event)"
                                    icon="vn:pin_off"
                                    size="xs"
                                    flat
                                    round
                                >
                                    <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
                                </q-btn>
                                <q-btn
                                    v-if="item.isPinned === false"
                                    @click="togglePinned(item, $event)"
                                    icon="vn:pin"
                                    size="xs"
                                    flat
                                    round
                                >
                                    <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
                                </q-btn>
                            </template>
                        </left-menu-item-group>
                    </template>
                </template>
            </q-expansion-item>
            <q-separator />
        </template>
        <template v-if="$props.source === 'card'">
            <template v-for="item in items" :key="item.name">
                <left-menu-item v-if="!item.children" :item="item" />
            </template>
        </template>
    </q-list>
</template>

<style>
.pinned .icon-pin,
.pinned .icon-pin_off {
    visibility: hidden;
}

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