nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1495: Make table in access-items-management scrollable

This commit is contained in:
Sofie Hofmann 2020-12-21 16:07:47 +01:00
parent b508feca01
commit 0d590b29ef
2 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,6 @@
<div class="access-items"> <div class="access-items">
<!-- SEARCH -->
<div class="access-items__typeahead"> <div class="access-items__typeahead">
<taskana-shared-type-ahead name="accessIdSelected" [(ngModel)]="accessIdSelected" <taskana-shared-type-ahead name="accessIdSelected" [(ngModel)]="accessIdSelected"
placeHolderMessage="Search for access id..." (selectedItem)="onSelectAccessId($event)" displayError=true placeHolderMessage="Search for access id..." (selectedItem)="onSelectAccessId($event)" displayError=true
@ -9,27 +11,29 @@
<h3>Select an access id</h3> <h3>Select an access id</h3>
<svg-icon class="empty-icon" src="./assets/icons/users.svg"></svg-icon> <svg-icon class="empty-icon" src="./assets/icons/users.svg"></svg-icon>
</div> </div>
<!-- EXPANSION PANEL GROUPS -->
<mat-expansion-panel *ngIf="accessItemsForm" class="access-items__groups-expansion-panel"> <mat-expansion-panel *ngIf="accessItemsForm" class="access-items__groups-expansion-panel">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
Groups of {{accessId.accessId}}</mat-panel-title> Groups of {{accessId.accessId}}</mat-panel-title>
</mat-expansion-panel-header> </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"> <mat-list-item *ngFor="let group of groups">
{{group.name}} {{group.name}}
<mat-divider></mat-divider> <mat-divider></mat-divider>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<ng-template #no>The user is not associated to <ng-template #noGroups>The user is not associated to any groups </ng-template>
any groups
</ng-template>
</mat-expansion-panel> </mat-expansion-panel>
<!-- EXPANSION PANEL AUTHORIZATION -->
<mat-expansion-panel *ngIf="accessItemsForm" [expanded]="true" class="access-items__authorization-expansion-panel"> <mat-expansion-panel *ngIf="accessItemsForm" [expanded]="true" class="access-items__authorization-expansion-panel">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
Authorizations of {{accessId.accessId}}</mat-panel-title> Authorizations of {{accessId.accessId}}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div *ngIf="accessItemsForm"> <div *ngIf="accessItemsForm" class="access-items__table">
<ng-form [formGroup]="accessItemsForm"> <ng-form [formGroup]="accessItemsForm">
<table> <table>
<thead> <thead>
@ -55,28 +59,27 @@
</taskana-shared-sort> </taskana-shared-sort>
</th> </th>
<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> <mat-label>Workbasket filter</mat-label>
<input matInput formControlName="workbasketKeyFilter" <input matInput formControlName="workbasketKeyFilter"
(keyup.enter)="searchForAccessItemsWorkbaskets()" type="text"> (keyup.enter)="searchForAccessItemsWorkbaskets()" type="text">
</mat-form-field> </mat-form-field>
</th> </th>
<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> <mat-label>Access id filter</mat-label>
<input matInput formControlName="accessIdFilter" (keyup.enter)="searchForAccessItemsWorkbaskets()" <input matInput formControlName="accessIdFilter" (keyup.enter)="searchForAccessItemsWorkbaskets()"
type="text"> type="text">
</mat-form-field> </mat-form-field>
</th> </th>
<th> <th>
<button mat-icon-button matTooltip="Clear filter" color="warn" (click)="clearFilter()" <button mat-stroked-button matTooltip="Clear filter" color="warn" (click)="clearFilter()">
title="clearFilter">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</th> </th>
<th> <th>
<button mat-icon-button color="basic" matTooltip="Apply filter" <button mat-stroked-button color="basic" matTooltip="Apply filter"
(click)="searchForAccessItemsWorkbaskets()" title="applyFilter"> (click)="searchForAccessItemsWorkbaskets()">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</th> </th>
@ -116,11 +119,14 @@
</tr> </tr>
</tbody> </tbody>
</table> </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> [disabled]=isGroup>
<mat-icon>clear</mat-icon> <mat-icon>clear</mat-icon>
</button> </button>
</ng-form> </ng-form>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>

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

@ -30,64 +30,55 @@ tr:nth-child(odd) > td {
tr:first-child > td { tr:first-child > td {
border-top: 2px solid $grey; border-top: 2px solid $grey;
} }
.access-items__typeahead {
width: 50%;
margin-left: 25%;
margin-right: 25%;
margin-top: 20px;
}
.access-items { .access-items {
overflow-y: scroll; overflow-y: scroll;
height: 90vh; height: calc(100vh - 104px);
}
.access-items__icon {
text-align: center;
color: grey;
}
.access-items__groups-expansion-panel { &__table {
width: 98%; overflow-x: auto;
left: 1%; overflow-y: hidden;
}
.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;
} }
}
.access-items__authorization-expansion-panel__search-button { &__typeahead {
margin-left: 20px; width: 50%;
margin-bottom: -5px; margin-left: 25%;
} margin-right: 25%;
margin-top: 20px;
}
.access-items__authorization-expansion-panel__groups-button { &__icon {
margin-bottom: 80px; text-align: center;
margin-left: 20px; color: grey;
} }
.access-items__authorization-expansion-panel__revoke-button { &__groups-expansion-panel {
float: right; width: 98%;
margin-right: 30px; left: 1%;
outline: none; }
&__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 { .mat-mini-fab {
@ -96,7 +87,7 @@ tr:first-child > td {
box-shadow: none !important; box-shadow: none !important;
} }
.mat-icon-button { .mat-stroked-button {
outline: none; outline: none;
} }