exec list pagination + filters + bugs

src/layout/AppMenu.vue

@@ -98,7 +98,7 @@ function updateApplicationsMenu() {
 }
 
 //Funzione per creare un item scenario con Execution List
-function createScenarioItem(app) {
+/*function createScenarioItem(app) {
     return {
         label: app.label,
         icon: 'pi pi-fw pi-wrench',
@@ -116,6 +116,38 @@ function createScenarioItem(app) {
             route.push({ path: `/scenario/exec/${app.scenario_id}` });
         }
     };
+}*/
+
+function createScenarioItem(app) {
+
+    if(app.associate_exec_list === 'Y'){
+        return {
+            label: app.label,
+            icon: 'pi pi-fw pi-wrench',
+            items: [
+                {
+                    label: 'Execution List',
+                    icon: 'pi pi-fw pi-list',
+                    to: '/executions/filter',
+                    command: () => {
+                        userPrefStore.setSelectedScenario(app.label);
+                    }
+                }
+            ],
+            command: () => {
+                route.push({ path: `/scenario/exec/${app.scenario_id}` });
+            }
+        };
+
+    }else{
+        return {
+            label: app.label,
+            icon: 'pi pi-fw pi-wrench',
+            command: () => {
+                route.push({ path: `/scenario/exec/${app.scenario_id}` });
+            }
+        };
+    }
 }
 
 

src/stores/ScenarioStore.js

@@ -96,6 +96,10 @@ export const ScenarioStore = defineStore('scenario_store', () => {
         return filteredScenario
     })
 
+    function setFilterString (value) {
+        filterString.value = value
+    }
+
     function resetStore() {
         projectScenarios.value = []
         globalScenarios.value = []
@@ -120,6 +124,7 @@ export const ScenarioStore = defineStore('scenario_store', () => {
         globalScenarios, 
         fetchScenariosForRE, 
         scenariosForRE,
-        resetStore
+        resetStore,
+        setFilterString
     }
 })

src/views/pages/ScenarioExecList.vue

@@ -28,7 +28,7 @@
                 <div class="flex justify-end">
 
                     <IconField>
-
+                        <Button label="Clear Filters" @click="clearFilters" class="mr-2" />
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
@@ -60,7 +60,7 @@
 
 			</Column>
 
-            <Column field="execSharedMap.user_input.selected_application" header="Application Input" sortable :showApplyButton="false" :showAddButton="false" :showClearButton="false"
+            <Column field="execSharedMap.user_input.selected_application" header="Application Input" sortable :showFilterOperator="false" :showApplyButton="false" :showAddButton="false" :showClearButton="false"
 				style="min-width: 12rem">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
@@ -123,7 +123,7 @@
 				</template> -->
 			</Column>
             <Column field="executedByUsername" header="Executed By" sortable
-				style="min-width: 12rem" :showApplyButton="false" :showAddButton="false" :showClearButton="false">
+				style="min-width: 12rem" :showApplyButton="false" :showFilterOperator="false" :showAddButton="false" :showClearButton="false">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
                         {{ slotProps.data.executedByUsername || 'N/A' }}
@@ -136,10 +136,14 @@
 
 				</template>
 			</Column>
-            <Column field="rating" header="Rating">
+            <Column field="rating" header="Rating" sortable :showApplyButton="false" :showFilterMatchModes="false"  :showFilterOperator="false" :showAddButton="false" :showClearButton="false">
                 <template #body="slotProps">
                     <Rating :modelValue="slotProps.data.rating"  :stars="5" :readonly="true"  />
                 </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search (1,2,3,4,5)" />
+                    <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
+                </template>
             </Column>
             <Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3'}">
                 <template #body="slotProps">
@@ -228,6 +232,11 @@ const filters = ref({
      'startDate': {
         operator: FilterOperator.AND,
         constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+     },
+
+     'rating': {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
      }
 
 });
@@ -245,6 +254,7 @@ watch(() => route.params.name, updateFilters);
 //  });
 
 
+
 function updateFilters() {
     const selectedScenario = userPrefStore.getSelScenario;
 
@@ -286,6 +296,17 @@ const fetchData = async (page, size) => {
     }
 };
 
+function clearFilters() {
+    filters.value = {
+        '_id': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+        'scenario.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+        'execSharedMap.user_input.selected_application': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+        'scenario.aiModel.model': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+        'executedByUsername': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+        'startDate': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }
+    };
+    fetchData(0, actualPageSize.value);
+}
 
 const goToScenarioExec = (execScenarioItem) => {
     console.log(execScenarioItem);

src/views/pages/ScenarioList.vue

@@ -100,6 +100,8 @@ const scenarioTypeOp = ref([
 
 
     onMounted(() => {
+
+            scenario_store.setFilterString('');
             userPrefStore.fetchUserData().then(() => {
                 scenario_store.fetchScenariosCross();
                 scenario_store.fetchScenarios();
@@ -108,6 +110,7 @@ const scenarioTypeOp = ref([
                 }
 
             });
+
         });
 
     const executeScenario = (id) => {