Refresh apps with task info if exists

dashboard/src/components/AppsView.vue

@@ -11,9 +11,13 @@
     <div v-show="ready">
       <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
         <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
+          <a class="config" v-show="isOperator(app)" :href="`#/app/${app.id}/info`" @click="openAppInfo(app)"><Icon icon="fa-solid fa-cog" /></a>
           <img :src="API_ORIGIN + app.iconUrl"/>
-          <div class="label">{{ app.label || app.subdomain || app.fqdn }}</div>
-          <a class="config" v-show="isOperator(app)" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-cog" /></a>
+          <div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
+          <div class="apps-progress" v-show="isOperator(app)">
+            <div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
+            <div class="apps-progress-label">{{ installationStateLabel(app) }}</div>
+          </div>
         </a>
       </TransitionGroup>
 
@@ -75,7 +79,7 @@
 
 <script>
 
-import { Button, ButtonGroup, Icon, TableView, TextInput } from 'pankow';
+import { Button, ButtonGroup, Icon, ProgressBar, TableView, TextInput } from 'pankow';
 
 import { APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
@@ -98,6 +102,7 @@ export default {
     Button,
     ButtonGroup,
     Icon,
+    ProgressBar,
     TableView,
     TextInput,
   },
@@ -130,9 +135,7 @@ export default {
           label: 'Login',
           sort: true
         },
-        actions: {
-
-        }
+        actions: {}
       }
     };
   },
@@ -144,14 +147,18 @@ export default {
     }
   },
   methods: {
+    installationStateLabel: AppsModel.installationStateLabel,
+    installationActive: AppsModel.installationActive,
+    appProgressMessage: AppsModel.appProgressMessage,
+    openAppInfo(app) {
+      window.location.href = `#/app/${app.id}/info`;
+    },
     onOpenApp(app, event) {
       function stopEvent() {
         event.stopPropagation();
-        // event.preventDefault();
+        event.preventDefault();
       }
 
-      console.log(event)
-
       if (app.installationState !== ISTATES.INSTALLED) {
         if (app.installationState === ISTATES.ERROR && this.isOperator(app)) window.location.href = `#/app/${app.id}/repair`;
         return stopEvent();
@@ -166,7 +173,6 @@ export default {
         return stopEvent();
       }
 
-
       // if (app.pendingPostInstallConfirmation && $scope.appPostInstallConfirm) {
       //     $scope.appPostInstallConfirm.show(app);
       //     return stopEvent();
@@ -219,6 +225,34 @@ export default {
   height: 32px;
 }
 
+.apps-progress {
+  position: relative;
+  width: 90%;
+  text-align: center;
+  border-radius: 10px;
+  color: var(--pankow-text-color);
+}
+
+.apps-progress-filled {
+  background-color: var(--pankow-color-primary);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 10px;
+  z-index: 1;
+}
+
+.apps-progress-label {
+  position: relative;
+  z-index: 2;
+  opacity: 0.7;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .actions {
   text-align: right;
   visibility: hidden;
@@ -264,15 +298,15 @@ tr:hover .actions {
   height: 80px;
 }
 
-.label {
+.grid-item-label {
   font-size: 18px;
   font-weight: 100;
-  margin: 10px;
+  margin: 5px 0 5px 0;
   color: var(--pankow-text-color);
 }
 
-.grid-item:focus .label,
-.grid-item:hover .label {
+.grid-item:focus .grid-item-label,
+.grid-item:hover .grid-item-label {
   text-decoration: none;
   color: var(--accent-color);;
 }