@tuki-io/tuki-widgets 0.0.63 → 0.0.65

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

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

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

@@ -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 | undefined {
+    return location?.name || '';
+  }
+
+  onLocationAutocomplete(event: InputEvent): 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">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>