| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <div class="manage-roles base-retreat"> |
| <div class="sub-nav"> |
| <div matTooltip="Only admin can add group." |
| matTooltipPosition="above" |
| [matTooltipDisabled]="healthStatus?.admin" |
| > |
| <button mat-raised-button class="butt add-group" (click)="stepperView = !stepperView" [disabled]="!healthStatus?.admin" |
| > |
| <i class="material-icons">people_outline</i>Add group |
| </button> |
| </div> |
| <div></div> |
| </div> |
| |
| <mat-card *ngIf="stepperView" class="m-top-10"> |
| <mat-horizontal-stepper #stepper class="stepper ani"> |
| <mat-step [completed]='false'> |
| <ng-template matStepLabel>Groups</ng-template> |
| <div class="inner-step mat-reset"> |
| <input [validator]="groupValidation()" type="text" placeholder="Enter group name" [(ngModel)]="setupGroup" |
| #setupGroupName="ngModel"> |
| <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty">Group name can only |
| contain letters, numbers, hyphens and '_'.</div> |
| <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty">Group name already |
| exists.</div> |
| <div class="error" *ngIf="setupGroupName.errors?.long">Group name cannot be longer than {{maxGroupLength}} characters.</div> |
| </div> |
| <div class="text-center m-bott-10"> |
| <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> |
| <button mat-raised-button |
| matStepperNext class="butt" |
| [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns" |
| > |
| Next |
| <i class="material-icons arrow-icon">keyboard_arrow_right</i> |
| </button> |
| </div> |
| </mat-step> |
| |
| <mat-step [completed]='false'> |
| <ng-template matStepLabel>Users</ng-template> |
| <div class="inner-step mat-reset"> |
| <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser"> |
| </div> |
| <div class="text-center m-bott-10"> |
| <button mat-raised-button matStepperPrevious class="butt"><i |
| class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button> |
| <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> |
| <button mat-raised-button matStepperNext class="butt">Next<i |
| class="material-icons arrow-icon">keyboard_arrow_right</i></button> |
| </div> |
| </mat-step> |
| |
| <mat-step [completed]='false'> |
| <ng-template matStepLabel>Roles</ng-template> |
| <div class="inner-step mat-reset roles"> |
| <div class="selector-wrapper"> |
| <multi-level-select-dropdown |
| (selectionChange)="onUpdate($event)" |
| name="roles" |
| [items]="rolesList" |
| [model]="setupRoles" |
| [isAdmin]="healthStatus?.admin" |
| > |
| </multi-level-select-dropdown> |
| </div> |
| </div> |
| <div class="text-center m-bott-10"> |
| <button mat-raised-button matStepperPrevious class="butt"><i |
| class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button> |
| <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> |
| <button mat-raised-button (click)="manageAction('create', 'group')" class="butt butt-success" |
| [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length">Create</button> |
| </div> |
| </mat-step> |
| |
| </mat-horizontal-stepper> |
| </mat-card> |
| <mat-divider></mat-divider> |
| |
| <div *ngIf="groupsData.length" class="ani"> |
| <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" class="name"> |
| <div class="d-flex"> |
| <span |
| class="ellipsis" |
| [matTooltip]="element.group" |
| matTooltipPosition="above" |
| [matTooltipClass]="'full-size-tooltip'"> |
| {{element.group}} |
| </span> |
| </div> |
| </td> |
| </ng-container> |
| |
| <ng-container matColumnDef="roles"> |
| <th mat-header-cell *matHeaderCellDef class="roles"> Roles </th> |
| <td mat-cell *matCellDef="let element" class="roles"> |
| <div class="inner-step mat-reset"> |
| <multi-level-select-dropdown |
| (selectionChange)="onUpdate($event)" |
| [type]="element.group" |
| [items]="rolesList" |
| [model]="element.selected_roles" |
| [isAdmin]="healthStatus?.admin" |
| > |
| </multi-level-select-dropdown> |
| </div> |
| </td> |
| </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, element);" (keyup)="checkIfUserAdded(element, user.value)"> |
| <button mat-icon-button matSuffix (click)="addUser(user, element); user.value = ''" [disabled]="element.isUserAdded"> |
| <mat-icon matTooltip="User is already added to this group" matTooltipPosition="above" [matTooltipDisabled]="!element.isUserAdded">person_add</mat-icon> |
| </button> |
| </mat-form-field> |
| <div class="list-selected list-container ani"> |
| <div class="scrolling"> |
| <mat-chip-list [disabled]="true"> |
| <mat-chip |
| *ngFor="let user of element.users" |
| [matTooltip]="user" |
| matTooltipPosition="above" |
| matTooltipClass="mat-tooltip-for-users" |
| class="ellipsis" |
| > |
| {{ user }} |
| <a class="material-icons" (click)="removeUser(element.users, user)">clear</a> |
| </mat-chip> |
| </mat-chip-list> |
| </div> |
| </div> |
| </td> |
| </ng-container> |
| |
| <ng-container matColumnDef="actions"> |
| <th mat-header-cell *matHeaderCellDef class="actions"></th> |
| <td mat-cell *matCellDef="let element" class="actions"> |
| <div class="actions-wrapper"> |
| <span class="action-disabled" |
| matTooltip="Only admin can delete group." |
| matTooltipPosition="above" |
| [matTooltipDisabled]="healthStatus?.admin" |
| > |
| <span |
| (click)="manageAction('delete', 'group', element)" |
| class="reset ani" |
| [ngClass]="{ 'not-allowed' : !healthStatus?.admin}" |
| |
| > |
| <mat-icon >delete_forever</mat-icon> |
| </span> |
| </span> |
| |
| <span class="apply ani big-icon" matTooltip="Group cannot be updated without any selected role" |
| matTooltipPosition="above" [matTooltipDisabled]="element.selected_roles.length > 0" |
| [ngClass]="{ 'not-allowed' : !element.selected_roles.length || isGroupChanded(element)}" |
| (click)="manageAction('update', 'group', element)"> |
| <mat-icon [ngClass]="{'big-icon': !isGroupChanded(element) && element.selected_roles.length}">done</mat-icon> |
| </span> |
| </div> |
| </td> |
| </ng-container> |
| |
| <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
| <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
| </table> |
| </div> |
| |
| <inform-message [message]="noPermissionMessage" *ngIf="!healthStatus?.admin && healthStatus?.projectAdmin && !groupsData.length"></inform-message> |
| </div> |