@one-paragon/angular-utilities 0.3.11-beta.1 → 0.4.0

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

@@ -1,325 +0,0 @@
-import {
-  Component,
-  Input,
-  EventEmitter,
-  Output,
-  ContentChildren,
-  QueryList,
-  ChangeDetectionStrategy,
-  Predicate,
-  ViewChild,
-  inject,
-  TemplateRef,
-  ContentChild,
-  ElementRef,
-} from '@angular/core';
-import { BehaviorSubject, Observable, from, ReplaySubject, combineLatest, of } from 'rxjs';
-import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
-import { first, last, map, tap, withLatestFrom, mergeAll, scan, switchAll, startWith, timestamp } 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 { mapArray, notNull } from '../../../rxjs/rxjs-operators';
-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 { sortData } from '../../functions/sort-data-function';
-import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
-import { cloneDeep } from 'lodash';
-import { ColumnInfo } from '../../interfaces/ColumnInfo';
-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 { 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';
-
-
-@Component({
-  selector: 'tb-table-container',
-  templateUrl: './table-container.html',
-  styleUrls: ['./table-container.css','../../styles/collapser.styles.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [TableStore, ExportToCsvService, WrapperFilterStore],
-  standalone: true,
-  imports: containerImports,
-
-}) export class TableContainerComponent<T = any> {
-  props: TableProps = defaultProps;
-
-  @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;
-  }
-
-  @ViewChild(PaginatorComponent)  paginatorComponent?: PaginatorComponent;
-
-  @ContentChildren(TableCustomFilterDirective, {descendants: true}) customFilterDirectives!: QueryList<TableCustomFilterDirective>;
-  @ContentChildren(TableFilterDirective, {descendants: true}) filterDirectives!: QueryList<TableFilterDirective>;
-  @ContentChildren(MatRowDef) customRows!: QueryList<MatRowDef<any>>;
-  @ContentChildren(CustomCellDirective) customCells!: QueryList<CustomCellDirective>;
-  @ContentChild('table', {read: ElementRef}) tableElRef!: ElementRef;
-  @Input() tableId!: string;
-  @Input() tableBuilder!: TableBuilder;
-  @Input() trackBy!: string;
-  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
-
-  @Output() selection$ = new EventEmitter();
-  displayDataSubject = new ReplaySubject<Observable<T[]>>(1);
-  displayData = this.displayDataSubject.pipe(
-    switchAll(),
-    defaultShareReplay(),
-  );
-
-  dataSubject = new ReplaySubject<Observable<T[]>>(1);
-  @Output() data = this.dataSubject.pipe(
-    switchAll(),
-    defaultShareReplay(),
-  );
-  @Output() onStateReset = new EventEmitter();
-  @Output() onSaveState = new EventEmitter();
-  state = inject(TableStore);
-  @Output() state$ = this.state.getSavableState().pipe(
-    map(state => cloneDeep(state)),
-    defaultShareReplay(),
-  );
-
-  collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
-
-  myColumns$!: Observable<ColumnInfo[]>;
-  stateKeys$?: Observable<string[] | null>;
-  currentStateKey$?: Observable<string>;
-
-  config = inject(TableBuilderConfigToken);
-  exportToCsvService = inject(ExportToCsvService<T>);
-  wrapper = inject(TableWrapperDirective, { optional: true });
-  store = inject(TableBuilderStateStore);
-  _ = this.state.on( this.state.getSavableState().pipe(last()), finalState => {
-    if(this.tableId) {
-      this.store.setLocalProfile({key:this.tableId,value: finalState});
-    }
-  });
-
-
-  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)
-  }
-
-  initializeState() {
-    this.state.setTableSettings(this.tableBuilder.settings);
-    this.state.runOnceWhen(
-      stateIs(InitializationState.MetaDataLoaded),
-      () => {
-        if(this.tableId) {
-          const persistedState$ = this.store.selectLocalProfileState(this.tableId).pipe(
-            tap( persistedState => {
-              if(!persistedState) {
-                this.state.setInitializationState(InitializationState.LoadedFromStore);
-              }
-            }),
-            notNull(),
-          );
-          this.state.updateStateFromPersistedState(persistedState$);
-        } else {
-          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.displayDataSubject.next(flatGrouped$);
-    this.dataSubject.next(sortedAndFilteredData$);
-
-    this.state.on(this.displayData, (data) => {
-      this.state.updateState({dataLen: data.length})
-    });
-  }
-  ngOnInit() {
-    const ds = new TableBuilderDataSource<T>(
-      this.displayData,
-      this.state,
-    );
-    this.state.updateState({props: {
-      dataSource: ds,
-      ...this.props
-    }})
-    this.initializeState();
-    this.initializeData();
-
-    if(this.tableId) {
-      this.stateKeys$ = this.store.selectLocalProfileKeys(this.tableId);
-      this.currentStateKey$ = this.store.selectLocalProfileCurrentKey(this.tableId);
-    }
-  }
-
-  exportToCsv(): void {
-    const sorted = this.data.pipe(
-      withLatestFrom(this.state.sort$),
-      map(([data, sorted]) => sortData(data, sorted))
-    );
-    this.exportToCsvService.exportToCsv(sorted);
-  }
-
-  saveState() {
-    this.state.getSavableState().pipe(
-      first()
-    ).subscribe(tableState => {
-      this.onSaveState.next(null);
-      this.store.saveLocalProfile({ key: this.tableId, value:tableState, persist: true} );
-      this.store.setLocalProfile({ key: this.tableId, value:tableState } );
-    });
-  }
-
-  setProfileState(val: string) {
-    this.store.setLocalProfilesState({key:this.tableId, current: val});
-  }
-
-  deleteProfileState(stateKey: string) {
-    this.store.deleteLocalProfile({key:this.tableId, stateKey});
-  }
-
-  ngAfterContentInit() {
-    this.initializeColumns();
-    this.state.runOnceWhen(
-      stateIs(InitializationState.LoadedFromStore),
-      state => {
-        this.addFilterDirectives(state);
-        this.state.updateState({initializationState: InitializationState.Ready});
-      });
-  }
-
-  initializeColumns() {
-    const customCellMap = new Map(this.customCells.map(cc => [cc.customCell,cc]));
-    this.state.setMetaData(this.tableBuilder.metaData$!.pipe(
-      map((mds) => {
-        mds = mds.map(this.mapMetaDatas);
-        return [
-          ...mds,
-          ...this.customCells.map( cc => cc.getMetaData(mds.find( item => item.key === cc.customCell )) )
-        ]
-      })
-    ));
-    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
-      map(createLinkCreatorDict)
-    ))
-
-    this.myColumns$ = this.state.metaDataArray$.pipe(
-      mapArray( metaData => ({metaData, customCell: customCellMap.get(metaData.key)!}))
-    );
-  }
-
-  mapMetaDatas = (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.arrayInfo?.limit ?? ArrayDefaults.limit;
-      return {...meta,additional}
-    }
-    return meta;
-  }
-
-  collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
-
-  addFilterDirectives = (state: TableState) => {
-    let allFilterDirectives = [...this.filterDirectives, ...this.customFilterDirectives];
-    if(this.wrapper) {
-      allFilterDirectives = [...allFilterDirectives, ...this.wrapper.registrations];
-    }
-
-    const customFilters: (TableCustomFilterDirective | TableFilterDirective )[] = [];
-
-    allFilterDirectives.filter( f => !f.used).forEach( f => {
-      f.used = true;
-      if(f.savable) {
-        var filter = state.filters[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));
-      } else {
-        customFilters.push(f);
-      }
-    });
-
-    const customFilters$ =  from( customFilters.map( cf => cf.filter$  )).pipe(
-      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);
-    });
-  }
-}

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

@@ -1,18 +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>;
-}
-
-export const defaultProps: TableProps = {
-  indexColumn: false,
-  selectionColumn: false,
-  isSticky: true,
-  stickyFooter: false,
-}

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

@@ -1,126 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  forwardRef,
-} from '@angular/core';
-import {
-  CdkVirtualScrollViewport,
-  ScrollingModule,
-  VIRTUAL_SCROLL_STRATEGY,
-} from '@angular/cdk/scrolling';
-import { distinctUntilChanged, map } from 'rxjs';
-import { defaultShareReplay } from '../../../rxjs';
-import { TableStore } from '../../classes/table-store';
-import { TableVirtualScrollStrategy } from '../scroll-strategy';
-import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
-
-@Component({
-  selector: 'tb-virtual-scroll-container',
-  template: `
-    <cdk-virtual-scroll-viewport>
-      <ng-content/>
-    </cdk-virtual-scroll-viewport>
-    `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [ScrollingModule],
-  viewProviders: [
-    {
-      provide: VIRTUAL_SCROLL_STRATEGY,
-      useFactory: (c: VirtualScrollContainer) => c.scrollStrategy,
-      deps: [forwardRef(() => VirtualScrollContainer)],
-    },
-  ],
-})
-export class VirtualScrollContainer implements OnInit, OnDestroy {
-  constructor(
-    private state: TableStore
-  ) {}
-
-  @ViewChild(CdkVirtualScrollViewport, { static: true }) viewport!:CdkVirtualScrollViewport;
-  defaultOptions = new VirtualScrollOptions();
-  scrollStrategy = new TableVirtualScrollStrategy(
-    (this.state.tableSettings().useVirtualScroll! as VirtualScrollOptions).itemHeight|| this.defaultOptions.itemHeight,
-    (this.state.tableSettings().useVirtualScroll! as VirtualScrollOptions).headerOffset || this.defaultOptions.headerOffset
-    )
-  ngOnInit(): void {
-    addEventListener('resize', this.resizeHandler);
-    setTimeout(() => {
-      this.setSize(this.viewport.elementRef);
-    }, 0);
-
-    if (this.state.tableSettings().usePaginator) {
-      this.state.on(
-        this.state.select((s) => s.pageSize),
-        (len) => this.scrollStrategy.setDataLength(len)
-      );
-    } else {
-      this.state.on(
-        this.state.select((s) => s.dataLen),
-        (len) => this.scrollStrategy.setDataLength(len)
-      );
-    }
-    this.state.on(this.viewport.renderedRangeStream, (range) => {
-      this.state.updateState({
-        virtualStart: range.start,
-        virtualEnd: range.end,
-      });
-    });
-    var offset$ = this.viewport.scrolledIndexChange.pipe(
-      map(() => this.viewport.getOffsetToRenderedContentStart() ?? 0),
-      distinctUntilChanged(),
-      defaultShareReplay()
-    );
-
-    this.state.on(offset$, (offset) => {
-      this.state.updateState({ virtualScrollOffset: offset });
-    });
-  }
-
-  ngOnDestroy(): void {
-    removeEventListener('resize', this.resizeHandler);
-  }
-
-  setSize(el: ElementRef<HTMLElement>) {
-    const vsViewport: Element = el.nativeElement;
-    const vsContentWrapper: Element = vsViewport?.children[0];
-    const hasHorizontalScrollBar =
-      vsViewport?.scrollWidth > vsViewport?.clientWidth;
-    const rect = vsContentWrapper.getBoundingClientRect();
-    let wrapperHeight = 0;
-    if (rect.top >= 0) {
-      wrapperHeight = rect.bottom;
-    } else {
-      wrapperHeight = rect.bottom + rect.top;
-    }
-    if (wrapperHeight < window.innerHeight) {
-      vsViewport.setAttribute(
-        'style',
-        `height: ${
-          vsContentWrapper.clientHeight + (hasHorizontalScrollBar ? 17 : 0)
-        }px !important;`
-      );
-    } else {
-      vsViewport.setAttribute(
-        'style',
-        `height: ${
-          window.innerHeight - el.nativeElement.offsetTop - (0 || 167)
-        }px !important;`
-      );
-    }
-    this.viewport?.checkViewportSize();
-    const virtualScrollOffset = this.viewport.getOffsetToRenderedContentStart() ?? 0
-    this.state.updateState({ virtualScrollOffset });
-  }
-
-  resizeHandler = () => {
-    if (this.viewport) {
-      this.setSize(this.viewport.elementRef);
-    }
-  };
-
-}

package/src/table-builder/components/table-container-filter/filter-list/filter-list.component.html

@@ -1,31 +0,0 @@
-<div class="d-w" *ngrxLet="currentFilters$ as currentFilters" >
-
-  @if (currentFilters.length) {
-    <button class="cancel-button" mat-icon-button (click)="clearAll()" matTooltip="Close all Filters Cards">
-      <mat-icon class="cancel-button" color="primary">close</mat-icon>
-    </button>
-    <div class="float">
-      @for (filter of currentFilters; track filter.key) {
-        <div class="filter">
-          <tb-filter [filter]="filter" (close)="deleteByIndex($index)" />
-        </div>
-      }
-    </div>
-  }
-
-  <mat-chip-set *ngrxLet="filters$ as filters">
-    @for (filter of filters; track filter.key) {
-      <mat-chip (dblclick)="addFilter(filter)"  (removed)="tableState.removeFilter(filter.filterId!)">
-        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}
-        <mat-icon matChipRemove>cancel</mat-icon>
-      </mat-chip>
-    }
-    @if (filters.length > 1) {
-      <mat-chip  (removed)="tableState.clearFilters()">
-        Clear All
-        <mat-icon matChipRemove>cancel</mat-icon>
-      </mat-chip>
-    }
-  </mat-chip-set>
-
-</div>

package/src/table-builder/components/table-container-filter/filter-list/filter-list.component.ts

@@ -1,52 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { TableStore } from '../../../classes/table-store';
-import { FilterInfo, isFilterInfo } from '../../../classes/filter-info';
-import { map } from 'rxjs/operators';
-import { WrapperFilterStore } from '../table-wrapper-filter-store';
-import { Observable } from 'rxjs';
-import { LetDirective } from '@ngrx/component';
-import { AsyncPipe } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { FilterComponent } from '../../filter/filter.component';
-import { MatChipsModule } from '@angular/material/chips';
-import { KeyDisplayPipe } from '../../../pipes/key-display';
-import { FormatFilterTypePipe } from '../../../pipes/format-filter-type.pipe';
-import { FormatFilterValuePipe } from '../../../pipes/format-filter-value.pipe';
-
-@Component({
-  selector: 'lib-filter-list',
-  templateUrl: './filter-list.component.html',
-  styleUrls: ['../gen-filter-displayer/gen-filter-displayer.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
-    MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-  ]
-})
-export class FilterChipsComponent {
-
-  tableState = inject(TableStore);
-  filterStore = inject(WrapperFilterStore);
-
-  filters$: Observable<FilterInfo<any>[]> = this.tableState.filters$.pipe(
-    map(filters =>
-      Object.values(filters).filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo<any>[]
-    ));
-
-  deleteByIndex(index: number) {
-    this.filterStore.deleteByIndex(index);
-  }
-
-  addFilter(filter:FilterInfo<any>){
-    this.filterStore.addFilter(filter);
-  }
-
-  clearAll() {
-      this.filterStore.clearAll();
-  }
-
-  currentFilters$ = this.filterStore.currentFilters$;
-}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.css

@@ -1,42 +0,0 @@
-.filter {
-    margin: 15px;
-    display: inline-block;
-}
-.filter-button {
-    color: cornflowerblue;
-    font-size: 22px;
-    font-weight: 700;
-}
-
-.cancel-button  {
-  margin-right: 30px;
-  font-weight: 700;
-}
-.filter-wrapper{
-  margin-top: 1em;
-  margin-bottom: 1em;
-  float: right;
-}
-.menu {
-    margin-bottom: 10px;
-    width: 109.1%;
-}
-
-.filter-labels {
-    color: cornflowerblue;
-    font-size: 17px;
-    font-weight: 600;
-}
-.float{
-  position: absolute;
-  width: fit-content;
-  z-index: 101;
-  top: 10px;
-  right: 180px;
-  max-width: 90vw;
-}
-.d-w{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.html

@@ -1,10 +0,0 @@
-<button stop-propagation class="filter-button" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Add Filter">
-  <mat-icon class="filter-icon" color="primary">filter_list</mat-icon>
-</button>
-<mat-menu #menu="matMenu">
-  @for (md of filterCols$ | async; track md.key) {
-    <button (click)="addFilter(md)" mat-menu-item>
-      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
-    </button>
-  }
-</mat-menu>

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.spec.ts

@@ -1,86 +0,0 @@
-import { firstValueFrom, of } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { TestBed, ComponentFixture, ComponentFixtureAutoDetect, tick, fakeAsync, flush } from '@angular/core/testing';
-import { GenFilterDisplayerComponent } from './gen-filter-displayer.component';
-import { SpaceCasePipe } from '../../../../utilities/pipes/space-case.pipes';
-import { FilterComponent } from '../../filter/filter.component';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FieldType } from '../../../interfaces/report-def';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DateFilterComponent } from '../../date-filter/date-filter.component';
-import { TableBuilderModule } from '../../../table-builder.module';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { TableStore } from '../../../classes/table-store';
-import { WrapperFilterStore } from '../table-wrapper-filter-store';
-
-
-function getMetaData() {
-  return of([
-    {
-      key: 'name',
-      displayName: 'first name',
-      fieldType: FieldType.String,
-      additional: {},
-      order: 1
-    },
-    {
-      key: 'last',
-      displayName: 'last name',
-      fieldType: FieldType.String,
-      additional: {},
-      order: 2
-    }
-  ]);
-}
-
-describe('generic filter displayer', () => {
-  let fixture: ComponentFixture<GenFilterDisplayerComponent>;
-  let component: GenFilterDisplayerComponent;
-
-  const clickFilter = (idx: number) => {
-    const btn = fixture.debugElement.query(By.css('.filter-button')).nativeElement;
-
-    btn.click();
-    const menu = fixture.debugElement.queryAll(By.css('.mat-menu-item'));
-    menu[idx].nativeElement.click();
-  };
-  beforeEach(() => {
-
-    TestBed.configureTestingModule({
-      declarations: [
-        GenFilterDisplayerComponent,
-        SpaceCasePipe,
-        FilterComponent,
-        DateFilterComponent,
-      ],
-      providers: [TableStore, WrapperFilterStore,
-      { provide: ComponentFixtureAutoDetect, useValue: true }
-      ],
-      imports: [
-        NoopAnimationsModule,
-        CommonModule,
-        FormsModule,
-        TableBuilderModule.forRoot({ defaultTableState: { sorted: []} }),
-        StoreModule.forRoot({}),
-        EffectsModule.forRoot([])]
-    })
-      .compileComponents();
-    fixture = TestBed.createComponent(GenFilterDisplayerComponent);
-    component = fixture.componentInstance;
-    component.filterCols$ = getMetaData();
-  });
-
-  it('should get the generic filter displayer component', () => {
-    expect(component).toBeDefined();
-  });
-
-  it('should be able to create a filter',  async () => {
-    clickFilter(0);
-    const filter = await firstValueFrom(fixture.componentInstance.filterStore.state$.pipe(map(x => x.filterInfo)));
-    expect(filter.length).toBe(1);
-  });
-
-});