From 5f4045b4fb41bc89db14ff0358c4315e97b43206 Mon Sep 17 00:00:00 2001
From: Emanuele Ferrelli <emanuele.ferrelli@accenture.com>
Date: Mon, 24 Feb 2025 17:20:51 +0100
Subject: [PATCH] Refactor styles and update text for better clarity and
 consistency

---
 src/assets/layout/_main.scss         | 17 +++++-----
 src/assets/styles.scss               | 10 ++++++
 src/assets/tailwind.css              |  2 +-
 src/components/SingleClassViewer.vue | 10 +++---
 src/layout/AppMenu.vue               | 50 +++++++++++-----------------
 src/views/pages/ScenarioExec.vue     | 16 +++++----
 src/views/pages/ScenarioExecList.vue | 15 +++++++--
 7 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/src/assets/layout/_main.scss b/src/assets/layout/_main.scss
index f20a969..3c0b06d 100644
--- a/src/assets/layout/_main.scss
+++ b/src/assets/layout/_main.scss
@@ -22,13 +22,14 @@ a {
     min-height: 100vh;
 }
 
-h1 {
-    font-size: 1.4em !important;
-    font-weight: bold !important;
-}
+// comment below h1 and h2 to ensure good formattation, font-size too small
+// h1 {
+//     font-size: 1.4em !important;
+//     font-weight: bold !important;
+// }
 
-h2 {
-    font-size: 1em !important;
-    font-weight: bold !important;
-}
+// h2 {
+//     font-size: 1em !important;
+//     font-weight: bold !important;
+// }
 
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
index bc7aa13..83ce387 100644
--- a/src/assets/styles.scss
+++ b/src/assets/styles.scss
@@ -3,3 +3,13 @@
 @import 'primeicons/primeicons.css';
 @import '@/assets/demo/demo.scss';
 
+ h1 {
+     font-size: 1.4em !important;
+     font-weight: bold !important;
+ }
+
+//  h2 {
+//      font-size: 1em !important;
+//      font-weight: bold !important;
+//  }
+
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 1755e3a..e0f80af 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -9,5 +9,5 @@
     list-style-type: decimal !important;
   }
 .editor .md-editor-preview{
-    word-break: break-word
+    word-break: break-word;
   }
diff --git a/src/components/SingleClassViewer.vue b/src/components/SingleClassViewer.vue
index 61585f7..f754667 100644
--- a/src/components/SingleClassViewer.vue
+++ b/src/components/SingleClassViewer.vue
@@ -94,19 +94,19 @@
     </Tabs>
 
       <!-- Dialog per selezionare lo scenario -->
-      <Dialog v-model:visible="showScenarioDialog" header="Seleziona uno Scenario" :closable="false" :modal="true" style="width: 400px;">
+      <Dialog v-model:visible="showScenarioDialog" header="Select a Scenario" :closable="false" :modal="true" style="width: 400px;">
         <div>
-            <h5>Seleziona uno Scenario</h5>
+            <h5>Select a Scenario</h5>
             <Dropdown 
     v-model="selectedScenario" 
     :options="scenario_store.scenariosForRE" 
     optionLabel="name" 
-    placeholder="Seleziona uno scenario" 
+    placeholder="Select a Scenario" 
     class="w-full" 
   />        </div>
         <div class="flex justify-end mt-3">
-            <Button label="Annulla" severity="secondary" @click="showScenarioDialog = false" class="mr-2" />
-            <Button label="Esegui" severity="primary" :disabled="!selectedScenario" @click="executeScenario" />
+            <Button label="Cancel" severity="secondary" @click="showScenarioDialog = false" class="mr-2" />
+            <Button label="Execute" severity="primary" :disabled="!selectedScenario" @click="executeScenario" />
         </div>
     </Dialog>
    
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 4a42332..d0ce57b 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -35,30 +35,10 @@ function updateApplicationsMenu() {
     console.log("selectedApp", selectedApp);
 
     if (selectedApp != null) {
-        // Se selectedApp non è nullo, aggiorna gli item
+        // Aggiorna il label dell'app
         model.value[1].label = selectedApp.fe_name;
-
-        // Aggiorna gli item dell'app selezionata
-        model.value[1].items = [
-            {
-                label: 'Rev Eng Code', 
-                icon: 'pi pi-fw pi-wrench', 
-                command: () => {
-                        route.push({path: '/app-browser'});
-                    },
-                items: [
-                    {
-                        label: 'Execution List',  // Sottovoce per Rev Eng Code
-                        icon: 'pi pi-fw pi-list',  // Icona per la sottovoce
-                        to: '/executions',  // URL per la sottovoce
-                        command: () => {
-                            // Salva il nome dello scenario nello store
-                            userPrefStore.setSelectedScenario('Rev Eng Code');
-                        }
-                    }
-                ]
-            }
-        ];
+        // Inizializza l'array degli item come vuoto
+        model.value[1].items = [];
 
         // Se ci sono scenari disponibili, aggiungili come sottovoci
         if (selectedApp.available_scenarios.length > 0) {
@@ -66,23 +46,21 @@ function updateApplicationsMenu() {
                 let scenarioItem = {
                     label: app.label,
                     icon: 'pi pi-fw pi-wrench',
-                    
-                    items: [] , // Sub-items per ogni scenario
+                    items: [], // Sub-items per ogni scenario
                     command: () => {
-                        route.push({path: `/scenario/exec/${app.scenario_id}`});
+                        route.push({ path: `/scenario/exec/${app.scenario_id}` });
                     }
                 };
 
                 // Aggiungi la sottovoce "Execution List"
                 scenarioItem.items.push({
-                    label: 'Execution List',  // Etichetta della sottovoce
-                    icon: 'pi pi-fw pi-list',  // Icona per la sottovoce
-                    to: '/executions/filter', // URL per la sottovoce
+                    label: 'Execution List',
+                    icon: 'pi pi-fw pi-list',
+                    to: '/executions/filter',
                     command: () => {
                         // Salva il nome dello scenario nello store
                         userPrefStore.setSelectedScenario(app.label);
-                        
-                    }  
+                    }
                 });
 
                 // Aggiungi lo scenario alla lista principale
@@ -90,6 +68,15 @@ function updateApplicationsMenu() {
             });
         }
 
+        // Aggiungi "Rev Eng Code" alla fine della lista
+        model.value[1].items.push({
+            label: 'Rev Eng Code',
+            icon: 'pi pi-fw pi-wrench',
+            command: () => {
+                route.push({ path: '/app-browser' });
+            }
+        });
+
     } else {
         // Se selectedApp è nullo, svuota gli item
         model.value[1].label = '';
@@ -99,6 +86,7 @@ function updateApplicationsMenu() {
 
 
 
+
 // Monitora i cambiamenti in selectedApp dallo store
 watch(() => userPrefStore.getSelApp, updateApplicationsMenu, { immediate: true });
 
diff --git a/src/views/pages/ScenarioExec.vue b/src/views/pages/ScenarioExec.vue
index 813b9ea..1349437 100644
--- a/src/views/pages/ScenarioExec.vue
+++ b/src/views/pages/ScenarioExec.vue
@@ -1,15 +1,19 @@
 <template>
         
-            <div class="flex items-center justify-between p-2">
+            <div class="flex items-center justify-between p-1">
                 <h1>
                     {{ scenario.name }}
-                </h1>
-               
+                </h1>            
+            </div>
+            <div class="flex items-center justify-between p-1">
+                <h2>
+                    {{ scenario.description }}
+                </h2>
             </div>
             <div class="flex mt-6">
                 <div class="card flex flex-col gap-4 w-full">
-                    <h3>
-                    {{ scenario.description }}
+                <h3>
+                    {{ scenario.hint }}
                 </h3>
                     <template v-if="scenario.inputs">
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -21,7 +25,7 @@
                                         <b>{{ input.label }}</b>
                                         <i
                             class="pi pi-info-circle text-violet-600 cursor-pointer"
-                            v-tooltip="'Upload one PR document of .docx type. Mandatory if you want to execute scenario.'"
+                            v-tooltip="'Upload one document from the suggested types. Mandatory if you want to execute scenario.'"
                         ></i>
                                     </label>
                                     <div>
diff --git a/src/views/pages/ScenarioExecList.vue b/src/views/pages/ScenarioExecList.vue
index 0ab27d8..0542ada 100644
--- a/src/views/pages/ScenarioExecList.vue
+++ b/src/views/pages/ScenarioExecList.vue
@@ -16,7 +16,7 @@
         </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" :value="scenario_execution_store.scenariosExecution" scrollable scrollHeight="420px"
             :loading="loading_data" 
             class="mt-0"
             :rows="10"                
@@ -25,7 +25,18 @@
             :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']">
+            @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"
+                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" removableSort>
 
             <template #header>
                 <div class="flex justify-end">