@tuki-io/tuki-widgets 0.0.95 → 0.0.97

package/projects/tuki/widgets/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.ts

@@ -0,0 +1,438 @@
+import { SelectionModel } from "@angular/cdk/collections";
+import { Component, OnInit, OnDestroy, inject, Input, ViewEncapsulation } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { TableColumn } from "../../../shared/types/data-table";
+import { TableFilter } from "../../../shared/types/table/filter";
+import { catchError, of, Subject, Subscription } from "rxjs";
+import { takeUntil } from "rxjs";
+import {
+  FILTER_KEY_MAP,
+  UiFilterKey,
+  User2UpgradeStatusDTO,
+  UserSearchParams,
+  UserUpgradeService
+} from "../user-upgrade.service";
+import { DEPENDENCIES_STATUS, Status, STATUS_ENTRIES } from "../../../shared/types/constants";
+import { UserUpgradeRecord } from "../types/user-upgrade";
+import { APIService } from "../../../shared/services/api.service";
+import { PAGINATION_SIZE_OPTIONS } from "../../../shared/constants/app.constants";
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'tk-user-upgrade-data-table',
+  templateUrl: './user-upgrade-data-table.component.html',
+  styleUrls: ['./user-upgrade-data-table.component.scss'],
+  // encapsulation: ViewEncapsulation.ShadowDom
+})
+export class UserUpgradeDataTableComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  private userUpgradeService = inject(UserUpgradeService);
+  private apiService = inject(APIService);
+  readonly STATUS_ENTRIES = STATUS_ENTRIES;
+  readonly DEPENDENCIES_STATUS = DEPENDENCIES_STATUS;
+
+  @Input() token!: string;
+  @Input() customerId!: string;
+
+  columns!: TableColumn[];
+  dataPending = false;
+  data!: MatTableDataSource<UserUpgradeRecord>;
+  displayedColumns: string[] = ['select', 'user', 'site', 'device', 'dialPlanStatus', 'dependencies', 'userUpgradeStatus', 'userUpgradeLoader'];
+  selection = new SelectionModel<UserUpgradeRecord>(true, []);
+  filters: TableFilter[] = [];
+  pagination = new PaginationDataDto();
+  users: UserUpgradeRecord[] = [];
+  private subscriptions = new Subscription();
+
+  statusCounts: any = {};
+
+  private activeFilters: Partial<UserSearchParams> = {};
+
+  ngOnInit(): void {
+    this.dataPending = true;
+    this.apiService.token = this.token;
+    this.userUpgradeService.customerId = this.customerId;
+
+    const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, this.activeFilters)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((results: any) => {
+        const records = results.content as UserUpgradeRecord[]
+        records.forEach(record => {
+          record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
+        });
+        this.data = new MatTableDataSource(records);
+        this.pagination.total = results.totalElements;
+        this.dataPending = false;
+        this.setupCustomFilter();
+        this.initializeFilters(records);
+      });
+    this.subscriptions.add(subsc1);
+
+    const subsc2 = this.userUpgradeService.getUserUpgradeStatusCounts()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((statusCounts) => {
+        this.statusCounts['Ready'] = statusCounts['READY'] || 0;
+        this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
+        this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
+        this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
+      });
+    this.subscriptions.add(subsc2);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.dataPending = false;
+
+    if (this.subscriptions) {
+      this.subscriptions.unsubscribe();
+    }
+  }
+
+  onMultipleDevices(user: UserUpgradeRecord): void {
+    user.showDevices = !user.showDevices;
+  }
+
+  pageEvent (event: PageEvent): void {
+    this.pagination.pageIndex = event.pageIndex;
+    this.pagination.pageSize = event.pageSize;
+    this.getData();
+  }
+
+  getSiteUpgradeStatusClass(status: string): string {
+    switch (status.toLowerCase()) {
+      case 'ready':
+        return 'status-ready';
+      case 'partial ready':
+        return 'partial-ready';
+      case 'completed':
+        return 'completed';
+      case 'failed':
+        return 'failed';
+      case 'not ready':
+        return 'not-ready';
+      default:
+        return 'not-ready';
+    }
+  }
+
+  changePerPageNumber(pageSizeEvent: any): void {
+    this.pagination.pageSize = pageSizeEvent.value;
+    this.pagination.pageIndex = 0;
+    this.getData();
+  }
+
+  private getData(params?: UserSearchParams): void {
+    this.dataPending = true;
+    const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, params || {})
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((result) => {
+        const records = result.content as UserUpgradeRecord[]
+        records.forEach(record => {
+          record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
+        });
+
+        this.data = new MatTableDataSource(records);
+        this.pagination.total = result.totalElements;
+        this.dataPending = false;
+      });
+    this.subscriptions.add(subsc1);
+  }
+
+  private initializeFilters(records: UserUpgradeRecord[]): void {
+    if (!records?.length) {
+      this.filters = [];
+      return;
+    }
+
+    // Extract unique sites (skip empty/null)
+    const uniqueSites = [
+      ...new Set(
+        records
+          .map(record => record.siteName?.trim())
+          .filter((site): site is string => !!site)
+      )
+    ];
+
+    const siteOptions = uniqueSites.map(site => ({
+      label: site,
+      value: site.toLowerCase().replace(/\s+/g, '-')
+    }));
+
+    // Extract unique statuses (skip empty/null)
+    const uniqueStatuses = [
+      ...new Set(
+        records
+          .map(record => record.upgradeStatus?.trim())
+          .filter((status): status is string => !!status)
+      )
+    ];
+
+    const statusOptions = uniqueStatuses.map(status => ({
+      label: STATUS_ENTRIES[status],
+      value: status.toLowerCase().replace(/\s+/g, '-')
+    }));
+
+    this.filters = [
+      {
+        id: 'userName',
+        type: 'search',
+        columnKey: 'User',
+        placeholder: 'Search users...',
+        options: []
+      }
+    ];
+
+    if (siteOptions.length) {
+      this.filters.push({
+        id: 'sites',
+        type: 'select',
+        columnKey: 'Site',
+        placeholder: 'Sites',
+        options: siteOptions
+      });
+    }
+
+    if (statusOptions.length) {
+      this.filters.push({
+        id: 'status',
+        type: 'select',
+        columnKey: 'User Upgrade Status',
+        placeholder: 'Upgrade Status',
+        options: statusOptions
+      });
+    }
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.data?.data.length ?? 0;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    // this.isAllSelected() ?
+    //   this.selection.clear() :
+    //   this.data?.data.forEach(row => this.selection.select(row));
+    if (this.isAllSelected()) {
+      this.selection.clear();
+    } else {
+      this.data?.data.forEach(row => {
+        if (row.upgradeStatus === 'READY') {
+          this.selection.select(row)
+        }
+      });
+    }
+  }
+
+  upgradeUser(user: UserUpgradeRecord): void {
+    if (user?.upgradeStatus === 'READY')
+      user.pending = true;
+
+      this.userUpgradeService.collectUsers([user])
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.userUpgradeService.bulkUpgrade([user])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+              this.updateUsersStatusAfterUpgrade([user]);
+            })
+        });
+  }
+
+  updateUsersStatusAfterUpgrade(users: UserUpgradeRecord[]): void {
+    this.userUpgradeService.getUsersUpgradeStatuses(users)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((upgradedStatuses: User2UpgradeStatusDTO[]) => {
+        upgradedStatuses.forEach(statusItem => {
+          const ind = this.getUserIndex(statusItem.userId);
+          if (ind > -1) {
+            this.data.data[ind].upgradeStatus = statusItem.upgradeStatus;
+            this.data.data[ind].pending = false;
+          }
+        });
+        this.dataPending = false;
+      });
+  }
+
+  getUserIndex(userId: string): number {
+    return this.data.data.findIndex((record: UserUpgradeRecord) => record.userId === userId);
+  }
+
+  upgradeSelectedUsers(): void {
+    if (this.selection.selected && this.selection.selected.length) {
+      this.dataPending = true;
+
+      this.userUpgradeService.collectUsers(this.selection.selected)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.userUpgradeService.bulkUpgrade(this.selection.selected)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+              this.updateUsersStatusAfterUpgrade(this.selection.selected);
+            })
+        });
+
+    }
+    this.userUpgradeService.bulkUpgrade(this.selection.selected);
+  }
+
+  private getFilterValue(input: any): any {
+    if (input && input.value !== undefined) return input.value;      // e.g. {value,label}
+    if (input && input.target) return input.target.value;            // DOM event
+    return input;                                                    // plain value
+  }
+  private isEmptyFilter(v: any): boolean {
+    if (v === undefined || v === null) return true;
+    if (typeof v === 'string') {
+      const s = v.trim().toLowerCase();
+      return s === '' || s === 'all';
+    }
+    return false;
+  }
+
+  onFilter(filterEvent: { key: UiFilterKey; value: any }) {
+    const rawKey = filterEvent.key;        
+    const serverKey = FILTER_KEY_MAP[rawKey];
+    const value = this.getFilterValue(filterEvent.value);
+
+    const next: Partial<UserSearchParams> = { ...this.activeFilters };    
+
+    if (this.isEmptyFilter(value)) {
+      delete next[serverKey];
+    } else {
+      // normalize to string for API (trim)
+      next[serverKey] = typeof value === 'string' ? value.trim() : String(value);
+    }
+
+    this.activeFilters = next;
+    this.pagination.pageIndex = 0;
+
+    // quick fix for demo
+    if (this.activeFilters['upgradeStatus']) {
+      this.activeFilters['upgradeStatus'] = this.activeFilters['upgradeStatus']?.toUpperCase();
+    }
+
+    this.getData(this.activeFilters as UserSearchParams);
+  }
+
+  /*onFilter(filterEvent: { key: string, value: any }) {
+    const {key, value} = filterEvent;
+
+    let filterValue: any;
+    if (value && value.value !== undefined) {
+      filterValue = value.value;
+    } else if (value && value.target) {
+      filterValue = value.target.value;
+    } else {
+      filterValue = value;
+    }
+
+    // Handle "All" option or empty values - remove the filter
+    if (filterValue === 'all' || !filterValue || filterValue === '') {
+      delete this.activeFilters[key];
+    } else {
+      this.activeFilters[key] = filterValue;
+    }
+
+    this.applyFilters();
+  }*/
+
+  private setupCustomFilter() {
+    this.data.filterPredicate = (data: any, filter: string) => {
+      const filters = JSON.parse(filter || '{}');
+
+      for (const [key, value] of Object.entries(filters)) {
+        if (!value) continue;
+
+        switch (key) {
+          case 'User':
+            const searchTerm = (value as string).toLowerCase();
+            if (!data.userName.toLowerCase().includes(searchTerm)) {
+              return false;
+            }
+            break;
+          case 'Site':
+            if (data.siteName !== this.getSiteNameFromValue(value as string)) {
+              return false;
+            }
+            break;
+          case 'User Upgrade Status':
+            if (!this.matchesUpgradeStatus(data.upgradeStatus, value as string)) {
+              return false;
+            }
+            break;
+        }
+      }
+
+      return true;
+    };
+  }
+
+  private applyFilters() {
+    this.data.filter = JSON.stringify(this.activeFilters);
+  }
+
+  get filteredDataCount(): number {
+    return this.data?.filteredData?.length || 0;
+  }
+
+  private getSiteNameFromValue(value: string): string {
+    // Since we're now using actual site names, just convert back from slug format
+    return value.split('-').map(word =>
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  }
+
+  private matchesUpgradeStatus(status: string, filterValue: string): boolean {
+    // Handle direct status matching for cleaner implementation
+    return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
+  }
+
+  getStatusClass(status: string): string {
+    switch (status.toLowerCase()) {
+      case 'ready':
+        return 'ready';
+      case 'not ready':
+        return 'not-ready';
+      case 'partial ready':
+        return 'partial-ready';
+      case 'completed':
+        return 'completed';
+      case 'failed':
+        return 'failed';
+      default:
+        return 'not-ready';
+    }
+  }
+
+  protected readonly pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+}
+
+interface PaginationDataDtoInterface {
+  total: number;
+  pageSizeOptions: number[];
+  pageSize: number;
+  pageIndex: number;
+}
+class PaginationDataDto {
+  total!: number;
+  pageSizeOptions!: number[];
+  pageSize!: number;
+  pageIndex!: number;
+
+  constructor(data?: PaginationDataDtoInterface) {
+    this.pageSizeOptions = data?.pageSizeOptions || PAGINATION_DATA_DEFAULTS.OPTIONS;
+    this.pageSize = data?.pageSize || PAGINATION_DATA_DEFAULTS.SIZE;
+    this.pageIndex = data?.pageIndex || PAGINATION_DATA_DEFAULTS.PAGE_INDEX;
+    this.total = data?.total || 0;
+  }
+}
+
+const PAGINATION_DATA_DEFAULTS = {
+  OPTIONS: [10, 20, 50, 100],
+  SIZE: 10,
+  PAGE_INDEX: 0
+};

package/projects/tuki/widgets/di2mt/widgets/user-upgrade/user-upgrade.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { UserUpgradeDataTableComponent } from "./user-upgrade-data-table/user-upgrade-data-table.component";
+import { CommonModule } from "@angular/common";
+import { MatButtonModule } from "@angular/material/button";
+import { MatTableModule } from "@angular/material/table";
+import { SharedModule } from "../../shared/shared.module";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatOptionModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+
+@NgModule({
+  declarations: [
+    UserUpgradeDataTableComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    MatTableModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatProgressSpinnerModule,
+    MatOptionModule,
+    MatPaginatorModule,
+    MatSelectModule
+  ],
+  exports: [
+    UserUpgradeDataTableComponent
+  ]
+})
+export class UserUpgradeModule {
+}

package/projects/tuki/widgets/di2mt/widgets/user-upgrade/user-upgrade.service.ts

@@ -0,0 +1,137 @@
+import { inject, Injectable } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { DeviceInfo, DeviceWithExtensions, UserUpgradeRecord } from "./types/user-upgrade";
+import { catchError, map, Observable, of, throwError } from "rxjs";
+import { API } from "../../api/api.endpoints";
+import { APIService } from "../../shared/services/api.service";
+import { Status, UpgradeStatus } from '../../shared/types/constants';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserUpgradeService {
+  private apiService = inject(APIService);
+
+  customerId!: string;
+
+  usersDataSource!: UserUpgradeRecord[];
+  filteredUsersDataSource!: UserUpgradeRecord[];
+
+  // TODO: Impl the user upgrade logic here
+  bulkUpgrade(users: UserUpgradeRecord[]): Observable<unknown> {
+    const body = this.generateUserUpgradeBody(users);
+    console.log('bulkUpgrade', users);
+
+    console.log(body);
+
+    // This is not done yet...
+    return this.apiService.post(
+      API.USER_UPGRADE.SINGLE_MIGRATION.replace(':featureName', "PERSON"),
+      body,
+      {}
+    ).pipe(catchError((err) => of(err)));
+  }
+
+  collectUsers(users: UserUpgradeRecord[]): Observable<unknown> {
+    const body = this.generateUserUpgradeBody(users);
+
+    console.log('collectUsers', body);
+
+    // This is not done yet...
+    return this.apiService.post(
+      API.USER_UPGRADE.SINGLE_COLLECT.replace(':featureName', 'PERSON'),
+      body,
+      {}
+    ).pipe(catchError((err) => of(err)));
+  }
+
+  getUsersUpgradeStatuses(users: UserUpgradeRecord[]): Observable<User2UpgradeStatusDTO[]> {
+    const body = this.generateUserUpgradeStatusBody(users);
+
+    console.log('getUsersUpgradeStatuses', body);
+
+    // This is not done yet...
+    return this.apiService.post(
+      API.USER_UPGRADE.UPGRADE_STATUS.replace(':customerId', this.customerId),
+      body,
+      {}
+    ).pipe(catchError((err) => of(err)));
+  }
+
+
+  generateUserUpgradeBody(users: UserUpgradeRecord[]): UserUpgradeBody {
+    const entities = users.map(record => ({cucmId: record.cucmId, entityId: record.userId}));
+    const customerId = users[0].customerId;
+
+    return {
+      customerId,
+      entities: {
+        PERSON: entities
+      }
+    };
+  }
+
+  generateUserUpgradeStatusBody(users: UserUpgradeRecord[]): Record<string, string[]> {
+    const body: Record<string, string[]> = {};
+    body[String(users[0].cucmId)] = users.map(user => String(user.userId));
+    return body;
+  }
+
+  getUserUpgradeStatusCounts(): Observable<any> {
+    return this.apiService.fetch(
+      API.USER_UPGRADE.GET_USERS_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId)
+    );
+  }
+
+  getUserUpgradeRecords(pageSize: number, pageIndex: number, params: UserSearchParams): Observable<any> {
+    return this.apiService.fetchPagination(
+      API.USER_UPGRADE.GET_USERS_UPGRADE_DATA.replace(':customerId', this.customerId),
+      pageSize,
+      pageIndex,
+      params
+    );
+  }
+
+  mapDevicesWithExtensions(devices: string[], deviceDetails: DeviceInfo[]): DeviceWithExtensions[] {
+    if (!devices?.length) {
+      return [];
+    }
+
+    return devices.map(deviceName => {
+      const found = deviceDetails.find(d => d.name === deviceName);
+
+      return {
+        deviceName,
+        extensions: found?.extensions ?? []
+      };
+    }) as DeviceWithExtensions[];
+  }
+}
+
+export type UserUpgradeBody = {
+  customerId: string;
+  entities: {
+    PERSON: { cucmId: number; entityId: string }[];
+  };
+};
+
+export class User2UpgradeStatusDTO {
+  userId!: string;
+  cucmId!: string;
+  upgradeStatus!: Status | UpgradeStatus;
+
+}
+export type UserSearchParams = {
+  userId?: string;
+  siteName?: string;
+  upgradeStatus?: string;
+}
+// UI filter keys coming from your controls
+export type UiFilterKey = 'Site' | 'User Upgrade Status' | 'User' | string;
+
+// map UI keys -> server keys
+export const FILTER_KEY_MAP: Record<UiFilterKey, keyof UserSearchParams> = {
+  'Site': 'siteName',
+  'User Upgrade Status': 'upgradeStatus',
+  'User': 'userId',
+};

package/projects/tuki/widgets/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/tuki/widgets'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/tuki/widgets/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/tuki/widgets",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/assets"
+  ]
+}

package/projects/tuki/widgets/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@tuki-io/tuki-widgets",
+  "version": "0.0.95",
+  "peerDependencies": {
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/material": "14.2.7",
+    "@angular/cdk": "14.2.7"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/projects/tuki/widgets/src/lib/widgets.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WidgetsComponent } from './widgets.component';
+
+describe('WidgetsComponent', () => {
+  let component: WidgetsComponent;
+  let fixture: ComponentFixture<WidgetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WidgetsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WidgetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});