fix: updated changes

src/app/organization/holidays/create-holiday/checklist-db.class.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { TodoItemNode } from './todo-item.class';
+import { OfficeItemNode } from './office-item.class';
 
 @Injectable({
     providedIn: 'root'
@@ -9,8 +9,8 @@ export class ChecklistDatabase {
 
 
     // rxjs functionality to update DOM via subscribe
-    dataChange = new BehaviorSubject<TodoItemNode[]>([]);
+    dataChange = new BehaviorSubject<OfficeItemNode[]>([]);
-    get data(): TodoItemNode[] {
+    get data(): OfficeItemNode[] {
         return this.dataChange.value;
     }
     TREE_DATA = {};
@@ -25,11 +25,11 @@ export class ChecklistDatabase {
         this.dataChange.next(data);
     }
 
-    // builds hierarchical tree of TodoItemNodes
+    // builds hierarchical tree of officeItemNodes
-    buildFileTree(obj: { [key: string]: any }, level: number): TodoItemNode[] {
+    buildFileTree(obj: { [key: string]: any }, level: number): OfficeItemNode[] {
-        return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
+        return Object.keys(obj).reduce<OfficeItemNode[]>((accumulator, key) => {
             const value = obj[key];
-            const node = new TodoItemNode();
+            const node = new OfficeItemNode();
             node.item = key;
 
             if (value != null) {

src/app/organization/holidays/create-holiday/create-holiday.component.html

@@ -63,19 +63,6 @@
             <input matInput formControlName="description">
           </mat-form-field>   
           
-          <!-- TODO: Replace multi-select by custom angular material tree -->
-          <!-- <mat-form-field>
-            <mat-label>Applicable Offices</mat-label>
-            <mat-select required formControlName="offices" multiple>
-              <mat-option *ngFor="let office of officesData" [value]="{ officeId: office.id }">
-                {{ office.name }} 
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="holidayForm.controls.offices.hasError('required')">
-              Offices is <strong>required</strong>
-            </mat-error>
-          </mat-form-field> -->
-
           <label>Select applicable offices</label>
 
           <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
@@ -83,7 +70,7 @@
               <button mat-icon-button disabled></button>
               <mat-checkbox class="checklist-leaf-node"
                             [checked]="checklistSelection.isSelected(node)"
-                            (change)="todoLeafItemSelectionToggle(node);">{{officesDict[node.item].name}}</mat-checkbox>
+                            (change)="officeLeafItemSelectionToggle(node);">{{officesDict[node.item].name}}</mat-checkbox>
             </mat-tree-node>
 
             <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
@@ -94,7 +81,7 @@
                 </mat-icon>
               </button>
               <mat-checkbox [checked]="descendantsAllSelected(node)"
-                            (change)="todoItemSelectionToggle(node)">{{ officesDict[node.item].name }}</mat-checkbox>
+                            (change)="officeItemSelectionToggle(node)">{{ officesDict[node.item].name }}</mat-checkbox>
             </mat-tree-node>
           </mat-tree>
 

src/app/organization/holidays/create-holiday/create-holiday.component.ts

@@ -10,14 +10,13 @@ import { FlatTreeControl } from '@angular/cdk/tree';
 /** Custom Services. */
 import { OrganizationService } from 'app/organization/organization.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { TodoItemNode } from './todo-item.class';
+import { OfficeItemNode } from './office-item.class';
-import { TodoItemFlatNode } from './todo-flat-item.class';
+import { OfficeItemFlatNode } from './office-flat-item.class';
 import { ChecklistDatabase } from './checklist-db.class';
 import { CreateHoliday } from './create-holiday.service';
 
 /**
  * Create Holiday component.
- * TODO: Develop a custom angular checkbox tree and replace offices select.
  */
 @Component({
   selector: 'mifosx-create-holiday',
@@ -44,25 +43,25 @@ export class CreateHolidayComponent implements OnInit {
   // Angular Material Tree Configuration start ------------
 
   /** Map from flat node to nested node. This helps us finding the nested node to be modified */
-  flatNodeMap = new Map<TodoItemFlatNode, TodoItemNode>();
+  flatNodeMap = new Map<OfficeItemFlatNode, OfficeItemNode>();
 
   /** Map from nested node to flattened node. This helps us to keep the same object for selection */
-  nestedNodeMap = new Map<TodoItemNode, TodoItemFlatNode>();
+  nestedNodeMap = new Map<OfficeItemNode, OfficeItemFlatNode>();
 
   /** A selected parent node to be inserted */
-  selectedParent: TodoItemFlatNode | null = null;
+  selectedParent: OfficeItemFlatNode | null = null;
 
   /** The new item's name */
   newItemName = '';
 
-  treeControl: FlatTreeControl<TodoItemFlatNode>;
+  treeControl: FlatTreeControl<OfficeItemFlatNode>;
 
-  treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
+  treeFlattener: MatTreeFlattener<OfficeItemNode, OfficeItemFlatNode>;
 
-  dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
+  dataSource: MatTreeFlatDataSource<OfficeItemNode, OfficeItemFlatNode>;
 
   /** The selection for checklist */
-  checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
+  checklistSelection = new SelectionModel<OfficeItemFlatNode>(true /* multiple */);
 
   // Angular Material Tree Configuration end ------------
 
@@ -91,7 +90,7 @@ export class CreateHolidayComponent implements OnInit {
       _database.initialize(this.officesTrie);
     });
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
-    this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
+    this.treeControl = new FlatTreeControl<OfficeItemFlatNode>(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
     // Listens for changes in CheckListDatabase
@@ -139,22 +138,22 @@ export class CreateHolidayComponent implements OnInit {
 
   // angular material tree config start ----------------------
 
-  getLevel = (node: TodoItemFlatNode) => node.level;
+  getLevel = (node: OfficeItemFlatNode) => node.level;
 
-  isExpandable = (node: TodoItemFlatNode) => node.expandable;
+  isExpandable = (node: OfficeItemFlatNode) => node.expandable;
 
-  getChildren = (node: TodoItemNode): TodoItemNode[] => node.children;
+  getChildren = (node: OfficeItemNode): OfficeItemNode[] => node.children;
 
-  hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;
+  hasChild = (_: number, _nodeData: OfficeItemFlatNode) => _nodeData.expandable;
 
-  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
+  hasNoContent = (_: number, _nodeData: OfficeItemFlatNode) => _nodeData.item === '';
 
   /**
    * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
    */
-  transformer = (node: TodoItemNode, level: number) => {
+  transformer = (node: OfficeItemNode, level: number) => {
     const existingNode = this.nestedNodeMap.get(node);
-    const flatNode = existingNode && existingNode.item === node.item ? existingNode : new TodoItemFlatNode();
+    const flatNode = existingNode && existingNode.item === node.item ? existingNode : new OfficeItemFlatNode();
     flatNode.item = node.item;
     flatNode.level = level;
     flatNode.expandable = !!node.children?.length;
@@ -164,12 +163,12 @@ export class CreateHolidayComponent implements OnInit {
   }
 
   /** Whether all the descendants of the node are selected. */
-  descendantsAllSelected(node: TodoItemFlatNode): boolean {
+  descendantsAllSelected(node: OfficeItemFlatNode): boolean {
     return this.checklistSelection.isSelected(node);
   }
 
   /** Whether part of the descendants are selected */
-  descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
+  descendantsPartiallySelected(node: OfficeItemFlatNode): boolean {
     const descendants = this.treeControl.getDescendants(node);
     const result = descendants.some((child) => this.checklistSelection.isSelected(child));
     return result && !this.descendantsAllSelected(node);
@@ -182,7 +181,7 @@ export class CreateHolidayComponent implements OnInit {
   }
 
   /** Toggle the to-do item selection. Select/deselect all the descendants node */
-  todoItemSelectionToggle(node: TodoItemFlatNode): void {
+  officeItemSelectionToggle(node: OfficeItemFlatNode): void {
     this.checklistSelection.toggle(node);
     const descendants = this.treeControl.getDescendants(node);
     this.checklistSelection.isSelected(node)
@@ -195,14 +194,14 @@ export class CreateHolidayComponent implements OnInit {
   }
 
   /** Toggle a leaf to-do item selection. Check all the parents to see if they changed */
-  todoLeafItemSelectionToggle(node: TodoItemFlatNode): void {
+  officeLeafItemSelectionToggle(node: OfficeItemFlatNode): void {
     this.checklistSelection.toggle(node);
     this.setSelectedOffices();
   }
 
   /* Checks all the parents when a leaf node is selected/unselected */
-  checkAllParentsSelection(node: TodoItemFlatNode): void {
+  checkAllParentsSelection(node: OfficeItemFlatNode): void {
-    let parent: TodoItemFlatNode | null = this.getParentNode(node);
+    let parent: OfficeItemFlatNode | null = this.getParentNode(node);
     while (parent) {
       this.checkRootNodeSelection(parent);
       parent = this.getParentNode(parent);
@@ -210,7 +209,7 @@ export class CreateHolidayComponent implements OnInit {
   }
 
   /** Check root node checked state and change it accordingly */
-  checkRootNodeSelection(node: TodoItemFlatNode): void {
+  checkRootNodeSelection(node: OfficeItemFlatNode): void {
     const nodeSelected = this.checklistSelection.isSelected(node);
     const descendants = this.treeControl.getDescendants(node);
     const descAllSelected =
@@ -226,7 +225,7 @@ export class CreateHolidayComponent implements OnInit {
   }
 
   /* Get the parent node of a node */
-  getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
+  getParentNode(node: OfficeItemFlatNode): OfficeItemFlatNode | null {
     const currentLevel = this.getLevel(node);
 
     if (currentLevel < 1) {

src/app/organization/holidays/create-holiday/office-flat-item.class.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable({
     providedIn: 'root'
 })
-export class TodoItemFlatNode {
+export class OfficeItemFlatNode {
     item: string;
     level: number;
     expandable: boolean;

src/app/organization/holidays/create-holiday/office-item.class.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable({
     providedIn: 'root'
 })
-export class TodoItemNode {
+export class OfficeItemNode {
-    children: TodoItemNode[];
+    children: OfficeItemNode[];
     item: string;
 }

src/app/organization/organization.module.ts

@@ -72,8 +72,8 @@ import { CreateHolidayComponent } from './holidays/create-holiday/create-holiday
 
 
 /** Custom Service */
-import { TodoItemNode } from './holidays/create-holiday/todo-item.class';
+import { OfficeItemNode } from './holidays/create-holiday/office-item.class';
-import { TodoItemFlatNode } from './holidays/create-holiday/todo-flat-item.class';
+import { OfficeItemFlatNode } from './holidays/create-holiday/office-flat-item.class';
 import { ChecklistDatabase } from './holidays/create-holiday/checklist-db.class';
 import { CreateHoliday } from './holidays/create-holiday/create-holiday.service';
 
@@ -156,8 +156,8 @@ import { CreateHoliday } from './holidays/create-holiday/create-holiday.service'
   providers: [
     CreateHoliday,
     ChecklistDatabase,
-    TodoItemFlatNode,
+    OfficeItemFlatNode,
-    TodoItemNode
+    OfficeItemNode
   ]
 })
 export class OrganizationModule { }