Refactor JobDialogComponent to use shared TaskEditorComponent (#2409)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Roberto Fontanarosa <robertofontanarosa@gmail.com>

Author: 3 people

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

@@ -14,9 +14,9 @@
   limitations under the License.
 -->
 
-<tasks-editor
+<task-editor
   #tasksEditor
   [tasks]="tasks"
   (onValidationChanges)="onTasksChange($event)"
-></tasks-editor>
+></task-editor>
 

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

@@ -23,7 +23,7 @@ import {
 } from '@angular/core';
 import { List } from 'immutable';
 
-import { TasksEditorComponent } from 'app/components/shared/tasks-editor/tasks-editor.component';
+import { TaskEditorComponent } from 'app/components/shared/task-editor/task-editor.component';
 import { Job } from 'app/models/job.model';
 import { Task } from 'app/models/task/task.model';
 
@@ -41,7 +41,7 @@ export class TaskDetailsComponent {
   tasks: List<Task> = List([]);
 
   @ViewChild('tasksEditor')
-  tasksEditor?: TasksEditorComponent;
+  tasksEditor?: TaskEditorComponent;
 
   constructor() {}
 

web/src/app/components/create-survey/task-details/task-details.module.ts

@@ -17,13 +17,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { TasksEditorModule } from 'app/components/shared/tasks-editor/tasks-editor.module';
+import { TaskEditorModule } from 'app/components/shared/task-editor/task-editor.module';
 
 import { TaskDetailsComponent } from './task-details.component';
 
 @NgModule({
   declarations: [TaskDetailsComponent],
-  imports: [CommonModule, TasksEditorModule],
+  imports: [CommonModule, TaskEditorModule],
   exports: [TaskDetailsComponent],
 })
 export class TaskDetailsModule {}

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

@@ -51,12 +51,12 @@
     </div>
 
     <div *ngSwitchCase="EditJobSection.TASKS">
-      <tasks-editor
+      <task-editor
         [tasks]="tasks"
         (onValueChanges)="onTasksChange($event)"
         #tasksEditor
       >
-      </tasks-editor>
+      </task-editor>
     </div>
   </div>
 </div>

web/src/app/components/edit-survey/edit-job/edit-job.component.spec.ts

@@ -30,7 +30,7 @@ import { Subject, from, of } from 'rxjs';
 
 import { EditJobComponent } from 'app/components/edit-survey/edit-job/edit-job.component';
 import { LoiEditorComponent } from 'app/components/shared/loi-editor/loi-editor.component';
-import { TasksEditorModule } from 'app/components/shared/tasks-editor/tasks-editor.module';
+import { TaskEditorModule } from 'app/components/shared/task-editor/task-editor.module';
 import { Job } from 'app/models/job.model';
 import { LocationOfInterest } from 'app/models/loi.model';
 import { Role } from 'app/models/role.model';
@@ -83,7 +83,7 @@ describe('EditJobComponent', () => {
         MatButtonToggle,
         MatDialogModule,
         MatIconModule,
-        TasksEditorModule,
+        TaskEditorModule,
       ],
       providers: [
         { provide: AuthService, useValue: { getUser$: () => user$ } },

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

@@ -20,7 +20,7 @@ import { List } from 'immutable';
 import { Subscription } from 'rxjs';
 
 import { LoiEditorComponent } from 'app/components/shared/loi-editor/loi-editor.component';
-import { TasksEditorComponent } from 'app/components/shared/tasks-editor/tasks-editor.component';
+import { TaskEditorComponent } from 'app/components/shared/task-editor/task-editor.component';
 import { DataCollectionStrategy, Job } from 'app/models/job.model';
 import { LocationOfInterest } from 'app/models/loi.model';
 import { Task } from 'app/models/task/task.model';
@@ -58,7 +58,7 @@ export class EditJobComponent {
   EditJobSection = EditJobSection;
 
   @ViewChild('tasksEditor')
-  tasksEditor?: TasksEditorComponent;
+  tasksEditor?: TaskEditorComponent;
 
   @ViewChild('loiEditor')
   loiEditor?: LoiEditorComponent;

web/src/app/components/edit-survey/edit-job/edit-job.module.ts

@@ -24,7 +24,7 @@ import { MatIconModule } from '@angular/material/icon';
 
 import { EditJobComponent } from 'app/components/edit-survey/edit-job/edit-job.component';
 import { LoiEditorModule } from 'app/components/shared/loi-editor/loi-editor.module';
-import { TasksEditorModule } from 'app/components/shared/tasks-editor/tasks-editor.module';
+import { TaskEditorModule } from 'app/components/shared/task-editor/task-editor.module';
 
 @NgModule({
   declarations: [EditJobComponent],
@@ -34,7 +34,7 @@ import { TasksEditorModule } from 'app/components/shared/tasks-editor/tasks-edit
     MatButtonToggle,
     MatIconModule,
     LoiEditorModule,
-    TasksEditorModule,
+    TaskEditorModule,
   ],
   exports: [EditJobComponent],
 })

web/src/app/components/main-page-container/main-page/job-dialog/job-dialog.component.html

@@ -57,28 +57,7 @@ <h3>Task Layout</h3>
       polygon in this job.
     </div>
   </div>
-  <div cdkDropList (cdkDropListDropped)="drop($event)">
-    <div
-      *ngFor="let task of tasks; let i = index; trackBy: trackByFn"
-      cdkDrag
-    >
-      <ground-task-editor
-        [label]="task.label"
-        [required]="task.required"
-        [taskType]="task.type"
-        [cardinality]="task.multipleChoice?.cardinality"
-        [multipleChoice]="task.multipleChoice"
-        [taskCount]="tasks.size"
-        (update)="onTaskUpdate($event, i)"
-        (delete)="onTaskDelete(i)"
-      >
-      </ground-task-editor>
-    </div>
-  </div>
-  <button mat-button class="add-question" type="button" (click)="addQuestion()">
-    <mat-icon color="primary">add</mat-icon>
-    <span class="link-add-question">Add question</span>
-  </button>
+  <task-editor #tasksEditor [tasks]="tasks"></task-editor>
 </mat-dialog-content>
 <mat-dialog-actions>
   <div>

web/src/app/components/main-page-container/main-page/job-dialog/job-dialog.component.spec.ts

@@ -40,7 +40,7 @@ import { DataStoreService } from 'app/services/data-store/data-store.service';
 import { EditStyleButtonModule } from './edit-style-button/edit-style-button.module';
 import { JobService } from 'app/services/job/job.service';
 import { JobDialogComponent } from './job-dialog.component';
-import { TaskEditorModule } from './task-editor/task-editor.module';
+import { TaskEditorModule } from 'app/components/shared/task-editor/task-editor.module';
 
 @Component({
   selector: 'mat-dialog-content',
@@ -113,12 +113,6 @@ describe('JobDialogComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should add question', () => {
-    component.addQuestion();
-    expect(component.tasks.size).toBe(2);
-    expect(component.tasks.first()?.type).toBe(TaskType.TEXT);
-  });
 });
 
 function createRouterSpy() {