fixed Project application bug

src/views/pages/ScenarioExec.vue

@@ -104,7 +104,7 @@ import 'md-editor-v3/lib/style.css';
 import InputText from 'primevue/inputtext';
 import Select from 'primevue/select';
 import Textarea from 'primevue/textarea';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { JellyfishLoader } from "vue3-spinner";
 
@@ -139,19 +139,28 @@ const isInputFilled = computed(() => {
 });
 
 
-
 onMounted(() => {
-    loading.value = true
+    fetchScenario(route.params.id);
-    const id = route.params.id;  
+});
-    loadingStore.scenario_loading = true;
-    axios.get('/scenarios/' + id )
-        .then(response => {
-            loading.value = false
-            loadingStore.scenario_loading = false;
 
-            scenario.value  = response.data
+// Ricarica i dati quando cambia il parametro `id`
-        });     
+watch(() => route.params.id, fetchScenario);
+
+
+    //Function to fetch scenarios
+    function fetchScenario(id) {
+        loading.value = true;
+        axios.get(`/scenarios/${id}`)
+            .then(response => {
+                scenario.value = response.data;
+            })
+            .catch(error => {
+                console.error("Error fetching scenario:", error);
+            })
+            .finally(() => {
+                loading.value = false;
             });
+    }
 
     const getInputComponent = (type) => {
         switch (type) {
@@ -223,8 +232,6 @@ axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
 });
 }
 
-
-
     // Function to start polling
     function startPolling() {
     // Set polling interval (every 5 seconds in this case)

src/views/pages/ScenarioExecList.vue

@@ -3,18 +3,19 @@
         <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
+            <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> -->
+            </Button>
+            -->
         </div>
         <h2 class="text-xl font-bold mt-6">Executions List</h2>
+        
         <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" 
             :loading="loading_data" 
             class="mt-0"
@@ -35,11 +36,8 @@
                     </IconField>
                 </div>
             </template>
-            <Column field="id" header="Execution ID">
+            
-            <!--    <template #filter="{ filterModel, filterCallback }">
+            <Column field="id" header="Execution ID"></Column>
-            <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">
@@ -50,55 +48,42 @@
                         ></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="startDate" header="Start Date">
-               
-            </Column>
-            <Column field="endDate" header="End Date">
-                
-            </Column>
-            <Column field="scenario.aiModel.apiProvider" header="Model AI">
-               
-            </Column>
-
-            <Column field="scenario.aiModel.model" header="Version">
-                
             </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="startDate" header="Start Date"></Column>
+            <Column field="endDate" header="End Date"></Column>
+            <Column field="scenario.aiModel.apiProvider" header="Model AI"></Column>
+            <Column field="scenario.aiModel.model" header="Version"></Column>
             <Column header="Output Type">
                 <template #body="slotProps">
                     {{ slotProps.data.scenario.outputType || 'text' }}
                 </template>
-                
             </Column>
             <Column field="rating" header="Rating">
                 <template #body="slotProps">
                     <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>
             
+            <template #empty>
+                <tr>
+                    <td :colspan="9" class="text-center">No executions found</td>
+                </tr>
+            </template>
+        </DataTable>
     </div>
 
     <div v-if="loading_data" class="flex justify-center">
         <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
     </div>
-   
 </template>
 
 <script setup>