Displaying sub-categories in client (#764)

* Adding child-categories to the view in post-details

* Adding child-categories to the view when adding/editing posts

* Adding child-categories to the view in settings-categories

* Adding child-categories to the view in settings-surveys

* Adding child-categories to the view in filter-dropdown

* Adjustments to post-detail view for categories

* Selecting all children when selecting all categories

apps/web-mzima-client/src/app/post/post-details/post-details.component.html

@@ -55,10 +55,18 @@ <h3>{{ field.label }}</h3>
 
             <ng-container *ngIf="field.input === 'tags'">
               <ng-container *ngFor="let category of field.value">
-                <div class="category" *ngIf="!isParentCategory(post.categories, category.id)">
+                <div class="category">
                   <mat-icon svgIcon="tag" class="category__icon"></mat-icon>
                   {{ category.tag }}
                 </div>
+                <ng-container *ngIf="category.children">
+                  <ng-container *ngFor="let child of category.children">
+                    <div class="category__child">
+                      <mat-icon svgIcon="tag" class="category__icon"></mat-icon>
+                      {{ child.tag }}
+                    </div>
+                  </ng-container>
+                </ng-container>
               </ng-container>
             </ng-container>
 

apps/web-mzima-client/src/app/post/post-details/post-details.component.scss

@@ -186,6 +186,9 @@
     margin-inline-end: 8px;
     margin-top: 2px;
   }
+  &__child {
+    padding-left: 15px;
+  }
 }
 
 .map {

apps/web-mzima-client/src/app/post/post-details/post-details.component.ts

@@ -127,9 +127,34 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
       this.preparingMediaField(content.fields);
       this.preparingSafeVideoUrls(content.fields);
       this.preparingRelatedPosts(content.fields);
+      this.preparingCategories(content.fields);
     }
   }
 
+  private preparingCategories(fields: PostContentField[]): void {
+    fields
+      .filter((field: any) => field.type === 'tags')
+      .map((categories: any) => {
+        categories.value = categories.value.filter((category: any) => {
+          // Adding children to parents
+          if (!category.parent_id) {
+            category.children = categories.value.filter(
+              (child: any) => child.parent_id === category.id,
+            );
+            return category;
+          }
+          // Removing children with parents from values to avoid repetition
+          if (
+            category.parent_id &&
+            !categories.value.filter((parent: any) => category.parent_id === parent.id).length
+          ) {
+            return category;
+          }
+        });
+        return categories;
+      });
+  }
+
   private preparingRelatedPosts(fields: PostContentField[]): void {
     fields
       .filter((field: any) => field.type === 'relation')

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.html

@@ -164,7 +164,6 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
                   </li>
                   <li *ngFor="let option of field.options; trackBy: trackById">
                     <mat-checkbox
-                      [ngClass]="{ 'lvl-2': option.parent }"
                       [checked]="form.get(field.key)?.value.includes(option.id)"
                       (change)="
                         onCheckChange(
@@ -178,6 +177,25 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
                     >
                       {{ option.tag }}
                     </mat-checkbox>
+                    <ul *ngIf="option.children; trackBy: trackById">
+                      <li *ngFor="let child of option.children">
+                        <mat-checkbox
+                          class="lvl-2"
+                          [checked]="form.get(field.key)?.value.includes(child.id)"
+                          (change)="
+                            onCheckChange(
+                              $event,
+                              field.key,
+                              child.id,
+                              field.options,
+                              child.parent?.id
+                            )
+                          "
+                        >
+                          {{ child.tag }}
+                        </mat-checkbox>
+                      </li>
+                    </ul>
                   </li>
                 </ul>
               </span>

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts

@@ -183,17 +183,6 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
     });
   }
 
-  getOrderedOptions(options: any[]) {
-    const result: any[] = [];
-    options
-      .filter((opt: any) => !opt.parent_id)
-      .forEach((parent) => {
-        result.push(parent);
-        result.push(...options.filter((opt: any) => opt.parent_id === parent.id));
-      });
-    return result;
-  }
-
   private loadSurveyData(formId: number | null, updateContent?: any[]) {
     if (!formId) return;
     this.surveysService.getSurveyById(formId).subscribe({
@@ -228,7 +217,6 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                   this.description = field.default;
                   break;
                 case 'tags':
-                  field.options = this.getOrderedOptions(field.options);
                   this.description = field.default;
                   break;
                 case 'media': // Max image size addition hack
@@ -747,6 +735,11 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       if (field.key === fieldKey) {
         field.options.map((el: any) => {
           this.onCheckChange(event, field.key, el.id);
+          if (el.children?.length) {
+            el.children.map((child: any) => {
+              this.onCheckChange(event, field.key, child.id);
+            });
+          }
         });
       }
     });

apps/web-mzima-client/src/app/settings/categories/categories.component.html

@@ -16,20 +16,25 @@
           [data-qa]="category.slug.split(' ').join('-') | lowercase"
           (selected)="selectCategory($event)"
           [isCheckbox]="isShowActions"
+          (toggle)="toggleChildren($event)"
+          [displayChildren]="displayChildren(category.id)"
         >
         </app-category-item>
 
-        <ul *ngIf="category.children?.length" class="categories-list categories-list--lvl2">
-          <li
-            class="categories-list__item"
-            *ngFor="let category of getChildCategories(category.id)"
-          >
+        <ul
+          *ngIf="category.children?.length && displayChildren(category.id)"
+          class="categories-list categories-list--lvl2"
+        >
+          <li class="categories-list__item" *ngFor="let category of category.children">
             <app-category-item
               #categoryItem
               [isCheckbox]="isShowActions"
               (selected)="selectCategory($event)"
               [category]="category"
-              [data-qa]="category.slug.split(' ').join('-') + '-' + '(' +category.parent.slug +')' | lowercase"
+              [data-qa]="
+                category.slug.split(' ').join('-') + '-' + '(' + category.parent.slug + ')'
+                  | lowercase
+              "
               [customClass]="'category-item__title--lvl2'"
             >
             </app-category-item>

apps/web-mzima-client/src/app/settings/categories/categories.component.ts

@@ -15,6 +15,7 @@ export class CategoriesComponent {
   public categories: CategoryInterface[];
   selectedCategories: CategoryInterface[] = [];
   isShowActions = false;
+  openedParents: [number?] = [];
 
   constructor(
     private categoriesService: CategoriesService,
@@ -33,6 +34,19 @@ export class CategoriesComponent {
     });
   }
 
+  public displayChildren(id: number) {
+    return this.openedParents.includes(id);
+  }
+
+  public toggleChildren(id: number) {
+    const index = this.openedParents.indexOf(id);
+    if (index > -1) {
+      this.openedParents.splice(index, 1);
+    } else {
+      this.openedParents.push(id);
+    }
+  }
+
   public async deleteCategories() {
     const confirmed = await this.confirmModalService.open({
       title: this.translate.instant('notify.category.bulk_destroy_confirm', {
@@ -69,8 +83,4 @@ export class CategoriesComponent {
       this.selectedCategories = this.selectedCategories.filter((sC) => sC.id !== cat.id);
     }
   }
-
-  public getChildCategories(id: number): CategoryInterface[] {
-    return this.categories.filter((category) => category.parent_id === id);
-  }
 }

apps/web-mzima-client/src/app/settings/categories/category-item/category-item.component.html

@@ -8,4 +8,20 @@
   <h4 class="category-item__title" [routerLink]="category.id.toString()" [ngClass]="customClass">
     {{ category.tag }}
   </h4>
+  <mzima-client-button
+    *ngIf="category.children?.length"
+    class="category-item--expand"
+    fill="clear"
+    color="secondary"
+    [iconOnly]="true"
+    [data-qa]="'toggle-children'"
+    (buttonClick)="toggleChildren(category.id)"
+    (click)="$event.stopPropagation()"
+  >
+    <mat-icon
+      class="category-item__arrow"
+      [ngClass]="{ 'category-item--expanded': displayChildren }"
+      svgIcon="arrow-down"
+    ></mat-icon>
+  </mzima-client-button>
 </div>

apps/web-mzima-client/src/app/settings/categories/category-item/category-item.component.scss

@@ -2,9 +2,7 @@
   z-index: 1;
   padding: 13.5px 16px;
   display: flex;
-  position: relative;
-  align-items: flex-start;
-  justify-content: flex-start;
+  justify-content: space-between;
   transition: background-color 0.35s ease;
   background: var(--color-neutral-10);
   margin-bottom: 8px;
@@ -50,4 +48,16 @@
   &__controls {
     margin-inline-start: 24px;
   }
+
+  &__expand {
+    overflow: visible;
+  }
+
+  &__arrow {
+    transition: transform 0.35s ease;
+  }
+
+  &--expanded {
+    transform: rotate(180deg);
+  }
 }

apps/web-mzima-client/src/app/settings/categories/category-item/category-item.component.ts

@@ -10,9 +10,19 @@ export class CategoryItemComponent {
   @Input() public category: CategoryInterface;
   @Input() public customClass: string;
   @Input() public isCheckbox: boolean;
+  @Input() public displayChildren: boolean;
   @Output() public selected = new EventEmitter<CategoryInterface>();
+  @Output() public toggle = new EventEmitter();
 
   selectCategory(cat: CategoryInterface) {
     this.selected.emit(cat);
   }
+
+  public toggleChildren(id: number) {
+    this.toggle.emit(id);
+  }
+
+  public hasChildren(cat: CategoryInterface) {
+    return cat.children.length > 0;
+  }
 }

apps/web-mzima-client/src/app/settings/surveys/create-field-modal/create-field-modal.component.ts

@@ -109,14 +109,12 @@ export class CreateFieldModalComponent implements OnInit {
               array.push({
                 id: category.id,
                 name: category.tag,
-                children: res?.results
-                  ?.filter((cat: CategoryInterface) => cat.parent_id === category.id)
-                  .map((cat: CategoryInterface) => {
-                    return {
-                      id: cat.id,
-                      name: cat.tag,
-                    };
-                  }),
+                children: category.children.map((cat: CategoryInterface) => {
+                  return {
+                    id: cat.id,
+                    name: cat.tag,
+                  };
+                }),
               });
             }
           }

apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts

@@ -296,14 +296,12 @@ export class SearchFormComponent extends BaseComponent implements OnInit {
           return {
             id: category.id,
             name: category.tag,
-            children: response?.results
-              ?.filter((cat: CategoryInterface) => cat.parent_id === category.id)
-              .map((cat: CategoryInterface) => {
-                return {
-                  id: cat.id,
-                  name: cat.tag,
-                };
-              }),
+            children: category?.children.map((cat: CategoryInterface) => {
+              return {
+                id: cat.id,
+                name: cat.tag,
+              };
+            }),
           };
         });
         if (!this.categoriesData.length) {