| <!-- |
| ~ 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. |
| --> |
| |
| <form class="mt-3 mb-3" [formGroup]="userForm" (ngSubmit)="onSubmit()"> |
| <div class="form-group row col-md-8"> |
| <div class="col-md-2 col-form-label">{{'form.edit' |translate}} <span |
| class="fas fa-edit"></span></div> |
| <div class="col-md-6"> |
| <input class="form-check-input" type="checkbox" [value]="editMode" [checked]="editMode" |
| (change)="editMode=!editMode" |
| > |
| </div> |
| </div> |
| <div class="form-group row col-md-8"> |
| <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.id' |translate}}</label> |
| <div class="col-md-6"> |
| <input type="text" formControlName="id" id="id" class="form-control-plaintext" |
| [attr.readonly]="true"> |
| </div> |
| </div> |
| <div class="form-group row col-md-8"> |
| <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.name' |translate}}</label> |
| <div class="col-md-6"> |
| <input type="text" formControlName="name" id="name" |
| class="form-control-plaintext" |
| [attr.readonly]="true"> |
| </div> |
| </div> |
| <div class="form-group row col-md-8"> |
| <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.description' |translate}}</label> |
| <div class="col-md-6"> |
| <input type="text" formControlName="description" id="description" |
| [ngClass]="valid('description')" |
| [attr.readonly]="editMode?null:'true'"> |
| </div> |
| </div> |
| <div class="form-group row col-md-8"> |
| <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.resource' |translate}}</label> |
| <div class="col-md-6"> |
| <input type="text" formControlName="resource" id="resource" class="form-control-plaintext" |
| [attr.readonly]="true"> |
| </div> |
| </div> |
| <div class="form-group row col-md-8"> |
| <div class="col-md-2"></div> |
| <div class="col-md-4"> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" formControlName="assignable" |
| id="assignable" [attr.disabled]="true"> |
| <label class="form-check-label " for="assignable"> |
| {{'roles.attributes.assignable'|translate}} |
| </label> |
| </div> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" formControlName="template_instance" |
| id="template_instance" [attr.disabled]="true"> |
| <label class="form-check-label " for="template_instance"> |
| {{'roles.attributes.template_instance'|translate}} |
| </label> |
| </div> |
| </div> |
| <div class="col-md-3" *ngIf="editMode"> |
| <button class="btn btn-primary" type="submit" |
| [disabled]="userForm.invalid || !userForm.dirty">{{'form.button.save'|translate}}</button> |
| </div> |
| </div> |
| </form> |
| <hr/> |
| <ngb-accordion activeIds=""> |
| <ngb-panel id="parents"> |
| <ng-template ngbPanelHeader let-opened="opened"> |
| <div class="d-flex align-items-center justify-content-between"> |
| <button ngbPanelToggle class="btn btn-link text-left shadow-none"> |
| <h3>{{'roles.edit.parents'|translate}}</h3></button> |
| <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container> |
| <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container> |
| </div> |
| </ng-template> |
| <ng-template ngbPanelContent> |
| <ng-container *ngIf="editRole?.parents.length>0"> |
| <ul class="list-group" *ngFor="let parentRole of editRole?.parents"> |
| <li class="list-group-item"><a routerLink="../{{parentRole?.id}}">{{parentRole?.name}}</a></li> |
| </ul> |
| </ng-container> |
| </ng-template> |
| </ngb-panel> |
| <ngb-panel id="children"> |
| <ng-template ngbPanelHeader let-opened="opened"> |
| <div class="d-flex align-items-center justify-content-between"> |
| <button ngbPanelToggle class="btn btn-link text-left shadow-none"> |
| <h3>{{'roles.edit.children'|translate}}</h3></button> |
| <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container> |
| <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container> |
| </div> |
| </ng-template> |
| <ng-template ngbPanelContent> |
| <ng-container *ngIf="editRole?.children.length>0"> |
| <ul class="list-group" *ngFor="let childRole of editRole?.children"> |
| <li class="list-group-item"><a routerLink="../{{childRole?.id}}">{{childRole?.name}}</a></li> |
| </ul> |
| </ng-container> |
| </ng-template> |
| </ngb-panel> |
| |
| <ngb-panel id="permissions"> |
| <ng-template ngbPanelHeader let-opened="opened"> |
| <div class="d-flex align-items-center justify-content-between"> |
| |
| <button ngbPanelToggle class="btn btn-link text-left shadow-none"> |
| <h3>{{'roles.edit.permissions'|translate}}</h3></button> |
| <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container> |
| <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container> |
| </div> |
| </ng-template> |
| <ng-template ngbPanelContent> |
| <ng-container *ngIf="editRole"> |
| <table class="table"> |
| <thead> |
| <tr> |
| <th>{{'permissions.attributes.permission'|translate}}</th> |
| <th>{{'permissions.attributes.operation'|translate}}</th> |
| <th>{{'permissions.attributes.resource'|translate}}</th> |
| </tr> |
| </thead> |
| <tbody *ngFor="let perm of editRole.permissions"> |
| <tr> |
| <td>{{perm.name}}</td> |
| <td>{{perm.operation.name}}</td> |
| <td>{{perm.resource.identifier}}</td> |
| </tr> |
| </tbody> |
| |
| </table> |
| </ng-container> |
| </ng-template> |
| </ngb-panel> |
| |
| <ngb-panel> |
| <ng-template ngbPanelHeader let-opened="opened"> |
| <div class="d-flex align-items-center justify-content-between"> |
| <button ngbPanelToggle class="btn btn-link text-left shadow-none"> |
| <h3>{{'roles.edit.users'|translate}}</h3></button> |
| <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container> |
| <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container> |
| </div> |
| </ng-template> |
| <ng-template ngbPanelContent> |
| <h4>{{'roles.edit.usersParents'|translate}}</h4> |
| <app-paginated-entities [service]="roleUserParentService" pageSize="5" [(sortField)]="userParentSortField" |
| [(sortOrder)]="userParentSortOrder" [displayControlsIfSinglePage]="false" |
| [id]="'userParentSection'" |
| #userParentSection> |
| |
| <ng-container *ngIf="userParentSection.items$ |async as userParentItemLoader"> |
| <ng-template [ngIf]="userParentItemLoader.loading"> |
| <div class="spinner-border text-primary" role="status"> |
| <span class="sr-only">Loading...</span> |
| </div> |
| </ng-template> |
| </ng-container> |
| <ng-container *ngIf="userParentSection.items$ |stripLoading|async as parentUserItem"> |
| <table class="table table-striped table-bordered"> |
| <thead class="thead-light"> |
| <tr sorted [sortFieldEmitter]="userParentSection.sortFieldChange" |
| [sortOrderEmitter]="userParentSection.sortOrderChange" |
| [toggleObserver]="userParentSection"> |
| <app-th-sorted [fieldArray]="['user_id']" |
| contentText="users.attributes.user_id"></app-th-sorted> |
| <app-th-sorted [fieldArray]="['full_name']" |
| contentText="users.attributes.full_name"></app-th-sorted> |
| </tr> |
| </thead> |
| <tbody> |
| <tr *ngFor="let parentUser of parentUserItem.data"> |
| <td><span data-toggle="tooltip" placement="left" |
| ngbTooltip="{{parentUser.id}}">{{parentUser.user_id}}</span> |
| </td> |
| <td>{{parentUser.full_name}}</td> |
| </tr> |
| </tbody> |
| </table> |
| </ng-container> |
| </app-paginated-entities> |
| <hr/> |
| <h4>{{'roles.edit.usersInstance'|translate}}</h4> |
| <app-paginated-entities [service]="roleUserService" pageSize="5" [(sortField)]="userSortField" |
| [id]="'userSection'" |
| [(sortOrder)]="userSortOrder" |
| [displayIfEmpty]="false" [displayKeyIfEmpty]="'roles.edit.noUsersAssigned'" |
| [displayControlsIfSinglePage]="false" |
| #userSection> |
| |
| <ng-container *ngIf="userSection.items$ |async as userItemLoader"> |
| <ng-template [ngIf]="userItemLoader.loading"> |
| <div class="spinner-border text-primary" role="status"> |
| <span class="sr-only">Loading...</span> |
| </div> |
| </ng-template> |
| </ng-container> |
| <ng-container *ngIf="userSection.items$ |stripLoading|async as userItem"> |
| <table class="table table-striped table-bordered"> |
| <thead class="thead-light"> |
| <tr sorted [sortFieldEmitter]="userSection.sortFieldChange" |
| [sortOrderEmitter]="userSection.sortOrderChange" |
| [toggleObserver]="userSection"> |
| <app-th-sorted [fieldArray]="['user_id']" |
| contentText="users.attributes.user_id"></app-th-sorted> |
| <app-th-sorted [fieldArray]="['full_name']" |
| contentText="users.attributes.full_name"></app-th-sorted> |
| <th>{{'headers.action'|translate}}</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr *ngFor="let user of userItem.data"> |
| <td><span data-toggle="tooltip" placement="left" |
| ngbTooltip="{{user.id}}">{{user.user_id}}</span> |
| </td> |
| <td>{{user.full_name}}</td> |
| <td><a href="javascript: void(0)" (click)="unassignUser(user.user_id)"><span |
| class="fas fa-user-minus"></span></a></td> |
| </tr> |
| </tbody> |
| </table> |
| </ng-container> |
| </app-paginated-entities> |
| <hr/> |
| <form class="mt-2"> |
| <ng-template #userResultTemplate let-r="result" let-t="term"> |
| <ngb-highlight [result]="r.user_id + ' - ' + r.full_name" [term]="t"></ngb-highlight> |
| </ng-template> |
| <div class="form-group"> |
| <label for="typeahead-http">{{'roles.edit.assignUserSearch'|translate}}</label> |
| <input id="typeahead-http" type="text" class="form-control col-md-2" |
| name="userSearchField" |
| [class.is-invalid]="userSearchFailed" [resultTemplate]="userResultTemplate" |
| [inputFormatter]="getUserId" |
| [placement]="'top'" |
| [(ngModel)]="userSearchModel" [ngbTypeahead]="searchUser" placeholder="User Search"/> |
| <small *ngIf="userSearching" |
| class="form-text text-muted">{{'form.searching' |translate}}</small> |
| <div class="invalid-feedback" |
| *ngIf="userSearchFailed">{{'roles.edit.userSearchFailed'|translate}}</div> |
| </div> |
| <button class="btn btn-primary" (click)="assignUserRole()">{{'roles.edit.assignButton'|translate}}</button> |
| </form> |
| |
| </ng-template> |
| <div *ngIf="success"> |
| Success |
| </div> |
| <div *ngIf="error"> |
| <div>Error {{errorResult.error_messages}}</div> |
| </div> |
| </ngb-panel> |
| |
| </ngb-accordion> |