CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: updated changes

Browse Source
This commit is contained in:
Ramveer
2022-08-31 18:01:21 +05:30
parent 039a97d2d9
commit 14a80bb65b
6 changed files with 41 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/organization/holidays/create-holiday/checklist-db.class.ts
+7 -7
View File
@@ -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[]>([]);
get data(): TodoItemNode[] {
dataChange = new BehaviorSubject<OfficeItemNode[]>([]);
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
buildFileTree(obj: { [key: string]: any }, level: number): TodoItemNode[] {
return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
// builds hierarchical tree of officeItemNodes
buildFileTree(obj: { [key: string]: any }, level: number): OfficeItemNode[] {
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
+2 -15
View File
@@ -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
+25 -26
View File
@@ -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 { TodoItemFlatNode } from './todo-flat-item.class';
import { OfficeItemNode } from './office-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 {
let parent: TodoItemFlatNode | null = this.getParentNode(node);
checkAllParentsSelection(node: OfficeItemFlatNode): void {
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/todo-flat-item.class.ts → src/app/organization/holidays/create-holiday/office-flat-item.class.ts
+1 -1
View File
@@ -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/todo-item.class.ts → src/app/organization/holidays/create-holiday/office-item.class.ts
+2 -2
View File
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TodoItemNode {
children: TodoItemNode[];
export class OfficeItemNode {
children: OfficeItemNode[];
item: string;
}
src/app/organization/organization.module.ts
+4 -4
View File
@@ -72,8 +72,8 @@ import { CreateHolidayComponent } from './holidays/create-holiday/create-holiday
/** Custom Service */
import { TodoItemNode } from './holidays/create-holiday/todo-item.class';
import { TodoItemFlatNode } from './holidays/create-holiday/todo-flat-item.class';
import { OfficeItemNode } from './holidays/create-holiday/office-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,
TodoItemNode
OfficeItemFlatNode,
OfficeItemNode
]
})
export class OrganizationModule { }