Add pinia dependency for state management

src/views/pages/ScenarioList.vue

@@ -6,7 +6,7 @@
     <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">
+        <DataView :value="scenario_store.filteredScenarios" :layout="layout" paginator :rows="8">
         <template #header>
             <div class="header-container">
                 <div class="search-bar">
@@ -15,20 +15,11 @@
                         class="search-input"
                         type="search"
                         placeholder="Search"
-                        v-model="data.search"
+                        v-model="scenario_store.filterString"
                         size="medium"
                         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']" />
@@ -81,132 +72,30 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon } from '@heroicons/vue/24/solid';
-import { useAuth } from '@websanova/vue-auth/src/v3.js';
+    import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import DataView from 'primevue/dataview';
 import ProgressSpinner from 'primevue/progressspinner';
-import { computed, onMounted, reactive, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ScenarioService } from '../../service/ScenarioService.js';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ScenarioStore } from '../../stores/ScenarioStore.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());
 
-    
-        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
-        //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);
-            
-        })
-        
-    });*/
+    const scenario_store = ScenarioStore();
 
     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
-                });
+            scenario_store.fetchScenarios();
+            loading.value = false; 
         });
 
-    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) {
-
-            return data.scenarios.filter((item) => {
-                return data.search
-                    .toLowerCase()
-                    .split(" ")
-                    .every((v) => item.name.toLowerCase().includes(v));
-            });
-        } else {
-            return data.scenarios;
-        }
-    });
-
     const executeScenario = (id) => {
         router.push({ name: 'scenario-exec', params: { id: id } });
     }
+
 </script>
 
 <style scoped>