@ngbplatform/ui 1.3.0

package/src/ngb/components/register/useRegisterColumnState.ts

@@ -0,0 +1,220 @@
+import { computed, ref, watch, type CSSProperties, type ComputedRef, type Ref } from 'vue';
+import { loadJson, saveJson } from '../../utils/storage';
+import type { RegisterColumn } from './registerTypes';
+
+type PersistedColumns = {
+  order?: string[];
+  widths?: Record<string, number>;
+  visible?: string[];
+};
+
+type UseRegisterColumnStateArgs = {
+  columns: ComputedRef<RegisterColumn[]>;
+  visibleColumnKeys: ComputedRef<string[] | undefined>;
+  storageKey: ComputedRef<string | undefined>;
+  showStatusColumn: ComputedRef<boolean>;
+  statusColWidth: ComputedRef<number>;
+  emitVisibleColumnKeys: (value: string[]) => void;
+};
+
+type RegisterColumnState = {
+  localOrder: Ref<string[]>;
+  localWidths: Ref<Record<string, number>>;
+  visibleColumns: ComputedRef<RegisterColumn[]>;
+  gridTemplateColumns: ComputedRef<string>;
+  colWidth: (column: RegisterColumn) => number;
+  stickyStyle: (column: RegisterColumn) => CSSProperties;
+  cellStickyStyle: (column: RegisterColumn) => CSSProperties;
+  setVisible: (keys: string[]) => void;
+};
+
+function isAccidentalVisible(value: string[] | null) {
+  return !!value && value.length === 1 && value[0] === 'display';
+}
+
+export function useRegisterColumnState(args: UseRegisterColumnStateArgs): RegisterColumnState {
+  const localOrder = ref<string[]>(args.columns.value.map((column) => column.key));
+  const localWidths = ref<Record<string, number>>({});
+  const localVisible = ref<string[] | null>(args.visibleColumnKeys.value ? [...args.visibleColumnKeys.value] : null);
+  const persistEnabled = ref(false);
+  const derivedFromPartialColumns = ref(args.columns.value.length <= 1);
+
+  function ensureStateAfterColumnsReady() {
+    const columns = args.columns.value;
+    if (columns.length <= 1) return;
+
+    const keys = columns.map((column) => column.key);
+    if (derivedFromPartialColumns.value) {
+      if (localOrder.value.length <= 1 && localOrder.value[0] === 'display') {
+        localOrder.value = [...keys];
+      }
+      if (isAccidentalVisible(localVisible.value)) {
+        localVisible.value = null;
+      }
+      derivedFromPartialColumns.value = false;
+    }
+
+    if (isAccidentalVisible(localVisible.value) && keys.length > 1) {
+      localVisible.value = null;
+    }
+
+    if (!persistEnabled.value) persistEnabled.value = true;
+  }
+
+  function resetLocalStateFromColumns() {
+    const columns = args.columns.value;
+    localOrder.value = columns.map((column) => column.key);
+    localWidths.value = {};
+    localVisible.value = args.visibleColumnKeys.value ? [...args.visibleColumnKeys.value] : null;
+    derivedFromPartialColumns.value = columns.length <= 1;
+  }
+
+  function hydrateFromStorage() {
+    const storageKey = args.storageKey.value;
+    if (!storageKey) return;
+
+    const saved = loadJson<PersistedColumns | string[] | null>(storageKey, null);
+    if (!saved) return;
+
+    if (Array.isArray(saved)) {
+      localVisible.value = [...saved];
+      return;
+    }
+
+    if (saved.order?.length) localOrder.value = saved.order;
+    if (saved.widths) localWidths.value = saved.widths;
+    if (Array.isArray(saved.visible)) localVisible.value = [...saved.visible];
+  }
+
+  watch(
+    args.storageKey,
+    (next, prev) => {
+      if (!next) return;
+      if (prev && next === prev) return;
+      resetLocalStateFromColumns();
+      hydrateFromStorage();
+      ensureStateAfterColumnsReady();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => args.columns.value.map((column) => column.key).join('|'),
+    () => {
+      ensureStateAfterColumnsReady();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    [localOrder, localWidths, localVisible],
+    () => {
+      const storageKey = args.storageKey.value;
+      if (!storageKey || !persistEnabled.value) return;
+
+      saveJson<PersistedColumns>(storageKey, {
+        order: localOrder.value,
+        widths: localWidths.value,
+        visible: localVisible.value ?? undefined,
+      });
+    },
+    { deep: true },
+  );
+
+  watch(
+    args.visibleColumnKeys,
+    (value) => {
+      if (!value) return;
+      localVisible.value = [...value];
+    },
+    { deep: true },
+  );
+
+  const orderedColumns = computed(() => {
+    const byKey = new Map(args.columns.value.map((column) => [column.key, column] as const));
+    const result: RegisterColumn[] = [];
+
+    for (const key of localOrder.value) {
+      const column = byKey.get(key);
+      if (column) result.push(column);
+    }
+
+    for (const column of args.columns.value) {
+      if (!result.find((entry) => entry.key === column.key)) result.push(column);
+    }
+
+    return result;
+  });
+
+  const visibleColumns = computed(() => {
+    const keys = localVisible.value ?? args.visibleColumnKeys.value ?? args.columns.value.map((column) => column.key);
+    const visibleSet = new Set(keys);
+    return orderedColumns.value.filter((column) => visibleSet.has(column.key));
+  });
+
+  function setVisible(keys: string[]) {
+    localVisible.value = keys;
+    args.emitVisibleColumnKeys(keys);
+  }
+
+  function colWidth(column: RegisterColumn) {
+    const width = localWidths.value[column.key] ?? column.width ?? 140;
+    const minWidth = column.minWidth ?? 80;
+    return Math.max(minWidth, width);
+  }
+
+  const gridTemplateColumns = computed(() => {
+    const columns = [
+      ...(args.showStatusColumn.value ? [`${args.statusColWidth.value}px`] : []),
+      ...visibleColumns.value.map((column) => `${colWidth(column)}px`),
+    ];
+    return columns.join(' ');
+  });
+
+  const stickyLeftOffsets = computed(() => {
+    let left = args.showStatusColumn.value ? args.statusColWidth.value : 0;
+    const offsets: Record<string, number> = {};
+
+    for (const column of visibleColumns.value) {
+      if (column.pinned === 'left') {
+        offsets[column.key] = left;
+        left += colWidth(column);
+      }
+    }
+
+    return offsets;
+  });
+
+  function stickyStyle(column: RegisterColumn): CSSProperties {
+    if (column.pinned !== 'left') return {};
+    const left = stickyLeftOffsets.value[column.key] ?? (args.showStatusColumn.value ? args.statusColWidth.value : 0);
+    return {
+      position: 'sticky',
+      left: `${left}px`,
+      zIndex: 2,
+      background: 'var(--ngb-grid-header)',
+    };
+  }
+
+  function cellStickyStyle(column: RegisterColumn): CSSProperties {
+    if (column.pinned !== 'left') return {};
+    const left = stickyLeftOffsets.value[column.key] ?? (args.showStatusColumn.value ? args.statusColWidth.value : 0);
+    return {
+      position: 'sticky',
+      left: `${left}px`,
+      zIndex: 1,
+      background: 'inherit',
+    };
+  }
+
+  return {
+    localOrder,
+    localWidths,
+    visibleColumns,
+    gridTemplateColumns,
+    colWidth,
+    stickyStyle,
+    cellStickyStyle,
+    setVisible,
+  };
+}

package/src/ngb/components/register/useRegisterRows.ts

@@ -0,0 +1,209 @@
+import { computed, ref, watch, type ComputedRef } from 'vue';
+import type { DisplayRow, RegisterDataRow, RegisterSortSpec, RowStatus } from './registerTypes';
+import { isDisplayDataRow } from './registerTypes';
+
+type UseRegisterRowsArgs = {
+  rows: ComputedRef<RegisterDataRow[]>;
+  groupBy: ComputedRef<string[]>;
+  sortBy: ComputedRef<RegisterSortSpec[]>;
+  defaultExpanded: ComputedRef<boolean>;
+};
+
+function compareRows(left: RegisterDataRow, right: RegisterDataRow, sortBy: RegisterSortSpec[]): number {
+  for (const sort of sortBy) {
+    const leftValue = left[sort.key];
+    const rightValue = right[sort.key];
+
+    if (leftValue === rightValue) continue;
+    if (leftValue == null) return sort.dir === 'asc' ? -1 : 1;
+    if (rightValue == null) return sort.dir === 'asc' ? 1 : -1;
+
+    const result = leftValue > rightValue ? 1 : -1;
+    return sort.dir === 'asc' ? result : -result;
+  }
+
+  return 0;
+}
+
+function groupKeyPart(row: RegisterDataRow, key: string) {
+  const value = row[key];
+  return value == null || value === '' ? '—' : String(value);
+}
+
+function collectGroupIds(rows: RegisterDataRow[], keys: string[], path: string[] = []): string[] {
+  if (keys.length === 0) return [];
+
+  const key = keys[0];
+  const buckets = new Map<string, RegisterDataRow[]>();
+  for (const row of rows) {
+    const label = groupKeyPart(row, key);
+    const bucket = buckets.get(label);
+    if (bucket) bucket.push(row);
+    else buckets.set(label, [row]);
+  }
+
+  const ids: string[] = [];
+  for (const [label, bucket] of buckets.entries()) {
+    const groupId = [...path, `${key}:${label}`].join('|');
+    ids.push(groupId);
+    ids.push(...collectGroupIds(bucket, keys.slice(1), [...path, `${key}:${label}`]));
+  }
+
+  return ids;
+}
+
+function buildGroups(rows: RegisterDataRow[], keys: string[], expandedGroups: Set<string>, path: string[] = []): DisplayRow[] {
+  if (keys.length === 0) {
+    return rows.map((row) => ({ ...row, type: 'row', __index: 0 }));
+  }
+
+  const key = keys[0];
+  const buckets = new Map<string, RegisterDataRow[]>();
+  for (const row of rows) {
+    const label = groupKeyPart(row, key);
+    const bucket = buckets.get(label);
+    if (bucket) bucket.push(row);
+    else buckets.set(label, [row]);
+  }
+
+  const output: DisplayRow[] = [];
+  for (const [label, bucket] of buckets.entries()) {
+    const groupId = [...path, `${key}:${label}`].join('|');
+    const totals = bucket.reduce(
+      (accumulator, row) => {
+        accumulator.debit += Number(row.debit ?? 0);
+        accumulator.credit += Number(row.credit ?? 0);
+        return accumulator;
+      },
+      { debit: 0, credit: 0 },
+    );
+
+    output.push({
+      type: 'group',
+      key: `g:${groupId}`,
+      groupId,
+      label,
+      count: bucket.length,
+      totalDebit: totals.debit,
+      totalCredit: totals.credit,
+    });
+
+    if (expandedGroups.has(groupId)) {
+      output.push(...buildGroups(bucket, keys.slice(1), expandedGroups, [...path, `${key}:${label}`]));
+    }
+  }
+
+  return output;
+}
+
+export function inferRegisterRowStatus(row: RegisterDataRow): RowStatus {
+  const explicit = row.__status;
+  if (explicit === 'active' || explicit === 'saved' || explicit === 'posted' || explicit === 'marked') return explicit;
+
+  if (row.isMarkedForDeletion === true || row.isDeleted === true) return 'marked';
+
+  const status = row.status;
+  if (typeof status === 'number') {
+    if (status === 2) return 'posted';
+    if (status === 3) return 'marked';
+    return 'saved';
+  }
+
+  if (typeof row.isActive === 'boolean') return row.isActive ? 'active' : 'saved';
+
+  return 'active';
+}
+
+export function useRegisterRows(args: UseRegisterRowsArgs) {
+  const hasGroups = computed(() => args.groupBy.value.length > 0);
+  const expandedGroups = ref<Set<string>>(new Set());
+
+  const sortedRows = computed(() => {
+    const rows = args.rows.value.map((row) => ({ ...row }));
+    if (!args.sortBy.value.length) return rows;
+    return rows.sort((left, right) => compareRows(left, right, args.sortBy.value));
+  });
+
+  const allGroupIds = computed(() => {
+    if (!hasGroups.value) return [];
+    return Array.from(new Set(collectGroupIds(sortedRows.value, args.groupBy.value)));
+  });
+
+  const allGroupsExpanded = computed(() => {
+    const ids = allGroupIds.value;
+    if (!ids.length) return false;
+    for (const id of ids) {
+      if (!expandedGroups.value.has(id)) return false;
+    }
+    return true;
+  });
+
+  function isGroupExpanded(id: string) {
+    return expandedGroups.value.has(id);
+  }
+
+  function toggleGroup(id: string) {
+    const next = new Set(expandedGroups.value);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    expandedGroups.value = next;
+  }
+
+  function toggleAllGroups() {
+    if (!hasGroups.value) return;
+    const ids = allGroupIds.value;
+    if (!ids.length) return;
+    expandedGroups.value = allGroupsExpanded.value ? new Set() : new Set(ids);
+  }
+
+  watch(
+    () => [args.defaultExpanded.value, allGroupIds.value.join('|')],
+    ([isDefaultExpanded]) => {
+      if (!isDefaultExpanded) return;
+      const ids = allGroupIds.value;
+      if (!ids.length) return;
+      expandedGroups.value = new Set(ids);
+    },
+    { immediate: true },
+  );
+
+  const displayRows = computed<DisplayRow[]>(() => {
+    if (!args.groupBy.value.length) {
+      return sortedRows.value.map((row, index) => ({ ...row, type: 'row', __index: index }));
+    }
+
+    const grouped = buildGroups(sortedRows.value, args.groupBy.value, expandedGroups.value);
+    let index = 0;
+
+    return grouped.map((row) => {
+      if (isDisplayDataRow(row)) return { ...row, __index: index++ };
+      return row;
+    });
+  });
+
+  const totals = computed(() => {
+    return args.rows.value.reduce(
+      (accumulator, row) => {
+        accumulator.debit += Number(row.debit ?? 0);
+        accumulator.credit += Number(row.credit ?? 0);
+        return accumulator;
+      },
+      { debit: 0, credit: 0 },
+    );
+  });
+
+  const dataRows = computed(() => displayRows.value.filter(isDisplayDataRow));
+
+  return {
+    hasGroups,
+    displayRows,
+    dataRows,
+    totals,
+    allGroupIds,
+    allGroupsExpanded,
+    isGroupExpanded,
+    toggleGroup,
+    toggleAllGroups,
+    inferRowStatus: inferRegisterRowStatus,
+  };
+}

package/src/ngb/components/register/useRegisterViewport.ts

@@ -0,0 +1,56 @@
+import { computed, onBeforeUnmount, onMounted, ref, type ComputedRef, type Ref } from 'vue';
+import type { DisplayRow } from './registerTypes';
+
+type UseRegisterViewportArgs = {
+  viewport: Ref<HTMLElement | null>;
+  heightPx: ComputedRef<number>;
+  rowHeight: ComputedRef<number>;
+  displayRows: ComputedRef<DisplayRow[]>;
+  overscan?: number;
+};
+
+export function useRegisterViewport(args: UseRegisterViewportArgs) {
+  const overscan = args.overscan ?? 8;
+  const scrollTop = ref(0);
+  const viewportHeight = ref(args.heightPx.value);
+
+  let resizeObserver: ResizeObserver | null = null;
+
+  onMounted(() => {
+    viewportHeight.value = args.viewport.value?.clientHeight ?? args.heightPx.value;
+
+    if (typeof ResizeObserver !== 'undefined' && args.viewport.value) {
+      resizeObserver = new ResizeObserver(() => {
+        viewportHeight.value = args.viewport.value?.clientHeight ?? args.heightPx.value;
+      });
+      resizeObserver.observe(args.viewport.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  });
+
+  function onScroll() {
+    scrollTop.value = args.viewport.value?.scrollTop ?? 0;
+  }
+
+  const totalHeight = computed(() => args.displayRows.value.length * args.rowHeight.value);
+  const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / args.rowHeight.value) - overscan));
+  const endIndex = computed(() => {
+    const visibleCount = Math.ceil(viewportHeight.value / args.rowHeight.value) + overscan * 2;
+    return Math.min(args.displayRows.value.length, startIndex.value + visibleCount);
+  });
+  const offsetTop = computed(() => startIndex.value * args.rowHeight.value);
+  const visibleRows = computed(() => args.displayRows.value.slice(startIndex.value, endIndex.value));
+
+  return {
+    onScroll,
+    totalHeight,
+    offsetTop,
+    visibleRows,
+  };
+}