toggle + menù app

src/views/pages/ScenarioList.vue

@@ -17,6 +17,11 @@
                         variant="filled"
                     />
                 </div>
+    
+    <div class="card flex justify-center">
+        <SelectButton v-model="scenario_store.typeFilter" :options="scenarioTypeOp" optionLabel="name" />
+    </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']" />
@@ -72,15 +77,30 @@ import DataView from 'primevue/dataview';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { ScenarioStore } from '../../stores/ScenarioStore.js';
+import { UserPrefStore } from '../../stores/UserPrefStore.js';
 
     const router = useRouter()
     const layout = ref('grid');
     const options = ref(['list', 'grid']);
 
     const scenario_store = ScenarioStore();
+    const userPrefStore = UserPrefStore();
+
+const scenarioTypeOp = ref([
+    { name: 'All', value: 'all' },
+    { name: 'Croos', value: 'cross' },
+    { name: 'Project', value: 'project' },
+    { name: 'Application', value: 'application' }
+    
+]);
+
 
     onMounted(() => {
-            scenario_store.fetchScenarios();
+            userPrefStore.fetchUserData().then(() => {
+
+                scenario_store.fetchScenarios();
+                scenario_store.fetchScenariosCross();
+            });
         });
 
     const executeScenario = (id) => {