@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/directives/tb-filter.directive.ts

@@ -0,0 +1,363 @@
+import { Directive, Input, Optional, Predicate, SimpleChanges } from "@angular/core";
+import { BehaviorSubject, Observable, ReplaySubject, Subject, takeUntil, tap } from "rxjs";
+import { CustomFilter, FilterInfo } from "../classes/filter-info";
+import { v4 as uuid } from 'uuid';
+import { FilterType } from "../enums/filterTypes";
+import { MatSlideToggle } from "@angular/material/slide-toggle";
+import { MatRadioButton } from "@angular/material/radio";
+import { MatButtonToggle } from '@angular/material/button-toggle';
+import { MatCheckbox } from "@angular/material/checkbox";
+import { FieldType } from "../interfaces/report-def";
+import { NgControl } from "@angular/forms";
+import { ComponentStore } from "@ngrx/component-store";
+import { TableWrapperDirective } from "./table-wrapper.directive";
+import { MatOption } from "@angular/material/core";
+
+
+const inputs = [
+  'predicate: tbCustomFilter',
+  'filterId: filterId',
+];
+
+
+@Directive({
+  selector: ' '
+})
+export abstract class TableCustomFilterDirective<T = any> {
+  abstract filter$ : Observable<CustomFilter>;
+  filterId!: string;
+  savable = false;
+  used = false;
+  abstract active: boolean;
+  abstract reset(): void;
+}
+
+
+
+
+@Directive({
+  selector: "[tbFilter]"
+}) export class TableFilterDirective extends ComponentStore<FilterInfo> {
+
+  constructor(@Optional() protected  model: NgControl, @Optional() wrapper: TableWrapperDirective) {
+    super();
+    if(wrapper) {
+      wrapper.register(this);
+    }
+    if(model) {
+      this.effect( () => {
+        return model.valueChanges!.pipe(
+          tap( val => {
+            this.filterValue = val;
+            this.update();
+          })
+        )
+      })
+    }
+  }
+  reset() {
+    this.filterValue = undefined;
+  }
+  filter$ = this.state$;
+
+  @Input() filterType!: FilterType;
+  @Input() key!: string;
+  @Input() fieldType!: FieldType;
+  @Input() filterId!: string;
+  @Input() active = true;
+  @Input() filterValue: any = null;
+
+  setFilterValue(value: any) {
+    if(this.model) {
+      setTimeout(() => {
+        this.model.reset(value);
+      }, 0);
+    } else {
+      this.filterValue = value;
+    }
+  }
+
+
+  used = false;
+  savable = false;
+  ready = false;
+
+  _userActive = true;
+  ngOnChanges(changes: SimpleChanges ) {
+    this.update();
+  }
+
+  ngOnInit() {
+    if(!this.filterId) {
+      this.filterId = uuid();
+    } else {
+      this.savable = true;
+    }
+    this.ready = true;
+    this.update();
+  }
+
+  protected setFilter(filter: FilterInfo ) {
+    this.setState(filter);
+  }
+
+  update() {
+    if (this.ready) {
+      this.setFilter(
+        {
+          filterId: this.filterId,
+          key: this.key,
+          filterType: this.filterType,
+          fieldType: this.fieldType,
+          filterValue: this.filterValue,
+          active: this.active && this.filterValue !== undefined,
+          _isExternalyManaged: true,
+        }
+      );
+
+    }
+  }
+}
+
+@Directive({
+  selector: '[tbFilterStringContains]',
+  providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }],
+  inputs: [
+    'key:tbFilterStringContains',
+    'filterValue:filterValue',
+    'filterId: filterId',
+    'active: active',
+  ]
+}) export class TableFilterStringContainsDirective extends TableFilterDirective {
+  constructor(@Optional()  model: NgControl, @Optional() wrapper: TableWrapperDirective) {
+    super(model,wrapper);
+    this.filterType = FilterType.StringContains;
+    this.fieldType = FieldType.String;
+    this.effect( () => {
+      return model.valueChanges!.pipe(
+        tap( val => {
+          this.filterValue = val;
+          this.update();
+        })
+      )
+    })
+  }
+
+  override reset() {
+    if(this.model) {
+      this.model.reset();
+    }
+    super.reset();
+  }
+
+  override setFilter(filter: FilterInfo) {
+    filter.active = filter.filterValue && this._userActive;
+    super.setFilter(filter);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes['active']) {
+      this._userActive = changes['active'].currentValue;
+    }
+    super.ngOnChanges(changes);
+  }
+}
+
+@Directive({
+  selector: "[tbCustomFilter]",
+})
+export abstract class TableCustomFilterDirectiveBase<T = any> extends TableCustomFilterDirective<T> {
+
+  filter$! : Subject<CustomFilter>;
+  filter!: CustomFilter;
+  @Input() filterId! : string;
+
+  _predicate!: Predicate<T>;
+  @Input('tbCustomFilter') set predicate( val: Predicate<T> ) {
+    this._predicate = val;
+    this.update({predicate:val});
+  }
+
+  _active: boolean = false;
+  ready = false;
+
+  update(val: Partial<CustomFilter> ) {
+    if(this.ready) {
+      this.filter = {...this.filter,...val};
+      this.filter$.next(this.filter);
+    }
+  }
+
+  @Input() set active(val: boolean) {
+    if(this._active !== val) {
+      this._active = val;
+      this.update({active:val});
+    }
+  }
+  get active(): boolean {
+    return this._active;
+  }
+
+  ngOnInit() {
+    if(!this.filterId) {
+      this.filterId = uuid();
+    } else {
+      this.savable = true;
+    }
+
+    this.filter = {
+      filterType: FilterType.Custom,
+      filterId: this.filterId,
+      active: this._active,
+      predicate: this._predicate,
+    };
+    this.ready = true;
+    this.filter$ = new BehaviorSubject(this.filter);
+  }
+}
+
+@Directive()
+export abstract class TbSelectedFilterDirective<T = any>  extends TableCustomFilterDirectiveBase<T> {
+
+
+  protected constructor(private change: Observable<any>, private isActive: () => boolean, @Optional() wrapper: TableWrapperDirective) {
+    super();
+    if(wrapper) {
+      wrapper.register(this);
+    }
+  }
+
+  reset() {
+    this.active = false;
+  }
+
+  destroySubject$ = new ReplaySubject<void>(1);
+  ngOnDestroy() {
+    this.destroySubject$.next();
+  }
+
+  ngOnInit(): void {
+    this._active = this.isActive();
+    super.ngOnInit();
+    this.change.pipe(takeUntil(this.destroySubject$)).subscribe( () => {
+      this.active = this.isActive();
+    });
+  }
+}
+
+// Checkbox
+@Directive({
+  selector: 'mat-checkbox[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }]
+})
+export class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
+
+  override set active(val: boolean) {
+    this.matCheckbox.checked = val;
+    super.active = val;
+  }
+  constructor(private matCheckbox: MatCheckbox, @Optional() wrapper: TableWrapperDirective) {
+    super(matCheckbox.change, () => matCheckbox.checked, wrapper);
+  }
+}
+
+
+@Directive({
+  selector: 'mat-slide-toggle[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }]
+})
+export class MatSlideToggleTbFilterDirective<T = any> extends TbSelectedFilterDirective<T> {
+  override set active(val: boolean) {
+    this.matSlideToggle.checked = val;
+    super.active = val;
+  }
+  constructor(private matSlideToggle: MatSlideToggle, @Optional() wrapper: TableWrapperDirective) {
+    super(matSlideToggle.change, () => matSlideToggle.checked,wrapper);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}
+
+// Radio button
+@Directive({
+  selector: 'mat-radio-button[tbCustomFilter]',
+  inputs: ['predicate: tbCustomFilter'],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }]
+})
+export class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
+
+  override set active(val: boolean) {
+    this.matRadioButton.checked = val;
+    super.active = val;
+  }
+  constructor(private matRadioButton: MatRadioButton, @Optional() wrapper: TableWrapperDirective) {
+    super(matRadioButton.change, () => matRadioButton.checked, wrapper);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}
+
+// Option (select)
+@Directive({
+  selector: 'mat-option[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }]
+})
+export class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
+
+  override set active(val: boolean) {
+    if(val) {
+      this.matOption.select();
+    } else {
+      this.matOption.deselect();
+    }
+    super.active = val;
+  }
+  constructor(private matOption: MatOption, @Optional() wrapper: TableWrapperDirective) {
+    super( matOption.onSelectionChange.pipe(tap( d => {
+      if(!matOption.value) {
+        matOption.value = uuid();
+      }
+    }
+
+    )), () => matOption.selected, wrapper);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}
+
+// Button toggle
+@Directive({
+  selector: 'mat-button-toggle[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }]
+})
+export class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
+  override set active(val: boolean) {
+    this.matButtonToggle.checked = val;
+    super.active = val;
+  }
+  constructor(private matButtonToggle: MatButtonToggle, @Optional() wrapper: TableWrapperDirective) {
+    super(matButtonToggle.change, () => matButtonToggle.checked,wrapper);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}

package/src/table-builder/enums/filterTypes.ts

@@ -0,0 +1,65 @@
+
+export enum FilterType {
+    NumberEquals = 'Equals',
+    NumberNotEqual = 'Does Not Equal',
+    NumberGreaterThan = 'Greater Than',
+    NumberLessThan = 'Less Than',
+    NumberBetween = 'Between',
+    StringEquals = 'Equals',
+    StringContains = 'Contains',
+    StringDoesNotContain = 'Does Not Contain',
+    StringStartWith = 'Start With',
+    StringEndsWith = 'Ends With',
+    DateIsOn = 'Is on',
+    DateIsNotOn = 'Is Not On',
+    DateOnOrAfter = 'On or After',
+    DateOnOrBefore = 'On or Before',
+    DateBetween = 'Between',
+    BooleanEquals = 'Is',
+    IsNull = 'Is Blank',
+    Or = 'Or',
+    And = 'And',
+    In = 'In',
+    Custom = 'Custom',
+}
+
+export const NumberFilterMap:FilterToFiltersMap = {
+    [FilterType.NumberEquals]: [FilterType.NumberEquals],
+    [FilterType.NumberNotEqual]: [FilterType.NumberNotEqual],
+    [FilterType.NumberGreaterThan]: [FilterType.NumberGreaterThan],
+    [FilterType.NumberLessThan]: [FilterType.NumberLessThan],
+    [FilterType.NumberBetween]: [FilterType.NumberBetween],
+    [FilterType.IsNull]: [FilterType.IsNull],
+    [FilterType.In]: [FilterType.In],
+};
+
+export const StringFilterMap:FilterToFiltersMap = {
+    [FilterType.StringEquals]: [FilterType.StringEquals],
+    [FilterType.StringContains]: [FilterType.StringContains],
+    [FilterType.StringDoesNotContain]: [FilterType.StringDoesNotContain],
+    [FilterType.StringStartWith]: [FilterType.StringStartWith],
+    [FilterType.StringEndsWith]: [FilterType.StringEndsWith],
+    [FilterType.IsNull]: [FilterType.IsNull],
+    [FilterType.In]: [FilterType.In],
+};
+
+export const DateFilterMap:FilterToFiltersMap = {
+    [FilterType.DateIsOn]: [FilterType.DateIsOn],
+    [FilterType.DateIsNotOn]: [FilterType.DateIsNotOn],
+    [FilterType.DateOnOrAfter]: [FilterType.DateOnOrAfter],
+    [FilterType.DateOnOrBefore]: [FilterType.DateOnOrBefore],
+    [FilterType.DateBetween]: [FilterType.DateBetween],
+    [FilterType.IsNull]: [FilterType.IsNull],
+};
+
+export const BooleanFilterMap :FilterToFiltersMap = {
+    [FilterType.BooleanEquals]: [FilterType.BooleanEquals],
+    [FilterType.IsNull]: [FilterType.IsNull],
+};
+
+export const EnumFilterMap : FilterToFiltersMap = {
+  [FilterType.IsNull] : [FilterType.IsNull],
+  [FilterType.In] : [FilterType.In]
+}
+
+export type FilterToFiltersMap = Partial<{[key in FilterType]: FilterType[]}>;

package/src/table-builder/functions/boolean-filter-function.ts

@@ -0,0 +1,13 @@
+import { FilterFunc, FilterInfo } from '../classes/filter-info';
+import { FilterType } from '../enums/filterTypes';
+import { Dictionary } from '../interfaces/dictionary';
+import { isNull } from './null-filter-function';
+
+const  booleanEqualsFunc : FilterFunc<boolean> = (filterInfo:FilterInfo) => (val): boolean  => {
+    return filterInfo.filterValue === val;
+}
+
+export const BooleanFilterFuncs: Dictionary<FilterFunc<any,any>> = {
+     [FilterType.BooleanEquals]: booleanEqualsFunc,
+     [FilterType.IsNull]: isNull,
+};

package/src/table-builder/functions/date-filter-function.ts

@@ -0,0 +1,40 @@
+import { FilterFunc, FilterInfo, Range } from '../classes/filter-info';
+import { FilterType } from '../enums/filterTypes';
+import { Dictionary } from '../interfaces/dictionary';
+import { isNull } from './null-filter-function';
+
+
+const dateIsOnFunc:FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const isOnVal = new Date( filterInfo.filterValue).getTime();
+  return ((val)=>val.getTime()  === isOnVal);
+}
+
+const dateIsNotOnFunc:FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const isNotOnVal = new Date( filterInfo.filterValue).getTime();
+  return ((val)=>val?.getTime()  !== isNotOnVal);
+}
+
+const dateIsOnOrAfterFunc:FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const afterVal = new Date( filterInfo.filterValue).getTime();
+  return ((val)=>val.getTime()  >= afterVal);
+}
+
+const dateIsOnOrBeforeFunc:FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const beforeVal = new Date( filterInfo.filterValue).getTime();
+  return ((val)=>val.getTime()  <= beforeVal);
+}
+
+const dateBetweenFunc:FilterFunc<Range<Date>,Date> = (filterInfo:FilterInfo) => {
+  const startVal = new Date(filterInfo.filterValue.Start);
+  const endVal = new Date(filterInfo.filterValue.End);
+  return ((val)=>val>=startVal && val <= endVal);
+}
+
+export const DateFilterFuncs: Dictionary<FilterFunc<any,any>> = {
+    [FilterType.DateIsOn]: dateIsOnFunc,
+    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
+    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateBetween]: dateBetweenFunc,
+    [FilterType.IsNull]: isNull,
+};

package/src/table-builder/functions/download-data.ts

@@ -0,0 +1,11 @@
+export function downloadData(data: string, filename: string, mimeType: string) {
+  const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
+  const downloadLink = document.createElement('a');
+  downloadLink.download = filename;
+  downloadLink.href = url;
+  downloadLink.style.display = 'none';
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+  URL.revokeObjectURL(url);
+}

package/src/table-builder/functions/null-filter-function.ts

@@ -0,0 +1,9 @@
+import { FilterFunc, FilterInfo } from '../classes/filter-info';
+
+export const isNull:FilterFunc<boolean,any> = (filterInfo:FilterInfo) => {
+  const func = filterInfo.filterValue ?
+    (val: any) => val == null || val === ''
+    :
+    (val: any) => val != null && val !== '';
+    return func;
+}

package/src/table-builder/functions/number-filter-function.ts

@@ -0,0 +1,42 @@
+import { Range, FilterFunc, FilterInfo } from '../classes/filter-info';
+import { FilterType } from '../enums/filterTypes';
+import { Dictionary } from '../interfaces/dictionary';
+import { isNull } from './null-filter-function';
+
+type NumberFilterFunc = FilterFunc<number>
+
+const numberEqalsFunc:NumberFilterFunc = (filterInfo : FilterInfo<number>) => (val: number): boolean  =>{
+    return  val === filterInfo.filterValue;
+}
+
+const numberNotEqualFunc:NumberFilterFunc= (filterInfo : FilterInfo<number>) => (val: number): boolean  =>{
+  return val !== filterInfo.filterValue;
+}
+
+const  numberGreaterThanFunc:NumberFilterFunc= (filterInfo : FilterInfo<number>) => (val: number): boolean  => {
+    return val > filterInfo.filterValue;
+}
+
+const numberLessThanFunc:NumberFilterFunc= (filterInfo : FilterInfo<number>) => (val: number): boolean  => {
+    return val < filterInfo.filterValue;
+}
+
+const  numberBetweenFunc:FilterFunc<Range<number>,number> = (filterInfo : FilterInfo) => {
+  const startVal = Number(filterInfo.filterValue.Start);
+  const endVal = Number(filterInfo.filterValue.End);
+  return ((val)=>(val > startVal) && (val < endVal));
+}
+
+export const multipleNumberValuesEqualsFunc:FilterFunc<number[],number> = (filterInfo:FilterInfo) => {
+  return ((val)=>filterInfo.filterValue.some((value: any) => val === value));
+}
+
+export const NumberFilterFuncs: Dictionary<FilterFunc<any,any>> = {
+    [FilterType.NumberEquals]: numberEqalsFunc,
+    [FilterType.NumberNotEqual]: numberNotEqualFunc,
+    [FilterType.NumberGreaterThan]: numberGreaterThanFunc,
+    [FilterType.NumberLessThan]: numberLessThanFunc,
+    [FilterType.NumberBetween]: numberBetweenFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleNumberValuesEqualsFunc,
+};

package/src/table-builder/functions/sort-data-function.ts

@@ -0,0 +1,8 @@
+import { Sort, SortDirection } from "@angular/material/sort";
+import { orderBy } from 'lodash';
+
+export type direc = 'asc' | 'desc' | boolean;
+
+export function sortData<T>(data: T[], sorted: Sort[]): T[] {
+  return orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction as direc ));
+}

package/src/table-builder/functions/string-filter-function.ts

@@ -0,0 +1,52 @@
+import { FilterFunc, FilterInfo } from '../classes/filter-info';
+import { FilterType } from '../enums/filterTypes';
+import { Dictionary } from '../interfaces/dictionary';
+import { isNull } from './null-filter-function';
+
+
+const stringEqualFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const equelsVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>prepareForStringCompare(val) === equelsVal );
+}
+
+const stringContainsFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const containsVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>prepareForStringCompare(val).includes(containsVal));
+}
+
+const stringDoesNotContainFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>!prepareForStringCompare(val)?.includes(doesNotContainVal));
+}
+
+const stringStartsWithFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const startsWith = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>prepareForStringCompare(val).startsWith(startsWith));
+}
+
+const stringEndsWithFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const startsWith = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>prepareForStringCompare(val).endsWith(startsWith));
+}
+
+const multipleStringValuesEqualsFunc:FilterFunc<string[],string> = (filterInfo:FilterInfo) => {
+  const filterVals = filterInfo.filterValue.map( (v: string) => prepareForStringCompare(v));
+  return ((val)=> filterVals.some((s:string) => prepareForStringCompare(val) === s));
+}
+
+export const StringFilterFuncs: {[k:string]: FilterFunc<any,any>} = {
+    [FilterType.StringEquals]: stringEqualFunc,
+    [FilterType.StringContains]: stringContainsFunc,
+    [FilterType.StringDoesNotContain]: stringDoesNotContainFunc,
+    [FilterType.StringStartWith]: stringStartsWithFunc,
+    [FilterType.StringEndsWith]: stringEndsWithFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
+};
+
+export const EnumFilterFuncs: Dictionary<FilterFunc<any,any>> = {
+  [FilterType.IsNull]: isNull,
+  [FilterType.In] : multipleStringValuesEqualsFunc,
+};
+
+export const prepareForStringCompare = (val : any):string => val?.toString().trim().toLowerCase();

package/{table-builder/interfaces/ColumnInfo.d.ts → src/table-builder/interfaces/ColumnInfo.ts}

@@ -1,6 +1,7 @@
 import { CustomCellDirective } from "../directives/custom-cell-directive";
 import { MetaData } from "./report-def";
+
 export interface ColumnInfo {
-    metaData: MetaData;
-    customCell: CustomCellDirective;
+  metaData: MetaData;
+  customCell: CustomCellDirective;
 }

package/src/table-builder/interfaces/column-template.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { MetaData } from './report-def';
+
+export class ColumnTemplates {
+  header: TemplateRef<any>;
+  footer: TemplateRef<any>;
+  body: TemplateRef<any>;
+  metaData: MetaData;
+}

package/{table-builder/interfaces/dictionary.d.ts → src/table-builder/interfaces/dictionary.ts}

@@ -1,3 +1,3 @@
-export interface Dictionary<T> {
-    [key: string]: T;
-}
+export interface Dictionary<T> {
+  [key: string]: T;
+}