@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,376 @@
+import { Directive, Input, Predicate, Signal, SimpleChanges, inject, OnChanges, OnInit, OnDestroy } from "@angular/core";
+import { Observable, ReplaySubject, takeUntil, tap } from "rxjs";
+import { CustomFilter, FilterInfo } from "../classes/filter-info";
+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 { TableWrapperDirective } from "./table-wrapper.directive";
+import { MatOption } from "@angular/material/core";
+import { subscriber } from "../../rxjs";
+import { toSignal } from "@angular/core/rxjs-interop";
+
+
+const inputs = [
+  'predicate: tbCustomFilter',
+  'filterId: filterId',
+];
+
+
+@Directive({
+  selector: 'tb-abstract'
+})
+export abstract class TableCustomFilterDirective {
+  abstract filter$ : Observable<CustomFilter>;
+  abstract $filter: Signal<CustomFilter | undefined>;
+  filterId!: string;
+  savable = false;
+  abstract active: boolean;
+  abstract reset(): void;
+}
+
+
+@Directive({
+  selector: "[tbFilter]",
+}) export class TableFilterDirective implements OnChanges, OnInit {
+  protected model = inject(NgControl, { optional: true });
+  private wrapper = inject(TableWrapperDirective, { optional: true });
+  constructor() {
+    if(this.wrapper) {
+      this.wrapper.register(this);
+    }
+    if(this.model) {
+      subscriber(this.model!.valueChanges!, val => {
+        if(this.filterType === FilterType.StringContains && val === ''){
+          val = undefined
+        }
+        this.filterValue = val;
+        this.update();
+      })
+    }
+  }
+  reset() {
+    this.filterValue = undefined;
+  }
+  filter$ = new ReplaySubject<FilterInfo>(1);
+  $filter = toSignal(this.filter$);
+
+  @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;
+    }
+  }
+
+  savable = false;
+  ready = false;
+
+  _userActive = true;
+  ngOnChanges(changes: SimpleChanges) {
+    this.update();
+  }
+
+  ngOnInit() {
+    if(!this.filterId) {
+      this.filterId = crypto.randomUUID();
+    } else {
+      this.savable = true;
+    }
+    this.ready = true;
+    this.update();
+  }
+
+  protected setFilter(filter: FilterInfo ) {
+    this.filter$.next(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,
+          _isExternallyManaged: true,
+        }
+      );
+
+    }
+  }
+}
+
+@Directive({
+  selector: '[tbFilterStringContains]',
+  providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }],
+  inputs: [
+    'key:tbFilterStringContains',
+    'filterValue:filterValue',
+    'filterId: filterId',
+    'active: active',
+  ],
+}) export class TableFilterStringContainsDirective extends TableFilterDirective implements OnChanges {
+  constructor() {
+    super();
+    this.filterType = FilterType.StringContains;
+    this.fieldType = FieldType.String;
+  }
+
+  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 implements OnInit {
+
+  filter$ = new ReplaySubject<CustomFilter>(1);
+  $filter = toSignal(this.filter$);
+  filter!: CustomFilter;
+
+  _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 = crypto.randomUUID();
+    } else {
+      this.savable = true;
+    }
+
+    this.filter = {
+      filterType: FilterType.Custom,
+      filterId: this.filterId,
+      active: this._active,
+      predicate: this._predicate,
+    };
+    this.ready = true;
+    this.filter$.next(this.filter);
+  }
+}
+
+@Directive()
+export abstract class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase implements OnDestroy, OnInit {
+
+  protected wrapper = inject(TableWrapperDirective, { optional: true });
+  protected constructor(private change: Observable<any>, private isActive: () => boolean) {
+    super();
+    if(this.wrapper) {
+      this.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 {
+  private matCheckbox = inject(MatCheckbox);
+
+
+  override set active(val: boolean) {
+    this.matCheckbox.checked = val;
+    super.active = val;
+  }
+  constructor() {
+    const matCheckbox = inject(MatCheckbox);
+    super(matCheckbox.change, () => matCheckbox.checked);
+    this.matCheckbox = matCheckbox;
+  }
+}
+
+
+@Directive({
+  selector: 'mat-slide-toggle[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }],
+})
+export class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective implements OnInit {
+  private matSlideToggle: MatSlideToggle;
+
+  override set active(val: boolean) {
+    this.matSlideToggle.checked = val;
+    super.active = val;
+  }
+  constructor() {
+    const matSlideToggle = inject(MatSlideToggle);
+
+    super(matSlideToggle.change, () => matSlideToggle.checked);
+    this.matSlideToggle = matSlideToggle;
+
+  }
+
+  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 implements OnInit {
+  private matRadioButton: MatRadioButton;
+
+
+  override set active(val: boolean) {
+    this.matRadioButton.checked = val;
+    super.active = val;
+  }
+  constructor() {
+    const matRadioButton = inject(MatRadioButton);
+
+    super(matRadioButton.change, () => matRadioButton.checked);
+    this.matRadioButton = matRadioButton;
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}
+
+// Option (select)
+@Directive({
+  selector: 'mat-option[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }],
+})
+export class MatOptionTbFilterDirective extends TbSelectedFilterDirective implements OnInit {
+  private matOption: MatOption;
+
+  override set active(val: boolean) {
+    if(val) {
+      this.matOption.select();
+    } else {
+      this.matOption.deselect();
+    }
+    super.active = val;
+  }
+  constructor() {
+    const matOption = inject(MatOption);
+
+    super( matOption.onSelectionChange.pipe(tap( d => {
+      if(!matOption.value) {
+        matOption.value = crypto.randomUUID();
+      }
+    }
+
+    )), () => matOption.selected);
+    this.matOption = matOption;
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}
+
+// Button toggle
+@Directive({
+  selector: 'mat-button-toggle[tbCustomFilter]',
+  inputs: [
+    ...inputs
+  ],
+  providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }],
+})
+export class MatButtonToggleFilterDirective extends TbSelectedFilterDirective implements OnInit {
+  private matButtonToggle: MatButtonToggle;
+
+  override set active(val: boolean) {
+    this.matButtonToggle.checked = val;
+    super.active = val;
+  }
+  constructor() {
+    const matButtonToggle = inject(MatButtonToggle);
+
+    super(matButtonToggle.change, () => matButtonToggle.checked);
+    this.matButtonToggle = matButtonToggle;
+
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+}

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

@@ -0,0 +1,40 @@
+
+export const 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',
+  DateTimeIsAt: 'Is At',
+  DateTimeIsNotAt: 'Is Not At',
+  DateTimeAtOrAfter: 'At or After',
+  DateTimeAtOrBefore: 'At or Before',
+  DateTimeBetween: 'Between',
+  BooleanEquals: 'Is',
+  IsNull: 'Is Blank',
+  Or: 'Or',
+  And: 'And',
+  In: 'In',
+  Custom: 'Custom',
+} as const;
+
+export type FilterType = typeof FilterType[keyof typeof FilterType];
+
+export type SubFilterTypes<T extends typeof FilterType[keyof typeof FilterType]> = T;
+
+export type StringFilterTypes = SubFilterTypes<'Equals' | 'Contains' | 'Does Not Contain' | 'Start With' | 'Ends With' | 'Is Blank' | 'In'>;
+export type NumberFilterTypes = SubFilterTypes<'Equals' | 'Does Not Equal' | 'Greater Than' | 'Less Than' | 'Between' | 'Is Blank' | 'In'>;
+export type DateFilterTypes = SubFilterTypes<'Is on' | 'Is Not On' | 'On or After' | 'On or Before' | 'Between' | 'Is Blank' | 'In'>;
+export type DateTimeFilterTypes = SubFilterTypes<'Is At' | 'Is Not At' | 'At or After' | 'At or Before' | 'Between' | DateFilterTypes>;
+export type BooleanFilterTypes = SubFilterTypes<'Is' | 'Is Blank'>;
+export type EnumFilterTypes = SubFilterTypes<'In' | 'Is Blank'>;

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

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

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

@@ -0,0 +1,78 @@
+import { FilterFunc, FilterFuncs, FilterInfo, Range } from '../classes/filter-info';
+import { DateFilterTypes, DateTimeFilterTypes, FilterType } from '../enums/filterTypes';
+import { FieldType } from '../interfaces/report-def';
+import { isNull } from './null-filter-function';
+
+
+const dateIsOnFunc: FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const isOnVal = new Date( filterInfo.filterValue).getTime();
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return ((val) => clean(filterInfo, val).getTime() === isOnVal);
+}
+
+const dateIsNotOnFunc: FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const isNotOnVal = new Date( filterInfo.filterValue).getTime();
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return ((val) => clean(filterInfo, val).getTime() !== isNotOnVal);
+}
+
+const dateIsOnOrAfterFunc: FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const afterVal = new Date( filterInfo.filterValue).getTime();
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return ((val) => clean(filterInfo, val).getTime() >= afterVal);
+}
+
+const dateIsOnOrBeforeFunc: FilterFunc<Date> = (filterInfo:FilterInfo) => {
+  const beforeVal = new Date( filterInfo.filterValue).getTime();
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return ((val) => clean(filterInfo, val).getTime() <= beforeVal);
+}
+
+const dateIsInFunc: FilterFunc<Date[], Date> = (filterInfo:FilterInfo) => {
+  const filterVals = (filterInfo.filterValue as Date[]).map(v => new Date(v).getTime());
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return ((val) => {
+    const d = clean(filterInfo, val).getTime();
+    return filterVals.some((f) => f === d)});
+}
+
+const dateBetweenFunc: FilterFunc<Range<Date>, Date> = (filterInfo:FilterInfo) => {
+  const startVal = new Date(filterInfo.filterValue.Start);
+  const endVal = new Date(filterInfo.filterValue.End);
+  const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime
+  return (
+    (val) => {
+      const cleanedVal = clean(filterInfo, val);
+      return cleanedVal >= startVal && cleanedVal <= endVal;
+    });
+}
+
+const cleanDateTime = (filterInfo:FilterInfo, val: Date) => {
+  if(!!DateFilterFuncs[filterInfo.filterType]){
+    const d = new Date(val);
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }
+  return val;
+}
+
+export const DateFilterFuncs: FilterFuncs<DateFilterTypes> = {
+  [FilterType.DateIsOn]: dateIsOnFunc,
+  [FilterType.DateIsNotOn]: dateIsNotOnFunc,
+  [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
+  [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
+  [FilterType.DateBetween]: dateBetweenFunc,
+  [FilterType.In]: dateIsInFunc,
+  [FilterType.IsNull]: isNull,
+};
+
+export const DateTimeFilterFuncs: FilterFuncs<DateTimeFilterTypes> = {
+  ...DateFilterFuncs,
+  [FilterType.DateTimeIsAt]: dateIsOnFunc,
+  [FilterType.DateTimeIsNotAt]: dateIsNotOnFunc,
+  [FilterType.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
+  [FilterType.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
+  [FilterType.DateTimeBetween]: dateBetweenFunc,
+  [FilterType.In]: dateIsInFunc,
+  [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,41 @@
+import { Range, FilterFunc, FilterInfo, FilterFuncs } from '../classes/filter-info';
+import { FilterType, NumberFilterTypes } from '../enums/filterTypes';
+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: FilterFuncs<NumberFilterTypes> = {
+  [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,80 @@
+import { Predicate } from "@angular/core";
+import { TableBuilderSort } from "../components/table-container/table-container.helpers/sort-state.helpers";
+
+export function sortData<T>(data: T[], sorted: TableBuilderSort[]): T[] {
+  return data.sort(compareT(sorted));
+}
+
+export function filterData<T>(data: T[], filters: Predicate<T>[], resetAll = false){
+  if(filters.length === 0){
+    if(resetAll){
+      for(let index = 0; index < data.length; index++) {
+        const element = data[index];
+        element[tbNoShowSymbol] = false;
+      }
+    }
+    return data;
+  }
+  for(let index = 0; index < data.length; index++) {
+    const element = data[index];
+    const hide = !filters.every(filter => filter(element));
+    if(hide || resetAll){
+      element[tbNoShowSymbol] = hide;
+    }
+  }
+  return data;
+}
+
+export const tbNoShowSymbol = Symbol('tb_no_show');
+
+function compareT<T>(criteria: TableBuilderSort[]) {
+  const transforms = criteria.reduce((acc, c) => {
+    acc[c.active] = {
+      transform: c.sortBy ? c.sortBy : getFactory(c.active), nulls: c.nulls === 'first' ? -1 : 1 };
+    return acc;
+  }, {} as Record<string, { transform: (t: T) => any, nulls: 1 | -1}>);
+
+  return function (a: T, b: T): number {
+    for(let index = 0; index < criteria.length; index++) {
+      const c = criteria[index];
+      const d = transforms[c.active];
+      const nullValue = d.nulls;
+      if(a == null) {
+        if(b == null) return 0;
+        return nullValue;
+      }
+      if(b == null) return -nullValue;
+      const transform = d.transform;
+      const aVal = transform(a);
+      const bVal = transform(b);
+      if(aVal == null) {
+        if(bVal == null) return 0;
+        return nullValue;
+      }
+
+      if(bVal == null) return -nullValue;
+      if(aVal < bVal) return c.direction === 'asc' ? -1 : 1;
+      if(aVal > bVal) return c.direction === 'asc' ? 1 : -1;
+    }
+    return 0;
+  }
+}
+
+export function getFactory(b: string){
+  if(typeof b !== 'string') return (a) => a[b];
+  if(!b.includes('.')) return (a) => {
+    if(!a) return a;
+    return a[b];
+  };
+  const arr = b.split('.');
+  return (a) => {
+    let val = a;
+    if(!a) return a;
+    for(let index = 0; index < arr.length; index++) {
+      val = val[arr[index]];
+      if(val == undefined) return undefined;
+      if(typeof val !== 'object' && index + 1 < arr.length) return undefined;
+    }
+    return val;
+  }
+}