@tuki-io/tuki-widgets 0.0.134 → 0.0.136

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

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

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

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

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

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

@@ -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]="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>