@one-paragon/angular-utilities 2.8.3 → 2.8.4

package/src/table-builder/directives/multi-sort.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, OnInit, OnDestroy, inject, effect, untracked } from '@angular/core';
+import { MatSort, Sort, SortDirection } from '@angular/material/sort';
+import { distinctUntilChanged, distinctUntilKeyChanged, map, tap } from 'rxjs/operators';
+import { TableStore } from '../classes/table-store';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Directive({
+  selector: '[multiSort]',
+  exportAs: 'multiSort',
+  inputs: ['disabled: matSortDisabled'],
+  providers: [
+    { provide: MatSort, useExisting: MultiSortDirective }
+  ],
+})
+export class MultiSortDirective extends MatSort {
+  private state = inject(TableStore);
+  private $sortChange = toSignal(this.sortChange, {
+    equal: (f, s) => f?.active === s?.active && f?.direction === s?.direction
+  });
+  #onSortChange = effect(() => {
+    const sortChange = this.$sortChange();
+    if(!sortChange) return;
+    untracked(() => {
+      this.state.setSort({ key: sortChange.active, direction: sortChange.direction })
+    })
+  });
+
+  #onStateSortUpdate = effect(() => {
+    const rules = this.state.$getSorts();
+    if(!rules) return;
+    untracked(() => {
+      const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' as SortDirection };
+      const topActiveChanged = topRule.active !== this.active || '';
+      const topDirectionChanged = topRule.direction !== this.direction || '';
+      if(topActiveChanged || topDirectionChanged){
+        this.active = topRule.active;
+        this.direction = topRule.direction;
+        this.sortChange.emit(topRule);
+      }
+    })
+  })
+  constructor() {
+    super();
+  }
+
+}
+
+export function sortsAreSame(a: Sort[], b: Sort[]) {
+  if(a.length !== b.length) {
+    return false;
+  }
+  for(let i = 0; i < a.length; i++) {
+    if(a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/table-builder/directives/resize-column.directive.ts

@@ -0,0 +1,107 @@
+import { Directive, OnInit, Renderer2, Input, ElementRef, booleanAttribute, inject } from "@angular/core";
+import { fromEvent } from "rxjs";
+import { filter, map, switchMap, takeUntil } from "rxjs/operators";
+import { defaultShareReplay } from "../../rxjs";
+import { TableStore } from "../classes/table-store";
+
+@Directive({
+  selector: "[resizeColumn]",
+})
+export class ResizeColumnDirective implements OnInit{
+  private renderer = inject(Renderer2);
+  private el = inject(ElementRef);
+  store = inject(TableStore);
+
+  @Input({ alias: 'resizeColumn', transform: booleanAttribute }) resizable: boolean | string = false;
+
+  @Input() key!: string;
+
+  ngOnInit(){
+    if(this.resizable){
+      const { table, columnHead } = this.getTableAndColumnHeadHtmlElements();
+      const resizer = this.createResizerSpanInColumnHead(columnHead);
+
+      const aggregateMouseEventsMapped$ = this.mouseDownThroughMouseUpEventMapper(resizer, columnHead, table)
+
+      const resizeColsData$ = aggregateMouseEventsMapped$.pipe(
+        filter(({ mouseMove }) => !!mouseMove.buttons),
+        map( ({ mouseDownData, mouseMove }) => {
+          const { newTableWidth, newColumnWidth } = this.calculateNewWidths(mouseDownData, mouseMove)
+          return ({
+            key: this.key,
+            widthInPixel: newColumnWidth,
+            tableSize: newTableWidth,
+          })
+        }),
+        defaultShareReplay()
+      );
+
+      this.store.setUserDefinedWidth(resizeColsData$.pipe(
+        map(resizeData => ([{ key: this.key, widthInPixel: resizeData.widthInPixel }]))
+      ));
+
+      this.store.setTableWidth(resizeColsData$.pipe(
+        map(resizeData => resizeData.tableSize )));
+    }
+
+  }
+
+  createResizerSpanInColumnHead(columnHead:HTMLElement){
+    const resizer = this.renderer.createElement("span");
+    this.renderer.addClass(resizer, "resize-holder");
+    resizer.style['cursor'] = 'col-resize';
+    resizer.style['user-select'] = 'none';
+    resizer.style['width'] = '10px';
+    resizer.style['height'] = '100%';
+    resizer.style['position'] = 'absolute';
+    resizer.style['right'] = '0';
+    resizer.style['top'] = '0';
+    resizer.style['z-index'] = '1';
+    this.renderer.appendChild(columnHead, resizer);
+    return resizer;
+  }
+
+  getTableAndColumnHeadHtmlElements():{table:HTMLElement, columnHead:HTMLElement}{
+    const columnHead: HTMLElement = this.el.nativeElement;
+    const row = this.renderer.parentNode(columnHead);
+    const table = this.renderer.parentNode(row);
+    return ({ table, columnHead })
+  }
+
+  mouseDownThroughMouseUpEventMapper(resizer:HTMLElement, columnHead:HTMLElement, table:HTMLElement){
+    return this.resizerMouseDownEventMapper(resizer, columnHead, table)
+      .pipe(
+        switchMap( mouseDownData => fromEvent<MouseEvent>(table, "mousemove").pipe(
+          map( mouseMove => ({ mouseDownData, mouseMove })),
+          takeUntil(fromEvent<MouseEvent>(document, "mouseup"))
+        ) ),
+      )
+  }
+  resizerMouseDownEventMapper(resizer:HTMLElement, columnHead:HTMLElement, table:HTMLElement){
+    return fromEvent<MouseEvent>(resizer, "mousedown").pipe(
+      map(event => ({
+        startPageX: event.pageX,
+        startColumnWidth: this.getElementWidth(columnHead),
+        startTableWidth: this.getElementWidth(table),
+      }))
+    );
+  }
+
+  calculateNewWidths(mouseDownData: MouseDownData, mouseMove: MouseEvent):{newTableWidth:number, newColumnWidth:number}{
+    const change = (mouseMove.pageX - mouseDownData.startPageX );
+    let newColumnWidth = mouseDownData.startColumnWidth + change;
+    if(newColumnWidth < 1){
+      newColumnWidth = 1;
+    }
+    const columnChange = newColumnWidth - mouseDownData.startColumnWidth;
+    const newTableWidth = (mouseDownData.startTableWidth + columnChange);
+    return ({ newTableWidth, newColumnWidth })
+  }
+  getElementWidth = (elem:HTMLElement) => (+(globalThis.getComputedStyle(elem).getPropertyValue('width').replace('px', '')))
+
+}
+interface MouseDownData{
+  startPageX:number,
+  startColumnWidth:number,
+  startTableWidth:number,
+}

package/src/table-builder/directives/table-wrapper.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, signal } from "@angular/core";
+import { TableCustomFilterDirective, TableFilterDirective } from "./tb-filter.directive";
+
+@Directive({
+  selector: '[tbWrapper]',
+})
+export class TableWrapperDirective {
+  $registrations = signal([] as (TableCustomFilterDirective | TableFilterDirective)[]);
+
+  register(filter: TableCustomFilterDirective | TableFilterDirective) {
+    this.$registrations.update( registrations => [...registrations, filter] );
+  }
+}

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/meta-data";
+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();
+  }
+}