@tuki-io/tuki-widgets 0.0.147 → 0.0.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/users-list/src/move-user-wizard/move-user-stepper/move-user-stepper.component.mjs +8 -5
- package/esm2020/users-list/src/users-list.component.mjs +3 -3
- package/fesm2015/tuki-io-tuki-widgets-users-list.mjs +9 -7
- package/fesm2015/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-users-list.mjs +9 -6
- package/fesm2020/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
- package/package.json +1 -1
- package/users-list/src/move-user-wizard/move-user-stepper/move-user-stepper.component.d.ts +1 -1
|
@@ -1384,10 +1384,9 @@ class MoveUserStepperComponent {
|
|
|
1384
1384
|
this.dataPending = true;
|
|
1385
1385
|
this.moveUserService.startMigration(migrationData)
|
|
1386
1386
|
.subscribe((result) => {
|
|
1387
|
-
var _a, _b;
|
|
1388
1387
|
this.dataPending = false;
|
|
1389
|
-
if (
|
|
1390
|
-
this.
|
|
1388
|
+
if (this.stepper) {
|
|
1389
|
+
this.stepper.next();
|
|
1391
1390
|
}
|
|
1392
1391
|
}, () => {
|
|
1393
1392
|
this.dataPending = false;
|
|
@@ -1426,13 +1425,16 @@ class MoveUserStepperComponent {
|
|
|
1426
1425
|
}
|
|
1427
1426
|
}
|
|
1428
1427
|
MoveUserStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, deps: [{ token: DnsService }, { token: UserService }, { token: SiteSettingsService }, { token: NotificationService }, { token: MoveUserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1429
|
-
MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n <mat-step>\r\n <div class=\"step-title\">Step 1: Select location</div>\r\n <!-- <form>-->\r\n <ng-template matStepLabel>Select location</ng-template>\r\n <form>\r\n <div class=\"move-user-tab-content-box\">\r\n <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n (input)=\"onLocationAutocomplete($event)\"/>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n (optionSelected)=\"onLocationChange($event)\">\r\n <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n {{ location.name }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!dataPending && !locations.length\" class=\"mat-error\">\r\n Locations are not available\r\n </div>\r\n\r\n <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n <mat-label class=\"mat-label\">Phone number</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n (change)=\"selectPhoneNumberMigrationType($event)\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current number\r\n {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\"\r\n [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n Select a new number\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n (input)=\"onNumberAutocomplete()\"/>\r\n <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n {{ number }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n Phone numbers are not available for this location\r\n </div>\r\n </div>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removeExtension\">\r\n Remove number\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n\r\n <mat-label class=\"mat-label\">Extension</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n (change)=\"selectExtensionMigrationType($event)\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\">\r\n Select a new extension\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n name=\"newExtension\"\r\n (change)=\"onExtensionChange($event)\"\r\n [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n [placeholder]=\"'Enter extension'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n </div>\r\n </form>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n <ng-template matStepLabel>Device eligibility check</ng-template>\r\n <div class=\"move-user-tab-content-box\">\r\n <app-devices-move-user-tab></app-devices-move-user-tab>\r\n </div>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 3: Validation</div>\r\n <ng-template matStepLabel>Validation</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Validation</mat-label>\r\n <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n (click)=\"goNextStep(stepper)\"></button>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\"\r\n [disabled]=\"prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n (click)=\"startMigration()\">\r\n Upgrade\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step>\r\n <div class=\"step-title\">Step 4: Result</div>\r\n <ng-template matStepLabel>Result</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n <p class=\"validation-text\">\r\n The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n <br/>\r\n For the progress of move, please visit the\r\n <a class=\"form-link\" href=\"#\">user details</a>.\r\n </p>\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n Done\r\n </button>\r\n </div>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n <p class=\"validation-text\">\r\n Validation has completed successfully. The user can be moved to the\r\n new location. Please be aware of the potential impact of the changes\r\n below.\r\n </p>\r\n <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n <ul>\r\n <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n <li>\r\n The user will be removed from the Call Pickup Group:\r\n 1675090334-Paris_pickup\r\n </li>\r\n <li>\r\n If Webex App is currently in use, the user will to sign in again to\r\n update the service.\r\n </li>\r\n </ul>\r\n <form>\r\n <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n color=\"primary\">\r\n I confirm that I understand these conditions. I acknowledge the\r\n changes.\r\n </mat-checkbox>\r\n </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n <p class=\"validation-text\">\r\n Validation is failed. User migration is not available\r\n </p>\r\n <ul>\r\n <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::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}::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:.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:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.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:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i14.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i14.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i14.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i14.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1428
|
+
MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }, { propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n <mat-step>\r\n <div class=\"step-title\">Step 1: Select location</div>\r\n <!-- <form>-->\r\n <ng-template matStepLabel>Select location</ng-template>\r\n <form>\r\n <div class=\"move-user-tab-content-box\">\r\n <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n (input)=\"onLocationAutocomplete($event)\"/>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n (optionSelected)=\"onLocationChange($event)\">\r\n <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n {{ location.name }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n Locations are not available\r\n </div>\r\n\r\n <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n <mat-label class=\"mat-label\">Phone number</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n (change)=\"selectPhoneNumberMigrationType($event)\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current number\r\n {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\"\r\n [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n Select a new number\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n (input)=\"onNumberAutocomplete()\"/>\r\n <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n {{ number }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n Phone numbers are not available for this location\r\n </div>\r\n </div>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removeExtension\">\r\n Remove number\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n\r\n <mat-label class=\"mat-label\">Extension</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n (change)=\"selectExtensionMigrationType($event)\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\">\r\n Select a new extension\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n name=\"newExtension\"\r\n (change)=\"onExtensionChange($event)\"\r\n [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n [placeholder]=\"'Enter extension'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n </div>\r\n </form>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n <ng-template matStepLabel>Device eligibility check</ng-template>\r\n <div class=\"move-user-tab-content-box\">\r\n <app-devices-move-user-tab></app-devices-move-user-tab>\r\n </div>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 3: Validation</div>\r\n <ng-template matStepLabel>Validation</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Validation</mat-label>\r\n <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n (click)=\"goNextStep(stepper)\"></button>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\"\r\n [disabled]=\"prepareMigrationData?.errors?.length > 0 || !prepareMigrationData.isConfirm\"\r\n (click)=\"startMigration()\">\r\n Upgrade\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step>\r\n <div class=\"step-title\">Step 4: Result</div>\r\n <ng-template matStepLabel>Result</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n <p class=\"validation-text\">\r\n The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n <br/>\r\n For the progress of move, please visit the\r\n <a class=\"form-link\" href=\"#\">user details</a>.\r\n </p>\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n Done\r\n </button>\r\n </div>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n <p class=\"validation-text\">\r\n Validation has completed successfully. The user can be moved to the\r\n new location. Please be aware of the potential impact of the changes\r\n below.\r\n </p>\r\n <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n <ul>\r\n <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n <li>\r\n The user will be removed from the Call Pickup Group:\r\n 1675090334-Paris_pickup\r\n </li>\r\n <li>\r\n If Webex App is currently in use, the user will to sign in again to\r\n update the service.\r\n </li>\r\n </ul>\r\n <form>\r\n <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n color=\"primary\">\r\n I confirm that I understand these conditions. I acknowledge the\r\n changes.\r\n </mat-checkbox>\r\n </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n <p class=\"validation-text\">\r\n Validation is failed. User migration is not available\r\n </p>\r\n <ul>\r\n <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::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}::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:.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:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.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:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i14.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i14.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i14.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i14.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1430
1429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, decorators: [{
|
|
1431
1430
|
type: Component,
|
|
1432
|
-
args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n <mat-step>\r\n <div class=\"step-title\">Step 1: Select location</div>\r\n <!-- <form>-->\r\n <ng-template matStepLabel>Select location</ng-template>\r\n <form>\r\n <div class=\"move-user-tab-content-box\">\r\n <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n (input)=\"onLocationAutocomplete($event)\"/>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n (optionSelected)=\"onLocationChange($event)\">\r\n <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n {{ location.name }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!dataPending && !locations.length\" class=\"mat-error\">\r\n Locations are not available\r\n </div>\r\n\r\n <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n <mat-label class=\"mat-label\">Phone number</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n (change)=\"selectPhoneNumberMigrationType($event)\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current number\r\n {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\"\r\n [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n Select a new number\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n (input)=\"onNumberAutocomplete()\"/>\r\n <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n {{ number }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n Phone numbers are not available for this location\r\n </div>\r\n </div>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removeExtension\">\r\n Remove number\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n\r\n <mat-label class=\"mat-label\">Extension</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n (change)=\"selectExtensionMigrationType($event)\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\">\r\n Select a new extension\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n name=\"newExtension\"\r\n (change)=\"onExtensionChange($event)\"\r\n [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n [placeholder]=\"'Enter extension'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n </div>\r\n </form>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n <ng-template matStepLabel>Device eligibility check</ng-template>\r\n <div class=\"move-user-tab-content-box\">\r\n <app-devices-move-user-tab></app-devices-move-user-tab>\r\n </div>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 3: Validation</div>\r\n <ng-template matStepLabel>Validation</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Validation</mat-label>\r\n <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n (click)=\"goNextStep(stepper)\"></button>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\"\r\n [disabled]=\"prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n (click)=\"startMigration()\">\r\n Upgrade\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step>\r\n <div class=\"step-title\">Step 4: Result</div>\r\n <ng-template matStepLabel>Result</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n <p class=\"validation-text\">\r\n The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n <br/>\r\n For the progress of move, please visit the\r\n <a class=\"form-link\" href=\"#\">user details</a>.\r\n </p>\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n Done\r\n </button>\r\n </div>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n <p class=\"validation-text\">\r\n Validation has completed successfully. The user can be moved to the\r\n new location. Please be aware of the potential impact of the changes\r\n below.\r\n </p>\r\n <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n <ul>\r\n <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n <li>\r\n The user will be removed from the Call Pickup Group:\r\n 1675090334-Paris_pickup\r\n </li>\r\n <li>\r\n If Webex App is currently in use, the user will to sign in again to\r\n update the service.\r\n </li>\r\n </ul>\r\n <form>\r\n <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n color=\"primary\">\r\n I confirm that I understand these conditions. I acknowledge the\r\n changes.\r\n </mat-checkbox>\r\n </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n <p class=\"validation-text\">\r\n Validation is failed. User migration is not available\r\n </p>\r\n <ul>\r\n <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::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}::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:.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:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.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:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
|
|
1431
|
+
args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n <mat-step>\r\n <div class=\"step-title\">Step 1: Select location</div>\r\n <!-- <form>-->\r\n <ng-template matStepLabel>Select location</ng-template>\r\n <form>\r\n <div class=\"move-user-tab-content-box\">\r\n <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n (input)=\"onLocationAutocomplete($event)\"/>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n (optionSelected)=\"onLocationChange($event)\">\r\n <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n {{ location.name }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n Locations are not available\r\n </div>\r\n\r\n <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n <mat-label class=\"mat-label\">Phone number</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n (change)=\"selectPhoneNumberMigrationType($event)\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current number\r\n {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\"\r\n [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n Select a new number\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n (input)=\"onNumberAutocomplete()\"/>\r\n <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n {{ number }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n Phone numbers are not available for this location\r\n </div>\r\n </div>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removeExtension\">\r\n Remove number\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n\r\n <mat-label class=\"mat-label\">Extension</mat-label>\r\n <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n (change)=\"selectExtensionMigrationType($event)\"\r\n [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"1\"\r\n color=\"primary\">\r\n Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n </mat-radio-button>\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"2\"\r\n color=\"primary\">\r\n Select a new extension\r\n </mat-radio-button>\r\n\r\n <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n name=\"newExtension\"\r\n (change)=\"onExtensionChange($event)\"\r\n [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n [placeholder]=\"'Enter extension'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <mat-radio-button\r\n class=\"radio-button\"\r\n value=\"3\"\r\n color=\"primary\"\r\n [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n </div>\r\n </form>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n <ng-template matStepLabel>Device eligibility check</ng-template>\r\n <div class=\"move-user-tab-content-box\">\r\n <app-devices-move-user-tab></app-devices-move-user-tab>\r\n </div>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n Next\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n <div class=\"step-title\">Step 3: Validation</div>\r\n <ng-template matStepLabel>Validation</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Validation</mat-label>\r\n <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n (click)=\"goNextStep(stepper)\"></button>\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-next\"\r\n [disabled]=\"prepareMigrationData?.errors?.length > 0 || !prepareMigrationData.isConfirm\"\r\n (click)=\"startMigration()\">\r\n Upgrade\r\n </button>\r\n <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n Previous\r\n </button>\r\n </div>\r\n </mat-step>\r\n <mat-step>\r\n <div class=\"step-title\">Step 4: Result</div>\r\n <ng-template matStepLabel>Result</ng-template>\r\n\r\n <div class=\"devices-move-user-box\">\r\n <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n <p class=\"validation-text\">\r\n The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n <br/>\r\n For the progress of move, please visit the\r\n <a class=\"form-link\" href=\"#\">user details</a>.\r\n </p>\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n Done\r\n </button>\r\n </div>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n <p class=\"validation-text\">\r\n Validation has completed successfully. The user can be moved to the\r\n new location. Please be aware of the potential impact of the changes\r\n below.\r\n </p>\r\n <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n <ul>\r\n <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n <li>\r\n The user will be removed from the Call Pickup Group:\r\n 1675090334-Paris_pickup\r\n </li>\r\n <li>\r\n If Webex App is currently in use, the user will to sign in again to\r\n update the service.\r\n </li>\r\n </ul>\r\n <form>\r\n <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n color=\"primary\">\r\n I confirm that I understand these conditions. I acknowledge the\r\n changes.\r\n </mat-checkbox>\r\n </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n <p class=\"validation-text\">\r\n Validation is failed. User migration is not available\r\n </p>\r\n <ul>\r\n <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::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}::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:.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:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.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:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
|
|
1433
1432
|
}], ctorParameters: function () { return [{ type: DnsService }, { type: UserService }, { type: SiteSettingsService }, { type: NotificationService }, { type: MoveUserService }]; }, propDecorators: { nextAfterMoveBtn: [{
|
|
1434
1433
|
type: ViewChild,
|
|
1435
1434
|
args: ['nextAfterMoveBtn']
|
|
1435
|
+
}], stepper: [{
|
|
1436
|
+
type: ViewChild,
|
|
1437
|
+
args: ['stepper']
|
|
1436
1438
|
}], done: [{
|
|
1437
1439
|
type: Output
|
|
1438
1440
|
}], user: [{
|
|
@@ -1804,10 +1806,10 @@ class UsersListComponent {
|
|
|
1804
1806
|
}
|
|
1805
1807
|
}
|
|
1806
1808
|
UsersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, deps: [{ token: UserService }, { token: APIService }, { token: ApiWebexService }, { token: NotificationService }, { token: UsersSearchService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
1807
|
-
UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n >\r\n <!-- <ng-container matColumnDef=\"user-icon\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n (click)=\"onUserClick(user)\">\r\n <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n </td>\r\n </ng-container> -->\r\n\r\n <ng-container matColumnDef=\"name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n <td\r\n class=\"user-site\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.email }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"status\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Status\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"user.status === 'Active' ? '' : 'Cutover pending'\"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"user.status === 'In Progress'\"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n <div class=\"icon-actions-dots\">\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n </div>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n </mat-menu>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"role\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"last-active-time\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Last active time\r\n <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n 2/16/26\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n </table>\r\n\r\n <app-pagination\r\n [pagination]=\"usersSearchService.getPagination()\"\r\n [showPageSizeOptions]=\"true\"\r\n (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n (pageEmitter)=\"pageEvent($event)\"\r\n >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D %0D %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D stroke%3D%22currentColor%22 %0D stroke-width%3D%221.2%22 %0D stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table .inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }, { kind: "component", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: ["totalUsersCount"], outputs: ["searchChange"] }] });
|
|
1809
|
+
UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n >\r\n <!-- <ng-container matColumnDef=\"user-icon\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n (click)=\"onUserClick(user)\">\r\n <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n </td>\r\n </ng-container> -->\r\n\r\n <ng-container matColumnDef=\"name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n <td\r\n class=\"user-site\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.email }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"status\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Status\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"user.status === 'Active' ? '' : 'Pending cutover to MT. Please contact your administrator for details.'\"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"user.status === 'In Progress'\"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n <div class=\"icon-actions-dots\">\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n </div>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n </mat-menu>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"role\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"last-active-time\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Last active time\r\n <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n 2/16/26\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n </table>\r\n\r\n <app-pagination\r\n [pagination]=\"usersSearchService.getPagination()\"\r\n [showPageSizeOptions]=\"true\"\r\n (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n (pageEmitter)=\"pageEvent($event)\"\r\n >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D %0D %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D stroke%3D%22currentColor%22 %0D stroke-width%3D%221.2%22 %0D stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table .inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }, { kind: "component", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: ["totalUsersCount"], outputs: ["searchChange"] }] });
|
|
1808
1810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
|
|
1809
1811
|
type: Component,
|
|
1810
|
-
args: [{ selector: 'app-users-list', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n >\r\n <!-- <ng-container matColumnDef=\"user-icon\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n (click)=\"onUserClick(user)\">\r\n <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n </td>\r\n </ng-container> -->\r\n\r\n <ng-container matColumnDef=\"name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n <td\r\n class=\"user-site\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.email }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"status\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Status\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"user.status === 'Active' ? '' : 'Cutover pending'\"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"user.status === 'In Progress'\"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n <div class=\"icon-actions-dots\">\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n </div>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n </mat-menu>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"role\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"last-active-time\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Last active time\r\n <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n 2/16/26\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n </table>\r\n\r\n <app-pagination\r\n [pagination]=\"usersSearchService.getPagination()\"\r\n [showPageSizeOptions]=\"true\"\r\n (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n (pageEmitter)=\"pageEvent($event)\"\r\n >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D %0D %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D stroke%3D%22currentColor%22 %0D stroke-width%3D%221.2%22 %0D stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table .inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"] }]
|
|
1812
|
+
args: [{ selector: 'app-users-list', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n >\r\n <!-- <ng-container matColumnDef=\"user-icon\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n (click)=\"onUserClick(user)\">\r\n <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n </td>\r\n </ng-container> -->\r\n\r\n <ng-container matColumnDef=\"name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"email\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n <td\r\n class=\"user-site\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.email }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"status\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Status\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"user.status === 'Active' ? '' : 'Pending cutover to MT. Please contact your administrator for details.'\"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid,\r\n 'inactive-user-row': user.status !== 'Active',\r\n }\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"user.status === 'In Progress'\"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\r\n <div class=\"icon-actions-dots\">\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n <span class=\"icon-dot\">.</span>\r\n </div>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n </mat-menu>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"role\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\"\r\n ><img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"last-active-time\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n <span class=\"header-with-info\">\r\n Last active time\r\n <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n </span>\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n 2/16/26\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n </table>\r\n\r\n <app-pagination\r\n [pagination]=\"usersSearchService.getPagination()\"\r\n [showPageSizeOptions]=\"true\"\r\n (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n (pageEmitter)=\"pageEvent($event)\"\r\n >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D %0D %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D stroke%3D%22currentColor%22 %0D stroke-width%3D%221.2%22 %0D stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table .inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"] }]
|
|
1811
1813
|
}], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
|
|
1812
1814
|
type: Input
|
|
1813
1815
|
}], customerId: [{
|