feat: add option to click on the spool or name to open change spool d…

…ialog Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Oct 1, 2023 · fc0af95 · fc0af95
1 parent c478235
commit fc0af95
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>