@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/users-list/src/users-list.component.ts

@@ -0,0 +1,410 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { UserService } from './services/user.service';
+import { APIService } from './services/api.service';
+import { NotificationService } from './services/notification.service';
+import { debounceTime, Subscription } from 'rxjs';
+import { UsersSearchService } from './services/users-search.service';
+import { ListUser } from './classes/user-list';
+import { MatTableDataSource } from '@angular/material/table';
+import { PageEvent } from '@angular/material/paginator';
+import { ApiWebexService } from './services/api-webex.service';
+import { MAX_INTEGER } from './app.constants';
+import { MatDialog } from '@angular/material/dialog';
+import { UserListConfirmDialogComponent } from './user-list-confirm-dialog/user-list-confirm-dialog.component';
+
+const DISPLAYED_COLS = [
+  'name',
+  'email',
+  'status',
+  'last-active-time',
+  'role',
+  'source',
+  'actions',
+];
+const LOCAL_STORAGE = {
+  USER_IN_MIGRATION: 'userIdInMigration',
+};
+
+@Component({
+  selector: 'app-users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss'],
+})
+export class UsersListComponent implements OnInit, OnDestroy {
+  @Input() token!: string;
+  @Input() customerId!: number;
+  @Input() siteId!: number;
+  @Output() openUser = new EventEmitter();
+  @Output() userMoved = new EventEmitter();
+  @Output() switchToWizard = new EventEmitter();
+  @Input() host!: string;
+
+  dataPending!: boolean;
+  moveInProgressUserId!: string;
+  users!: ListUser[];
+  dataSource!: MatTableDataSource<ListUser>;
+  displayedColumns = DISPLAYED_COLS;
+  moveUser: any;
+  moveUserIndex: any;
+  showMoveUserWizard = false;
+  moveUserPending = false;
+  private subscriptions: Subscription[] = [];
+
+  totalUsersCount: number = 0;
+
+  get form(): FormGroup {
+    return this.userService?.user?.form;
+  }
+
+  constructor(
+    public userService: UserService,
+    private apiService: APIService,
+    private apiWebexService: ApiWebexService,
+    private notifications: NotificationService,
+    public usersSearchService: UsersSearchService,
+    private dialog: MatDialog,
+  ) { }
+
+  ngOnInit(): void {
+    this.usersSearchService.setDefaultValues();
+    this.usersSearchService.customerId = this.customerId;
+    this.usersSearchService.siteId = this.siteId;
+    this.apiService.token = this.token;
+    this.apiWebexService.token = this.token;
+    this.apiService.apiUrl = this.host + '/dcp';
+    this.apiWebexService.apiUrl = this.host + '/webex';
+
+    this.getMigratedUsers();
+    const subscription = this.usersSearchService.foundUsers$.subscribe(
+      (users: ListUser[]) => {
+        this.initializeDataSource(users);
+      },
+    );
+    this.subscriptions.push(subscription);
+
+    console.log('users list paris 7773');
+  }
+
+  ngOnDestroy() {
+    if (this.subscriptions?.length) {
+      this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+  }
+
+  pageNumberChangeEvent(perPageNumber: number): void {
+    this.usersSearchService.pageSize = perPageNumber;
+    this.usersSearchService.pageIndex = 0;
+    this.runSearch();
+  }
+
+  closeMoveUserWizard(afterUserMove?: boolean): void {
+    this.moveUser = null;
+    this.moveUserIndex = null;
+    localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+    this.showMoveUserWizard = false;
+    this.switchToWizard.emit(false);
+    if (afterUserMove) {
+      this.getMigratedUsers();
+    }
+  }
+
+  pageEvent(event: PageEvent): void {
+    this.usersSearchService.pageSize = event.pageSize;
+    this.usersSearchService.pageIndex = event.pageIndex;
+    this.runSearch();
+  }
+
+  onUserClick(user: ListUser): void {
+    localStorage.setItem('isWebex', String(!!user.webexUUID));
+    if(user.webexUUID) {
+      localStorage.setItem('webexUUID', String(user.webexUUID));
+    }
+    this.openUser.emit(user);
+  }
+
+  moveUserToMT(user: ListUser, index: number): void {
+    if (user && user.siteId && user.userid) {
+      this.moveUserPending = true;
+      this.moveInProgressUserId = user.userid;
+      this.setStatusToUser(index, 'In Progress');
+      localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
+
+      const subscription = this.userService
+        .moveUserToMT(this.customerId, user)
+        .subscribe(
+          () => {
+            this.moveUser = null;
+            this.moveUserIndex = null;
+            this.getMigratedUsers();
+          },
+          () => {
+            this.removeUserInMigrationProgress();
+            this.setStatusToUser(index, 'Migration Error');
+          },
+        );
+      this.subscriptions.push(subscription);
+    }
+  }
+
+  moveUserToDI(user: ListUser, index: number): void {
+    if (user && user.siteId && user.webexUUID) {
+      this.moveUserPending = true;
+      this.moveInProgressUserId = user.userid;
+      this.users[index].status = 'In Progress';
+      localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
+
+      const subscription = this.userService
+        .moveUserToDI(this.customerId, user)
+        .subscribe(
+          () => {
+            this.removeUserInMigrationProgress();
+            this.setStatusToUser(index, 'Active');
+            this.users[index].webexUUID = '';
+            if (
+              this.usersSearchService.migratedUsers &&
+              this.usersSearchService.migratedUsers.length
+            ) {
+              this.usersSearchService.migratedUsers =
+                this.usersSearchService.migratedUsers.filter(
+                  (migratedUser: any) => migratedUser.userid !== user.email,
+                );
+            }
+          },
+          () => {
+            this.removeUserInMigrationProgress();
+            this.setStatusToUser(index, 'Migration Error');
+          },
+        );
+    }
+  }
+
+  private removeUserInMigrationProgress(): void {
+    localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+    this.moveInProgressUserId = '';
+    this.moveUserPending = false;
+  }
+
+  private setStatusToUser(index: number, status: string): void {
+    if (this.users && this.users[index]) {
+      this.users[index].status = status;
+      // if (status === 'Migrated') {
+      //   this.users[index].roleName = '';
+      //   this.users[index].isMigrated = true;
+      //   this.users[index].status = status;
+      // } else {
+      //   this.users[index].roleName = 'Dedicated Instance Calling user';
+      //   this.users[index].isMigrated = false;
+      //   this.users[index].status = status;
+      // }
+    }
+    this.dataSource = new MatTableDataSource(this.users);
+  }
+
+  private initializeDataSource(users: ListUser[]): void {
+    if (users?.length) {
+      // this.setRandomUserRole(users);
+      this.users = users;
+      // set total rows count for toolbar/pagination from server-side pagination when available
+      this.totalUsersCount = this.usersSearchService?.total || users.length;
+      this.setUserMigrationProgress();
+      this.usersSearchService.setMigratedPropToUsers(this.users);
+      this.dataSource = new MatTableDataSource(users);
+    }
+  }
+
+  private setUserRole(): void {
+    if (this.users?.length) {
+      this.users.forEach((user) => {
+        if (!user.isMigrated) {
+          user.roleName = 'Dedicated Instance Calling user';
+        }
+      });
+    }
+  }
+
+  private setRandomUserRole(users: ListUser[]): void {
+    const max = Math.round(
+      this.usersSearchService.pageSize - this.usersSearchService.pageSize / 4,
+    );
+    const min = Math.round(this.usersSearchService.pageSize / 2);
+    const randomAmount = Math.round(Math.random() * (max - min) + min);
+    const indexes = this.getArrayOfRandomUserIndexes(randomAmount);
+    indexes.forEach((index) => {
+      if (users[index]) {
+        users[index].roleName = 'Dedicated Instance Calling user';
+      }
+    });
+  }
+
+  private getArrayOfRandomUserIndexes(randomAmount: number): number[] {
+    const indexes = [];
+    while (randomAmount > 0) {
+      const index = Math.round(
+        Math.random() * (this.usersSearchService.pageSize - 1),
+      );
+      indexes.push(index);
+      randomAmount--;
+    }
+    return indexes;
+  }
+
+  private runSearch(): void {
+    this.dataPending = true;
+    this.usersSearchService.quickRegularUsersSearch().subscribe(
+      () => {
+        this.dataPending = false;
+      },
+      () => {
+        this.dataPending = false;
+        this.notifications.error('The data can not be received');
+      },
+    );
+  }
+
+  private setUserMigrationProgress(): void {
+    const userIdInMigration = localStorage.getItem(
+      LOCAL_STORAGE.USER_IN_MIGRATION,
+    );
+    if (userIdInMigration) {
+      const index = this.users.findIndex(
+        (user) => user.userid === userIdInMigration,
+      );
+      this.moveInProgressUserId = index > -1 ? this.users[index].userid : '';
+      this.moveUserPending = index > -1;
+    }
+  }
+
+  private getMigratedUsers(): void {
+    this.dataPending = true;
+    const searchParams = {
+      customerid: this.customerId,
+      siteid: this.siteId,
+      'cloud-only': 'true',
+    };
+    // this.usersSearchService.quickWebexUsersSearch(searchParams, true, MAX_INTEGER)
+    this.usersSearchService
+      .getMigratedUsers(this.customerId)
+      // this.usersSearchService.getMigratedWebexUsers(this.customerId)
+      .subscribe(
+        () => {
+          const userIdInMigration = localStorage.getItem(
+            LOCAL_STORAGE.USER_IN_MIGRATION,
+          );
+          if (
+            userIdInMigration &&
+            this.usersSearchService.migratedUsers.filter(
+              (migratedUser: any) => migratedUser.userid === userIdInMigration,
+            )
+          ) {
+            localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+          }
+          this.runSearch();
+        },
+        () => {
+          this.dataPending = false;
+          this.notifications.error('The data can not be received');
+        },
+      );
+  }
+
+  onMoveUser(user: ListUser, index: number, type: string, title: string): void {
+    const dialogRef = this.dialog.open(UserListConfirmDialogComponent, {
+      data: {
+        title: `Upgrade user ${user.userid} to ${title}?`,
+        message: `<p>By upgrading from Dedicated Instance, you may need to reassign directory numbers and lose calling services.</p>
+<p>Are you sure you want to continue?</p>`,
+        confirmButtonText: 'Yes, continue',
+      },
+    });
+    dialogRef.beforeClosed().subscribe((result: any) => {
+      if (result) {
+        switch (type) {
+          case 'QuickMove':
+            this.moveUserToMT(user, index);
+            break;
+          case 'MT':
+            this.moveUser = user;
+            this.moveUserIndex = index;
+            this.showMoveUserWizard = true;
+            this.switchToWizard.emit(true);
+            break;
+          case 'DI':
+            this.moveUserToDI(user, index);
+            break;
+        }
+      }
+    });
+  }
+
+  runMoveUserToMT(): void {
+    if (this.moveUser && this.moveUser.siteId && this.moveUser.userid) {
+      this.userService.moveUserPending = true;
+      this.moveInProgressUserId = this.moveUser.userid;
+      this.setStatusToUser(this.moveUserIndex, 'In Progress');
+      localStorage.setItem(
+        LOCAL_STORAGE.USER_IN_MIGRATION,
+        this.moveUser.userid,
+      );
+    }
+
+    const subscription = this.userService
+      .moveUserToMT(this.customerId, this.moveUser)
+      .subscribe(
+        () => {
+          this.userService.userMoved$.next(true);
+        },
+        () => {
+          this.removeUserInMigrationProgress();
+          this.setStatusToUser(this.moveUserIndex, 'Migration Error');
+        },
+      );
+
+    this.subscriptions.push(subscription);
+  }
+
+  searchUsers(token: string): void {
+    // if token is empty — restore current page datasource
+    if (!token) {
+      this.dataSource = new MatTableDataSource(this.users);
+      this.totalUsersCount = this.usersSearchService?.total || this.users.length;
+      return;
+    }
+
+    // fetch all users (server-side) and filter locally across the whole dataset
+    this.dataPending = true;
+    const subscription = this.usersSearchService.getAllRegularUsers()
+      .subscribe(
+        (allUsers: ListUser[]) => {
+          const tok = (token || '').toLowerCase();
+          const filtered = (allUsers || []).filter((user: ListUser) => {
+            const firstName = (user?.firstName || '').toLowerCase();
+            const lastName = (user?.lastName || '').toLowerCase();
+            const fullName = `${firstName} ${lastName}`.trim();
+            const email = (user?.email || '').toLowerCase();
+            return (
+              firstName.includes(tok) ||
+              lastName.includes(tok) ||
+              fullName.includes(tok) ||
+              email.includes(tok)
+            );
+          });
+          this.dataSource = new MatTableDataSource(filtered);
+          this.totalUsersCount = filtered.length;
+          this.dataPending = false;
+        },
+        () => {
+          this.dataPending = false;
+          this.notifications.error('The data can not be received');
+        },
+      );
+    this.subscriptions.push(subscription);
+  }
+}

package/projects/tuki/widgets/users-list/src/users-list.module.ts

@@ -0,0 +1,65 @@
+import { NgModule } from '@angular/core';
+import { UsersListComponent } from './users-list.component';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { MaterialModule } from './material.module';
+import { PaginationComponent } from './utils/pagination/pagination.component';
+import { UserService } from './services/user.service';
+import { APIService } from './services/api.service';
+import { EventsCommunicationService } from './services/events-communication.service';
+import { UsersSearchService } from './services/users-search.service';
+import { NotificationService } from './services/notification.service';
+import { RemoveKynFromIBMService } from './services/removeKynFromIBM.service';
+import { HttpClientModule } from '@angular/common/http';
+import { ApiWebexService } from './services/api-webex.service';
+import { AppLoaderComponent } from './utils/app-loader/app-loader';
+import { MoveUserWizardComponent } from './move-user-wizard/move-user-wizard.component';
+import { MoveUserStepperComponent } from './move-user-wizard/move-user-stepper/move-user-stepper.component';
+import { UserListConfirmDialogComponent } from './user-list-confirm-dialog/user-list-confirm-dialog.component';
+import { DnsService } from './services/dns.service';
+import { SiteSettingsService } from './services/site-settings.service';
+import { MoveUserService } from './services/move-user.service';
+import {
+  DevicesMoveUserWizardTabComponent
+} from './move-user-wizard/move-user-stepper/device-move-user-tab/devices-move-user-wizard-tab.component';
+import {
+  DeviceMoveUserWizardComponent
+} from './move-user-wizard/move-user-stepper/device-move-user/device-move-user-wizard.component';
+import { TableToolbarComponent } from './components/table-toolbar/table-toolbar.component';
+
+
+@NgModule({
+  declarations: [
+    UsersListComponent,
+    PaginationComponent,
+    AppLoaderComponent,
+    MoveUserWizardComponent,
+    MoveUserStepperComponent,
+    UserListConfirmDialogComponent,
+    DevicesMoveUserWizardTabComponent,
+    DeviceMoveUserWizardComponent,
+    TableToolbarComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    MaterialModule
+  ],
+  providers: [
+    UserService,
+    APIService,
+    EventsCommunicationService,
+    UsersSearchService,
+    NotificationService,
+    RemoveKynFromIBMService,
+    ApiWebexService,
+    DnsService,
+    SiteSettingsService,
+    MoveUserService
+  ],
+  exports: [UsersListComponent]
+})
+export class UsersListModule { }

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.css

@@ -0,0 +1,11 @@
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.2);
+  z-index: 200;
+}/*# sourceMappingURL=app-loader.component.css.map */

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["app-loader.component.scss","app-loader.component.css"],"names":[],"mappings":"AAAA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;EACA,YAAA;ACCJ","file":"app-loader.component.css"}

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.html

@@ -0,0 +1,7 @@
+<div class="overlay">
+  <mat-progress-spinner
+    class="page-spinner"
+    mode="indeterminate"
+    [diameter]="70"
+    strokeWidth="3"></mat-progress-spinner>
+</div>

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.component.scss

@@ -0,0 +1,17 @@
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.2);
+  z-index: 200;
+}
+
+// ::ng-deep {
+  .mat-progress-spinner circle, .mat-spinner circle {
+    stroke: #000000 !important;
+  }
+// }

package/projects/tuki/widgets/users-list/src/utils/app-loader/app-loader.ts

@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './app-loader.component.html',
+  styleUrls: ['./app-loader.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppLoaderComponent {
+  constructor() {
+  }
+
+}

package/projects/tuki/widgets/users-list/src/utils/common-functions.ts

@@ -0,0 +1,32 @@
+export const getSavableData = (model: any, exclude?: Array<string>) => {
+  let result = Object.keys(model);
+  if (exclude && exclude.length) {
+    result = result.filter(key => !exclude.some(item => item === key));
+  }
+  return result.reduce((result, key) => {
+    if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+      (result as any)[key] = model[key].map((item: any) => item.getSavableData());
+    } else if (model[key] instanceof Object && model[key].getSavableData) {
+      (result as any)[key] = model[key].getSavableData();
+    } else {
+      (result as any)[key] = model[key];
+    }
+    return result;
+  }, {});
+};
+
+export const filterOptions = (options: any[], query: string, shownValue?: string, field?: string) => {
+  if (!options) {
+    return [];
+  }
+  if (!query) {
+    return options;
+  }
+  return options.filter(option => {
+    return (
+      field ? String(option[field]).toLowerCase().includes(String(query).toLowerCase()) :
+        String(option).toLowerCase().includes(String(query).toLowerCase()) ||
+        (shownValue && shownValue === option)
+    );
+  });
+};

package/projects/tuki/widgets/users-list/src/utils/notifications/notification.component.html

@@ -0,0 +1,33 @@
+<!--
+
+<div class="notification-block" role="alert" aria-live="assertive">
+  <div class="notification"
+       *ngFor="let notification of list"
+       [ngClass]="{'error': notification.isError(), 'success': notification.isSuccess()}">
+
+    <div class="flex-box">
+      <div class="notification-icons-block">
+        <i *ngIf="notification.isError()" class="fa fa-exclamation-triangle"></i>
+        <i *ngIf="notification.isWarning()" class="fa fa-hand-paper-o"></i>
+        <i *ngIf="notification.isSuccess()" class="fa fa-check"></i>
+        <i *ngIf="notification.isInfo()" class="fa fa-info-circle"></i>
+      </div>
+      <div *ngIf="!isReadMore" class="message-block">
+        {{notification.message | truncate:[93]}}
+      </div>
+      <div *ngIf="isReadMore" class="message-block">
+        {{notification.message}}
+      </div>
+    </div>
+    <div class="read-more-error link clickable" *ngIf="notification.message && notification.message.length > 93"
+         (click)="readMore()">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>
+    <button
+      class="close"
+      mat-icon-button
+      matTooltip="{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}"
+      (click)="removeNotification(notification)">
+      <img class="notification-icon-close" src="assets/icons/close_icon_modal.svg" alt="">
+    </button>
+  </div>
+</div>
+-->

package/projects/tuki/widgets/users-list/src/utils/notifications/notification.component.scss

@@ -0,0 +1,84 @@
+@import '../../../styles/_variables';
+
+.notification-block {
+  right: 0;
+  top: 110px;
+  position: absolute;
+  width: 20%;
+  z-index: 100;
+
+  .read-more-error {
+    margin: 10px 13px 3px 0;
+    text-align: right;
+  }
+
+  .notification {
+    padding: 15px 0 10px 0;
+    margin-bottom: 18px;
+    color: $main-txt-color;
+    position: relative;
+    border-radius: 3px;
+    border-top: 1.5px solid $warning-border-color;
+    background: $warning-bg-color;
+    box-shadow: 0px 8px 12px 0px rgba(9, 30, 66, 0.15), 0px 0px 1px 0px rgba(9, 30, 66, 0.31);
+    width: 368px;
+    position: relative;
+
+    .notification-icons-block {
+      text-align: center;
+      width: 56px;
+    }
+    .message-block {
+      font-size: 14px;
+      font-family: $poppins-font !important;
+      word-break: break-word;
+      width: 270px;
+    }
+    .notification-icon-close {
+      height: 24px;
+    }
+
+    &.error {
+      background: #FFE9E9;
+      border-top: 1.5px solid #E16D6D;
+    }
+    &.success {
+      background: $success-bg-color;
+      border-top: 1.5px solid $success-border-color;
+    }
+    .fa-exclamation-triangle {
+      color: #E16D6D !important;
+    }
+    .fa-check {
+      color: #a0c37f !important;
+    }
+    .fa-info-circle, .fa-hand-paper-o {
+      color: #bdb89e !important;
+    }
+    .fa {
+      font-size: 20px;
+    }
+    .close {
+      position: absolute;
+      top: 2px;
+      right: -5px;
+      .fa {
+        font-size: 14px;
+      }
+    }
+    .fa {
+      margin: 0;
+      color: inherit;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .notification-block {
+    width: 50%;
+    min-width: 150px;
+  }
+
+}
+
+