feat(FileSystem): remember last sort order (#1406)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
fluidd-core · Apr 4, 2024 · 5cf9a49 · 5cf9a49
1 parent 63d0da3
commit 5cf9a49
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 19 deletions.
diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -12,7 +12,6 @@
       :dense="dense"
       disable-pagination
       :loading="loading"
-      sort-desc
       :custom-sort="customSort"
       :search="search"
       :show-select="bulkActions"
@@ -21,7 +20,9 @@
       item-key="name"
       height="100%"
       mobile-breakpoint="0"
-      sort-by="modified"
+      must-sort
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
       hide-default-footer
       class="rounded-0"
       fixed-header
@@ -369,6 +370,22 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
     return []
   }
 
+  get sortBy () {
+    return this.$store.state.config.uiSettings.fileSystem.sortBy[this.root] as string | null ?? 'modified'
+  }
+
+  set sortBy (value: string | null | undefined) {
+    this.$store.dispatch('config/updateFileSystemSortBy', { root: this.root, value: value ?? null })
+  }
+
+  get sortDesc () {
+    return this.$store.state.config.uiSettings.fileSystem.sortDesc[this.root] as boolean | null ?? true
+  }
+
+  set sortDesc (value: boolean | null | undefined) {
+    this.$store.dispatch('config/updateFileSystemSortDesc', { root: this.root, value: value ?? null })
+  }
+
   customSort (items: FileBrowserEntry[], sortBy: string[], sortDesc: boolean[], locale: string) {
     return this.$filters.fileSystemSort(items, sortBy, sortDesc, locale, this.textSortOrder)
   }

diff --git a/src/store/config/actions.ts b/src/store/config/actions.ts
@@ -161,6 +161,16 @@ export const actions: ActionTree<ConfigState, RootState> = {
     SocketActions.serverWrite(`uiSettings.fileSystem.activeFilters.${payload.root}`, state.uiSettings.fileSystem.activeFilters[payload.root])
   },
 
+  async updateFileSystemSortBy ({ commit, state }, payload: { root: string, value: string | null }) {
+    commit('setFileSystemSortBy', payload)
+    SocketActions.serverWrite(`uiSettings.fileSystem.sortBy.${payload.root}`, state.uiSettings.fileSystem.sortBy[payload.root])
+  },
+
+  async updateFileSystemSortDesc ({ commit, state }, payload: { root: string, value: boolean | null }) {
+    commit('setFileSystemSortDesc', payload)
+    SocketActions.serverWrite(`uiSettings.fileSystem.sortDesc.${payload.root}`, state.uiSettings.fileSystem.sortDesc[payload.root])
+  },
+
   /**
    * Toggle a tables header state based on its name and key.
    */

diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
@@ -10,6 +10,18 @@ import type { AppTablePartialHeader } from '@/types/tableheaders'
 import type { FileFilterType } from '../files/types'
 import consola from 'consola'
 
+const multipleVueSet = <T>(destination: object, source: T) => {
+  if (destination == null || source == null) {
+    return
+  }
+
+  for (const propertyName in source) {
+    if (typeof source[propertyName] === 'object') {
+      Vue.set(destination, propertyName, source[propertyName])
+    }
+  }
+}
+
 export const mutations: MutationTree<ConfigState> = {
   /**
    * Reset state
@@ -50,21 +62,11 @@ export const mutations: MutationTree<ConfigState> = {
       // Most settings should be merged, so start there.
       const processed = merge(state.uiSettings, payload)
 
-      // Apply overrides.
-      if (payload.general?.zAdjustDistances) {
-        Vue.set(processed.general, 'zAdjustDistances', payload.general.zAdjustDistances)
-      }
-
-      if (payload.general?.toolheadMoveDistances) {
-        Vue.set(processed.general, 'toolheadMoveDistances', payload.general.toolheadMoveDistances)
-      }
-
-      if (payload.editor?.autoEditExtensions) {
-        Vue.set(processed.editor, 'autoEditExtensions', payload.editor.autoEditExtensions)
-      }
-
-      if (payload.fileSystem?.activeFilters) {
-        Vue.set(processed.fileSystem, 'activeFilters', payload.fileSystem.activeFilters)
+      for (const propertyName in payload) {
+        multipleVueSet(
+          processed[propertyName as keyof UiSettings],
+          payload[propertyName as keyof UiSettings]
+        )
       }
 
       Vue.set(state, 'uiSettings', processed)
@@ -173,6 +175,14 @@ export const mutations: MutationTree<ConfigState> = {
     Vue.set(state.uiSettings.fileSystem.activeFilters, payload.root, payload.value)
   },
 
+  setFileSystemSortBy (state, payload: { root: string, value: string | null }) {
+    Vue.set(state.uiSettings.fileSystem.sortBy, payload.root, payload.value)
+  },
+
+  setFileSystemSortDesc (state, payload: { root: string, value: boolean | null }) {
+    Vue.set(state.uiSettings.fileSystem.sortDesc, payload.root, payload.value)
+  },
+
   /**
    * Puts us into layout mode
    */

diff --git a/src/store/config/state.ts b/src/store/config/state.ts
@@ -142,7 +142,9 @@ export const defaultState = (): ConfigState => {
         }
       },
       fileSystem: {
-        activeFilters: {}
+        activeFilters: {},
+        sortBy: {},
+        sortDesc: {}
       },
       toolhead: {
         forceMove: false,

diff --git a/src/store/config/types.ts b/src/store/config/types.ts
@@ -226,5 +226,7 @@ export interface GcodePreviewConfig {
 }
 
 export interface FileSystemConfig {
-  activeFilters: Record<string, FileFilterType[]>
+  activeFilters: Record<string, FileFilterType[]>;
+  sortBy: Record<string, string | null>;
+  sortDesc: Record<string, boolean | null>;
 }