@tuki-io/tuki-widgets 0.0.65 → 0.0.67

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

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