From a353fb29970582e8d998085e9a7f06077eb459ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:17:28 +0100
Subject: [PATCH 01/19] feat: Add job queue entry position change feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/store/server/jobQueue/actions.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 705eb09c8..2c2009662 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -53,6 +53,34 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         })
     },
 
+    changePosition({ getters }, payload: { job_id: string; positionIndex: number }) {
+        const filenames: string[] = []
+        const jobs = getters['getJobs'] as ServerJobQueueStateJob[];
+
+        const jobToMoveIndex = jobs.findIndex((job: ServerJobQueueStateJob) => job.job_id === payload.job_id)
+
+        if (jobToMoveIndex === -1) {
+            return
+        }
+
+        const jobToMove = jobs[jobToMoveIndex]
+
+        jobs.splice(jobToMoveIndex, 1)
+        jobs.splice(payload.positionIndex, 0, jobToMove)
+
+        jobs.forEach((job: ServerJobQueueStateJob) => {
+            const count = (job.combinedIds?.length ?? 0) + 1
+            for (let i = 0; i < count; i++) {
+                filenames.push(job.filename)
+            }
+        })
+
+        Vue.$socket.emit('server.job_queue.post_job', {
+            filenames,
+            reset: true,
+        })
+    },
+
     deleteFromQueue(_, job_ids: string[]) {
         Vue.$socket.emit('server.job_queue.delete_job', { job_ids })
     },

From 5c9e2f3b152f323c4de3df47e6f6564ce70c6e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:20:04 +0100
Subject: [PATCH 02/19] feat: Add ability to move queue item to the queue top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/Status/JobqueueEntry.vue | 14 +++++++++++++-
 src/locales/en.json                            |  1 +
 src/locales/pl.json                            |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 6a1a6ea72..d347677e8 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -57,6 +57,10 @@
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
                 </v-list-item>
+                <v-list-item v-if="!isFirst" @click="moveToJobQueueTop(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
+                    {{ $t('JobQueue.MoveToJobQueueTop') }}
+                </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
@@ -118,7 +122,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
+import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop } from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
@@ -132,6 +136,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
+    mdiFormatVerticalAlignTop = mdiFormatVerticalAlignTop
 
     @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
@@ -259,6 +264,13 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
 
+    moveToJobQueueTop(item: ServerJobQueueStateJob) {
+        this.$store.dispatch('server/jobQueue/changePosition', {
+            job_id: item.job_id,
+            positionIndex: 0,
+        })
+    }
+
     openChangeCountDialog(item: ServerJobQueueStateJob) {
         this.dialogChangeCount.show = true
         this.dialogChangeCount.count = (item.combinedIds?.length ?? 0) + 1
diff --git a/src/locales/en.json b/src/locales/en.json
index 643ccf94a..b3fd6eca1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -392,6 +392,7 @@
     "JobQueue": {
         "AllJobs": "All Jobs",
         "Cancel": "Cancel",
+        "MoveToJobQueueTop": "Move to Queue's top",
         "ChangeCount": "Change count",
         "Count": "Count",
         "Empty": "Empty",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index da91fd503..0a2f46d6a 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -390,6 +390,7 @@
     "JobQueue": {
         "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
+        "MoveToJobQueueTop": "Przenieś na początek kolejki",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
         "Empty": "Puste",

From 041946c49650b0b28f45da2e53589d309818e156 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:35:26 +0100
Subject: [PATCH 03/19] feat: Allow to move queue item up
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/JobqueuePanel.vue       |  4 ++--
 src/components/panels/Status/Jobqueue.vue     |  1 +
 .../panels/Status/JobqueueEntry.vue           | 23 +++++++++++++------
 src/locales/en.json                           |  1 +
 src/locales/pl.json                           |  1 +
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index b7391e121..8e33b7447 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -51,8 +51,8 @@
                     <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
                 </template>
 
-                <template #item="{ item }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
+                <template #item="{ item, index }">
+                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 7de8ca37b..65d22e4ab 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -14,6 +14,7 @@
                 <jobqueue-entry
                     :key="item.job_id"
                     :item="item"
+                    :item-queue-index="index"
                     :is-first="index === 0"
                     :content-td-width="contentTdWidth" />
             </template>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index d347677e8..39faaa625 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -1,8 +1,8 @@
 <template>
     <tr
-        v-longpress:600="(e) => showContextMenu(e, item)"
+        v-longpress:600="(e) => showContextMenu(e, item, itemQueueIndex)"
         class="cursor-pointer"
-        @contextmenu="showContextMenu($event, item)">
+        @contextmenu="showContextMenu($event, item, itemQueueIndex)">
         <td class="pr-0 text-center" style="width: 32px">
             <template v-if="smallThumbnail && bigThumbnail">
                 <v-tooltip
@@ -57,10 +57,14 @@
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
                 </v-list-item>
-                <v-list-item v-if="!isFirst" @click="moveToJobQueueTop(contextMenu.item)">
+                <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, 0)">
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
                     {{ $t('JobQueue.MoveToJobQueueTop') }}
                 </v-list-item>
+                <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
+                    <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
+                    {{ $t('JobQueue.MoveQueueItemUp') }}
+                </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
@@ -122,7 +126,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop } from '@mdi/js'
+import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiArrowUpThin } from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
@@ -137,8 +141,10 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
     mdiFormatVerticalAlignTop = mdiFormatVerticalAlignTop
+    mdiArrowUpThin = mdiArrowUpThin
 
     @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
+    @Prop({ type: Number, required: true }) declare itemQueueIndex: number
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
     @Prop({ type: Boolean, default: false }) declare isFirst: boolean
     private contextMenu: {
@@ -146,11 +152,13 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         x: number
         y: number
         item: ServerJobQueueStateJob | any
+        itemQueueIndex: number | undefined
     } = {
         shown: false,
         x: 0,
         y: 0,
         item: {},
+        itemQueueIndex: undefined,
     }
 
     private dialogChangeCount: {
@@ -240,13 +248,14 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         return '--'
     }
 
-    showContextMenu(e: any, item: ServerJobQueueStateJob) {
+    showContextMenu(e: any, item: ServerJobQueueStateJob, itemQueueIndex: number) {
         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.contextMenu.itemQueueIndex = itemQueueIndex
             this.$nextTick(() => {
                 this.contextMenu.shown = true
             })
@@ -264,10 +273,10 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
 
-    moveToJobQueueTop(item: ServerJobQueueStateJob) {
+    changeQueueItemPosition(item: ServerJobQueueStateJob, positionIndex: number) {
         this.$store.dispatch('server/jobQueue/changePosition', {
             job_id: item.job_id,
-            positionIndex: 0,
+            positionIndex,
         })
     }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index b3fd6eca1..b1be9e95b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -393,6 +393,7 @@
         "AllJobs": "All Jobs",
         "Cancel": "Cancel",
         "MoveToJobQueueTop": "Move to Queue's top",
+        "MoveQueueItemUp" :"Move up",
         "ChangeCount": "Change count",
         "Count": "Count",
         "Empty": "Empty",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 0a2f46d6a..ab6c7fafa 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -391,6 +391,7 @@
         "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
         "MoveToJobQueueTop": "Przenieś na początek kolejki",
+        "MoveQueueItemUp": "Przenieś wyżej",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
         "Empty": "Puste",

From 3a970d61f79e3b9082ffc4ab92ce4f2adbfd2b19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:41:10 +0100
Subject: [PATCH 04/19] feat: Print button on the first queue item should be
 controlled via flag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/JobqueuePanel.vue        | 2 +-
 src/components/panels/Status/Jobqueue.vue      | 1 +
 src/components/panels/Status/JobqueueEntry.vue | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 8e33b7447..3e8c7c310 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -52,7 +52,7 @@
                 </template>
 
                 <template #item="{ item, index }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :content-td-width="contentTdWidth" />
+                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :is-first="index === 0" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 65d22e4ab..428875299 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -16,6 +16,7 @@
                     :item="item"
                     :item-queue-index="index"
                     :is-first="index === 0"
+                    :show-print-button-for-first="true"
                     :content-td-width="contentTdWidth" />
             </template>
             <template v-if="jobsRest.length" #body.append>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 39faaa625..cdeef656a 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -40,7 +40,7 @@
             </template>
         </td>
         <td class="pr-2">
-            <template v-if="isFirst && !printerIsPrinting">
+            <template v-if="isFirst && showPrintButtonForFirst && !printerIsPrinting">
                 <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
                     <v-icon>{{ mdiPlay }}</v-icon>
                 </v-btn>
@@ -147,6 +147,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     @Prop({ type: Number, required: true }) declare itemQueueIndex: number
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
     @Prop({ type: Boolean, default: false }) declare isFirst: boolean
+    @Prop({ type: Boolean, default: false }) declare showPrintButtonForFirst: boolean
     private contextMenu: {
         shown: boolean
         x: number

From 03b0379c561189c02f1629d6d129fd85d5cf73ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:43:38 +0100
Subject: [PATCH 05/19] feat: Allow to move queue item down
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/JobqueuePanel.vue        | 2 +-
 src/components/panels/Status/Jobqueue.vue      | 1 +
 src/components/panels/Status/JobqueueEntry.vue | 8 +++++++-
 src/locales/en.json                            | 1 +
 src/locales/pl.json                            | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 3e8c7c310..23f16ae79 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -52,7 +52,7 @@
                 </template>
 
                 <template #item="{ item, index }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :is-first="index === 0" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
+                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :is-first="index === 0" :is-last="index === jobs.length - 1" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 428875299..a5ba83067 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -16,6 +16,7 @@
                     :item="item"
                     :item-queue-index="index"
                     :is-first="index === 0"
+                    :is-last="index === (jobsTable.length + jobsRest.length) - 1"
                     :show-print-button-for-first="true"
                     :content-td-width="contentTdWidth" />
             </template>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index cdeef656a..d1fe55099 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -65,6 +65,10 @@
                     <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemUp') }}
                 </v-list-item>
+                <v-list-item v-if="!isLast" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
+                    <v-icon class="mr-1">{{ mdiArrowDownThin }}</v-icon>
+                    {{ $t('JobQueue.MoveQueueItemDown') }}
+                </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
@@ -126,7 +130,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiArrowUpThin } from '@mdi/js'
+import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiArrowUpThin, mdiArrowDownThin } from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
@@ -142,11 +146,13 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     mdiPlaylistRemove = mdiPlaylistRemove
     mdiFormatVerticalAlignTop = mdiFormatVerticalAlignTop
     mdiArrowUpThin = mdiArrowUpThin
+    mdiArrowDownThin = mdiArrowDownThin
 
     @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
     @Prop({ type: Number, required: true }) declare itemQueueIndex: number
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
     @Prop({ type: Boolean, default: false }) declare isFirst: boolean
+    @Prop({ type: Boolean, default: false }) declare isLast: boolean
     @Prop({ type: Boolean, default: false }) declare showPrintButtonForFirst: boolean
     private contextMenu: {
         shown: boolean
diff --git a/src/locales/en.json b/src/locales/en.json
index b1be9e95b..fe0de0047 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -394,6 +394,7 @@
         "Cancel": "Cancel",
         "MoveToJobQueueTop": "Move to Queue's top",
         "MoveQueueItemUp" :"Move up",
+        "MoveQueueItemDown" :"Move down",
         "ChangeCount": "Change count",
         "Count": "Count",
         "Empty": "Empty",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index ab6c7fafa..3f91a0cfb 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -392,6 +392,7 @@
         "Cancel": "Anuluj",
         "MoveToJobQueueTop": "Przenieś na początek kolejki",
         "MoveQueueItemUp": "Przenieś wyżej",
+        "MoveQueueItemDown": "Przenieś niżej",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
         "Empty": "Puste",

From 9f15847e4ee20a49ffa57909d5e87b9bb1313bb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 18:58:04 +0100
Subject: [PATCH 06/19] feat: Add ability to move queue item to the queue
 bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/Status/JobqueueEntry.vue | 7 ++++++-
 src/locales/en.json                            | 1 +
 src/locales/pl.json                            | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index d1fe55099..5f9dcfe18 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -69,6 +69,10 @@
                     <v-icon class="mr-1">{{ mdiArrowDownThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemDown') }}
                 </v-list-item>
+                <v-list-item v-if="!isLast" @click="changeQueueItemPosition(contextMenu.item, Infinity)">
+                    <v-icon class="mr-1">{{ mdiFormatVerticalAlignBottom }}</v-icon>
+                    {{ $t('JobQueue.MoveToJobQueueBottom') }}
+                </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
@@ -130,7 +134,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiArrowUpThin, mdiArrowDownThin } from '@mdi/js'
+import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiFormatVerticalAlignBottom, mdiArrowUpThin, mdiArrowDownThin } from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
@@ -145,6 +149,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
     mdiFormatVerticalAlignTop = mdiFormatVerticalAlignTop
+    mdiFormatVerticalAlignBottom = mdiFormatVerticalAlignBottom
     mdiArrowUpThin = mdiArrowUpThin
     mdiArrowDownThin = mdiArrowDownThin
 
diff --git a/src/locales/en.json b/src/locales/en.json
index fe0de0047..7f821eddb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -393,6 +393,7 @@
         "AllJobs": "All Jobs",
         "Cancel": "Cancel",
         "MoveToJobQueueTop": "Move to Queue's top",
+        "MoveToJobQueueBottom": "Move to Queue's bottom",
         "MoveQueueItemUp" :"Move up",
         "MoveQueueItemDown" :"Move down",
         "ChangeCount": "Change count",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 3f91a0cfb..5feb5732c 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -391,6 +391,7 @@
         "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
         "MoveToJobQueueTop": "Przenieś na początek kolejki",
+        "MoveToJobQueueBottom": "Przenieś na koniec kolejki",
         "MoveQueueItemUp": "Przenieś wyżej",
         "MoveQueueItemDown": "Przenieś niżej",
         "ChangeCount": "Zmień ilość",

From 3ba546cbacc213eb99c148344d41d1058119700d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 19:00:23 +0100
Subject: [PATCH 07/19] feat: Change the nomenclature of queue's start & end
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/Status/JobqueueEntry.vue | 4 ++--
 src/locales/en.json                            | 4 ++--
 src/locales/pl.json                            | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 5f9dcfe18..68705b31b 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -59,7 +59,7 @@
                 </v-list-item>
                 <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, 0)">
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
-                    {{ $t('JobQueue.MoveToJobQueueTop') }}
+                    {{ $t('JobQueue.MoveToJobQueueStart') }}
                 </v-list-item>
                 <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
                     <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
@@ -71,7 +71,7 @@
                 </v-list-item>
                 <v-list-item v-if="!isLast" @click="changeQueueItemPosition(contextMenu.item, Infinity)">
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignBottom }}</v-icon>
-                    {{ $t('JobQueue.MoveToJobQueueBottom') }}
+                    {{ $t('JobQueue.MoveToJobQueueEnd') }}
                 </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
diff --git a/src/locales/en.json b/src/locales/en.json
index 7f821eddb..eaedde55e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -392,8 +392,8 @@
     "JobQueue": {
         "AllJobs": "All Jobs",
         "Cancel": "Cancel",
-        "MoveToJobQueueTop": "Move to Queue's top",
-        "MoveToJobQueueBottom": "Move to Queue's bottom",
+        "MoveToJobQueueStart": "Move to Queue's start",
+        "MoveToJobQueueEnd": "Move to Queue's end",
         "MoveQueueItemUp" :"Move up",
         "MoveQueueItemDown" :"Move down",
         "ChangeCount": "Change count",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 5feb5732c..99e90fb43 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -390,8 +390,8 @@
     "JobQueue": {
         "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
-        "MoveToJobQueueTop": "Przenieś na początek kolejki",
-        "MoveToJobQueueBottom": "Przenieś na koniec kolejki",
+        "MoveToJobQueueStart": "Przenieś na początek kolejki",
+        "MoveToJobQueueEnd": "Przenieś na koniec kolejki",
         "MoveQueueItemUp": "Przenieś wyżej",
         "MoveQueueItemDown": "Przenieś niżej",
         "ChangeCount": "Zmień ilość",

From 4ace2342196506fb979c429eb18b3bcd4ad30d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 19:20:16 +0100
Subject: [PATCH 08/19] feat: Do not display duplicated re-arrangement features
 (second & next to last items)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/JobqueuePanel.vue       |  2 +-
 src/components/panels/Status/Jobqueue.vue     |  3 +-
 .../panels/Status/JobqueueEntry.vue           | 29 ++++++++++++++-----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 23f16ae79..546cbad18 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -52,7 +52,7 @@
                 </template>
 
                 <template #item="{ item, index }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :is-first="index === 0" :is-last="index === jobs.length - 1" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
+                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :queue-length="jobs.length" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index a5ba83067..c6ebe7612 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -15,8 +15,7 @@
                     :key="item.job_id"
                     :item="item"
                     :item-queue-index="index"
-                    :is-first="index === 0"
-                    :is-last="index === (jobsTable.length + jobsRest.length) - 1"
+                    :queue-length="jobsTable.length + jobsRest.length"
                     :show-print-button-for-first="true"
                     :content-td-width="contentTdWidth" />
             </template>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 68705b31b..695ba5339 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -40,7 +40,7 @@
             </template>
         </td>
         <td class="pr-2">
-            <template v-if="isFirst && showPrintButtonForFirst && !printerIsPrinting">
+            <template v-if="isFirstQueueItem && showPrintButtonForFirst && !printerIsPrinting">
                 <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
                     <v-icon>{{ mdiPlay }}</v-icon>
                 </v-btn>
@@ -57,19 +57,19 @@
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
                 </v-list-item>
-                <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, 0)">
+                <v-list-item v-if="!isFirstQueueItem" @click="changeQueueItemPosition(contextMenu.item, 0)">
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
                     {{ $t('JobQueue.MoveToJobQueueStart') }}
                 </v-list-item>
-                <v-list-item v-if="!isFirst" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
+                <v-list-item v-if="!isFirstQueueItem && !isSecondQueueItem" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
                     <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemUp') }}
                 </v-list-item>
-                <v-list-item v-if="!isLast" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
+                <v-list-item v-if="!isLastQueueItem && !isNextToLastQueueItem" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
                     <v-icon class="mr-1">{{ mdiArrowDownThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemDown') }}
                 </v-list-item>
-                <v-list-item v-if="!isLast" @click="changeQueueItemPosition(contextMenu.item, Infinity)">
+                <v-list-item v-if="!isLastQueueItem" @click="changeQueueItemPosition(contextMenu.item, Infinity)">
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignBottom }}</v-icon>
                     {{ $t('JobQueue.MoveToJobQueueEnd') }}
                 </v-list-item>
@@ -155,9 +155,8 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 
     @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
     @Prop({ type: Number, required: true }) declare itemQueueIndex: number
+    @Prop({ type: Number, required: true }) declare queueLength: number
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
-    @Prop({ type: Boolean, default: false }) declare isFirst: boolean
-    @Prop({ type: Boolean, default: false }) declare isLast: boolean
     @Prop({ type: Boolean, default: false }) declare showPrintButtonForFirst: boolean
     private contextMenu: {
         shown: boolean
@@ -192,6 +191,22 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         filesJobqueue: any
     }
 
+    get isFirstQueueItem() {
+        return this.itemQueueIndex === 0
+    }
+
+    get isSecondQueueItem() {
+        return this.itemQueueIndex === 1
+    }
+
+    get isLastQueueItem() {
+        return this.itemQueueIndex === (this.queueLength - 1)
+    }
+
+    get isNextToLastQueueItem() {
+        return this.itemQueueIndex === (this.queueLength - 2)
+    }
+
     get styleContentTdWidth() {
         return `width: ${this.contentTdWidth}px;`
     }

From e6a3c332fd53d3b9173043b9d070350d52a6b478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 19:21:52 +0100
Subject: [PATCH 09/19] feat: Formatting & linting fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/components/panels/JobqueuePanel.vue       |  8 +++++-
 .../panels/Status/JobqueueEntry.vue           | 26 +++++++++++++++----
 src/locales/en.json                           |  8 +++---
 src/locales/pl.json                           |  8 +++---
 src/store/server/jobQueue/actions.ts          |  2 +-
 5 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 546cbad18..87720b728 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -52,7 +52,13 @@
                 </template>
 
                 <template #item="{ item, index }">
-                    <jobqueue-entry :key="item.job_id" :item="item" :item-queue-index="index" :queue-length="jobs.length" :show-print-button-for-first="false" :content-td-width="contentTdWidth" />
+                    <jobqueue-entry
+                        :key="item.job_id"
+                        :item="item"
+                        :item-queue-index="index"
+                        :queue-length="jobs.length"
+                        :show-print-button-for-first="false"
+                        :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 695ba5339..73c0bb175 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -61,11 +61,15 @@
                     <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
                     {{ $t('JobQueue.MoveToJobQueueStart') }}
                 </v-list-item>
-                <v-list-item v-if="!isFirstQueueItem && !isSecondQueueItem" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
+                <v-list-item
+                    v-if="!isFirstQueueItem && !isSecondQueueItem"
+                    @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
                     <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemUp') }}
                 </v-list-item>
-                <v-list-item v-if="!isLastQueueItem && !isNextToLastQueueItem" @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
+                <v-list-item
+                    v-if="!isLastQueueItem && !isNextToLastQueueItem"
+                    @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
                     <v-icon class="mr-1">{{ mdiArrowDownThin }}</v-icon>
                     {{ $t('JobQueue.MoveQueueItemDown') }}
                 </v-list-item>
@@ -134,7 +138,19 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove, mdiFormatVerticalAlignTop, mdiFormatVerticalAlignBottom, mdiArrowUpThin, mdiArrowDownThin } from '@mdi/js'
+import {
+    mdiChevronDown,
+    mdiChevronUp,
+    mdiCloseThick,
+    mdiCounter,
+    mdiFile,
+    mdiPlay,
+    mdiPlaylistRemove,
+    mdiFormatVerticalAlignTop,
+    mdiFormatVerticalAlignBottom,
+    mdiArrowUpThin,
+    mdiArrowDownThin,
+} from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
@@ -200,11 +216,11 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     }
 
     get isLastQueueItem() {
-        return this.itemQueueIndex === (this.queueLength - 1)
+        return this.itemQueueIndex === this.queueLength - 1
     }
 
     get isNextToLastQueueItem() {
-        return this.itemQueueIndex === (this.queueLength - 2)
+        return this.itemQueueIndex === this.queueLength - 2
     }
 
     get styleContentTdWidth() {
diff --git a/src/locales/en.json b/src/locales/en.json
index eaedde55e..3981b37a7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -392,10 +392,6 @@
     "JobQueue": {
         "AllJobs": "All Jobs",
         "Cancel": "Cancel",
-        "MoveToJobQueueStart": "Move to Queue's start",
-        "MoveToJobQueueEnd": "Move to Queue's end",
-        "MoveQueueItemUp" :"Move up",
-        "MoveQueueItemDown" :"Move down",
         "ChangeCount": "Change count",
         "Count": "Count",
         "Empty": "Empty",
@@ -403,6 +399,10 @@
         "InvalidCountGreaterZero": "Input must be greater than 0!",
         "JobQueue": "Job Queue",
         "Jobs": "Jobs",
+        "MoveQueueItemDown": "Move down",
+        "MoveQueueItemUp": "Move up",
+        "MoveToJobQueueEnd": "Move to Queue's end",
+        "MoveToJobQueueStart": "Move to Queue's start",
         "Pause": "Pause",
         "RemoveFromQueue": "Remove from Queue",
         "Start": "Start"
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 99e90fb43..fb6c231a4 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -390,10 +390,6 @@
     "JobQueue": {
         "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
-        "MoveToJobQueueStart": "Przenieś na początek kolejki",
-        "MoveToJobQueueEnd": "Przenieś na koniec kolejki",
-        "MoveQueueItemUp": "Przenieś wyżej",
-        "MoveQueueItemDown": "Przenieś niżej",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
         "Empty": "Puste",
@@ -401,6 +397,10 @@
         "InvalidCountGreaterZero": "Wprowadzona wartość musi być większa niż 0!",
         "JobQueue": "Kolejka wydruków",
         "Jobs": "Wydruki",
+        "MoveQueueItemDown": "Przenieś niżej",
+        "MoveQueueItemUp": "Przenieś wyżej",
+        "MoveToJobQueueEnd": "Przenieś na koniec kolejki",
+        "MoveToJobQueueStart": "Przenieś na początek kolejki",
         "Pause": "Pauza",
         "RemoveFromQueue": "Usuń z kolejki",
         "Start": "Start"
diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 2c2009662..bc8d9032a 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -55,7 +55,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
 
     changePosition({ getters }, payload: { job_id: string; positionIndex: number }) {
         const filenames: string[] = []
-        const jobs = getters['getJobs'] as ServerJobQueueStateJob[];
+        const jobs = getters['getJobs'] as ServerJobQueueStateJob[]
 
         const jobToMoveIndex = jobs.findIndex((job: ServerJobQueueStateJob) => job.job_id === payload.job_id)
 

From 828677c40d93ecfe48d259a58d720d73e3c5e709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 19:36:37 +0100
Subject: [PATCH 10/19] feat: Simplify changePosition's code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/store/server/jobQueue/actions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index bc8d9032a..7f6f594ae 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -57,7 +57,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         const filenames: string[] = []
         const jobs = getters['getJobs'] as ServerJobQueueStateJob[]
 
-        const jobToMoveIndex = jobs.findIndex((job: ServerJobQueueStateJob) => job.job_id === payload.job_id)
+        const jobToMoveIndex = jobs.findIndex((job) => job.job_id === payload.job_id)
 
         if (jobToMoveIndex === -1) {
             return
@@ -68,7 +68,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         jobs.splice(jobToMoveIndex, 1)
         jobs.splice(payload.positionIndex, 0, jobToMove)
 
-        jobs.forEach((job: ServerJobQueueStateJob) => {
+        jobs.forEach((job) => {
             const count = (job.combinedIds?.length ?? 0) + 1
             for (let i = 0; i < count; i++) {
                 filenames.push(job.filename)

From fd09c33ca1e8703051b13f0210fd062ce88c0130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dzieko=C5=84ski?=
 <michal.dziekonski+github@gmail.com>
Date: Sat, 16 Dec 2023 19:42:05 +0100
Subject: [PATCH 11/19] feat: Add reusable convertJobToFilenames()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Michał Dziekoński <michal.dziekonski+github@gmail.com>
---
 src/store/server/jobQueue/actions.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 7f6f594ae..9c8630b39 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -3,6 +3,17 @@ import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
 import { ServerJobQueueState, ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 
+const convertJobToFilenames = (job: ServerJobQueueStateJob) => {
+    const filenames: string[] = []
+
+    const count = (job.combinedIds?.length ?? 0) + 1
+    for (let i = 0; i < count; i++) {
+        filenames.push(job.filename)
+    }
+
+    return filenames
+}
+
 export const actions: ActionTree<ServerJobQueueState, RootState> = {
     reset({ commit }) {
         commit('reset')
@@ -41,10 +52,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
                 return
             }
 
-            const count = (job.combinedIds?.length ?? 0) + 1
-            for (let i = 0; i < count; i++) {
-                filenames.push(job.filename)
-            }
+            filenames.push(...convertJobToFilenames(job))
         })
 
         Vue.$socket.emit('server.job_queue.post_job', {
@@ -69,10 +77,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         jobs.splice(payload.positionIndex, 0, jobToMove)
 
         jobs.forEach((job) => {
-            const count = (job.combinedIds?.length ?? 0) + 1
-            for (let i = 0; i < count; i++) {
-                filenames.push(job.filename)
-            }
+            filenames.push(...convertJobToFilenames(job))
         })
 
         Vue.$socket.emit('server.job_queue.post_job', {

From 4bd752b44a2ce4b1fa198c04bb7eeafd408edaf8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 2 Feb 2024 20:32:58 +0100
Subject: [PATCH 12/19] refactor: refactor some code syntax

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/JobqueuePanel.vue       | 122 +++++++++---------
 .../panels/Status/JobqueueEntry.vue           |  18 +--
 2 files changed, 64 insertions(+), 76 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 87720b728..faf98b800 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -1,69 +1,63 @@
 <template>
-    <div>
-        <panel
-            ref="jobqueuePanel"
-            :icon="mdiTrayFull"
-            :title="$t('JobQueue.JobQueue').toString()"
-            card-class="jobqueue-panel">
-            <template #buttons>
-                <v-btn
-                    v-if="queueState === 'paused'"
-                    color="success"
-                    :loading="loadings.includes('startJobqueue')"
-                    icon
-                    tile
-                    :disabled="!klipperReadyForGui"
-                    @click="startJobqueue">
-                    <v-tooltip top>
-                        <template #activator="{ on, attrs }">
-                            <v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
-                        </template>
-                        <span>{{ $t('JobQueue.Start') }}</span>
-                    </v-tooltip>
-                </v-btn>
-                <v-btn
-                    v-if="['ready', 'loading'].includes(queueState)"
-                    color="warning"
-                    :loading="loadings.includes('pauseJobqueue')"
-                    icon
-                    tile
-                    @click="pauseJobqueue">
-                    <v-tooltip top>
-                        <template #activator="{ on, attrs }">
-                            <v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
-                        </template>
-                        <span>{{ $t('JobQueue.Pause') }}</span>
-                    </v-tooltip>
-                </v-btn>
+    <panel ref="jobqueuePanel" :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
+        <template #buttons>
+            <v-btn
+                v-if="queueState === 'paused'"
+                color="success"
+                :loading="loadings.includes('startJobqueue')"
+                icon
+                tile
+                :disabled="!klipperReadyForGui"
+                @click="startJobqueue">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
+                    </template>
+                    <span>{{ $t('JobQueue.Start') }}</span>
+                </v-tooltip>
+            </v-btn>
+            <v-btn
+                v-if="['ready', 'loading'].includes(queueState)"
+                color="warning"
+                :loading="loadings.includes('pauseJobqueue')"
+                icon
+                tile
+                @click="pauseJobqueue">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
+                    </template>
+                    <span>{{ $t('JobQueue.Pause') }}</span>
+                </v-tooltip>
+            </v-btn>
+        </template>
+        <v-data-table
+            :items="jobs"
+            class="jobqueue-table"
+            sort-by="time_added"
+            :items-per-page.sync="countPerPage"
+            :footer-props="{
+                itemsPerPageText: $t('JobQueue.Jobs'),
+                itemsPerPageAllText: $t('JobQueue.AllJobs'),
+                itemsPerPageOptions: [10, 25, 50, 100, -1],
+            }"
+            mobile-breakpoint="0">
+            <template #no-data>
+                <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
             </template>
-            <v-data-table
-                :items="jobs"
-                class="jobqueue-table"
-                sort-by="time_added"
-                :items-per-page.sync="countPerPage"
-                :footer-props="{
-                    itemsPerPageText: $t('JobQueue.Jobs'),
-                    itemsPerPageAllText: $t('JobQueue.AllJobs'),
-                    itemsPerPageOptions: [10, 25, 50, 100, -1],
-                }"
-                mobile-breakpoint="0">
-                <template #no-data>
-                    <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
-                </template>
 
-                <template #item="{ item, index }">
-                    <jobqueue-entry
-                        :key="item.job_id"
-                        :item="item"
-                        :item-queue-index="index"
-                        :queue-length="jobs.length"
-                        :show-print-button-for-first="false"
-                        :content-td-width="contentTdWidth" />
-                </template>
-            </v-data-table>
-            <resize-observer @notify="handleResize" />
-        </panel>
-    </div>
+            <template #item="{ item, index }">
+                <jobqueue-entry
+                    :key="item.job_id"
+                    :item="item"
+                    :item-queue-index="index"
+                    :queue-length="jobs.length"
+                    :show-print-button-for-first="false"
+                    :content-td-width="contentTdWidth" />
+            </template>
+        </v-data-table>
+        <resize-observer @notify="handleResize" />
+    </panel>
 </template>
 
 <script lang="ts">
@@ -80,7 +74,7 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPause = mdiPause
     mdiTrayFull = mdiTrayFull
 
-    private contentTdWidth = 100
+    contentTdWidth = 100
 
     declare $refs: {
         jobqueuePanel: any
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 73c0bb175..4ab0aa450 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -46,7 +46,7 @@
                 </v-btn>
             </template>
             <div class="d-block text-truncate" :style="styleContentTdWidth">
-                <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
+                <strong v-if="item.combinedIds?.length">{{ item.combinedIds.length + 1 }}x</strong>
                 {{ item.filename }}
             </div>
             <small v-if="item?.metadata?.metadataPulled">{{ description }}</small>
@@ -85,7 +85,7 @@
         </v-menu>
         <v-dialog v-model="dialogChangeCount.show" max-width="400">
             <panel
-                :title="$t('JobQueue.ChangeCount').toString()"
+                :title="$t('JobQueue.ChangeCount')"
                 :icon="mdiCounter"
                 card-class="jobqueue-change-count-dialog"
                 :margin-bottom="false">
@@ -174,7 +174,8 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     @Prop({ type: Number, required: true }) declare queueLength: number
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
     @Prop({ type: Boolean, default: false }) declare showPrintButtonForFirst: boolean
-    private contextMenu: {
+
+    contextMenu: {
         shown: boolean
         x: number
         y: number
@@ -188,7 +189,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         itemQueueIndex: undefined,
     }
 
-    private dialogChangeCount: {
+    dialogChangeCount: {
         show: boolean
         count: number
         item: ServerJobQueueStateJob | any
@@ -198,15 +199,11 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         item: {},
     }
 
-    private countInputRules = [
+    countInputRules = [
         (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
         (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
     ]
 
-    declare $refs: {
-        filesJobqueue: any
-    }
-
     get isFirstQueueItem() {
         return this.itemQueueIndex === 0
     }
@@ -340,9 +337,6 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 </script>
 
 <style scoped>
-.filesJobqueue {
-    position: relative;
-}
 ._spin_button_group {
     width: 24px;
     margin-top: -6px;

From fba7f8efffc9b1250902b3d5cf5ba5cd5945112f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 19:14:16 +0100
Subject: [PATCH 13/19] refactor: refactor jobqueue entry and add draggable
 sort function

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../JobqueueEntryChangeCountDialog.vue        |  88 ++++
 src/components/panels/JobqueuePanel.vue       |  91 ++--
 src/components/panels/Status/Jobqueue.vue     | 156 ++-----
 .../panels/Status/JobqueueEntry.vue           | 398 ++++++------------
 .../panels/Status/JobqueueEntryRest.vue       | 120 ++++++
 src/store/server/jobQueue/actions.ts          |  70 ++-
 6 files changed, 425 insertions(+), 498 deletions(-)
 create mode 100644 src/components/dialogs/JobqueueEntryChangeCountDialog.vue
 create mode 100644 src/components/panels/Status/JobqueueEntryRest.vue

diff --git a/src/components/dialogs/JobqueueEntryChangeCountDialog.vue b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue
new file mode 100644
index 000000000..0cd1d88c6
--- /dev/null
+++ b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue
@@ -0,0 +1,88 @@
+<template>
+    <v-dialog :value="show" max-width="400">
+        <panel
+            :title="$t('JobQueue.ChangeCount')"
+            :icon="mdiCounter"
+            card-class="jobqueue-change-count-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card-text>
+                <v-text-field
+                    ref="inputFieldAddToQueueCount"
+                    v-model="count"
+                    :label="$t('JobQueue.Count')"
+                    required
+                    :rules="countInputRules"
+                    hide-spin-buttons
+                    type="number"
+                    @keyup.enter="update">
+                    <template #append-outer>
+                        <div class="_spin_button_group">
+                            <v-btn class="mt-n3" icon plain small @click="count++">
+                                <v-icon>{{ mdiChevronUp }}</v-icon>
+                            </v-btn>
+                            <v-btn :disabled="count <= 1" class="mb-n3" icon plain small @click="count--">
+                                <v-icon>{{ mdiChevronDown }}</v-icon>
+                            </v-btn>
+                        </div>
+                    </template>
+                </v-text-field>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="" text @click="closeDialog">{{ $t('JobQueue.Cancel') }}</v-btn>
+                <v-btn color="primary" text @click="update">{{ $t('JobQueue.ChangeCount') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiChevronUp, mdiChevronDown, mdiCounter } from '@mdi/js'
+import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
+
+@Component({
+    components: { Panel },
+})
+export default class JobqueueEntryChangeCountDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiChevronUp = mdiChevronUp
+    mdiChevronDown = mdiChevronDown
+    mdiCounter = mdiCounter
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: Object, required: true }) job!: ServerJobQueueStateJob
+
+    count = 1
+
+    countInputRules = [
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+    ]
+
+    update() {
+        this.$store.dispatch('server/jobQueue/changeCount', {
+            job_id: this.job.job_id,
+            count: this.count,
+        })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    @Watch('show')
+    showChanged(show: boolean) {
+        if (show) this.count = (this.job.combinedIds?.length ?? 0) + 1
+    }
+}
+</script>
diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index faf98b800..1c14d5d56 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <panel ref="jobqueuePanel" :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
+    <panel :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
         <template #buttons>
             <v-btn
                 v-if="queueState === 'paused'"
@@ -31,32 +31,27 @@
                 </v-tooltip>
             </v-btn>
         </template>
-        <v-data-table
-            :items="jobs"
-            class="jobqueue-table"
-            sort-by="time_added"
-            :items-per-page.sync="countPerPage"
-            :footer-props="{
-                itemsPerPageText: $t('JobQueue.Jobs'),
-                itemsPerPageAllText: $t('JobQueue.AllJobs'),
-                itemsPerPageOptions: [10, 25, 50, 100, -1],
-            }"
-            mobile-breakpoint="0">
-            <template #no-data>
-                <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
-            </template>
-
-            <template #item="{ item, index }">
-                <jobqueue-entry
-                    :key="item.job_id"
-                    :item="item"
-                    :item-queue-index="index"
-                    :queue-length="jobs.length"
-                    :show-print-button-for-first="false"
-                    :content-td-width="contentTdWidth" />
-            </template>
-        </v-data-table>
-        <resize-observer @notify="handleResize" />
+        <v-row v-if="jobs.length" class="mx-0 mt-0">
+            <v-col>
+                <draggable
+                    v-model="joblist"
+                    handle=".handle"
+                    class="jobqueue-list"
+                    ghost-class="ghost"
+                    group="jobs"
+                    @end="updateOrder">
+                    <jobqueue-entry
+                        v-for="(job, index) in jobs"
+                        :key="job.job_id"
+                        :job="job"
+                        :show-handle="true"
+                        :show-print-button="index === 0" />
+                </draggable>
+            </v-col>
+        </v-row>
+        <v-card-text v-else>
+            <p>{{ $t('JobQueue.Empty') }}</p>
+        </v-card-text>
     </panel>
 </template>
 
@@ -66,19 +61,16 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
+import draggable from 'vuedraggable'
 @Component({
-    components: { JobqueueEntry, Panel },
+    components: { draggable, JobqueueEntry, Panel },
 })
 export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPause = mdiPause
     mdiTrayFull = mdiTrayFull
 
-    contentTdWidth = 100
-
-    declare $refs: {
-        jobqueuePanel: any
-    }
+    joblist = []
 
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs']
@@ -88,14 +80,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         return this.$store.state.server.jobQueue.queue_state ?? ''
     }
 
-    get countPerPage() {
-        return this.$store.state.gui.view.jobqueue.countPerPage
-    }
-
-    set countPerPage(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal })
-    }
-
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
@@ -104,24 +88,21 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/pause')
     }
 
-    mounted() {
-        this.calcContentTdWidth()
-    }
-
-    calcContentTdWidth() {
-        this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
-    }
-
-    handleResize() {
-        this.$nextTick(() => {
-            this.calcContentTdWidth()
+    updateOrder(event: { oldIndex: number; newIndex: number }) {
+        this.$store.dispatch('server/jobQueue/changePosition', {
+            newIndex: event.newIndex,
+            oldIndex: event.oldIndex,
         })
     }
 }
 </script>
 
-<style scoped>
-.jobqueue-panel {
-    position: relative;
+<style lang="scss">
+.jobqueue-list > div + div {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.jobqueue-list > div.ghost {
+    background-color: rgba(255, 255, 255, 0.12);
 }
 </style>
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index c6ebe7612..d1c80bbaa 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -1,42 +1,19 @@
 <template>
-    <v-card ref="filesJobqueue" class="filesJobqueue" flat>
-        <v-data-table
-            :items="jobsTable"
-            hide-default-footer
-            class="dashboard-jobqueue-table"
-            sort-by="time_added"
-            mobile-breakpoint="0">
-            <template #no-data>
-                <div class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
-            </template>
-
-            <template #item="{ item, index }">
-                <jobqueue-entry
-                    :key="item.job_id"
-                    :item="item"
-                    :item-queue-index="index"
-                    :queue-length="jobsTable.length + jobsRest.length"
-                    :show-print-button-for-first="true"
-                    :content-td-width="contentTdWidth" />
-            </template>
-            <template v-if="jobsRest.length" #body.append>
-                <tr>
-                    <td class="pr-0 text-center" style="width: 32px">
-                        <v-icon>{{ mdiFileMultiple }}</v-icon>
-                    </td>
-                    <td class="pr-2">
-                        {{
-                            $tc('Panels.StatusPanel.JobqueueMoreFiles', restJobsLength, {
-                                count: restJobsLength,
-                            })
-                        }}
-                        <br />
-                        <small>{{ descriptionRestJobs }}</small>
-                    </td>
-                </tr>
-            </template>
-        </v-data-table>
-        <resize-observer @notify="handleResize" />
+    <v-card class="filesJobqueue" flat>
+        <template v-if="jobs.length">
+            <v-row class="mx-0 mt-0 pb-3">
+                <v-col class="jobqueue-list">
+                    <jobqueue-entry
+                        v-for="(job, index) in jobsTable"
+                        :key="job.job_id"
+                        :job="job"
+                        :show-handle="false"
+                        :show-print-button="index === 0" />
+                    <jobqueue-entry-rest v-if="jobsRest.length" :jobs="jobsRest" />
+                </v-col>
+            </v-row>
+        </template>
+        <div v-else class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
     </v-card>
 </template>
 
@@ -44,122 +21,37 @@
 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 { mdiFileMultiple } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 @Component({
     components: { JobqueueEntry },
 })
 export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
-    mdiFileMultiple = mdiFileMultiple
-
-    private contentTdWidth = 100
-
-    declare $refs: {
-        filesJobqueue: any
-    }
-
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs'] ?? []
     }
 
-    get jobsTable() {
-        return this.jobs.slice(0, 5)
-    }
-
-    get jobsRest() {
-        return this.jobs.slice(5)
-    }
-
-    get restJobsLength() {
-        let count = 0
-
-        this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
-            count += (item.combinedIds?.length ?? 0) + 1
-        })
+    get maxLength() {
+        if (this.jobs.length > 5) return 4
 
-        return count
+        return 5
     }
 
-    get descriptionRestJobs() {
-        let filamentLength = 0
-        let filamentWeight = 0
-        let printTime = 0
-
-        this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
-            const count = (item.combinedIds?.length ?? 0) + 1
-
-            if (item.metadata?.filament_total) filamentLength += item.metadata?.filament_total * count
-            if (item.metadata?.filament_weight_total) filamentWeight += item.metadata?.filament_weight_total * count
-            if (item.metadata?.estimated_time) printTime += item.metadata.estimated_time * count
-        })
-
-        let output = ''
-
-        output += this.$t('Files.Filament') + ': '
-        if (filamentLength || filamentWeight) {
-            if (filamentLength) output += filamentLength.toFixed() + ' mm'
-            if (filamentLength && filamentWeight) output += ' / '
-            if (filamentWeight) output += filamentWeight.toFixed(2) + ' g'
-        } else output += '--'
-
-        output += ', ' + this.$t('Files.PrintTime') + ': '
-        if (printTime) output += this.formatPrintTime(printTime)
-        else output += '--'
-
-        return output
+    get jobsTable() {
+        return this.jobs.slice(0, this.maxLength)
     }
 
-    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 jobsRest() {
+        return this.jobs.slice(this.maxLength)
     }
 
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
-
-    mounted() {
-        setTimeout(() => {
-            this.calcContentTdWidth()
-        }, 200)
-    }
-
-    calcContentTdWidth() {
-        this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32
-    }
-
-    handleResize() {
-        this.$nextTick(() => {
-            this.calcContentTdWidth()
-        })
-    }
 }
 </script>
 
 <style scoped>
-.filesJobqueue {
-    position: relative;
+.jobqueue-list > div + div {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 </style>
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 4ab0aa450..9d5b6da39 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -1,136 +1,71 @@
 <template>
-    <tr
-        v-longpress:600="(e) => showContextMenu(e, item, itemQueueIndex)"
-        class="cursor-pointer"
-        @contextmenu="showContextMenu($event, item, itemQueueIndex)">
-        <td class="pr-0 text-center" style="width: 32px">
-            <template v-if="smallThumbnail && bigThumbnail">
-                <v-tooltip
-                    v-if="smallThumbnail && bigThumbnail"
-                    top
-                    content-class="tooltip__content-opacity1"
-                    :color="bigThumbnailTooltipColor">
-                    <template #activator="{ on, attrs }">
-                        <vue-load-image>
-                            <img slot="image" :src="smallThumbnail" width="32" height="32" v-bind="attrs" v-on="on" />
-                            <div slot="preloader">
-                                <v-progress-circular indeterminate color="primary" />
-                            </div>
-                            <div slot="error">
-                                <v-icon>{{ mdiFile }}</v-icon>
-                            </div>
-                        </vue-load-image>
-                    </template>
-                    <span><img :src="bigThumbnail" width="250" /></span>
-                </v-tooltip>
-            </template>
-            <template v-else-if="smallThumbnail">
-                <vue-load-image>
-                    <img slot="image" :src="smallThumbnail" width="32" height="32" />
-                    <div slot="preloader">
-                        <v-progress-circular indeterminate color="primary" />
-                    </div>
-                    <div slot="error">
-                        <v-icon>{{ mdiFile }}</v-icon>
-                    </div>
-                </vue-load-image>
-            </template>
-            <template v-else>
-                <v-icon>{{ mdiFile }}</v-icon>
-            </template>
-        </td>
-        <td class="pr-2">
-            <template v-if="isFirstQueueItem && showPrintButtonForFirst && !printerIsPrinting">
-                <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
-                    <v-icon>{{ mdiPlay }}</v-icon>
-                </v-btn>
-            </template>
-            <div class="d-block text-truncate" :style="styleContentTdWidth">
-                <strong v-if="item.combinedIds?.length">{{ item.combinedIds.length + 1 }}x</strong>
-                {{ item.filename }}
+    <v-row
+        v-longpress:600="(e) => openContextMenu(e)"
+        class="d-flex flex-row flex-nowrap cursor-pointer"
+        @contextmenu="openContextMenu($event)">
+        <v-col v-if="showHandle" class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
+        </v-col>
+        <v-col class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-tooltip
+                v-if="smallThumbnail"
+                top
+                :disabled="!bigThumbnail"
+                content-class="tooltip__content-opacity1"
+                :color="bigThumbnailTooltipColor">
+                <template #activator="{ on, attrs }">
+                    <vue-load-image>
+                        <img
+                            slot="image"
+                            :src="smallThumbnail"
+                            :width="32"
+                            :height="32"
+                            :alt="job.filename"
+                            v-bind="attrs"
+                            v-on="on" />
+                        <div slot="preloader">
+                            <v-progress-circular indeterminate color="primary" />
+                        </div>
+                        <div slot="error">
+                            <v-icon>{{ mdiFile }}</v-icon>
+                        </div>
+                    </vue-load-image>
+                </template>
+                <span><img :src="bigThumbnail" :width="250" :alt="job.filename" /></span>
+            </v-tooltip>
+            <v-icon v-else>{{ mdiFile }}</v-icon>
+        </v-col>
+        <v-col class="py-1" style="min-width: 0; font-size: 0.875em">
+            <div class="text-truncate">
+                <strong v-if="job.combinedIds?.length">{{ job.combinedIds.length + 1 }}x</strong>
+                {{ job.filename }}
             </div>
-            <small v-if="item?.metadata?.metadataPulled">{{ description }}</small>
-        </td>
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <small v-if="description" class="text-truncate">{{ description }}</small>
+        </v-col>
+        <v-col
+            v-if="showPrintButton && !printerIsPrinting"
+            class="col-auto d-flex flex-column justify-center pa-0 pr-1">
+            <v-btn icon color="success" class="minwidth-0" @click="startJobqueue">
+                <v-icon>{{ mdiPlay }}</v-icon>
+            </v-btn>
+        </v-col>
+        <v-menu v-model="showContextMenu" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
             <v-list>
-                <v-list-item @click="openChangeCountDialog(contextMenu.item)">
+                <v-list-item @click="showChangeCountDialog = true">
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
                 </v-list-item>
-                <v-list-item v-if="!isFirstQueueItem" @click="changeQueueItemPosition(contextMenu.item, 0)">
-                    <v-icon class="mr-1">{{ mdiFormatVerticalAlignTop }}</v-icon>
-                    {{ $t('JobQueue.MoveToJobQueueStart') }}
-                </v-list-item>
-                <v-list-item
-                    v-if="!isFirstQueueItem && !isSecondQueueItem"
-                    @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex - 1)">
-                    <v-icon class="mr-1">{{ mdiArrowUpThin }}</v-icon>
-                    {{ $t('JobQueue.MoveQueueItemUp') }}
-                </v-list-item>
-                <v-list-item
-                    v-if="!isLastQueueItem && !isNextToLastQueueItem"
-                    @click="changeQueueItemPosition(contextMenu.item, contextMenu.itemQueueIndex + 1)">
-                    <v-icon class="mr-1">{{ mdiArrowDownThin }}</v-icon>
-                    {{ $t('JobQueue.MoveQueueItemDown') }}
-                </v-list-item>
-                <v-list-item v-if="!isLastQueueItem" @click="changeQueueItemPosition(contextMenu.item, Infinity)">
-                    <v-icon class="mr-1">{{ mdiFormatVerticalAlignBottom }}</v-icon>
-                    {{ $t('JobQueue.MoveToJobQueueEnd') }}
-                </v-list-item>
-                <v-list-item @click="removeFromJobqueue(contextMenu.item)">
+                <v-list-item @click="removeFromJobqueue">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
                 </v-list-item>
             </v-list>
         </v-menu>
-        <v-dialog v-model="dialogChangeCount.show" max-width="400">
-            <panel
-                :title="$t('JobQueue.ChangeCount')"
-                :icon="mdiCounter"
-                card-class="jobqueue-change-count-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="dialogChangeCount.show = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-
-                <v-card-text>
-                    <v-text-field
-                        ref="inputFieldAddToQueueCount"
-                        v-model="dialogChangeCount.count"
-                        :label="$t('JobQueue.Count')"
-                        required
-                        :rules="countInputRules"
-                        hide-spin-buttons
-                        type="number"
-                        @keyup.enter="changeCountAction">
-                        <template #append-outer>
-                            <div class="_spin_button_group">
-                                <v-btn class="mt-n3" icon plain small @click="dialogChangeCount.count++">
-                                    <v-icon>{{ mdiChevronUp }}</v-icon>
-                                </v-btn>
-                                <v-btn
-                                    :disabled="dialogChangeCount.count <= 1"
-                                    class="mb-n3"
-                                    icon
-                                    plain
-                                    small
-                                    @click="dialogChangeCount.count--">
-                                    <v-icon>{{ mdiChevronDown }}</v-icon>
-                                </v-btn>
-                            </div>
-                        </template>
-                    </v-text-field>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn color="" text @click="dialogChangeCount.show = false">{{ $t('JobQueue.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="changeCountAction">{{ $t('JobQueue.ChangeCount') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </tr>
+        <jobqueue-entry-change-count-dialog
+            :show="showChangeCountDialog"
+            :job="job"
+            @close="showChangeCountDialog = false" />
+    </v-row>
 </template>
 
 <script lang="ts">
@@ -138,116 +73,96 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import {
-    mdiChevronDown,
-    mdiChevronUp,
-    mdiCloseThick,
-    mdiCounter,
-    mdiFile,
-    mdiPlay,
-    mdiPlaylistRemove,
-    mdiFormatVerticalAlignTop,
-    mdiFormatVerticalAlignBottom,
-    mdiArrowUpThin,
-    mdiArrowDownThin,
-} from '@mdi/js'
-import NumberInput from '@/components/inputs/NumberInput.vue'
+import { mdiCloseThick, mdiCounter, mdiDragVertical, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
 import { defaultBigThumbnailBackground } from '@/store/variables'
-@Component({
-    components: { NumberInput },
-})
+@Component
 export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
-    mdiChevronDown = mdiChevronDown
-    mdiChevronUp = mdiChevronUp
     mdiCloseThick = mdiCloseThick
     mdiCounter = mdiCounter
+    mdiDragVertical = mdiDragVertical
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
-    mdiFormatVerticalAlignTop = mdiFormatVerticalAlignTop
-    mdiFormatVerticalAlignBottom = mdiFormatVerticalAlignBottom
-    mdiArrowUpThin = mdiArrowUpThin
-    mdiArrowDownThin = mdiArrowDownThin
-
-    @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
-    @Prop({ type: Number, required: true }) declare itemQueueIndex: number
-    @Prop({ type: Number, required: true }) declare queueLength: number
-    @Prop({ type: Number, required: true }) declare contentTdWidth: number
-    @Prop({ type: Boolean, default: false }) declare showPrintButtonForFirst: boolean
-
-    contextMenu: {
-        shown: boolean
-        x: number
-        y: number
-        item: ServerJobQueueStateJob | any
-        itemQueueIndex: number | undefined
-    } = {
-        shown: false,
-        x: 0,
-        y: 0,
-        item: {},
-        itemQueueIndex: undefined,
-    }
 
-    dialogChangeCount: {
-        show: boolean
-        count: number
-        item: ServerJobQueueStateJob | any
-    } = {
-        show: false,
-        count: 1,
-        item: {},
-    }
+    @Prop({ type: Object, required: true }) job!: ServerJobQueueStateJob
+    @Prop({ type: Boolean, default: false }) showPrintButton!: boolean
+    @Prop({ type: Boolean, default: false }) showHandle!: boolean
 
-    countInputRules = [
-        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
-        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
-    ]
+    showContextMenu = false
+    contextMenuX = 0
+    contextMenuY = 0
 
-    get isFirstQueueItem() {
-        return this.itemQueueIndex === 0
-    }
+    showChangeCountDialog = false
 
-    get isSecondQueueItem() {
-        return this.itemQueueIndex === 1
+    get smallThumbnail() {
+        return this.$store.getters['server/jobQueue/getSmallThumbnail'](this.job)
     }
 
-    get isLastQueueItem() {
-        return this.itemQueueIndex === this.queueLength - 1
+    get bigThumbnail() {
+        return this.$store.getters['server/jobQueue/getBigThumbnail'](this.job)
     }
 
-    get isNextToLastQueueItem() {
-        return this.itemQueueIndex === this.queueLength - 2
-    }
+    get description() {
+        if (!this.job?.metadata?.metadataPulled) return false
+
+        const filamentArray = []
+        let filament = '--'
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) filament = filamentArray.join(' / ')
+
+        let time = '--'
+        if (this.estimatedTime) time = this.estimatedTime
 
-    get styleContentTdWidth() {
-        return `width: ${this.contentTdWidth}px;`
+        return `${this.$t('Panels.StatusPanel.Filament')}: ${filament}, ${this.$t(
+            'Panels.StatusPanel.PrintTime'
+        )}: ${time}`
     }
 
-    get smallThumbnail() {
-        return this.$store.getters['server/jobQueue/getSmallThumbnail'](this.item)
+    get filamentLength() {
+        const length = this.job.metadata?.filament_total ?? 0
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
     }
 
-    get bigThumbnail() {
-        return this.$store.getters['server/jobQueue/getBigThumbnail'](this.item)
+    get filamentWeight() {
+        const weight = this.job.metadata?.filament_weight_total ?? 0
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
     }
 
-    get description() {
-        let output = ''
+    get estimatedTime() {
+        let totalSeconds = this.job.metadata?.estimated_time ?? 0
+        if (totalSeconds == 0) return '--'
+
+        const output = []
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output.push(days + 'd')
+        }
 
-        output += this.$t('Panels.StatusPanel.Filament') + ': '
-        if (this.item.metadata?.filament_total || this.item.metadata.filament_weight_total) {
-            if (this.item.metadata?.filament_total) output += this.item.metadata.filament_total.toFixed() + ' mm'
-            if (this.item.metadata?.filament_total && this.item.metadata.filament_weight_total) output += ' / '
-            if (this.item.metadata?.filament_weight_total)
-                output += this.item.metadata.filament_weight_total.toFixed(2) + ' g'
-        } else output += '--'
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output.push(hours + 'h')
 
-        output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': '
-        if (this.item.metadata?.estimated_time) output += this.formatPrintTime(this.item.metadata.estimated_time)
-        else output += '--'
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output.push(minutes + 'm')
 
-        return output
+        // skip seconds if there are hours
+        if (hours > 0) return output.join(' ')
+
+        const seconds = totalSeconds % 60
+        if (seconds) output.push(seconds.toFixed(0) + 's')
+
+        return output.join(' ')
     }
 
     get bigThumbnailBackground() {
@@ -262,77 +177,28 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         return this.bigThumbnailBackground
     }
 
-    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'
+    openContextMenu(e: any) {
+        e?.preventDefault()
 
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
+        if (this.showContextMenu) {
+            this.showContextMenu = false
+            return
         }
 
-        return '--'
-    }
-
-    showContextMenu(e: any, item: ServerJobQueueStateJob, itemQueueIndex: number) {
-        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.contextMenu.itemQueueIndex = itemQueueIndex
-            this.$nextTick(() => {
-                this.contextMenu.shown = true
-            })
-        }
+        this.showContextMenu = true
+        this.contextMenuX = e?.clientX || e?.pageX || window.screenX / 2
+        this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
     }
 
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
 
-    removeFromJobqueue(item: ServerJobQueueStateJob) {
-        const ids = [...(item.combinedIds ?? [])]
-        ids.push(item.job_id)
+    removeFromJobqueue() {
+        const ids = [...(this.job.combinedIds ?? []), this.job.job_id]
 
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
-
-    changeQueueItemPosition(item: ServerJobQueueStateJob, positionIndex: number) {
-        this.$store.dispatch('server/jobQueue/changePosition', {
-            job_id: item.job_id,
-            positionIndex,
-        })
-    }
-
-    openChangeCountDialog(item: ServerJobQueueStateJob) {
-        this.dialogChangeCount.show = true
-        this.dialogChangeCount.count = (item.combinedIds?.length ?? 0) + 1
-        this.dialogChangeCount.item = item
-    }
-
-    changeCountAction() {
-        this.$store.dispatch('server/jobQueue/changeCount', {
-            job_id: this.dialogChangeCount.item.job_id,
-            count: this.dialogChangeCount.count,
-        })
-        this.dialogChangeCount.show = false
-    }
 }
 </script>
 
diff --git a/src/components/panels/Status/JobqueueEntryRest.vue b/src/components/panels/Status/JobqueueEntryRest.vue
new file mode 100644
index 000000000..02d413d8f
--- /dev/null
+++ b/src/components/panels/Status/JobqueueEntryRest.vue
@@ -0,0 +1,120 @@
+<template>
+    <v-row class="d-flex flex-row flex-nowrap">
+        <v-col class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-icon style="width: 32px">{{ mdiFileMultiple }}</v-icon>
+        </v-col>
+        <v-col class="py-2" style="min-width: 0; font-size: 0.875em">
+            <div class="text-truncate">{{ headline }}</div>
+            <small class="text-truncate">{{ description }}</small>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
+import { mdiFileMultiple } from '@mdi/js'
+@Component
+export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+    mdiFileMultiple = mdiFileMultiple
+
+    @Prop({ type: Array, required: true }) jobs!: ServerJobQueueStateJob[]
+
+    get sums() {
+        const sums = {
+            filamentLength: 0,
+            filamentWeight: 0,
+            estimatedTime: 0,
+        }
+
+        this.jobs.forEach((job: ServerJobQueueStateJob) => {
+            const count = (job.combinedIds?.length ?? 0) + 1
+
+            sums.filamentLength += (job.metadata?.filament_total ?? 0) * count
+            sums.filamentWeight += (job.metadata?.filament_weight_total ?? 0) * count
+            sums.estimatedTime += (job.metadata?.estimated_time ?? 0) * count
+        })
+
+        return sums
+    }
+
+    get count() {
+        let count = 0
+
+        this.jobs.forEach((item: ServerJobQueueStateJob) => {
+            count += (item.combinedIds?.length ?? 0) + 1
+        })
+
+        return count
+    }
+
+    get headline() {
+        return this.$tc('Panels.StatusPanel.JobqueueMoreFiles', this.count, {
+            count: this.count,
+        })
+    }
+
+    get description() {
+        const filamentArray = []
+        let filament = '--'
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) filament = filamentArray.join(' / ')
+
+        let time = '--'
+        if (this.estimatedTime) time = this.estimatedTime
+
+        return `${this.$t('Panels.StatusPanel.Filament')}: ${filament}, ${this.$t(
+            'Panels.StatusPanel.PrintTime'
+        )}: ${time}`
+    }
+
+    get filamentLength() {
+        const length = this.sums.filamentLength
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
+    }
+
+    get filamentWeight() {
+        const weight = this.sums.filamentWeight
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
+    }
+
+    get estimatedTime() {
+        let totalSeconds = this.sums.estimatedTime
+        if (totalSeconds == 0) return '--'
+
+        const output = []
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output.push(days + 'd')
+        }
+
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output.push(hours + 'h')
+
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output.push(minutes + 'm')
+
+        // skip seconds if there are hours
+        if (hours > 0) return output.join(' ')
+
+        const seconds = totalSeconds % 60
+        if (seconds) output.push(seconds.toFixed(0) + 's')
+
+        return output.join(' ')
+    }
+}
+</script>
diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 9c8630b39..509d94f42 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -3,17 +3,6 @@ import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
 import { ServerJobQueueState, ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 
-const convertJobToFilenames = (job: ServerJobQueueStateJob) => {
-    const filenames: string[] = []
-
-    const count = (job.combinedIds?.length ?? 0) + 1
-    for (let i = 0; i < count; i++) {
-        filenames.push(job.filename)
-    }
-
-    return filenames
-}
-
 export const actions: ActionTree<ServerJobQueueState, RootState> = {
     reset({ commit }) {
         commit('reset')
@@ -29,8 +18,8 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
     },
 
     async getStatus({ commit, dispatch }, payload) {
-        if ('queued_jobs' in payload) await commit('setQueuedJobs', payload.queued_jobs)
-        if ('queue_state' in payload) await commit('setQueueState', payload.queue_state)
+        if ('queued_jobs' in payload) commit('setQueuedJobs', payload.queued_jobs)
+        if ('queue_state' in payload) commit('setQueueState', payload.queue_state)
 
         await dispatch('socket/removeInitModule', 'server/jobQueue/init', { root: true })
     },
@@ -39,46 +28,37 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         Vue.$socket.emit('server.job_queue.post_job', { filenames: filenames })
     },
 
-    changeCount({ getters }, payload: { job_id: string; count: number }) {
-        const filenames: string[] = []
-        const jobs = getters['getJobs']
-
-        jobs.forEach((job: ServerJobQueueStateJob) => {
-            if (job.job_id === payload.job_id) {
-                for (let i = 0; i < payload.count; i++) {
-                    filenames.push(job.filename)
-                }
+    changeCount({ dispatch, getters }, payload: { job_id: string; count: number }) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
 
-                return
-            }
+        const index = jobs.findIndex((job) => job.job_id === payload.job_id)
+        if (index === -1) return
 
-            filenames.push(...convertJobToFilenames(job))
-        })
+        jobs[index].combinedIds = Array(payload.count - 1).fill(payload.job_id)
 
-        Vue.$socket.emit('server.job_queue.post_job', {
-            filenames,
-            reset: true,
-        })
+        dispatch('sendNewQueueList', jobs)
     },
 
-    changePosition({ getters }, payload: { job_id: string; positionIndex: number }) {
-        const filenames: string[] = []
-        const jobs = getters['getJobs'] as ServerJobQueueStateJob[]
-
-        const jobToMoveIndex = jobs.findIndex((job) => job.job_id === payload.job_id)
+    changePosition({ dispatch, getters }, payload: { oldIndex: number; newIndex: number }) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
 
-        if (jobToMoveIndex === -1) {
-            return
-        }
+        const job = jobs.splice(payload.oldIndex, 1)[0]
+        jobs.splice(payload.newIndex, 0, job)
 
-        const jobToMove = jobs[jobToMoveIndex]
-
-        jobs.splice(jobToMoveIndex, 1)
-        jobs.splice(payload.positionIndex, 0, jobToMove)
+        dispatch('sendNewQueueList', jobs)
+    },
 
-        jobs.forEach((job) => {
-            filenames.push(...convertJobToFilenames(job))
-        })
+    sendNewQueueList(_, jobs: ServerJobQueueStateJob[]) {
+        const filenames = jobs
+            .map((job) => {
+                const numJobs = (job.combinedIds?.length ?? 0) + 1
+                // return job.filename if the job will be only printed one time
+                if (numJobs === 1) return job.filename
+
+                // return an array of job.filename if the job will be printed multiple times
+                return Array(numJobs).fill(job.filename)
+            })
+            .flat()
 
         Vue.$socket.emit('server.job_queue.post_job', {
             filenames,

From 6f74dd4f389280755fa07adbde9467cc69451df0 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 19:15:17 +0100
Subject: [PATCH 14/19] fix: fix job counter in status panel for jobqueue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/StatusPanel.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 2c1efcab1..1c68082ea 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -160,22 +160,22 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     mdiDotsVertical = mdiDotsVertical
     mdiAlertOutline = mdiAlertOutline
 
-    private boolShowObjects = false
-    private boolShowPauseAtLayer = false
-
     declare $refs: {
         bigThumbnail: any
     }
 
-    private activeTab = 'files'
-    private lastFilename = ''
+    boolShowObjects = false
+    boolShowPauseAtLayer = false
+
+    activeTab = 'files'
+    lastFilename = ''
 
     get jobs() {
         return this.$store.getters['server/jobQueue/getJobs']
     }
 
     get jobsCount() {
-        return this.jobs.length ?? 0
+        return this.$store.getters['server/jobQueue/getJobsCount']
     }
 
     get jobQueueBadgeColor() {

From a535bd7f741702cce3ca30882cc0f3a11b98b28c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 20:09:55 +0100
Subject: [PATCH 15/19] feat: add function to start with every job in the
 jobqueue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Status/JobqueueEntry.vue           |  8 +++++
 src/locales/en.json                           |  3 +-
 src/store/server/jobQueue/actions.ts          | 35 ++++++++++++++-----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 9d5b6da39..9d54f85ba 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -51,6 +51,10 @@
         </v-col>
         <v-menu v-model="showContextMenu" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
             <v-list>
+                <v-list-item @click="printJob">
+                    <v-icon class="mr-1">{{ mdiPlay }}</v-icon>
+                    {{ $t('JobQueue.StartPrint') }}
+                </v-list-item>
                 <v-list-item @click="showChangeCountDialog = true">
                     <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
                     {{ $t('JobQueue.ChangeCount') }}
@@ -190,6 +194,10 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
     }
 
+    printJob() {
+        this.$store.dispatch('server/jobQueue/startByJobId', this.job.job_id)
+    }
+
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index b530921f0..c415fd55b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -405,7 +405,8 @@
         "MoveToJobQueueStart": "Move to Queue's start",
         "Pause": "Pause",
         "RemoveFromQueue": "Remove from Queue",
-        "Start": "Start"
+        "Start": "Start",
+        "StartPrint": "Start Job"
     },
     "Machine": {
         "ConfigFilesPanel": {
diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 509d94f42..f8afb3afd 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -36,7 +36,7 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
 
         jobs[index].combinedIds = Array(payload.count - 1).fill(payload.job_id)
 
-        dispatch('sendNewQueueList', jobs)
+        dispatch('sendNewQueueList', { jobs })
     },
 
     changePosition({ dispatch, getters }, payload: { oldIndex: number; newIndex: number }) {
@@ -45,11 +45,23 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         const job = jobs.splice(payload.oldIndex, 1)[0]
         jobs.splice(payload.newIndex, 0, job)
 
-        dispatch('sendNewQueueList', jobs)
+        dispatch('sendNewQueueList', { jobs })
     },
 
-    sendNewQueueList(_, jobs: ServerJobQueueStateJob[]) {
-        const filenames = jobs
+    startByJobId({ dispatch, getters }, job_id: string) {
+        const jobs: ServerJobQueueStateJob[] = getters['getJobs']
+
+        const index = jobs.findIndex((job) => job.job_id === job_id)
+        if (index === -1) return
+
+        const job = jobs.splice(index, 1)[0]
+        jobs.splice(0, 0, job)
+
+        dispatch('sendNewQueueList', { jobs, printStart: true })
+    },
+
+    sendNewQueueList(_, payload: { jobs: ServerJobQueueStateJob[]; printStart?: boolean }) {
+        const filenames = payload.jobs
             .map((job) => {
                 const numJobs = (job.combinedIds?.length ?? 0) + 1
                 // return job.filename if the job will be only printed one time
@@ -60,10 +72,17 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
             })
             .flat()
 
-        Vue.$socket.emit('server.job_queue.post_job', {
-            filenames,
-            reset: true,
-        })
+        const emitOptions: { action?: string } = {}
+        if (payload.printStart) emitOptions.action = 'server/jobQueue/start'
+
+        Vue.$socket.emit(
+            'server.job_queue.post_job',
+            {
+                filenames,
+                reset: true,
+            },
+            emitOptions
+        )
     },
 
     deleteFromQueue(_, job_ids: string[]) {

From 667aadb98f6a365841e1e4ebe1690649f981754a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 20:10:11 +0100
Subject: [PATCH 16/19] fix: hide start button in jobqueue panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/JobqueuePanel.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 1c14d5d56..8ab308c38 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -40,12 +40,7 @@
                     ghost-class="ghost"
                     group="jobs"
                     @end="updateOrder">
-                    <jobqueue-entry
-                        v-for="(job, index) in jobs"
-                        :key="job.job_id"
-                        :job="job"
-                        :show-handle="true"
-                        :show-print-button="index === 0" />
+                    <jobqueue-entry v-for="job in jobs" :key="job.job_id" :job="job" :show-handle="true" />
                 </draggable>
             </v-col>
         </v-row>

From 6f245929178e38a87510a74ef8fa7f7484be76ac Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 20:10:45 +0100
Subject: [PATCH 17/19] refactor: remove unused style section

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/Status/JobqueueEntry.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 9d54f85ba..0f0fdc90d 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -209,12 +209,3 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
     }
 }
 </script>
-
-<style scoped>
-._spin_button_group {
-    width: 24px;
-    margin-top: -6px;
-    margin-left: -6px;
-    margin-bottom: -6px;
-}
-</style>

From a44ef79b956de947cb4ebafbcd98221c24b80f70 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 20:17:44 +0100
Subject: [PATCH 18/19] locale(en): remove unused keys

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/en.json | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index c415fd55b..58639460a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -198,7 +198,6 @@
         "EditFile": "Edit File",
         "Empty": "Empty",
         "ExtruderTemp": "Extruder Temp.",
-        "Filament": "Filament",
         "FilamentName": "Filament Name",
         "FilamentType": "Filament Type",
         "FilamentUsage": "Filament Usage",
@@ -390,7 +389,6 @@
         "TotalTime": "Total Time"
     },
     "JobQueue": {
-        "AllJobs": "All Jobs",
         "Cancel": "Cancel",
         "ChangeCount": "Change count",
         "Count": "Count",
@@ -398,11 +396,6 @@
         "InvalidCountEmpty": "Input must not be empty!",
         "InvalidCountGreaterZero": "Input must be greater than 0!",
         "JobQueue": "Job Queue",
-        "Jobs": "Jobs",
-        "MoveQueueItemDown": "Move down",
-        "MoveQueueItemUp": "Move up",
-        "MoveToJobQueueEnd": "Move to Queue's end",
-        "MoveToJobQueueStart": "Move to Queue's start",
         "Pause": "Pause",
         "RemoveFromQueue": "Remove from Queue",
         "Start": "Start",

From 0e71f13f3407ef27147ea67e2db4a38666ca0b70 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 3 Feb 2024 20:22:29 +0100
Subject: [PATCH 19/19] locale(pl): remove unused keys

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/pl.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/locales/pl.json b/src/locales/pl.json
index fb6c231a4..7887bada8 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -388,7 +388,6 @@
         "TotalTime": "Całkowity czas druku"
     },
     "JobQueue": {
-        "AllJobs": "Wszystkie wydruki",
         "Cancel": "Anuluj",
         "ChangeCount": "Zmień ilość",
         "Count": "Ilość",
@@ -396,11 +395,6 @@
         "InvalidCountEmpty": "Pole wejściowe nie może być puste!",
         "InvalidCountGreaterZero": "Wprowadzona wartość musi być większa niż 0!",
         "JobQueue": "Kolejka wydruków",
-        "Jobs": "Wydruki",
-        "MoveQueueItemDown": "Przenieś niżej",
-        "MoveQueueItemUp": "Przenieś wyżej",
-        "MoveToJobQueueEnd": "Przenieś na koniec kolejki",
-        "MoveToJobQueueStart": "Przenieś na początek kolejki",
         "Pause": "Pauza",
         "RemoveFromQueue": "Usuń z kolejki",
         "Start": "Start"