@tuki-io/tuki-widgets 0.0.76 → 0.0.78

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

@@ -1,222 +0,0 @@
-<app-loader *ngIf="prepareMigrationData.pending || moveUserPending || dataPending"></app-loader>
-<div id="move-user-stepper">
-  <mat-stepper *ngIf="prepareMigrationData?.moveType" [linear]="isLinear" labelPosition="bottom" #stepper>
-    <mat-step>
-      <div class="step-title">Step 1: Select location</div>
-      <!--      <form>-->
-      <ng-template matStepLabel>Select location</ng-template>
-      <form>
-        <div class="move-user-tab-content-box">
-          <mat-label class="mat-label">Select a new location</mat-label>
-          <mat-form-field class="app-autocomplete-input" appearance="outline">
-            <input placeholder="Select location" [matAutocomplete]="auto" matInput
-                   (input)="onLocationAutocomplete($event)"/>
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayLocation"
-                              (optionSelected)="onLocationChange($event)">
-              <mat-option *ngFor="let location of filteredLocations" [value]="location">
-                {{ location.name }}
-              </mat-option>
-            </mat-autocomplete>
-          </mat-form-field>
-          <div *ngIf="!dataPending && !locations.length" class="mat-error">
-            Locations are not available
-          </div>
-
-          <ng-container *ngIf="prepareMigrationData?.newLocation?.id">
-            <mat-label class="mat-label">Phone number</mat-label>
-            <mat-radio-group class="radio-group" name="moveTypePhoneNumber"
-                             [(ngModel)]="prepareMigrationData.moveType.phoneNumber" name="phoneNumber"
-                             (change)="selectPhoneNumberMigrationType($event)">
-              <mat-radio-button
-                class="radio-button"
-                value="1"
-                color="primary">
-                Keep current number
-                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}
-              </mat-radio-button>
-              <mat-radio-button
-                class="radio-button"
-                value="2"
-                color="primary"
-                [disabled]="!prepareMigrationData.newLocation?.id">
-                Select a new number
-              </mat-radio-button>
-
-              <div *ngIf="prepareMigrationData.moveType.phoneNumber === '2'" class="select-container">
-                <mat-progress-spinner *ngIf="phoneNumberPending" class="field-spinner" mode="indeterminate"
-                                      [diameter]="30"></mat-progress-spinner>
-
-                <mat-form-field class="app-autocomplete-input" appearance="outline">
-                  <input placeholder="Select number" [(ngModel)]="prepareMigrationData.newPhoneNumber"
-                         [matAutocomplete]="autoPh" matInput name="newPhoneNumber"
-                         (input)="onNumberAutocomplete()"/>
-                  <mat-autocomplete #autoPh="matAutocomplete" (optionSelected)="onPhoneNumberChange($event)">
-                    <mat-option *ngFor="let number of filteredPhoneNumbers" [value]="number">
-                      {{ number }}
-                    </mat-option>
-                  </mat-autocomplete>
-                </mat-form-field>
-                <div *ngIf="!phoneNumberPending && !dnsService.phoneNumbers?.length" class="mat-error">
-                  Phone numbers are not available for this location
-                </div>
-              </div>
-              <mat-radio-button
-                class="radio-button"
-                value="3"
-                color="primary"
-                [disabled]="prepareMigrationData.removeExtension">
-                Remove number
-              </mat-radio-button>
-            </mat-radio-group>
-
-            <mat-label class="mat-label">Extension</mat-label>
-            <mat-radio-group class="radio-group" name="moveTypeExtension"
-                             (change)="selectExtensionMigrationType($event)"
-                             [(ngModel)]="prepareMigrationData.moveType.extension">
-              <mat-radio-button
-                class="radio-button"
-                value="1"
-                color="primary">
-                Keep current extension {{ prepareMigrationData.primaryExtension }}
-              </mat-radio-button>
-              <mat-radio-button
-                class="radio-button"
-                value="2"
-                color="primary">
-                Select a new extension
-              </mat-radio-button>
-
-              <div *ngIf="prepareMigrationData.moveType.extension === '2'" class="input-container">
-                <mat-form-field appearance="outline">
-                  <input
-                    matInput
-                    type="text"
-                    name="newExtension"
-                    (change)="onExtensionChange($event)"
-                    [(ngModel)]="prepareMigrationData.newExtension"
-                    [placeholder]="'Enter extension'"
-                  />
-                </mat-form-field>
-              </div>
-
-              <mat-radio-button
-                class="radio-button"
-                value="3"
-                color="primary"
-                [disabled]="prepareMigrationData.removePhoneNumber">Remove extension
-              </mat-radio-button>
-            </mat-radio-group>
-          </ng-container>
-        </div>
-      </form>
-
-      <div class="step-actions">
-        <button mat-button class="webex-btn btn-next" matStepperNext
-                [disabled]="isNextFromSelectLocationDisabled()" (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]="'disabled_af'">
-      <div class="step-title">Step 2: Device eligibility check</div>
-      <ng-template matStepLabel>Device eligibility check</ng-template>
-      <div class="move-user-tab-content-box">
-        <app-devices-move-user-tab></app-devices-move-user-tab>
-      </div>
-      <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]="'disabled_af'">
-      <div class="step-title">Step 3: Validation</div>
-      <ng-template matStepLabel>Validation</ng-template>
-
-      <div class="devices-move-user-box">
-        <mat-label class="mat-label">Validation</mat-label>
-        <div *ngIf="!prepareMigrationData.errors?.length">
-          <ng-container *ngTemplateOutlet="validationSuccess">
-          </ng-container>
-        </div>
-        <div *ngIf="prepareMigrationData.errors?.length">
-          <ng-container *ngTemplateOutlet="validationFailed">
-          </ng-container>
-        </div>
-      </div>
-      <button #nextAfterMoveBtn mat-button class="invisible-next-btn" matStepperNext
-              (click)="goNextStep(stepper)"></button>
-      <div class="step-actions">
-        <button mat-button class="webex-btn btn-next"
-                [disabled]="prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm"
-                (click)="startMigration()">
-          Move
-        </button>
-        <button mat-button class="webex-btn btn-cancel" matStepperPrevious>
-          Previous
-        </button>
-      </div>
-    </mat-step>
-    <mat-step>
-      <div class="step-title">Step 4: Result</div>
-      <ng-template matStepLabel>Result</ng-template>
-
-      <div class="devices-move-user-box">
-        <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 {{prepareMigrationData.newLocation?.name}}
-          <br/>
-          For the progress of move, please visit the
-          <a class="form-link" href="#">user details</a>.
-        </p>
-      </div>
-
-      <div class="step-actions">
-        <button mat-button class="webex-btn btn-done" (click)="done.emit(true)">
-          Done
-        </button>
-      </div>
-    </mat-step>
-  </mat-stepper>
-</div>
-
-<ng-template #validationSuccess>
-  <p class="validation-text">
-    Validation has completed successfully. The user can be moved to the
-    new location. Please be aware of the potential impact of the changes
-    below.
-  </p>
-  <mat-label class="mat-label">Expected changes</mat-label>
-  <ul>
-    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>
-    <li>
-      The user will be removed from the Call Pickup Group:
-      1675090334-Paris_pickup
-    </li>
-    <li>
-      If Webex App is currently in use, the user will to sign in again to
-      update the service.
-    </li>
-  </ul>
-  <form>
-    <mat-checkbox class="checkbox" name="isConfirm" [(ngModel)]="prepareMigrationData.isConfirm"
-                  color="primary">
-      I confirm that I understand these conditions. I acknowledge the
-      changes.
-    </mat-checkbox>
-  </form>
-
-</ng-template>
-
-<ng-template #validationFailed>
-  <p class="validation-text">
-    Validation is failed. User migration is not available
-  </p>
-  <ul>
-    <li *ngFor="let error of prepareMigrationData.errors">{{ error }}</li>
-  </ul>
-</ng-template>

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

@@ -1,239 +0,0 @@
-.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: .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

@@ -1,206 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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 {{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>