@one-paragon/angular-utilities 2.8.3 → 2.8.4

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

@@ -0,0 +1,467 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Predicate,
+  inject,
+  TemplateRef,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+  input,
+  viewChild,
+  output,
+  ElementRef,
+  linkedSignal,
+  DestroyRef,
+} from '@angular/core';
+import { BehaviorSubject, Timestamp } from 'rxjs';
+import { CustomCellMeta, MetaData } from '../../interfaces/meta-data';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, CustomGroupRowDirective, CustomHeaderDirective, MultiSortDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { TableStore } from '../../classes/table-store';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { InitializationState } from '../../classes/TableState';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { createFilterFunc, CustomFilter, FilterInfo, isCustomFilter, needsFilterCreation } from '../../classes/filter-info';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { FilterInfoDict, FilterInfoState, FilterPredicateState, patchDirectiveFromState, updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, SortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, getAllGroupHeaderNamesByKeys, GroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
+import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
+import { TableProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+import { PersistedTableSettings } from '../../classes/table-builder-general-settings';
+import { mergeCustomCellMetaData } from './table-container.helpers/meta-data.helpers';
+import { SelectionChange } from '@angular/cdk/collections';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
+import { GroupByListComponent } from '../group-by-list/group-by-list.component';
+import { ProfilesMenuComponent } from '../profiles-menu/profiles-menu.component';
+import { SortMenuComponent } from '../sort-menu/sort-menu.component';
+import { FilterChipsComponent } from '../table-container-filter/filter-list/filter-list.component';
+import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { TableHeaderMenuComponent } from '../table-header-menu/table-header-menu.component';
+import { VirtualScrollContainer } from './virtual-scroll-container';
+import { Sort } from '@angular/material/sort';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { buildInAllValuesFilter } from '../../services/all-values-filter-creator.service';
+import { notNull } from '../../../rxjs';
+import { GroupedData, NoneGroupHeader } from '../../types/group-types';
+
+@Component({
+  selector: 'tb-table-container',
+  templateUrl: './table-container.component.html',
+  styleUrls: ['./table-container.component.scss', '../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
+  imports: [
+    NgTemplateOutlet,
+    PaginatorComponent,
+    MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
+    SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
+    MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
+  ]
+}) export class TableContainerComponent<T = any> {
+  public state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  public wrapper = inject(TableWrapperDirective, { optional: true });
+  public stateService = inject(TableBuilderStateStore);
+  public injector = inject(Injector);
+  public elementRef = inject(ElementRef);
+  private exportToCsvService = inject(ExportToCsvService);
+  private config = inject(TableBuilderConfigToken);
+  protected dataSource = new TableBuilderDataSource<T>(
+    this.state,
+    this.dataStore
+  );
+
+  $filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
+  $customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
+  $paginatorComponent = viewChild(PaginatorComponent);
+  $paginatorWrapper = viewChild<ElementRef<HTMLDivElement>>('paginatorWrapper');
+  $genericTable = viewChild(GenericTableComponent);
+  _$customRows = contentChildren(MatRowDef<any>);
+  $customRows = computed(() => [...this._$customRows()]);
+  $customCells = contentChildren(CustomCellDirective);
+  $customHeaders = contentChildren(CustomHeaderDirective);
+  $customGroupRows = contentChildren(CustomGroupRowDirective);
+  $menu = viewChild.required(MatMenu);
+  menuInjector = Injector.create({
+    providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
+    parent: this.injector
+  })
+
+  $tableBuilder = input.required<TableBuilder<T>>({ alias: 'tableBuilder' });
+  $tableIdInput = input<string | undefined>(undefined, { alias: 'tableId' });
+  $trackByInput = input<string | undefined>(undefined, { alias: 'trackBy' });
+  $inputFilters = input<(Predicate<T> | CustomFilter<T> | FilterInfo<any, T>)[]>([], { alias: 'inputFilters' });
+  $filterInfoInputs = computed(() =>
+    this.$inputFilters().filter(i => !isFunction(i)) as (FilterInfo | CustomFilter)[]);
+
+  $indexColumnInput = input<boolean>(false, { alias: 'indexColumn' });
+  $selectionColumnInput = input<boolean>(false, { alias: 'selectionColumn' });
+  $stickyHeaderInput = input<boolean>(true, { alias: 'stickyHeader' });
+  $stickyFooterInput = input<boolean>(undefined, { alias: 'stickyFooter' });
+  $groupHeaderTemplate = input<TemplateRef<any> | undefined>(undefined, { alias: 'groupHeaderTemplate' });
+  $groupHeaderHeight = input<number | undefined>(undefined, { alias: 'groupHeaderHeight' });
+  $pageSize = input<number | undefined>(undefined, { alias: 'pageSize' });
+
+  _selection$ = new BehaviorSubject<SelectionChange<T> | null>(null);
+  selection$ = outputFromObservable(this._selection$.pipe(notNull()), { alias: 'selection' });
+  onStateReset$ = output<null>({ alias: 'onStateReset' });
+  onSaveState$ = output<null>({ alias: 'onSaveState' });
+  state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
+  $data = computed(() => this.$sortedAndFilteredData()?.value || []);
+  data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
+  /**
+   * Will be different than $data if grouping is applied
+   */
+  $sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || []);
+  sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
+
+  private $displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
+  public clearSelections(){
+    this.$genericTable()?.$selection().clear(true);
+  }
+  public firstPage(): void {
+    this.$paginatorComponent()?.$paginator()?.firstPage();
+  }
+  public lastPage(): void {
+    this.$paginatorComponent()?.$paginator()?.lastPage();
+  }
+  public expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData()!);
+    this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
+  }
+
+  public expandAllOfGroup = (groupKey: string) => {
+    const groupHeaders = getAllGroupHeaderNamesByKeys(this.$displayData()!, [groupKey]);
+    this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
+  }
+
+  public collapseAllGroups = () => this.state.collapseAll();
+  public exportToCsv = () => this.exportToCsvService.exportToCsv(this.$data());
+
+
+  protected $myColumns = computed(() => {
+    return this.state.$metaDataArray().map( metaData => ({
+      metaData,
+      customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key),
+      customHeader: this.$customHeaders().filter(ch => ch.$inited()).find(ch => ch.$customHeader() === metaData.key)
+    }))
+  });
+  protected $useVirtual = this.state.$isVirtual;
+  protected $collapsedFooter = this.state.$footerCollapsed;
+  protected $collapsedHeader = this.state.$headerCollapsed;
+  protected $displayDataLength = computed(() => this.$displayData()?.length || 0);
+
+
+  $tableBuilderSettings = computed(() => this.$tableBuilder().$settings());
+  $trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy);
+  $tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId);
+  $includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn);
+  $includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn);
+  $stickyHeader = computed(() => {
+    const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
+    if(settings != null){
+      return settings;
+    }
+    return this.$stickyHeaderInput();
+  });
+  $stickyFooter = computed(() => {
+    if(this.$stickyFooterInput() != null){
+      return !!this.$stickyFooterInput();
+    }
+    if(this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow != null){
+      return !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow;
+    }
+    return this.config.defaultTableSettings?.columnFooterSettings?.stickyFooterRow || false;
+  })
+
+  $props = computed((): TableProps => {
+    const indexColumn = this.$includeIndexColumn();
+    const selectionColumn = this.$includeSelectionColumn();
+    const stickHeader = this.$stickyHeader();
+    const stickyFooter = this.$stickyFooter();
+    const groupHeaderTemplate = this.$groupHeaderTemplate();
+    const groupHeaderHeight = this.$groupHeaderHeight();
+    const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
+    return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows })
+  });
+
+  #initTableBuilder = effect(() => {
+    const tb = this.$tableBuilder();
+    untracked(() => {
+      if(tb){
+        tb?.prep(this.injector);
+        tb._container.set(this);
+      }
+    })
+  });
+
+  #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
+    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+    if(!metaLoaded) return;
+    const persistedState = this.$persistedState();
+    const tbSettings = this.$tableBuilderSettings()!;
+    untracked(() => {
+      this.state.setTableSettings(tbSettings);
+      if(persistedState){
+        persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+        this.state.updateStateFromPersistedState(persistedState);
+      }
+      this.state.setInitializationState(InitializationState.Ready);
+    });
+  });
+
+  #setPageSizeFromInputEffect = effect(() => {
+    const pageSize = this.$pageSize();
+    const userDefinedPageSize = this.state.$userDefinedPageSize();
+    if(pageSize && !userDefinedPageSize) {
+      untracked(() => this.state.setPageSize(pageSize));
+    }
+  });
+
+  #patchedFilters: string[] = [];
+
+  #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
+    const filterDirectives = this.$allFilterDirectives();
+    if(!loaded || !filterDirectives.length) return;
+    const stateFilters = this.state.$filters();
+
+    untracked(() => {
+      filterDirectives.filter(f => f.savable && !this.#patchedFilters.includes(f.filterId)).forEach( f => {
+        this.#patchedFilters.push(f.filterId);
+        const filter = stateFilters[f.filterId];
+
+        patchDirectiveFromState(f, filter);
+        this.state.addFilter(f.filter$ as any);
+      });
+    })
+  });
+
+  #patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
+    const inputFilters = this.$filterInfoInputs();
+    if(!loaded || !inputFilters.length) return;
+
+    untracked(() => {
+      const stateFilters = this.state.$filters();
+      inputFilters.filter(f => f.filterId).forEach( f => {
+        const patched = this.#patchedFilters.includes(f.filterId);
+        const stateFilter = stateFilters[f.filterId];
+
+        if(patched || !stateFilter) {
+          this.state.addFilter(f);
+        } else if(isCustomFilter(f)){
+          (stateFilter as CustomFilter).predicate = f.predicate;
+          this.state.addFilter(stateFilter);
+        }
+        this.#patchedFilters.push(f.filterId);
+      });
+    })
+  });
+
+  #addPropsToStoreFromInputsEffect = effect(() => {
+    const props = this.$props();
+    untracked(() => this.state.setProps(props));
+  });
+
+  #addMetaDataToStoreEffect = effect(() => {
+    const allMetaDatas = this.$allMetaDatas();
+    if(!allMetaDatas) return;
+    untracked(() => {
+      this.state.setMetaData(allMetaDatas);
+      this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
+    });
+  });
+
+  #setFilteredDataLengthEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const data = this.$sortedAndFilteredData();
+    if(!tableBuilder || !data) return;
+    untracked(() => {
+      this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
+    })
+  });
+
+  #setDataSourceDataEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const flat = this.$filteredSortedAndGrouped();
+    if(!tableBuilder || !flat) return;
+    untracked(() => {
+      const data = flat.displayData;
+      this.dataSource.setData(data);
+      this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
+    })
+  });
+
+  #destroyRef = inject(DestroyRef).onDestroy(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
+    }
+  });
+
+  private $persistedState = computed(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      return this.stateService.$selectLocalTableStateForView(tableId)();
+    }
+    return undefined
+  });
+  private $allFilterDirectives = computed( () => {
+    if(this.wrapper) {
+      return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
+    }
+    return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
+  });
+  private $tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
+  private $allMetaDatas = computed(() => {
+    const tableBuilderMetaData = this.$tableBuilderMetaData();
+    if(!tableBuilderMetaData) return;
+    const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d) as CustomCellMeta[];
+    const mappedCustomCellMetaDatas = customCellMetaDatas.map( md => mergeCustomCellMetaData(md!, tableBuilderMetaData.find( item => item.key === md.key ) ));
+
+    return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
+  });
+
+  private $allMetaDataTimeStamped = linkedSignal<MetaData[] | undefined, { timestamp: number, value: MetaData[], previous: MetaData[]}>({
+    source: this.$allMetaDatas,
+    computation: (curr, previous) => {
+      return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] }
+    }
+  });
+
+  #setUpAllValuesFilters = effect(() => {
+    const data = this.$allDataTimeStamped();
+    const allMeta = this.$allMetaDataTimeStamped();
+    if(!data) return;
+    untracked(() => {
+      const currentAll = computed(() => this.state.selectSignal(s => s.allFilters)())();
+      const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
+      this.state.patchState({ allFilters: mapped });
+    })
+  })
+
+  private $preds = computed(() => {
+    const predicateInputFilters = this.$inputFilters().filter(isFunction);
+    const notSavableFilterDirectives = this.$allFilterDirectives()
+      .filter(d => !d.savable)
+      .map(d => d.$filter())
+      .filter(d => !!d && needsFilterCreation(d))
+      .map(d => createFilterFunc(d!));
+    return [...predicateInputFilters, ...notSavableFilterDirectives]
+  });
+
+  private $predicateFiltersState = linkedSignal<Predicate<any>[], { value: FilterPredicateState<T>, timestamp: number } >({
+    source: this.$preds,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterPredicateState({ allFilters: [] as Predicate<T>[] }, curr), timestamp: Date.now() })
+      return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() })
+    }
+  });
+
+  private $savableFiltersState = linkedSignal<FilterInfoDict, { value: FilterInfoState<T>, timestamp: number } >({
+    source: this.state.$filters,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() })
+      return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() })
+    }
+  });
+
+  private $allFilterStatesTimeStamped = computed(() => {
+    if(!this.$isInitializationState(InitializationState.Ready)()) return undefined;
+    return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: Date.now() })
+  });
+
+  private $sortStateTimeStamped = linkedSignal<Sort[] | false, { value: SortState, timestamp: number } | undefined>({
+    source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      if(!prev?.value) return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
+      return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
+    }
+  });
+
+  private $allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [])
+  private $allDataTimeStamped = computed(() => {
+    const data = this.$allData();
+    if(!data) return undefined;
+    return ({
+      value: data,
+      timestamp: Date.now()
+    })
+  });
+  private $allTimeStamped = computed(() => {
+    const data = this.$allDataTimeStamped();
+    const sort = this.$sortStateTimeStamped();
+    const filter = this.$allFilterStatesTimeStamped();
+    if(!data?.value || !sort?.value || !filter?.value) return undefined;
+    return ({
+      data,
+      sort,
+      filter
+    });
+  });
+  private $sortedAndFilteredData = linkedSignal<{data: Timestamp<T[]>, filter: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>} | undefined, Timestamp<T[]> | undefined>({
+    source: this.$allTimeStamped,
+    computation: (values, prev) => {
+      const init = this.$isInitializationState(InitializationState.Ready);
+      if(!values || !init) return undefined;
+      const { data, filter, sort } = values;
+      const val = prev?.value?.value || data.value;
+      const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
+      return ({ value: filteredData, timestamp: Date.now() });
+    }
+  });
+
+  $timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }));
+  $timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }));
+  $timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }))
+  private $dataAndGroupsTimestamped = computed(() => {
+    const data = this.$sortedAndFilteredData() as Timestamp<(T & NoneGroupHeader)[]>;
+    const groups = this.$timestampedGroups();
+    const expanded = this.$timestampedExpanded();
+    const groupSorts = this.$timestampedGroupSortUpdated();
+    if(!data) return undefined;
+    return ({
+      data,
+      groups,
+      expanded,
+      groupSorts,
+    })});
+
+  protected $filteredSortedAndGrouped = linkedSignal<{ data: Timestamp<(T & NoneGroupHeader)[]>, groups: Timestamp<GroupedData[]>, expanded: Timestamp<GroupedData[]>, groupSorts: Timestamp<GroupedData[]>} | undefined, GroupByState | undefined>({
+    source: this.$dataAndGroupsTimestamped,
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      const val = prev?.value?.groupedData || [];
+      return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
+    }
+  });
+
+  private $isInitializationState = (state: InitializationState) => computed(() =>
+    this.state.selectSignal(s => s.initializationState >= state)()) ;
+
+  static headerId = 'tb-header-wrapper';
+  headerId = TableContainerComponent.headerId;
+}
+
+function isFunction<T>(a: any):a is Predicate<T> {
+  return typeof a === 'function';
+}

package/src/table-builder/components/table-container/table-container.helpers/data-state.helpers.ts

@@ -0,0 +1,113 @@
+import { Observable, Timestamp, combineLatest, map, scan, tap, timestamp } from "rxjs";
+import { SortState } from "./sort-state.helpers";
+import { FilterPredicateState } from "./filter-state.helpers";
+import { filterData, getFactory, sortData, tbNoShowSymbol } from "../../../functions/sort-data-function";
+import { defaultShareReplay } from "../../../../rxjs/defaultShareReplay";
+import { FieldType, MetaData } from "../../../interfaces/meta-data";
+import { set } from "lodash";
+
+export const _sortAndFilterData = <T>(data: Observable<T[]>, sortState: Observable<SortState>, filterState: Observable<FilterPredicateState<T>>) => combineLatest([
+  data.pipe(timestamp()),
+  sortState.pipe(timestamp()),
+  filterState.pipe(timestamp())
+]).pipe(
+  scan((mappedData, [data, sort, f], index) => {
+    return mapDataSortsAndFilters( data, f, sort, index === 0, mappedData);
+  }, [] as T[])
+).pipe(
+  map((resultData) => resultData.filter(item => !item[tbNoShowSymbol])),
+  defaultShareReplay()
+);
+
+const mapDataSortsAndFilters = <T>(allData: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, filteredAndSortedData: T[]) => {
+  const fresh = firstRun || (allData.timestamp > sort.timestamp && allData.timestamp > filters.timestamp);
+  const sortChanged = !fresh && sort.timestamp > filters.timestamp;
+  const filterRemoved = !fresh && !sortChanged && !filters.value.onlyAddedFilters;
+  const runAllOnAllData = fresh || filterRemoved;
+  const resetFilters = !fresh && filterRemoved;
+
+  if(runAllOnAllData){
+    const filteredData = filterData(sortData(allData.value, sort.value.allSorts ), filters.value.allFilters, resetFilters);
+    return filteredData;
+  }
+  if(sortChanged){
+    return (sortData(filteredAndSortedData, sort.value.sortsToRun));
+  }
+  return (filterData(filteredAndSortedData, filters.value.onlyAddedFilters || filters.value.allFilters, resetFilters));
+}
+
+export const sortAndFilterData = <T>(data: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, resultData: T[]) => {
+  const markedAndSortedData = mapDataSortsAndFilters( data, filters, sort, firstRun, resultData);
+  const filteredData = markedAndSortedData.filter(item => !item[tbNoShowSymbol]);
+  return filteredData;
+}
+export const createDataCleaners = <T>(metadatas: MetaData<T>[], mutate = false) => {
+  const transforms = createCleaners(metadatas);
+  return (data: T) => {
+    if(!mutate){
+      data = { ...data }
+    }
+    for(const transform of transforms){
+      transform(data);
+    }
+    return data;
+  }
+}
+
+const createCleaners = <T>(metadatas: MetaData<T> []) => {
+  return metadatas.reduce((transforms, metaData) => {
+    const getter = getFactory(metaData.key);
+    const setter = metaData.key.includes('.') ? (t, val) => set(t, metaData.key, val) : (t, val) => t[metaData.key as unknown as keyof T] = val
+    switch ( metaData.fieldType ) {
+      case FieldType.Currency:
+      case FieldType.Number: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const num = Number( val );
+          setter(t, isNaN(num) || val == null ? null : num)
+        };
+        transforms.push(transform);
+        break;
+      }
+      case FieldType.Date: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const date = Date.parse(val);
+          let mappedDate: Date;
+          if(isNaN(date)){
+            mappedDate = null as any;
+          } else {
+            mappedDate = new Date(date);
+            mappedDate.setHours(0, 0, 0, 0);
+          }
+          setter(t, mappedDate);
+        };
+        transforms.push(transform);
+        break;
+      }
+
+      case FieldType.DateTime: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const date = Date.parse(val);
+          let mappedDate: Date;
+          if(isNaN(date)){
+            mappedDate = null as any;
+          } else {
+            mappedDate = new Date(date);
+            if(!metaData.additional?.dateTimeOptions?.includeMilliseconds){
+              if(metaData.additional?.dateTimeOptions?.includeSeconds){
+                mappedDate.setMilliseconds(0);
+              } else {
+                mappedDate.setSeconds(0, 0);
+              }
+            }
+          }
+          setter(t, mappedDate);
+        };
+        transforms.push(transform);
+      }
+    }
+    return transforms;
+  }, [] as ((t:T) => void)[])
+}