From 24dadf8530bda08ec88aa5624a816bd439a004c1 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 20 Oct 2024 20:24:44 +0100
Subject: [PATCH] feat: adds status column to job files list (#1512)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../widgets/filesystem/FileSystem.vue         |   1 +
 .../widgets/filesystem/FileSystemBrowser.vue  | 355 +++++++++---------
 .../widgets/history/JobHistoryItemStatus.vue  |  47 +--
 src/store/config/state.ts                     |   1 +
 src/store/files/types.metadata.ts             |   3 +
 src/store/files/types.ts                      |   2 +
 6 files changed, 201 insertions(+), 208 deletions(-)

diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
index ee16b438fb..67cc461755 100644
--- a/src/components/widgets/filesystem/FileSystem.vue
+++ b/src/components/widgets/filesystem/FileSystem.vue
@@ -319,6 +319,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     if (this.currentRoot === 'gcodes') {
       headers = [
         ...headers,
+        { text: this.$t('app.general.table.header.status'), value: 'history.status', configurable: true },
         { text: this.$t('app.general.table.header.height'), value: 'object_height', configurable: true },
         { text: this.$t('app.general.table.header.first_layer_height'), value: 'first_layer_height', configurable: true },
         { text: this.$t('app.general.table.header.layer_height'), value: 'layer_height', configurable: true },
diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
index c9770b6004..8de9f1bc94 100644
--- a/src/components/widgets/filesystem/FileSystemBrowser.vue
+++ b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -80,185 +80,178 @@
             {{ item.name }}
           </file-row-item>
 
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="object_height"
-          >
-            <span v-if="item.object_height !== undefined">
-              {{ $filters.getReadableLengthString(item.object_height) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="first_layer_height"
-          >
-            <span v-if="item.first_layer_height !== undefined">
-              {{ item.first_layer_height }} mm
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="layer_height"
-          >
-            <span v-if="item.layer_height !== undefined">
-              {{ item.layer_height }} mm
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="filament_name"
-          >
-            <span v-if="item.filament_name !== undefined">
-              {{ item.filament_name }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="filament_type"
-          >
-            <span v-if="item.filament_type !== undefined">
-              {{ item.filament_type }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="filament_total"
-          >
-            <span v-if="item.filament_total !== undefined">
-              {{ $filters.getReadableLengthString(item.filament_total) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="filament_weight_total"
-          >
-            <span v-if="item.filament_weight_total !== undefined">
-              {{ $filters.getReadableWeightString(item.filament_weight_total) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="history.filament_used"
-          >
-            <span v-if="item.history && item.history.filament_used !== undefined">
-              {{ $filters.getReadableLengthString(item.history.filament_used) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="nozzle_diameter"
-          >
-            <span v-if="item.nozzle_diameter !== undefined">
-              {{ item.nozzle_diameter }} mm
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="slicer"
-          >
-            <span v-if="item.slicer !== undefined">
-              {{ item.slicer }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="slicer_version"
-          >
-            <span v-if="item.slicer_version !== undefined">
-              {{ item.slicer_version }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="estimated_time"
-          >
-            <span v-if="item.estimated_time !== undefined">
-              {{ $filters.formatCounterSeconds(item.estimated_time) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="history.print_duration"
-          >
-            <span v-if="item.history && item.history.print_duration !== undefined">
-              {{ $filters.formatCounterSeconds(item.history.print_duration) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="history.total_duration"
-          >
-            <span v-if="item.history && item.history.total_duration !== undefined">
-              {{ $filters.formatCounterSeconds(item.history.total_duration) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="first_layer_bed_temp"
-          >
-            <span v-if="item.first_layer_bed_temp !== undefined">
-              {{ item.first_layer_bed_temp }}<small>°C</small>
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="first_layer_extr_temp"
-          >
-            <span v-if="item.first_layer_extr_temp !== undefined">
-              {{ item.first_layer_extr_temp }}<small>°C</small>
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="chamber_temp"
-          >
-            <span v-if="item.chamber_temp !== undefined">
-              {{ item.chamber_temp }}<small>°C</small>
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            v-if="root === 'gcodes'"
-            :headers="headers"
-            item-value="print_start_time"
-          >
-            <span v-if="item.print_start_time !== undefined && item.print_start_time !== null">
-              {{ $filters.formatDateTime(item.print_start_time * 1000) }}
-            </span>
-          </file-row-item>
+          <template v-if="root === 'gcodes'">
+            <file-row-item
+              :headers="headers"
+              item-value="history.status"
+            >
+              <span v-if="item.history && item.history.status !== undefined">
+                <job-history-item-status :job="item.history" />
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="object_height"
+            >
+              <span v-if="item.object_height !== undefined">
+                {{ $filters.getReadableLengthString(item.object_height) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="first_layer_height"
+            >
+              <span v-if="item.first_layer_height !== undefined">
+                {{ item.first_layer_height }} mm
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="layer_height"
+            >
+              <span v-if="item.layer_height !== undefined">
+                {{ item.layer_height }} mm
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="filament_name"
+            >
+              <span v-if="item.filament_name !== undefined">
+                {{ item.filament_name }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="filament_type"
+            >
+              <span v-if="item.filament_type !== undefined">
+                {{ item.filament_type }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="filament_total"
+            >
+              <span v-if="item.filament_total !== undefined">
+                {{ $filters.getReadableLengthString(item.filament_total) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="filament_weight_total"
+            >
+              <span v-if="item.filament_weight_total !== undefined">
+                {{ $filters.getReadableWeightString(item.filament_weight_total) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="history.filament_used"
+            >
+              <span v-if="item.history && item.history.filament_used !== undefined">
+                {{ $filters.getReadableLengthString(item.history.filament_used) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="nozzle_diameter"
+            >
+              <span v-if="item.nozzle_diameter !== undefined">
+                {{ item.nozzle_diameter }} mm
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="slicer"
+            >
+              <span v-if="item.slicer !== undefined">
+                {{ item.slicer }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="slicer_version"
+            >
+              <span v-if="item.slicer_version !== undefined">
+                {{ item.slicer_version }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="estimated_time"
+            >
+              <span v-if="item.estimated_time !== undefined">
+                {{ $filters.formatCounterSeconds(item.estimated_time) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="history.print_duration"
+            >
+              <span v-if="item.history && item.history.print_duration !== undefined">
+                {{ $filters.formatCounterSeconds(item.history.print_duration) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="history.total_duration"
+            >
+              <span v-if="item.history && item.history.total_duration !== undefined">
+                {{ $filters.formatCounterSeconds(item.history.total_duration) }}
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="first_layer_bed_temp"
+            >
+              <span v-if="item.first_layer_bed_temp !== undefined">
+                {{ item.first_layer_bed_temp }}<small>°C</small>
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="first_layer_extr_temp"
+            >
+              <span v-if="item.first_layer_extr_temp !== undefined">
+                {{ item.first_layer_extr_temp }}<small>°C</small>
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="chamber_temp"
+            >
+              <span v-if="item.chamber_temp !== undefined">
+                {{ item.chamber_temp }}<small>°C</small>
+              </span>
+            </file-row-item>
+
+            <file-row-item
+              :headers="headers"
+              item-value="print_start_time"
+            >
+              <span v-if="item.print_start_time !== undefined && item.print_start_time !== null">
+                {{ $filters.formatDateTime(item.print_start_time * 1000) }}
+              </span>
+            </file-row-item>
+          </template>
 
           <file-row-item
             :headers="headers"
@@ -290,11 +283,13 @@ import type { AppTableHeader } from '@/types'
 import FilesMixin from '@/mixins/files'
 
 import FileRowItem from './FileRowItem.vue'
+import JobHistoryItemStatus from '@/components/widgets/history/JobHistoryItemStatus.vue'
 import { SupportedImageFormats, SupportedVideoFormats } from '@/globals'
 
 @Component({
   components: {
-    FileRowItem
+    FileRowItem,
+    JobHistoryItemStatus
   }
 })
 export default class FileSystemBrowser extends Mixins(FilesMixin) {
diff --git a/src/components/widgets/history/JobHistoryItemStatus.vue b/src/components/widgets/history/JobHistoryItemStatus.vue
index c37d240aa8..2ec6ba590a 100644
--- a/src/components/widgets/history/JobHistoryItemStatus.vue
+++ b/src/components/widgets/history/JobHistoryItemStatus.vue
@@ -1,20 +1,18 @@
 <template>
-  <span>
-    <v-tooltip top>
-      <template #activator="{ on, attrs }">
-        <v-icon
-          v-bind="attrs"
-          small
-          :color="(job.exists) ? state : 'secondary'"
-          class="mr-1"
-          v-on="on"
-        >
-          {{ icon }}
-        </v-icon>
-      </template>
-      <span>{{ job.status }}</span>
-    </v-tooltip>
-  </span>
+  <v-tooltip top>
+    <template #activator="{ on, attrs }">
+      <v-icon
+        v-bind="attrs"
+        small
+        :color="(job.exists) ? state : 'secondary'"
+        class="mr-1"
+        v-on="on"
+      >
+        {{ icon }}
+      </v-icon>
+    </template>
+    <span>{{ job.status }}</span>
+  </v-tooltip>
 </template>
 
 <script lang="ts">
@@ -22,22 +20,13 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import FilesMixin from '@/mixins/files'
 import type { HistoryItem } from '@/store/history/types'
 
-type JobHistoryItemState = 'error' | 'warning' | 'success'
+type JobHistoryItemState = 'error' | 'warning' | 'success' | 'info'
 
 @Component({})
 export default class JobHistoryItemStatus extends Mixins(FilesMixin) {
   @Prop({ type: Object, required: true })
   readonly job!: HistoryItem
 
-  // get status () {
-  //   if (this.job.status === 'completed') return 'completed'
-  //   if (this.job.status === 'in_progress') return 'in_progress'
-  //   if (this.job.status.indexOf('_')) {
-  //     return this.job.status.split('_').pop()
-  //   }
-  //   return this.job.status
-  // }
-
   get icon () {
     const iconMap: Record<string, string> = {
       completed: '$checkedCircle',
@@ -67,10 +56,12 @@ export default class JobHistoryItemStatus extends Mixins(FilesMixin) {
         return 'warning'
 
       case 'completed':
-      case 'in_progress':
-      case 'printing':
         return 'success'
 
+      case 'printing':
+      case 'in_progress':
+        return 'info'
+
       default:
         return 'success'
     }
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
index c8f5f10dfd..1b4434872a 100644
--- a/src/store/config/state.ts
+++ b/src/store/config/state.ts
@@ -88,6 +88,7 @@ export const defaultState = (): ConfigState => {
       },
       tableHeaders: {
         gcodes_dashboard: [
+          { value: 'history.status', visible: false },
           { value: 'first_layer_extr_temp', visible: false },
           { value: 'first_layer_bed_temp', visible: false },
           { value: 'chamber_temp', visible: false },
diff --git a/src/store/files/types.metadata.ts b/src/store/files/types.metadata.ts
index 45c0aba41e..0ebea28a59 100644
--- a/src/store/files/types.metadata.ts
+++ b/src/store/files/types.metadata.ts
@@ -1,4 +1,7 @@
 export interface KlipperFileMeta {
+  modified: number | string;
+  size: number;
+  uuid?: string;
   chamber_temp?: number;
   estimated_time?: number;
   filament_name?: string;
diff --git a/src/store/files/types.ts b/src/store/files/types.ts
index f63b8e7dbf..74478ff49d 100644
--- a/src/store/files/types.ts
+++ b/src/store/files/types.ts
@@ -27,6 +27,7 @@ export interface KlipperFile {
   filename: string;
   modified: number | string;
   size: number;
+  uuid?: string;
   permissions?: '' | 'r' | 'rw';
   print_start_time?: number | null;
   job_id?: string | null;
@@ -51,6 +52,7 @@ export interface AppFile extends KlipperFile {
 }
 
 export interface AppFileWithMeta extends AppFile, KlipperFileMeta {
+  modified: number;
   history: HistoryItem;
 }