Suppress data loss dialogs in creation flow

web/src/app/components/create-survey/task-details/task-details.component.html

@@ -17,6 +17,6 @@
 <task-editor
   #tasksEditor
   [tasks]="tasks"
+  [isCreationMode]="true"
   (onValidationChanges)="onTasksChange($event)"
 ></task-editor>
-

web/src/app/components/edit-survey/edit-job/edit-job.component.html

@@ -20,10 +20,11 @@
 
     <mat-button-toggle-group
       (change)="onSectionChange($event.value)"
-      [value]="EditJobSection.TASKS"
+      [value]="section"
       class="edit-job-toggler"
       name="section"
-      aria-label="Section"
+      i18n-aria-label="@@app.labels.editJobSectionAria"
+      aria-label="Select job editor section"
     >
       <mat-button-toggle [value]="EditJobSection.TASKS">
         <mat-icon *ngIf="section !== EditJobSection.TASKS">list</mat-icon>

web/src/app/components/shared/task-editor/task-editor.component.html

@@ -37,6 +37,7 @@
     <task-form
       [formGroup]="formGroup"
       [formGroupIndex]="i"
+      [isCreationMode]="isCreationMode()"
       (delete)="onTaskDelete(i)"
       (duplicate)="onTaskDuplicate(i)"
       (toggleCondition)="onTaskConditionToggle(i)"

web/src/app/components/shared/task-editor/task-editor.component.ts

@@ -15,7 +15,7 @@
  */
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, input } from '@angular/core';
 import {
   AbstractControl,
   FormArray,
@@ -93,6 +93,8 @@ export class TaskEditorComponent {
   formGroup!: FormGroup;
 
   @Input() tasks?: List<Task>;
+  isCreationMode = input<boolean>(false);
+
   @Output() onValidationChanges: EventEmitter<boolean> =
     new EventEmitter<boolean>();
   @Output() onValueChanges: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -158,25 +160,28 @@ export class TaskEditorComponent {
   }
 
   onTaskDelete(index: number) {
-    this.dialogService
-      .openConfirmationDialog(
-        'Warning',
-        'Are you sure you wish to delete this question? Any associated data ' +
-          'will be lost. This cannot be undone.'
-      )
-      .afterClosed()
-      .subscribe(dialogResult => {
-        if (dialogResult) {
-          this.formArray.removeAt(index);
-        }
-      });
+    if (this.isCreationMode()) {
+      this.formArray.removeAt(index);
+    } else {
+      this.dialogService
+        .openConfirmationDialog(
+          $localize`:@@app.dialogs.deleteTask.title:Warning`,
+          $localize`:@@app.dialogs.deleteTask.content:Are you sure you wish to delete this question? Any associated data will be lost. This cannot be undone.`
+        )
+        .afterClosed()
+        .subscribe(dialogResult => {
+          if (dialogResult) {
+            this.formArray.removeAt(index);
+          }
+        });
+    }
   }
 
   onTaskDuplicate(index: number) {
     this.dialogService
       .openConfirmationDialog(
-        'Duplicate task',
-        'Are you sure you wish to duplicate this task?'
+        $localize`:@@app.dialogs.duplicateTask.title:Duplicate task`,
+        $localize`:@@app.dialogs.duplicateTask.content:Are you sure you wish to duplicate this task?`
       )
       .afterClosed()
       .subscribe(dialogResult => {

web/src/app/components/shared/task-editor/task-form/task-form.component.ts

@@ -23,6 +23,7 @@ import {
   HostListener,
   Input,
   Output,
+  input,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -159,6 +160,7 @@ const AddLoiTaskGroups = List([TaskGroup.DROP_PIN, TaskGroup.DRAW_AREA]);
 export class TaskFormComponent {
   @Input() formGroup!: FormGroup;
   @Input() formGroupIndex!: number;
+  isCreationMode = input<boolean>(false);
 
   @Output() delete = new EventEmitter();
   @Output() duplicate = new EventEmitter();
@@ -327,25 +329,33 @@ export class TaskFormComponent {
 
   onAddOtherOption(): void {
     this.otherOption = this.formBuilder.group({
-      label: { value: 'Other...', disabled: true },
+      label: {
+        value: $localize`:@@app.labels.other:Other...`,
+        disabled: true,
+      },
     });
 
     this.hasOtherOptionControl.setValue(true);
   }
 
   openDeleteOptionDialog(index?: number) {
-    this.dialog
-      .open(JobDialogComponent, {
-        data: { dialogType: DialogType.DeleteOption },
-        panelClass: 'small-width-dialog',
-      })
-      .afterClosed()
-      .subscribe(async (result: DialogData) => {
-        if (result?.dialogType === DialogType.DeleteOption) {
-          if (index !== undefined) this.optionsControl.removeAt(index);
-          else this.hasOtherOptionControl.setValue(false);
-        }
-      });
+    if (this.isCreationMode()) {
+      if (index !== undefined) this.optionsControl.removeAt(index);
+      else this.hasOtherOptionControl.setValue(false);
+    } else {
+      this.dialog
+        .open(JobDialogComponent, {
+          data: { dialogType: DialogType.DeleteOption },
+          panelClass: 'small-width-dialog',
+        })
+        .afterClosed()
+        .subscribe(async (result: DialogData) => {
+          if (result?.dialogType === DialogType.DeleteOption) {
+            if (index !== undefined) this.optionsControl.removeAt(index);
+            else this.hasOtherOptionControl.setValue(false);
+          }
+        });
+    }
   }
 
   drop(event: CdkDragDrop<string[]>): void {

web/src/app/services/dialog/dialog.service.ts

@@ -36,8 +36,10 @@ export interface DialogData {
     <h2 mat-dialog-title>{{ data.title }}</h2>
     <mat-dialog-content>{{ data.message }}</mat-dialog-content>
     <mat-dialog-actions>
-      <button mat-button (click)="onClose()">No</button>
-      <button mat-button (click)="onConfirm()">Yes</button>
+      <button mat-button (click)="onClose()" i18n="@@app.labels.no">No</button>
+      <button mat-button (click)="onConfirm()">
+        <span i18n="@@app.labels.yes">Yes</span>
+      </button>
     </mat-dialog-actions>
   `,
   imports: [