From 2130a1ca0104a1c5ab961fb6b20842b3a985e046 Mon Sep 17 00:00:00 2001
From: Patrick Stainbrook <patrick@hohestadt.de>
Date: Sun, 15 Oct 2023 19:07:56 +0200
Subject: [PATCH] refact: move digit calculation to SpoolmanChangeSpoolDialog

Signed-off-by: Patrick Stainbrook <patrick@hohestadt.de>
---
 src/components/dialogs/SpoolmanChangeSpoolDialog.vue    | 8 +++++---
 src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue | 5 ++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 91706a747..14206b70a 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -55,7 +55,7 @@
                             <SpoolmanChangeSpoolDialogRow
                                 :key="item.id"
                                 :spool="item"
-                                :max_id="max_spool_id"
+                                :max_id_digits="max_spool_id_digits"
                                 @set-spool="setSpool" />
                         </template>
                     </v-data-table>
@@ -91,11 +91,13 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
         return this.$store.state.server.spoolman.spools ?? []
     }
 
-    get max_spool_id(): number {
-        return this.$store.state.server.spoolman.spools.reduce(
+    get max_spool_id_digits(): number {
+        const max_id = this.$store.state.server.spoolman.spools.reduce(
             (x: number, s: ServerSpoolmanStateSpool) => Math.max(x, s.id),
             0
         )
+
+        return max_id.toString().length
     }
 
     get headers() {
diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index 34a261abb..bd6a68631 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -39,7 +39,7 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 @Component({})
 export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     @Prop({ required: true }) declare readonly spool: ServerSpoolmanStateSpool
-    @Prop({ required: false }) declare readonly max_id: number
+    @Prop({ required: false }) declare readonly max_id_digits: number
 
     get color() {
         const color = this.spool.filament?.color_hex ?? '000'
@@ -49,10 +49,9 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
 
     get id() {
         // add leading zeros depending on max_id digit count
-        const digits: number = this.max_id.toString().length ?? 1
         let id: string = this.spool.id.toString()
 
-        while (id.length < digits) {
+        while (id.length < this.max_id_digits) {
             id = '0' + id
         }