TSK-1523: Small changes in access-items and modified all-icon

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

@@ -18,12 +18,20 @@
       <mat-panel-title>
         Groups of {{accessId.accessId}}</mat-panel-title>
     </mat-expansion-panel-header>
-    <mat-list class="access-items__expansion-panel__list" *ngIf="groups && groups.length > 0; else noGroups">
+    <!-- TABLE WITH GROUP NAMES AND ACCESS IDs -->
-      <mat-list-item *ngFor="let group of groups">
+    <table *ngIf="groups && groups.length > 0; else noGroups" mat-table [dataSource]="groups">
-        {{group.name}}
+      <ng-container matColumnDef="Name">
-        <mat-divider></mat-divider>
+        <th mat-header-cell *matHeaderCellDef> Name </th>
-      </mat-list-item>
+        <td mat-cell class="access-items__group-table-cell" *matCellDef="let element"> {{element.name}} </td>
-    </mat-list>
+      </ng-container>
+      <ng-container matColumnDef="Access Id">
+        <th mat-header-cell *matHeaderCellDef> Access Id </th>
+        <td mat-cell class="access-items__group-table-cell" *matCellDef="let element"> {{element.accessId}} </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="['Name', 'Access Id']"></tr>
+      <tr mat-row *matRowDef="let row; columns: ['Name', 'Access Id'];"></tr>
+    </table>
+
     <ng-template #noGroups>The user is not associated to any groups </ng-template>
   </mat-expansion-panel>
 
@@ -73,15 +81,6 @@
                 </mat-form-field>
               </th>
               <th>
-                <button mat-stroked-button matTooltip="Clear filter" color="warn" (click)="clearFilter()">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </th>
-              <th>
-                <button mat-stroked-button color="basic" matTooltip="Apply filter"
-                  (click)="searchForAccessItemsWorkbaskets()">
-                  <mat-icon>search</mat-icon>
-                </button>
               </th>
             </tr>
           </thead>
@@ -121,9 +120,9 @@
         </table>
 
         <!-- Revoke Access button -->
-        <button mat-mini-fab class="access-items__revoke-button"
+        <button mat-raised-button class="access-items__revoke-button" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()"
-          matTooltip="Revoke access" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()"
           [disabled]=isGroup>
+          Revoke access
           <mat-icon>clear</mat-icon>
         </button>
 

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

@@ -7,6 +7,11 @@ table {
   margin-bottom: 10px;
 }
 
+::ng-deep .mat-header-cell{
+  color: black;
+  font-weight: bold;
+}
+
 td,
 th {
   padding: 8px;
@@ -30,10 +35,16 @@ tr:nth-child(odd) > td {
 tr:first-child > td {
   border-top: 2px solid $grey;
 }
+
 .access-items {
   overflow-y: scroll;
   height: calc(100vh - 104px);
 
+  &__group-table-cell {
+    height: 48px;
+    text-align: left;
+  }
+
   &__table {
     overflow-x: auto;
     overflow-y: hidden;
@@ -77,7 +88,6 @@ tr:first-child > td {
     float: right;
     margin-right: 30px;
     margin-bottom: 8px;
-    outline: none;
   }
 }
 
@@ -87,10 +97,6 @@ tr:first-child > td {
   box-shadow: none !important;
 }
 
-.mat-stroked-button {
-  outline: none;
-}
-
 .align-left {
   text-align: left;
 }

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

@@ -34,6 +34,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatListModule } from '@angular/material/list';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatTableModule } from '@angular/material/table';
 
 const isFieldValidFn = jest.fn().mockReturnValue(true);
 const formValidatorServiceSpy = jest.fn().mockImplementation(
@@ -94,7 +95,8 @@ describe('AccessItemsManagementComponent', () => {
         MatTooltipModule,
         MatDividerModule,
         MatListModule,
-        MatExpansionModule
+        MatExpansionModule,
+        MatTableModule
       ],
       declarations: [
         AccessItemsManagementComponent,

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

@@ -74,9 +74,12 @@ export class AccessItemsManagementComponent implements OnInit {
       if (this.accessIdPrevious !== selected.accessId) {
         this.accessIdPrevious = selected.accessId;
         this.accessIdName = selected.name;
-        this.store.dispatch(new GetGroupsByAccessId(selected.accessId)).subscribe(() => {
+        this.store
-          this.searchForAccessItemsWorkbaskets();
+          .dispatch(new GetGroupsByAccessId(selected.accessId))
-        });
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
+            this.searchForAccessItemsWorkbaskets();
+          });
       }
     } else {
       this.accessItemsForm = null;
@@ -89,13 +92,16 @@ export class AccessItemsManagementComponent implements OnInit {
     const filterParameter: WorkbasketAccessItemQueryFilterParameter = {
       'access-id': [this.accessId, ...this.groups].map((a) => a.accessId)
     };
-    this.store.dispatch(new GetAccessItems(filterParameter, this.sortModel)).subscribe((state) => {
+    this.store
-      this.setAccessItemsGroups(
+      .dispatch(new GetAccessItems(filterParameter, this.sortModel))
-        state['accessItemsManagement'].accessItemsResource
+      .pipe(takeUntil(this.destroy$))
-          ? state['accessItemsManagement'].accessItemsResource.accessItems
+      .subscribe((state) => {
-          : []
+        this.setAccessItemsGroups(
-      );
+          state['accessItemsManagement'].accessItemsResource
-    });
+            ? state['accessItemsManagement'].accessItemsResource.accessItems
+            : []
+        );
+      });
   }
 
   setAccessItemsGroups(accessItems: Array<WorkbasketAccessItems>) {
@@ -141,9 +147,12 @@ export class AccessItemsManagementComponent implements OnInit {
     this.notificationService.showDialog(
       `You are going to delete all access related: ${this.accessId.accessId}. Can you confirm this action?`,
       () => {
-        this.store.dispatch(new RemoveAccessItemsPermissions(this.accessId.accessId)).subscribe(() => {
+        this.store
-          this.searchForAccessItemsWorkbaskets();
+          .dispatch(new RemoveAccessItemsPermissions(this.accessId.accessId))
-        });
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
+            this.searchForAccessItemsWorkbaskets();
+          });
       }
     );
   }

web/src/app/administration/components/classification-list/classification-list.component.html

@@ -34,9 +34,8 @@
 
         <mat-menu #menu="matMenu">
           <button class="classification-list__all-button" mat-menu-item (click)="selectCategory('')">
-            <svg-icon class="classification-list__categories"  [src]="(getCategoryIcon('all') | async)?.left"
+            <span> <mat-icon style="color: #555" class="classification-list__filter-all-icon">filter_list</mat-icon> All </span>
-                      [title]="(getCategoryIcon('all') | async)?.right"></svg-icon>
+            <span> All </span>
-            <span>All</span>
           </button>
           <button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
             <svg-icon class="classification-list__categories" [src]="(getCategoryIcon(category) | async)?.left"

web/src/app/administration/components/classification-list/classification-list.component.scss

@@ -44,6 +44,10 @@
     fill: #555;
   }
 
+  &__filter-all-icon {
+    margin-right: 0 !important;
+  }
+
   &__categories {
     fill: #555;
     margin: 0;

web/src/app/administration/components/classification-list/classification-list.component.spec.ts

@@ -180,7 +180,7 @@ describe('ClassificationListComponent', () => {
     filterButton.click();
     fixture.detectChanges();
     const matMenu = debugElement.queryAll(By.css('.classification-list__categories'));
-    expect(matMenu.length).toBe(4);
+    expect(matMenu.length).toBe(3);
   });
 
   /* HTML: CLASSIFICATION TREE */

web/src/app/shared/components/workbasket-filter/workbasket-filter.component.html

@@ -1,8 +1,8 @@
-<div>
+<div class="filter">
   <!-- COLLAPSED WORKBASKET FILTER -->
   <div class="filter__collapsed-filter" *ngIf="!isExpanded">
     <!-- TEXT INPUT -->
-    <mat-form-field appearance="legacy" floatLabel="auto" class="collapsed-filter_input-field">
+    <mat-form-field appearance="legacy" floatLabel="auto" class="filter__collapsed-filter-input-field">
       <mat-label>Filter by name</mat-label>
       <input matInput [(ngModel)]="filter['name-like'][0]" matTooltip="Type to filter by name"
              (keyup.enter)="search()">
@@ -22,7 +22,7 @@
 
 
   <!-- EXPANDED WORKBASKET FILTER -->
-  <div class="filter" *ngIf="isExpanded">
+  <div class="filter__expanded-filter" *ngIf="isExpanded">
 
     <!-- TEXT INPUT -->
     <div class="filter__text-input">
@@ -62,14 +62,15 @@
       <!-- TYPE FILTER -->
       <button mat-stroked-button [matMenuTriggerFor]="menu" matTooltip="Filter workbaskets by type">
         Filter by type
-        <mat-icon *ngIf="filter.type" style="color: #555">filter_list</mat-icon>
+        <mat-icon *ngIf="filter.type.length == 0" style="color: #555">filter_list</mat-icon>
         <taskana-administration-icon-type *ngIf="filter.type[0]"
                                           [type]="filter.type[0]"></taskana-administration-icon-type>
       </button>
 
       <mat-menu #menu="matMenu">
         <button mat-menu-item *ngFor="let type of allTypes | mapValues" (click)="selectType(type.key); search()">
-          <taskana-administration-icon-type [type]='type.key' [text]="type.value"></taskana-administration-icon-type>
+          <span *ngIf="type.value === 'All'"> <mat-icon style="color: #555" class="filter__all-icon">filter_list</mat-icon> All </span>
+          <taskana-administration-icon-type *ngIf="type.value !== 'All'" [type]='type.key' [text]="type.value"></taskana-administration-icon-type>
         </button>
       </mat-menu>
 

web/src/app/shared/components/workbasket-filter/workbasket-filter.component.scss

@@ -1,47 +1,49 @@
 @import 'src/theme/_colors.scss';
 
 .filter {
-  margin: -10px 0 0 8px;
+  
-  display: flex;
+  &__collapsed-filter {
-  flex-direction: column;
+    display: flex;
-  justify-content: space-between;
+    height: 36px;
+  }
+
+  &__expanded-filter {
+    margin: -10px 0 0 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__all-icon {
+    margin-right: 0 !important;
+  }
+
+  &__collapsed-filter-input-field {
+    top: -10px;
+    flex-grow: 1;
+    margin: 0 8px 0 8px;
+  }
+
+  &__undo-buttons {
+    margin-left: 4px;
+  }
+
+  &__search-button {
+    background: $aquamarine;
+    color: white;
+    margin-left: 4px;
+  }
+
+  &__name-and-key-input {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__action-buttons {
+    width: 100%;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
-.filter__collapsed-filter {
-  display: flex;
-  height: 36px;
-}
-
-.collapsed-filter_input-field {
-  top: -10px;
-  flex-grow: 1;
-  margin: 0 8px 0 8px;
-}
-
-.filter__undo-buttons {
-  margin-left: 4px;
-}
-
-.filter__search-button {
-  background: $aquamarine;
-  color: white;
-  margin-left: 4px;
-}
-
-.filter__name-and-key-input {
-  display: flex;
-  justify-content: space-between;
-}
-
-.filter__action-buttons {
-  width: 100%;
-  padding: 10px 0;
-  display: flex;
-  justify-content: space-between;
-}
-
-.filter__search-button {
-  background: $aquamarine;
-  color: white;
-  margin-left: 4px;
-}