@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/specs/toggleGroupDirective.spec.ts

@@ -0,0 +1,229 @@
+import { Component, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { MatSlideToggle, MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSlideToggleGroupDirective } from "../utilities/directives/mat-toggle-group-directive";
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSlideToggleHarness } from '@angular/material/slide-toggle/testing';
+import { By } from "@angular/platform-browser";
+import { count, firstValueFrom, lastValueFrom, skip, Subject, takeUntil } from "rxjs";
+
+abstract class ToggleTestComponent {
+
+}
+
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup >
+    <mat-slide-toggle name='toggle1' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class SingleToggleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup [allowMultiple]='true' >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleWithMultipleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup  >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleTestComponent extends ToggleTestComponent {
+
+}
+
+
+let fixture: ComponentFixture<ToggleTestComponent>;
+let loader: HarnessLoader;
+let toggleHarnesses: MatSlideToggleHarness [];
+let toggleGroupDirective: MatSlideToggleGroupDirective;
+
+let toggles: DebugElement[];
+
+
+const setupTest = (type) => async (): Promise<void> => {
+
+  TestBed.configureTestingModule({
+    imports: [MatSlideToggleModule],
+    declarations: [
+      type,
+      MatSlideToggleGroupDirective,
+    ],
+    providers: []
+  });
+  fixture = TestBed.createComponent(type);
+  fixture.detectChanges();
+
+  loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
+  toggles = fixture.debugElement.queryAll(By.directive(MatSlideToggle));
+  toggleGroupDirective = toggles[0].injector.get(MatSlideToggleGroupDirective);
+
+
+};
+
+
+async function toggleAndReturnValues(index: number) {
+  const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter.pipe(skip(1)));
+  await toggleHarnesses[index].toggle();
+  return await firstVal;
+}
+
+describe("opMatSlideToggleGroup", () => {
+  describe("Single Toggle", () => {
+    beforeEach(waitForAsync(setupTest(SingleToggleTestComponent)));
+
+    it('should create', async () => {
+      expect(toggleGroupDirective).toBeDefined();
+    })
+
+    it('starts with an initial value', async () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({ 'toggle1': false });
+    });
+
+    it('when toggling on should emit the latest value as true', async () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true });
+    });
+
+    it('can toggle on and then off', async () => {
+
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true });
+      const val2 = await toggleAndReturnValues(0);
+      expect(val2).toEqual({ 'toggle1': false });
+    });
+  });
+
+  describe("Multi Toggle", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleWithMultipleTestComponent)));
+
+    it('starts with an initial value', async () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': false });
+    });
+
+    it('can toggle first toggle', async () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+    });
+
+    it('can toggle second toggle', async () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+    });
+
+    it('can toggle both toggles', async () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+
+      const val2 = await toggleAndReturnValues(1);
+      expect(val2).toEqual({ 'toggle1': true, 'toggle2': true });
+    });
+
+    it('can toggle both toggles multiple times', async () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': true });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': true });
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': false });
+    });
+
+  });
+
+  describe("Multi Toggle Only One Allowed", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleTestComponent)));
+
+    it('starts with an initial value', async () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': false });
+    });
+
+    it('can toggle first toggle', async () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+    });
+
+    it('can toggle second toggle', async () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+    });
+
+    it('when toggle both toggles only the last one remains set', async () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+
+      const val2 = await toggleAndReturnValues(1);
+      expect(val2).toEqual({ 'toggle1': false, 'toggle2': true });
+
+      var toggle1Value = await toggleHarnesses[0].isChecked();
+
+      expect(toggle1Value).toBeFalse();
+    });
+
+    it('can toggle both toggles multiple times and only the last one will be set', async () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': false });
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({ 'toggle1': true, 'toggle2': false });
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({ 'toggle1': false, 'toggle2': true });
+    });
+
+    it('can toggle 2nd toggle doesnt emit an extra time', async () => {
+      const end = new Subject();
+      const total = lastValueFrom( toggleGroupDirective.valueEmitter.pipe(
+        takeUntil(end),
+        count( (a, i) => true ),
+      ));
+
+      await toggleHarnesses[0].toggle();
+      await toggleHarnesses[1].toggle();
+
+      end.next(null);
+      const result = await total;
+
+      expect(result).toEqual(3);
+    });
+
+  });
+
+});

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

@@ -0,0 +1,11 @@
+import { ArrayStyle } from '../interfaces/report-def';
+
+export interface DefaultSettings {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+}
+
+export const ArrayDefaults = {
+  limit: 3,
+  arrayStyle: ArrayStyle.CommaDelimited
+}

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

@@ -0,0 +1,23 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { Observable, Subscription } from 'rxjs';
+
+export class MatTableObservableDataSource<T> extends MatTableDataSource<T> {
+  subscription?: Subscription;
+  constructor(private dataSrc: Observable<T[]>) {
+    super([]);
+  }
+
+  connect() {
+    if(!this.subscription) {
+      this.subscription = this.dataSrc.subscribe( data => this.data = data );
+    }
+    return super.connect();
+  }
+  disconnect() {
+    if(this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+    super.disconnect();
+  }
+}

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

@@ -0,0 +1,50 @@
+import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core';
+import { ArrayDefaults, DefaultSettings } from './DefaultSettings';
+import { ArrayAdditional, FieldType } from '../interfaces/report-def';
+import { MultiSortDirective } from '../directives';
+import { PhoneNumberPipe } from '../../utilities/pipes/phone.pipe';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { SpaceCasePipe } from '../../utilities/pipes/space-case.pipes';
+import { TableBuilderSettings } from './table-builder-general-settings';
+export interface TableBuilderConfig {
+  defaultTableSettings: Partial<Omit<TableBuilderSettings, 'injector' >> & { pageSize?: number };
+  /**
+  * @deprecated use `defaultTableSettings.tableSettings.exportSettings`.
+  */
+  export?: TableBuilderExport;
+  dateFormats?: DefaultSettings;
+  arrayDefaults?: ArrayAdditional;
+  transformers?: Partial<{ [key in keyof typeof FieldType]: (val: any) => any }>
+}
+
+const defaultConfig: TableBuilderConfig = {
+  defaultTableSettings: {
+    pageSize: 10
+  },
+  arrayDefaults: ArrayDefaults
+}
+
+export interface TableBuilderExport {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+  prepend? : string;
+  mapEnumToString?: boolean;
+  mapLinkOptions?: {
+    mapLinkToString?: boolean;
+    excellStyle?: boolean;
+    domainPrefix?: string
+  }
+}
+
+export const TableBuilderConfigToken = new InjectionToken<TableBuilderConfig>('TableBuilderConfig');
+
+export function provideTableBuilder(config?: TableBuilderConfig) : EnvironmentProviders {
+  return makeEnvironmentProviders([
+    MultiSortDirective,
+    SpaceCasePipe,
+    DatePipe,
+    CurrencyPipe,
+    PhoneNumberPipe,
+    { provide: TableBuilderConfigToken, useValue: config || defaultConfig }
+  ])
+}

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

@@ -0,0 +1,64 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { Subscription } from 'rxjs';
+import { TableStore } from './table-store';
+import { DataStore } from './data-store';
+import { computed, effect, signal, Signal, untracked } from '@angular/core';
+
+export class TableBuilderDataSource<T> extends MatTableDataSource<T> {
+  subscription?: Subscription;
+  #$dataSrc = signal<T[]>([]);
+  $dataSize: Signal<{ start: number, end: number }> = signal({ start: 0, end: 0 }, {
+    equal: (a, b) => a.start === b.start && a.end === b.end
+  });
+  _ = effect(() => {
+    const data = this.#$dataSrc();
+    const dataSize = this.$dataSize();
+    untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
+  });
+  setData(data: T[]) {
+    this.#$dataSrc.set(data);
+  }
+  constructor(
+    state: TableStore,
+    data: DataStore,
+  ) {
+    super([]);
+
+    const $currentPage = state.$currentPage;
+    const $pageSize = state.$pageSize;
+    const $virtualEnds = data.selectSignal(d => d.virtualEnds);
+
+    const $dataLength = computed(() => this.#$dataSrc().length);
+
+    this.$dataSize = computed(() => {
+      const viewType = state.$viewType();
+      const dataLength = $dataLength();
+      const currentPage = $currentPage();
+      const pageSize = $pageSize();
+      const virtualEnds = $virtualEnds();
+      const previousPageRecords = currentPage * pageSize;
+      if(viewType === 'virtual paginator'){
+        return ({ start: virtualEnds.start + previousPageRecords, end: Math.min(virtualEnds.end, pageSize) + previousPageRecords });
+      }
+      if(viewType === 'paginator'){
+        return ({ start: previousPageRecords, end: previousPageRecords + pageSize });
+      }
+      if(viewType === 'all'){
+        return ({ start: 0, end: dataLength });
+      }
+      return ({ start: virtualEnds.start, end: virtualEnds.end });
+    });
+  }
+
+
+  connect() {
+    return super.connect();
+  }
+  disconnect() {
+    if(this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+    super.disconnect();
+  }
+}

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

@@ -0,0 +1,125 @@
+import { CustomFilter, FilterInfo } from './filter-info';
+import { Dictionary } from '../interfaces/dictionary';
+import { Sort } from '@angular/material/sort';
+import { MetaData } from '../interfaces/report-def';
+import { NotPersistedTableSettings, PersistedTableSettings } from './table-builder-general-settings';
+import { LinkInfo } from '../services/link-creator.service';
+import { TableProps } from '../components/table-container/tableProps';
+
+export type NoneGroupHeader = { isGroupHeader: never } ;
+export interface BaseGroup {
+  key: string;
+  groupName: string;
+  groupHeaderDisplay: string;
+  uniqueName: string;
+  isGroupHeader: true;
+  padding: number;
+  length: number;
+  hasTheData: boolean;
+  level: number;
+}
+
+export interface DataGroup<T extends NoneGroupHeader = any> extends BaseGroup {
+  children: T[];
+  hasTheData: true;
+}
+
+export interface GroupGroup<T extends NoneGroupHeader = any> extends BaseGroup {
+  groups: (DataGroup<T> | GroupGroup<T>)[];
+  hasTheData: false;
+}
+
+export type Group<T extends NoneGroupHeader = any> = GroupGroup<T> | DataGroup<T>
+
+export interface GroupedData {
+  key: string,
+  expandedHeaders: string[]
+}
+
+export function isGroupHeader(data: any): data is Group {
+  return !!data?.isGroupHeader;
+}
+
+export interface PersistedTableState {
+  hiddenKeys?: string [];
+  filters: Dictionary<FilterInfo | CustomFilter>;
+  sorted : Sort [];
+  userDefined : {
+    order:Dictionary<number>,
+    widths:Dictionary<number>,
+    table:{ width?:number },
+    pageSize?: number,
+    showAll?: boolean,
+    rowHeight?: number,
+    headerHeight?: number,
+  };
+  persistedTableSettings : PersistedTableSettings;
+  groupBy: GroupedData[];
+}
+
+export interface TableState extends Required<PersistedTableState> {
+  initializationState: InitializationState;
+  metaData: Dictionary<MetaData>;
+  notPersistedTableSettings : NotPersistedTableSettings;
+  pageSize: number;
+  currentPage: number;
+  linkMaps: Dictionary<LinkInfo>;
+  props: TableProps;
+  showAll: boolean;
+}
+export interface DataState {
+  virtualScrollOffset: number;
+  virtualEnds: {start: number, end: number};
+  sortedFilteredDataLength: number;
+  sortedFilteredGroupedDataLength: number;
+}
+type RequireNull<T> = { [K in keyof T]: null };
+class KeysToDelete implements RequireNull<Omit<TableState, keyof PersistedTableState>> {
+  initializationState = null;
+  metaData = null;
+  notPersistedTableSettings = null;
+  linkMaps = null;
+  pageSize = null;
+  currentPage = null;
+  virtualScrollOffset = null;
+  dataLen = null;
+  virtualEnds = null;
+  virtualEnd = null;
+  props = null;
+  showAll = null;
+  minColumnWidth = null;
+}
+export const keysToDelete = Object.keys(new KeysToDelete());
+
+export enum InitializationState {
+  Created,
+  MetaDataLoaded,
+  TableSettingsLoaded,
+  Ready,
+}
+
+export const defaultTableState: TableState = {
+  initializationState: InitializationState.Created,
+  metaData: {},
+  filters: {},
+  hiddenKeys: [],
+  sorted: [],
+  userDefined: { order: {}, widths: {}, table: {} },
+  persistedTableSettings: new PersistedTableSettings(),
+  notPersistedTableSettings: new NotPersistedTableSettings(),
+  pageSize: 10,
+  linkMaps: {},
+  groupBy: [],
+  currentPage: 0,
+
+  props: {} as TableProps,
+  showAll: false,
+};
+export const defaultDataState: DataState = {
+  virtualScrollOffset: 0,
+  sortedFilteredDataLength: 0,
+  sortedFilteredGroupedDataLength: 0,
+  virtualEnds: {
+    start: 0, end: 20
+  },
+}

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

@@ -0,0 +1,10 @@
+import { Injectable } from "@angular/core";
+import { ComponentStore } from "@ngrx/component-store";
+import { DataState, defaultDataState } from "./TableState";
+
+@Injectable()
+export class DataStore extends ComponentStore<DataState> {
+  constructor() {
+    super({ ...defaultDataState });
+  }
+}

package/{table-builder/classes/display-col.d.ts → src/table-builder/classes/display-col.ts}

@@ -1,5 +1,5 @@
-export interface DisplayCol {
-    key: string;
-    displayName?: string;
-    isVisible: boolean;
-}
+export interface DisplayCol {
+    key: string;
+    displayName?: string;
+    isVisible: boolean;
+}

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

@@ -0,0 +1,125 @@
+import { FilterType } from '../enums/filterTypes';
+import { EnumFilterFuncs, StringFilterFuncs } from '../functions/string-filter-function';
+import { NumberFilterFuncs } from '../functions/number-filter-function';
+import { DateFilterFuncs, DateTimeFilterFuncs } from '../functions/date-filter-function';
+import { BooleanFilterFuncs } from '../functions/boolean-filter-function';
+import { FieldType } from '../interfaces/report-def';
+import { Dictionary } from '../interfaces/dictionary';
+import { Predicate } from '@angular/core';
+import { getFactory } from '../functions/sort-data-function';
+
+const filterFactoryMap: Dictionary<FilterFunc<any, any>> = {
+  [FilterType.And]: (filter: FilterInfo ): ((obj: any) => boolean) => {
+    const filters = createFilterFuncs(filter.filterValue as FilterInfo[]);
+    return (obj: any) : boolean => filters.every( f => f(obj));
+  },
+  [FilterType.In]: (filter: FilterInfo ): (obj: any) => boolean => {
+    const filters = createFilterFuncs(filter.filterValue as FilterInfo[]);
+    return (obj: any) : boolean => filters.some( f => f(obj));
+  },
+};
+
+const filterTypeFuncMap : Record<FieldType, FilterFuncs<any>> = {
+  [FieldType.Array]: StringFilterFuncs,
+  [FieldType.Boolean]: BooleanFilterFuncs,
+  [FieldType.Currency]: NumberFilterFuncs,
+  [FieldType.Date]: DateFilterFuncs,
+  [FieldType.DateTime]: DateTimeFilterFuncs,
+  [FieldType.Enum]: EnumFilterFuncs,
+  [FieldType.Link]: StringFilterFuncs,
+  [FieldType.Number]: NumberFilterFuncs,
+  [FieldType.PhoneNumber]: StringFilterFuncs,
+  [FieldType.String]: StringFilterFuncs,
+  [FieldType.Unknown]: StringFilterFuncs,
+} as Record<FieldType, FilterFuncs<any>>;
+
+export const filterTypeMap = Object.entries(filterTypeFuncMap).reduce(
+  (acc, [key, value]) => ({ ...acc, [key]: Object.keys(value) }), {} as Record<FieldType, FilterType[]>
+)
+
+export interface FilterState {
+  filterId: string;
+  filterType: FilterType;
+  filterValue?: any;
+  active?: boolean;
+  filterBy?: (t: any) => any
+}
+
+export interface FilterInfo<T extends FieldType = any, U = any> extends FilterState {
+    key: string & keyof U;
+    fieldType: T;
+    _isExternallyManaged?: boolean;
+}
+
+export interface PartialFilter {
+  filterId?: string;
+  key: string;
+  fieldType: FieldType;
+  filterType?: FilterType;
+  filterValue?: any;
+  filterBy?: (t: any) => any
+}
+
+
+export interface CustomFilter<T = any> extends FilterState {
+  predicate: Predicate<T>;
+  filterType: typeof FilterType.Custom;
+}
+
+export function isCustomFilter(filter : FilterInfo | CustomFilter) : filter is CustomFilter {
+  return filter && filter.filterType === FilterType.Custom;
+}
+
+export function isFilterInfo(filter : FilterInfo | CustomFilter) : filter is FilterInfo {
+  return filter && typeof (filter as FilterInfo).key === 'string' && filter.filterType !== FilterType.Custom;
+}
+
+const defaultPredicate: Predicate<any> = () => true;
+
+export function createFilterFuncs(filters: (FilterInfo | CustomFilter)[]){
+  return filters.filter(needsFilterCreation).map(createFilterFunc);
+}
+
+export function needsFilterCreation(filter: FilterInfo | CustomFilter): boolean {
+  if(isCustomFilter(filter)) {
+    return filter.active !== false;
+  }
+  return filter.filterValue != undefined && filter.active !== false;
+}
+
+export function createFilterFunc(filter: FilterInfo | CustomFilter): Predicate<any> {
+  if(isCustomFilter(filter)) {
+    return filter.active ? filter.predicate : defaultPredicate;
+  }
+  if(filter.filterValue == undefined) {
+    return defaultPredicate;
+  }
+
+  const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
+  if(!func) {
+    if(filterFactoryMap[filter.filterType]){
+      return filterFactoryMap[filter.filterType!](filter);
+    }
+  }
+
+  const cannotBeTrueForNull = !FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType!);
+  const getter = filter.filterBy || getFactory(filter.key);
+  return (rowObj) => {
+    const value = getter(rowObj);
+    return ((value == undefined) && cannotBeTrueForNull)
+      ? false
+      : func( value);
+  };
+}
+
+export type FilterFunc<T, V = T> = (filterInfo:FilterInfo) => (val:V) => boolean;
+export type Range<T> = { Start:T, End:T };
+
+const FalseyValueCanBeIncludedFilterTypes = [
+  FilterType.IsNull,
+  FilterType.NumberNotEqual,
+  FilterType.DateIsNotOn,
+  FilterType.StringDoesNotContain,
+] as FilterType[];
+
+export type FilterFuncs<T extends FilterType > = Partial<Record<T, FilterFunc<any, any>>>;