refactor: Overhaul data collector modal

src/app/audit/add-data-collector-modal/add-data-collector-modal.component.html

@@ -1,22 +1,29 @@
-<div class="modal-header">
-  <h4 class="modal-title">Add Data Collector ({{ audit.auditName | titlecase }})</h4>
-  <button type="button" class="btn-close btn-close-white" (click)="activeModal.dismiss()">
-  </button>
-</div>
-<div class="modal-body" style="height: 200px; overflow-y: scroll;">
-  <ul>
-    @for (item of dataCollectors; track item) {
-      <li class="data-collector-item">
-        <label>
-          <input type="checkbox" [(ngModel)]="item.selected"/>
-          {{ item.userName | titlecase }}
-          <pre>{{ item.email }}</pre>
-        </label>
-      </li>
-    }
-  </ul>
-</div>
-<div class="modal-footer">
-  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">Close</button>
-  <button type="button" class="btn btn-primary" (click)="onOkClick()">Add</button>
-</div>
+<ngbx-modal #modal [back]="['..']" [scrollable]="true">
+  <ng-container modal-title>
+    Add Data Collector
+    <span class="text-muted">{{ audit?.auditName | titlecase }}</span>
+  </ng-container>
+  <ng-container modal-body>
+    <ul class="list-unstyled">
+      @for (item of dataCollectors; track item) {
+        <li>
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="data-collector-{{ item.id }}" [(ngModel)]="selected[item.id]"/>
+            <label class="form-check-label" for="data-collector-{{ item.id }}">
+              {{ item.userName | titlecase }}
+              <pre>{{ item.email }}</pre>
+            </label>
+          </div>
+        </li>
+      }
+    </ul>
+  </ng-container>
+  <ng-container modal-footer>
+    <button type="button" class="btn btn-secondary" (click)="modal.close()">
+      Cancel
+    </button>
+    <button type="button" class="btn btn-primary" (click)="onOkClick(); modal.close()">
+      Save
+    </button>
+  </ng-container>
+</ngbx-modal>

src/app/audit/add-data-collector-modal/add-data-collector-modal.component.ts

@@ -1,59 +1,53 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
-import {DataCollector} from './data-collector.interface';
+import {Component, OnInit} from '@angular/core';
+import {DataCollector} from '../../shared/model/data-collector.interface';
 import {AuditService} from 'src/app/shared/services/audit.service';
 import {ToastService} from '@mean-stream/ngbx';
+import {Audit} from '../../shared/model/audit.interface';
+import {ActivatedRoute} from '@angular/router';
+import {switchMap} from 'rxjs';
 
 @Component({
   selector: 'app-add-data-collector-modal',
   templateUrl: './add-data-collector-modal.component.html',
   styleUrls: ['./add-data-collector-modal.component.scss'],
 })
 export class AddDataCollectorModalComponent implements OnInit {
-  audit: any;
+  audit?: Audit;
   dataCollectors: DataCollector[] = [];
+  selected: Partial<Record<number, boolean>> = {};
 
   constructor(
     private auditService: AuditService,
-    public activeModal: NgbActiveModal,
-    private cdRef: ChangeDetectorRef,
     private toastService: ToastService,
-  ) {}
-
-  ngOnInit(): void {
-    this.fetchDataCollectors();
+    private route: ActivatedRoute,
+  ) {
   }
 
-  fetchDataCollectors(): void {
-    this.auditService.dataCollectors(this.audit.auditId).subscribe((res: DataCollector[]) => {
-      this.dataCollectors = res.map((item: DataCollector) => ({
-        ...item,
-        selected: false,
-      }));
-      this.cdRef.detectChanges();
+  ngOnInit(): void {
+    this.route.params.pipe(
+      switchMap(({aid}) => this.auditService.getSingleAudit(aid)),
+    ).subscribe(({data}) => this.audit = data);
+
+    this.route.params.pipe(
+      switchMap(({aid}) => this.auditService.dataCollectors(aid)),
+    ).subscribe((res: DataCollector[]) => {
+      this.dataCollectors = res;
+      this.selected = {};
     });
   }
 
   onOkClick(): void {
-    const selectedDataCollectors = this.dataCollectors.filter((item) => item.selected);
-
-    if (!selectedDataCollectors.length) {
-      this.activeModal.close();
+    const assigned = this.dataCollectors
+      .filter(d => this.selected[d.id])
+      .map(d => ({
+        auditId: this.audit!.auditId,
+        dataCollectorId: d.id,
+      }));
+    if (!assigned.length) {
       return;
     }
-
-    let dataCollectorArray:any = [];
-    for (const dataCollector of selectedDataCollectors) {
-      const assignmentRequest = {
-        dataCollectorId: dataCollector.id,
-        auditId: this.audit.auditId,
-      };
-      dataCollectorArray.push(assignmentRequest);
-    }
-
-    this.auditService.assignAudits(dataCollectorArray).subscribe((res: any)=>{
+    this.auditService.assignAudits(assigned).subscribe(() => {
       this.toastService.success('Success', `Audit Assignment successful`);
     });
-    this.activeModal.close();
   }
 }

src/app/audit/audit-routing.module.ts

@@ -8,6 +8,7 @@ import {GrantsComponent} from './grants/grants.component';
 import {PreauditFormComponent} from './preaudit-form/preaudit-form.component';
 import {CreateAuditModalComponent} from './create-audit-modal/create-audit-modal.component';
 import {EquipmentOverviewComponent} from './equipment-overview/equipment-overview.component';
+import {AddDataCollectorModalComponent} from './add-data-collector-modal/add-data-collector-modal.component';
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
       {path: ':aid/cleanenergyhub', component: CleanEnergyHubComponent},
       {path: ':aid/photos', component: PhotosComponent},
       {path: ':aid/overview', component: EquipmentOverviewComponent},
+      {path: ':aid/data-collectors', component: AddDataCollectorModalComponent},
       {path: ':aid', component: AuditDetailComponent},
     ],
   },

src/app/audit/options-dropdown/options-dropdown.component.html

@@ -18,9 +18,9 @@
       Rename
     </button>
     @if ((authService.currentLoginUser?.role?.role === 'admin' || authService.currentLoginUser?.role?.role === 'superAdmin') && audit?.user?.role?.role !== 'guest') {
-      <button ngbDropdownItem class="bi-person-plus" (click)="openAddDataCollectorModal()">
+      <a ngbDropdownItem class="bi-person-plus" [routerLink]="['/audits', audit?.auditId, 'data-collectors']">
         Add DataCollector
-      </button>
+      </a>
     }
     @if (authService.currentLoginUser?.role?.role !== 'dataCollector' || (audit?.user?.role?.role !== 'admin' && audit?.user?.role?.role !== 'superAdmin')) {
       <div class="dropdown-divider"></div>

src/app/shared/model/data-collector.interface.ts

@@ -0,0 +1,6 @@
+export interface DataCollector {
+  id: number;
+  userName: string;
+  email: string;
+  state: string;
+}

src/app/shared/services/audit.service.ts

@@ -8,6 +8,7 @@ import {Audit, AuditDetails} from '../model/audit.interface';
 import {CreateZoneData, ZoneData, ZoneDataResponse} from '../model/zone.interface';
 import {PercentageCompletion} from '../model/percentage-completion.interface';
 import {Photo} from '../model/photo.interface';
+import {DataCollector} from '../model/data-collector.interface';
 
 export type PercentageQuery =
   | { percentageType: 'complete', auditId: number }
@@ -40,10 +41,10 @@ export class AuditService {
     });
   }
 
-  dataCollectors(auditId: number):Observable<any> {
-    return this.http.get(`${this.rootUrl}authApi/v1/data-collectors?auditId=${auditId}`);
+  dataCollectors(auditId: number): Observable<DataCollector[]> {
+    return this.http.get<DataCollector[]>(`${this.rootUrl}authApi/v1/data-collectors?auditId=${auditId}`);
   }
-  assignAudits(data: any[]):Observable<any> {
+  assignAudits(data: { auditId: number; dataCollectorId: number }[]):Observable<any> {
     return this.http.post(`${this.rootUrl}api/assign/`,data);
   }
 

src/styles.scss

@@ -56,11 +56,6 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
-.data-collector-item {
-  list-style-type: none; /* Remove the dot before the checkbox */
-  padding: 5px; /* Add some padding for better spacing */
-}
-
 .list-group-item.active {
   z-index: unset;
 }