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

TSK-1044: Fix selectAll checkbox

This commit is contained in:
Sofie Hofmann 2021-02-02 15:39:01 +01:00
parent 9c4d6e479d
commit 751930226b
3 changed files with 73 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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', () => {

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

@ -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.customFields = v;
this.selectedComponent$.pipe(takeUntil(this.destroy$)).subscribe((component) => {
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;
let isTrue = true;
if (this.accessItemsGroups.controls) {
this.accessItemsGroups.controls.forEach((element) => {
for (let i in element.value) {
if (i.startsWith('perm')) {
if (this.accessItemsGroups.controls[elementIndex].value[i] === false) {
isTrue = false;
break;
}
}
}
if (isTrue) {
const checkbox = document.getElementById(`checkbox-${elementIndex}-00`) as HTMLInputElement;
if (checkbox) {
checkbox.checked = true;
elementIndex++;
}
}
});
if (this.isNewAccessItemsFromStore || this.isAccessItemsTabSelected) {
if (document.getElementById(`checkbox-0-00`)) {
let row = 0;
this.accessItemsGroups.controls.forEach(() => {
const value = { currentTarget: { checked: true } };
this.setSelectAllCheckbox(row, value);
row = row + 1;
});
this.isAccessItemsTabSelected = false;
this.isNewAccessItemsFromStore = false;
}
}
}
@ -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) {
return;
if (this.workbasket._links?.accessItems) {
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) {
if (value.currentTarget.checked) {
let isTrue = true;
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;
}
accessItemSelected(accessItem: AccessIdDefinition, row: number) {
this.accessItemsGroups.controls[row].get('accessId').setValue(accessItem?.accessId);
this.accessItemsGroups.controls[row].get('accessName').setValue(accessItem?.name);
}
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
}));