@one-paragon/angular-utilities 1.2.11 → 1.2.12

package/src/table-builder/components/sort-menu/sort-menu.component.scss

@@ -0,0 +1,119 @@
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.list{
+  padding: 5px 2px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  background: white;
+}
+
+.light-arrow{
+  color: rgb(147 177 234 / 47%);
+}
+
+.dark-arrow{
+  color: #224e9c;
+}
+
+.up-down-button{
+  background-color: white;
+  border-radius: 30%;
+  border-color: aqua;
+  padding: 1px 1px 0;
+  border-width: .5px;
+  cursor: pointer;
+  height: 27px;
+}
+
+.mat-icon.up-down-icon{
+  margin-right: 0;
+  font-size: 20px;
+  font-weight: lighter;
+}
+
+.sort-item{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.up-down-buttons-wrapper{
+  margin-left: 2rem;
+}
+
+.up-button{
+  margin-right: .3rem;
+}
+
+.mat-mdc-menu-item{
+  &.menu-item, &.menu-button{
+    min-height: initial;
+    padding: 0 3px;
+    line-height: 25px;
+    height: 30px;
+  }
+  &.menu-item{
+    cursor: move;
+  }
+}
+
+.sorted-name{
+  color: #224e9c;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.not-sorted-name{
+  color: rgb(147 177 234);
+  font-size: 17px;
+  font-weight: 700;
+  
+}
+
+.apply-border{
+  border: #224e9c solid .5px;
+}
+
+.apply-border:hover{
+  background-color: antiquewhite;
+}
+
+.apply-button-wrapper{
+  display: grid;
+  justify-content: center;
+
+}
+
+.sort-header{
+  font-size: 10px;
+  font-style: italic;
+}
+
+.tip{
+  padding: 0 3px;
+  color: lightgray;
+}
+
+.direction-text{
+  font-size: small;
+  font-weight: 400;
+}
+
+.close-button-wrapper{
+  display: flex;
+  flex-direction: row-reverse;
+}

package/src/table-builder/components/sort-menu/sort-menu.component.ts

@@ -0,0 +1,98 @@
+import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Observable } from 'rxjs';
+import { first, map, tap } from 'rxjs/operators';
+import { TableStore } from '../../classes/table-store';
+import { SortDirection } from '../../interfaces/report-def';
+import { SortMenuComponentStore, SortWithName } from './sort-menu.component-store'
+import { LetDirective } from '@ngrx/component';
+import { AsyncPipe, NgClass } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
+
+@Component({
+  selector: 'tb-sort-menu',
+  templateUrl: './sort-menu.component.html',
+  styleUrls: ['./sort-menu.component.scss'],
+  providers:[SortMenuComponentStore],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
+    SpaceCasePipe, NgClass, AsyncPipe
+  ]
+})
+export class SortMenuComponent implements OnInit{
+  private tableState = inject(TableStore);
+  protected store = inject(SortMenuComponentStore);
+
+
+  sorted$:Observable<SortWithName[]>;
+  notSorted$:Observable<SortWithName[]>;
+  SortDirection = SortDirection;
+  dirty$ = new BehaviorSubject(false);
+  constructor() {
+    this.sorted$ = this.store.sorted$.pipe(map(data=>[...data]));
+    this.notSorted$ = this.store.notSorted$.pipe(map(data=>[...data]));
+  }
+
+  reset(){
+    this.dirty$.next(false);
+    this.store.reset();
+  }
+
+  ngOnInit(){
+    this.store.reset();
+  }
+
+  dropIntoSorted(event: CdkDragDrop<SortWithName[]>) {
+    this.dirty$.next(true);
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+      this.store.setSorted(event.container.data);
+    } else {
+
+      transferArrayItem(event.previousContainer.data,
+                        event.container.data,
+                        event.previousIndex,
+                        event.currentIndex);
+      event.container.data[event.currentIndex] = {...event.container.data[event.currentIndex],direction:SortDirection.asc};
+      this.store.setSorted(event.container.data);
+      this.store.setNotSorted(event.previousContainer.data);
+    }
+  }
+
+  dropIntoNotSorted(event: CdkDragDrop<SortWithName[]>){
+    if (event.previousContainer === event.container) {
+      return;
+    } else {
+      this.dirty$.next(true);
+      transferArrayItem(event.previousContainer.data,
+                        event.container.data,
+                        event.previousIndex,
+                        event.currentIndex);
+      event.container.data[event.currentIndex] = {...event.container.data[event.currentIndex]};
+
+      this.store.setNotSorted(event.container.data);
+      this.store.setSorted(event.previousContainer.data);
+    }
+  }
+
+  apply = this.store.effect((obs:Observable<null>)=>
+    obs.pipe(tap(()=>{
+      this.dirty$.next(false);
+      this.tableState.setAllSort(this.store.sorted$.pipe(first()))
+  })));
+
+  setDirection(sort:SortWithName){
+    this.dirty$.next(true);
+    this.store.setDirection(sort);
+  }
+
+}
+
+

package/{table-builder/components/table-container/table-container-imports.d.ts → src/table-builder/components/table-container/table-container-imports.ts}

@@ -1,14 +1,32 @@
-import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
-import { LetDirective } from "@ngrx/component";
-import { MultiSortDirective } from "../../directives";
-import { GroupByListComponent } from "../group-by-list/group-by-list.component";
-import { FilterChipsComponent } from "../table-container-filter/filter-list/filter-list.component";
-import { MatButtonModule } from "@angular/material/button";
-import { GenericTableComponent } from "../generic-table/generic-table.component";
-import { GenFilterDisplayerComponent } from "../table-container-filter/gen-filter-displayer/gen-filter-displayer.component";
-import { GenColDisplayerComponent } from "../gen-col-displayer/gen-col-displayer.component";
-import { SortMenuComponent } from "../sort-menu/sort-menu.component";
-import { StopPropagationDirective } from "../../../utilities";
-import { PaginatorComponent } from "../generic-table/paginator.component";
-import { VirtualScrollContainer } from "./virtual-scroll-container";
-export declare const containerImports: (typeof MatButtonModule | typeof NgTemplateOutlet | typeof AsyncPipe | typeof GenericTableComponent | typeof PaginatorComponent | typeof LetDirective | typeof MultiSortDirective | typeof GroupByListComponent | typeof FilterChipsComponent | typeof GenFilterDisplayerComponent | typeof GenColDisplayerComponent | typeof SortMenuComponent | typeof StopPropagationDirective | typeof VirtualScrollContainer)[];
+import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
+import { LetDirective } from "@ngrx/component";
+import { MultiSortDirective } from "../../directives";
+import { GroupByListComponent } from "../group-by-list/group-by-list.component";
+import { FilterChipsComponent } from "../table-container-filter/filter-list/filter-list.component";
+import { MatButtonModule } from "@angular/material/button";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatIconModule } from "@angular/material/icon";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { GenericTableComponent } from "../generic-table/generic-table.component";
+import { GenFilterDisplayerComponent } from "../table-container-filter/gen-filter-displayer/gen-filter-displayer.component";
+import { GenColDisplayerComponent } from "../gen-col-displayer/gen-col-displayer.component";
+import { SortMenuComponent } from "../sort-menu/sort-menu.component";
+import { MatInputModule } from "@angular/material/input";
+import { ClickEmitterDirective, DialogDirective, StopPropagationDirective } from "../../../utilities";
+import { PaginatorComponent } from "../generic-table/paginator.component";
+import { VirtualScrollContainer } from "./virtual-scroll-container";
+import { MatCheckbox } from "@angular/material/checkbox";
+import { ProfilesMenuComponent } from "../profiles-menu/profiles-menu.component";
+
+export const containerImports = [
+  AsyncPipe, NgTemplateOutlet,
+  PaginatorComponent,
+
+  LetDirective,
+
+  MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
+  SortMenuComponent, GenericTableComponent, StopPropagationDirective, ProfilesMenuComponent,
+
+  MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
+
+]

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

@@ -0,0 +1,54 @@
+.header-wrapper{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width:100%;
+}
+
+.table-wrapper{
+overflow-x: auto;
+}
+
+
+.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.helpers/data-state.helpers.ts

@@ -0,0 +1,141 @@
+import { Observable, combineLatest, map, scan, timestamp } from "rxjs";
+import { SortState } from "./sort-state.helpers";
+import { FilterPredicateState } from "./filter-state.helpers";
+import { filterData, sortData, tbNoShowSymbol } from "../../../functions/sort-data-function";
+import { defaultShareReplay } from "../../../../rxjs/defaultShareReplay";
+import { FieldType, MetaData } from "../../../interfaces/report-def";
+import { get, 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: resultData }, [data, sort, f], index)=> {
+
+      if(index === 0 || (data.timestamp > sort.timestamp && data.timestamp > f.timestamp)){
+        return ({ mappedData: filterData(sortData(data.value , sort.value.sortsToRun ), f.value.allFilters)});
+      }
+
+      if(sort.timestamp > f.timestamp){
+        return ({ mappedData: sortData(resultData, sort.value.sortsToRun)});
+      }
+      return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !f.value.onlyAddedFilters)});
+    }, { mappedData: []} as { mappedData: T[]})
+  ).pipe(
+    map(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])),
+    defaultShareReplay()
+  );
+
+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) => {
+    switch ( metaData.fieldType ) {
+      case FieldType.Currency:
+      case FieldType.Number:{
+        const nested = metaData.key.includes('.');
+        if(nested){
+          transforms.push( (t:T) => {
+            const val = get(t, metaData.key);
+            const num = Number( val );
+            set(t as {}, metaData.key, isNaN(num) || val == null ? null : num)
+            t[metaData.key] =  (isNaN(num) || val == null ? null : num) as any});
+        } else {
+          transforms.push( (t:T) => {
+            const val = t[metaData.key];
+            const num = Number( val );
+            t[metaData.key] =  (isNaN(num) || val == null ? null : num) as any});
+        }
+        break;
+      }
+      case FieldType.Date:{
+        const nested = metaData.key.includes('.');
+        if(nested){
+          transforms.push( (t:T) => {
+            const val = get(t, metaData.key) as string;
+            const date = Date.parse(val);
+            if(isNaN(date)){
+              set(t as {}, metaData.key,  null as any);
+              return
+            }
+            const d = new Date(date);
+            d.setHours(0,0,0,0);
+            set(t as {}, metaData.key,  d as any);
+          })
+        } else {
+          transforms.push( (t:T) => {
+            const val = t[metaData.key] as string;
+            const date = Date.parse(val);
+            if(isNaN(date)){
+              t[metaData.key] =  null as any;
+              return
+            }
+            const d = new Date(date);
+            d.setHours(0,0,0,0);
+            t[metaData.key] =  d as any;
+          })
+        }
+        break;
+      }
+        
+      case FieldType.DateTime:{
+        const nested = metaData.key.includes('.');
+        if(nested){
+          transforms.push( (t:T) => {
+            const val = get(t, metaData.key);
+            const dateTime = Date.parse(val as string);
+            if(isNaN(dateTime)){
+              set(t as {}, metaData.key,  null as any);
+              return
+            }
+            const dt = new Date(dateTime);
+            if(metaData.additional?.dateTimeOptions?.includeMilliseconds){
+              set(t as {}, metaData.key,  dt as any);
+              return
+            }
+            if(metaData.additional?.dateTimeOptions?.includeSeconds){
+              dt.setMilliseconds(0);
+              set(t as {}, metaData.key,  dt as any);
+              return
+            }
+            dt.setSeconds(0, 0);
+            set(t as {}, metaData.key,  dt as any);
+          })
+        } else {
+          transforms.push((t:T) => {
+            const val = t[metaData.key] as string;
+            const dateTime = Date.parse(val);
+            if(isNaN(dateTime)){
+              t[metaData.key] =  null as any;
+              return;
+            }
+            const dt = new Date(dateTime);
+            if(metaData.additional?.dateTimeOptions?.includeMilliseconds){
+              t[metaData.key] =  dt as any;
+              return;
+            }
+            if(metaData.additional?.dateTimeOptions?.includeSeconds){
+              dt.setMilliseconds(0);
+              t[metaData.key] =  dt as any;
+              return;
+            }
+            dt.setSeconds(0, 0);
+            t[metaData.key] =  dt as any;
+          })
+        }
+      }
+    }
+    return transforms;
+  }, [] as ((t:T) => void)[])
+}

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

@@ -0,0 +1,106 @@
+import { Timestamp } from "rxjs";
+import { CustomFilter, FilterInfo, createFilterFunc } from "../../../classes/filter-info";
+import { Dictionary } from "../../../interfaces/dictionary";
+import { Predicate } from "@angular/core";
+import { difference, intersection } from "lodash";
+
+//The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
+// So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
+
+export const updateFilterInfoState = <T>(previousState: FilterInfoState<T>, filterInfos: FilterInfoDict) => {
+  filterInfos = filterNonActiveFilters(filterInfos);
+  const currentState: FilterInfoState<T> = {
+    allFilters: filterInfos,
+    onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
+  }
+  return currentState;
+}
+
+export const mapFilterInfoStateToPredicateState = <T>(s: FilterInfoState<T>): FilterPredicateState<T> => {
+  const mappedAddOnly: {[key in keyof T]: Predicate<T>} = s.onlyAddedFilters ? Object.entries(s.onlyAddedFilters).reduce((obj, [key, value]) => {
+    obj[key] = createFilterFunc(value);
+    return obj;
+  }, {} as {[key in keyof T]: Predicate<T>}) : {} as {[key in keyof T]: Predicate<T>};
+  const mappedAll = Object.entries(s.allFilters).map(([key, value]) => mappedAddOnly[key] || createFilterFunc(value));
+  return ({
+    allFilters: mappedAll,
+    onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
+  })
+}
+
+export const updateFilterPredicateState = <T>(previousState: FilterPredicateState<T>, filters: Predicate<any>[]) => {
+  const currentState: FilterPredicateState<T> = {
+    allFilters: filters,
+    onlyAddedFilters: predicatesOnlyAdded(previousState.allFilters, filters)
+  }
+  return currentState;
+}
+
+export const updateFilterState = <T>(filterInfos: Timestamp<FilterInfoState<T>>, predicates: Timestamp<FilterPredicateState<T>>): FilterPredicateState<T> => {
+  const infos = mapFilterInfoStateToPredicateState(filterInfos.value);
+  const filtersState: FilterPredicateState<T> = {
+    allFilters: [...infos.allFilters, ...predicates.value.allFilters]
+  }
+  if(filterInfos.timestamp > predicates.timestamp && !!filterInfos.value.onlyAddedFilters){
+    filtersState.onlyAddedFilters = infos.onlyAddedFilters;
+  } else {
+    filtersState.onlyAddedFilters = predicates.value.onlyAddedFilters
+  }
+  return filtersState
+}
+
+
+const filterNonActiveFilters = <T>(filtersDict : FilterInfoDict) => Object.entries(filtersDict).reduce((obj ,[key, value]) => { 
+  if(value.active !== false){
+    obj[key] = value
+  };
+  return obj;
+}, {} as Dictionary<FilterInfo | CustomFilter>);
+
+
+function filterInfoOnlyAdded(previousFilterInfos: FilterInfoDict, currentFilterInfos: FilterInfoDict): FilterInfoDict | undefined{
+  const previousKeys = Object.keys(previousFilterInfos);
+  const currentKeys = Object.keys(currentFilterInfos);
+  const keysInBoth = intersection(previousKeys, currentKeys);
+  const someRemoved = previousKeys.length > keysInBoth.length;
+  if(someRemoved || !previousKeys.length){
+    return undefined;
+  }
+  if(filtersInfosUpdated(previousFilterInfos, currentFilterInfos)){
+    return undefined;
+  }
+  const addedFilters = difference(currentKeys, keysInBoth).reduce((dict, key) => {
+    dict[key] = currentFilterInfos[key];
+    return dict;
+  }, {} as FilterInfoDict);
+  return addedFilters;
+}
+
+function predicatesOnlyAdded(previousPredicates: Predicate<any>[], currentPredicates: Predicate<any>[]){
+  if(!previousPredicates.length){
+    return undefined;
+  }
+  const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
+  if(predicateFiltersRemoved){
+    return undefined;
+  }
+  return difference(currentPredicates, previousPredicates);
+}
+
+function filtersInfosUpdated(previousFilterInfos: FilterInfoDict<any>, currentFilterInfos: FilterInfoDict<any>){
+  return !Object.entries(previousFilterInfos).every(([key, val]) => {
+    return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue
+  })
+}
+
+export interface FilterInfoState<T> {
+  allFilters: FilterInfoDict<T>, 
+  onlyAddedFilters?: FilterInfoDict<T> | undefined,
+}
+
+export interface FilterPredicateState<T> {
+  allFilters: Predicate<T>[], 
+  onlyAddedFilters?: Predicate<T>[] | undefined,
+}
+
+export type FilterInfoDict<T = any> = Dictionary<FilterInfo<any, T> | CustomFilter<any>>;

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

@@ -0,0 +1,86 @@
+import { groupBy } from "lodash";
+import { Timestamp } from "rxjs";
+import { Group, GroupedData } from "../../../classes/TableState";
+import { initIndexSymbol } from "./sort-state.helpers";
+
+function getGroupedData(data: any[], groupByKeys: string[]): any[] {
+  return tbGroupBy(data, groupByKeys);
+}
+
+const tbGroupBy = (data: any[], groupByKeys: string[], parentGroupName?: any): any[] => {
+  const currentKey = groupByKeys[0];
+  const res = groupBy(data, currentKey);
+  const remainingGroupByKeys = groupByKeys.slice(1);
+  const finalGroups = !remainingGroupByKeys.length;
+  if (remainingGroupByKeys.length) {
+    Object.keys(res).forEach(key => res[key] = tbGroupBy(res[key], remainingGroupByKeys, key))
+  }
+  return Object.keys(res).map((groupName, i) => {
+    const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
+    const groupHeaders = res[groupName]?.filter(row => row.isGroupHeader) ?? [];
+    return ({
+        isGroupHeader: true,
+        groupHeaderDisplay: groupName,
+        hasTheData: finalGroups,
+        children: finalGroups ? res[groupName] : res[groupName].map(d => {d.padding += 20; return d}),
+        groupName: `tb_group_${uniqName}`,
+        padding: 1,
+        key: currentKey,
+        length : groupHeaders.reduce((acc, curr) => curr.length + acc,0) + ((res[groupName] ?? []).length - groupHeaders.length),
+        [initIndexSymbol]: uniqName,
+      } as Group
+    );
+  })
+}
+
+export function updateGroupByState({ groupedData }:GroupByState, [data, groups, expandedGroups] : [Timestamp<any[]>, Timestamp<string[]>, Timestamp<GroupedData[]>], index: number){
+  if(
+    index === 0
+    || dataUpdated(data, groups, expandedGroups)
+    || groupsUpdated(groups, expandedGroups)
+  ){
+    groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
+  }
+  const newDisplayData = expandedGroups.value.length === 0
+    ? groupedData
+    : groupedData.map(group => mapGroupHeader(group, expandedGroups.value)).flat();
+  return ({displayData: newDisplayData, groupedData});
+}
+
+function mapGroupHeader(obj: any, data: GroupedData[]){
+  const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
+  const children = !showChildren ? [] : 
+                        obj.hasTheData ?  obj.children
+                          : obj.children.map(a => mapGroupHeader(a, data))
+
+  return [obj, ...children].flat()
+}
+
+function dataUpdated(data: Timestamp<any[]>, groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
+  return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
+}
+
+function groupsUpdated(groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
+  return groups.timestamp > expandedGroups.timestamp;
+}
+
+interface GroupByState { displayData: any[], groupedData: any[]};
+
+export const initialGroupByState = { displayData: [], groupedData: []}
+
+export const getAllGroupHeaderNames = (data: any[]) => {
+  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader);
+  return groupBy(groups, 'key')
+}
+
+export const getAllGroupHeaderNamesByKeys = (data: any[], keys: string[]) => {
+  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader && keys.includes(d.key));
+  return groupBy(groups, 'key')
+}
+
+const getGroupHeaders = (data: any[], filterFunc: (d:any) => boolean, arr:any[] = []): Group[] => {
+  const headers = data.filter(filterFunc);
+  arr.push(...headers);
+  headers.forEach(h => {if(!!h.children.length) getGroupHeaders(h.children, filterFunc, arr)});
+  return arr;
+}