@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/table-builder/classes/table-builder-general-settings.ts

@@ -0,0 +1,205 @@
+import { Predicate } from "@angular/core";
+import { merge } from "lodash";
+import { Dictionary } from "../interfaces/dictionary";
+import { StylerStyle } from "../../utilities/directives/styler";
+import { TableBuilderExport } from "./TableBuilderConfig";
+
+export interface TableBuilderSettings<T = any> {
+  headerSettings? : Partial<TableWrapperHeaderSettings>;
+  footerSettings? : Partial<TableWrapperFooterSettings>;
+  columnHeaderSettings? : Partial<TableColumnHeaderSettings>;
+  columnFooterSettings? : Partial<TableColumnFooterSettings>;
+  tableSettings? : Partial<TableSettings<T>>;
+}
+
+export class GeneralTableSettings implements TableBuilderSettings {
+  headerSettings = new TableWrapperHeaderSettings();
+  footerSettings = new TableWrapperFooterSettings();
+  columnHeaderSettings = new TableColumnHeaderSettings();
+  columnFooterSettings = new TableColumnFooterSettings();
+  tableSettings = new TableSettings();
+}
+
+export class TableWrapperHeaderSettings {
+  hideExport = false
+  hideFilter = false
+  hideColumnSettings = false
+  hideHeader = false
+  hideSort = false
+  collapse = false
+  showTitleWhenCollapsed = true;
+  headerHeight: TbSize | undefined = undefined;
+}
+
+export class TableWrapperFooterSettings {
+  collapse = false
+}
+
+export class TableColumnHeaderSettings {
+  stickyHeaderRow = true;
+  noFilters = false;
+  noHeader = false;
+}
+
+export class TableColumnFooterSettings {
+  stickyFooterRow = false;
+}
+
+export class TableSettings<T = any> {
+  tableId?: string | undefined = undefined;
+  trackBy?: string | undefined = undefined;
+  includeIndexColumn = false;
+  includeSelectionColumn = false;
+  usePaginator: boolean | undefined = undefined;
+  useVirtualScroll: boolean | undefined = undefined;
+  paginatorSettings: Partial<PaginatorOptions> | undefined = undefined;
+  virtualScrollSettings: Partial<VirtualScrollOptions> | undefined = undefined;
+  rowHeight: TbSize | undefined = undefined;
+  groupHeaderHeight?: TbSize = undefined;
+  minColumnWidth: TbSize | undefined;
+  rowClasses: Dictionary<Predicate<T> | true> | undefined;
+  rowStyles: StylerStyle<T> | undefined;
+  rowClick: ((row: T, event?: MouseEvent) => void) | undefined = undefined;
+  exportSettings: TableBuilderExport | undefined = undefined;
+}
+
+export class PersistedTableSettings {
+  constructor(tableSettings?: NonFunctionProperties<PersistedTableSettings>){
+    if(tableSettings){
+      this.collapseHeader = tableSettings.collapseHeader;
+      this.collapseFooter = tableSettings.collapseFooter;
+    }
+  }
+
+  merge(tableSettings?: TableBuilderSettings){
+    const newPts = new PersistedTableSettings(this);
+    if(tableSettings){
+      newPts.collapseHeader = tableSettings.headerSettings?.collapse ?? newPts.collapseHeader;
+      newPts.collapseFooter = tableSettings.footerSettings?.collapse ?? newPts.collapseFooter;
+    }
+    return newPts;
+  }
+
+  collapseHeader = false;
+  collapseFooter = false;
+}
+
+export class NotPersistedTableSettings {
+  merge(tableSettings?: TableBuilderSettings){
+    const newNpts = merge(this, new NotPersistedTableSettings());
+    if(tableSettings){
+      newNpts.hideExport = tableSettings.headerSettings?.hideExport ?? newNpts.hideExport;
+      newNpts.hideColumnSettings = tableSettings.headerSettings?.hideColumnSettings ?? newNpts.hideColumnSettings;
+      newNpts.hideFilter = tableSettings.headerSettings?.hideFilter ?? newNpts.hideFilter;
+      newNpts.hideSort = tableSettings.headerSettings?.hideSort ?? newNpts.hideSort;
+      newNpts.showTitleWhenHeaderCollapsed = tableSettings.headerSettings?.showTitleWhenCollapsed ?? newNpts.showTitleWhenHeaderCollapsed;
+      newNpts.hideHeader = tableSettings.headerSettings?.hideHeader ?? newNpts.hideHeader;
+      newNpts.hideColumnHeaderFilters = tableSettings.columnHeaderSettings?.noFilters ?? newNpts.hideColumnHeaderFilters;
+      newNpts.hideColumnHeader = tableSettings.columnHeaderSettings?.noHeader ?? newNpts.hideColumnHeader;
+      newNpts.usePaginator = tableSettings.tableSettings?.usePaginator ?? newNpts.usePaginator;
+      newNpts.useVirtualScroll = tableSettings.tableSettings?.useVirtualScroll != undefined ? tableSettings.tableSettings?.useVirtualScroll :
+        tableSettings.tableSettings?.virtualScrollSettings ? true
+          : newNpts.useVirtualScroll;
+      newNpts.rowHeight = tableSettings.tableSettings?.rowHeight ?? newNpts.rowHeight;
+      newNpts.headerHeight = tableSettings.headerSettings?.headerHeight ?? newNpts.headerHeight;
+      newNpts.groupHeaderHeight = tableSettings.tableSettings?.groupHeaderHeight ?? newNpts.groupHeaderHeight;
+      newNpts.minColumnWidth = tableSettings.tableSettings?.minColumnWidth ?? newNpts.minColumnWidth;
+      newNpts.rowClasses = tableSettings.tableSettings?.rowClasses ?? newNpts.rowClasses;
+      newNpts.rowStyles = tableSettings.tableSettings?.rowStyles ?? newNpts.rowStyles;
+      newNpts.rowClick = tableSettings.tableSettings?.rowClick ?? newNpts.rowClick;
+      newNpts.exportSettings = tableSettings.tableSettings?.exportSettings ?? newNpts.exportSettings;
+
+      if(tableSettings.tableSettings?.virtualScrollSettings){
+        const currVirt = tableSettings.tableSettings?.virtualScrollSettings || newNpts.virtualSettings;
+        if(!currVirt.headerHeight){
+          currVirt.headerHeight = tableSettings.headerSettings?.headerHeight || DefaultVirtualScrollOptions.headerHeight;
+        }
+        if(!currVirt.rowHeight){
+          currVirt.rowHeight = tableSettings.tableSettings?.rowHeight || DefaultVirtualScrollOptions.rowHeight;
+        }
+        newNpts.virtualSettings = { ...new VirtualScrollOptions(), ...currVirt }
+      } else newNpts.virtualSettings ??= new VirtualScrollOptions();
+      if(tableSettings.tableSettings?.paginatorSettings){
+        const currPag = tableSettings.tableSettings?.paginatorSettings ? merge(newNpts.paginatorSettings, tableSettings.tableSettings?.paginatorSettings) : (newNpts.paginatorSettings ?? new PaginatorOptions());
+        currPag.includeAllInOptions = (currPag.defaultAll && currPag.includeAllInOptions !== false) || currPag.includeAllInOptions;
+        newNpts.paginatorSettings = { ...new PaginatorOptions(), ...currPag };
+      } else newNpts.paginatorSettings ??= new PaginatorOptions();
+    }
+    return newNpts;
+  }
+  hideExport = false
+  hideFilter = false
+  hideColumnSettings = false
+  hideSort = false
+  showTitleWhenHeaderCollapsed = true;
+  hideHeader = false
+  hideColumnHeaderFilters = false;
+  hideColumnHeader = false;
+  usePaginator: boolean = true;
+  useVirtualScroll: boolean = false;
+  paginatorSettings: PaginatorOptions | undefined = undefined;
+  virtualSettings: VirtualScrollOptions | undefined = undefined;
+  groupHeaderHeight?: TbSize = undefined;
+  rowHeight?: TbSize | undefined;
+  headerHeight?: TbSize = undefined;
+  minColumnWidth?: TbSize | undefined;
+  rowClasses?: Dictionary<Predicate<any> | true> | undefined;
+  rowStyles?: StylerStyle | undefined;
+  rowClick?: ((row: any, event?: MouseEvent) => void) | undefined = undefined;
+  exportSettings: TableBuilderExport | undefined = undefined;
+}
+
+export class VirtualScrollOptions {
+  rowHeight: TbSize = 48;
+  enforceRowHeight = true;
+  headerHeight: TbSize = 56;
+  enforceHeaderHeight = true;
+  amountOfVisibleItems = 10;
+  /**
+   * This will win over `amountOfVisibleItems`
+   */
+  maxViewPortHeight: TbSize | undefined = undefined;
+  /**
+   * Will try to bring the table to the bottom of the screen
+   * If `amountOfVisibleItems` is set that will be the minimum number of rows
+   * If `maxViewPortHeight` is set that will be the max table size
+   */
+  dynamicHeight = false;
+
+  /**
+   * If `dynamicHeight` is set to true, we will try to add this amount of space from the bottom of view port
+   */
+  dynamicalHeightBuffer: TbSize = 0;
+}
+
+export class PaginatorOptions {
+  pageSize: number | undefined = undefined;
+  defaultAll = false;
+  includeAllInOptions = false;
+}
+
+export const DefaultVirtualScrollOptions = {
+  rowHeight: 48,
+  headerHeight: 56,
+};
+
+type NonFunctionPropertyNames<T> = {
+  [K in keyof T]: T[K] extends Function ? never : K
+}[keyof T];
+
+export type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
+export type TbSize = number | `${number}${'px' | 'rem' }`
+
+export function parseTbSizeToPixels(size?: TbSize) {
+  if(!size) return undefined;
+  if(typeof size === 'number') return size;
+  if(size.endsWith('px')) return Number(size.replace('px', ''));
+  if(size.endsWith('rem')) {
+    const htmlElement = document.documentElement;
+    const remSize = window.getComputedStyle(htmlElement).getPropertyValue('font-size');
+    const remSizeNum = Number(remSize.replace('px', ''));
+    const num = Number(size.replace('rem', ''));
+    return num * remSizeNum;
+  }
+  return undefined;
+}

package/src/table-builder/classes/table-builder.ts

@@ -0,0 +1,105 @@
+import { isObservable, Observable } from 'rxjs';
+import { MetaData, FieldType, ReportDef } from '../interfaces/report-def';
+import { map } from 'rxjs/operators';
+import { GeneralTableSettings, TableBuilderSettings } from './table-builder-general-settings';
+import { defaultShareReplay } from '../../rxjs';
+import { initIndexSymbol } from '../components/table-container/table-container.helpers/sort-state.helpers';
+import { createDataCleaners } from '../components/table-container/table-container.helpers/data-state.helpers';
+import { assertInInjectionContext, computed, inject, Injector, isSignal, signal, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { TableContainerComponent } from '../components/table-container/table-container.component';
+
+export class TableBuilder<T = any> {
+  #$metaData!: Signal<MetaData<T>[]>;
+  #$data!: Signal<T[]>;
+  #$settings! : Signal<TableBuilderSettings>;
+
+  container = signal<TableContainerComponent | undefined>(undefined);
+
+  $metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined);
+  $settings = computed(() => this.$initialized() ? this.#$settings() : undefined);
+  #$metaNeedsPrep = signal(false);
+  #$dataIsObservable = signal(false);
+  #$settingsIsObservable = signal(false);
+  #$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable());
+  $initialized = signal(false);
+
+  constructor(
+    private data: TableBuilderArgs<T[]>,
+    private metaData?: TableBuilderArgs<MetaData<T, any>[]>,
+    private settings: TableBuilderArgs<TableBuilderSettings<T>> = new GeneralTableSettings()
+  ) {
+    if(isObservable(data)){
+      this.#$dataIsObservable.set(true);
+    } else {
+      this.#$data = isSignal( data ) ? data : signal(data);
+    }
+    if(isObservable(metaData) || !metaData){
+      this.#$metaNeedsPrep.set(true);
+    } else {
+      this.#$metaData = isSignal( metaData ) ? metaData : signal(metaData);
+    }
+    if(isObservable(settings)){
+      this.#$settingsIsObservable.set(true);
+    } else {
+      this.#$settings = isSignal( settings ) ? settings : signal(settings);
+    }
+    if(!this.#$needsPrep()){
+      this.$initialized.set(true);
+    } else {
+      try {
+        assertInInjectionContext(TableBuilder);
+        const injector = inject(Injector);
+        this.prep(injector);
+      } catch { }
+    }
+  }
+  prep(injector: Injector){
+    if(this.#$settingsIsObservable()){
+      this.#$settings = toSignal(this.settings as any, { injector, requireSync: true });
+    }
+    if(this.#$dataIsObservable()){
+      this.#$data = toSignal(this.data as any, { injector, initialValue: [] });
+    }
+    if(this.#$metaNeedsPrep()){
+      if(this.metaData){
+        this.#$metaData = toSignal(this.metaData as any, { injector, initialValue: [] });
+      } else {
+        this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]))
+      }
+    }
+    this.$initialized.set(true);
+  }
+  #dataCleaners = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return undefined;
+    return createDataCleaners(metaData);
+  });
+  $data = computed(() => {
+    const data = this.#$data();
+    const cleaners = this.#dataCleaners();
+    if(!data || !cleaners) return [];
+    const cleanedData = data.map((data, i) => {
+      const cleaned = cleaners(data);
+      cleaned[initIndexSymbol] = i;
+      return cleaned;
+    })
+    return cleanedData;
+  });
+
+  createMetaData(obj: any): MetaData [] {
+    return Object.keys(obj ?? {})
+      .map( key => ({
+        key,
+        fieldType: FieldType.Unknown,
+        order: -1
+      }));
+  }
+}
+
+export const CreateTableBuilder = (reportDef$: Observable<ReportDef> ): TableBuilder => {
+  reportDef$ = reportDef$.pipe(defaultShareReplay());
+  return new TableBuilder(reportDef$.pipe(map( r => r.data) ), reportDef$.pipe( map( r => r.metaData) ));
+};
+
+type TableBuilderArgs<T> = T | Observable<T> | Signal<T>;

package/src/table-builder/classes/table-store.helpers.ts

@@ -0,0 +1,104 @@
+import { Dictionary } from "../interfaces/dictionary";
+import { FieldType, MetaData, SortDef } from "../interfaces/report-def";
+import { isCustomFilter } from "./filter-info";
+import { keysToDelete, PersistedTableState, TableState } from "./TableState";
+import { TableBuilderSort } from "../components/table-container/table-container.helpers/sort-state.helpers";
+
+export const orderedStateVisibleMetaData = (state: TableState) => {
+  const ordered = orderStateMetaData(state);
+  const orderedVisible = ordered
+    .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
+  return orderedVisible;
+}
+
+export const orderedCodeVisibleMetaData = (state: TableState) =>
+  orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
+
+export const orderStateMetaData = (state:TableState) => {
+  return orderMetaData(state.metaData, state.userDefined.order);
+}
+
+export const orderMetaData = (metaData: Dictionary<MetaData>, userDefined: Dictionary<number>) => {
+  const userOrderArr = Object.entries(userDefined);
+  return userOrderArr.length ?
+    Object.values(metaData).sort((a, b) => {
+      const orderA = userDefined[a.key];
+      const orderB = userDefined[b.key];
+      return order(orderA, orderB);
+    })
+    :
+    Object.values(metaData).sort((a, b) => {
+      const orderA = a.order;
+      const orderB = b.order;
+      return order(orderA, orderB);
+    })
+}
+
+export function order(orderA: number | undefined, orderB: number | undefined){
+  if(orderA == null && orderB == null) {
+    return 0;
+  }
+  if(orderA == null) {
+    return 1;
+  }
+  if(orderB == null) {
+    return -1;
+  }
+  return orderA - orderB;
+}
+
+export function cleanPersistedState(state: TableState, pState: PersistedTableState) {
+  const metas = Object.values(state.metaData);
+  const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj: any, filter) => {
+    obj[filter.filterId!] = pState.filters[filter.filterId!];
+    return obj;
+  }, {});
+  const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+  return ({ ...pState, filters, sorted })
+}
+
+export const mapSaveableState = (s: PersistedTableState) => {
+  const savableState = { ...s } as Partial<TableState>;
+  keysToDelete.forEach(key => delete savableState[key]);
+  return savableState as PersistedTableState;
+}
+
+export const createPreSort = (metaDatas: Dictionary<MetaData>): TableBuilderSort[] => {
+  return Object.values(metaDatas).filter(( metaData ) : metaData is MetaData & {preSort: SortDef} => !!metaData.preSort)
+    .sort(({ preSort: ps1 }, { preSort: ps2 } ) => (ps1.precedence || Number.MAX_VALUE) - ( ps2.precedence || Number.MAX_VALUE))
+    .map(( { key, preSort: { direction } } ) => ({ active: key, direction }))
+}
+
+export const mergeMeta = (orig: MetaData, merge: MetaData): MetaData => {
+  return {
+    key: orig.key,
+    displayName: merge.displayName ?? orig.displayName,
+    fieldType: merge.fieldType || orig.fieldType,
+    additional: { ...orig.additional, ...merge.additional },
+    order: merge.order ?? orig.order,
+    preSort: merge.preSort ?? orig.preSort,
+    width: merge.width ?? orig.width,
+    noExport: merge.noExport || orig.noExport,
+    noFilter: merge.noFilter || orig.noFilter,
+    customCell: merge.customCell ?? orig.customCell,
+    transform: merge.transform ?? orig.transform,
+    map: merge.map ?? orig.map,
+    click: merge.click ?? orig.click,
+    classes: merge.classes ?? orig.classes,
+    noSort: merge.noSort ?? orig.noSort,
+    template: merge.template ?? orig.template,
+    toolTip: merge.toolTip ?? orig.toolTip,
+    useIcon: merge.useIcon ?? orig.useIcon,
+    filterLogic: merge.filterLogic ?? orig.filterLogic,
+    sortLogic: merge.sortLogic ?? orig.sortLogic
+  } as MetaData;
+}
+
+export const initializeOrder = (state:TableState, mds: Dictionary<MetaData>) : Dictionary<number> => {
+  const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
+  let userDefinedOrder = state.userDefined.order;
+  if(viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)){
+    return {}
+  }
+  return userDefinedOrder;
+}