From c31f62d72c75564ceda18204cf41db9c3bd11608 Mon Sep 17 00:00:00 2001 From: Adrian Kunz Date: Sun, 18 Aug 2024 11:27:22 +0200 Subject: [PATCH] refactor: Overhaul data collector modal --- .../add-data-collector-modal.component.html | 51 +++++++++------- .../add-data-collector-modal.component.ts | 60 +++++++++---------- .../data-collector.interface.ts | 7 --- src/app/audit/audit-routing.module.ts | 2 + .../options-dropdown.component.html | 4 +- .../shared/model/data-collector.interface.ts | 6 ++ src/app/shared/services/audit.service.ts | 7 ++- src/styles.scss | 5 -- 8 files changed, 70 insertions(+), 72 deletions(-) delete mode 100644 src/app/audit/add-data-collector-modal/data-collector.interface.ts create mode 100644 src/app/shared/model/data-collector.interface.ts diff --git a/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.html b/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.html index 9b28182..f2b982a 100644 --- a/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.html +++ b/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.html @@ -1,22 +1,29 @@ -
-

Add Data Collector ({{ audit.auditName | titlecase }})

- -
-
- -
-
- - -
+ + + Add Data Collector + {{ audit?.auditName | titlecase }} + + +
    + @for (item of dataCollectors; track item) { +
  • +
    + + +
    +
    • + } +
+ + + + + + diff --git a/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.ts b/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.ts index 9e34409..d7482ee 100644 --- a/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.ts +++ b/src/app/audit/add-data-collector-modal/add-data-collector-modal.component.ts @@ -1,8 +1,10 @@ -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', @@ -10,50 +12,42 @@ import {ToastService} from '@mean-stream/ngbx'; styleUrls: ['./add-data-collector-modal.component.scss'], }) export class AddDataCollectorModalComponent implements OnInit { - audit: any; + audit?: Audit; dataCollectors: DataCollector[] = []; + selected: Partial> = {}; 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(); } } diff --git a/src/app/audit/add-data-collector-modal/data-collector.interface.ts b/src/app/audit/add-data-collector-modal/data-collector.interface.ts deleted file mode 100644 index e24517c..0000000 --- a/src/app/audit/add-data-collector-modal/data-collector.interface.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface DataCollector { - id: number; - userName: string; - email: string; - state: string; - selected: boolean; // Add a selected property - } \ No newline at end of file diff --git a/src/app/audit/audit-routing.module.ts b/src/app/audit/audit-routing.module.ts index 2b76ce6..70cfa0b 100644 --- a/src/app/audit/audit-routing.module.ts +++ b/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}, ], }, diff --git a/src/app/audit/options-dropdown/options-dropdown.component.html b/src/app/audit/options-dropdown/options-dropdown.component.html index af62749..5e00623 100644 --- a/src/app/audit/options-dropdown/options-dropdown.component.html +++ b/src/app/audit/options-dropdown/options-dropdown.component.html @@ -18,9 +18,9 @@ Rename @if ((authService.currentLoginUser?.role?.role === 'admin' || authService.currentLoginUser?.role?.role === 'superAdmin') && audit?.user?.role?.role !== 'guest') { - + } @if (authService.currentLoginUser?.role?.role !== 'dataCollector' || (audit?.user?.role?.role !== 'admin' && audit?.user?.role?.role !== 'superAdmin')) {
diff --git a/src/app/shared/model/data-collector.interface.ts b/src/app/shared/model/data-collector.interface.ts new file mode 100644 index 0000000..bfb60a3 --- /dev/null +++ b/src/app/shared/model/data-collector.interface.ts @@ -0,0 +1,6 @@ +export interface DataCollector { + id: number; + userName: string; + email: string; + state: string; +} diff --git a/src/app/shared/services/audit.service.ts b/src/app/shared/services/audit.service.ts index b7d55df..fa1bcc1 100644 --- a/src/app/shared/services/audit.service.ts +++ b/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 { - return this.http.get(`${this.rootUrl}authApi/v1/data-collectors?auditId=${auditId}`); + dataCollectors(auditId: number): Observable { + return this.http.get(`${this.rootUrl}authApi/v1/data-collectors?auditId=${auditId}`); } - assignAudits(data: any[]):Observable { + assignAudits(data: { auditId: number; dataCollectorId: number }[]):Observable { return this.http.post(`${this.rootUrl}api/assign/`,data); } diff --git a/src/styles.scss b/src/styles.scss index 17ed57d..899cf66 100644 --- a/src/styles.scss +++ b/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; }