otf-frontend/client/src/app/layout/user-management/user-management.component.pug

   1 //-  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 //-                                                                             #\r
   3 //-  Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 //-  you may not use this file except in compliance with the License.           #\r
   5 //-  You may obtain a copy of the License at                                    #\r
   6 //-                                                                             #\r
   7 //-      http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 //-                                                                             #\r
   9 //-  Unless required by applicable law or agreed to in writing, software        #\r
  10 //-  distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 //-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 //-  See the License for the specific language governing permissions and        #\r
  13 //-  limitations under the License.                                             #\r
  14 //- #############################################################################\r
  15 \r
  16 \r
  17 div([@routerTransition])\r
  18   app-page-header([heading]="'User Management'", [icon]="'fa-edit'")\r
  19 \r
  20   .card-mb-12\r
  21     .pull-left\r
  22       mat-form-field\r
  23         input(matInput, name="filter", value="{{filterString}}", (keyup)="applyFilter($event.target.value)", placeholder="Filter")\r
  24 \r
  25     div(style="width: 100%", [hidden]="!loading")\r
  26       mat-spinner(style="margin: auto", color="primary")\r
  27 \r
  28     table.mat-elevation-z8(mat-table, *ngIf="dataSource.data && dataSource.data.length > 0", [dataSource]="dataSource", style="width: 100%", [hidden]="loading")\r
  29 \r
  30       ng-container(matColumnDef="lastName")\r
  31         th(mat-header-cell, *matHeaderCellDef) lastName\r
  32         td(mat-cell, *matCellDef="let element") {{ element.lastName }}\r
  33 \r
  34       ng-container(matColumnDef="firstName")\r
  35         th(mat-header-cell, *matHeaderCellDef) First Name\r
  36         td(mat-cell, *matCellDef="let element") {{ element.firstName }}\r
  37 \r
  38       ng-container(matColumnDef="email")\r
  39         th(mat-header-cell, *matHeaderCellDef) Email\r
  40         td(mat-cell, *matCellDef="let element") {{ element.email}}\r
  41       \r
  42       ng-container(matColumnDef="addGroups")\r
  43         th(mat-header-cell, *matHeaderCellDef) Add to Group\r
  44         td(mat-cell, *matCellDef="let element")\r
  45           .dropdown(ngbDropdown, autoClose="outside", (openChange)="dropdownChange()", placement="left-top")\r
  46             button(mat-mini-fab, color="primary", ngbDropdownToggle, (click)="null")\r
  47               i.fa.fa-caret-down\r
  48             .dropdown-menu(ngbDropdownMenu)\r
  49               h4.mb-2.ml-1(style="font-weight: bold;") Change Groups\r
  50               input.ml-1(matInput, type='search', placeholder='Search...', color='blue', [(ngModel)]='search.groupName')\r
  51               div(style="max-height: 300px; overflow-y: scroll")\r
  52                 .px-4.py-3\r
  53                   .mr-2.ml-2(*ngFor="let group of groups | filterBy:search")\r
  54                     mat-checkbox((change)="addRemoveGroupList(element, group._id, $event)", [(ngModel)]="element[group._id]") {{group.groupName}} \r
  55               div(style="text-align: center")            \r
  56                 button.primary.mr-1(mat-raised-button, [disabled]= "!element.groupsToAddRemove || element.groupsToAddRemove.length <= 0", aria-label='Edit', color="primary", (click)='addGroups(element)') Add\r
  57                 button(mat-raised-button, [disabled]= "!element.groupsToAddRemove || element.groupsToAddRemove.length <= 0", color="warn", (click)='removeGroups(element)')  Remove\r
  58 \r
  59               //- a.dropdown-item(*ngFor="let group of groups", (click)='addGroupsList(element, group._id)')\r
  60               //-   span.pl-1 {{group.groupName}}\r
  61               //-   i.fa.fa-check(*ngIf='element.groupsToAdd !== undefined && element.groupsToAdd.includes(group._id)')\r
  62                 \r
  63               \r
  64                 \r
  65             //- mat-select.mr-1((selectionChange)="onChange(element)", style="width: 30%; background: #80808066",[(ngModel)]="element['groupToAddRemove']")\r
  66             //-   mat-option(*ngFor="let group of groups", value="{{group._id}}") {{ group.groupName }}\r
  67             //- button.mr-1(mat-mini-fab, aria-label='Edit', color="primary", (click)='addGroup(element)')\r
  68             //-   i.fa.fa-plus\r
  69             //- button.text-white(mat-mini-fab, aria-label='Remove', color='warn', (click)='removeGroup(element)')\r
  70             //-   i.fa.fa-remove\r
  71           \r
  72       ng-container(matColumnDef="isVerified")\r
  73         th(mat-header-cell, *matHeaderCellDef) Verified\r
  74         td(mat-cell, *matCellDef="let element") {{element.isVerified ? "Yes" : "No"}}\r
  75 \r
  76       ng-container(matColumnDef="enabled")\r
  77         th(mat-header-cell, *matHeaderCellDef) Enabled\r
  78         td(mat-cell, *matCellDef="let element")\r
  79             mat-slide-toggle([(ngModel)]="element.enabled", "color"="primary", (input)="enableUser($event, element)")\r
  80       //mat-slide-toggle([checked]="element.enabled? true : false", "color"="primary", (input)="enableUser($event, element)")\r
  81 \r
  82       tr(mat-header-row, *matHeaderRowDef="displayedColumns")\r
  83       tr(mat-row, *matRowDef="let row; columns: displayedColumns")\r
  84 \r
  85     mat-paginator([length]="resultsLength", [pageSizeOptions]="[10, 25, 100]", [hidden]="loading")\r
  86 \r