@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/users-list/src/move-user-wizard/move-user-stepper/move-user-stepper.component.scss

@@ -0,0 +1,249 @@
+// :host {
+  .mat-stepper-horizontal {
+    margin-top: 8px;
+
+    height: fit-content;
+    max-height: 750px;
+
+    margin: 0 auto;
+    width: 70%;
+
+    background-color: transparent;
+
+    .mat-horizontal-stepper-header-container {
+      margin: 0 auto;
+      width: 800px;
+    }
+    .mat-step-icon {
+      width: 28px;
+      height: 28px;
+
+      border: 3px solid hsl(0deg 0% 50.2%);
+    }
+    .mat-step-icon-selected {
+      background-color: hsl(0deg 0% 77.65%) !important;
+      border-color: hsl(211.8deg 66.67% 29.41%);
+    }
+    .mat-step-icon-state-number {
+      background-color: white;
+    }
+    .mat-step-icon-state-edit {
+      background-color: hsl(210deg 84.82% 43.92%);
+      border-color: hsl(210deg 84.82% 43.92%);
+    }
+    .mat-step-header .mat-step-icon-state-done {
+      background-color: hsl(210deg 84.82% 43.92%);
+      border-color: hsl(210deg 84.82% 43.92%);
+    }
+    .mat-step-icon-content {
+      display: none;
+    }
+    .mat-stepper-label-position-bottom
+      .mat-horizontal-stepper-header:not(:first-child)::before,
+    [dir="rtl"]
+      .mat-stepper-label-position-bottom
+      .mat-horizontal-stepper-header:not(:last-child)::before,
+    .mat-stepper-label-position-bottom
+      .mat-horizontal-stepper-header:not(:last-child)::after,
+    [dir="rtl"]
+      .mat-stepper-label-position-bottom
+      .mat-horizontal-stepper-header:not(:first-child)::after {
+      border-top-width: 3px !important;
+    }
+    .mat-horizontal-stepper-header::before,
+    .mat-horizontal-stepper-header::after,
+    .mat-stepper-horizontal-line {
+      border-top-color: hsl(210deg 84.82% 43.92%) !important;
+      border-top-width: 3px !important;
+      border-top-style: solid !important;
+    }
+    .mat-horizontal-stepper-header[aria-selected="true"]
+      ~ .mat-stepper-horizontal-line,
+    .mat-horizontal-stepper-header[aria-selected="true"]
+      ~ .mat-horizontal-stepper-header::before,
+    .mat-horizontal-stepper-header[aria-selected="true"]
+      ~ .mat-horizontal-stepper-header::after {
+      border-top-width: 3px !important;
+      background-color: hsl(0deg 0% 48.24%) !important;
+      border-top-color: hsl(0deg 0% 48.24%) !important;
+    }
+  }
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] {
+    pointer-events: none !important;
+    cursor: not-allowed;
+  }
+
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] .mat-step-icon,
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] .mat-step-label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  ::ng-deep .mat-form-field-infix {
+    padding: 0 !important;
+    width: 100%;
+  }
+  ::ng-deep .mat-form-field-appearance-outline {
+    .mat-input-element {
+      height: 35px;
+      width: 100%;
+      line-height: 35px;
+      margin: 5px 0 0 0;
+    }
+  }
+  ::ng-deep .mat-form-field {
+    width: 350px;
+  }
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] {
+    pointer-events: none !important;
+    cursor: not-allowed;
+  }
+
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] .mat-step-icon,
+  ::ng-deep .mat-step-header[aria-labelledby="disabled_af"] .mat-step-label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .mat-mdc-form-field {
+    margin-top: 16px;
+  }
+
+  .mat-label {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 1rem 0;
+  }
+
+  .step-title {
+    font-size: 28px;
+    font-weight: bold;
+
+    margin: 0.5rem 0 1.5rem 2rem;
+  }
+
+  .validation-text {
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  ul {
+    padding: 0.5rem 2rem;
+
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  // .devices-move-user-box {
+  //   background-color: white;
+  //   padding: 2.5rem;
+  //   min-height: 350px;
+  //   border-radius: 0.5rem;
+  // }
+
+  .devices-move-user-box {
+    background-color: white;
+    padding: 2.5rem;
+    padding: 1rem 2.5rem;
+    min-height: 350px;
+    border-radius: 0.5rem;
+  }
+  .user-select-location-box {
+    background-color: white;
+    padding: 2.5rem;
+    height: 350px;
+    border-radius: 0.5rem;
+  }
+  .form-link {
+    text-decoration: none;
+    color: rgb(0, 123, 255);
+  }
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    margin: 15px 0;
+    align-items: flex-start;
+  }
+  .radio-button {
+    margin: 0.5rem 0;
+  }
+  .select {
+    width: 350px;
+
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+
+    border: 1px solid #a0a0a0;
+    border-radius: 0.5rem;
+  }
+  .step-actions {
+    display: flex;
+    flex-flow: row-reverse;
+
+    margin-top: 2rem;
+
+    gap: 1rem;
+  }
+  .webex-btn {
+    border: 1px solid black;
+    border-radius: 1rem;
+
+    cursor: pointer;
+
+    gap: 1rem;
+  }
+  .btn-next {
+    background-color: black;
+    color: white;
+  }
+  .btn-cancel,
+  .btn-done {
+    background-color: white;
+    color: black;
+  }
+  .select-container {
+    position: relative;
+    width: 100%;
+    max-width: 300px;
+
+    .mat-progress-spinner {
+      position: absolute;
+      left: 45%;
+      top: 35px;
+    }
+  }
+  .invisible-next-btn {
+    height: 1px;
+    width: 1px;
+  }
+  .mat-error {
+    margin: 0px 0 15px 0;
+  }
+  mat-label {
+    display: block;
+  }
+  .btn-next {
+    min-width: 80px;
+  }
+  .mat-button-disabled {
+    background-color: #bbbbbb;
+    color: white;
+    border: 1px solid grey;
+    cursor: default !important;
+  }
+  .move-user-tab-content-box {
+    background-color: white;
+    min-height: 350px;
+    border-radius: 0.5rem;
+    box-sizing: border-box;
+    padding: 25px;
+  }
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    & input {
+      height: fit-content !important;
+    }
+  }
+// }

package/projects/tuki/widgets/users-list/src/move-user-wizard/move-user-stepper/move-user-stepper.component.ts

@@ -0,0 +1,206 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { DnsService } from '../../services/dns.service';
+import { MatStepper } from "@angular/material/stepper";
+import { UserService } from '../../services/user.service';
+import { AppLocation } from '../../classes/app-location';
+import { SiteSettingsService } from '../../services/site-settings.service';
+import { filterOptions } from '../../utils/common-functions';
+import { MigrationData, PrepareMigrationBody, PrepareMigrationData } from '../../classes/move-user';
+import { MoveUserService } from '../../services/move-user.service';
+import { NotificationService } from '../../services/notification.service';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+// for test only
+const LOCATION = 'Y2lzY29zcGFyazovL3VzL0xPQ0FUSU9OLzE2YjY0NjljLTBjZmQtNDJjMS1iOWJjLTUyN2FlZTNhN2RlOQ';
+
+@Component({
+  selector: 'app-move-user-stepper',
+  templateUrl: './move-user-stepper.component.html',
+  styleUrls: ['./move-user-stepper.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MoveUserStepperComponent implements OnInit {
+  @ViewChild('nextAfterMoveBtn') nextAfterMoveBtn: any;
+  @Output()
+  done = new EventEmitter();
+  @Input()
+  user: any;
+  @Input()
+  customerId!: number;
+  @Output()
+  runMoveUser = new EventEmitter();
+  @Output()
+  cancel = new EventEmitter();
+  isLinear = false;
+  phoneNumberPending = false;
+  stepper!: MatStepper;
+  filteredLocations: AppLocation[] = [];
+  filteredPhoneNumbers: any;
+  dataPending = false;
+
+  get moveUserPending(): boolean {
+    return this.userService.moveUserPending;
+  }
+
+  get currentNumber(): string {
+    if (this.user?.devices?.length && this.user.devices[0]?.lineAssociations && this.user.devices[0].lineAssociations[0]) {
+      return this.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber;
+    }
+    return '';
+  }
+
+  get locations(): AppLocation[] {
+    return this.siteSettingsService.locations;
+  }
+
+  get prepareMigrationData(): PrepareMigrationData {
+    return this.moveUserService.prepareMigrationData;
+  }
+
+  constructor(
+    public dnsService: DnsService,
+    public userService: UserService,
+    public siteSettingsService: SiteSettingsService,
+    private notificationService: NotificationService,
+    public moveUserService: MoveUserService
+  ) {
+  }
+
+  ngOnInit() {
+    this.moveUserService.prepareMigrationData = new PrepareMigrationData();
+    this.getData();
+  }
+
+  displayLocation(location?: AppLocation): string {
+    return location?.name || '';
+  }
+
+  onLocationAutocomplete(event: any): void {
+    const value = (event.target as HTMLInputElement).value;
+
+    if (this.locations?.length) {
+      this.filteredLocations = filterOptions(this.locations, value || '', '', 'name');
+    }
+  }
+
+  onNumberAutocomplete(): void {
+    if (this.dnsService.phoneNumbers?.length) {
+      this.filteredPhoneNumbers = filterOptions(this.dnsService.phoneNumbers, this.prepareMigrationData.newPhoneNumber);
+    }
+  }
+
+  onMoveUser(stepper: MatStepper): void {
+    this.stepper = stepper;
+    this.runMoveUser.emit();
+  }
+
+  onStepChange(event: any): void {
+  }
+
+  selectPhoneNumberMigrationType(event: any): void {
+    if (event.value && event.value === '2') {
+      this.getPhoneNumbers();
+    }
+    this.moveUserService.prepareMigrationData.removePhoneNumber = event.value && event.value === '3';
+  }
+
+  selectExtensionMigrationType(event: any): void {
+    this.moveUserService.prepareMigrationData.removeExtension = event.value && event.value === '3';
+  }
+
+  onPhoneNumberChange(event: any): void {
+    console.log('new phone number = ', this.prepareMigrationData.newPhoneNumber);
+  }
+
+  onLocationChange(event: MatAutocompleteSelectedEvent): void {
+    this.moveUserService.prepareMigrationData.newLocation = event.option.value;
+    this.moveUserService.resetMigrationDataForNewLocation();
+
+    if (this.prepareMigrationData.moveType.phoneNumber === '2') {
+      this.getPhoneNumbers();
+    }
+    this.getPrepareUserData();
+  }
+
+  onExtensionChange(event: any): void {
+    console.log('new newExtension = ', this.prepareMigrationData.newExtension);
+  }
+
+  getPhoneNumbers(): void {
+    if (!this.prepareMigrationData.newLocation?.id) {
+      return;
+    }
+    this.phoneNumberPending = true;
+    this.dnsService.fetchPhoneNumbers(this.customerId, this.prepareMigrationData.newLocation.id)
+      .subscribe(() => {
+        this.phoneNumberPending = false;
+        this.filteredPhoneNumbers = this.dnsService.phoneNumbers.slice();
+      }, () => this.phoneNumberPending = false);
+  }
+
+  isNextFromSelectLocationDisabled(): boolean {
+    if (!this.prepareMigrationData?.newLocation?.id || !this.prepareMigrationData.entityId) {
+      return true;
+    }
+    if (this.prepareMigrationData.moveType.phoneNumber === '2' && !this.prepareMigrationData.newPhoneNumber) {
+      return true;
+    }
+    if (this.prepareMigrationData.moveType.extension === '2' && !this.prepareMigrationData.newExtension) {
+      return true;
+    }
+    return false;
+  }
+
+  goNextStep(stepper: MatStepper) {
+
+  }
+
+  startMigration(): void {
+    const migrationData = new MigrationData(this.prepareMigrationData);
+    this.dataPending = true;
+    this.moveUserService.startMigration(migrationData)
+      .subscribe((result: any) => {
+        this.dataPending = false;
+        if (this.nextAfterMoveBtn?._elementRef?.nativeElement) {
+          this.nextAfterMoveBtn._elementRef.nativeElement.click();
+        }
+      }, () => {
+        this.dataPending = false;
+      })
+  }
+
+  getData(): void {
+    if (!this.user) {
+      return;
+    }
+    this.dataPending = true;
+    this.siteSettingsService.getLocations(this.customerId)
+      .subscribe(() => {
+        if (this.locations?.length) {
+          this.filteredLocations = this.locations.slice();
+        }
+        this.dataPending = false;
+      }, () => this.dataPending = false)
+  }
+
+  private getPrepareUserData() {
+    if (this.prepareMigrationData?.newLocation?.id) {
+      this.moveUserService.setOriginPrepareMigrationData();
+      const prepareMigrationBody = new PrepareMigrationBody(this.user, this.customerId, this.prepareMigrationData.newLocation.id);
+      this.moveUserService.prepareMigrationData.pending = true;
+      this.moveUserService.fetchPrepareMigrationData(prepareMigrationBody)
+        .subscribe(() => {
+
+        }, () => {
+          this.moveUserService.prepareMigrationData.pending = false;
+          this.notificationService.error('Move user attempt is failed');
+        });
+    }
+
+  }
+
+  private resetMoveTypePhoneNUmber(): void {
+    this.dnsService.phoneNumbers = [];
+  }
+
+}

package/projects/tuki/widgets/users-list/src/move-user-wizard/move-user-wizard.component.html

@@ -0,0 +1,12 @@
+<app-loader *ngIf="dataPending"></app-loader>
+<div class="move-user-stepper-container">
+    <header class="move-user-header">
+        <div class="move-user-header__title">Upgrade User {{user.userid}}</div>
+        <div class="move-user-header__close">
+          <span class="app-icon icon-white-close" (click)="onClose()"></span>
+        </div>
+    </header>
+    <app-move-user-stepper *ngIf="user" [customerId]="customerId"
+                           [user]="user" (cancel)="onClose()" (done)="done.emit()"
+                           (runMoveUser)="onRunMoveUser()"></app-move-user-stepper>
+</div>

package/projects/tuki/widgets/users-list/src/move-user-wizard/move-user-wizard.component.scss

@@ -0,0 +1,41 @@
+.move-user-stepper-container {
+}
+
+.move-user-header {
+    background-color: hsl(210deg 84.82% 43.92%);
+
+    height: 45px;
+    padding: 1rem 1.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: white;
+
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.move-user-header__close {
+    cursor: pointer;
+
+    & i {
+        font-size: 25px;
+        font-weight: 100;
+    }
+}
+.app-icon {
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.icon-close {
+  background-image: url('../assets/icons/close_icon_modal.svg');
+}
+.icon-white-close {
+  background-image: url('../assets/icons/white-close-icon.svg');
+}

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

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { DnsService } from '../services/dns.service';
+
+
+@Component({
+    selector: 'app-move-user-wizard',
+    templateUrl: './move-user-wizard.component.html',
+    styleUrls: ['./move-user-wizard.component.scss']
+})
+export class MoveUserWizardComponent {
+  @Input()
+  user: any;
+  @Input()
+  customerId!: number;
+  @Output()
+  closeMoveUserWizard = new EventEmitter();
+  @Output()
+  done = new EventEmitter();
+  @Output()
+  runMoveUser = new EventEmitter();
+  dataPending = false;
+
+    constructor(
+      public dnsService: DnsService
+    ) {
+
+    }
+
+    onClose(): void {
+      this.closeMoveUserWizard.emit();
+    }
+
+    onRunMoveUser(): void {
+      this.runMoveUser.emit();
+    }
+}

package/projects/tuki/widgets/users-list/src/services/api-webex.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { APIService } from './api.service';
+
+
+@Injectable()
+export class ApiWebexService extends APIService {
+  constructor(httpClient: HttpClient) {
+    super(httpClient);
+    //this.apiUrl = window.location.protocol + "//"+ window.location.hostname + environment.apiAuthUrl;
+    this.apiUrl = 'https://webex.car-west.net/webex';
+    // this.apiUrl = 'https://staging.tuki.io/webex';
+  }
+}

package/projects/tuki/widgets/users-list/src/services/api.service.ts

@@ -0,0 +1,90 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { TableDataInterface } from '../classes/table-data';
+import { Observable } from 'rxjs';
+
+
+
+@Injectable()
+export class APIService {
+
+  apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+
+  public token: any;
+  constructor(
+    private httpClient: HttpClient
+  ) {
+  }
+
+  fetch(url: string, params = {}, cache?: boolean) {
+    const headers = this.getHeaders(cache);
+    return this.httpClient.get(this.apiUrl + url, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  post(url: string, body: any, params = {}): any {
+    body = body || null;
+    const headers = this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {params: this.prepareEncodedParams(params), headers});
+  }
+
+  // use when response extended data is necessary:
+  postExtended(url: string, body = null, params = {}, headers = {}) {
+    headers = headers || this.getHeaders();
+    return this.httpClient.post(this.apiUrl + url, body, {
+      headers,
+      observe: 'response',
+      params: this.prepareEncodedParams(params)
+    });
+  }
+
+  put(url: string, body = null, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.put(this.apiUrl + url, body, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  delete(url: string, params = {}) {
+    const headers = this.getHeaders();
+    return this.httpClient.delete(this.apiUrl + url, {headers, params: this.prepareEncodedParams(params)});
+  }
+
+  fetchPagination(url: string, pageSize: number, pageNumber: number, additionalParams = {}, cache?: boolean): Observable<TableDataInterface> {
+    const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+    const params = Object.assign(copyAdditionalParams, {size: pageSize.toString(), page: pageNumber.toString()});
+    return this.fetch(url, params, cache) as Observable<TableDataInterface>;
+  }
+
+  private prepareEncodedParams(params: any) {
+    const result: any = {};
+
+    if (!params) {
+      return {};
+    }
+    for (const key of Object.keys(params)) {
+      if (params[key]) {
+        const stringParam = params[key].toString();
+        result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+      }
+    }
+    return result;
+  }
+
+  private getHeaders(cache?: boolean): HttpHeaders {
+    let headers = new HttpHeaders();
+    if (cache) {
+      headers = headers.append('_Cache', 'true ');
+    }
+    const token = this.token || this.getParameterByName('token');
+    headers = headers.append('Authorization', 'Bearer '+ token);
+    return headers;
+  }
+
+  private getParameterByName(name: any, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+      results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  }
+
+}