Removing duplication of subcategories when creating and editing a post (

#999) * Removing duplication of sub-categories when adding and editing posts * Removing duplication of subcategories when adding and editing posts * Adjusting select-all functionality
ushahidi · Apr 29, 2024 · 0e4b8d4 · 0e4b8d4
1 parent 48e91d9
commit 0e4b8d4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.html b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.html
@@ -152,18 +152,24 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
             </ng-container>
 
             <ng-container *ngIf="field.input === 'tags'">
-              <span class="related-post-list" *ngIf="field.options?.length; else noOptions">
+              <span
+                class="related-post-list"
+                *ngIf="getTotalCategoryCount(field.options); else noOptions"
+              >
                 <ul>
                   <li>
                     <mat-checkbox
-                      [checked]="form.get(field.key)?.value.length === field.options.length"
+                      [checked]="
+                        form.get(field.key)?.value.length === getTotalCategoryCount(field.options)
+                      "
                       (change)="toggleAllSelection($event, task.fields, field.key)"
                     >
                       {{ 'nav.select_all' | translate }}
                     </mat-checkbox>
                   </li>
                   <li *ngFor="let option of field.options; trackBy: trackById">
                     <mat-checkbox
+                      *ngIf="!option.parent_id"
                       [checked]="form.get(field.key)?.value.includes(option.id)"
                       (change)="
                         onCheckChange(

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -183,6 +183,14 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
     });
   }
 
+  getParentsWithChildren(options: any[]) {
+    const parents = options.filter((opt: any) => !opt.parent_id);
+    parents.forEach((parent) => {
+      parent.children = options.filter((opt: any) => opt.parent_id === parent.id);
+    });
+    return parents;
+  }
+
   private loadSurveyData(formId: number | null, updateContent?: any[]) {
     if (!formId) return;
     this.surveysService.getSurveyById(formId).subscribe({
@@ -217,6 +225,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                   this.description = field.default;
                   break;
                 case 'tags':
+                  field.options = this.getParentsWithChildren(field.options);
                   this.description = field.default;
                   break;
                 case 'media': // Max image size addition hack
@@ -454,10 +463,6 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
     return new FormControl(value, validators);
   }
 
-  public getOptionsByParentId(field: any, parent_id: number): any[] {
-    return field.options.filter((option: any) => option.parent_id === parent_id);
-  }
-
   async preparationData(): Promise<any> {
     for (const task of this.tasks) {
       task.fields = await Promise.all(
@@ -729,7 +734,13 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       this.router.navigate(['map']);
     }
   }
-
+  public getTotalCategoryCount(options: any[]) {
+    let length = options.length;
+    options.forEach((parent) => {
+      length = length + parent.children.length;
+    });
+    return length;
+  }
   public toggleAllSelection(event: MatCheckboxChange, fields: any, fieldKey: string) {
     fields.map((field: any) => {
       if (field.key === fieldKey) {
@@ -765,8 +776,8 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       }
 
       if (!parentId && options) {
-        const children = options.filter((option) => option.parent_id === id);
-        children.forEach((child) => {
+        const parent = options.find((option) => option.id === id);
+        parent.children.forEach((child: any) => {
           const hasChildId = formArray.controls.some((control: any) => control.value === child.id);
           if (!hasChildId) formArray.push(new FormControl(child.id));
         });
@@ -776,8 +787,8 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       if (index > -1) formArray.removeAt(index);
 
       if (parentId && options) {
-        const children = options.filter((option: any) => option.parent_id === parentId);
-        const isParentHasCheckedChild = children.some((child) =>
+        const parent = options.find((option) => option.id === parentId);
+        const isParentHasCheckedChild = parent.children.some((child: any) =>
           formArray.controls.some((control: any) => control.value === child.id),
         );
         if (!isParentHasCheckedChild) {
@@ -787,8 +798,8 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       }
 
       if (!parentId && options) {
-        const children = options.filter((option) => option.parent_id === id);
-        children.forEach((child) => {
+        const parent = options.find((option) => option.id === id);
+        parent.children.forEach((child: any) => {
           const i = formArray.controls.findIndex((ctrl: any) => ctrl.value === child.id);
           if (i > -1) formArray.removeAt(i);
         });