feat: added second layer confirmation for Cancel Job (#1978)

Co-authored-by: Stefan Dej <meteyou@gmail.com>

src/components/dialogs/CancelJobDialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent>
+        <panel
+            :title="$t('CancelJobDialog.CancelJob')"
+            toolbar-color="normal"
+            card-class="cancel-job-dialog"
+            :icon="mdiStopCircleOutline"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>{{ $t('CancelJobDialog.AreYouSure') }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closePrompt">{{ $t('CancelJobDialog.No') }}</v-btn>
+                <v-btn color="primary" text @click="cancelJob">{{ $t('CancelJobDialog.Yes') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+
+import { mdiCloseThick, mdiStopCircleOutline } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class CancelJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiStopCircleOutline = mdiStopCircleOutline
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    cancelJob() {
+        this.$emit('cancel-job')
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>

src/components/panels/StatusPanel.vue

@@ -110,6 +110,10 @@
                 </v-tab-item>
             </v-tabs-items>
         </panel>
+        <cancel-job-dialog
+            :show-dialog="showCancelJobDialog"
+            @cancel-job="cancelJob"
+            @close="showCancelJobDialog = false" />
     </div>
 </template>
 
@@ -141,9 +145,11 @@ import {
     mdiDotsVertical,
 } from '@mdi/js'
 import { PrinterStateMacro } from '@/store/printer/types'
+import CancelJobDialog from '@/components/dialogs/CancelJobDialog.vue'
 
 @Component({
     components: {
+        CancelJobDialog,
         KlippyStatePanel,
         MinSettingsPanel,
         Panel,
@@ -166,6 +172,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
         bigThumbnail: any
     }
 
+    showCancelJobDialog = false
     boolShowObjects = false
     boolShowPauseAtLayer = false
 
@@ -392,6 +399,17 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     }
 
     btnCancelJob() {
+        const confirmOnCancelJob = this.$store.state.gui.uiSettings.confirmOnCancelJob
+        if (confirmOnCancelJob) {
+            this.showCancelJobDialog = true
+            return
+        }
+
+        this.cancelJob()
+    }
+
+    cancelJob() {
+        this.showCancelJobDialog = false
         this.$socket.emit('printer.print.cancel', {}, { loading: 'statusPrintCancel' })
     }
 

src/components/settings/SettingsUiSettingsTab.vue

@@ -178,6 +178,13 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnCancelJob')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnCancelJobDescription')"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="confirmOnCancelJob" hide-details class="mt-0" />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.NavigationStyle')"
                     :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
@@ -426,6 +433,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin, ThemeMixin)
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnPowerDeviceChange', value: newVal })
     }
 
+    get confirmOnCancelJob() {
+        return this.$store.state.gui.uiSettings.confirmOnCancelJob
+    }
+
+    set confirmOnCancelJob(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnCancelJob', value: newVal })
+    }
+
     get lockSliders() {
         return this.$store.state.gui.uiSettings.lockSlidersOnTouchDevices
     }

src/locales/de.json

@@ -144,6 +144,12 @@
         "ScrewName": "Name der Schraube",
         "ScrewOutput": "{current} von {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Bist du sicher?",
+        "CancelJob": "Druck abbrechen",
+        "No": "Nein",
+        "Yes": "Ja"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Kann keine Verbindung zu Moonraker ({host}) herstellen.",
         "CheckMoonrakerLog": "Wenn diese Meldung wiederholt erscheint, schaue bitte in die Logdatei unter:",
@@ -1196,6 +1202,8 @@
             "BoolBigThumbnailDescription": "Zeige ein großes Thumbnail in der Status-Anzeige während eines Drucks.",
             "BoolHideUploadAndPrintButton": "\"Hochladen & Drucken\" Schaltfläche ausblenden",
             "BoolHideUploadAndPrintButtonDescription": "Blendet die \"Hochladen & Drucken\" Schaltfläche in der Kopfleiste ein oder aus.",
+            "ConfirmOnCancelJob": "Bestätigung für Druck abbrechen erforderlich",
+            "ConfirmOnCancelJobDescription": "Zeige vor dem Druck abbrechen einen Bestätigungsdialog.",
             "ConfirmOnCoolDown": "Bestätigung für Abkühlen erforderlich",
             "ConfirmOnCoolDownDescription": "Zeige vor dem Abkühlen einen Bestätigungsdialog.",
             "ConfirmOnEmergencyStop": "Bestätigung für Notstopp erforderlich",

src/locales/en.json

@@ -144,6 +144,12 @@
         "ScrewName": "Screw Name",
         "ScrewOutput": "{current} of {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Are you sure?",
+        "CancelJob": "Cancel Job",
+        "No": "No",
+        "Yes": "Yes"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Cannot connect to Moonraker ({host}).",
         "CheckMoonrakerLog": "If this message appears repeatedly, please have a look in the log file located at:",
@@ -1197,6 +1203,8 @@
             "BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
             "BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
             "BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the top bar.",
+            "ConfirmOnCancelJob": "Require confirm on Cancel Job",
+            "ConfirmOnCancelJobDescription": "Show a confirmation dialog on Cancel Job",
             "ConfirmOnCoolDown": "Require confirm on CoolDown",
             "ConfirmOnCoolDownDescription": "Show a confirmation dialog on CoolDown",
             "ConfirmOnEmergencyStop": "Require confirm on Emergency Stop",

src/store/gui/index.ts

@@ -166,6 +166,7 @@ export const getDefaultState = (): GuiState => {
             confirmOnEmergencyStop: false,
             confirmOnCoolDown: false,
             confirmOnPowerDeviceChange: false,
+            confirmOnCancelJob: false,
             boolBigThumbnail: true,
             bigThumbnailBackground: defaultBigThumbnailBackground,
             boolWideNavDrawer: false,

src/store/gui/types.ts

@@ -108,6 +108,7 @@ export interface GuiState {
         confirmOnEmergencyStop: boolean
         confirmOnCoolDown: boolean
         confirmOnPowerDeviceChange: boolean
+        confirmOnCancelJob: boolean
         boolBigThumbnail: boolean
         bigThumbnailBackground: string
         boolWideNavDrawer: boolean