From f0814fd1c9b281cbb6839db34d5a0cd3b49b20f8 Mon Sep 17 00:00:00 2001
From: Emanuele Ferrelli <emanuele.ferrelli@accenture.com>
Date: Thu, 14 Nov 2024 09:05:36 +0100
Subject: [PATCH] fixed bug for AppBrowser and added field for execution list

---
 src/views/pages/ApplicationBrowser.vue | 80 ++++++++++++++++----------
 src/views/pages/ScenarioExecList.vue   | 15 ++++-
 2 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/src/views/pages/ApplicationBrowser.vue b/src/views/pages/ApplicationBrowser.vue
index 9233a72..3300ef6 100644
--- a/src/views/pages/ApplicationBrowser.vue
+++ b/src/views/pages/ApplicationBrowser.vue
@@ -6,18 +6,31 @@
     </div>
 
     <div class="grid grid-cols-12 gap-2">
-        <div class="col-span-4">
+        <div class="col-span-6">
             <div class="card folder-tree ">
                 <h5>File Browser</h5>
-                
-                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
- 
+                <div v-if="nodes && nodes.length">
+                    <div class="flex flex-wrap gap-2">
+                        <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
+                        <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
+                    </div>
+                    <Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
+                </div>
+                <div v-else class="self-center" style="flex: 1">
+                          <Skeleton v-for="(config, index) in skeletonConfigs"
+                                    :key="index"
+                                    :width="config.width"
+                                    :height="config.height"
+                                    class="mb-2" />
+                </div>
             </div>
-        </div>
-        <div class="col-span-8">
+        </div>   
+        <div class="col-span-6">
             <div class="card flow-codeviewer">  
                 <h5>File Explorer</h5>
-                <FileFlowViewer :file="selectedFile" :application="userPrefStore.getSelApp.fe_name"/>
+                <p v-if="nodes && nodes.length"> 
+                    <FileFlowViewer :file="selectedFile" :application="userPrefStore.getSelApp.fe_name"/>
+                </p>
             </div>
         </div>
     </div>
@@ -48,6 +61,7 @@ onMounted(() => {
 })
 
 function fetchApplicationData() {
+    nodes.value = null;
     LoadingStore.another_loading = true;
     ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name)
         .then(response => {
@@ -56,12 +70,11 @@ function fetchApplicationData() {
             nodes.value = tmp
             expandAll()   
             LoadingStore.another_loading = false;
-
         })
         .catch(error => {
             console.error("Error fetching application data:", error)
             LoadingStore.another_loading = false;
-
+            collapseAll();
         })
 }
 
@@ -72,7 +85,7 @@ function reloadPage() {
         fetchApplicationData();
 }
 
-watch(() => userPrefStore.getSelApp, reloadPage);
+watch(() => userPrefStore.getSelApp, reloadPage, { immediate: true });
 
 function onNodeSelect(e){
     if(e.icon == "pi pi-fw pi-file"){
@@ -82,14 +95,10 @@ function onNodeSelect(e){
 }
 
 
-
-
-
 const expandAll = () => {
     for (let node of nodes.value) {
-        expandNode(node);
+        expandNode(node, true);
     }
-
     expandedKeys.value = { ...expandedKeys.value };
 };
 
@@ -97,25 +106,20 @@ const collapseAll = () => {
     expandedKeys.value = {};
 };
 
-/*const expandNode = (node) => {
-    expandedKeys.value[node.key] = true;
-
+const expandNode = (node, expandAllChildren = false) => {
     if (node.children && node.children.length) {
-        for (let child of node.children) {
-            expandNode(child);
-        }
-    }
-};*/
-
-const expandNode = (node) => {
-    if (node.children && node.children.length) {
-        //node.children.forEach(child => {
+        expandedKeys.value[node.key] = true;
+        if (expandAllChildren) {
+            node.children.forEach(child => {
+                expandNode(child, expandAllChildren);
+            });
+        } else {
             expandedKeys.value[node.children.key] = true;
-       // });
+        }
     }
     expandedKeys.value = { ...expandedKeys.value };
 };
- 
+
 const collapseNode = (node) => {
     if (node.children && node.children.length) {
        node.children.forEach(child => {
@@ -125,6 +129,24 @@ const collapseNode = (node) => {
     expandedKeys.value = { ...expandedKeys.value };
 };
 
+const skeletonConfigs = [
+    { width: "30%", height: "3rem", inline: true },
+    { width: "95%", height: "3rem" },
+    { width: "50%", height: "1.5rem" },
+    { width: "60%", height: "1.5rem" },
+    { width: "70%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "70%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "70%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" },
+    { width: "70%", height: "1.5rem" },
+    { width: "80%", height: "1.5rem" }
+];
+
 </script>
 
 
diff --git a/src/views/pages/ScenarioExecList.vue b/src/views/pages/ScenarioExecList.vue
index 389e15a..f439eaa 100644
--- a/src/views/pages/ScenarioExecList.vue
+++ b/src/views/pages/ScenarioExecList.vue
@@ -51,10 +51,19 @@
             </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 header="Start Date">
+                <template #body="slotProps">
+                    {{ moment(slotProps.data.startDate).format('DD-MM-YYYY HH:mm:ss') }}
+                </template>
+            </Column>
+            <Column header="End Date">
+                <template #body="slotProps">
+                    {{ moment(slotProps.data.endDate).format('DD-MM-YYYY HH:mm:ss') }}
+                </template>
+            </Column>
             <Column field="scenario.aiModel.apiProvider" header="Model AI"></Column>
             <Column field="scenario.aiModel.model" header="Version"></Column>
+            <Column field="usedTokens" header="Tokens used"></Column>
             <Column header="Output Type">
                 <template #body="slotProps">
                     {{ slotProps.data.scenario.outputType || 'text' }}
@@ -94,7 +103,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
-
+import moment from 'moment';
 
 const first = ref(0);
 const router = useRouter();