@one-paragon/angular-utilities 1.2.17 → 1.2.18

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,36 @@
+import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core';
+import { defaultTableState } from './TableState';
+import { 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 };
+  export?: TableBuilderExport;
+  dateFormats?: DefaultSettings;
+  arrayDefaults?: ArrayAdditional;
+  transformers?: Partial<{ [key in keyof typeof FieldType]: (val: any) => any }>
+}
+
+export interface TableBuilderExport {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+  onSave?: (event?: any) => void;
+  prepend? : 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 || defaultTableState}
+  ])
+}

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

@@ -0,0 +1,61 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { Subscription } from 'rxjs';
+import { TableStore } from './table-store';
+import { DataStore } from './data-store';
+import { computed, effect, Signal, untracked } from '@angular/core';
+
+export class TableBuilderDataSource<T> extends MatTableDataSource<T> {
+  subscription?: Subscription;
+  constructor(
+    public dataSrc: Signal<T[]>,
+    state: TableStore,
+    data: DataStore,
+  ) {
+    super([]);
+  
+
+    const $currentPage = state.$currentPage;
+    const $pageSize = state.$pageSize;
+    const $virtualEnds = data.selectSignal(d => d.virtualEnds);
+
+    const $dataLength = computed(() => dataSrc().length);
+
+    const $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 });
+    });
+    const $dataToShow = computed(() =>
+      dataSrc().slice($dataSize().start, $dataSize().end));
+  
+    effect(() => {
+      const dataToShow = $dataToShow();
+      untracked(() => this.data = dataToShow);
+    });
+  }
+
+
+  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,93 @@
+import { CustomFilter, FilterInfo } from './filter-info';
+import { Dictionary } from '../interfaces/dictionary';
+import { Sort } from '@angular/material/sort';
+import { MetaData, Target } 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 interface Group {
+  key: string;
+  groupName: string;
+  children: any[];
+  isGroupHeader: true;
+}
+
+export interface GroupedData {
+  key: string,
+  expandedHeaders: string[]
+}
+
+export interface PersistedTableState {
+  hiddenKeys?: string [];
+  filters: Dictionary<FilterInfo | CustomFilter>;
+  sorted : Sort [];
+  userDefined : { order:Dictionary<number>, widths:Dictionary<number>, table:{ width?:number }, pageSize?: 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};
+  dataLen: 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,
+  LoadedFromStore,
+  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 = {
+  virtualScrollOffset: 0,
+  dataLen: 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,108 @@
+import { FilterTypes, 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 { get } from 'lodash';
+
+const filterFactoryMap: Dictionary<FilterFunc<any,any>> = {
+  [FilterTypes.And] : (filter: FilterInfo ): ((obj: any) => boolean) =>  {
+    const filters = (filter.filterValue as FilterInfo[]).map(createFilterFunc);
+    return (obj: any) : boolean => filters.every( f => f(obj));
+  },
+  [FilterTypes.In] : (filter: FilterInfo ): (obj: any) => boolean =>  {
+    const filters = (filter.filterValue as FilterInfo[]).map(createFilterFunc);
+    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;
+
+}
+
+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;
+}
+
+
+
+export interface CustomFilter<T extends FieldType = any>  extends FilterState {
+  predicate: Predicate<T>;
+  filterType: typeof FilterTypes.Custom;
+}
+
+export function isCustomFilter(filter : FilterInfo | CustomFilter) :  filter is CustomFilter {
+  return filter && filter.filterType === FilterTypes.Custom;
+}
+
+export function isFilterInfo(filter : FilterInfo | CustomFilter) :  filter is FilterInfo {
+  return  filter && typeof (filter as FilterInfo).key === 'string' && filter.filterType !== FilterTypes.Custom;
+}
+
+const defaultPredicate: Predicate<any> = () => true;
+
+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!);
+  return (rowObj) => {
+    const value = get(rowObj, filter.key);
+    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 = [FilterTypes.IsNull,FilterTypes.NumberNotEqual,FilterTypes.DateIsNotOn,FilterTypes.StringDoesNotContain] as FilterType[];
+
+export type FilterFuncs<T extends  FilterType > = Partial<Record<T, FilterFunc<any,any>>>;