filters exec list

src/service/ScenarioService.js

@@ -17,10 +17,22 @@ export const ScenarioService = {
         return axios.get('/scenariosCross')
 
     },
-    getExecScenariosByUser() {
-        return axios.get('/scenariosByUser')
     
-    },
+    // getExecScenariosByUser(page = 0, size = 10) {
+    //         return axios.get('/executions', {
+    //             params: {
+    //                 page: page,
+    //                 size: size                }
+    //         });
+    //     }
+
+    getExecScenariosByUser(page = 0, size = 10, filters = {}, sortField, sortOrder) {
+        // Filtri potrebbero essere vuoti, quindi rimuoviamoli se non necessari
+        const requestBody = { page, size, ...filters, sortField, sortOrder }; 
+        return axios.post('/executions', requestBody);
+    }
+    
+    ,
     getScenariosForRE(){
         return axios.get('/getScenariosForRE')
     },

src/stores/ScenarioExecutionStore.js

@@ -3,34 +3,76 @@ import { computed, ref } from 'vue';
 import { ScenarioService } from '../service/ScenarioService';
 import { LoadingStore } from './LoadingStore';
 
-
 export const ScenarioExecutionStore = defineStore('scenario_execution_store', () => {
+    const lstScenarioExecution = ref([]);
+    const selectedExecScenario = ref(null);
+    const loadingStore = LoadingStore();
 
-    const lstScenarioExecution = ref([])
+    const totalRecords = ref(0);  // Numero totale di record
-    const selectedExecScenario = ref(null)
+    const currentPage = ref(0);   // Pagina corrente
-    const loadingStore = LoadingStore()
+    const pageSize = ref(10);     // Numero di record per pagina
+    const filters = ref({});      // Oggetto per memorizzare i filtri
 
-
+    // Funzione per recuperare le esecuzioni con filtri e paginazione
-    async function fetchScenariosExecution() {
+    async function fetchScenariosExecution(page = 0, size = 10, filters, sortField, sortOrder) {
         loadingStore.scenario_loading = true;
-        await ScenarioService.getExecScenariosByUser().then(resp => {
+        try {
-            lstScenarioExecution.value = resp.data;
+            console.log("Recupero delle esecuzioni con filtri:", page, size, filters, sortField, sortOrder);
+            const resp = await ScenarioService.getExecScenariosByUser(page, size, filters, sortField, sortOrder);  // Passiamo anche i filtri
+            lstScenarioExecution.value = resp.data.content;
+            totalRecords.value = resp.data.totalElements;
+            currentPage.value = page;
+            pageSize.value = size;
+        } catch (error) {
+            console.error("Errore nel recupero delle esecuzioni:", error);
+        } finally {
             loadingStore.scenario_loading = false;
-        });
+        }
-        
     }
+
     const scenariosExecution = computed(() => {
-        return lstScenarioExecution.value
+        return lstScenarioExecution.value;
-    })
+    });
 
     const getSelectedExecScenario = computed(() => {
-        return selectedExecScenario.value
+        return selectedExecScenario.value;
-    })
+    });
 
-    async function setSelectedExecScenario(execScenario){
+    const getCurrentPage = computed(() => {
-        selectedExecScenario.value = execScenario
+        return currentPage.value;
-        console.log("selectedExecScenario", selectedExecScenario.value);
+    });
-    }
 
-    return { fetchScenariosExecution, selectedExecScenario, lstScenarioExecution, scenariosExecution, getSelectedExecScenario, setSelectedExecScenario}
+    const getPageSize = computed(() => {
-  })
+        return pageSize.value;
+    });
+
+    const getTotalRecords = computed(() => {
+        return totalRecords.value;
+    });
+
+    const setSelectedExecScenario = (execScenario) => {
+        selectedExecScenario.value = execScenario;
+    };
+
+    // Funzione per aggiornare i filtri
+    const updateFilters = (newFilters) => {
+        console.log("Nuovi filtri:", newFilters);
+        filters.value = newFilters;
+        filters.value = encodeURIComponent(JSON.stringify(newFilters));
+        fetchScenariosExecution(currentPage.value, pageSize.value, filters.value);  // Ricarica con i nuovi filtri
+    };
+
+    return {
+        getCurrentPage,
+        getPageSize,
+        getTotalRecords,
+        fetchScenariosExecution,
+        selectedExecScenario,
+        lstScenarioExecution,
+        scenariosExecution,
+        getSelectedExecScenario,
+        setSelectedExecScenario,
+        updateFilters,  // Aggiunto per aggiornare i filtri
+        filters          // Rende disponibile i filtri come parte dello store
+    };
+});

src/views/pages/ScenarioExecList.vue

@@ -3,55 +3,46 @@
         <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
-                @click="back()" 
-                label="Load" 
-                class="flex items-center text-sm">
-                    <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
-                    <span>Back to Scenarios</span>
-            </Button>
-
-        </div> -->
         <h2 class="text-xl font-bold mt-6">Executions List</h2>
 
-        <!-- <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" scrollable scrollHeight="420px"
+             <DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
-            :loading="loading_data" 
-            class="mt-0"
-            :rows="10"                
-            paginator                 
-            :paginatorTemplate="paginatorTemplate" 
-            :totalRecords="scenario_execution_store.scenariosExecution.length" 
-            :first="first" 
-            filterDisplay="menu"           
-            @page="onPage" :globalFilterFields="['id', 'scenario.name', 'execSharedMap.user_input.selected_project', 'execSharedMap.user_input.selected_application']"> -->
-
-            <DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
                 @rowCollapse="onRowCollapse" :value="scenario_execution_store.scenariosExecution" 
 				:loading="loading_data"
-				:paginator="true" :rows="10"
+				:paginator="true" 
+                :lazy="true"
+                :rows="scenario_execution_store.getPageSize"
+                :first="scenario_execution_store.getCurrentPage * scenario_execution_store.getPageSize"
+                :totalRecords="scenario_execution_store.getTotalRecords"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
                 :rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
                 :sortOrder="1" filterDisplay="menu"
-                :globalFilterFields="['id', 'scenario.name', 'execSharedMap.user_input.selected_project', 'execSharedMap.user_input.selected_application']"
+                tableStyle="min-width: 70rem" 
-                tableStyle="min-width: 70rem" removableSort>
+                @page="onPage" 
+                @sort="onSort"
+                removableSort> 
+
 
             <template #header>
                 <div class="flex justify-end">
+
                     <IconField>
+
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="ID, name, project, app" />
+                        <InputText v-model="filters['_id'].constraints[0].value" placeholder="ID" />
+                        <Button label="Apply" @click="fetchData(0, 10)" />
+                        
+
                     </IconField>
                 </div>
             </template>
             
             
-            <Column field="scenario.name" header="Scenario Name" sortable
+            <Column field="scenario.name" header="Scenario Name" sortable :showFilterOperator="false" :showApplyButton="false" :showAddButton="false" :showClearButton="false"
-				style="min-width: 12rem">
+				style="min-width: 12rem"   >
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
                         {{ slotProps.data.scenario?.name }}
@@ -63,23 +54,13 @@
                     </div>
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by ScenarioName" />
-						placeholder="Search by File" />
+                    <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
-				</template>
+                </template>
+
 			</Column>
-            <Column field="execSharedMap.user_input.selected_project" header="Project Input" sortable
+
-				style="min-width: 12rem">
+            <Column field="execSharedMap.user_input.selected_application" header="Application Input" sortable :showApplyButton="false" :showAddButton="false" :showClearButton="false"
-				<template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        {{ slotProps.data.execSharedMap?.user_input?.selected_project }}
-                    </div>
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File" />
-				</template>
-			</Column>
-            <Column field="execSharedMap.user_input.selected_application" header="Application Input" sortable
 				style="min-width: 12rem">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
@@ -87,12 +68,14 @@
                     </div>
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+					<InputText v-model="filterModel.value" type="text"
-						placeholder="Search by File" />
+						placeholder="Search by Application" />
+                    <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
+
 				</template>
 			</Column>
-            <Column field="formattedEndDate" 
+            <!-- <Column field="startDate" 
-            filterField="endDate"  header="Start Date" sortable
+            filterField="startDate"  header="Start Date" sortable
 				style="min-width: 12rem">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
@@ -110,54 +93,47 @@
                      placeholder="Filter by Date"
                  />
 				</template>
-			</Column>
+			</Column> -->
+            <Column field="startDate" header="Start Date" filterField="startDate" dataType="date" style="min-width: 10rem" sortable>
+        <template #body="slotProps">
+            {{ moment(slotProps.data.startDate).format('DD-MM-YYYY HH:mm:ss') }}
+        </template>
+        <!-- <template #filter="{ filterModel, filterCallback }">
+            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+            <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
+        </template> -->
+    </Column>
            
-            <Column field="scenario.aiModel.apiProvider" header="Model AI" sortable
+            <Column field="scenario.aiModel.model" header="Model AI"
 				style="min-width: 12rem">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
-                        {{ slotProps.data.scenario?.aiModel?.apiProvider }}
+                        {{ slotProps.data.scenario?.aiModel?.model }}
+                        <i
+                            class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Provider: ' + slotProps.data?.scenario?.aiModel?.apiProvider + ' Token used: ' + slotProps.data?.usedTokens || 'No description available'"
+                        ></i>
                     </div>
 				</template>
-				<template #filter="{ filterModel, filterCallback }">
+				<!-- <template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+					<InputText v-model="filterModel.value" type="text"
-						placeholder="Search by File" />
+						placeholder="Search by Model" />
-				</template>
+                        <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
-			</Column>
+
-            <Column field="scenario.aiModel.model" header="Version" sortable
+				</template> -->
-				style="min-width: 12rem">
-				<template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        {{ slotProps.data.scenario?.aiModel?.model || 'N/A' }}
-                    </div>
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File" />
-				</template>
-			</Column>
-            <Column field="usedTokens" header="Tokens used" sortable
-				style="min-width: 12rem">
-				<template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        {{ slotProps.data.usedTokens || 'N/A' }}
-                    </div>
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File" />
-				</template>
 			</Column>
             <Column field="executedByUsername" header="Executed By" sortable
-				style="min-width: 12rem">
+				style="min-width: 12rem" :showApplyButton="false" :showAddButton="false" :showClearButton="false">
 				<template #body="slotProps">
                     <div class="flex items-center gap-2">
                         {{ slotProps.data.executedByUsername || 'N/A' }}
                     </div>
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+					<InputText v-model="filterModel.value" type="text"
-						placeholder="Search by File" />
+						placeholder="Search by Username" />
+                        <Button label="Apply" @click="fetchDataWithFilters(filterCallback)" />
+
 				</template>
 			</Column>
             <Column field="rating" header="Rating">
@@ -195,7 +171,6 @@ import ProgressSpinner from 'primevue/progressspinner';
 import { useToast } from 'primevue/usetoast';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ScenarioService } from '../../service/ScenarioService.js';
 import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
 import { UserPrefStore } from '../../stores/UserPrefStore.js';
 
@@ -217,38 +192,33 @@ const listScenarios = ref([]);
 const scenario_execution_store = ScenarioExecutionStore();
 const toast = useToast();
 const userPrefStore = UserPrefStore();
+const records = ref(788);
+const actualPage = ref(0);
+const actualPageSize = ref(10);
+const sortField = ref(null);
+const sortOrder = ref(null);
+
 
 
 
 const filters = ref({
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    '_id': { operator: FilterOperator.AND,
-    'id': { value: null, matchMode: FilterMatchMode.CONTAINS },
+        constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
+    },
     'scenario.name': {
         operator: FilterOperator.AND,
         constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
      },
-    'execSharedMap.user_input.selected_project': {
-        operator: FilterOperator.AND,
-        constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS }]
-    },
     'execSharedMap.user_input.selected_application': { 
         operator: FilterOperator.AND, 
         constraints: [{
-        value: null, matchMode: FilterMatchMode.CONTAINS 
+        value: userPrefStore.getSelApp.fe_name, matchMode: FilterMatchMode.CONTAINS 
         }]
     },
-    'scenario.aiModel.apiProvider': {
-        operator: FilterOperator.AND,
-        constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
-     },
     'scenario.aiModel.model': {
         operator: FilterOperator.AND,
         constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
      },
-    'usedTokens': {
-        operator: FilterOperator.AND,
-        constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }]
-     },
 
     'executedByUsername': {
         operator: FilterOperator.AND,
@@ -263,10 +233,17 @@ const filters = ref({
 });
 
 onMounted(() => {
-    scenario_execution_store.fetchScenariosExecution()
     updateFilters();
 });
 watch(() => route.params.name, updateFilters);
+//  watch([() => filters.value], () => {
+//      scenario_execution_store.updateFilters(filters.value);  // Applica i filtri e carica i dati
+//  });
+
+//  watch([() => filters.value, () => first.value], () => {
+//      fetchData(Math.floor(first.value / scenario_execution_store.getPageSize), scenario_execution_store.getPageSize, filters.value);
+//  });
+
 
 function updateFilters() {
     const selectedScenario = userPrefStore.getSelScenario;
@@ -274,65 +251,63 @@ function updateFilters() {
     if (selectedScenario && route.params.name!=='all') {
         console.log('selectedScenario: im in');
         filters.value['scenario.name'].constraints[0].value = selectedScenario;
+   
     }else{
         filters.value['scenario.name'].constraints[0].value = null;
     }
+    fetchData(0, 10);
 }
 
-async function updateRating(rowData, newRating) {
+function fetchDataWithFilters(filterCallback) {
-    
+    filterCallback();
-        // Aggiorna il rating nell'oggetto prima di inviarlo
+    fetchData(0, actualPageSize.value);
-        rowData.rating = newRating.value;
-        console.log('data rating:', rowData);
-        // Mostra un loader se necessario
-        loading_data.value = true;
-        ScenarioService.updateScenarioExecRating(rowData).then((response) => {
-
-            console.log('response:', response);
-            if (response.data === "OK") {
-                console.log('Rating aggiornato con successo:', response.data);
-                scenario_execution_store.fetchScenariosExecution()
-                toast.add({
-                    severity: 'success', // Tipo di notifica (successo)
-                    summary: 'Successo', // Titolo della notifica
-                    detail: 'Rating updated with success.', // Messaggio dettagliato
-                    life: 3000 // Durata della notifica in millisecondi
-                });
-            } else {
-                console.error('Errore nell\'aggiornamento del rating', response.data);
-                toast.add({
-                 severity: 'error', // Tipo di notifica (errore)
-                 summary: 'Errore', // Titolo della notifica
-                 detail: 'Error updating rating. Try later.', // Messaggio dettagliato
-                 life: 3000 // Durata della notifica in millisecondi
-             });
-            }
-        }).catch((error) => {
-            console.error('Errore durante la chiamata al backend:', error);
-        }).finally(() => {
-            loading_data.value = false;
-        });
-        
-    
 }
 
+function onSort(event) {
+    console.log('Sorting event:', event);
+    
+    sortField.value = event.sortField;
+    sortOrder.value = event.sortOrder;
+
+    fetchData(0,actualPageSize.value);
+}
+
+const fetchData = async (page, size) => {
+    loading_data.value = true;
+
+    try {
+        scenario_execution_store.fetchScenariosExecution(page, size, filters.value, sortField.value, sortOrder.value);
+        //const response = await ScenarioService.getScenarioExecutionList(page, size, filtersForRequest);
+        // aggiorna il store con i risultati della query
+    } catch (error) {
+        console.error('Error fetching data', error);
+    } finally {
+        loading_data.value = false;
+    }
+};
+
 
 const goToScenarioExec = (execScenarioItem) => {
     console.log(execScenarioItem);
 
-    scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
+    router.push({ name: 'scenario-exec-history',  query: { id:execScenarioItem.id } });
-        router.push({ name: 'scenario-exec-history',  query: { id:execScenarioItem.id } });
+    
-    });
+    // scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
+    //     router.push({ name: 'scenario-exec-history',  query: { id:execScenarioItem.id } });
+    // });
 };
 
-function onPage(event) {
+ function onPage(event) {
-    first.value = event.first; 
+    actualPage.value = event.page;
-}
+    actualPageSize.value = event.rows;
-
+    fetchData(event.page, event.rows);
-//  onBeforeRouteLeave((to, from, next) => {
+    console.log('event onpage:', event);
-//    userPrefStore.setSelectedScenario(null);
+    //updateFilters();
-//    console.log('selectedScenario: im out');
+ }
-//  });
+// function onPage(event) {
+//     first.value = event.first; // Imposta la pagina corrente
+//     fetchData(Math.floor(first.value / scenario_execution_store.getPageSize), scenario_execution_store.getPageSize);
+// }
 
 </script>