tailjng 0.1.6 → 0.1.7

package/src/lib/components/table/table-complete/complete-table.types.ts

@@ -0,0 +1,28 @@
+import type { TableColumn } from 'tailjng';
+
+/** Maps upload/search keys for inline editing dropdowns. */
+export type CompleteTableEquivalenceConfig = {
+  keyColumnSearch: string;
+  keyReturn: string;
+  keyAlternate?: string;
+};
+
+export type CompleteTableEquivalenceConfigs = Record<string, CompleteTableEquivalenceConfig>;
+
+export type CompleteTableEquivalenceMaps = Record<string, Record<string | number, string>>;
+
+export type CompleteTableEquivalenceOption = {
+  key: any;
+  label: string;
+};
+
+/** Resolved equivalence metadata for one editable column. */
+export type CompleteTableEquivalenceData = {
+  keyReturn: string;
+  options: CompleteTableEquivalenceOption[];
+};
+
+export type CompleteTableSortDirection = 'asc' | 'desc' | 'none';
+
+/** Cell value resolver passed into search/sort helpers. */
+export type CompleteTableGetCellValueFn = (item: unknown, column: TableColumn<any>) => unknown;

package/src/lib/components/table/table-complete/complete-table.util.ts

@@ -0,0 +1,236 @@
+import type { TableColumn } from 'tailjng';
+import {
+  applyColumnDefaults,
+  formatCellDisplayValue,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  parseCellEditValue,
+  setNestedValue,
+} from '../table-crud-complete/complete-crud-table.util';
+import type {
+  CompleteTableEquivalenceConfigs,
+  CompleteTableEquivalenceData,
+  CompleteTableEquivalenceMaps,
+  CompleteTableGetCellValueFn,
+  CompleteTableSortDirection,
+} from './complete-table.types';
+
+export {
+  applyColumnDefaults,
+  formatCellDisplayValue,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  parseCellEditValue,
+  setNestedValue,
+};
+
+// ── Equivalence ──────────────────────────────────────────────────────────────
+
+export function getStaticTableEquivalenceData(
+  equivalenceConfigs: CompleteTableEquivalenceConfigs | undefined,
+  equivalences: CompleteTableEquivalenceMaps | undefined,
+  columnKey: string,
+): CompleteTableEquivalenceData | null {
+  for (const [, config] of Object.entries(equivalenceConfigs || {})) {
+    if (!config || config.keyColumnSearch !== columnKey) {
+      continue;
+    }
+
+    const keyReturn = config.keyReturn;
+    const idMap = equivalences?.[keyReturn];
+
+    if (!idMap) {
+      return null;
+    }
+
+    const options = Object.entries(idMap).map(([id, label]) => ({
+      key: +id,
+      label: String(label),
+    }));
+
+    return { keyReturn, options };
+  }
+
+  return null;
+}
+
+// ── Flat / nested objects ────────────────────────────────────────────────────
+
+export function flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  for (const key of Object.keys(obj)) {
+    const value = obj[key];
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(result, flattenObject(value as Record<string, unknown>, prefixedKey));
+    } else {
+      result[prefixedKey] = value;
+    }
+  }
+
+  return result;
+}
+
+export function rebuildObject(flatObj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  for (const key in flatObj) {
+    if (!Object.prototype.hasOwnProperty.call(flatObj, key)) {
+      continue;
+    }
+
+    const value = flatObj[key];
+
+    if (key.includes('.')) {
+      const parts = key.split('.');
+      let current: Record<string, unknown> = result;
+
+      for (let index = 0; index < parts.length; index++) {
+        const part = parts[index];
+
+        if (index === parts.length - 1) {
+          current[part] = value;
+        } else {
+          if (!current[part]) {
+            current[part] = {};
+          }
+          current = current[part] as Record<string, unknown>;
+        }
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+// ── Row index helpers ────────────────────────────────────────────────────────
+
+export function findRowIndexByJsonSnapshot<T>(rows: T[], item: T): number {
+  return rows.findIndex((row) => JSON.stringify(row) === JSON.stringify(item));
+}
+
+// ── Search ───────────────────────────────────────────────────────────────────
+
+export function filterDisplayDataBySearch(
+  staticData: Record<string, unknown>[],
+  columns: TableColumn<any>[],
+  searchQuery: string,
+  getValue: CompleteTableGetCellValueFn,
+): Record<string, unknown>[] {
+  const rebuilt = staticData.map((item) => rebuildObject(item));
+
+  if (!searchQuery?.trim()) {
+    return rebuilt;
+  }
+
+  const searchableKeys = columns.filter((column) => column.isSearchable).map((column) => column.key);
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+
+  return rebuilt.filter((item) =>
+    searchableKeys.some((key) => {
+      const column = columns.find((col) => col.key === key);
+      const value = column ? getValue(item, column) : undefined;
+      return value?.toString().toLowerCase().includes(normalizedQuery);
+    }),
+  );
+}
+
+// ── Sort ─────────────────────────────────────────────────────────────────────
+
+/** Sort state after clicking a column header (static table — clears column on desc→none). */
+export function resolveStaticTableSortState(
+  column: TableColumn<any>,
+  currentSortColumn: string | null,
+  currentSortDirection: CompleteTableSortDirection,
+): { sortColumn: string | null; sortDirection: CompleteTableSortDirection } {
+  if (currentSortColumn === column.key) {
+    if (currentSortDirection === 'asc') {
+      return { sortColumn: column.key, sortDirection: 'desc' };
+    }
+
+    if (currentSortDirection === 'desc') {
+      return { sortColumn: null, sortDirection: 'none' };
+    }
+
+    return { sortColumn: column.key, sortDirection: 'asc' };
+  }
+
+  return { sortColumn: column.key, sortDirection: 'asc' };
+}
+
+export function sortDisplayDataInPlace(
+  displayData: Record<string, unknown>[],
+  sortColumn: string | null,
+  sortDirection: CompleteTableSortDirection,
+  columns: TableColumn<any>[],
+  getValue: CompleteTableGetCellValueFn,
+): void {
+  if (!sortColumn || sortDirection === 'none') {
+    return;
+  }
+
+  const column = columns.find((col) => col.key === sortColumn);
+  if (!column) {
+    return;
+  }
+
+  displayData.sort((rowA, rowB) => {
+    const valA = getValue(rowA, column);
+    const valB = getValue(rowB, column);
+
+    if (valA === 'S/N' && valB !== 'S/N') {
+      return -1;
+    }
+
+    if (valB === 'S/N' && valA !== 'S/N') {
+      return 1;
+    }
+
+    if (valA == null || valB == null) {
+      return 0;
+    }
+
+    const compA = valA.toString().toLowerCase();
+    const compB = valB.toString().toLowerCase();
+
+    if (compA < compB) {
+      return sortDirection === 'asc' ? -1 : 1;
+    }
+
+    if (compA > compB) {
+      return sortDirection === 'asc' ? 1 : -1;
+    }
+
+    return 0;
+  });
+}
+
+/** Toggles a nested boolean field on one row (local edit, no API). */
+export function toggleNestedBooleanOnItem(
+  item: Record<string, unknown>,
+  column: TableColumn<any>,
+  currentValue: unknown,
+): void {
+  const updatedValue = !currentValue;
+  const keys = column.key.split('.');
+  let current: Record<string, unknown> = item;
+
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+
+    if (index === keys.length - 1) {
+      current[key] = updatedValue;
+    } else {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key] as Record<string, unknown>;
+    }
+  }
+}

package/src/lib/components/table/table-complete/index.ts

@@ -0,0 +1,2 @@
+export * from './complete-table.types';
+export * from './complete-table.util';

package/src/lib/components/table/table-crud-complete/complete-crud-table.animations.ts

@@ -0,0 +1,34 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+/** Row expand/collapse animation for standard table rows. */
+export const crudTableSlideToggleAnimation = trigger('slideToggle', [
+  state('collapsed', style({ height: '0', opacity: 0 })),
+  state('expanded', style({ height: '*', opacity: 1 })),
+  transition('collapsed <=> expanded', [animate('0.3s ease-in-out')]),
+]);
+
+/** Group header expand/collapse animation. */
+export const crudTableGroupSlideToggleAnimation = trigger('groupSlideToggle', [
+  state('collapsed', style({ height: '0', opacity: 0, overflow: 'hidden' })),
+  state('expanded', style({ height: '*', opacity: 1, overflow: 'visible' })),
+  transition('collapsed => expanded', [animate('380ms cubic-bezier(0.4, 0, 0.2, 1)')]),
+  transition('expanded => collapsed', [animate('300ms cubic-bezier(0.4, 0, 0.6, 1)')]),
+]);
+
+/** Staggered reveal for nested group rows. */
+export const crudTableGroupRowRevealAnimation = trigger('groupRowReveal', [
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateY(-4px)' }),
+    animate('280ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0)' })),
+  ]),
+  transition(':leave', [
+    animate('220ms cubic-bezier(0.4, 0, 0.6, 1)', style({ opacity: 0, transform: 'translateY(-4px)' })),
+  ]),
+]);
+
+/** All animations used by {@link JCompleteCrudTableComponent}. */
+export const CRUD_TABLE_ANIMATIONS = [
+  crudTableSlideToggleAnimation,
+  crudTableGroupSlideToggleAnimation,
+  crudTableGroupRowRevealAnimation,
+];