hermione-fe/src/layout/AppMenu.vue

<script setup>
import { onMounted, ref, watch } from 'vue';

import { useRouter } from 'vue-router';
import { UserPrefStore } from '../stores/UserPrefStore.js';
import AppMenuItem from './AppMenuItem.vue';

const userPrefStore = UserPrefStore();
const route = useRouter();

const model = ref([
   
    {
        label: 'Scenarios',
        items: [
        { label: 'Available Scenarios', icon: 'pi pi-fw pi-id-card', to: '/home' },
        { label: 'Execution List', icon: 'pi pi-fw pi-list', command: () => {
                        route.push({path: '/executions/all'});
                    } },
    ]    },
    {
        label: '',
        items: []    } ,
    {
        label: 'Canvas',
        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-pencil', to: '/mdcanvas' }]
    },
    {
        label: 'Chat',
        items: [{ label: 'Chat', icon: 'pi pi-fw pi-comments', to: '/chat' }]
    }
 
]);

onMounted(() => {
 if(userPrefStore.user.role === 'ADMIN'){
     model.value[0].items.push({
         label: 'Dashboard',
         icon: 'pi pi-fw pi-chart-bar', 
        command: () => {
        route.push({ path: '/dashboard' });
        }
     });
 }
 });

// Funzione per aggiornare la sezione "Your Applications" in base a selectedApp
function updateApplicationsMenu() {
    const selectedApp = userPrefStore.getSelApp;
    console.log('selectedApp', selectedApp);

    if (selectedApp != null) {
        //Aggiorna il label dell'app
        model.value[1].label = selectedApp.fe_name;
        //Inizializza il menu principale
        model.value[1].items = [];

        //Se ci sono scenari disponibili, processali
        if (selectedApp.available_scenarios.length > 0) {
            const groupedScenarios = {};

            //Raggruppa gli scenari per categoria (solo se type non è null)
            selectedApp.available_scenarios.forEach((app) => {
                if (app.type) {
                    const type = app.type.trim();
                    if (!groupedScenarios[type]) {
                        groupedScenarios[type] = [];
                    }
                    groupedScenarios[type].push(app);
                } else {
                    //Se non ha categoria, lo trattiamo singolarmente
                    model.value[1].items.push(createScenarioItem(app));
                }
            });

            //Creazione del menu in base ai gruppi
            Object.keys(groupedScenarios).forEach((type) => {
                const scenarios = groupedScenarios[type];

                if (scenarios.length >= 2) {
                    //Se ci sono almeno 2 scenari nella stessa categoria, creiamo un gruppo
                    const typeItem = {
                        label: type,
                        icon: 'pi pi-fw pi-folder',
                        items: []
                    };

                    scenarios.forEach((app) => {
                        typeItem.items.push(createScenarioItem(app));
                    });

                    model.value[1].items.push(typeItem);
                } else {
                    //Se c'è solo un elemento, lo aggiungiamo direttamente
                    model.value[1].items.push(createScenarioItem(scenarios[0]));
                }
            });


            //Aggiungi "Rev Eng Code" alla fine della lista
            model.value[1].items.push({
                label: 'Application Code',
                icon: 'pi pi-fw pi-cog',
                command: () => {
                    route.push({ path: '/app-browser' });
                }
            });
        }
    } else {
        //Se selectedApp è nullo, svuota il menu
        model.value[1].label = '';
        model.value[1].items = [];
    }
}

function createScenarioItem(app) {
    if (app.associate_exec_list === 'Y') {
        return {
            label: app.label,
            icon: 'pi pi-fw pi-wrench',
            items: [
                {
                    label: 'Execution List',
                    icon: 'pi pi-fw pi-list',
                    to: '/executions/filter',
                    command: () => {
                        userPrefStore.setSelectedScenario(app.label);
                    }
                }
            ],
            command: () => {
                route.push({ path: `/home/scenario/exec/${app.scenario_id}` });
            }
        };
    } else {
        return {
            label: app.label,
            icon: 'pi pi-fw pi-wrench',
            command: () => {
                route.push({ path: `/scenario/exec/${app.scenario_id}` });
            }
        };
    }
}

// Monitora i cambiamenti in selectedApp dallo store
watch(() => userPrefStore.getSelApp, updateApplicationsMenu, { immediate: true });
</script>

<template>
    <ul class="layout-menu">
        <template v-for="(item, i) in model" :key="item">
            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
            <!--<li v-if="item.separator" class="menu-separator"></li>
            <hr v-if="i === 0" class="menu-separator"/>-->
        </template>
    </ul>
</template>

<style lang="scss" scoped></style>