This is an automated email from the ASF dual-hosted git repository. ankovalyshyn pushed a commit to branch feature/projects in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 6919636061f23b3b42d59d0bd5f149e381096c6d Author: Andriana Kovalyshyn <[email protected]> AuthorDate: Tue Jun 4 11:40:08 2019 +0300 [DLAB-741]: replaces roles grid --- .../app/administration/roles/roles.component.html | 67 +++++++++++++--------- .../app/administration/roles/roles.component.scss | 33 ++++++++++- .../app/administration/roles/roles.component.ts | 1 + 3 files changed, 71 insertions(+), 30 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html index 1cca02f..0c91936 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html @@ -93,26 +93,26 @@ </mat-step> </mat-horizontal-stepper> <mat-divider></mat-divider> + <div *ngIf="groupsData.length" class="ani"> - <table class="dashboard_table"> - <tr> - <th class="th_name groups">Name</th> - <th class="roles">Roles</th> - <th class="users">Users</th> - <th class="th_actions">Action</th> - </tr> - <tr *ngFor="let item of groupsData" class="dashboard_table_body filter-row"> - <td>{{ item.group }}</td> - <td class="roles mat-reset"> + <table mat-table [dataSource]="groupsData" class="projects-table mat-elevation-z6"> + <ng-container matColumnDef="name"> + <th mat-header-cell *matHeaderCellDef class="name"> Group name </th> + <td mat-cell *matCellDef="let element"> {{element.group}} </td> + </ng-container> + + <ng-container matColumnDef="roles"> + <th mat-header-cell *matHeaderCellDef class="roles"> Roles </th> + <td mat-cell *matCellDef="let element" class="roles mat-reset"> <div class="selector-wrapper-edit"> <mat-form-field> - <mat-select multiple [compareWith]="compareObjects" name="selected_roles" [(value)]="item.selected_roles" + <mat-select multiple [compareWith]="compareObjects" name="selected_roles" [(value)]="element.selected_roles" placeholder="Select roles"> <mat-option class="multiple-select" disabled> - <a class="select ani" (click)="selectAllOptions(item, rolesList, 'selected_roles')"> + <a class="select ani" (click)="selectAllOptions(element, rolesList, 'selected_roles')"> <i class="material-icons">playlist_add_check</i> All </a> - <a class="deselect ani" (click)="selectAllOptions(item, null, 'selected_roles')"> + <a class="deselect ani" (click)="selectAllOptions(element, null, 'selected_roles')"> <i class="material-icons">clear</i> None </a> </mat-option> @@ -126,35 +126,46 @@ </mat-form-field> </div> </td> - <td class="users-list ani"> + </ng-container> + + <ng-container matColumnDef="users"> + <th mat-header-cell *matHeaderCellDef class="users"> Users </th> + <td mat-cell *matCellDef="let element" class="users-list ani"> <mat-form-field class="chip-list"> <input #user matInput placeholder="Enter user login" pattern="[@.-_0-9a-zA-Z]" - (keydown.enter)="addUser(user.value, item); user.value = ''"> - <button mat-icon-button matSuffix (click)="addUser(user.value, item); user.value = ''"> + (keydown.enter)="addUser(user.value, element); user.value = ''"> + <button mat-icon-button matSuffix (click)="addUser(user.value, element); user.value = ''"> <mat-icon>person_add</mat-icon> </button> </mat-form-field> <div class="list-selected list-container ani"> <mat-chip-list> - <mat-chip *ngFor="let user of item.users"> + <mat-chip *ngFor="let user of element.users"> {{ user }} - <a class="material-icons" (click)="removeUser(item.users, user)">clear</a> + <a class="material-icons" (click)="removeUser(element.users, user)">clear</a> </mat-chip> </mat-chip-list> </div> </td> - <td class="actions"> - <button mat-icon-button class="reset ani" (click)="manageAction('delete', 'group', item)"> - <i class="material-icons">close</i> - </button> + </ng-container> - <button mat-icon-button class="apply ani" matTooltip="Group cannot be updated without any selected role" - matTooltipPosition="above" [matTooltipDisabled]="item.selected_roles.length > 0" - [ngClass]="{ 'not-allowed' : !item.selected_roles.length }" (click)="manageAction('update', 'group', item)"> - <i class="material-icons">done</i> - </button> + <ng-container matColumnDef="actions"> + <th mat-header-cell *matHeaderCellDef class="actions"></th> + <td mat-cell *matCellDef="let element" class="actions"> + <span (click)="manageAction('delete', 'group', element)" class="reset ani"> + <mat-icon>delete_forever</mat-icon> + </span> + <span class="apply ani" matTooltip="Group cannot be updated without any selected role" + matTooltipPosition="above" [matTooltipDisabled]="element.selected_roles.length > 0" + [ngClass]="{ 'not-allowed' : !element.selected_roles.length }" (click)="manageAction('update', 'group', element)"> + <mat-icon>done</mat-icon> + </span> </td> - </tr> + </ng-container> + + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> + </div> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss index b28c061..4285e20 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss @@ -29,6 +29,7 @@ right: 0; top: 0px; height: 36px; + line-height: 1; cursor: pointer; &.not-allowed { background-color: #dcdcdc; @@ -164,7 +165,7 @@ margin-top: 50px; height: inherit; min-height: 0; - overflow-y: hidden; + overflow: hidden; } } .expanded-panel { @@ -242,7 +243,6 @@ mat-expansion-panel-header { max-width: 100%; overflow: hidden; text-overflow: ellipsis; - margin: 2px !important; } mat-chip.mat-chip a { position: absolute; @@ -290,3 +290,32 @@ mat-form-field.chip-list { } } } + +table { + width: 100%; + .name { + width: 15%; + } + .roles { + width: 30%; + } + .users { + width: 40%; + } + .actions { + color: #607d8b; + width: 10%; + text-align: center; + span { + transition: all .5s ease-in-out; + cursor: pointer; + .mat-icon { + font-size: 18px; + padding-top: 5px; + } + &:hover { + color: darken(#607d8b, 10%); + } + } + } +} \ No newline at end of file diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts index 8bc7b8d..b5dce66 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts @@ -44,6 +44,7 @@ export class RolesComponent implements OnInit { public delimitersRegex = /[-_]?/g; public groupnamePattern = new RegExp(/^[a-zA-Z0-9_\-]+$/); + displayedColumns: string[] = ['name', 'roles', 'users', 'actions']; @Output() manageRolesGroupAction: EventEmitter<{}> = new EventEmitter(); stepperView: boolean = false; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
