feat(Dashboard): add option to change length and filter files (#2051)

Co-authored-by: rackrick <[email protected]>

src/components/panels/Status/Gcodefiles.vue

@@ -38,14 +38,37 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         filesGcodeCard: Vue
     }
 
+    get filesLimit() {
+        return this.$store.state.gui.uiSettings.dashboardFilesLimit ?? 5
+    }
+
+    get filesFilter() {
+        return this.$store.state.gui.uiSettings.dashboardFilesFilter ?? []
+    }
+
     get gcodeFiles() {
         let gcodes = this.$store.getters['files/getAllGcodes'] ?? []
+
+        if (this.filesFilter.length > 0 && this.filesFilter.length < 3) {
+            gcodes = gcodes.filter((file: FileStateGcodefile) => {
+                if (this.filesFilter.includes('new') && file.last_status === null) return true
+                if (this.filesFilter.includes('completed') && file.last_status === 'completed') return true
+                if (
+                    this.filesFilter.includes('failed') &&
+                    file.last_status !== null &&
+                    file.last_status !== 'completed'
+                )
+                    return true
+
+                return false
+            })
+        }
+
         gcodes = gcodes
-            .slice()
             .sort((a: FileStateGcodefile, b: FileStateGcodefile) => {
                 return b.modified.getTime() - a.modified.getTime()
             })
-            .slice(0, 5)
+            .slice(0, this.filesLimit)
 
         const requestItems = gcodes.filter(
             (file: FileStateGcodefile) => !file.metadataRequested && !file.metadataPulled

src/components/panels/StatusPanel.vue

@@ -90,7 +90,7 @@
             </template>
             <v-tabs v-model="activeTab" fixed-tabs>
                 <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
-                <v-tab href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
+                <v-tab v-if="displayFilesTab" href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
                 <v-tab href="#jobqueue">
                     <v-badge :color="jobQueueBadgeColor" :content="jobsCount.toString()" :inline="true">
                         {{ $t('Panels.StatusPanel.Jobqueue') }}
@@ -102,7 +102,7 @@
                 <v-tab-item v-if="current_filename" value="status">
                     <status-panel-printstatus />
                 </v-tab-item>
-                <v-tab-item value="files">
+                <v-tab-item v-if="displayFilesTab" value="files">
                     <status-panel-gcodefiles />
                 </v-tab-item>
                 <v-tab-item value="jobqueue">
@@ -362,8 +362,15 @@ export default class StatusPanel extends Mixins(BaseMixin) {
         return this.layer_count !== null && (this.existsSetPauseAtLayer || this.existsSetPauseNextLayer)
     }
 
+    get displayFilesTab() {
+        const count = this.$store.state.gui.uiSettings.dashboardFilesLimit ?? 5
+
+        return count > 0
+    }
+
     mounted() {
         if (this.current_filename !== '') this.activeTab = 'status'
+        if (!this.displayFilesTab) this.activeTab = 'jobqueue'
     }
 
     @Watch('current_filename')

src/components/settings/SettingsUiSettingsTab.vue

@@ -282,6 +282,32 @@
                     :dynamic-slot-width="true">
                     <v-switch v-model="hideUpdateWarnings" hide-details class="mt-0" />
                 </settings-row>
+                <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.DashboardFilesLimit')"
+                    :sub-title="$t('Settings.UiSettingsTab.DashboardFilesLimitDescription')">
+                    <v-slider
+                        v-model.lazy="dashboardFilesLimit"
+                        hide-details
+                        :min="0"
+                        :max="10"
+                        :step="1"
+                        :label="
+                            $t('Settings.UiSettingsTab.DashboardFilesLimitLabel', { count: dashboardFilesLimit })
+                        " />
+                </settings-row>
+                <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.DashboardFilesFilter')"
+                    :sub-title="$t('Settings.UiSettingsTab.DashboardFilesFilterDescription')">
+                    <v-select
+                        v-model="dashboardFilesFilter"
+                        :items="dashboardFilesFilters"
+                        multiple
+                        hide-details
+                        dense
+                        outlined />
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -615,6 +641,39 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin, ThemeMixin)
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.hideUpdateWarnings', value: newVal })
     }
 
+    get dashboardFilesLimit() {
+        return this.$store.state.gui.uiSettings.dashboardFilesLimit ?? 5
+    }
+
+    set dashboardFilesLimit(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.dashboardFilesLimit', value: newVal })
+    }
+
+    get dashboardFilesFilter() {
+        return this.$store.state.gui.uiSettings.dashboardFilesFilter ?? []
+    }
+
+    set dashboardFilesFilter(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.dashboardFilesFilter', value: newVal })
+    }
+
+    get dashboardFilesFilters() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.DashboardFilesFilterNew'),
+                value: 'new',
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.DashboardFilesFilterFailed'),
+                value: 'failed',
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.DashboardFilesFilterCompleted'),
+                value: 'completed',
+            },
+        ]
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color) color = color.hex
         if (color.length > 7) color = color.substr(0, 7)

src/locales/en.json

@@ -1229,6 +1229,14 @@
             "ConfirmOnEmergencyStopDescription": "Show a confirmation dialog on Emergency Stop",
             "ConfirmOnPowerDeviceChange": "Require confirm on Device Power changes",
             "ConfirmOnPowerDeviceChangeDescription": "Show a confirmation dialog on Device Power changes",
+            "DashboardFilesFilter": "Dashboard Files Filter",
+            "DashboardFilesFilterCompleted": "Completed",
+            "DashboardFilesFilterDescription": "Filter the files in the Dashbord Status Panel by their last status.",
+            "DashboardFilesFilterFailed": "Failed",
+            "DashboardFilesFilterNew": "New",
+            "DashboardFilesLimit": "Dashboard Files Limit",
+            "DashboardFilesLimitDescription": "Select the maximum number of files to display on the dashboard Status Panel. (0 hides the files tab)",
+            "DashboardFilesLimitLabel": "{count} files",
             "DefaultNavigationState": "Navigation default state",
             "DefaultNavigationStateAlwaysClosed": "always closed",
             "DefaultNavigationStateAlwaysOpen": "always open",

src/store/gui/index.ts

@@ -183,6 +183,8 @@ export const getDefaultState = (): GuiState => {
             tempchartHeight: 250,
             hideUpdateWarnings: false,
             printstatusThumbnailZoom: true,
+            dashboardFilesLimit: 5,
+            dashboardFilesFilter: ['new', 'failed', 'completed'],
         },
         view: {
             blockFileUpload: false,

src/store/gui/types.ts

@@ -125,6 +125,8 @@ export interface GuiState {
         tempchartHeight: number
         hideUpdateWarnings: boolean
         printstatusThumbnailZoom: boolean
+        dashboardFilesLimit: number
+        dashboardFilesFilter: GuiStateUiSettingsDashboardFilesFilter[]
     }
     view: {
         blockFileUpload: boolean
@@ -214,3 +216,5 @@ export interface GuiStateLayoutoption {
     name: string
     visible: boolean
 }
+
+export type GuiStateUiSettingsDashboardFilesFilter = 'new' | 'failed' | 'completed'