TSK-1786: Changed notification for empty classification filtering

Now display a message inline, instead of a popup notification
This commit is contained in:
Tristan 2022-02-14 16:15:37 +01:00 committed by Tristan2357
parent 6dda569f16
commit 17d9567b35
5 changed files with 1667 additions and 736 deletions

View File

@ -11,3 +11,4 @@ coverage/**
out-tsc/** out-tsc/**
**/*.html **/*.html
target/** target/**
.angular/cache/

View File

@ -1,16 +1,30 @@
<tree-root #tree [nodes]="treeNodes" [options]="options" (activate)="onActivate($event)" (deactivate)="onDeactivate($event)" <div *ngIf="emptyTreeNodes">
(moveNode)="onMoveNode($event)" (treeDrop)="onDrop($event)"> <h3 class="grey" style="text-align: center">There are no classifications</h3>
<ng-template #treeNodeTemplate let-node let-index="index"> <p class="grey" style="text-align: center">No Classifications match used filter "{{filter}}"
<span class="tree__svg-icon"> in category {{category}}</p>
<svg-icon </div>
*ngIf="node.data.category" <tree-root
[src]="getCategoryIcon(node.data.category).left" #tree
matTooltip="{{getCategoryIcon(node.data.category).right}}"> (activate)="onActivate($event)"
</svg-icon> (deactivate)="onDeactivate($event)"
</span> (moveNode)="onMoveNode($event)"
<span> (treeDrop)="onDrop($event)"
<strong>{{ node.data.key }}</strong> [hidden]="emptyTreeNodes"
</span> [nodes]="treeNodes"
<span> - {{ node.data.name }}</span> [options]="options"
</ng-template> >
<ng-template #treeNodeTemplate let-index="index" let-node>
<span class="tree__svg-icon">
<svg-icon
*ngIf="node.data.category"
[src]="getCategoryIcon(node.data.category).left"
matTooltip="{{ getCategoryIcon(node.data.category).right }}"
>
</svg-icon>
</span>
<span>
<strong>{{ node.data.key }}</strong>
</span>
<span> - {{ node.data.name }}</span>
</ng-template>
</tree-root> </tree-root>

View File

@ -41,6 +41,10 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
treeNodes: TreeNodeModel[]; treeNodes: TreeNodeModel[];
categoryIcons: ClassificationCategoryImages; categoryIcons: ClassificationCategoryImages;
emptyTreeNodes = false;
filter: string;
category: string;
@Input() selectNodeId: string; @Input() selectNodeId: string;
@Input() filterText: string; @Input() filterText: string;
@Input() filterIcon = ''; @Input() filterIcon = '';
@ -188,6 +192,17 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
this.destroy$.complete(); this.destroy$.complete();
} }
private checkNameAndKey(node: any, text: string): boolean {
return (
node.data.name.toUpperCase().includes(text.toUpperCase()) ||
node.data.key.toUpperCase().includes(text.toUpperCase())
);
}
private checkIcon(node: any, iconText: string): boolean {
return node.data.category.toUpperCase() === iconText.toUpperCase() || iconText === '';
}
private selectNode(nodeId: string) { private selectNode(nodeId: string) {
if (nodeId) { if (nodeId) {
const selectedNode = this.getNode(nodeId); const selectedNode = this.getNode(nodeId);
@ -209,26 +224,10 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
} }
private filterNodes(filterText, category) { private filterNodes(filterText, category) {
this.tree.treeModel.filterNodes( this.tree.treeModel.filterNodes((node) => this.checkNameAndKey(node, filterText) && this.checkIcon(node, category));
(node) => TaskanaTreeComponent.checkNameAndKey(node, filterText) && TaskanaTreeComponent.checkIcon(node, category) this.filter = filterText;
); this.category = category || 'ALL';
if (!this.tree.treeModel.getVisibleRoots().length) { this.emptyTreeNodes = !this.tree.treeModel.getVisibleRoots().length;
this.notificationsService.showInformation('CLASSIFICATION_FILTER_EMPTY_RESULT', {
filter: filterText,
category: category || 'ALL'
});
}
}
private static checkNameAndKey(node: any, text: string): boolean {
return (
node.data.name.toUpperCase().includes(text.toUpperCase()) ||
node.data.key.toUpperCase().includes(text.toUpperCase())
);
}
private static checkIcon(node: any, iconText: string): boolean {
return node.data.category.toUpperCase() === iconText.toUpperCase() || iconText === '';
} }
private manageTreeState() { private manageTreeState() {

View File

@ -99,8 +99,7 @@ export const messageByErrorCode = {
}, },
[messageTypes.INFORMATION]: { [messageTypes.INFORMATION]: {
EMPTY_WORKBASKET: 'Selected Workbasket is empty', EMPTY_WORKBASKET: 'Selected Workbasket is empty'
CLASSIFICATION_FILTER_EMPTY_RESULT: 'No Classification match for used filter {filter} in category {category}'
}, },
[messageTypes.WARNING]: { [messageTypes.WARNING]: {

File diff suppressed because it is too large Load Diff