first commit

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.';