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

2022-05-11 22:33:32 +02:00 · 2022-05-11 22:33:32 +02:00 · 6030a8b506
commit 6030a8b506
parent f0662b2e70
4 changed files with 94 additions and 48 deletions
--- a/src/components/panels/JobqueuePanel.vue
+++ b/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 }}
-                            <template v-if="existMetadata(item)">
-                                <br />
-                                <small>{{ getDescription(item) }}</small>
-                            </template>
+                            <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
+                            <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
                        </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>
-                    {{ $t('JobQueue.Delete') }}
+                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
+                    {{ $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() {
-        this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
-    }
-
-    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 '--'
+    get styleContentTdWidth() {
+        return `width: ${this.contentTdWidth}px;`
    }

    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>
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/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 }}
-                        <template v-if="existMetadata(item)">
-                            <br />
-                            <small>{{ getDescription(item) }}</small>
-                        </template>
+                        <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
+                        <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
                    </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>
--- a/src/locales/de.json
+++ b/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": {
--- a/src/locales/en.json
+++ b/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": {