@tuki-io/tuki-widgets 0.0.76 → 0.0.77

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

@@ -1,345 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900');
-//@import '../../../../node_modules/font-awesome/scss/font-awesome';
-@import url('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;
-
-  .page-indexes-box,
-  .per-page-block {
-    justify-self: center;
-  }
-
-  mat-select {
-    width: 100px;
-  }
-}
-
-.overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.4);
-  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;
-}
-.status-ready {
-  color: #1170CF;
-}
-
-
-::ng-deep {
-  .mat-cell {
-    border-bottom: 1px solid #d6d6d6;
-    font-family: "Inter", sans-serif !important;
-  }
-  .mat-header-cell {
-    border-bottom: 1px solid #afafaf;
-    font-family: "Inter", sans-serif !important;
-  }
-  .progress-spinner-td {
-    position: relative;
-  }
-  #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;
-}
-
-.user-upgrade-table {
-  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;
-}
-
-::ng-deep .action-wrapper {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  color: #555555;
-}
-
-.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

@@ -1,313 +0,0 @@
-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 { 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();
-  private subscriptions = new Subscription();
-
-  statusCounts: any = {};
-
-  private activeFilters: { [key: string]: any } = {};
-
-  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)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((results: any) => {
-        const records = results.content as UserUpgradeRecord[]
-        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();
-    }
-  }
-
-  pageEvent (event: PageEvent): void {
-    this.pagination.pageIndex = event.pageIndex;
-    this.pagination.pageSize = event.pageSize;
-    this.getData();
-  }
-
-  changePerPageNumber(pageSizeEvent: any): void {
-    this.pagination.pageSize = pageSizeEvent.value;
-    this.pagination.pageIndex = 0;
-    this.getData();
-  }
-
-  private getData(): void {
-    this.dataPending = true;
-    const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((result) => {
-
-        this.data = new MatTableDataSource(result.content);
-        this.pagination.total = result.totalElements;
-        this.dataPending = false;
-      });
-    this.subscriptions.add(subsc1);
-  }
-
-  private initializeFilters(records: any[]): void {
-    if (records?.length) {
-      // 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 {
-    if (user && STATUS_ENTRIES[user.upgradeStatus] && STATUS_ENTRIES[user.upgradeStatus] === 'Ready')
-      user.pending = true;
-
-      this.userUpgradeService.collectUsers([user])
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(() => {
-          this.userUpgradeService.bulkUpgrade([user])
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-              user.pending = false;
-            })
-        });
-  }
-
-  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.dataPending = false;
-            })
-        });
-
-    }
-    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';
-    }
-  }
-
-  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

@@ -1,34 +0,0 @@
-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 {
-}