feat: add confirmation dialogs for delete actions (#1520)

Signed-off-by: Pedro Lamas <[email protected]>

src/components/common/SystemPrinters.vue

@@ -78,8 +78,15 @@ export default class SystemPrinters extends Mixins(StateMixin) {
     }
   }
 
-  removeInstance (instance: InstanceConfig) {
-    this.$store.dispatch('config/removeInstance', instance)
+  async removeInstance (instance: InstanceConfig) {
+    const result = await this.$confirm(
+      this.$t('app.general.simple_form.msg.confirm_remove_printer', { name: instance.name }).toString(),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      this.$store.dispatch('config/removeInstance', instance)
+    }
   }
 
   addInstanceDialog () {

src/components/settings/cameras/CameraSettings.vue

@@ -155,8 +155,15 @@ export default class CameraSettings extends Vue {
     this.$store.dispatch('webcams/updateWebcam', camera)
   }
 
-  handleRemoveCamera (camera: WebcamConfig) {
-    this.$store.dispatch('webcams/removeWebcam', camera.uid)
+  async handleRemoveCamera (camera: WebcamConfig) {
+    const result = await this.$confirm(
+      this.$t('app.general.simple_form.msg.confirm_remove_camera', { name: camera.name }).toString(),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      this.$store.dispatch('webcams/removeWebcam', camera.uid)
+    }
   }
 
   get defaultFullscreenAction (): string {

src/components/settings/console/ConsoleSettings.vue

@@ -112,8 +112,15 @@ export default class ConsoleSettings extends Mixins(StateMixin) {
     }
   }
 
-  handleRemoveFilter (filter: ConsoleFilter) {
-    this.$store.dispatch('console/onRemoveFilter', filter)
+  async handleRemoveFilter (filter: ConsoleFilter) {
+    const result = await this.$confirm(
+      this.$t('app.general.simple_form.msg.confirm_remove_console_filter', { name: filter.name }).toString(),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      this.$store.dispatch('console/onRemoveFilter', filter)
+    }
   }
 
   handleSaveFilter (filter: ConsoleFilter) {

src/components/settings/macros/MacroSettings.vue

@@ -161,8 +161,15 @@ export default class MacroSettings extends Mixins(StateMixin) {
     }
   }
 
-  handleRemoveCategory (category: MacroCategory) {
-    this.$store.dispatch('macros/removeCategory', category)
+  async handleRemoveCategory (category: MacroCategory) {
+    const result = await this.$confirm(
+      this.$t('app.general.simple_form.msg.confirm_remove_macro_category', { name: category.name }).toString(),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      this.$store.dispatch('macros/removeCategory', category)
+    }
   }
 
   handleAddCategory (category: string) {

src/components/settings/presets/PresetSettings.vue

@@ -32,7 +32,6 @@
           :key="preset.index"
           :title="preset.name"
           :r-cols="2"
-          @click="openEditDialog(preset)"
         >
           <template #sub-title>
             <span
@@ -45,6 +44,19 @@
             </span>
           </template>
 
+          <app-btn
+            fab
+            text
+            x-small
+            color=""
+            class="ms-1"
+            @click.stop="openEditDialog(preset)"
+          >
+            <v-icon color="">
+              $edit
+            </v-icon>
+          </app-btn>
+
           <app-btn
             fab
             text
@@ -134,8 +146,15 @@ export default class TemperaturePresetSettings extends Mixins(StateMixin) {
     this.$store.dispatch('config/updatePreset', preset)
   }
 
-  handleRemovePreset (preset: TemperaturePreset) {
-    this.$store.dispatch('config/removePreset', preset)
+  async handleRemovePreset (preset: TemperaturePreset) {
+    const result = await this.$confirm(
+      this.$t('app.general.simple_form.msg.confirm_remove_thermal_preset', { name: preset.name }).toString(),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      this.$store.dispatch('config/removePreset', preset)
+    }
   }
 }
 </script>

src/components/widgets/history/JobHistory.vue

@@ -246,8 +246,15 @@ export default class JobHistory extends Mixins(FilesMixin) {
     return filename.split('/').pop() || ''
   }
 
-  handleRemoveJob (job: HistoryItem) {
-    SocketActions.serverHistoryDeleteJob(job.job_id)
+  async handleRemoveJob (job: HistoryItem) {
+    const result = await this.$confirm(
+      this.$tc('app.general.simple_form.msg.confirm_delete', 1),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      SocketActions.serverHistoryDeleteJob(job.job_id)
+    }
   }
 
   handleJobThumbnailError (job: HistoryItem) {

src/locales/en.yaml

@@ -384,6 +384,11 @@ app:
         confirm_forcemove_toggle: Are you sure? This can damage the printer.
         confirm_load_bedmesh_profile: The printer is currently busy. Are you sure you want to load profile %{name}?
         confirm_reboot_host: Are you sure? This will reboot your host system.
+        confirm_remove_camera: Are you sure you want to remove the camera %{name}?
+        confirm_remove_console_filter: Are you sure you want to remove the console filter %{name}?
+        confirm_remove_macro_category: Are you sure you want to remove the macro category %{name}?
+        confirm_remove_printer: Are you sure you want to remove the printer %{name}?
+        confirm_remove_thermal_preset: Are you sure you want to remove the thermal preset %{name}?
         confirm_remove_user: Are you sure you want to remove user %{username}?
         confirm_shutdown_host: Are you sure? This will shutdown your host system.
         confirm_service_start: Are you sure you want to start the %{name} service?