first commit

src/layout/AppLayout.vue

@@ -8,8 +8,10 @@ import AppTopbar from './AppTopbar.vue';
 const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
 
 const outsideClickListener = ref(null);
+const page = ref("progetti");
 
 watch(isSidebarActive, (newVal) => {
+    //console.log("routerLink", routerLink);
     if (newVal) {
         bindOutsideClickListener();
     } else {
@@ -54,7 +56,7 @@ const isOutsideClicked = (event) => {
 
 <template>
     <div class="layout-wrapper" :class="containerClass">
-        <app-topbar></app-topbar>
+        <app-topbar :page="page"></app-topbar>
        <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
         </div>

src/layout/AppProfileMenu.vue

@@ -4,8 +4,9 @@
             <span class="config-panel-label">Welcome </span>
             <span v-if="user">
                 {{ user.name + " " + user.surname }}
-            </span>    
+            </span> 
-                <button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
+            <button @click="redirectProject()" class="p-button p-button-danger p-button-outlined">Projects</button>
+            <button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
         </div>
     </div>
 </template>
@@ -14,8 +15,15 @@
 
 import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
 
 const auth = useAuth();
 const user = computed(() => auth.user());
+const  router = useRouter();
+
+function redirectProject() {
+    router.push('/projects'); // Specifica il percorso per la pagina "Projects"
+}
 
 </script>

src/layout/AppTopbar.vue

@@ -9,8 +9,25 @@ import AppProfileMenu from './AppProfileMenu.vue';
 const auth     = useAuth();
 
 const  router = useRouter();
+const props = defineProps(['page']);
+
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
+
+/*const fetchData = async () => {
+  try {
+    const response = await axios.get('/userApplications'); 
+    items.value = response.data;
+  } catch (error) {
+    console.error('Errore durante il recupero dei dati:', error);
+  }
+};
+
+// Richiama il metodo all'inizializzazione del componente
+onMounted(() => {
+  fetchData();
+});*/
+
 </script>
 
 <template>
@@ -44,6 +61,7 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
+                
                 <button  @click="router.push('/canvas')" class="layout-topbar-action" >
                     <i class="pi pi-file-edit"></i>
                 </button >

src/router/index.js

@@ -15,6 +15,11 @@ const router = createRouter({
             {
                 path: 'scenario',
                 children: [
+                {
+                        path: '/projects',
+                        name: 'projects-list',
+                        component: () => import('@/views/pages/ProjectList.vue')
+                },
                 {
                     path: '/',
                     name: 'scenario-list',

src/service/ProjectService.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+export const ProjectService = {
+    
+    getUserProjects() {
+        return axios.get('/userProjects')
+
+    }
+,
+    getUserApplications() {
+        return axios.get('/userApplications')
+
+    }
+,
+    updateSelectedProject(data) {
+        return axios.post('/updateSelectedProject', data)
+
+    }
+
+   /* {
+        projectName: selectedProjectName 
+    }*/
+}

src/service/ScenarioService.js

@@ -4,5 +4,14 @@ export const ScenarioService = {
     getScenarios() {
         return axios.get('/scenarios')
 
-    }
+    },
+    getScenariosProject(projectId) {
+        return axios.post('/scenariosProject' , projectId)
+
+    },
+    getScenariosApplication(app) {
+        return axios.post('/scenariosByApp' , app)
+
+    },
+
 }

src/views/pages/ProjectList.vue

@@ -0,0 +1,199 @@
+<template>
+    <div>
+    <h1>Available Projects</h1>
+    </div>
+    <div v-if="loading" class="flex justify-center">
+    <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
+    </div>
+    <div v-else>
+        <DataView :value="filter" :layout="layout" paginator :rows="8">
+        <template #header>
+            <div class="header-container">
+                <div class="search-bar">
+                    <i class="pi pi-search search-icon"></i>           
+                    <InputText
+                        class="search-input"
+                        type="search"
+                        placeholder="Search"
+                        v-model="data.search"
+                        size="medium"
+                        variant="filled"
+                    />
+                </div>
+                <SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
+                    <template #option="{ option }">
+                        <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                    </template>
+                </SelectButton>
+            </div>
+        </template>
+
+        <template #list="slotProps">
+            <div class="flex flex-col space-y-4 mt-2">
+                <div v-for="(item, index) in slotProps.items" :key="index">
+                    <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
+                        :class="{ 'border-t border-gray-200 dark:border-gray-700': index !== 0 }">
+                            <div class="flex flex-col flex-grow">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.fe_name }}</h3>
+                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
+                            </div>
+                            <div class="mt-auto flex justify-end">    
+
+                                <Button @click="openProject(item)" label="Load" class="flex-auto md:flex-initial text-white">
+                                    <ChevronRightIcon class="w-5 h-10 text-white transition-transform transform hover:translate-x-1"/>
+                                </Button>
+                            </div>
+                    </div>
+                </div> 
+            </div>
+        </template>
+
+        <template #grid="slotProps">
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-2">
+                <div v-for="(item, index) in slotProps.items" :key="index" class="p-2">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col h-full">
+                        <div class="p-4 flex flex-col flex-grow">
+                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.fe_name }}</h3>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
+                        </div>
+                        <div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+                            <Button @click="openProject(item)" size="small" label="Load" class="flex-auto md:flex-initial text-white">
+                                <ChevronRightIcon class="w-6 h-5 text-white transition-transform transform hover:translate-x-1"/>                            
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
+import axios from 'axios';
+import DataView from 'primevue/dataview';
+import ProgressSpinner from 'primevue/progressspinner';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ProjectService } from '../../service/ProjectService.js';
+
+const auth = useAuth();
+const user = computed(() => auth.user());
+
+
+    const router = useRouter()
+    const layout = ref('grid');
+    const options = ref(['list', 'grid']);
+    const loading = ref(false)
+
+    onMounted(() => {
+        console.log("user:", user);
+        //loading.value = true
+
+        data.projects = user.value.lstProjects;
+       /* ProjectService.getUserProjects().then(resp=>{
+            data.projects = resp.data
+            console.log("data projects", data.projects);
+            loading.value = false
+        })*/
+        
+    });
+
+
+    const data = reactive({
+        search: null,
+        projects: []
+    })
+
+    const filter = computed(() => {
+
+        if (data.search) {
+
+            return data.projects.filter((item) => {
+                return data.search
+                    .toLowerCase()
+                    .split(" ")
+                    .every((v) => item.name.toLowerCase().includes(v));
+            });
+        } else {
+            return data.projects;
+        }
+    });
+
+    const openProject = (project) => {
+
+        console.log("id item", project);
+        ProjectService.updateSelectedProject(project).then(resp=>{
+            //data.projects = resp.data
+            console.info("data selected " + resp.data);
+
+            //auth.fetch();
+            //console.log(auth.user);
+
+            router.push({ name: 'scenario-list' });
+            
+        });
+        console.log("user before:", user.value);
+
+       /* try {
+            const response = axios.get('api/auth/fetch-user');
+            console.log("Resp fetch: ", response.data);
+            console.log("auth", auth);
+            
+            auth.setUser(response.data); // Aggiorna l'oggetto utente locale
+        } catch (error) {
+            console.error('Errore durante il recupero dei dati utente', error);
+        }*/
+
+//params: { selProject: project }
+        //router.push({ name: 'scenario-list' });
+    }
+
+    const fetchUserData = async () => {
+            try {
+        const response = await axios.get('api/auth/fetch-user');
+        const fetchedUser = response.data.data;
+        // Aggiorna le informazioni dell'utente in auth
+        //Object.assign(auth.user(), fetchedUser);
+        //user.value = response.data.data; // Aggiorna l'utente con i dati recuperati
+        console.log("fetch response:", response);
+        console.log("user after:", auth.user());
+        } catch (error) {
+            console.error('Error fetching user data:', error);
+        }
+}
+</script>
+
+<style scoped>
+    .header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    color:#334155;
+    margin-right: 5px;
+}
+
+.search-input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+    flex: 1;
+}
+
+.search-input:focus {
+    border: none;
+    box-shadow: none;
+    outline: none;
+}
+
+</style>

src/views/pages/ScenarioList.vue

@@ -20,6 +20,15 @@
                         variant="filled"
                     />
                 </div>
+                 <!-- Aggiungi il Dropdown qui -->
+                 <Dropdown 
+                        v-model="selectedApp"
+                        :options="dataApp.apps"
+                        optionLabel="fe_name"
+                        placeholder="Select an Option"
+                        class="dropdown-list"
+                        @change="reloadScenarios"
+                    />
                 <SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
                     <template #option="{ option }">
                         <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
@@ -30,6 +39,8 @@
 
         <template #list="slotProps">
             <div class="flex flex-col space-y-4 mt-2">
+                
+               
                 <div v-for="(item, index) in slotProps.items" :key="index">
                     <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
                         :class="{ 'border-t border-gray-200 dark:border-gray-700': index !== 0 }">
@@ -71,32 +82,113 @@
 
 <script setup>
 import { ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import DataView from 'primevue/dataview';
 import ProgressSpinner from 'primevue/progressspinner';
 import { computed, onMounted, reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { ScenarioService } from '../../service/ScenarioService.js';
 
     const router = useRouter()
     const layout = ref('grid');
     const options = ref(['list', 'grid']);
     const loading = ref(true)
+    const route = useRoute();
+    const auth = useAuth();
+const user = computed(() => auth.user());
 
     
-    onMounted(() => {
+        const fetchUserData = () => {
+            return new Promise((resolve, reject) => {
+                auth.fetch().then((fetchedUser) => {
+                    user.value = fetchedUser;
+                    resolve(user.value);
+                    
+                }).catch((error) => {
+                    reject(error);
+                });
+            });
+        };
+
+        const fetchScenarios = (selectedProject) => {
+            return ScenarioService.getScenariosProject(selectedProject).then(resp => {
+                data.scenarios = resp.data;
+            });
+        };
+
+    /*onMounted(() => {
         loading.value = true
-        ScenarioService.getScenarios().then(resp=>{
+        //const id = route.params.selProject;  
+        //fetchUserData();
+        console.log("user after 2:", user.value);
+
+        console.log("user scenario", user.value.selectedProject);
+
+        ScenarioService.getScenariosProject(user.value.selectedProject).then(resp=>{
+            console.log("response scenari", resp);
             data.scenarios = resp.data
             loading.value = false
         })
+        dataApp.apps = user.value.selectedProject.lstApplications;
+        console.log("list apps:", dataApp.apps);
+        /*ProjectService.getUserApplications().then(resp=>{
+            dataApp.apps = resp.data
+            console.info("data apps", resp);
+            
+        })
         
-    });
+    });*/
+
+    onMounted(() => {
+            loading.value = true;
+
+            fetchUserData()
+                .then(() => {
+                    console.log("user after fetch:", user.value);
+                    console.log("user scenario", user.value.selectedProject);
+
+                    // Assicurati che selectedProject sia definito
+                    if (user.value.selectedProject) {
+                        return fetchScenarios(user.value.selectedProject);
+                    } else {
+                        throw new Error('Nessun progetto selezionato.');
+                    }
+                })
+                .then(() => {
+                    loading.value = false;
+                    dataApp.apps = user.value.selectedProject.lstApplications;
+                    console.log("list apps:", dataApp.apps);
+                })
+                .catch((error) => {
+                    console.error("Errore:", error);
+                    loading.value = false; // Assicurati di fermare il caricamento anche in caso di errore
+                });
+        });
+
+    const reloadScenarios = () => {
+        console.log("selectedApp", selectedApp.value)
+
+        ScenarioService.getScenariosApplication(selectedApp.value).then(resp=>{
+            console.log("response scenari", resp);
+            data.scenarios = resp.data
+            //loading.value = false
+        })
+    };
+    
 
     const data = reactive({
         search: null,
         scenarios: []
     })
 
+    const dataApp = reactive({
+        search: null,
+        apps: []
+    })
+
+    const selectedApp = ref(null);  
+
+
     const filter = computed(() => {
 
         if (data.search) {

src/views/pages/auth/Login.vue

@@ -24,10 +24,28 @@ const login = async () => {
                     "username":username.value,
                     "password":password.value
                 },
-                redirect:'/',
+                //redirect:'/projects',
                 fetchUser: true,
                 //url: '/api/auth/login'
-            })
+            }).then((response) => {
+                console.log("1 user :" , response.data.data);
+               
+                // Controlla se selectedProject è nullo o un oggetto vuoto
+                if (!response.data.data.selectedProject) {
+                    // Se selectedProject è nullo o vuoto, reindirizza a '/projects'
+                    console.log("selP null" , response.data.data);
+                    router.push({ name: 'project-list' });
+                } else {
+                    // Se selectedProject è nullo o vuoto, reindirizza a '/projects'
+                    console.log("selP not null" , response.data.data);
+                    // Altrimenti, reindirizza a '/scenarios'
+                    router.push({ name: 'scenario-list' });
+                }
+
+                console.log("response", response);
+            }).catch((error) => {
+                console.log("error", error);
+            });
     } catch (err) {
         console.log( 'Error ' + err)
         error.value = 'Incorrect username or password. Please try again.';