feat: allow ordering of gcode macros (#1041)

Signed-off-by: Kieran Eglin <kieran.eglin@gmail.com> Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>
fluidd-core · Feb 18, 2023 · 03f01d7 · 03f01d7
1 parent 29ccf27
commit 03f01d7
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 54 deletions.
diff --git a/src/components/settings/macros/MacroSettings.vue b/src/components/settings/macros/MacroSettings.vue
@@ -55,42 +55,56 @@
       </app-setting>
 
       <v-divider />
-
-      <template v-for="(macro, i) in macros">
-        <app-setting
-          :key="`macro-${macro.name}`"
-          :title="macro.name.toUpperCase()"
-          :accent-color="macro.color"
-          :r-cols="2"
-          @click="handleSettingsDialog(macro)"
+      <draggable
+        v-model="macros"
+        v-bind="dragOptions"
+      >
+        <section
+          v-for="(macro, i) in macros"
+          :key="macro.name"
         >
-          <template
-            v-if="macro.config.description && macro.config.description !== 'G-Code macro'"
-            #sub-title
+          <app-setting
+            :key="`macro-${macro.name}`"
+            :accent-color="macro.color"
+            :r-cols="2"
+            @click="handleSettingsDialog(macro)"
           >
-            <span
-              v-show="true"
-              class="mr-2"
+            <template #title>
+              <v-icon
+                class="handle"
+                left
+              >
+                $drag
+              </v-icon>
+
+              {{ macro.name.toUpperCase() }}
+            </template>
+
+            <template
+              v-if="macro.config.description && macro.config.description !== 'G-Code macro'"
+              #sub-title
             >
-              {{ macro.config.description }}
-            </span>
-          </template>
-
-          <v-switch
-            class="mt-0 pt-0"
-            :input-value="macro.visible"
-            color="primary"
-            hide-details
-            @click.stop
-            @change="handleMacroVisible(macro, $event)"
+              <span class="ml-1 mr-2">
+                {{ macro.config.description }}
+              </span>
+            </template>
+
+            <v-switch
+              class="mt-0 pt-0"
+              :input-value="macro.visible"
+              color="primary"
+              hide-details
+              @click.stop
+              @change="handleMacroVisible(macro, $event)"
+            />
+          </app-setting>
+
+          <v-divider
+            v-if="i < macros.length - 1 && macros.length > 0"
+            :key="`divider-${macro.name}`"
           />
-        </app-setting>
-
-        <v-divider
-          v-if="i < macros.length - 1 && macros.length > 0"
-          :key="`divider-${macro.name}`"
-        />
-      </template>
+        </section>
+      </draggable>
     </v-card>
 
     <macro-settings-dialog
@@ -103,6 +117,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import draggable from 'vuedraggable'
 import MacroSettingsDialog from './MacroSettingsDialog.vue'
 import { Macro, MacroCategory } from '@/store/macros/types'
 import store from '@/store'
@@ -119,7 +134,8 @@ const routeGuard = (to: any) => {
 
 @Component({
   components: {
-    MacroSettingsDialog
+    MacroSettingsDialog,
+    draggable
   }
 })
 export default class MacroSettings extends Vue {
@@ -131,13 +147,27 @@ export default class MacroSettings extends Vue {
     macro: null
   }
 
+  get dragOptions () {
+    return {
+      animation: 200,
+      handle: '.handle',
+      group: `macro-settings-${this.category.name}`,
+      ghostClass: 'ghost'
+    }
+  }
+
   get macros () {
     const id = this.categoryId
     const macros = this.$store.getters['macros/getMacrosByCategory'](id)
       .filter((macro: Macro) => (!this.search || this.search === '') ? true : macro.name.toLowerCase().includes(this.search.toLowerCase()))
+
     return macros
   }
 
+  set macros (macros: Macro[]) {
+    this.$store.dispatch('macros/saveAllOrder', macros)
+  }
+
   get categories (): MacroCategory[] {
     return this.$store.getters['macros/getCategories']
   }

diff --git a/src/store/macros/actions.ts b/src/store/macros/actions.ts
@@ -30,6 +30,19 @@ export const actions: ActionTree<MacrosState, RootState> = {
     SocketActions.serverWrite(Globals.MOONRAKER_DB.fluidd.ROOTS.macros.name + '.stored', state.stored)
   },
 
+  saveAllOrder ({ state, commit }, macros: Macro[]) {
+    // Commit the change...
+    macros.forEach((macro, index) => {
+      commit('setUpdateMacro', {
+        ...macro,
+        order: index
+      })
+    })
+
+    // Save to moonraker.
+    SocketActions.serverWrite(Globals.MOONRAKER_DB.fluidd.ROOTS.macros.name + '.stored', state.stored)
+  },
+
   saveAllOn ({ state, commit }, macros) {
     // Commit the change...
     commit('setUpdateAllVisible', { macros, visible: true })

diff --git a/src/store/macros/getters.ts b/src/store/macros/getters.ts
@@ -40,37 +40,31 @@ export const getters: GetterTree<MacrosState, RootState> = {
 
         return macro
       })
-      .sort((a, b) => a.name.localeCompare(b.name))
 
     return macros
   },
 
   // Gets visible macros, transformed. Should include the macro's config.
   // Is only used on the dashboard. Grouped by category.
   getVisibleMacros: (state, getters) => {
-    const macros = getters.getMacros as Macro[]
+    const defaultCategory = { id: '0', name: null }
+    const categories = [...state.categories, defaultCategory]
 
-    const macrosGrouped = macros
-      .filter(macro => macro.visible)
-      .reduce((groups, macro) => {
-        const key = macro.categoryId ?? '0'
-
-        if (key in groups) {
-          groups[key].push(macro)
-        } else {
-          groups[key] = [macro]
+    return categories
+      .map(({ id, name }) => {
+        return {
+          id,
+          name,
+          macros: getters.getMacrosByCategory(id).filter((macro: Macro) => macro.visible)
         }
+      })
+      .filter(category => category.macros.length > 0)
+      .sort((a, b) => {
+        if (!a.name) return 1
+        if (!b.name) return -1
 
-        return groups
-      }, {} as Record<string, Macro[]>)
-
-    return Object.entries(macrosGrouped)
-      .map(([id, macros]) => ({
-        id,
-        name: macros[0]?.category?.name,
-        macros
-      }))
-      .sort((a, b) => !a.name ? 1 : !b.name ? -1 : a.name.localeCompare(b.name))
+        return a.name.localeCompare(b.name)
+      })
   },
 
   /**
@@ -86,6 +80,15 @@ export const getters: GetterTree<MacrosState, RootState> = {
 
     return macros
       .filter(macro => macro.categoryId === id)
+      .sort((a: Macro, b: Macro) => {
+        // Sorts preferrentially by order, then by name
+        // This offers backward compatibility with macros that have no order
+        if ((a.order !== undefined && b.order !== undefined) && a.order !== b.order) {
+          return a.order - b.order
+        }
+
+        return a.name.localeCompare(b.name)
+      })
   },
 
   /**

diff --git a/src/store/macros/types.ts b/src/store/macros/types.ts
@@ -14,6 +14,7 @@ export interface Macro {
   disabledWhilePrinting?: boolean;
   color?: string;
   config?: any;
+  order?: number;
 }
 
 export interface MacroCategory {