From 0d590b29ef0d9986a14099d62b4d4bc2f819be8a Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Mon, 21 Dec 2020 16:07:47 +0100
Subject: [PATCH] TSK-1495:  Make table in access-items-management scrollable

---
 .../access-items-management.component.html    | 32 ++++---
 .../access-items-management.component.scss    | 95 +++++++++----------
 2 files changed, 62 insertions(+), 65 deletions(-)

diff --git 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
index d9351f087..39ee486e0 100644
--- 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
@@ -1,4 +1,6 @@
 <div class="access-items">
+
+  <!-- SEARCH -->
   <div class="access-items__typeahead">
     <taskana-shared-type-ahead name="accessIdSelected" [(ngModel)]="accessIdSelected"
       placeHolderMessage="Search for access id..." (selectedItem)="onSelectAccessId($event)" displayError=true
@@ -9,27 +11,29 @@
     <h3>Select an access id</h3>
     <svg-icon class="empty-icon" src="./assets/icons/users.svg"></svg-icon>
   </div>
+
+  <!-- EXPANSION PANEL GROUPS -->
   <mat-expansion-panel *ngIf="accessItemsForm" class="access-items__groups-expansion-panel">
     <mat-expansion-panel-header>
       <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 no">
+    <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>
-    <ng-template #no>The user is not associated to
-      any groups
-    </ng-template>
+    <ng-template #noGroups>The user is not associated to any groups </ng-template>
   </mat-expansion-panel>
+
+  <!-- EXPANSION PANEL AUTHORIZATION -->
   <mat-expansion-panel *ngIf="accessItemsForm" [expanded]="true" class="access-items__authorization-expansion-panel">
     <mat-expansion-panel-header>
       <mat-panel-title>
         Authorizations of {{accessId.accessId}}</mat-panel-title>
     </mat-expansion-panel-header>
-    <div *ngIf="accessItemsForm">
+    <div *ngIf="accessItemsForm" class="access-items__table">
       <ng-form [formGroup]="accessItemsForm">
         <table>
           <thead>
@@ -55,28 +59,27 @@
                 </taskana-shared-sort>
               </th>
               <th>
-                <mat-form-field class="access-items__authorization-expansion-panel__filter" appearance="outline">
+                <mat-form-field class="access-items__authorization-expansion-panel-filter" appearance="outline">
                   <mat-label>Workbasket filter</mat-label>
                   <input matInput formControlName="workbasketKeyFilter"
                     (keyup.enter)="searchForAccessItemsWorkbaskets()" type="text">
                 </mat-form-field>
               </th>
               <th>
-                <mat-form-field class="access-items__authorization-expansion-panel__filter" appearance="outline">
+                <mat-form-field class="access-items__authorization-expansion-panel-filter" appearance="outline">
                   <mat-label>Access id filter</mat-label>
                   <input matInput formControlName="accessIdFilter" (keyup.enter)="searchForAccessItemsWorkbaskets()"
                     type="text">
                 </mat-form-field>
               </th>
               <th>
-                <button mat-icon-button matTooltip="Clear filter" color="warn" (click)="clearFilter()"
-                  title="clearFilter">
+                <button mat-stroked-button matTooltip="Clear filter" color="warn" (click)="clearFilter()">
                   <mat-icon>close</mat-icon>
                 </button>
               </th>
               <th>
-                <button mat-icon-button color="basic" matTooltip="Apply filter"
-                  (click)="searchForAccessItemsWorkbaskets()" title="applyFilter">
+                <button mat-stroked-button color="basic" matTooltip="Apply filter"
+                  (click)="searchForAccessItemsWorkbaskets()">
                   <mat-icon>search</mat-icon>
                 </button>
               </th>
@@ -116,11 +119,14 @@
             </tr>
           </tbody>
         </table>
-        <button mat-mini-fab class="access-items__authorization-expansion-panel__revoke-button"
-          matTooltip="Revoke access" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()" title="Revoke access"
+
+        <!-- Revoke Access button -->
+        <button mat-mini-fab class="access-items__revoke-button"
+          matTooltip="Revoke access" color="warn" *ngIf="accessItemsForm" (click)="revokeAccess()"
           [disabled]=isGroup>
           <mat-icon>clear</mat-icon>
         </button>
+
       </ng-form>
     </div>
   </mat-expansion-panel>
diff --git 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
index ed382cac7..64aff7597 100644
--- 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
@@ -30,64 +30,55 @@ tr:nth-child(odd) > td {
 tr:first-child > td {
   border-top: 2px solid $grey;
 }
-
-.access-items__typeahead {
-  width: 50%;
-  margin-left: 25%;
-  margin-right: 25%;
-  margin-top: 20px;
-}
-
 .access-items {
   overflow-y: scroll;
-  height: 90vh;
-}
-.access-items__icon {
-  text-align: center;
-  color: grey;
-}
+  height: calc(100vh - 104px);
 
-.access-items__groups-expansion-panel {
-  width: 98%;
-  left: 1%;
-}
-
-.access-items__authorization-expansion-panel {
-  width: 98%;
-  left: 1%;
-  margin-bottom: 5px;
-}
-
-.access-items__authorization-expansion-panel__list {
-  max-height: 100px;
-  overflow: auto;
-}
-
-.access-items__authorization-expansion-panel__filter {
-  width: 130px;
-  margin-bottom: -31px;
-  margin-top: -10px;
-  margin-left: -35px;
-  text-align: left;
-  @media only screen and (max-width: 1600px) {
-    margin-left: -5px;
+  &__table {
+    overflow-x: auto;
+    overflow-y: hidden;
   }
-}
 
-.access-items__authorization-expansion-panel__search-button {
-  margin-left: 20px;
-  margin-bottom: -5px;
-}
+  &__typeahead {
+    width: 50%;
+    margin-left: 25%;
+    margin-right: 25%;
+    margin-top: 20px;
+  }
 
-.access-items__authorization-expansion-panel__groups-button {
-  margin-bottom: 80px;
-  margin-left: 20px;
-}
+  &__icon {
+    text-align: center;
+    color: grey;
+  }
 
-.access-items__authorization-expansion-panel__revoke-button {
-  float: right;
-  margin-right: 30px;
-  outline: none;
+  &__groups-expansion-panel {
+    width: 98%;
+    left: 1%;
+  }
+
+  &__authorization-expansion-panel {
+    width: 98%;
+    left: 1%;
+    margin-bottom: 5px;
+  }
+
+  &__authorization-expansion-panel-filter {
+    width: 130px;
+    margin-bottom: -31px;
+    margin-top: -10px;
+    margin-left: -35px;
+    text-align: left;
+    @media only screen and (max-width: 1600px) {
+      margin-left: -5px;
+    }
+  }
+
+  &__revoke-button {
+    float: right;
+    margin-right: 30px;
+    margin-bottom: 8px;
+    outline: none;
+  }
 }
 
 .mat-mini-fab {
@@ -96,7 +87,7 @@ tr:first-child > td {
   box-shadow: none !important;
 }
 
-.mat-icon-button {
+.mat-stroked-button {
   outline: none;
 }