@one-paragon/angular-utilities 1.2.18 → 1.3.0

package/src/table-builder/components/table-container/table-container.scss

@@ -1,47 +0,0 @@
-.header-wrapper{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width:100%;
-}
-
-
-.flx-row-end{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.flat-menu{
-  line-height: initial;
-  height: initial;
-}
-
-.pointer{
-  cursor: pointer;
-}
-
-.add-key{
-  width: 90%;
-}
-
-.paginator{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  background-color: white;
-  bottom: 0px;
-  position: sticky;
-  border-top: .5px solid rgba(0,0,0,.12);
-}
-.profiles-menu{
-  visibility: hidden;
-  width: 0px;
-  height: 0px;
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  top: 50px;
-}

package/src/table-builder/components/table-container/table-container.spec.ts

@@ -1,154 +0,0 @@
-import { BehaviorSubject, of } from 'rxjs';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { SpaceCasePipe, PhoneNumberPipe } from '../../../utilities';
-import { FilterComponent } from '../filter/filter.component';
-import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FieldType } from '../../interfaces/report-def';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DateFilterComponent } from '../date-filter/date-filter.component';
-import { TableContainerComponent } from './table-container';
-import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-import { GenericTableComponent } from '../generic-table/generic-table.component';
-import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
-import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
-import { TableBuilder } from '../../classes/table-builder';
-import { MultiSortDirective } from '../../directives/multi-sort.directive';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { provideMockStore } from '@ngrx/store/testing';
-import { PaginatorComponent } from '../generic-table/paginator.component';
-import {  LetModule, PushModule } from '@ngrx/component';
-import { HarnessLoader, parallel } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import {MatTableHarness} from '@angular/material/table/testing';
-import { TransformCreator } from '../../services/transform-creator';
-
-const data = [
-  {
-    name: 'Joe',
-    age: 10,
-    balance: 25
-  },
-  {
-    name: 'Jane',
-    age: 20,
-    balance: 35
-  }
-];
-const metaData =  [
-  {
-    key: 'name',
-    fieldType: FieldType.String,
-    additional: {},
-    order : 1
-  },
-  {
-    key: 'age',
-    fieldType: FieldType.Number,
-    additional: {},
-    order : 2
-  },
-  {
-    key: 'balance',
-    fieldType: FieldType.Number,
-    additional: {},
-    order : 3
-  }
-];
-
-const initialState = {fullTableState: {
-  'test-id': {
-    metaData,
-    hiddenKeys: [],
-    pageSize: 10,
-    initialized : true ,
-    filters: [],
-  }
-},
-globalStorageState : {
-  localProfiles: {}
-}};
-describe('table container', () => {
-  let fixture: ComponentFixture<TableContainerComponent>;
-  let component: TableContainerComponent;
-  let loader: HarnessLoader;
-
-  beforeEach(() => {
-
-    TestBed.configureTestingModule({
-      declarations: [
-        TableContainerComponent,
-        FilterComponent,
-        GenFilterDisplayerComponent,
-        GenericTableComponent,
-        PaginatorComponent,
-        GenColDisplayerComponent,
-        SpaceCasePipe,
-        CurrencyPipe,
-        ColumnTotalPipe,
-        DateFilterComponent,
-        MultiSortDirective,
-      ],
-      providers: [
-       { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
-       provideMockStore({ initialState }),
-       DatePipe,
-       TransformCreator,
-       CurrencyPipe,
-       PhoneNumberPipe,
-      ],
-      imports: [
-        NoopAnimationsModule,
-        CommonModule,
-        FormsModule,
-        LetModule,
-      ]
-    })
-    .compileComponents();
-    fixture = TestBed.createComponent(TableContainerComponent);
-    component = fixture.componentInstance;
-    loader = TestbedHarnessEnvironment.loader(fixture);
-  });
-
-  it('can create component', () => {
-    component.tableId = 'test-id';
-    component.tableBuilder = new TableBuilder(of(data));
-    fixture.detectChanges();
-    expect(component).toBeDefined();
-  });
-
-  it('can add metadata dynamicaly after the table has already been rendered', async () => {
-    const md = new BehaviorSubject(metaData);
-    component.tableId = 'test-id';
-    component.tableBuilder = new TableBuilder(of(data), md);
-
-    fixture.detectChanges();
-    expect(component).toBeDefined();
-
-    const tables = await loader.getAllHarnesses(MatTableHarness);
-    expect(tables.length).toBe(1);
-    const table = tables[0];
-
-    let rows = await table.getRows();
-
-    let cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
-
-    expect(cells).toEqual([3, 3]);
-
-    md.next([...metaData, {
-        key: 'dynamic',
-        fieldType: FieldType.String,
-        order : 4,
-        additional: {},
-    }]);
-
-    fixture.detectChanges();
-
-    rows = await table.getRows();
-
-    cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
-
-    expect(cells).toEqual([4, 4]);
-
-  });
-});

package/src/table-builder/components/table-container/table-container.ts

@@ -1,356 +0,0 @@
-import {
-  Component,
-  Input,
-  EventEmitter,
-  Output,
-  ContentChildren,
-  QueryList,
-  ChangeDetectionStrategy,
-  Predicate,
-  ViewChild,
-  inject,
-  TemplateRef,
-  ContentChild,
-  ElementRef,
-  OnInit,
-  OnDestroy,
-  Injector,
-  contentChildren,
-  computed,
-  effect,
-  untracked,
-  runInInjectionContext,
-  input,
-} from '@angular/core';
-import { BehaviorSubject, Observable, ReplaySubject, combineLatest, of } from 'rxjs';
-import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
-import { map, mergeAll, scan, startWith, timestamp, mergeMap, switchMap } from 'rxjs/operators';
-import { TableBuilder } from '../../classes/table-builder';
-import { MatRowDef } from '@angular/material/table';
-import { CustomCellDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
-import { stateIs, TableStore } from '../../classes/table-store';
-import { ExportToCsvService } from '../../services/export-to-csv.service';
-import { ArrayDefaults } from '../../classes/DefaultSettings';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { InitializationState, TableState } from '../../classes/TableState';
-import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
-import { cloneDeep } from 'lodash';
-import { defaultShareReplay } from '../../../rxjs';
-import { createFilterFunc, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
-import { Dictionary } from '../../interfaces/dictionary';
-import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
-import { createLinkCreatorDict } from '../../services/link-creator.service';
-import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
-import { containerImports } from './table-container-imports';
-import { updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
-import { initialSortState, updateSortState } from './table-container.helpers/sort-state.helpers';
-import { getAllGroupHeaderNames, initialGroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
-import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
-import { TableProps, defaultProps } from './tableProps';
-import { PaginatorComponent } from '../generic-table/paginator.component';
-import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
-import { GenericTableComponent } from '../generic-table/generic-table.component';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { DataStore } from '../../classes/data-store';
-import { PersistedTableSettings } from '../../classes/table-builder-general-settings';
-
-
-@Component({
-    selector: 'tb-table-container',
-    templateUrl: './table-container.html',
-    styleUrls: ['./table-container.scss', '../../styles/collapser.styles.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
-    standalone: true,
-    imports: containerImports
-}) export class TableContainerComponent<T = any> implements OnInit, OnDestroy {
-  props: TableProps = { ...defaultProps };
-  @Output() data = new BehaviorSubject<T[]>([]);
-
-  public state = inject(TableStore);
-  private dataStore = inject(DataStore);
-  public config = inject(TableBuilderConfigToken);
-  public exportToCsvService = inject(ExportToCsvService<T>);
-  public wrapper = inject(TableWrapperDirective, { optional: true });
-  public stateService = inject(TableBuilderStateStore);
-  public injector = inject(Injector);
-
-  filterDirectives = contentChildren(TableFilterDirective, {descendants: true});
-  customFilterDirectives = contentChildren(TableCustomFilterDirective, {descendants: true});
-
-  $allFilterDirectives = computed( () =>  {
-      if(this.wrapper) {
-        return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
-      } {
-        return [...this.filterDirectives(), ...this.customFilterDirectives()];
-      }
-    }
-  );
-
-  $isInitializationState = (state: InitializationState) => computed(() =>
-    this.state.selectSignal(s => s.initializationState >= state)()) ;
-
-  allFilterDirectivesEffect = effect(() => {
-    const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
-    const stateFilters = this.state.$filters();
-    const filterDirectives = this.$allFilterDirectives();
-    untracked(() => {
-      if(loaded) {
-        filterDirectives.filter( f => !f.used).forEach( f => {
-          f.used = true;
-          if(f.savable) {
-            var filter = stateFilters[f.filterId];
-            if(isFilterInfo(filter)) {
-              const filterDirective: TableFilterDirective = f as TableFilterDirective;
-              filterDirective.fieldType = filter.fieldType;
-              filterDirective.filterType = filter.filterType;
-              filterDirective.setFilterValue(filter.filterValue);
-              filterDirective.key = filter.key;
-              filterDirective.update();
-            }
-            if(isCustomFilter(filter)) {
-              f.active = filter.active ?? false;
-            }
-            this.state.addFilter((f.filter$ as any));
-          }
-        });
-      }
-    })
-  });
-
-  @ViewChild(PaginatorComponent)  paginatorComponent?: PaginatorComponent;
-  @ViewChild(GenericTableComponent)  genericTable?: GenericTableComponent;
-  _$customRows = contentChildren(MatRowDef<any>);
-  $customRows = computed(() => [...this._$customRows()]);
-  $customCells = contentChildren(CustomCellDirective);
-  $myColumns = computed(() => {
-    return this.state.$metaDataArray().map( metaData => ({metaData, customCell: this.$customCells().find(cc => cc.customCell === metaData.key)}))
-  })
-  @ContentChild('table', {read: ElementRef}) tableElRef!: ElementRef;
-
-  @Input({ required: true }) tableBuilder!: TableBuilder;
-  $tableId = input<string | undefined>(undefined, { alias: 'tableId'})
-  @Input() set indexColumn(val: boolean) {
-    this.props.indexColumn = val;
-  }
-  @Input() set selectionColumn(val: boolean) {
-    this.props.selectionColumn = val;
-  }
-  @Input() set isSticky(val: boolean) {
-    this.props.isSticky = val;
-  }
-  @Input() set stickyFooter(val: boolean) {
-    this.props.stickyFooter = val;
-  }
-  @Input() set pageSize(value: number) {
-    this.state.setPageSize(value);
-  }
-  @Input() set groupHeaderTemplate( template: TemplateRef<any>) {
-    this.props.groupHeaderTemplate = template;
-  }
-  @Input() set groupHeaderHeight(value: number) {
-    this.props.groupHeaderHeight = value;
-  }
-  @Input() trackBy!: string;
-  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
-
-  @Output() selection$ = new EventEmitter();
-  $data = toSignal(this.data, { initialValue: [] });
-  @Output() onStateReset = new EventEmitter();
-  @Output() onSaveState = new EventEmitter();
-  @Output() state$ = this.state.getSavableState().pipe(
-    map(state => cloneDeep(state)),
-    defaultShareReplay(),
-  );
-
-  clearSelections(){
-    this.genericTable?.selection.clear(true);
-  }
-  displayData = new ReplaySubject<T[]>(1);
-
-  $displayData = toSignal(this.displayData, { initialValue: [] });
-
-  $collapseFooter = this.state.$collapseFooter;
-  $collapseHeader = this.state.$collapseHeader;
-
-  ngOnDestroy(){
-    const tableId = this.$tableId();
-    if(tableId) {
-      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
-    }
-  }
-
-  firstPage(): void {
-   this.paginatorComponent?.$paginator()?.firstPage();
-  }
-
-  lastPage(): void {
-   this.paginatorComponent?.$paginator()?.lastPage();
-  }
-
-  resetState() {
-    this.customFilterDirectives().forEach( cf => cf.reset());
-    this.filterDirectives().forEach( cf => cf.reset() );
-    this.state.resetState();
-    this.onStateReset.next(null)
-  }
-  $persistedState = computed(() => {
-    const tableId = this.$tableId();
-    if(tableId) {
-      return this.stateService.$selectLocalTableStateForView(tableId)();
-    }
-    return undefined
-  });
-
-  private initializeStateEffect = effect(() => {
-    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
-    const tableId = this.$tableId();
-    const persistedState = this.$persistedState();
-    untracked(() => {
-      if(metaLoaded) {
-        this.state.setTableSettings(this.tableBuilder.settings);
-        if(tableId){
-          if(persistedState){
-            persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
-            this.state.updateStateFromPersistedState(persistedState);
-            return;
-          }
-        }
-        this.state.setInitializationState(InitializationState.LoadedFromStore);
-      }
-    });
-  });
-  customFilters$ = new BehaviorSubject<Predicate<T>[]>([]);
-  initializeData() {
-
-    const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([] as Predicate<T>[]), this.customFilters$])
-      .pipe(map(([a, b]) => [...a, ...b]));
-
-    const filters$ = combineLatest([
-      this.state.filters$.pipe(scan(updateFilterInfoState, { allFilters: {} }), timestamp()),
-      predicateFilters$.pipe(scan(updateFilterPredicateState, {allFilters: [] as Predicate<T>[]}), timestamp())
-    ])
-    .pipe(
-      map(([filterInfo, pred]) => updateFilterState(filterInfo, pred))
-    );
-
-    const sortsState$ = this.state.sort$.pipe(scan(updateSortState, initialSortState));
-
-    const sortedAndFilteredData$ = sortAndFilterData(this.tableBuilder.getData$(), sortsState$, filters$);
-
-    const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp()), this.state.groupByKeys$.pipe(timestamp()), this.state.expandedGroups$.pipe(timestamp())]).pipe(
-      scan(updateGroupByState, initialGroupByState),
-      map(({displayData}) => displayData),
-      defaultShareReplay(),
-    );
-
-    this.state.on(sortedAndFilteredData$, (data) => {
-      this.data.next(data);
-      this.dataStore.patchState({dataLen: data.length});
-    });
-
-    this.state.on(flatGrouped$, (data) => {
-      this.displayData.next(data);
-    });
-  }
-  ngOnInit() {
-    const customCells$ = toObservable(this.$customCells, { injector: this.injector });
-    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
-      map(createLinkCreatorDict)
-    ));
-    const customCellMeta = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([] as MetaData[])));
-    const metaForState = combineLatest([this.tableBuilder.metaData$,  customCellMeta]).pipe(map(([mds, customCells]) => {
-      mds = mds.map(this.mapArrayFieldsMetaDatas);
-      return [
-        ...mds,
-        ...customCells.map( md => this.mergeMetaData(md, mds.find( item => item.key === md.key ) ))
-      ]
-    }));
-    this.state.setMetaData(metaForState);
-    runInInjectionContext(this.injector, () => {
-      const ds = new TableBuilderDataSource<T>(
-        this.$displayData,
-        this.state,
-        this.dataStore
-      );
-      this.state.updateState({
-        props: {
-          dataSource: ds,
-          ...this.props
-        }
-      })
-    })
-    this.initializeData();
-  }
-
-  mergeMetaData(metaData1: MetaData, metaData2?: MetaData) {
-    if(!metaData2){
-      metaData1.noExport = true;
-      return metaData1
-    }
-    if(!metaData1.displayName) metaData1.displayName = metaData2.displayName;
-    if(!metaData1.preSort) metaData1.preSort = metaData2.preSort;
-    if(!metaData1.order) metaData1.order = metaData2.order;
-    if(!metaData1.width) metaData1.width = metaData2.width;
-    if(metaData2.fieldType) metaData1.fieldType = metaData2.fieldType;
-    metaData1.noExport = !metaData2;
-    return metaData1;
-  }
-
-  exportToCsv(): void {
-    this.exportToCsvService.exportToCsv(this.$data());
-  }
-
-  expandAllGroups = () => {
-    const groupHeaders = getAllGroupHeaderNames(this.$displayData());
-    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
-  }
-
-  collapseAllGroups = () => this.state.collapseAll();
-
-  ngAfterContentInit() {
-    this.state.runOnceWhen(
-      stateIs(InitializationState.LoadedFromStore),
-      state => {
-        this.addFilterDirectives(state);
-        this.state.updateState({ initializationState: InitializationState.Ready });
-      });
-  }
-
-
-  mapArrayFieldsMetaDatas = (meta : MetaData<T>) => {
-    if(meta.fieldType === FieldType.Array){
-      const additional = {...meta.additional} as ArrayAdditional;
-      additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
-      additional.limit = additional.limit ?? this.config.arrayDefaults?.limit ?? ArrayDefaults.limit;
-      return {...meta,additional}
-    }
-    return meta;
-  }
-
-
-  addFilterDirectives = (state: TableState) => {
-    const customFilters$ =  toObservable(this.$allFilterDirectives, {injector: this.injector}).pipe(
-      mergeMap( customerFilters => customerFilters
-        .filter( filter => !filter.savable )
-        .map(filter => filter.filter$ )
-      ),
-      mergeAll(),
-      scan( (a,b)=> {
-          if(b.active) {
-            a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
-          } else {
-            delete a[b.filterId] ;
-          }
-      return a;
-      }, {} as Dictionary<Predicate<any>>),
-      map( f => Object.values(f))
-    );
-
-    this.state.on(customFilters$, (f) => {
-      this.customFilters$.next(f);
-    });
-  }
-
-  $useVirtual = this.state.$isVirtual;
-}

package/src/table-builder/components/table-container/tableProps.ts

@@ -1,20 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
-
-export interface TableProps {
-  indexColumn: boolean;
-  selectionColumn: boolean;
-  isSticky: boolean;
-  stickyFooter:boolean;
-  groupHeaderTemplate?: TemplateRef<any>;
-  dataSource?: TableBuilderDataSource<any>;
-  groupHeaderHeight?: number;
-}
-
-export const defaultProps: TableProps = {
-  indexColumn: false,
-  selectionColumn: false,
-  isSticky: true,
-  stickyFooter: false,
-  groupHeaderHeight: undefined,
-}