refactor: creating statuses groups

aneoconsulting · Dec 24, 2024 · 1809a97 · 1809a97
1 parent 00168e8
commit 1809a97
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 51 deletions.
diff --git a/src/app/components/statuses/add-statuses-group-dialog.component.ts b/src/app/components/statuses/add-statuses-group-dialog.component.ts
@@ -1,7 +1,7 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FormStatusesGroupComponent } from './form-statuses-group.component';
-import { AddStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '../../dashboard/types';
+import { AddStatusGroupDialogData, TasksStatusesGroup } from '../../dashboard/types';
 
 @Component({
   selector: 'app-add-statuses-group-dialog',
@@ -10,7 +10,7 @@ import { AddStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '../
 
 <app-form-statuses-group
   [group]="null"
-  [statuses]="statuses"
+  [statuses]="data.statuses"
   (cancelChange)="onNoClick()"
   (submitChange)="onSubmit($event)"
 />
@@ -25,18 +25,12 @@ import { AddStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '../
     MatDialogModule,
   ]
 })
-export class AddStatusesGroupDialogComponent implements OnInit {
-  statuses: StatusLabeled[] = [];
-
+export class AddStatusesGroupDialogComponent {
   constructor(
     public _dialogRef: MatDialogRef<AddStatusesGroupDialogComponent, TasksStatusesGroup>,
     @Inject(MAT_DIALOG_DATA) public data: AddStatusGroupDialogData,
   ) {}
 
-  ngOnInit(): void {
-    this.statuses = this.data.statuses;
-  }
-
   onSubmit(result: TasksStatusesGroup) {
     this._dialogRef.close(result);
   }

diff --git a/src/app/components/statuses/edit-status-group-dialog.component.ts b/src/app/components/statuses/edit-status-group-dialog.component.ts
@@ -1,7 +1,7 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FormStatusesGroupComponent } from './form-statuses-group.component';
-import { EditStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '../../dashboard/types';
+import { EditStatusGroupDialogData, TasksStatusesGroup } from '../../dashboard/types';
 
 @Component({
   selector: 'app-edit-statuses-group-dialog',
@@ -10,7 +10,7 @@ import { EditStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '..
 
 <app-form-statuses-group
   [group]="group"
-  [statuses]="statuses"
+  [statuses]="data.statuses"
   (cancelChange)="onNoClick()"
   (submitChange)="onSubmit($event)"
 />
@@ -25,18 +25,14 @@ import { EditStatusGroupDialogData, StatusLabeled, TasksStatusesGroup } from '..
     MatDialogModule,
   ]
 })
-export class EditStatusesGroupDialogComponent implements OnInit {
+export class EditStatusesGroupDialogComponent {
   group: TasksStatusesGroup;
-  statuses: StatusLabeled[] = [];
 
   constructor(
     public _dialogRef: MatDialogRef<EditStatusesGroupDialogComponent, TasksStatusesGroup>,
     @Inject(MAT_DIALOG_DATA) public data: EditStatusGroupDialogData,
-  ) {}
-
-  ngOnInit(): void {
+  ) {
     this.group = {...this.data.group};
-    this.statuses = this.data.statuses;
   }
 
   onSubmit(result: TasksStatusesGroup) {

diff --git a/src/app/components/statuses/form-statuses-group.component.html b/src/app/components/statuses/form-statuses-group.component.html
@@ -13,15 +13,15 @@
 
     <mat-form-field subscriptSizing="dynamic" appearance="outline">
       <mat-label for="color" i18n="Color of the statuses group"> Color </mat-label>
-      <input matInput id="color" type="color" formControlName="color" i18n-placeholder placeholder="color of your group">
+      <input matInput id="color" type="color" [value]="groupForm.value.color" formControlName="color" i18n-placeholder placeholder="color of your group">
     </mat-form-field>
 
     <div class="statuses">
       <h3 i18n> Statuses </h3>
       <div class="inputs">
-        @for (status of statuses; track status.value) {
-          <mat-checkbox [value]="status.value.label" (change)="onCheckboxChange($event)" [checked]="isChecked(status)">
-            {{ status.name }}
+        @for (status of allStatuses; track status) {
+          <mat-checkbox [value]="status" (change)="onCheckboxChange($event)" [checked]="isChecked(status)">
+            {{ getLabel(status) }}
           </mat-checkbox>
         }
       </div>

diff --git a/src/app/components/statuses/form-statuses-group.component.ts b/src/app/components/statuses/form-statuses-group.component.ts
@@ -7,7 +7,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { StatusLabelColor } from '@app/types/status';
-import { StatusLabeled, TasksStatusesGroup } from '../../dashboard/types';
+import { TasksStatusesGroup } from '../../dashboard/types';
 
 @Component({
   selector: 'app-form-statuses-group',
@@ -47,31 +47,31 @@ mat-dialog-content {
 })
 export class FormStatusesGroupComponent implements OnInit {
   @Input() group: TasksStatusesGroup | null = null;
-  @Input({ required: true }) statuses: { name: string, value: StatusLabelColor }[] = [];
+  @Input({ required: true }) set statuses(entry: Record<TaskStatus, StatusLabelColor>) {
+    this.statusesLabelsColor = entry;
+    this.allStatuses = Object.keys(entry);
+  }
+
+  private statusesLabelsColor: Record<TaskStatus, StatusLabelColor>;
+  allStatuses: string[];
 
   @Output() cancelChange = new EventEmitter<void>();
   @Output() submitChange = new EventEmitter<TasksStatusesGroup>();
 
-  groupForm = new FormGroup({
-    name: new FormControl<string | null>(null, [
-      Validators.required,
-    ]),
-    color: new FormControl<string | null>(''),
-    statuses: new FormControl<TaskStatus[]>([])
-  });
+  groupForm: FormGroup;
 
   ngOnInit() {
-    if(this.group) {
-      this.groupForm.patchValue({
-        name: this.group.name,
-        color: this.group.color ?? null,
-        statuses: [...this.group.statuses],
-      });
-    }
+    this.groupForm = new FormGroup({
+      name: new FormControl<string | null>(this.group?.name ?? null, [
+        Validators.required,
+      ]),
+      color: new FormControl<string | null>(this.group?.color ?? null),
+      statuses: new FormControl<TaskStatus[]>(this.group?.statuses ? [...this.group.statuses] : [])
+    });
   }
 
-  isChecked(status: StatusLabeled): boolean {
-    return this.group?.statuses.includes(Number(status.value) as TaskStatus) ?? false;
+  isChecked(status: string): boolean {
+    return this.group?.statuses.includes(Number(status) as TaskStatus) ?? false;
   }
 
   onCheckboxChange(e: MatCheckboxChange) {
@@ -81,17 +81,19 @@ export class FormStatusesGroupComponent implements OnInit {
     if (e.checked) {
       statuses.value.push(status);
       if (!this.groupForm.value.name && statuses.value.length === 1) {
-        const status = this.statuses.find(status => status.value.label === e.source.value);
-        if (status) {
-          this.groupForm.patchValue({name: status.name});
-        }
+        const statusLabelColor = this.statusesLabelsColor[status];
+        this.groupForm.patchValue({name: statusLabelColor.label, color: statusLabelColor.color});
       }
     } else {
       const index = statuses.value.findIndex(s => s === status);
       statuses.value.splice(index, 1);
     }
   }
 
+  getLabel(value: string) {
+    return this.statusesLabelsColor[Number(value) as TaskStatus].label;
+  }
+
   onSubmit() {
     const result: TasksStatusesGroup = {
       name: this.groupForm.value.name ?? '',

diff --git a/src/app/components/statuses/manage-groups-dialog.component.ts b/src/app/components/statuses/manage-groups-dialog.component.ts
@@ -168,7 +168,7 @@ export class ManageGroupsDialogComponent {
   openAddStatusGroupModal(): void {
     const dialogRef: MatDialogRef<AddStatusesGroupDialogComponent, TasksStatusesGroup> = this.dialog.open(AddStatusesGroupDialogComponent, {
       data: {
-        statuses: this.tasksStatusesService.statusesRecord(),
+        statuses: this.tasksStatusesService.statuses,
       }
     });
 
@@ -183,7 +183,7 @@ export class ManageGroupsDialogComponent {
     const dialogRef: MatDialogRef<EditStatusesGroupDialogComponent, TasksStatusesGroup> = this.dialog.open(EditStatusesGroupDialogComponent, {
       data: {
         group,
-        statuses: this.tasksStatusesService.statusesRecord(),
+        statuses: this.tasksStatusesService.statuses,
       }
     });
 

diff --git a/src/app/dashboard/types.ts b/src/app/dashboard/types.ts
@@ -50,13 +50,11 @@ export type ManageGroupsDialogResult = {
   groups: TasksStatusesGroup[];
 };
 
-export type StatusLabeled = { name: string, value: StatusLabelColor };
-
 export type AddStatusGroupDialogData = {
-  statuses: StatusLabeled[];
+  statuses: Record<TaskStatus, StatusLabelColor>;
 };
 
 export type EditStatusGroupDialogData = {
   group: TasksStatusesGroup;
-  statuses: StatusLabeled[];
+  statuses: Record<TaskStatus, StatusLabelColor>;
 };