portal-FE-common/src/app/pages/users/users.component.ts

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2020 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  *
  37  */
  38 import { Component, OnInit, ViewChild } from '@angular/core';
  39 import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
  40 import { ApplicationsService, UsersService } from 'src/app/shared/services';
  41 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  42 import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
  43 import { UserAdminApps } from 'src/app/shared/model';
  44 import { HttpErrorResponse } from '@angular/common/http';
  45 import { NewUserModalComponent } from './new-user-modal/new-user-modal.component';
  46 import { BulkUserComponent } from './bulk-user/bulk-user.component';
  47
  48 @Component({
  49   selector: 'app-users',
  50   templateUrl: './users.component.html',
  51   styleUrls: ['./users.component.scss']
  52 })
  53 export class UsersComponent implements OnInit {
  54   multiAppAdmin: boolean;
  55   adminApps: any;
  56   selectApp = 'select-application';
  57   selectedApp: any;
  58   appsIsDown: boolean;
  59   noUsersInApp: boolean;
  60   searchString: string;
  61   isAppSelectDisabled: boolean;
  62   accountUsers: any;
  63   noAppSelected: boolean;
  64   @ViewChild(MatSort) sort: MatSort;
  65   @ViewChild(MatPaginator) paginator: MatPaginator;
  66   displayedColumns: string[] = ['firstName', 'lastName', 'userId', 'roles'];
  67   adminsDataSource = new MatTableDataSource(this.accountUsers);
  68   adminsData: [];
  69   showSpinner: boolean;
  70   adminAppsIsNull: any;
  71
  72   constructor(private applicationsService: ApplicationsService, public ngbModal: NgbModal,
  73     private usersService: UsersService) { }
  74
  75   ngOnInit() {
  76     this.adminApps = [];
  77     this.accountUsers = [];
  78     this.getAdminApps();
  79   }
  80
  81   openAddNewUserModal() {
  82     const modalRef = this.ngbModal.open(NewUserModalComponent);
  83     modalRef.componentInstance.title = 'New User';
  84     modalRef.componentInstance.dialogState = 1;
  85     modalRef.componentInstance.disableBack = false;
  86     modalRef.componentInstance.passBackNewUserPopup.subscribe((_result: any) => {
  87       this.showSpinner = true;
  88       this.updateUsersList();
  89     }, (_reason: any) => {
  90       return;
  91     });
  92   }
  93
  94   openExistingUserModal(userData: any) {
  95     const modalRef = this.ngbModal.open(NewUserModalComponent);
  96     let firstName = '';
  97     let lastName = '';
  98     let orgUserId = '';
  99     if(userData && userData.firstName && userData.firstName!=null){
 100       firstName = userData.firstName;
 101     }
 102     if(userData && userData.lastName && userData.lastName!=null){
 103       lastName = ',' + userData.lastName;
 104     }
 105     if(userData && userData.orgUserId && userData.orgUserId!=null){
 106       orgUserId = ' (' +userData.orgUserId + ')';
 107     }
 108     modalRef.componentInstance.userTitle = `${firstName} ${lastName} ${orgUserId}` ;
 109     modalRef.componentInstance.dialogState = 2;
 110     modalRef.componentInstance.userModalData = userData;
 111     modalRef.componentInstance.disableBack = true;
 112     modalRef.componentInstance.passBackNewUserPopup.subscribe((_result: any) => {
 113       this.showSpinner = true;
 114       this.updateUsersList();
 115     }, (_reason: any) => {
 116       return;
 117     });
 118   }
 119
 120   openBulkUserUploadModal() {
 121     const modalRef = this.ngbModal.open(BulkUserComponent);
 122     modalRef.componentInstance.title = 'Bulk User Upload';
 123     modalRef.componentInstance.adminsAppsData = this.adminApps;
 124     modalRef.componentInstance.passBackBulkUserPopup.subscribe((_result: any) => {
 125       this.showSpinner = true;
 126       this.updateUsersList();
 127     }, (_reason: any) => {
 128       return;
 129     });
 130   }
 131
 132   applyDropdownFilter(_appValue: any) {
 133     if (_appValue !== 'select-application') {
 134       this.selectedApp = _appValue;
 135       this.selectApp = this.selectedApp.value;
 136       this.updateUsersList();
 137     } else {
 138       this.showSpinner = false;
 139       this.noAppSelected = true;
 140       this.accountUsers = [];
 141       this.adminsDataSource = new MatTableDataSource(this.accountUsers);
 142     }
 143   }
 144
 145   applyFilter(filterValue: string) {
 146     this.adminsDataSource.filter = filterValue.trim().toLowerCase();
 147   }
 148
 149   getAdminApps() {
 150     this.showSpinner = true;
 151     this.applicationsService.getAdminApps().subscribe((apps: Array<UserAdminApps>) => {
 152       this.showSpinner = false;
 153       if (!apps) {
 154         return null;
 155       }
 156
 157       if (apps.length >= 2) {
 158         this.multiAppAdmin = true;
 159       } else {
 160         this.adminApps = [];
 161       }
 162
 163       let sortedApps = apps.sort(this.getSortOrder("name"));
 164       let realAppIndex = 1;
 165       for (let i = 1; i <= sortedApps.length; i++) {
 166         this.adminApps.push({
 167           index: realAppIndex,
 168           id: sortedApps[i - 1].id,
 169           value: sortedApps[i - 1].name,
 170           title: sortedApps[i - 1].name
 171         });
 172         realAppIndex = realAppIndex + 1;
 173       }
 174       this.selectApp = this.adminApps[0];
 175       this.adminAppsIsNull = false;
 176       if (this.selectApp != 'select-application') {
 177         this.isAppSelectDisabled = false;
 178         this.noUsersInApp = false;
 179         this.noAppSelected = true;
 180       }
 181     }, (_err: HttpErrorResponse) => {
 182       this.showSpinner = false;
 183       if (_err.status === 403) {
 184         this.adminAppsIsNull = true;
 185       } else {
 186         const modalErrorRef = this.ngbModal.open(ConfirmationModalComponent);
 187         modalErrorRef.componentInstance.title = "Error";
 188         if (_err.status) {    //Conflict
 189           modalErrorRef.componentInstance.message = 'Error Status: ' + _err.status + ' There was a unknown problem adding the portal admin.' + 'Please try again later.';
 190         }
 191       }
 192     });
 193   }
 194
 195   updateUsersList() {
 196     this.appsIsDown = false;
 197     this.noUsersInApp = false;
 198     // $log.debug('UsersCtrl::updateUsersList: Starting updateUsersList');
 199     //reset search string
 200     this.searchString = '';
 201     //should i disable this too in case of moving between tabs?
 202     this.isAppSelectDisabled = true;
 203     //activate spinner
 204     this.showSpinner = true;
 205     this.accountUsers = [];
 206     this.adminsDataSource = new MatTableDataSource(this.accountUsers);
 207     if (this.selectApp != 'select-application' && this.selectedApp) { // 'Select Application'
 208       this.noAppSelected = false;
 209       this.usersService.getAccountUsers(this.selectedApp.id)
 210         .subscribe((accountUsers: []) => {
 211           this.isAppSelectDisabled = false;
 212           this.accountUsers = accountUsers;
 213           if (!accountUsers || accountUsers.length === 0) {
 214             this.noUsersInApp = true;
 215             this.showSpinner = false;
 216             this.accountUsers = [];
 217             return null;
 218           }
 219           this.showSpinner = false;
 220           this.adminsDataSource = new MatTableDataSource(this.accountUsers);
 221           this.adminsDataSource.paginator = this.paginator;
 222           this.adminsDataSource.sort = this.sort;
 223         }, (_err: HttpErrorResponse) => {
 224           this.isAppSelectDisabled = false;
 225           const modalErrorRef = this.ngbModal.open(ConfirmationModalComponent);
 226           modalErrorRef.componentInstance.title = "Error";
 227           modalErrorRef.componentInstance.message = 'Error Status: ' + _err.status + ' There was a problem updating the users List.' + 'Please try again later.';
 228           this.appsIsDown = true;
 229           this.showSpinner = false;
 230         })
 231     } else {
 232       this.isAppSelectDisabled = false;
 233       this.showSpinner = false;
 234       this.noUsersInApp = false;
 235       this.noAppSelected = true;
 236     }
 237   };
 238
 239   getSortOrder = (prop) => {
 240     return function (a, b) {
 241       if (a[prop] > b[prop]) {
 242         return 1;
 243       } else if (a[prop] < b[prop]) {
 244         return -1;
 245       }
 246       return 0;
 247     }
 248   }
 249 }