history exec scenario page

src/router/index.js

@@ -29,10 +29,16 @@ const router = createRouter({
                     path: 'exec/:id',
                     name: 'scenario-exec',
                     component: () => import('@/views/pages/ScenarioExec.vue')
-                },{
+                },
+                {
+                    path: 'exec-history',
+                    name: 'scenario-exec-history',
+                    component: () => import('@/views/pages/OldScenarioExec.vue')
+                },
+                {
                     path: '/executions',
                     name: 'executions',
-                    component: () => import('@/views/pages/OldScenarioExec.vue')
+                    component: () => import('@/views/pages/ScenarioExecList.vue')
                 },
                 {
                     path: '/canvas',

src/service/ScenarioService.js

@@ -17,5 +17,9 @@ export const ScenarioService = {
         return axios.get('/scenariosCross')
 
     },
+    getExecScenariosByUser() {
+        return axios.get('/scenariosByUser')
+
+    }
 
 }

src/stores/ScenarioExecutionStore.js

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+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()
+
+
+    async function fetchScenariosExecution() {
+        loadingStore.scenario_loading = true;
+        await ScenarioService.getExecScenariosByUser().then(resp => {
+            lstScenarioExecution.value = resp.data;
+            loadingStore.scenario_loading = false;
+        });
+        
+    }
+    const scenariosExecution = computed(() => {
+        return lstScenarioExecution.value
+    })
+
+    const getSelectedExecScenario = computed(() => {
+        return selectedExecScenario.value
+    })
+
+    async function setSelectedExecScenario(execScenario){
+        selectedExecScenario.value = execScenario
+        console.log("selectedExecScenario", selectedExecScenario.value);
+    }
+ 
+    return { fetchScenariosExecution, selectedExecScenario, lstScenarioExecution, scenariosExecution, getSelectedExecScenario, setSelectedExecScenario}
+  })

src/views/pages/OldScenarioExec.vue

@@ -5,30 +5,15 @@
         <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>
-            <div class="flex mt-6">
-                <div class="card flex flex-col gap-4 w-full">
-                    <div class="input-container flex items-center" v-if="!data_loaded">
-                        <div class="flex-grow">
-                            <label ><h2>Execution Id</h2></label>
-                            <div class="input-wrapper">
-                                <InputText v-model="execution_id" class="full-width-input" />
-                            </div>
-                        </div>
-                        <Button label="Find" @click="retrieveScenarioExec" class="mt-9 ml-4" />
-                    </div>
-                    <h1>
-                    {{ scenario.name }}
-                    </h1>
-                </div>
             </div>
+          
         </div>
 
         <div v-if="loading_data" class="flex justify-center">
@@ -75,16 +60,14 @@
 <script setup>
 
 import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
-import { MdPreview } from 'md-editor-v3';
-import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
 import axios from 'axios';
 import JsonEditorVue from 'json-editor-vue';
+import { MdPreview } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
-import InputText from 'primevue/inputtext';
 import ProgressSpinner from 'primevue/progressspinner';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-
+import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
 
 const router = useRouter();
 const route = useRoute();
@@ -98,10 +81,17 @@ const formData = ref({});
 const exec_id = ref(null);
 const exec_scenario = ref({});
 const debug_modal = ref(false);
-const execution_id = ref("");
+const scenario_execution_store = ScenarioExecutionStore();
+const execution_id = scenario_execution_store.getSelectedExecScenario;
 
-const retrieveScenarioExec = () => {
+
-    const id = execution_id.value
+onMounted(() => {
+    console.log("scenario id: ", execution_id.id);
+    retrieveScenarioExec(execution_id.id)
+});
+
+const retrieveScenarioExec = (id) => {
+    //const id = execution_id.value.id;
     loading.value = true
 
     axios.get('/execution?id=' + id )

src/views/pages/ScenarioExecList.vue

@@ -0,0 +1,107 @@
+<template>
+    <div v-if="loading" class="flex justify-center">
+        <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 :value="scenario_execution_store.scenariosExecution" :loading="loading_data" class="mt-6">
+            <Column field="id" header="Execution ID" />
+            <Column field="scenario.name" header="Name" />
+            <Column field="" header="Execution Date" />
+            <Column field="execSharedMap.user_input.selected_project" header="Project Input" />
+            <Column field="execSharedMap.user_input.selected_application" header="Application Input" />
+            <Column field="scenario.id" header="Scenario ID" />
+            <Column field="" header="Model AI" />
+            <Column field="id">
+                <template #body="slotProps">
+                    <Button label="View" @click="goToScenarioExec(slotProps.data)" class="mt-9 ml-4" />
+                </template>
+            </Column>
+        </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>
+
+import 'md-editor-v3/lib/style.css';
+import ProgressSpinner from 'primevue/progressspinner';
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
+
+
+
+const router = useRouter();
+const route = useRoute();
+const value = ref('');
+const scenario = ref({});
+const scenario_output = ref(null);
+const loading = ref(false);
+const data_loaded = ref(false);
+const loading_data = ref(false);
+const formData = ref({});
+const exec_id = ref(null);
+const exec_scenario = ref({});
+const debug_modal = ref(false);
+const execution_id = ref("");
+const listScenarios = ref([]);
+const scenario_execution_store = ScenarioExecutionStore();
+
+onMounted(() => {
+    scenario_execution_store.fetchScenariosExecution()
+});
+
+
+const goToScenarioExec = (execScenarioItem) => {
+    console.log(execScenarioItem);
+    
+    scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
+        router.push({ name: 'scenario-exec-history'});
+    });
+};
+
+
+</script>
+
+<style scoped>
+.input-container {
+    margin-bottom: 1em;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center; 
+    gap: 0.5em; 
+    margin-top: 10px;
+}
+
+.full-width-input {
+    width: 100%;
+}
+
+
+.editor ol {
+list-style-type: decimal !important;
+}
+
+.editor ul {
+list-style-type: disc !important;
+}
+
+</style>