From fc0af956e7989e4c55418ebc0bc6a922e1991396 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 1 Oct 2023 09:13:12 +0200
Subject: [PATCH] feat: add option to click on the spool or name to open change
 spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Spoolman/SpoolmanPanelActiveSpool.vue     |  8 ++++++--
 src/components/panels/SpoolmanPanel.vue              |  2 +-
 src/components/ui/SpoolIcon.vue                      | 12 +++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
index 02cb9eccb..52dafdd20 100644
--- a/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
+++ b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
@@ -3,13 +3,13 @@
         <v-list-item-content :class="listItemContentClass">
             <div :class="overlineClass">#{{ id }} | {{ vendor }}</div>
             <v-list-item-title :class="listItemTitleClass">
-                {{ name }}
+                <span class="cursor-pointer" @click="clickSpool">{{ name }}</span>
             </v-list-item-title>
             <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
         </v-list-item-content>
 
         <v-list-item-avatar tile :size="avatarSize">
-            <spool-icon :color="color" />
+            <spool-icon :color="color" @click-spool="clickSpool" />
         </v-list-item-avatar>
     </v-list-item>
 </template>
@@ -115,6 +115,10 @@ export default class SpoolmanPanelActiveSpool extends Mixins(BaseMixin) {
     get subtitle() {
         return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
+
+    clickSpool() {
+        this.$emit('change-spool')
+    }
 }
 </script>
 
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index c6d33a73a..a05a1fa04 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -37,7 +37,7 @@
                     </v-col>
                 </v-row>
             </v-card-text>
-            <spoolman-panel-active-spool v-else />
+            <spoolman-panel-active-spool v-else @change-spool="showChangeSpoolDialog = true" />
         </panel>
         <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
         <spoolman-eject-spool-dialog :show-dialog="showEjectSpoolDialog" @close="showEjectSpoolDialog = false" />
diff --git a/src/components/ui/SpoolIcon.vue b/src/components/ui/SpoolIcon.vue
index 730da9111..d0b65e6c8 100644
--- a/src/components/ui/SpoolIcon.vue
+++ b/src/components/ui/SpoolIcon.vue
@@ -6,7 +6,9 @@
         x="0px"
         y="0px"
         viewBox="0 0 487.04 487.04"
-        xml:space="preserve">
+        xml:space="preserve"
+        class="cursor-pointer"
+        @click="clickSpool">
         <g>
             <circle :style="styleCircle1" cx="243.52" cy="243.52" r="232.97" />
             <circle :style="styleCircle2" cx="243.52" cy="243.52" r="112.5" />
@@ -20,9 +22,9 @@
 <script lang="ts">
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
-import BaseMixin from '../mixins/base'
+import BaseMixin from '@/components/mixins/base'
 
-@Component
+@Component({})
 export default class SpoolIcon extends Mixins(BaseMixin) {
     @Prop({ required: false, default: '#ff0' })
     declare readonly color: string
@@ -38,5 +40,9 @@ export default class SpoolIcon extends Mixins(BaseMixin) {
     get styleCircle3() {
         return { fill: '#343434' }
     }
+
+    clickSpool() {
+        this.$emit('click-spool')
+    }
 }
 </script>