fix: add missing context menu to dashboard jobqueue (#794)

src/components/panels/JobqueuePanel.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <panel :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
+        <panel ref="jobqueuePanel" :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
             <template #buttons>
                 <v-btn
                     v-if="queueState === 'paused'"
@@ -93,11 +93,8 @@
                             </template>
                         </td>
                         <td class=" ">
-                            {{ item.filename }}
+                            <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
-                            <template v-if="existMetadata(item)">
+                            <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
-                                <br />
-                                <small>{{ getDescription(item) }}</small>
-                            </template>
                         </td>
                     </tr>
                 </template>
@@ -106,8 +103,8 @@
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item @click="deleteJob(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiDelete }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
-                    {{ $t('JobQueue.Delete') }}
+                    {{ $t('JobQueue.RemoveFromQueue') }}
                 </v-list-item>
             </v-list>
         </v-menu>
@@ -121,7 +118,7 @@ import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiPlay, mdiPause, mdiFile, mdiDelete, mdiTrayFull } from '@mdi/js'
+import { mdiPlay, mdiPause, mdiFile, mdiPlaylistRemove, mdiTrayFull } from '@mdi/js'
 @Component({
     components: { Panel },
 })
@@ -129,11 +126,12 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPause = mdiPause
     mdiFile = mdiFile
-    mdiDelete = mdiDelete
+    mdiPlaylistRemove = mdiPlaylistRemove
     mdiTrayFull = mdiTrayFull
 
     formatFilesize = formatFilesize
 
+    private contentTdWidth = 100
     private contextMenu = {
         shown: false,
         touchTimer: undefined,
@@ -142,6 +140,10 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         item: {},
     }
 
+    declare $refs: {
+        jobqueuePanel: any
+    }
+
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs']
     }
@@ -158,34 +160,8 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal })
     }
 
-    refreshHistory() {
+    get styleContentTdWidth() {
-        this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+        return `width: ${this.contentTdWidth}px;`
-    }
-
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const days = Math.floor(totalSeconds / (3600 * 24))
-            if (days) {
-                totalSeconds %= 3600 * 24
-                output += days + 'd'
-            }
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
-
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
-        }
-
-        return '--'
     }
 
     showContextMenu(e: any, item: ServerHistoryStateJob) {
@@ -241,5 +217,18 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     existMetadata(item: ServerJobQueueStateJob) {
         return item?.metadata?.metadataPulled
     }
+
+    mounted() {
+        window.addEventListener('resize', this.eventListenerResize)
+        this.eventListenerResize()
+    }
+
+    destroyed() {
+        window.removeEventListener('resize', this.eventListenerResize)
+    }
+
+    eventListenerResize() {
+        this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
+    }
 }
 </script>

src/components/panels/Status/Jobqueue.vue

@@ -1,7 +1,7 @@
 <style lang="scss" scoped></style>
 
 <template>
-    <v-card flat>
+    <v-card ref="filesJobqueue" flat>
         <v-data-table
             :items="jobsTable"
             hide-default-footer
@@ -14,7 +14,11 @@
             </template>
 
             <template #item="{ item }">
-                <tr :key="item.job_id">
+                <tr
+                    :key="item.job_id"
+                    v-longpress:600="(e) => showContextMenu(e, item)"
+                    class="cursor-pointer"
+                    @contextmenu="showContextMenu($event, item)">
                     <td class="pr-0 text-center" style="width: 32px">
                         <template v-if="getSmallThumbnail(item) && getBigThumbnail(item)">
                             <v-tooltip
@@ -60,11 +64,8 @@
                                 <v-icon>{{ mdiPlay }}</v-icon>
                             </v-btn>
                         </template>
-                        {{ item.filename }}
+                        <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
-                        <template v-if="existMetadata(item)">
+                        <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
-                            <br />
-                            <small>{{ getDescription(item) }}</small>
-                        </template>
                     </td>
                 </tr>
             </template>
@@ -85,6 +86,14 @@
                 </tr>
             </template>
         </v-data-table>
+        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <v-list>
+                <v-list-item @click="removeFromJobqueue(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
+                    {{ $t('JobQueue.RemoveFromQueue') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
     </v-card>
 </template>
 
@@ -93,7 +102,7 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiFile, mdiPlay, mdiFileMultiple } from '@mdi/js'
+import { mdiFile, mdiPlay, mdiFileMultiple, mdiPlaylistRemove } from '@mdi/js'
 @Component({
     components: {},
 })
@@ -101,6 +110,20 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiFileMultiple = mdiFileMultiple
+    mdiPlaylistRemove = mdiPlaylistRemove
+
+    private contentTdWidth = 100
+    private contextMenu = {
+        shown: false,
+        touchTimer: undefined,
+        x: 0,
+        y: 0,
+        item: {},
+    }
+
+    declare $refs: {
+        filesJobqueue: any
+    }
 
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs'] ?? []
@@ -141,6 +164,10 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return output
     }
 
+    get styleContentTdWidth() {
+        return `width: ${this.contentTdWidth}px;`
+    }
+
     getSmallThumbnail(item: ServerJobQueueStateJob) {
         return this.$store.getters['server/jobQueue/getSmallThumbnail'](item)
     }
@@ -206,8 +233,38 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return '--'
     }
 
+    showContextMenu(e: any, item: ServerJobQueueStateJob) {
+        if (!this.contextMenu.shown) {
+            e?.preventDefault()
+            this.contextMenu.shown = true
+            this.contextMenu.x = e?.clientX || e?.pageX || window.screenX / 2
+            this.contextMenu.y = e?.clientY || e?.pageY || window.screenY / 2
+            this.contextMenu.item = item
+            this.$nextTick(() => {
+                this.contextMenu.shown = true
+            })
+        }
+    }
+
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
+
+    removeFromJobqueue(item: ServerJobQueueStateJob) {
+        this.$store.dispatch('server/jobQueue/deleteFromQueue', [item.job_id])
+    }
+
+    mounted() {
+        window.addEventListener('resize', this.eventListenerResize)
+        this.eventListenerResize()
+    }
+
+    destroyed() {
+        window.removeEventListener('resize', this.eventListenerResize)
+    }
+
+    eventListenerResize() {
+        this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32
+    }
 }
 </script>

src/locales/de.json

@@ -335,11 +335,11 @@
     },
     "JobQueue": {
         "AllJobs": "Alle Aufträge",
-        "Delete": "Löschen",
         "Empty": "Leer",
         "JobQueue": "Auftragswarteschlange",
         "Jobs": "Aufträge",
         "Pause": "Pause",
+        "RemoveFromQueue": "Von Auftragswarteschlange entfernen",
         "Start": "Start"
     },
     "Machine": {

src/locales/en.json

@@ -350,11 +350,11 @@
     },
     "JobQueue": {
         "AllJobs": "All Jobs",
-        "Delete": "Delete",
         "Empty": "Empty",
         "JobQueue": "Job Queue",
         "Jobs": "Jobs",
         "Pause": "Pause",
+        "RemoveFromQueue": "Remove from Queue",
         "Start": "Start"
     },
     "Machine": {