nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1627: Reset selectAll in DistributionTargets when Workbasket changes

This commit is contained in:
Sofie Hofmann 2021-05-11 17:50:38 +02:00
parent ec8b5f0bba
commit 8b8e54644a
6 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html
View File

@ -18,9 +18,9 @@
<span style="flex: 1 1 auto"> </span>
<!-- SELECT ALL BUTTON -->
<button mat-flat-button class="distribution-targets-list__action-button" (click)="selectAll(allSelected);">
<mat-icon class="button-icon" *ngIf="!allSelected" matTooltip="Deselect all items">check_box</mat-icon>
<mat-icon class="button-icon" *ngIf="allSelected" matTooltip="Select all items">check_box_outline_blank</mat-icon>
<button mat-flat-button class="distribution-targets-list__action-button" (click)="selectAll(!allSelected);">
<mat-icon class="button-icon" *ngIf="allSelected" matTooltip="Deselect all items">check_box</mat-icon>
<mat-icon class="button-icon" *ngIf="!allSelected" matTooltip="Select all items">check_box_outline_blank</mat-icon>
</button>
</mat-toolbar>

9
web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.spec.ts
View File

@ -1,5 +1,5 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, DebugElement, EventEmitter, Input, Output, Pipe, PipeTransform } from '@angular/core';
import { Component, DebugElement, Input, Pipe, PipeTransform } from '@angular/core';
import { WorkbasketDistributionTargetsListComponent } from './workbasket-distribution-targets-list.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { WorkbasketType } from '../../../shared/models/workbasket-type';
@ -69,13 +69,6 @@ describe('WorkbasketDistributionTargetsListComponent', () => {
expect(component.side).toBe(Side.AVAILABLE);
});
it('should select all distribution targets', () => {
component.selectAll(true);
component.distributionTargets.forEach((element) => {
expect(element['selected']).toBe(true);
});
});
it('should change toolbar state', () => {
expect(component.toolbarState).toBe(false);
component.changeToolbarState(true);

34
web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.ts
View File

@ -1,7 +1,17 @@
import { Component, OnInit, Input, AfterContentChecked, ChangeDetectorRef, ViewChild } from '@angular/core';
import {
Component,
Input,
AfterContentChecked,
ChangeDetectorRef,
ViewChild,
Output,
EventEmitter,
OnChanges,
SimpleChanges
} from '@angular/core';
import { WorkbasketSummary } from 'app/shared/models/workbasket-summary';
import { expandDown } from 'app/shared/animations/expand.animation';
import { Side } from '../workbasket-distribution-targets/workbasket-distribution-targets.component';
import { AllSelected, Side } from '../workbasket-distribution-targets/workbasket-distribution-targets.component';
import { MatSelectionList } from '@angular/material/list';
@Component({
@ -10,32 +20,38 @@ import { MatSelectionList } from '@angular/material/list';
styleUrls: ['./workbasket-distribution-targets-list.component.scss'],
animations: [expandDown]
})
export class WorkbasketDistributionTargetsListComponent implements OnInit, AfterContentChecked {
export class WorkbasketDistributionTargetsListComponent implements AfterContentChecked, OnChanges {
@Input() distributionTargets: WorkbasketSummary[];
@Input() side: Side;
@Input() header: string;
@Input() allSelected;
@Input() component;
@Output() allSelectedEmitter = new EventEmitter<AllSelected>();
toolbarState = false;
@ViewChild('workbasket') distributionTargetsList: MatSelectionList;
constructor(private changeDetector: ChangeDetectorRef) {}
ngOnInit() {
this.allSelected = !this.allSelected;
}
ngAfterContentChecked(): void {
this.changeDetector.detectChanges();
}
ngOnChanges(changes: SimpleChanges) {
if (typeof changes.allSelected?.currentValue !== 'undefined') {
this.selectAll(changes.allSelected.currentValue);
}
}
selectAll(selected: boolean) {
if (typeof this.distributionTargetsList !== 'undefined') {
this.allSelected = !this.allSelected;
this.allSelected = selected;
this.distributionTargetsList.options.map((item) => (item['selected'] = selected));
this.distributionTargets.map((item) => (item['selected'] = selected));
this.allSelectedEmitter.emit({ value: this.allSelected, side: this.side });
}
this.distributionTargets.map((item) => (item['selected'] = selected));
}
changeToolbarState(state: boolean) {

2
web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.html
View File

@ -91,6 +91,7 @@
[allSelected]="selectAllLeft"
*ngIf="displayingDistributionTargetsPicker"
[component]="'availableDistributionTargets'"
(allSelectedEmitter)="setAllSelected($event)"
>
</taskana-administration-workbasket-distribution-targets-list>
@ -101,6 +102,7 @@
[allSelected]="selectAllRight"
[hidden]="displayingDistributionTargetsPicker && !sideBySide"
[component]="'selectedDistributionTargets'"
(allSelectedEmitter)="setAllSelected($event)"
>
</taskana-administration-workbasket-distribution-targets-list>
</div>

14
web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.spec.ts
View File

@ -151,12 +151,14 @@ describe('WorkbasketDistributionTargetsComponent', () => {
expect(removeSelectedItems).toHaveBeenCalled();
});
it('should set selectAll checkboxes to true when moving a workbasket', () => {
[Side.SELECTED, Side.AVAILABLE].forEach((side) => {
component.moveDistributionTargets(side);
expect(component.selectAllRight).toBeTruthy();
expect(component.selectAllLeft).toBeTruthy();
});
it('should set selectAll checkboxes to false when moving a workbasket', () => {
component.selectAllRight = true;
component.moveDistributionTargets(Side.SELECTED);
expect(component.selectAllRight).toBeFalsy();
component.selectAllLeft = true;
component.moveDistributionTargets(Side.AVAILABLE);
expect(component.selectAllLeft).toBeFalsy();
});
it('should call unselectItems() when moving a workbasket', () => {

26
web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.ts
View File

@ -28,6 +28,12 @@ export enum Side {
AVAILABLE,
SELECTED
}
export interface AllSelected {
value: boolean;
side?: Side;
}
@Component({
selector: 'taskana-administration-workbasket-distribution-targets',
templateUrl: './workbasket-distribution-targets.component.html',
@ -88,15 +94,6 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnDestroy
* would be ideal to completely redo whole components using drag and drop angular components and clearer logics
*/
ngOnInit() {
this.selectedWorkbasket$
.pipe(
filter((selectedWorkbasket) => typeof selectedWorkbasket !== 'undefined'),
takeUntil(this.destroy$)
)
.subscribe((selectedWorkbasket) => {
this.workbasket = selectedWorkbasket;
});
if (this.workbasket?.workbasketId) {
this.store.dispatch(new GetWorkbasketDistributionTargets(this.workbasket._links.distributionTargets.href));
this.store.dispatch(new GetAvailableDistributionTargets());
@ -163,10 +160,18 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnDestroy
ngOnChanges(changes: SimpleChanges) {
if (changes.workbasket.currentValue !== changes.workbasket.previousValue) {
this.setAllSelected({ value: false });
this.getAvailableDistributionTargets();
}
}
setAllSelected(allSelected: AllSelected) {
const side = allSelected.side;
const value = allSelected.value;
this.selectAllLeft = side === Side.AVAILABLE || typeof side === 'undefined' ? value : this.selectAllLeft;
this.selectAllRight = side === Side.SELECTED || typeof side === 'undefined' ? value : this.selectAllRight;
}
filterWorkbasketsByWorkbasketIDs(workbaskets: WorkbasketSummary[], IDs: WorkbasketSummary[]): WorkbasketSummary[] {
const workbasketIds: string[] = IDs.map((workbasket) => workbasket.workbasketId);
return workbaskets.filter((workbasket) => !workbasketIds.includes(workbasket.workbasketId));
@ -279,10 +284,9 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnDestroy
this.availableDistributionTargets = this.availableDistributionTargets.concat(itemsSelected);
this.unselectItems(itemsSelected);
}
this.setAllSelected({ value: false, side: side });
this.selectedDistributionTargetsFilterClone = this.selectedDistributionTargets;
this.availableDistributionTargetsFilterClone = this.availableDistributionTargets;
this.selectAllLeft = true;
this.selectAllRight = true;
this.store.dispatch(new SetWorkbasketFilter(this.selectedDistributionTargetsFilter, 'selectedDistributionTargets'));
this.store.dispatch(
new SetWorkbasketFilter(this.availableDistributionTargetsFilter, 'availableDistributionTargets')