TSK-1495: Make table in access-items-management scrollable
This commit is contained in:
parent
b508feca01
commit
0d590b29ef
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue