added spinner and check input

package-lock.json

@@ -34,7 +34,8 @@
                 "vue-highlight-code": "^0.2.0",
                 "vue-markdown-render": "^2.2.1",
                 "vue-router": "^4.4.0",
-                "vue3-markdown": "^1.1.9"
+                "vue3-markdown": "^1.1.9",
+                "vue3-spinner": "^0.0.17"
             },
             "devDependencies": {
                 "@primevue/auto-import-resolver": "^4.0.1",
@@ -6508,6 +6509,17 @@
             "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
             "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
         },
+        "node_modules/vue3-spinner": {
+            "version": "0.0.17",
+            "resolved": "https://registry.npmjs.org/vue3-spinner/-/vue3-spinner-0.0.17.tgz",
+            "integrity": "sha512-iiOa1rRxMOFWmEExdPYwAgY+EavW21kPa0G3khS3vRVnDxVV2QPXHugBucZxpuyNijMZxR4mq+/ryNV7ziHK2Q==",
+            "dependencies": {
+                "vue": "^3.2.41"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.41"
+            }
+        },
         "node_modules/w3c-keyname": {
             "version": "2.2.8",
             "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",

package.json

@@ -34,7 +34,8 @@
         "vue-highlight-code": "^0.2.0",
         "vue-markdown-render": "^2.2.1",
         "vue-router": "^4.4.0",
-        "vue3-markdown": "^1.1.9"
+        "vue3-markdown": "^1.1.9",
+        "vue3-spinner": "^0.0.17"
     },
     "devDependencies": {
         "@primevue/auto-import-resolver": "^4.0.1",

src/layout/AppTopbar.vue

@@ -10,6 +10,7 @@ import { UserPrefStore } from '../stores/UserPrefStore.js';
 
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { JellyfishLoader, RiseLoader } from "vue3-spinner";
 import AppConfigurator from './AppConfigurator.vue';
 import AppProfileMenu from './AppProfileMenu.vue';
 
@@ -78,10 +79,12 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
 
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
-                
+                <div v-if="loadingStore.isLoading">
-                <ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
+                    <!--<ProgressSpinner v-if="loadingStore.loadingType=='data'" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>-->
+                    <JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px"  />
+                    <RiseLoader  v-if="loadingStore.loadingType=='data'"    style="scale: 0.5; height: 10px; margin-top:5px"/>
 
-              
+                </div>
                 <button @click="router.push('/mdcanvas')"  class="layout-topbar-action" >
                     <i class="pi pi-pencil"></i>
                 </button >

src/main.js

@@ -20,6 +20,10 @@ import '@/assets/styles.scss';
 import '@/assets/tailwind.css';
 import { config } from 'md-editor-v3';
 
+import { LoadingStore } from './stores/LoadingStore.js';
+
+
+
 
 
 config({
@@ -53,6 +57,9 @@ var auth = createAuth({
 });
 
 axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'///
+
+
+
 console.log(import.meta.env.VITE_BACKEND_URL);
 
 const app = createApp(App);
@@ -78,3 +85,21 @@ app.use(auth);
 app.component('BlockViewer', BlockViewer);
 
 app.mount('#app');
+
+const loadingStore = LoadingStore()
+
+
+axios.interceptors.request.use(function (config) {
+    loadingStore.another_loading = true;
+    return config
+}, function (error) {
+    return Promise.reject(error);
+  });
+  
+axios.interceptors.response.use(function (response) {
+    loadingStore.another_loading = false;
+
+    return response;
+  }, function (error) {
+    return Promise.reject(error);
+  });

src/stores/LoadingStore.js

@@ -8,14 +8,26 @@ export const LoadingStore = defineStore('loading_store', () => {
     const scenario_loading = ref(false)
     const user_loading = ref(false)
     const another_loading = ref(false)
+    const exectuion_loading = ref(false)
     
     const  isLoading = computed(() => {
-        return scenario_loading.value || user_loading.value || another_loading.value
+        return scenario_loading.value || user_loading.value || another_loading.value || exectuion_loading.value
     })
 
+    const loadingType = computed(() => {        
+        if(exectuion_loading.value) return 'ai'
+
+        if(scenario_loading.value) return 'data'
+        if(user_loading.value) return 'data'
+        if(another_loading.value) return 'data'
+        return 'none'  
+    })  
+
     return {isLoading, 
             user_loading, 
             scenario_loading, 
-            another_loading
+            another_loading,
+            exectuion_loading,
+            loadingType
         }
 })

src/views/pages/ApplicationBrowser.vue

@@ -27,6 +27,7 @@
 
 import FileFlowViewer from '@/components/FileFlowViewer.vue';
 import { ApplicationCodeService } from '@/service/ApplicationCodeService';
+import { LoadingStore } from '@/stores/LoadingStore.js';
 import Tree from 'primevue/tree';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
@@ -39,6 +40,7 @@ const router = useRouter();
 const userPrefStore = UserPrefStore();
 //const selectedApp = userPrefStore.getSelApp;
 //const application=ref(selectedApp.fe_name)
+const loadingStore = LoadingStore()
 
 onMounted(() => {
     console.log("Mounted")
@@ -46,16 +48,20 @@ onMounted(() => {
 })
 
 function fetchApplicationData() {
-
+    LoadingStore.another_loading = true;
     ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name)
         .then(response => {
             const tmp = []
             tmp.push(response.data)
             nodes.value = tmp
             expandAll()   
+            LoadingStore.another_loading = false;
+
         })
         .catch(error => {
             console.error("Error fetching application data:", error)
+            LoadingStore.another_loading = false;
+
         })
 }
 

src/views/pages/ScenarioExec.vue

@@ -1,8 +1,5 @@
 <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">
                 <h1>
                     {{ scenario.name }}
@@ -24,8 +21,10 @@
                                         class="full-width-input"
                                     />
                                 </div>
-                            </div>
+                            </div> 
-                            <Button label="Send" @click="execScenario" class="mt-9 ml-4"  :disabled="!isInputFilled"/>
+                        </div> 
+                        <div class="flex justify-center">"
+                            <Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
                         </div>
                     </template>
                     <template v-else>
@@ -39,20 +38,22 @@
                                         v-model="formData[input.name]"
                                         :options="input.options"
                                         class="full-width-input"
+                                        :disabled="loadingStore.exectuion_loading"
                                     />
                                 </div>
                             </div>
                         </div>
-                        <div class="flex justify-end">
+                        <div class="flex justify-center">"
-                            <Button label="Submit" @click="execScenario" class=""/>
+                            <Button :disabled="loadingStore.exectuion_loading || !isInputFilled " label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
                         </div>
                     </template>
                 </div>
             </div>
-        </div>
+        
 
         <div v-if="loading_data" class="flex justify-center">
-            <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
+            <jellyfish-loader :loading="loadingStore.exectuion_loading"  scale="1" />
+            <!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
         </div>
         <div v-if="data_loaded">
             <Panel class="mt-6">
@@ -95,17 +96,19 @@
 <script setup>
 
 import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
+import { LoadingStore } from '@/stores/LoadingStore';
 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 Select from 'primevue/select';
 import Textarea from 'primevue/textarea';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { JellyfishLoader } from "vue3-spinner";
 
+const loadingStore = LoadingStore();
 
 
 const router = useRouter();
@@ -123,20 +126,29 @@ const debug_modal = ref(false);
 let pollingInterval = null;
 
 const isInputFilled = computed(() => {
-    const inputName = scenario.value.inputs[0]?.name;
+    var isFilled = true;
-    return inputName && formData.value[inputName] && formData.value[inputName].length > 0;
+    if(scenario.value.inputs === undefined) {
+        return false;
+    }
+    scenario.value.inputs.forEach(input => {
+         if(formData.value[input.name]  === undefined || formData.value[input.name] === '') {
+             isFilled= false;
+        }
+    });
+    return isFilled;
 });
 
 
 
-
 onMounted(() => {
     loading.value = true
     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
         });     
 });
@@ -159,6 +171,8 @@ onMounted(() => {
         loading_data.value = true;
         data_loaded.value = false;
 
+        loadingStore.exectuion_loading = true;
+
         const data = {
             scenario_id: scenario.value.id,
             inputs: { ...formData.value }
@@ -173,6 +187,8 @@ onMounted(() => {
             })
             .catch(error => {
                 console.error('Error executing scenario:', error);
+                loadingStore.exectuion_loading = false;
+
             });
     };
 
@@ -219,6 +235,9 @@ axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
     // Function to stop polling
     function stopPolling() {
         clearInterval(pollingInterval);
+        loadingStore.exectuion_loading = false;
+
+
         console.log("Polling stopped.");
     }