@tuki-io/tuki-widgets 0.0.139 → 0.0.140
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/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -351,10 +351,10 @@ export class UserUpgradeDataTableComponent {
|
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
354
|
-
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.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: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
354
|
+
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.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: i5.SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: i6.TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
355
355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
|
|
356
356
|
type: Component,
|
|
357
|
-
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
357
|
+
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
358
358
|
}], propDecorators: { token: [{
|
|
359
359
|
type: Input
|
|
360
360
|
}], customerId: [{
|
|
@@ -741,10 +741,10 @@ class UserUpgradeDataTableComponent {
|
|
|
741
741
|
}
|
|
742
742
|
}
|
|
743
743
|
UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
-
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.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: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
744
|
+
UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.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: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
|
|
745
745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
|
|
746
746
|
type: Component,
|
|
747
|
-
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
747
|
+
args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"\r\n ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n <div class=\"user-upgrade-status-wrapper\">\r\n <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n </div>\r\n <div class=\"table-action-panel\">\r\n <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n <div class=\"action-wrapper\">\r\n <span>{{filteredDataCount}} Users</span>\r\n <button\r\n class=\"upgrade-bulk-button\"\r\n [disabled]=\"selection.selected.length === 0\"\r\n (click)=\"upgradeSelectedUsers()\">\r\n Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n </button>\r\n </div>\r\n </div>\r\n <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n <!-- Checkbox Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n class=\"custom-checkbox\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Column -->\r\n <ng-container matColumnDef=\"user\">\r\n <th mat-header-cell *matHeaderCellDef>User</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"user-info\">\r\n <div class=\"user-name\">{{element.userName}}</div>\r\n <div class=\"user-email\">{{element.userName}}</div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Site Column -->\r\n <ng-container matColumnDef=\"site\">\r\n <th mat-header-cell *matHeaderCellDef>Site</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"site-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{element.siteName}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Device Column -->\r\n <ng-container matColumnDef=\"device\">\r\n <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n class=\"device-item\"\r\n [class.no-border]=\"last\">\r\n <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n <span class=\"device-model\">\r\n {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"device-info\">\r\n <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n <div class=\"device-name-wrapper clickable\"\r\n (mouseenter)=\"onMultipleDevices(element)\"\r\n (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n <span class=\"device-name\">Multiple devices ></span>\r\n </div>\r\n </div>\r\n <ng-template #oneDevice>\r\n <div class=\"device-name-wrapper\">\r\n <span class=\"device-indicator\"></span>\r\n <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n </div>\r\n <div class=\"device-model one-dev-extensions\">\r\n {{ element.devicesWithExtensions[0].extensions?.length ?\r\n 'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dial Plan Status Column -->\r\n <ng-container matColumnDef=\"dialPlanStatus\">\r\n <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Dependencies Column -->\r\n <ng-container matColumnDef=\"dependencies\">\r\n <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- User Upgrade Status Column -->\r\n <ng-container matColumnDef=\"userUpgradeStatus\">\r\n <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <div class=\"upgrade-status-cell\">\r\n <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n </ng-container>\r\n <ng-template #statusBlock>\r\n <div class=\"status-info\">\r\n <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"userUpgradeLoader\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n <mat-progress-spinner\r\n *ngIf=\"element.pending\"\r\n class=\"field-spinner\"\r\n [diameter]=\"20\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n <mat-paginator\r\n [length]=\"pagination.total\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n (page)=\"pageEvent($event)\"\r\n showFirstLastButtons>\r\n </mat-paginator>\r\n\r\n <!--<div class=\"page-indexes-box\">\r\n <mat-paginator\r\n [id]=\"'commonPagination'\"\r\n [hidePageSize]=\"true\"\r\n [length]=\"pagination.total\"\r\n [pageIndex]=\"pagination.pageIndex\"\r\n [pageSize]=\"pagination.pageSize\"\r\n [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n (page)=\"pageEvent($event)\">\r\n </mat-paginator>\r\n </div>\r\n\r\n <div class=\"per-page-block\">\r\n <div class=\"item_per_page\">Items per page:</div>\r\n <div class=\"select-box select-page-size\">\r\n <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n [id]=\"'commonPaginationSelect'\">\r\n <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n </mat-select>\r\n </div>\r\n\r\n </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#fff!important;border:2px solid black!important;border-radius:1rem!important;color:#000!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
|
|
748
748
|
}], propDecorators: { token: [{
|
|
749
749
|
type: Input
|
|
750
750
|
}], customerId: [{
|