123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271 |
- <!--
- ~ 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 itemLoader">
- <ng-template [ngIf]="itemLoader.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 userItem">
- <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 user of userItem.data">
- <td><span data-toggle="tooltip" placement="left"
- ngbTooltip="{{user.id}}">{{user.user_id}}</span>
- </td>
- <td>{{user.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 itemLoader">
- <ng-template [ngIf]="itemLoader.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>
|