primekit 1.0.9 → 1.0.10

package/src/lib/lib/atomix-table/atomix-table.component.ts

@@ -0,0 +1,422 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  contentChild,
+  ContentChild,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import type {
+  Table,
+  TablePageEvent,
+  TableRowReorderEvent,
+} from 'primeng/table';
+import { Column, Row, TableActionButton } from './atomix-table.models';
+import { ConfirmationService } from 'primeng/api';
+import { DatePipe } from '@angular/common';
+import { AtomixSnackbarComponent } from '../atomix-snackbar/atomix-snackbar.component';
+import { CheckboxChangeEvent } from 'primeng/checkbox';
+
+@Component({
+  selector: 'atomix-table',
+  templateUrl: './atomix-table.component.html',
+  styleUrls: ['./atomix-table.component.css'],
+})
+export class AtomixTableComponent implements OnChanges {
+  @ViewChild(AtomixSnackbarComponent)
+  atomixSnackbarComponent!: AtomixSnackbarComponent;
+  @Input() rows!: Row[];
+
+  // The selected table rows passed from primeng
+  selectedTableRows: Row[] | undefined;
+
+  @Input() cols!: Column[];
+  @Input() size: number = 25;
+  @Input() currentPage: number = 0;
+  @Input() expandedColumns: Column[] = [];
+
+  @Input() emptyExpandableRowMessage = '';
+
+  @Input() secondaryRowsKey = '';
+
+  @Input() title = '';
+
+  @Input() enablePaginator = false;
+
+  @Input() reorderableColumns = true;
+
+  @Input() enableReorderableRow = false;
+
+  // Empty state properties
+  @Input() emptyStateMessage: string = 'No records found';
+
+  // TODO: Enable checkboxes if we can use checkboxes and press anywhere on row.
+  // @Input() enableCheckboxes: boolean = false;
+
+  // Enables multiselect without checkboxes
+  @Input() enableMultiselect = false;
+
+  // Enables an expandable row that another table fits inside of
+  @Input() enableExpandableRow = false;
+
+  // Enables an selecting all rows when the rows are initialized
+  @Input() enableSelectAllOnInit = false;
+
+  // Enables each column to have a filter checkbox. Also adds a "Clear All" button to remove all filters.
+  @Input() enableColumnFilters = false;
+
+  @Input() isLoading: boolean = false;
+
+  @Input() pageSize = 25;
+
+  // Required as only used when totalRecords must be set
+  @Input() totalRecords!: number;
+
+  // Hide main row actions when the row has child rows (useful for expandable tables)
+  @Input() hideMainRowActionsWhenExpanded = false;
+
+  // Disable expand button for rows without child rows (when using secondaryRowsKey)
+  @Input() disableExpandWhenNoChildren = false;
+
+  // Emits the rows the user has selected
+  @Output() selectedRows: EventEmitter<Row[]> = new EventEmitter();
+
+  @Output() pageChange: EventEmitter<{ page: number; size: number }> =
+    new EventEmitter();
+
+  @Output() filterChange: EventEmitter<any> = new EventEmitter();
+
+  @Input() enableEditButtons = false;
+  @Input() enableDeleteButtons = false;
+  @Input() actionButtonConfig: {
+    enabled: boolean;
+    icon: string;
+    message?: string;
+    confirmation?: boolean;
+    class?: string;
+  } = {
+    enabled: false,
+    icon: '',
+    message: '',
+    confirmation: true,
+    class: 'p-button-rounded p-button-help',
+  };
+
+  @Output() editRow: EventEmitter<any> = new EventEmitter();
+  @Output() actionRow: EventEmitter<any> = new EventEmitter();
+  @Output() deleteRow: EventEmitter<any> = new EventEmitter();
+  @Output() actionButton: EventEmitter<Row> = new EventEmitter();
+  @Output() expandedRow: EventEmitter<Row> = new EventEmitter();
+  @Output() dropdownSelectionChanged: EventEmitter<{
+    field: string;
+    value: any;
+  }> = new EventEmitter();
+  @Output() rowReordered: EventEmitter<{
+    previousIndex: number;
+    currentIndex: number;
+  }> = new EventEmitter();
+  @Output() logButton: EventEmitter<any> = new EventEmitter();
+  @Output() pageDropdownChange = new EventEmitter<any>();
+  @Output() childRowAction = new EventEmitter<any>();
+  @ContentChild(TemplateRef) rowDataOutlet!: TemplateRef<any>;
+
+  // Sort Functionality
+  @Input() sortBy: string = '';
+  @Input() orderBy: string = '';
+  @Input() isEnableSorting: boolean = false;
+  @Output() sortHandler = new EventEmitter<any>();
+
+  // Pagination Functionality
+  options = [
+    { label: 10, value: 10 },
+    { label: 25, value: 25 },
+    { label: 50, value: 50 },
+    { label: 75, value: 75 },
+    { label: 100, value: 100 },
+    { label: 500, value: 500 },
+  ];
+  first2: number = 0;
+  rows2: number = 10;
+
+  page: number = 0;
+  @Input() showPagination: boolean = true;
+  @Input() childRowsActionButtonsData: TableActionButton[] = [];
+
+  // Action Column
+  @Input() showActionsColumn: boolean = false;
+  @Input() showExpandedActionsColumn: boolean = false;
+  @Input() actionButtonsData!: TableActionButton[];
+  @ViewChild('dt1') dt1!: Table;
+
+  @Input() getChipCss: (type: string) => string = () => '';
+  @Input() getChipIcon: (type: string) => string = () => '';
+  constructor(
+    private confirmationService: ConfirmationService,
+    private datePipe: DatePipe,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  onRowsInit() {
+    if (this.rows.length === 0) return;
+
+    this.selectedTableRows = this.enableSelectAllOnInit ? this.rows : undefined;
+    this.selectedRows.emit(this.selectedTableRows);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.onRowsInit();
+    // if (changes['isLoading']) {
+    //   this.cdr.detectChanges(); // Force UI update
+    // }
+  }
+
+  onRowSelect() {
+    this.selectedRows.emit(this.selectedTableRows);
+  }
+
+  onRowUnselect() {
+    this.selectedRows.emit(this.selectedTableRows);
+  }
+
+  onCheckboxSelect() {
+    this.selectedRows.emit(this.selectedTableRows);
+  }
+
+  clearFilters() {
+    if (this.dt1) {
+      this.dt1.clear();
+      this.filterChange.emit({});
+    }
+  }
+
+  onPage(event: TablePageEvent) {
+    const page = event.first === 0 ? 0 : event.first / event.rows;
+    const size = event.rows;
+    this.pageChange.emit({ page, size });
+  }
+
+  filterResults(event: any) {
+    const filteredFilters: any = {};
+    for (const field of Object?.keys(event.filters)) {
+      const filtersArray = event.filters[field];
+      const nonNullFilters = filtersArray?.filter(
+        (item: any) => item.value !== null
+      );
+
+      if (nonNullFilters?.length > 0) {
+        // Convert Date objects to formatted string for date filters
+        const processedFilters = nonNullFilters.map((item: any) => {
+          if (item.value instanceof Date) {
+            return {
+              ...item,
+              matchMode: 'equals',
+              value: this.datePipe.transform(item.value, 'yyyy-MM-dd'),
+              operator: 'and',
+            };
+          }
+          // Handle date range filters (array of dates)
+          if (
+            Array.isArray(item.value) &&
+            item.value.length === 2 &&
+            item.value.every((v: unknown) => v instanceof Date)
+          ) {
+            return {
+              ...item,
+              matchMode: 'between',
+              value: item.value.map((date: Date) =>
+                this.datePipe.transform(date, 'yyyy-MM-dd')
+              ),
+              operator: 'and',
+            };
+          }
+          // For date filter strings, also normalize to equals matchMode
+          if (item.matchMode === 'dateIs') {
+            return {
+              ...item,
+              matchMode: 'equals',
+              operator: 'and',
+            };
+          }
+          return item;
+        });
+        filteredFilters[field] = processedFilters;
+      }
+    }
+    this.filterChange.emit(filteredFilters);
+  }
+
+  deleteRowConfirmation(rowData: any) {
+    this.confirmationService.confirm({
+      message: 'Delete this item?',
+      accept: () => {
+        this.deleteRow.emit(rowData);
+      },
+    });
+  }
+
+  actionRowConfirmation(rowData: Row) {
+    if (this.actionButtonConfig.confirmation) {
+      this.confirmationService.confirm({
+        message: this.actionButtonConfig.message,
+        accept: () => {
+          this.actionButton.emit(rowData);
+        },
+      });
+    } else {
+      this.actionButton.emit(rowData);
+    }
+  }
+
+  onRowReorder(event: TableRowReorderEvent) {
+    this.rowReordered.emit({
+      previousIndex: event.dragIndex as number,
+      currentIndex: event.dropIndex as number,
+    });
+  }
+
+  getRowDataValue(rowData: any, field: string, type: string) {
+    let value = field
+      .split('.')
+      .reduce((acc, part) => acc && acc[part], rowData);
+
+    if (type === 'date') {
+      value = this.datePipe.transform(value, 'MM/dd/yyyy');
+    }
+
+    return value;
+  }
+  copyHandler(event: Event, element: any) {
+    event.stopPropagation();
+    navigator.clipboard.writeText(element);
+    this.atomixSnackbarComponent.showSnackbar(`Copied ${element} to clipboard`);
+  }
+
+  customSort(columnName: any) {
+    let direction =
+      this.sortBy !== columnName
+        ? 'asc'
+        : this.orderBy === 'asc'
+          ? 'desc'
+          : this.orderBy === 'desc'
+            ? ''
+            : 'asc';
+
+    this.sortBy = columnName;
+    this.orderBy = direction;
+    this.sortHandler.emit({ columnName, direction });
+  }
+
+  handlePageChange(event: any) {
+    this.pageChange.emit(event);
+  }
+
+  dropdownHandler(event: any) {
+    this.pageDropdownChange.emit(event?.value);
+  }
+
+  handleActionClick(action: any, rowData: any) {
+    if (action.click) {
+      action.click(rowData); // Call the passed function with the row data
+    }
+  }
+
+  handleChildActionClick(action: any, rowData: any) {
+    if (action.click) {
+      // If the action provides a custom click handler, call it
+      action.click(rowData);
+    } else {
+      // Normalize the action to a string if action.action exists
+      const actionName = action?.action || action?.tooltip || action;
+      // Emit using the expected shape: { action, childRow }
+      this.childRowAction.emit({ action: actionName, childRow: rowData });
+    }
+  }
+
+  shouldShowAction(action: any, rowData: any): boolean {
+    if (!action) return true;
+    if (action.showOnlyWhen) {
+      return Object.entries(action.showOnlyWhen).every(([key, value]) => {
+        const rowVal = (rowData?.[key] ?? '')?.toString();
+        if (!rowVal) return false;
+        return rowVal.toLowerCase() === String(value).toLowerCase();
+      });
+    }
+    return true;
+  }
+
+  @Input() isAllSelected: boolean = false;
+  @Output() headerCheckboxHandler = new EventEmitter<boolean>();
+  @Output() checkboxHandler = new EventEmitter<any>();
+  isAnyRowSelected(): boolean {
+    if (this.rows?.every((row) => row?.isSelected)) {
+      this.isAllSelected = true;
+      return false;
+    } else if (this.rows?.some((row: any) => row.isSelected)) {
+      this.isAllSelected = true;
+      return true;
+    } else {
+      this.isAllSelected = false;
+      return false;
+    }
+  }
+
+  toggleAllRows(event: CheckboxChangeEvent) {
+    this.rows?.forEach((row) => {
+      row.isSelected = this.isAllSelected;
+    });
+    this.headerCheckboxHandler.emit(this.isAllSelected);
+    this.checkboxHandler.emit();
+  }
+
+  singleCheckboxHandler(event: CheckboxChangeEvent, row: any) {
+    this.isAllSelected = true;
+    this.headerCheckboxHandler.emit(false);
+    this.checkboxHandler.emit();
+  }
+
+  isString(value: any): boolean {
+    return typeof value === 'string';
+  }
+
+  handleDateRangeFilter(
+    value: any,
+    filterCallback: (value: any) => void
+  ): void {
+    // Only apply filter when both dates are selected (array with 2 dates)
+    if (
+      Array.isArray(value) &&
+      value.length === 2 &&
+      value.every((v) => v instanceof Date)
+    ) {
+      filterCallback(value);
+    } else if (value === null) {
+      // Clear the filter when value is null (e.g., when cross icon is clicked)
+      filterCallback(null);
+    }
+  }
+
+  hasChildRows(rowData: any): boolean {
+    if (!this.secondaryRowsKey) {
+      return false;
+    }
+    const childRows = rowData[this.secondaryRowsKey];
+    return Array.isArray(childRows) && childRows.length > 0;
+  }
+
+  shouldShowActionButton(action: any, rowData: any): boolean {
+    if (this.hideMainRowActionsWhenExpanded && this.hasChildRows(rowData)) {
+      return false;
+    }
+
+    if (action.showOnlyWhenNoChildRows && this.hasChildRows(rowData)) {
+      return false;
+    }
+
+    return true;
+  }
+}

package/src/lib/lib/atomix-table/atomix-table.models.ts

@@ -0,0 +1,39 @@
+/**
+ * TODO: Move this to models folder
+ */
+export interface Row {
+  id: string;
+  [k: string]: unknown;
+  isSelected?: boolean;
+}
+/**
+ * TODO: Move this to models folder
+ */
+export interface Column {
+  name: string;
+  field: string;
+  type?: string;
+  isEditable?: boolean;
+  isRequired?: boolean;
+  filterDisabled?: boolean;
+  hideFilter?: boolean;
+  isHide?: boolean;
+  filterByDropdown?: { value: string; label: string }[];
+  filterByDate?: boolean;
+  filterByDateRange?: boolean;
+  hideAdvancedFilters?: boolean;
+  copyIcon?: boolean;
+  chip?: boolean;
+  chipIcon?: boolean;
+  progress?: boolean;
+}
+
+export type SortDirection = 'asc' | 'desc' | '';
+export interface TableActionButton {
+  icon?: string;
+  class?: string;
+  tooltip?: string;
+  click?: (event: any) => void;
+  disabled?: boolean;
+  showOnlyWhen?: { [k: string]: string };
+}

package/src/lib/lib/atomix-tag/atomix-tag.component.html

@@ -0,0 +1,6 @@
+<p-tag
+  [value]="value"
+  [rounded]="rounded"
+  [icon]="icon"
+  [styleClass]="styleClass"
+/>

package/src/lib/lib/atomix-tag/atomix-tag.component.spec.ts

@@ -0,0 +1,47 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixTagComponent } from './atomix-tag.component';
+
+describe('AtomixTagComponent', () => {
+  let component: AtomixTagComponent;
+  let fixture: ComponentFixture<AtomixTagComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixTagComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixTagComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should accept value input', () => {
+      component.value = 'Active';
+      fixture.detectChanges();
+      expect(component.value).toBe('Active');
+    });
+
+    it('should accept rounded input', () => {
+      component.rounded = true;
+      fixture.detectChanges();
+      expect(component.rounded).toBe(true);
+    });
+
+    it('should accept icon input', () => {
+      component.icon = 'pi pi-check';
+      fixture.detectChanges();
+      expect(component.icon).toBe('pi pi-check');
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-tag';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-tag');
+    });
+  });
+});

package/src/lib/lib/atomix-tag/atomix-tag.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'atomix-tag',
+  templateUrl: './atomix-tag.component.html',
+  styleUrls: ['./atomix-tag.component.css'],
+})
+export class AtomixTagComponent {
+  @Input() value!: string;
+  @Input() rounded!: boolean;
+  @Input() icon!: string;
+  @Input() styleClass!: string;
+}

package/src/lib/lib/utils/prime-icons.util.spec.ts

@@ -0,0 +1,21 @@
+import { getEditIcon, getTrashIcon, getPowerOffIcon } from './prime-icons.util';
+
+describe('prime-icons.util', () => {
+  describe('getEditIcon', () => {
+    it('should return the pencil icon class', () => {
+      expect(getEditIcon()).toBe('pi pi-pencil');
+    });
+  });
+
+  describe('getTrashIcon', () => {
+    it('should return the trash icon class', () => {
+      expect(getTrashIcon()).toBe('pi pi-trash');
+    });
+  });
+
+  describe('getPowerOffIcon', () => {
+    it('should return the power-off icon class', () => {
+      expect(getPowerOffIcon()).toBe('pi pi-power-off');
+    });
+  });
+});

package/src/lib/lib/utils/prime-icons.util.ts

@@ -0,0 +1,11 @@
+export function getEditIcon(): string {
+  return 'pi pi-pencil';
+}
+
+export function getTrashIcon(): string {
+  return 'pi pi-trash';
+}
+
+export function getPowerOffIcon(): string {
+  return 'pi pi-power-off';
+}

package/src/lib/primekit.component.spec.ts

@@ -0,0 +1,19 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PrimekitComponent } from './primekit.component';
+
+describe('PrimekitComponent', () => {
+  let component: PrimekitComponent;
+  let fixture: ComponentFixture<PrimekitComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PrimekitComponent],
+    });
+    fixture = TestBed.createComponent(PrimekitComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/primekit.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-primekit',
+  standalone: true,
+  imports: [],
+  template: ` <p>primekit works!</p> `,
+  styles: ``,
+})
+export class PrimekitComponent {}