@tuki-io/tuki-widgets 0.0.64 → 0.0.65

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

@@ -0,0 +1,275 @@
+@import "../../../styles/variables.scss";
+
+.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;
+}
+
+.user-upgrade-table {
+  font-family: $main-font;
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+
+  .mat-header-row {
+    // background-color: #ededed;
+    font-size: 12px;
+    height: 35px;
+  }
+
+  .mat-cell {
+    border-bottom: 1px solid #d6d6d6;
+  }
+  .mat-header-cell {
+    border-bottom: 1px solid #afafaf;
+  }
+
+  .mat-row {
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+
+    &.selected-row {
+      background-color: rgba(8, 89, 156, 0.1);
+    }
+  }
+
+  // User info styling
+  .user-info {
+    .user-name {
+      font-weight: 500;
+      color: #212121;
+      // margin-bottom: 2px;
+    }
+
+    .user-email {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Site info styling
+  .site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .site-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1170cf;
+    }
+  }
+
+  // Device info styling
+  .device-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .device-name-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      // margin-bottom: 2px;
+
+      .device-name {
+        font-weight: 500;
+        color: #212121;
+      }
+
+      .device-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #f8cd00;
+      }
+    }
+
+    .device-model {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status indicators
+  .status-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.ready {
+        background-color: #1d805f;
+      }
+
+      &.partial-ready {
+        background-color: #f8cd00;
+      }
+
+      &.not-ready {
+        background-color: #9e9e9e;
+      }
+
+      &.completed {
+        background-color: #1d805f;
+      }
+
+      &.failed {
+        background-color: #f23933;
+      }
+    }
+  }
+
+  // Dependencies styling
+  .dependencies-text {
+    font-size: 12px;
+    background-color: #ffe9e9;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    color: #000;
+  }
+
+  // Upgrade status cell
+  .upgrade-status-cell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  // Upgrade button styling
+  .upgrade-button {
+    border: 1px solid #08599c !important;
+    color: #08599c !important;
+    background: white !important;
+    // padding: 6px 16px;
+    border-radius: 20px !important;
+    font-size: 14px !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+    height: 32px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    &:hover {
+      background-color: #e3f2fd !important;
+    }
+  }
+
+  // Checkbox styling
+  .custom-checkbox {
+    .mdc-checkbox {
+      padding: 8px;
+    }
+  }
+}
+
+.table-action-panel {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.action-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.upgrade-bulk-button {
+  border: 1px solid #000 !important;
+  color: white !important;
+  background: #000 !important;
+  // padding: 6px 16px;
+  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;
+
+  &:hover {
+    background-color: #212121 !important;
+  }
+
+  &:disabled {
+    background-color: #888 !important;
+    color: #fff !important;
+    cursor: not-allowed !important;
+    border-color: #888 !important;
+    opacity: 0.25 !important;
+  }
+}
+
+// Target the specific Material checkbox classes that override colors
+:host ::ng-deep {
+  .user-upgrade-table
+    .mat-checkbox-checked.mat-accent
+    .mat-checkbox-background {
+    background-color: #08599c !important;
+    border-color: #08599c !important;
+  }
+
+  .user-upgrade-table
+    .mat-checkbox-indeterminate.mat-accent
+    .mat-checkbox-background {
+    background-color: #08599c !important;
+    border-color: #08599c !important;
+  }
+
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background {
+    border-color: rgba(8, 89, 156, 0.6) !important;
+  }
+
+  // Fix the ripple effect and focus states - this removes the pink flash
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element {
+    background-color: rgba(8, 89, 156, 0.1) !important;
+  }
+
+  .user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background {
+    background-color: rgba(8, 89, 156, 0.1) !important;
+  }
+
+  // Fix focus indicator and overlay colors
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame {
+    border-color: rgba(8, 89, 156, 0.6) !important;
+  }
+
+  // Ensure checkmarks are white
+  .user-upgrade-table .mat-checkbox-checkmark {
+    color: white !important;
+  }
+
+  .user-upgrade-table .mat-checkbox-checkmark-path {
+    stroke: white !important;
+  }
+
+  .user-upgrade-table .mat-checkbox-mixedmark {
+    border-color: white !important;
+  }
+}

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

@@ -0,0 +1,218 @@
+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 { UpgradeOverviewService } from "../../upgrade-overview/upgrade-overview.service";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs";
+import { 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";
+
+@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[];
+    data!: MatTableDataSource<UserUpgradeRecord>;
+    displayedColumns: string[] = ['select', 'user', 'site', 'device', 'dialPlanStatus', 'dependencies', 'userUpgradeStatus'];
+    selection = new SelectionModel<UserUpgradeRecord>(true, []);
+    filters: TableFilter[] = [];
+
+    statusCounts: any = {};
+
+    private activeFilters: { [key: string]: any } = {};
+
+    ngOnInit(): void {
+        this.apiService.token = this.token;
+        this.userUpgradeService.customerId = this.customerId;
+        
+        this.userUpgradeService.getUserUpgradeRecords()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((records) => {
+                this.data = new MatTableDataSource(records);
+                this.setupCustomFilter();
+                this.initializeFilters(records);
+            });
+
+        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;
+            });
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    private initializeFilters(records: any[]): void {
+        // Extract unique sites from actual data
+        const uniqueSites = [...new Set(records.map(record => record.siteName))];
+        const siteOptions = uniqueSites.map(site => ({
+            label: site,
+            value: site.toLowerCase().replace(/\s+/g, '-')
+        }));
+
+        // Extract unique statuses from actual data
+        const uniqueStatuses = [...new Set(records.map(record => record.upgradeStatus))];
+        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: []
+            },
+            {
+                id: 'sites',
+                type: 'select',
+                columnKey: 'Site',
+                placeholder: 'Sites',
+                options: siteOptions
+            },
+            {
+                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));
+    }
+
+    upgradeUser(user: UserUpgradeRecord): void {
+        this.userUpgradeService.bulkUpgrade([user])
+    }
+    
+    upgradeSelectedUsers(): void {
+        this.userUpgradeService.bulkUpgrade(this.selection.selected);
+    }
+
+    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';
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+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";
+
+@NgModule({
+    declarations: [
+        UserUpgradeDataTableComponent
+    ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        MatTableModule,
+        MatButtonModule,
+        MatCheckboxModule
+    ],
+    exports: [
+        UserUpgradeDataTableComponent
+    ]
+})
+export class UserUpgradeModule {}

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

@@ -0,0 +1,73 @@
+import { inject, Injectable } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { 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";
+
+@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 entities = users.map(record => ({ cucmId: record.cucmId, entityId: record.userId }));
+        const customerId = users[0].customerId;
+        const siteId = users[0].siteId;
+
+        const body = {
+            customerId,
+            siteId,
+            entities: {
+                'PERSON': entities
+            }
+        };
+
+        console.log(body);
+    
+        // This is not done yet...
+        return this.apiService.post(
+            API.USER_UPGRADE.UPGRADE_USER.replace(':siteId', siteId).replace(':userId', users[0].userId),
+            body,
+            {}
+        ).pipe(catchError((err) => of(err)));
+    }
+
+    getUserUpgradeStatusCounts(): Observable<any> {
+        return this.apiService.fetch(
+            API.USER_UPGRADE.GET_USERS_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId)
+        );
+    }
+
+    getUserUpgradeRecords(): Observable<UserUpgradeRecord[]> {
+        return this.apiService.fetch(
+            API.USER_UPGRADE.GET_USERS_UPGRADE_DATA.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => { 
+            return resp.content as UserUpgradeRecord[];
+
+            // This was added because of mapping issues with BE resp;
+
+            // return resp.content.map((record: UserUpgradeRecord) => ({
+            //     userId: record.userId,
+            //     userName: record.userName,
+            //     customerId: record.customerId,
+            //     siteId: record.siteId,
+            //     siteName: record.siteName,
+            //     devices: record.devices,
+            //     cucmId: record.cucmId,
+            //     primaryExtension: record.primaryExtension,
+            //     deviceStatus: record.deviceStatus,
+            //     dialPlanStatus: record.dialPlanStatus,
+            //     dependenciesStatus: record.dependenciesStatus,
+            //     upgradeStatus: record.upgradeStatus
+            // } as UserUpgradeRecord));
+        }));
+    }
+}

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,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/tuki/widgets",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/tuki/widgets/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@tuki-io/tuki-widgets",
+  "version": "0.0.65",
+  "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();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-widgets',
+  template: `
+    <p>
+      widgets works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class WidgetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}