@tuki-io/tuki-widgets 0.0.26 → 0.0.28

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

@@ -0,0 +1,93 @@
+<mat-stepper *ngIf="user?.moveType" (selectionChange)="onStepChange($event)" [linear]="isLinear" labelPosition="bottom" #stepper>
+    <mat-step>
+      <div class="step-title">Step 1: Select location</div>
+<!--      <form>-->
+        <ng-template matStepLabel>Select location</ng-template>
+        <mat-label class="mat-label">Phone number</mat-label>
+        <mat-radio-group
+          class="radio-group"
+          [(ngModel)]="user.moveType.phoneNumber"
+          name="phoneNumber" (change)="selectPhoneNumberMigrationType($event)">
+          <mat-radio-button class="radio-button" value="1" color="primary">Keep current number {{currentNumber}}</mat-radio-button>
+          <mat-radio-button class="radio-button" value="2" color="primary">Select a new number</mat-radio-button>
+
+          <div *ngIf="user.moveType.phoneNumber === '2'" class="select-container">
+            <mat-progress-spinner *ngIf="phoneNumberPending"
+                                  class="field-spinner" mode="indeterminate"
+                                  [diameter]="30"></mat-progress-spinner>
+
+            <mat-select class="select" placeholder="Select number" [(ngModel)]="user.newNumber"
+                        (selectionChange)="onPhoneNumberChange($event)">
+              <mat-option *ngFor="let option of dnsService.phoneNumbers" value="option">{{option}}</mat-option>
+            </mat-select>
+          </div>
+
+          <mat-radio-button class="radio-button" value="3" color="primary">Remove number</mat-radio-button>
+        </mat-radio-group>
+        <mat-label class="mat-label">Extension</mat-label>
+        <mat-radio-group class="radio-group" name="extension"
+          [(ngModel)]="user.moveType.extension">
+          <mat-radio-button class="radio-button" value="1" color="primary">Keep current extension</mat-radio-button>
+          <mat-radio-button class="radio-button" value="2" color="primary">Select a new extension</mat-radio-button>
+          <mat-form-field *ngIf="user.moveType.extension === '2'" appearance="outline">
+            <input matInput type="text" (change)="onExtensionCHange($event)"
+                   [(ngModel)]="user.newExtension"
+                   [placeholder]="'Enter extension'" />
+          </mat-form-field>
+
+          <mat-radio-button class="radio-button" value="3" color="primary">Remove extension</mat-radio-button>
+        </mat-radio-group>
+<!--      </form>-->
+      <div class="step-actions">
+        <button mat-button class="webex-btn btn-next" matStepperNext (click)="goNextStep(stepper)">Next</button>
+        <button mat-button class="webex-btn btn-cancel" (click)="cancel.emit()">Cancel</button>
+      </div>
+    </mat-step>
+    <!--<mat-step [aria-labelledby]="true ? 'disabled_af' : null">
+      <div class="step-title">Step 2: Device eligibility check</div>
+      <ng-template matStepLabel>Device eligibility check</ng-template>
+      <form></form>
+      <div class="step-actions">
+        <button mat-button class="webex-btn btn-next" matStepperNext (click)="goNextStep(stepper)">Next</button>
+        <button mat-button class="webex-btn btn-cancel" matStepperPrevious>Previous</button>
+      </div>
+    </mat-step>-->
+    <!--<mat-step [aria-labelledby]="true ? 'disabled_af' : null">
+      <div class="step-title">Step 3: Validation</div>
+      <form>
+        <ng-template matStepLabel>Validation</ng-template>
+        <mat-label class="mat-label">Validation Success!</mat-label>
+        <p class="validation-text">There is no issue for moving this user to the new location, $MTlocationname. Please be aware of the changes below once the user is being moved to the new location.</p>
+        <mat-label class="mat-label">Expected changes</mat-label>
+        <ul>
+          <li>Tablet device (TABAVICK) needs to be reconfigured with Webex App. User will receive an email with link to download.</li>
+          <li>Cisco 8875 (SEP751FC9BAB854) will not be migrated.</li>
+          <li>The user will be removed from Call Park Group.</li>
+          <li>If the device is using the location level device settings, the device will pick up the new location device settings once the user is moved. If some of the device settings are overwritten at the user level, these user level settings will be retained and the rest of the settings will be picked up at the higher level (organization or location) settings.</li>
+          <li>If the current location has a different recording service from the one of the new location, the recording of this user may be lost after moving location.</li>
+        </ul>
+        <div>
+          <mat-checkbox class="checkbox" checked="true" color="primary">I confirm that I understand these conditions. I acknowledge the changes.</mat-checkbox>
+        </div>
+      </form>
+      <div class="step-actions">
+        <button mat-button class="webex-btn btn-next" matStepperNext (click)="goNextStep(stepper)">Next</button>
+        <button mat-button class="webex-btn btn-cancel" matStepperPrevious>Previous</button>
+      </div>
+    </mat-step>-->
+    <mat-step>
+      <div class="step-title">Step 2: Result</div>
+      <ng-template matStepLabel>Result</ng-template>
+      <form>
+        <mat-label class="mat-label">Moving user has been successfully initiated!</mat-label>
+        <p class="validation-text">
+          The user will be moved to the new location, $MTlocationname.
+          <br>
+          For the progress of move, please visit the <a class="form-link" href="#">user details</a>.
+        </p>
+      </form>
+      <div class="step-actions">
+        <button mat-button class="webex-btn btn-done" matStepperNext (click)="runMoveUser.emit()">Done</button>
+      </div>
+    </mat-step>
+  </mat-stepper>

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

@@ -0,0 +1,95 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { DnsService } from '../../services/dns.service';
+import { MatStepper } from "@angular/material/stepper";
+// for test only
+const LOCATION = 'Y2lzY29zcGFyazovL3VzL0xPQ0FUSU9OLzE2YjY0NjljLTBjZmQtNDJjMS1iOWJjLTUyN2FlZTNhN2RlOQ';
+@Component({
+  selector: 'app-move-user-stepper',
+  templateUrl: './move-user-stepper.component.html',
+  styleUrls: ['./move-user-stepper.component.css']
+
+})
+export class MoveUserStepperComponent implements OnInit {
+  @Input()
+  user: any;
+  @Input()
+  customerId!: number;
+  @Output()
+  runMoveUser = new EventEmitter();
+  @Output()
+  cancel = new EventEmitter();
+  isLinear = true;
+  phoneNumberPending = false;
+
+  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 '';
+  }
+
+  constructor(
+    public dnsService: DnsService
+  ) {
+  }
+
+  ngOnInit() {
+    if (this.user) {
+      this.user.moveType = {
+        phoneNumber: '1',
+        extension: '1'
+      }
+    }
+  }
+
+  onStepChange(event: any): void {
+    // alert('step change ' + event.selectedIndex);
+    /*if (event.selectedIndex === 4) {
+      this.runMoveUser.emit();
+    }*/
+  }
+
+  selectPhoneNumberMigrationType(event: any): void {
+    if (event.value && event.value === '2') {
+      this.getPhoneNumbers();
+    }
+  }
+
+  onPhoneNumberChange(event: any): void {
+    this.user.newNumber
+  }
+
+  onExtensionCHange(event: any): void {
+    this.user.newExtension
+  }
+
+  isFieldAvailable(type: string, value: string): boolean {
+    if (this.user?.moveType) {
+      return this.user.moveType[type] && this.user.moveType[type] === value;
+    }
+    return false;
+  }
+
+  getPhoneNumbers(): void {
+    this.phoneNumberPending = true;
+    this.dnsService.fetchPhoneNumbers(this.customerId, LOCATION)
+      .subscribe(() => {
+        this.phoneNumberPending = false;
+      }, () => this.phoneNumberPending = false);
+  }
+
+  goNextStep(stepper: MatStepper) {
+
+    /*const currentStep = stepper.selectedIndex;
+
+    if (currentStep === 1) { stepper.selectedIndex = 3; }
+    // else if (currentStep === 3) { stepper.selectedIndex = 0; }
+
+    [
+      stepper.steps.get(1),
+      stepper.steps.get(2)
+
+    ].map(step => step ? step.completed = true : undefined);*/
+  }
+}

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

@@ -0,0 +1,38 @@
+.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');
+}

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

@@ -0,0 +1,11 @@
+<app-loader *ngIf="dataPending"></app-loader>
+<div class="move-user-stepper-container">
+    <header class="move-user-header">
+        <div class="move-user-header__title">Move User</div>
+        <div class="move-user-header__close">
+          <span class="app-icon icon-close" (click)="onClose()"></span>
+        </div>
+    </header>
+    <app-move-user-stepper *ngIf="user" [customerId]="customerId" [user]="user" (cancel)="onClose()"
+                           (runMoveUser)="onRunMoveUser()"></app-move-user-stepper>
+</div>

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

@@ -0,0 +1,34 @@
+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.css']
+})
+export class MoveUserWizardComponent {
+  @Input()
+  user: any;
+  @Input()
+  customerId!: number;
+  @Output()
+  closeMoveUserWizard = 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,13 @@
+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';
+  }
+}

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, ' '));
+  }
+
+}

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

@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+import { API } from '../app.constants';
+import { APIService } from './api.service';
+import { map } from 'rxjs/operators';
+import * as Big from 'big.js';
+import { Observable } from 'rxjs';
+import { ApiWebexService } from '../services/api-webex.service';
+import { AvailablePhoneNumberRangeInterface, DnRangeType } from '../classes/line';
+
+
+@Injectable()
+export class DnsService {
+  availableNumbers = {};
+  availableDidPatternsMappedToDn!: any;
+  phoneNumbers: string[] = [];
+
+  constructor(
+    private apiService: APIService,
+    private apiWebexService: ApiWebexService
+  ) {
+
+  }
+  public getNumberRange(siteId: string, routePartition: string, withdids?: boolean, from?: string, pageSize?: number): any {
+    // @ts-ignore
+    if (this.availableNumbers[routePartition]?.length) {
+      return new Observable<any>(observer => {
+        // @ts-ignore
+        observer.next(this.availableNumbers[routePartition]);
+      });
+    }
+
+    this.availableDidPatternsMappedToDn = {};
+    pageSize = pageSize ? pageSize : 20;
+    const params = {dntype: DnRangeType.extension, routepartition: routePartition, size: pageSize, page: 0};
+    if (withdids) {
+      // @ts-ignore
+      params['withdids'] = 'true';
+    }
+    if (from) {
+      // @ts-ignore
+      params['from'] = from;
+    }
+    // @ts-ignore
+    this.availableNumbers[routePartition] = this.availableNumbers[routePartition] || [];
+
+    return this.apiService.fetch(API.AVAILABLE_DN_IN_RANGES.replace(':siteId', siteId), params)
+      .pipe(map((res: any) => {
+          res.availableNumberList.forEach((availableNumber: AvailablePhoneNumberRangeInterface) => {
+            this.setAvailableDidMappedToDn(availableNumber);
+            // @ts-ignore
+            this.availableNumbers[routePartition] = [...this.availableNumbers[routePartition], ...this.getUnwrapNumberRange(availableNumber)];
+          });
+        })
+      )
+      // .pipe(this.handleError(true, false));
+  }
+
+  public setAvailableDidMappedToDn(availableNumber: any): void {
+    if (availableNumber.unUsedNumbersWithDids && availableNumber.unUsedNumbersWithDids.length) {
+
+      availableNumber.unUsedNumbersWithDids.forEach((numberWithDids: any) => {
+        const dn = numberWithDids['unUsedNumber'];
+        this.availableDidPatternsMappedToDn[dn] = [{}];
+        if (numberWithDids['translationPatternList'] && numberWithDids['translationPatternList'].length > 0) {
+          this.availableDidPatternsMappedToDn[dn] = numberWithDids['translationPatternList'];
+          this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = [{}];
+          if (numberWithDids['mappedDids'] && numberWithDids['mappedDids'].length > 0) {
+            this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = numberWithDids['mappedDids'];
+          }
+        }
+        this.availableDidPatternsMappedToDn[dn][0]['vm'] = numberWithDids['vm'];
+      });
+    }
+  }
+
+  public getUnwrapNumberRange(availableNumber: any): string[] {
+    let unwrapNumberRange = this.unwrapNumberRange(availableNumber.phoneNumberRange.from, availableNumber.phoneNumberRange.to)
+      .map((unwrappedNumber: string) => {
+        const dn = availableNumber.phoneNumberRange.prefix + unwrappedNumber;
+        let str = dn;
+        if (this.availableDidPatternsMappedToDn[dn] && this.availableDidPatternsMappedToDn[dn].length > 0) {
+          if (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] && this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 0) {
+            str += '        DID:  ' + (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 1 ? 'multiple' :
+              this.availableDidPatternsMappedToDn[dn][0]['mappedDids'][0]);
+          }
+          if (this.availableDidPatternsMappedToDn[dn][0]['vm']) {
+            str += '        In Use - VM';
+          }
+        }
+        return str;
+      });
+    unwrapNumberRange = unwrapNumberRange.filter((unwrappedNumber: string) => !availableNumber.usedNumbers.includes(unwrappedNumber));
+    return unwrapNumberRange;
+  }
+
+  public unwrapNumberRange(start: string, end: string): string[] {
+    const regExp = /(^0+)/;
+    let leadingZeros = '';
+    const matches = start.match(regExp);
+    if (matches) {
+      leadingZeros = matches[1];
+    }
+    const startNumeric = new Big(start);
+    const endNumeric = new Big(end);
+    // @ts-ignore
+    return Array.from({length: (endNumeric.minus(startNumeric).plus(new Big(1)).toFixed(0))}, (v, k) => {
+      const number = String(startNumeric.plus(new Big(k)).toFixed(0));
+      if ((leadingZeros + number).length > start.length) {
+        leadingZeros = leadingZeros.substr(1);
+      }
+      return leadingZeros + number;
+    });
+  }
+
+  public fetchPhoneNumbers(customerId: number, locationId: string): any {
+    const params = {
+      available: true,
+      numberType: 'NUMBER'
+    };
+    return this.apiWebexService.fetch(API.PHONE_NUMBERS.replace(':customerId', String(customerId)).replace(':locationId', locationId), params)
+      .pipe(map((result: any) => {
+        if (result?.length) {
+          this.phoneNumbers = result.map((item: any) => item.phoneNumber);
+        }
+        return result;
+      }));
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class EventsCommunicationService {
+  public onSuccessfulLoginEvent = new Subject();
+
+  constructor() {
+  }
+
+}

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

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { Notification } from '../classes/notification';
+import { Subject } from 'rxjs';
+const SUCCESS_TIME = 5000;
+const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
+const INACTIVE_SESSION = 'SESSION_INACTIVE';
+
+@Injectable()
+export class NotificationService {
+
+  public listChange = new Subject();
+
+  private max = 0;
+  private list: Notification[] = [];
+
+  constructor(
+  ) {
+  }
+
+  error(message: string, ttl?: number): void {
+    this.notify('error', message, ttl);
+  }
+
+  success(message: string, ttl?: number): void {
+    this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
+  }
+
+  warning(message: string, ttl?: number): void {
+    this.notify('warning', message, ttl);
+  }
+
+  info(message: string, ttl?: number): void {
+    this.notify('info', message, ttl);
+  }
+  private notify(type: string, message: string, ttl?: number): void {
+    const found = this.list.find((n: Notification) => n.message === message);
+    if (found) {
+      this.remove(found);
+    }
+    const notification = new Notification({
+      id: ++this.max,
+      type, message, ttl
+    });
+    if (notification.ttl > 0) {
+      notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
+    }
+    this.list.push(notification);
+    this.listChange.next(this.list);
+  }
+
+  remove(notification: Notification, auto?: boolean): void {
+    if (!auto && notification.timerId) {
+      // clear timeout in case of manual remove
+      clearInterval(notification.timerId);
+    }
+    this.list = this.list.filter(n => n.id !== notification.id);
+    this.listChange.next(this.list);
+  }
+
+  private removeInactiveSessionError(): void {
+    if (!this.list || !this.list.length) {
+      return;
+    }
+    this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
+    this.listChange.next(this.list);
+  }
+
+}

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

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { CUCMS_TO_IGNORE, CUCS_TO_IGNORE } from '../app.constants';
+
+@Injectable()
+export class RemoveKynFromIBMService {
+  constructor() {
+  }
+
+
+  removeCUCMS(date: any, customerId: number) {
+    if (customerId === 8) {
+      return date.filter((val: any) => !CUCMS_TO_IGNORE.includes(Math.round(val.cucmId)));
+    }
+    return date;
+  }
+
+  removeCUCS(date: any, customerId: number) {
+    if (customerId === 8) {
+      return date.filter((val: any) => !CUCS_TO_IGNORE.includes(Math.round(val.cucId)));
+    }
+    return date;
+  }
+
+
+}