TSK-1626: Swap lists of available and selected distribution targets

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

@@ -66,7 +66,20 @@
     </mat-selection-list>
   </div>
 
-  <div class="distribution-targets-list__empty-list"  *ngIf="distributionTargets?.length == 0">
+  <!-- EMPTY LIST -->
-    There is currently no distributed workbasket
+  <div class="distribution-targets-list__empty-list" *ngIf="distributionTargets?.length == 0">
+
+    <!-- AVAILABLE SIDE -->
+    <div  *ngIf="side === 0" style="padding: 0 16px;">
+      There are currently no Workbaskets for distribution
+    </div>
+
+    <!-- SELECTED SIDE -->
+    <div *ngIf="side === 1" style="padding: 0 16px;">
+      There is currently no distributed Workbasket
+    </div>
+
   </div>
+
+
 </div>

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

@@ -13,18 +13,9 @@
 
     <!-- SIDE BY SIDE VIEW BUTTONS -->
     <div class="distribution-targets-list__action-buttons"  *ngIf="sideBySide">
-      <div class="distribution-targets-list__action-buttons--selected"
+
-           style="justify-content: flex-end; margin-right: 2%">
-        <button mat-flat-button color="warn"
-                class="distribution-targets-list__action-button distribution-targets-list-dialog__remove-button"
-                (click)="moveDistributionTargets(side.SELECTED)">
-          Remove selected distribution target
-          <mat-icon>remove</mat-icon>
-        </button>
-      </div>
-      <span style="flex-grow: 1"> </span>
       <div class="distribution-targets-list__action-buttons--chooser"
-           style="justify-content: flex-end;">
+           style="justify-content: flex-end; margin-right: 2%">
         <button mat-flat-button color="accent"
                 class="distribution-targets-list__action-button distribution-targets-list-dialog__add-button"
                 (click)="moveDistributionTargets(side.AVAILABLE)">
@@ -32,6 +23,19 @@
           <mat-icon>add</mat-icon>
         </button>
       </div>
+
+      <span style="flex-grow: 1"> </span>
+
+      <div class="distribution-targets-list__action-buttons--selected"
+           style="justify-content: flex-end;">
+        <button mat-flat-button color="warn"
+                class="distribution-targets-list__action-button distribution-targets-list-dialog__remove-button"
+                (click)="moveDistributionTargets(side.SELECTED)">
+          Remove selected distribution target
+          <mat-icon>remove</mat-icon>
+        </button>
+      </div>
+
     </div>
 
     <!-- SINGLE VIEW BUTTONS WHEN DISPLAYING SELECTED DISTRIBUTION TARGETS -->
@@ -81,25 +85,23 @@
     <!-- DISTRIBUTION TABLE-->
     <taskana-administration-workbasket-distribution-targets-list
       [ngClass]="sideBySide ? 'distribution-targets-list__lists--left-side' : ''"
-      header="Selected distribution targets"
-      [distributionTargets]="selectedDistributionTargets"
-      [side]="side.SELECTED"
-      [allSelected]="selectAllLeft"
-      [hidden]="displayingDistributionTargetsPicker && !sideBySide"
-      [component]="'selectedDistributionTargets'"
-    >
-
-    </taskana-administration-workbasket-distribution-targets-list>
-
-    <taskana-administration-workbasket-distribution-targets-list
       header="Available distribution targets"
       [distributionTargets]="availableDistributionTargets"
       [side]="side.AVAILABLE"
-      [allSelected]="selectAllRight"
+      [allSelected]="selectAllLeft"
       *ngIf="displayingDistributionTargetsPicker"
       [component]="'availableDistributionTargets'"
     >
+    </taskana-administration-workbasket-distribution-targets-list>
 
+    <taskana-administration-workbasket-distribution-targets-list
+      header="Selected distribution targets"
+      [distributionTargets]="selectedDistributionTargets"
+      [side]="side.SELECTED"
+      [allSelected]="selectAllRight"
+      [hidden]="displayingDistributionTargetsPicker && !sideBySide"
+      [component]="'selectedDistributionTargets'"
+    >
     </taskana-administration-workbasket-distribution-targets-list>
   </div>
 </div>

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

@@ -154,8 +154,8 @@ describe('WorkbasketDistributionTargetsComponent', () => {
   it('should set selectAll checkboxes to true when moving a workbasket', () => {
     [Side.SELECTED, Side.AVAILABLE].forEach((side) => {
       component.moveDistributionTargets(side);
-      expect(component.selectAllLeft).toBeTruthy();
       expect(component.selectAllRight).toBeTruthy();
+      expect(component.selectAllLeft).toBeTruthy();
     });
   });
 

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

@@ -42,8 +42,8 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnDestroy
   displayingDistributionTargetsPicker = true;
 
   side = Side;
-  selectAllLeft = false;
   selectAllRight = false;
+  selectAllLeft = false;
 
   availableDistributionTargets: WorkbasketSummary[] = [];
   availableDistributionTargetsUndoClone: WorkbasketSummary[];
@@ -281,8 +281,8 @@ export class WorkbasketDistributionTargetsComponent implements OnInit, OnDestroy
     }
     this.selectedDistributionTargetsFilterClone = this.selectedDistributionTargets;
     this.availableDistributionTargetsFilterClone = this.availableDistributionTargets;
-    this.selectAllRight = true;
     this.selectAllLeft = true;
+    this.selectAllRight = true;
     this.store.dispatch(new SetWorkbasketFilter(this.selectedDistributionTargetsFilter, 'selectedDistributionTargets'));
     this.store.dispatch(
       new SetWorkbasketFilter(this.availableDistributionTargetsFilter, 'availableDistributionTargets')