TSK-1044: Fix selectAll checkbox

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html

@@ -78,7 +78,7 @@
 							[ngClass]="{ 'has-changes': (accessItemsClone[index].permRead !== accessItem.value.permRead)}">
 							<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 								id="checkbox-{{index}}-0" formControlName="permRead" aria-label="permRead"
-								aria-labelledby="permRead" (change)="checkboxClicked(this.index, $event)">
+								aria-labelledby="permRead" (change)="setSelectAllCheckbox(this.index, $event)">
 						</td>
 
 						<!-- OPEN -->
@@ -86,7 +86,7 @@
 							[ngClass]="{ 'has-changes': (accessItemsClone[index].permOpen !== accessItem.value.permOpen)}">
 							<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 								id="checkbox-{{index}}-1" formControlName="permOpen" aria-label="permOpen"
-								aria-labelledby="permOpen" (change)="checkboxClicked(this.index, $event)">
+								aria-labelledby="permOpen" (change)="setSelectAllCheckbox(this.index, $event)">
 						</td>
 
 						<!-- APPEND -->
@@ -94,7 +94,7 @@
 							[ngClass]="{ 'has-changes': (accessItemsClone[index].permAppend !== accessItem.value.permAppend)}">
 							<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 								id="checkbox-{{index}}-2" formControlName="permAppend" aria-label="permAppend"
-								aria-labelledby="permAppend" (change)="checkboxClicked(this.index, $event)">
+								aria-labelledby="permAppend" (change)="setSelectAllCheckbox(this.index, $event)">
 						</td>
 
 						<!-- TRANSFER -->
@@ -102,7 +102,7 @@
 							[ngClass]="{ 'has-changes': (accessItemsClone[index].permTransfer !== accessItem.value.permTransfer)}">
 							<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 								id="checkbox-{{index}}-3" formControlName="permTransfer" aria-label="permTransfer"
-								aria-labelledby="permTransfer" (change)="checkboxClicked(this.index, $event)">
+								aria-labelledby="permTransfer" (change)="setSelectAllCheckbox(this.index, $event)">
 						</td>
 
 						<!-- DISTRIBUTE -->
@@ -110,17 +110,17 @@
 							[ngClass]="{ 'has-changes': (accessItemsClone[index].permDistribute !== accessItem.value.permDistribute)}">
 							<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 								id="checkbox-{{index}}-4" formControlName="permDistribute" aria-label="permDistribute"
-								aria-labelledby="permDistribute" (change)="checkboxClicked(this.index, $event)">
+								aria-labelledby="permDistribute" (change)="setSelectAllCheckbox(this.index, $event)">
 						</td>
 
 						<!-- CUSTOM FIELDS -->
 						<ng-container *ngFor="let customField of customFields$ | async; let customIndex = index">
-							<td *ngIf="customField.visible"
+							<td
 								[ngClass]="{ 'has-changes': accessItemsClone[index][getAccessItemCustomProperty(customIndex + 1)] !== accessItem.value[getAccessItemCustomProperty(customIndex+1)] }">
 								<input class="workbasket-access-items__permission-checkbox" type="checkbox"
 									id="checkbox-{{index}}-{{customIndex + 5}}"
 									formControlName="permCustom{{customIndex+1}}" aria-label="customField"
-									aria-labelledby="customField" (change)="checkboxClicked(this.index, $event)">
+									aria-labelledby="customField" (change)="setSelectAllCheckbox(this.index, $event)">
 							</td>
 						</ng-container>
 					</tr>

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts

@@ -140,14 +140,15 @@ describe('WorkbasketAccessItemsComponent', () => {
     let actionDispatched = false;
     actions$.pipe(ofActionDispatched(GetWorkbasketAccessItems)).subscribe(() => (actionDispatched = true));
     component.init();
-    expect(component.initialized).toBe(true);
     expect(actionDispatched).toBe(true);
   }));
 
   it("should discard initializing when accessItems don't exist", () => {
     component.workbasket._links.accessItems = null;
+    let actionDispatched = false;
+    actions$.pipe(ofActionDispatched(GetWorkbasketAccessItems)).subscribe(() => (actionDispatched = true));
     component.init();
-    expect(component.initialized).toBe(false);
+    expect(actionDispatched).toBe(false);
   });
 
   it('should call access items sorting when access items are obtained from store', () => {

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts

@@ -21,7 +21,7 @@ import { highlight } from 'app/shared/animations/validation.animation';
 import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
 import { AccessIdDefinition } from 'app/shared/models/access-id';
 import { EngineConfigurationSelectors } from 'app/shared/store/engine-configuration-store/engine-configuration.selectors';
-import { filter, take, takeUntil } from 'rxjs/operators';
+import { filter, map, take, takeUntil } from 'rxjs/operators';
 import { NOTIFICATION_TYPES } from '../../../shared/models/notifications';
 import { NotificationService } from '../../../shared/services/notifications/notification.service';
 import { AccessItemsCustomisation, CustomField, getCustomFields } from '../../../shared/models/customisation';
@@ -56,7 +56,6 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   workbasketClone: Workbasket;
 
   customFields$: Observable<CustomField[]>;
-  customFields: CustomField[];
 
   accessItemsRepresentation: WorkbasketAccessItemsRepresentation;
   accessItemsClone: WorkbasketAccessItems[];
@@ -68,6 +67,8 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   toggleValidationAccessIdMap = new Map<number, boolean>();
   initialized = false;
   added = false;
+  isNewAccessItemsFromStore = false;
+  isAccessItemsTabSelected = false;
   destroy$ = new Subject<void>();
 
   @Select(WorkbasketSelectors.selectedWorkbasket)
@@ -100,10 +101,18 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
 
   ngOnInit() {
     this.init();
-    this.customFields$ = this.accessItemsCustomization$.pipe(getCustomFields(customFieldCount));
+
-    this.customFields$.pipe(takeUntil(this.destroy$)).subscribe((v) => {
+    this.selectedComponent$.pipe(takeUntil(this.destroy$)).subscribe((component) => {
-      this.customFields = v;
+      if (component === 1) {
+        this.isAccessItemsTabSelected = true;
+      }
     });
+
+    this.customFields$ = this.accessItemsCustomization$.pipe(
+      getCustomFields(customFieldCount),
+      map((customFields) => customFields.filter((customisation) => customisation.visible))
+    );
+
     this.accessItemsRepresentation$.pipe(takeUntil(this.destroy$)).subscribe((accessItemsRepresentation) => {
       if (typeof accessItemsRepresentation !== 'undefined') {
         let accessItems = [...accessItemsRepresentation.accessItems];
@@ -113,6 +122,8 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
         this.setAccessItemsGroups(accessItems);
         this.accessItemsClone = this.cloneAccessItems(accessItems);
         this.accessItemsResetClone = this.cloneAccessItems(accessItems);
+
+        this.isNewAccessItemsFromStore = true;
       }
     });
 
@@ -153,26 +164,17 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   }
 
   ngAfterViewChecked() {
-    let elementIndex = 0;
+    if (this.isNewAccessItemsFromStore || this.isAccessItemsTabSelected) {
-    let isTrue = true;
+      if (document.getElementById(`checkbox-0-00`)) {
-    if (this.accessItemsGroups.controls) {
+        let row = 0;
-      this.accessItemsGroups.controls.forEach((element) => {
+        this.accessItemsGroups.controls.forEach(() => {
-        for (let i in element.value) {
+          const value = { currentTarget: { checked: true } };
-          if (i.startsWith('perm')) {
+          this.setSelectAllCheckbox(row, value);
-            if (this.accessItemsGroups.controls[elementIndex].value[i] === false) {
+          row = row + 1;
-              isTrue = false;
+        });
-              break;
+        this.isAccessItemsTabSelected = false;
-            }
+        this.isNewAccessItemsFromStore = false;
-          }
+      }
-        }
-        if (isTrue) {
-          const checkbox = document.getElementById(`checkbox-${elementIndex}-00`) as HTMLInputElement;
-          if (checkbox) {
-            checkbox.checked = true;
-            elementIndex++;
-          }
-        }
-      });
     }
   }
 
@@ -183,19 +185,15 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
       }
     }
     this.workbasketClone = this.workbasket;
-    //var offsetWidth = document.getElementById('container').offsetWidth;
   }
 
   init() {
-    if (!this.workbasket._links?.accessItems) {
+    if (this.workbasket._links?.accessItems) {
-      return;
+      this.requestInProgressService.setRequestInProgress(true);
+      this.store.dispatch(new GetWorkbasketAccessItems(this.workbasket._links.accessItems.href)).subscribe(() => {
+        this.requestInProgressService.setRequestInProgress(false);
+      });
     }
-    this.requestInProgressService.setRequestInProgress(true);
-    this.store.dispatch(new GetWorkbasketAccessItems(this.workbasket._links.accessItems.href)).subscribe(() => {
-      this.requestInProgressService.setRequestInProgress(false);
-    });
-
-    this.initialized = true;
   }
 
   sortAccessItems(accessItems: WorkbasketAccessItems[], sortBy: string): WorkbasketAccessItems[] {
@@ -283,26 +281,6 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
       });
   }
 
-  checkAll(row: number, value: any) {
-    const checkAll = value.target.checked;
-    const workbasketAccessItemsObj: WorkbasketAccessItems = this.createWorkbasketAccessItems();
-    Object.keys(workbasketAccessItemsObj).forEach((property) => {
-      if (
-        property !== 'accessId' &&
-        property !== '_links' &&
-        property !== 'workbasketId' &&
-        property !== 'accessItemId'
-      ) {
-        this.accessItemsGroups.controls[row].get(property).setValue(checkAll);
-      }
-    });
-  }
-
-  accessItemSelected(accessItem: AccessIdDefinition, row: number) {
-    this.accessItemsGroups.controls[row].get('accessId').setValue(accessItem?.accessId);
-    this.accessItemsGroups.controls[row].get('accessName').setValue(accessItem?.name);
-  }
-
   onSave() {
     this.requestInProgressService.setRequestInProgress(true);
     this.store
@@ -317,34 +295,39 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
       });
   }
 
-  checkboxClicked(index: number, value: any) {
+  accessItemSelected(accessItem: AccessIdDefinition, row: number) {
-    if (value.currentTarget.checked) {
+    this.accessItemsGroups.controls[row].get('accessId').setValue(accessItem?.accessId);
-      let isTrue = true;
+    this.accessItemsGroups.controls[row].get('accessName').setValue(accessItem?.name);
-      let numbers = [];
-      const notVisibleFields = this.customFields.filter((v) => v.visible === false);
-      notVisibleFields.forEach((element) => {
-        const num = element.field.toString().replace('Custom ', 'permCustom');
-        numbers.push(num);
-      });
-      for (let i in this.accessItemsGroups.controls[index].value) {
-        if (i.startsWith('perm')) {
-          if (this.accessItemsGroups.controls[index].value[i] === false && !numbers.includes(i)) {
-            isTrue = false;
-            break;
-          }
-        }
-      }
-      if (isTrue) {
-        const checkbox = document.getElementById(`checkbox-${index}-00`) as HTMLInputElement;
-        checkbox.checked = true;
-      }
-    } else {
-      const checkbox = document.getElementById(`checkbox-${index}-00`) as HTMLInputElement;
-      checkbox.checked = false;
-    }
   }
 
-  cloneAccessItems(inputaccessItem): Array<WorkbasketAccessItems> {
+  checkAll(row: number, value: any) {
+    const checkAll = value.target.checked;
+    const accessItem = this.accessItemsGroups.controls[row];
+    Object.keys(accessItem.value).forEach((key) => {
+      if (key.startsWith('perm')) {
+        accessItem.get(key).setValue(checkAll);
+      }
+    });
+  }
+
+  setSelectAllCheckbox(row: number, value: any) {
+    let areAllCheckboxesSelected = false;
+
+    if (value.currentTarget.checked) {
+      areAllCheckboxesSelected = true;
+      const accessItem = this.accessItemsGroups.controls[row].value;
+
+      Object.keys(accessItem).forEach((key) => {
+        if (key.startsWith('perm') && accessItem[key] === false) {
+          areAllCheckboxesSelected = false;
+        }
+      });
+    }
+    const checkbox = document.getElementById(`checkbox-${row}-00`) as HTMLInputElement;
+    checkbox.checked = areAllCheckboxesSelected;
+  }
+
+  cloneAccessItems(inputaccessItem): WorkbasketAccessItems[] {
     return this.AccessItemsForm.value.accessItemsGroups.map((accessItems: WorkbasketAccessItems) => ({
       ...accessItems
     }));