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

2021-01-25 08:03:10 +01:00 · 2021-01-25 08:03:10 +01:00 · 9324e6ad7a
parent bfa1220519
commit 9324e6ad7a
9 changed files with 109 additions and 87 deletions
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.html
+++ b/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">
-      <mat-list-item *ngFor="let group of groups">
-        {{group.name}}
-        <mat-divider></mat-divider>
-      </mat-list-item>
-    </mat-list>
+    <!-- TABLE WITH GROUP NAMES AND ACCESS IDs -->
+    <table *ngIf="groups && groups.length > 0; else noGroups" mat-table [dataSource]="groups">
+      <ng-container matColumnDef="Name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell class="access-items__group-table-cell" *matCellDef="let element"> {{element.name}} </td>
+      </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"
-          matTooltip="Revoke access" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()"
+        <button mat-raised-button class="access-items__revoke-button" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()"
          [disabled]=isGroup>
+          Revoke access
          <mat-icon>clear</mat-icon>
        </button>

--- a/web/src/app/administration/components/access-items-management/access-items-management.component.scss
+++ b/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;
 }
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.spec.ts
+++ b/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,
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.ts
+++ b/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.searchForAccessItemsWorkbaskets();
-        });
+        this.store
+          .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.setAccessItemsGroups(
-        state['accessItemsManagement'].accessItemsResource
-          ? state['accessItemsManagement'].accessItemsResource.accessItems
-          : []
-      );
-    });
+    this.store
+      .dispatch(new GetAccessItems(filterParameter, this.sortModel))
+      .pipe(takeUntil(this.destroy$))
+      .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.searchForAccessItemsWorkbaskets();
-        });
+        this.store
+          .dispatch(new RemoveAccessItemsPermissions(this.accessId.accessId))
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
+            this.searchForAccessItemsWorkbaskets();
+          });
      }
    );
  }
--- a/web/src/app/administration/components/classification-list/classification-list.component.html
+++ b/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"
-                      [title]="(getCategoryIcon('all') | async)?.right"></svg-icon>
-            <span>All</span>
+            <span> <mat-icon style="color: #555" class="classification-list__filter-all-icon">filter_list</mat-icon> 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"
--- a/web/src/app/administration/components/classification-list/classification-list.component.scss
+++ b/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;
--- a/web/src/app/administration/components/classification-list/classification-list.component.spec.ts
+++ b/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 */
--- a/web/src/app/shared/components/workbasket-filter/workbasket-filter.component.html
+++ b/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>

--- a/web/src/app/shared/components/workbasket-filter/workbasket-filter.component.scss
+++ b/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;
-  flex-direction: column;
-  justify-content: space-between;
+  
+  &__collapsed-filter {
+    display: flex;
+    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;
-}