@tuki-io/tuki-widgets 0.0.133 → 0.0.134

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

@@ -0,0 +1,129 @@
+.device-item-panel-container {
+  display: flex;
+
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+
+  margin-bottom: 1.5rem;
+
+  overflow: hidden;
+}
+
+.device-migration-status {
+  height: 100%;
+  padding: 1rem;
+
+  background-color: hsl(40.33deg 100% 88.04%);
+}
+
+.device-right {
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  padding: 1rem 2rem;
+}
+
+.device-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 7px 0;
+
+  & .device-name {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  & .device-migrate {
+
+    font-weight: bold;
+
+    .mat-checkbox ::ng-deep .mat-checkbox-label {
+      margin-left: 0.4rem;
+    }
+
+    ::ng-deep .mat-checkbox-checked.mat-accent {
+      .mat-checkbox-ripple .mat-ripple-element {
+        background-color: hsl(220, 100%, 50%) !important;
+      }
+
+      .mat-checkbox-background,
+      .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
+        background-color: hsl(220, 100%, 50%) !important;
+      }
+    }
+
+    ::ng-deep .mat-checkbox.mat-accent {
+      .mat-checkbox-ripple .mat-ripple-element {
+        background-color: hsl(220, 100%, 50%) !important;
+      }
+    }
+  }
+}
+
+.device-info {
+  // display: inline-flex;
+  // gap: 4.5rem;
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 2.5rem;
+}
+
+.device-info__item {
+  font-size: 16px;
+  font-weight: bold;
+
+  & .key {
+    margin: 10px 0 0 0;
+  }
+
+  & .value {
+    color: rgb(160, 160, 160);
+  }
+}
+
+.--checked {
+  background-color: hsl(164.62deg 66.1% 88.43%);
+}
+
+.mat-checkbox ::ng-deep .mat-checkbox-inner-container {
+  width: 20px;
+  height: 20px;
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent {
+  .mat-checkbox-ripple .mat-ripple-element {
+    background-color: hsl(159.43deg 59.32% 23.14%) !important;
+  }
+
+  .mat-checkbox-background,
+  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
+    background-color: hsl(159.43deg 59.32% 23.14%);
+  }
+}
+
+::ng-deep .mat-checkbox.mat-accent {
+  .mat-checkbox-ripple .mat-ripple-element {
+    background-color: hsl(159.43deg 59.32% 23.14%) !important;
+  }
+}
+
+::ng-deep .rounded {
+
+  & .mat-checkbox-background,
+  .mat-checkbox-frame {
+    border-radius: 50% !important;
+  }
+
+  pointer-events: none;
+}
+
+::ng-deep .mat-divider {
+  display: block;
+  margin: 0;
+  border-top-width: 2px;
+  border-top-style: solid;
+}

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

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { PrepareMigrationDevice } from '../../../classes/move-user';
+import { AppLocation } from '../../../classes/app-location';
+import { DnsService } from '../../../services/dns.service';
+import { UserService } from '../../../services/user.service';
+import { SiteSettingsService } from '../../../services/site-settings.service';
+@Component({
+  selector: 'app-device-move-user-wizard',
+  templateUrl: './device-move-user-wizard.component.html',
+  styleUrls: ['./device-move-user-wizard.component.scss']
+
+})
+export class DeviceMoveUserWizardComponent implements OnInit {
+  @Input()
+  device!: PrepareMigrationDevice;
+
+
+  get moveUserPending(): boolean {
+    return this.userService.moveUserPending;
+  }
+
+  get locations(): AppLocation[] {
+    return this.siteSettingsService.locations;
+  }
+
+  constructor(
+    public dnsService: DnsService,
+    public userService: UserService,
+    public siteSettingsService: SiteSettingsService
+  ) {
+  }
+
+  ngOnInit() {
+
+  }
+
+  onMigrateDeviceChecked(event: any): void {
+
+  }
+
+
+  private resetMoveTypePhoneNUmber(): void {
+    this.dnsService.phoneNumbers = [];
+  }
+
+}

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

@@ -0,0 +1,31 @@
+<div *ngIf="prepareMigrationData.eligibleDevicesSize"
+     class="devices-move-user-box eligible-devices-section" >
+  <div class="section-title">Eligible devices ({{ prepareMigrationData.eligibleDevicesSize() }})</div>
+  <div class="section-content">
+    <div *ngIf="prepareMigrationData.devices?.length" class="device-group">
+      <div class="group-title">IP Phones</div>
+      <ng-container *ngFor="let device of prepareMigrationData.devices">
+        <app-device-move-user-wizard [device]="device"></app-device-move-user-wizard>
+      </ng-container>
+    </div>
+
+    <div *ngIf="prepareMigrationData.softDevices?.length" class="device-group">
+      <div class="group-title">Soft Devices</div>
+      <ng-container *ngFor="let device of prepareMigrationData.softDevices">
+        <app-device-move-user-wizard [device]="device"></app-device-move-user-wizard>
+      </ng-container>
+    </div>
+  </div>
+</div>
+<mat-divider *ngIf="prepareMigrationData.notSupportedDevices.length"></mat-divider>
+<div *ngIf="prepareMigrationData.notSupportedDevices.length" class="ineligible-devices-section">
+  <div class="section-title">Ineligible devices ({{ prepareMigrationData.notSupportedDevices.length }})</div>
+  <div class="section-content">
+    <div class="device-group">
+      <ng-container *ngFor="let device of prepareMigrationData.notSupportedDevices">
+        <app-device-move-user-wizard [device]="device"></app-device-move-user-wizard>
+      </ng-container>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,20 @@
+.eligible-devices-section, .ineligible-devices-section {
+  display: flex;
+  padding: 1.5rem;
+
+  & .section-title {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 0 0.5rem;
+    width: 300px;
+  }
+
+  & .section-content {
+    width: 100%;
+  }
+}
+.group-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}

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

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+import { PrepareMigrationData } from '../../../classes/move-user';
+import { MoveUserService } from '../../../services/move-user.service';
+@Component({
+  selector: 'app-devices-move-user-tab',
+  templateUrl: './devices-move-user-wizard-tab.component.html',
+  styleUrls: ['./devices-move-user-wizard-tab.component.scss']
+
+})
+export class DevicesMoveUserWizardTabComponent implements OnInit {
+
+  get prepareMigrationData(): PrepareMigrationData {
+    return this.moveUserService.prepareMigrationData;
+  }
+
+  constructor(
+    public moveUserService: MoveUserService,
+  ) {
+  }
+
+  ngOnInit() {
+
+  }
+
+
+}

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]="70" strokeWidth="3"></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()">
+          Upgrade
+        </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>