TSK-1627: Reset selectAll in DistributionTargets when Workbasket changes

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

@@ -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);">
+    <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="Deselect all items">check_box</mat-icon>
-      <mat-icon class="button-icon" *ngIf="allSelected" matTooltip="Select all items">check_box_outline_blank</mat-icon>
+      <mat-icon class="button-icon" *ngIf="!allSelected" matTooltip="Select all items">check_box_outline_blank</mat-icon>
     </button>
   </mat-toolbar>
 

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

@@ -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);

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

@@ -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) {

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

@@ -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>

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

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

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

@@ -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')