updates exec scenario list + fix bug app browser

src/views/pages/ApplicationBrowser.vue

@@ -42,26 +42,26 @@ const userPrefStore = UserPrefStore();
 
 onMounted(() => {
     console.log("Mounted")
-    ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name).then(response => {
+    fetchApplicationData();
-        var tmp = []
+})
+
+function fetchApplicationData() {
+
+    ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name)
+        .then(response => {
+            const tmp = []
             tmp.push(response.data)
             nodes.value = tmp
             expandAll()   
         })
-})
+        .catch(error => {
-
+            console.error("Error fetching application data:", error)
-/*function  reloadPage() {
+        })
-    console.log("reloadPage", router);
+}
-    //router.replace({ path: router.currentRoute.value.path });
-    window.location.reload();
-}*/
 
 function reloadPage() {
-    // Controlla se il valore è cambiato
         console.log("reloadPage");
-        router.push({ name: 'app-browser'});
+        fetchApplicationData();
-        //window.location.reload(); // Ricarica la pagina solo se il valore cambia
-    
 }
 
 watch(() => userPrefStore.getSelApp, reloadPage, { immediate: true });

src/views/pages/ScenarioExecList.vue

@@ -3,6 +3,7 @@
         <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
     </div>
     <div v-else>
+        
         <div class="flex items-center justify-between p-2">
         
          <!--   <Button
@@ -14,34 +15,80 @@
                 </Button> -->
         </div>
         <h2 class="text-xl font-bold mt-6">Executions List</h2>
-        <DataTable :value="scenario_execution_store.scenariosExecution" 
+        <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" 
         :loading="loading_data" 
-        class="mt-6"
+        class="mt-0"
         :rows="10"                
         paginator                 
         :paginatorTemplate="paginatorTemplate" 
         :totalRecords="scenario_execution_store.scenariosExecution.length" 
         :first="first"            
-        @page="onPage"
+        @page="onPage" :globalFilterFields="['id', 'scenario.name', 'execSharedMap.user_input.selected_project', 'execSharedMap.user_input.selected_application']">
-        :filters="filters"
+
-        >
+        <template #header>
-            <Column field="id" header="Execution ID" filter filterPlaceholder="Search by ID" />
+                <div class="flex justify-end">
-            <Column field="scenario.name" header="Scenario Name" />
+                    <IconField>
-            <Column field="execSharedMap.user_input.selected_project" header="Project Input" />
+                        <InputIcon>
-            <Column field="execSharedMap.user_input.selected_application" header="Application Input" />
+                            <i class="pi pi-search" />
-            <Column field="" header="Start Date" />
+                        </InputIcon>
-            <Column field="" header="End Date" />
+                        <InputText v-model="filters['global'].value" placeholder="ID, name, project, app" />
-            <Column field="" header="Model AI" />
+                    </IconField>
-            <Column field="" header="Version" />
+                </div>
+            </template>
+            <Column field="id" header="Execution ID">
+            <!--    <template #filter="{ filterModel, filterCallback }">
+            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by ID" />
+        </template>-->
+            </Column>
+            <Column field="scenario.name" header="Scenario Name">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        {{ slotProps.data.scenario.name }}
+                    <i
+                        class="pi pi-info-circle text-blue-500 cursor-pointer"
+                        v-tooltip="slotProps.data.scenario.description"
+                    ></i>
+                    </div>
+                </template>
+                
+            </Column>
+            <Column field="execSharedMap.user_input.selected_project" header="Project Input">
+                
+            </Column>
+            <Column field="execSharedMap.user_input.selected_application" header="Application Input">
+                
+            </Column>  
+            <Column field="" header="Start Date">
+               
+            </Column>
+            <Column field="" header="End Date">
+                
+            </Column>
+            <Column field="" header="Model AI">
+               
+            </Column>
+
+            <Column field="" header="Version">
+                
+            </Column>
             <Column header="Output Type">
                 <template #body="slotProps">
                     {{ slotProps.data.scenario.outputType || 'text' }}
                 </template>
+                
             </Column>
-            <Column field="" header="Rating" />
+            <Column field="rating" header="Rating">
-            <Column field="id">
                 <template #body="slotProps">
-                    <Button label="View" @click="goToScenarioExec(slotProps.data)" class="mt-9 ml-4" />
+                    <Rating :value="slotProps.data.rating" :stars="5" readonly cancel="false" />
+                </template>
+                
+            </Column>
+            <Column field="id">
+
+                <template #body="slotProps">
+                    <div class="flex justify-center items-center h-full">
+                        <Button label="View" @click="goToScenarioExec(slotProps.data)"  class="mt-0 ml-0" />
+                    </div>
                 </template>
             </Column>
         </DataTable>
@@ -56,6 +103,7 @@
 
 <script setup>
 
+import { FilterMatchMode } from '@primevue/core/api';
 import 'md-editor-v3/lib/style.css';
 import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted, ref } from 'vue';
@@ -80,6 +128,14 @@ const execution_id = ref("");
 const listScenarios = ref([]);
 const scenario_execution_store = ScenarioExecutionStore();
 
+const filters = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'id': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'scenario.name': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'execSharedMap.user_input.selected_project': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'execSharedMap.user_input.selected_application': { value: null, matchMode: FilterMatchMode.CONTAINS }
+});
+
 onMounted(() => {
     scenario_execution_store.fetchScenariosExecution()
 });
@@ -97,14 +153,6 @@ function onPage(event) {
     first.value = event.first; 
 }
 
-const filters = ref({
-    id: { value: null, matchMode: 'contains' },
-    //scenario: { value: null, matchMode: 'contains' },
-    //'execSharedMap.user_input.selected_project': { value: null, matchMode: 'contains' },
-    //'execSharedMap.user_input.selected_application': { value: null, matchMode: 'contains' },
-    // Aggiungi altri filtri come preferisci
-});
-
 
 
 </script>
@@ -134,4 +182,5 @@ list-style-type: decimal !important;
 list-style-type: disc !important;
 }
 
+
 </style>