Closes #2306 - extend Admin-UI by permissions READTASKS and EDITTASKS (#2318)

This commit is contained in:
SebastianRoseneck 2023-07-18 14:43:31 +02:00 committed by holgerhagen
parent 7da12e12b2
commit 5d1668b958
8 changed files with 137 additions and 34 deletions

View File

@ -49,7 +49,9 @@
<th class="align-left">Workbasket Key</th>
<th class="align-left">Access Id</th>
<th>Read</th>
<th>Read tasks</th>
<th>Open</th>
<th>Edit tasks</th>
<th>Append</th>
<th>Transfer</th>
<th>Distribute</th>
@ -97,20 +99,26 @@
<mat-checkbox id="checkbox-{{index}}-0" formControlName="permRead"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-1" formControlName="permOpen"></mat-checkbox>
<mat-checkbox id="checkbox-{{index}}-1" formControlName="permReadTasks"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-2" formControlName="permAppend"></mat-checkbox>
<mat-checkbox id="checkbox-{{index}}-2" formControlName="permOpen"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-3" formControlName="permTransfer"></mat-checkbox>
<mat-checkbox id="checkbox-{{index}}-3" formControlName="permEditTasks"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-4" formControlName="permDistribute"></mat-checkbox>
<mat-checkbox id="checkbox-{{index}}-4" formControlName="permAppend"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-5" formControlName="permTransfer"></mat-checkbox>
</td>
<td>
<mat-checkbox id="checkbox-{{index}}-6" formControlName="permDistribute"></mat-checkbox>
</td>
<ng-container *ngFor="let customField of customFields$ | async; let customIndex = index">
<td *ngIf="customField.visible">
<mat-checkbox id="checkbox-{{index}}-{{customIndex + 5}}"
<mat-checkbox id="checkbox-{{index}}-{{customIndex + 7}}"
formControlName="permCustom{{customIndex + 1}}"></mat-checkbox>
</td>
</ng-container>

View File

@ -22,14 +22,34 @@
<tr>
<th></th>
<th class="required-header">AccessID</th>
<th>Select all</th>
<th>Read</th>
<th>Open</th>
<th>Append</th>
<th>Transfer</th>
<th>Distribute</th>
<th class="rotated-th">
<div><span>Select all</span></div>
</th>
<th class="rotated-th">
<div><span>Read</span></div>
</th>
<th class="rotated-th">
<div><span>Read tasks</span></div>
</th>
<th class="rotated-th">
<div><span>Open</span></div>
</th>
<th class="rotated-th">
<div><span>Edit tasks</span></div>
</th>
<th class="rotated-th">
<div><span>Append</span></div>
</th>
<th class="rotated-th">
<div><span>Transfer</span></div>
</th>
<th class="rotated-th">
<div><span>Distribute</span></div>
</th>
<ng-container *ngFor="let customField of customFields$ | async">
<th *ngIf="customField.visible">{{customField.field}}</th>
<th *ngIf="customField.visible" class="rotated-th">
<div><span>{{customField.field}}</span></div>
</th>
</ng-container>
</tr>
</thead>
@ -82,19 +102,35 @@
aria-labelledby="permRead" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
<!-- READ TASKS -->
<td
[ngClass]="{ 'has-changes': (accessItemsClone[index].permReadTasks !== accessItem.value.permReadTasks)}">
<input class="workbasket-access-items__permission-checkbox" type="checkbox"
id="checkbox-{{index}}-1" formControlName="permReadTasks" aria-label="permReadTasks"
aria-labelledby="permReadTasks" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
<!-- OPEN -->
<td
[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"
id="checkbox-{{index}}-2" formControlName="permOpen" aria-label="permOpen"
aria-labelledby="permOpen" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
<!-- EDIT TASKS -->
<td
[ngClass]="{ 'has-changes': (accessItemsClone[index].permEditTasks !== accessItem.value.permEditTasks)}">
<input class="workbasket-access-items__permission-checkbox" type="checkbox"
id="checkbox-{{index}}-3" formControlName="permEditTasks" aria-label="permEditTasks"
aria-labelledby="permEditTasks" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
<!-- APPEND -->
<td
[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"
id="checkbox-{{index}}-4" formControlName="permAppend" aria-label="permAppend"
aria-labelledby="permAppend" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
@ -102,7 +138,7 @@
<td
[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"
id="checkbox-{{index}}-5" formControlName="permTransfer" aria-label="permTransfer"
aria-labelledby="permTransfer" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
@ -110,7 +146,7 @@
<td
[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"
id="checkbox-{{index}}-6" formControlName="permDistribute" aria-label="permDistribute"
aria-labelledby="permDistribute" (change)="setSelectAllCheckbox(this.index, $event)">
</td>
@ -119,7 +155,7 @@
<td *ngIf="customField.visible"
[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}}"
id="checkbox-{{index}}-{{customIndex + 7}}"
formControlName="permCustom{{customIndex+1}}" aria-label="customField"
aria-labelledby="customField" (change)="setSelectAllCheckbox(this.index, $event)">
</td>

View File

@ -16,24 +16,48 @@
}
&__table {
margin-top: 20px;
margin-left: auto;
margin-top: 1%;
margin-left: 1%;
margin-right: auto;
width: 98%;
width: 94%;
text-align: center;
& th {
padding: 0.25rem;
position: sticky;
top: 0;
z-index: 3;
background: white;
.rotated-th {
height: 80px;
min-width: 40px;
vertical-align: bottom;
padding: 0;
line-height: 0.8;
}
.rotated-th > div {
width: 100%;
position: relative;
left: 40px;
height: 100%;
transform:skew(-45deg,0deg);
border-right: 1px solid #dee2e6;
}
.rotated-th span {
position: absolute;
line-height: 1;
width: 80px;
left: 50%;
bottom: 0;
text-align: left;
transform:skew(45deg,0deg) rotate(315deg);
transform-origin: left center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
& td {
padding-left: 0.5rem;
vertical-align: initial;
border-top: 1px solid #dee2e6;
width: 40px;
vertical-align: center;
border: 1px solid #dee2e6;
}
& tr:first-child > td {
@ -41,7 +65,6 @@
}
& td > input[type='checkbox'] {
margin-top: 0;
display: block;
}
@ -91,6 +114,7 @@
}
.required-header {
vertical-align: bottom;
width: 200px;
}

View File

@ -113,10 +113,18 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
getCustomFields(customFieldCount),
tap((customFields) => {
const accessItem = this.createWorkbasketAccessItems();
this.keysOfVisibleFields = ['permRead', 'permOpen', 'permAppend', 'permTransfer', 'permDistribute'];
this.keysOfVisibleFields = [
'permRead',
'permOpen',
'permAppend',
'permTransfer',
'permDistribute',
'permReadTasks',
'permEditTasks'
];
for (let i = 0; i < customFieldCount; i++) {
if (customFields[i].visible) {
this.keysOfVisibleFields.push(Object.keys(accessItem)[i + 10]);
this.keysOfVisibleFields.push(Object.keys(accessItem)[i + 12]);
}
}
})
@ -242,6 +250,8 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
permAppend: false,
permTransfer: false,
permDistribute: false,
permReadTasks: false,
permEditTasks: false,
permCustom1: false,
permCustom2: false,
permCustom3: false,

View File

@ -11,6 +11,8 @@ export interface WorkbasketAccessItems {
permAppend: boolean;
permTransfer: boolean;
permDistribute: boolean;
permReadTasks: boolean;
permEditTasks: boolean;
permCustom1: boolean;
permCustom2: boolean;
permCustom3: boolean;

View File

@ -88,6 +88,19 @@ export class FormsValidatorService {
owner: responseOwner ? responseOwner.field : 'owner'
});
}
form.controls.forEach((control) => {
const { permEditTasks, permReadTasks, permRead } = control.value;
if (permEditTasks && (!permReadTasks || !permRead)) {
this.notificationsService.showWarning('PERM_EDIT_TASKS_MISSING_DEPENDING_PERMISSION');
}
if (permReadTasks && !permRead) {
this.notificationsService.showWarning('PERM_READ_TASKS_MISSING_DEPENDING_PERMISSIONS');
}
});
return result;
}

View File

@ -103,6 +103,12 @@ export const messageByErrorCode = {
},
[messageTypes.WARNING]: {
PERM_EDIT_TASKS_MISSING_DEPENDING_PERMISSION:
'"Edit tasks" permission was selected without the required "Read tasks" and "Read" permissions. ' +
'Your changes will still be saved but they might lead to unexpected behavior.',
PERM_READ_TASKS_MISSING_DEPENDING_PERMISSIONS:
'"Read tasks" permission was selected without the required "Read" permission. ' +
'Your changes will still be saved but they might lead to unexpected behavior.',
REPORT_DATA_WRONG_HEADER:
'The received header of the Report data does not match the expected header. ' +
'The data might be displayed incorrectly. Please contact your administrator.',

View File

@ -139,6 +139,8 @@ export const workbasketAccessItemsMock: WorkbasketAccessItemsRepresentation = {
permAppend: true,
permTransfer: true,
permDistribute: true,
permReadTasks: true,
permEditTasks: true,
permCustom1: true,
permCustom2: true,
permCustom3: true,
@ -163,6 +165,8 @@ export const workbasketAccessItemsMock: WorkbasketAccessItemsRepresentation = {
permAppend: true,
permTransfer: true,
permDistribute: false,
permReadTasks: true,
permEditTasks: true,
permCustom1: true,
permCustom2: true,
permCustom3: true,