Implemented: added the ui displays the file information(hotwax#680)

R-Sourabh · Sep 17, 2024 · 6700d52 · 6700d52
1 parent 92b4dc9
commit 6700d52
Showing 1 changed file with 35 additions and 5 deletions.
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
@@ -112,6 +112,30 @@
       </ion-checkbox>
     </ion-item>
   </div>
+  <section>
+    <ion-item lines="none">
+      <h1>Import logs</h1>
+      <ion-button  slot="end">View details</ion-button>
+    </ion-item>
+
+    <ion-list>
+      <ion-item>
+        <ion-icon slot="start" :icon="fileTrayFullOutline" />
+        <ion-label class="ion-text-wrap">Files received </ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" :icon="codeWorkingOutline" />
+        <ion-label class="ion-text-wrap">Files processed</ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-icon slot="start" :icon="warningOutline" />
+        <ion-label class="ion-text-wrap">Files with errors</ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+    </ion-list>
+  </section>
 
 </template>
 
@@ -138,15 +162,18 @@ import {
 import {
   addOutline,
   calendarClearOutline,
+  codeWorkingOutline,
   flashOutline,
+  fileTrayFullOutline,
   listCircleOutline,
   copyOutline,
   timeOutline,
   timerOutline,
   syncOutline,
   personCircleOutline,
   pinOutline,
-  refreshOutline
+  refreshOutline,
+  warningOutline
 } from "ionicons/icons";
 import JobHistoryModal from '@/components/JobHistoryModal.vue'
 import { Plugins } from '@capacitor/core';
@@ -525,10 +552,12 @@ export default defineComponent({
       Actions,
       addOutline,
       calendarClearOutline,
+      codeWorkingOutline,
       copyOutline,
       DateTime,
       listCircleOutline,
       flashOutline,
+      fileTrayFullOutline,
       hasPermission,
       isCustomRunTime,
       getNowTimestamp,
@@ -540,17 +569,18 @@ export default defineComponent({
       personCircleOutline,
       pinOutline,
       refreshOutline,
-      translate
+      translate,
+      warningOutline
     };
   }
 });
 </script>
 
 <style scoped>
-ion-list {
-  margin: 0 0 var(--spacer-base);
+section {
+  margin-top: var(--spacer-sm);
+  margin-bottom: var(--spacer-sm);
 }
-
 .actions > ion-button {
   margin: var(--spacer-sm);
 }