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

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

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

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

@@ -22,14 +22,34 @@
 					<tr>
 						<th></th>
             <th class="required-header">AccessID</th>
-						<th>Select all</th>
+            <th class="rotated-th">
-						<th>Read</th>
+              <div><span>Select all</span></div>
-						<th>Open</th>
+            </th>
-						<th>Append</th>
+            <th class="rotated-th">
-						<th>Transfer</th>
+              <div><span>Read</span></div>
-						<th>Distribute</th>
+            </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>

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

@@ -16,24 +16,48 @@
   }
 
   &__table {
-    margin-top: 20px;
+    margin-top: 1%;
-    margin-left: auto;
+    margin-left: 1%;
     margin-right: auto;
-    width: 98%;
+    width: 94%;
     text-align: center;
 
-    & th {
+    .rotated-th {
-      padding: 0.25rem;
+      height: 80px;
-      position: sticky;
+      min-width: 40px;
-      top: 0;
+      vertical-align: bottom;
-      z-index: 3;
+      padding: 0;
-      background: white;
+      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;
+      width: 40px;
-      vertical-align: initial;
+      vertical-align: center;
-      border-top: 1px solid #dee2e6;
+      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;
 }
 

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

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

web/src/app/shared/models/workbasket-access-items.ts

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

web/src/app/shared/services/forms-validator/forms-validator.service.ts

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

web/src/app/shared/services/obtain-message/message-by-error-code.ts

@@ -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.',

web/src/app/shared/store/mock-data/mock-store.ts

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