tailjng 0.1.6 → 0.1.7

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

@@ -0,0 +1,723 @@
+import type { Params } from '@angular/router';
+import type {
+  FilterSelect,
+  JConverterCrudService,
+  JGenericCrudService,
+  OptionsTable,
+  SortDirection,
+  TableColumn,
+} from 'tailjng';
+import { generatePaginationPages } from '../../paginator/paginator-complete/complete-paginator.util';
+import type {
+  BuildCrudTableQueryParamsOptions,
+  CrudTableCheckboxToggleTarget,
+  CrudTableEquivalenceConfigs,
+  CrudTableEquivalenceData,
+  CrudTableEquivalenceMaps,
+  CrudTableGetCellValueFn,
+  CrudTableGroupTableConfig,
+  CrudTableRowColorSemantic,
+} from './complete-crud-table.types';
+
+// ── Row colors ───────────────────────────────────────────────────────────────
+
+export const CRUD_TABLE_ROW_COLOR_CLASS_MAP: Record<CrudTableRowColorSemantic, string> = {
+  primary: 'bg-primary/20     hover:bg-dark-primary/30!   dark:hover:bg-dark-primary/20',
+  success: 'bg-green-500/20   hover:bg-green-500/30!      dark:hover:bg-green-500/20',
+  error: '  bg-red-500/20     hover:bg-red-500/30!        dark:hover:bg-red-500/20',
+  warning: 'bg-yellow-500/20  hover:bg-yellow-500/30!     dark:hover:bg-yellow-500/20',
+  info: '   bg-blue-500/20    hover:bg-blue-500/30!       dark:hover:bg-blue-500/20',
+};
+
+// ── Columns ──────────────────────────────────────────────────────────────────
+
+/** Applies default `visible`, `sortable`, and `isSearchable` on column definitions. */
+export function applyColumnDefaults(columns: TableColumn<any>[]): void {
+  columns.forEach((column) => {
+    if (column.visible === undefined) {
+      column.visible = true;
+    }
+
+    if (column.sortable === undefined) {
+      column.sortable = true;
+    }
+
+    if (column.isSearchable === undefined) {
+      column.isSearchable = true;
+    }
+  });
+}
+
+/** Counts columns with `visible !== false`. */
+export function countVisibleColumns(columns: TableColumn<any>[]): number {
+  return columns.filter((column) => column.visible).length;
+}
+
+/**
+ * Styles for `<col>` in `table-layout: fixed` — copies `minWidth` to `width` when needed.
+ */
+export function getColumnColStyles(column: TableColumn<any>): Record<string, string> | undefined {
+  if (!column.styles) {
+    return undefined;
+  }
+
+  const styles = { ...column.styles };
+
+  if (styles['minWidth'] && !styles['width']) {
+    styles['width'] = styles['minWidth'];
+  }
+
+  return styles;
+}
+
+export function getGroupExpandColspan(
+  columns: TableColumn<any>[],
+  isNumbering: boolean,
+  isOptions: boolean,
+): number {
+  let colspan = countVisibleColumns(columns);
+
+  if (isNumbering) {
+    colspan += 1;
+  }
+
+  if (isOptions) {
+    colspan += 1;
+  }
+
+  return colspan;
+}
+
+export function getGroupCollapsedHeaderColspan(
+  columns: TableColumn<any>[],
+  isOptions: boolean,
+): number {
+  return 1 + countVisibleColumns(columns) + (isOptions ? 1 : 0);
+}
+
+// ── Pagination ───────────────────────────────────────────────────────────────
+
+export function calculateTotalPages(totalItems: number, itemsPerPage: number): number {
+  return Math.ceil(totalItems / itemsPerPage);
+}
+
+export function calculateStartIndex(currentPage: number, itemsPerPage: number): number {
+  return (currentPage - 1) * itemsPerPage;
+}
+
+/** Re-exported sliding window used by the embedded paginator. */
+export { generatePaginationPages };
+
+// ── Query params ─────────────────────────────────────────────────────────────
+
+export function collectSearchFieldKeys(columns: TableColumn<any>[]): string[] {
+  const baseSearchKeys = columns.filter((column) => column.isSearchable).map((column) => column.key);
+  const extraSearchKeys = columns.flatMap((column) =>
+    (column.extraSearchFields || []).map((field) => String(field)),
+  );
+  return [...baseSearchKeys, ...extraSearchKeys];
+}
+
+/** Builds list query params via {@link JGenericCrudService.params}. */
+export function buildCrudTableQueryParams(
+  genericService: JGenericCrudService,
+  options: BuildCrudTableQueryParamsOptions,
+): Params {
+  const params: Params = genericService.params({
+    page: options.currentPage,
+    limit: options.itemsPerPage,
+    sort: {
+      column: options.sortColumn,
+      direction: options.sortDirection,
+    },
+    filters: options.filters,
+    defaultFilters: options.defaultFilters,
+  });
+
+  if (options.searchQuery?.trim()) {
+    params['search'] = options.searchQuery;
+    params['searchFields'] = collectSearchFieldKeys(options.columns);
+  }
+
+  if (options.isGroupTable && typeof options.groupTable['getGroupParams'] === 'function') {
+    Object.assign(params, options.groupTable['getGroupParams']());
+  }
+
+  return params;
+}
+
+// ── Sorting ──────────────────────────────────────────────────────────────────
+
+/** Computes next sort column/direction after a header click. */
+export function resolveNextSortState(
+  column: TableColumn<any>,
+  currentSortColumn: string | null,
+  currentSortDirection: SortDirection,
+  getSortKey: (value: unknown) => string,
+): { sortColumn: string | null; sortDirection: SortDirection } {
+  const currentSortKey = getSortKey(currentSortColumn);
+  const columnSortKey = getSortKey(column.key);
+
+  if (currentSortKey === columnSortKey) {
+    let sortDirection = currentSortDirection;
+
+    if (sortDirection === 'asc') {
+      sortDirection = 'desc';
+    } else if (sortDirection === 'desc') {
+      sortDirection = 'none';
+    } else {
+      sortDirection = 'asc';
+    }
+
+    return { sortColumn: column.key, sortDirection };
+  }
+
+  return { sortColumn: column.key, sortDirection: 'asc' };
+}
+
+// ── Expand rows ──────────────────────────────────────────────────────────────
+
+export function getExpandedRowCacheKey(item: Record<string, unknown>, isGroupTable: boolean): string {
+  if (isGroupTable) {
+    return `${item['title']}-${item['description']}`;
+  }
+
+  const id = item['id'];
+  return (id || JSON.stringify(item)) as string;
+}
+
+/** Rebuilds `expandedRows` after a data refresh using cached keys. */
+export function restoreExpandedRowsAfterLoad(
+  data: Record<string, unknown>[],
+  expandedKeys: Set<string>,
+  isGroupTable: boolean,
+): Set<Record<string, unknown>> {
+  const restored = new Set<Record<string, unknown>>();
+
+  if (expandedKeys.size === 0) {
+    return restored;
+  }
+
+  data.forEach((item) => {
+    if (expandedKeys.has(getExpandedRowCacheKey(item, isGroupTable))) {
+      restored.add(item);
+    }
+  });
+
+  return restored;
+}
+
+export function cacheExpandedRowKeys(
+  expandedRows: Set<Record<string, unknown>>,
+  isGroupTable: boolean,
+): Set<string> {
+  const keys = new Set<string>();
+  expandedRows.forEach((item) => {
+    keys.add(getExpandedRowCacheKey(item, isGroupTable));
+  });
+  return keys;
+}
+
+// ── Row styling ──────────────────────────────────────────────────────────────
+
+export function buildRowNgClass(
+  row: Record<string, unknown>,
+  columns: TableColumn<any>[],
+  hasExpandableRows: boolean,
+): Record<string, boolean> {
+  const base: Record<string, boolean> = {
+    'cursor-pointer': hasExpandableRows,
+  };
+
+  const columnWithColor = columns.find((column) => !!column.rowColorCondition);
+  if (!columnWithColor) {
+    return base;
+  }
+
+  const keys = columnWithColor.key.split('.');
+  let value: unknown = row;
+
+  for (const key of keys) {
+    value = (value as Record<string, unknown> | undefined)?.[key];
+  }
+
+  const normalizedValue =
+    value === null || value === undefined ? 'null' : String(value).toUpperCase();
+  const semanticClass = columnWithColor.rowColorCondition?.[normalizedValue] as
+    | CrudTableRowColorSemantic
+    | undefined;
+
+  if (semanticClass && CRUD_TABLE_ROW_COLOR_CLASS_MAP[semanticClass]) {
+    base[CRUD_TABLE_ROW_COLOR_CLASS_MAP[semanticClass]] = true;
+  }
+
+  return base;
+}
+
+// ── Cell / value helpers ─────────────────────────────────────────────────────
+
+export function isBooleanValue(value: unknown): boolean {
+  return typeof value === 'boolean';
+}
+
+export function isDateValue(value: unknown): boolean {
+  return value instanceof Date || (typeof value === 'string' && !Number.isNaN(Date.parse(value)));
+}
+
+/** Resolves nested cell value before converter formatting. */
+export function resolveRawCellValue(item: Record<string, unknown>, column: TableColumn<any>): unknown {
+  if (typeof column.valueGetter === 'function') {
+    return column.valueGetter(item);
+  }
+
+  const keys = column.key.split('.');
+  let value: unknown = item;
+
+  for (const key of keys) {
+    if (value != null) {
+      value = (value as Record<string, unknown>)[key];
+    } else {
+      value = null;
+      break;
+    }
+  }
+
+  return value;
+}
+
+/** Formats a cell for display (`S/N` when empty). */
+export function formatCellDisplayValue(
+  item: Record<string, unknown>,
+  column: TableColumn<any>,
+  converterService: JConverterCrudService,
+): unknown {
+  const value = resolveRawCellValue(item, column);
+
+  if (value === null || value === undefined) {
+    return 'S/N';
+  }
+
+  return converterService.formatData(value, column) ?? value;
+}
+
+/** Parses a cell value for inline editing. */
+export function parseCellEditValue(
+  item: Record<string, unknown>,
+  column: TableColumn<any>,
+  converterService: JConverterCrudService,
+): unknown {
+  const value = resolveRawCellValue(item, column);
+  return converterService.parseData(value, column);
+}
+
+export function shouldStopCellClickPropagation(column: TableColumn<any>): boolean {
+  return column.stopRowClickOnCellClick !== false;
+}
+
+// ── Checkbox toggle ──────────────────────────────────────────────────────────
+
+export function resolveCheckboxToggleTarget(
+  item: Record<string, unknown>,
+  column: TableColumn<any>,
+  mainEndpoint: string,
+): CrudTableCheckboxToggleTarget {
+  let key = column.key;
+  let recordId: any;
+  let endpoint = mainEndpoint;
+
+  if (key.includes('.')) {
+    const parts = key.split('.');
+    const parent = parts[0];
+    key = parts[parts.length - 1];
+    recordId = item[`id_${parent}`];
+    endpoint = parent;
+  } else {
+    recordId = item[`id_${mainEndpoint}`];
+  }
+
+  return { key, recordId, endpoint };
+}
+
+export function applyNestedBooleanToggle(
+  item: Record<string, unknown>,
+  columnKey: string,
+  currentValue: boolean,
+): void {
+  if (columnKey.includes('.')) {
+    const parts = columnKey.split('.');
+    const parent = parts[0];
+    const lastKey = parts[parts.length - 1];
+    item[parent] = { ...(item[parent] as Record<string, unknown>), [lastKey]: !currentValue };
+    return;
+  }
+
+  item[columnKey] = !currentValue;
+}
+
+// ── Table options ────────────────────────────────────────────────────────────
+
+export function resolveOptionTooltip(
+  tooltip: string | ((data?: unknown) => string) | undefined,
+  data: unknown,
+): string {
+  if (typeof tooltip === 'function') {
+    return tooltip(data);
+  }
+
+  return tooltip ?? '';
+}
+
+export function resolveOptionIcon(
+  icon: unknown | ((data?: unknown) => unknown),
+  data: unknown,
+): unknown {
+  if (typeof icon === 'function') {
+    return icon(data);
+  }
+
+  return icon;
+}
+
+export function resolveOptionDisabled(option: OptionsTable, data: unknown): boolean {
+  if (typeof option.disabled === 'function') {
+    return option.disabled(data);
+  }
+
+  return !!option.disabled;
+}
+
+export function resolveOptionVisible(option: OptionsTable, data: unknown): boolean {
+  if (typeof option.isVisible === 'function') {
+    return option.isVisible(data);
+  }
+
+  return option.isVisible !== false;
+}
+
+export function mergeOptionNgClasses(
+  optionNgClass: ((data?: unknown) => unknown) | undefined,
+  data: unknown,
+): Record<string, boolean> {
+  const baseClass: Record<string, boolean> = {
+    'min-w-auto p-[1px]! pl-[5px]! pr-[5px]!': true,
+  };
+
+  let dynamicClass: unknown = {};
+
+  if (typeof optionNgClass === 'function') {
+    dynamicClass = optionNgClass(data);
+  } else {
+    dynamicClass = optionNgClass ?? {};
+  }
+
+  if (typeof dynamicClass === 'string') {
+    return { ...baseClass, [dynamicClass]: true };
+  }
+
+  return { ...baseClass, ...(dynamicClass as Record<string, boolean>) };
+}
+
+// ── Inline editing ───────────────────────────────────────────────────────────
+
+export function deepCopy<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj.getTime()) as T;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepCopy(item)) as T;
+  }
+
+  const copy: Record<string, unknown> = {};
+
+  for (const key in obj as Record<string, unknown>) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      copy[key] = deepCopy((obj as Record<string, unknown>)[key]);
+    }
+  }
+
+  return copy as T;
+}
+
+export function setNestedValue(
+  item: Record<string, unknown>,
+  columnKey: string,
+  value: unknown,
+): void {
+  const keys = columnKey.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] = value;
+    } else {
+      if (!current[key]) {
+        current[key] = {};
+      }
+      current = current[key] as Record<string, unknown>;
+    }
+  }
+}
+
+export function hasEquivalenceConfig(
+  equivalenceConfigs: CrudTableEquivalenceConfigs | undefined,
+  columnKey: string,
+): boolean {
+  for (const [, config] of Object.entries(equivalenceConfigs || {})) {
+    if (config?.keyColumnSearch === columnKey) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function getEquivalenceData(
+  equivalenceConfigs: CrudTableEquivalenceConfigs | undefined,
+  equivalences: CrudTableEquivalenceMaps | undefined,
+  columnKey: string,
+): CrudTableEquivalenceData | 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,
+      optional: config.optional || false,
+    };
+  }
+
+  return null;
+}
+
+// ── Filters ──────────────────────────────────────────────────────────────────
+
+/** Wraps filter `onSelected` handlers so table filters reload automatically. */
+export function bindFilterSelectHandlers(
+  filtersSelect: FilterSelect[],
+  filters: Record<string, unknown>,
+  onFilterApplied: () => void,
+): void {
+  for (const filter of filtersSelect) {
+    if (filter.type !== 'dropdown' && filter.type !== 'searchable') {
+      continue;
+    }
+
+    const key = filter.optionValue ?? 'value';
+    const deepKey = filter.deep ? `${filter.deep}.${key}` : key;
+    const originalOnSelected = filter.onSelected;
+
+    filter.onSelected = (value: unknown) => {
+      const record = value as Record<string, unknown> | null | undefined;
+      const selectedValue = record?.[key] ?? value;
+
+      if (selectedValue === null || selectedValue === undefined) {
+        delete filters[deepKey];
+      } else {
+        filters[deepKey] = selectedValue;
+      }
+
+      if (typeof originalOnSelected === 'function') {
+        originalOnSelected(value);
+      }
+
+      onFilterApplied();
+    };
+  }
+}
+
+/** Syncs active/inactive toggle into matching filter select defaults. */
+export function syncCheckedFilterSelects(
+  filtersSelect: FilterSelect[],
+  checkedColumn: string,
+  checkedFilterValue: unknown,
+): FilterSelect[] {
+  return filtersSelect.map((filter) => {
+    if ('optionValue' in filter && filter.optionValue === checkedColumn) {
+      return {
+        ...filter,
+        defaultFilters: {
+          ...(Object.prototype.hasOwnProperty.call(filter, 'defaultFilters')
+            ? (filter as FilterSelect & { defaultFilters?: Record<string, unknown> }).defaultFilters
+            : {}),
+          [checkedColumn]: checkedFilterValue,
+        },
+        selected: null,
+      };
+    }
+
+    return filter;
+  });
+}
+
+// ── Group / mobile layout ────────────────────────────────────────────────────
+
+export function trackGroupRowKey(group: Record<string, unknown>, index: number): string | number {
+  const studentCourseId = group['id_student_course'];
+  if (studentCourseId !== undefined && studentCourseId !== null) {
+    return studentCourseId as string | number;
+  }
+
+  const id = group['id'];
+  if (id !== undefined && id !== null) {
+    return id as string | number;
+  }
+
+  return index;
+}
+
+export function getMobileMainTitle(
+  item: Record<string, unknown>,
+  columns: TableColumn<any>[],
+  getValue: CrudTableGetCellValueFn,
+): string {
+  const firstTextColumn = columns.find(
+    (column) =>
+      column.visible &&
+      !column.isDecorator &&
+      !column.isDecoratorArray &&
+      !column.isLink &&
+      !column.isLinkImage &&
+      !isBooleanValue(getValue(item, column)),
+  );
+
+  return firstTextColumn ? String(getValue(item, firstTextColumn)) : 'Registro';
+}
+
+export function getMobileMainDescription(
+  item: Record<string, unknown>,
+  columns: TableColumn<any>[],
+  getValue: CrudTableGetCellValueFn,
+): string | null {
+  const descriptionColumn = columns.find(
+    (column) => column.visible && (column as TableColumn<any> & { isDescription?: boolean }).isDescription,
+  );
+
+  if (!descriptionColumn) {
+    return null;
+  }
+
+  const value = getValue(item, descriptionColumn);
+
+  if (value === null || value === undefined || value === '' || value === 'S/N') {
+    return null;
+  }
+
+  return String(value);
+}
+
+export function getMobileHeaderColumns(columns: TableColumn<any>[]): TableColumn<any>[] {
+  return columns
+    .filter((column) => column.visible)
+    .filter((column) => column.isDecorator || column.colorDecorator)
+    .slice(0, 2);
+}
+
+export function getGroupMobileStudentTitle(
+  student: Record<string, unknown>,
+  columns: TableColumn<any>[],
+  getValue: CrudTableGetCellValueFn,
+): string {
+  const firstNameCol = columns.find(
+    (column) => column.visible && column.key === 'student.firstname_student',
+  );
+  const lastNameCol = columns.find(
+    (column) => column.visible && column.key === 'student.lastname_student',
+  );
+
+  const parts: string[] = [];
+
+  if (firstNameCol) {
+    const firstName = getValue(student, firstNameCol);
+    if (firstName) {
+      parts.push(String(firstName));
+    }
+  }
+
+  if (lastNameCol) {
+    const lastName = getValue(student, lastNameCol);
+    if (lastName) {
+      parts.push(String(lastName));
+    }
+  }
+
+  if (parts.length > 0) {
+    return parts.join(' ');
+  }
+
+  const fallbackColumn = columns.find(
+    (column) =>
+      column.visible &&
+      !column.isDecorator &&
+      !column.isDecoratorArray &&
+      !column.isLink &&
+      !column.isLinkImage &&
+      !isBooleanValue(getValue(student, column)),
+  );
+
+  return fallbackColumn ? String(getValue(student, fallbackColumn)) : 'Estudiante';
+}
+
+export function getGroupMobileStudentHeaderColumns(
+  student: Record<string, unknown>,
+  columns: TableColumn<any>[],
+  getValue: CrudTableGetCellValueFn,
+): TableColumn<any>[] {
+  return columns
+    .filter(
+      (column) =>
+        column.visible &&
+        (column.isDecorator || column.colorDecorator) &&
+        getValue(student, column),
+    )
+    .slice(0, 3);
+}
+
+export function getGroupMobileStudentIndex(
+  groupItem: Record<string, unknown>,
+  index: number,
+): number {
+  const meta = groupItem['meta'] as { page?: { currentPage?: number; limit?: number } } | undefined;
+  const page = meta?.page?.currentPage ?? 1;
+  const limit = meta?.page?.limit ?? 0;
+
+  return (page - 1) * limit + index + 1;
+}
+
+/** Applies group meta title from row title when present in API payload. */
+export function normalizeGroupMetaTitles(data: Record<string, unknown>[]): void {
+  data.forEach((item) => {
+    const meta = item['meta'] as { page?: { title?: string } } | undefined;
+
+    if (meta?.page && item['title']) {
+      meta.page.title = String(item['title']);
+    }
+  });
+}
+
+/** Resolves main endpoint segment from full CRUD path. */
+export function resolveMainEndpoint(endpoint: string): string {
+  return endpoint.split('/')[0] ?? endpoint;
+}
+
+export type CrudTableGroupTableConfigExport = CrudTableGroupTableConfig;