@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

package/src/table-builder/components/filter/filter.component.spec.ts

@@ -0,0 +1,87 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { FilterComponent } from '../filter/filter.component';
+import { CommonModule, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { FilterTypes } from '../../enums/filterTypes';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { OptionHarnessFilters } from '@angular/material/core/testing';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { isObservable } from 'rxjs';
+
+function fillInput<T>(fixture: ComponentFixture<T>, name: string, value: string) {
+  const input = fixture.debugElement.query(By.css('input[name=' + name + ']')).nativeElement as HTMLInputElement;
+  input.value = value;
+  input.dispatchEvent(new Event('input'));
+  fixture.detectChanges();
+}
+
+async function setSelect(loader: HarnessLoader, filter: Pick<OptionHarnessFilters, 'isSelected' | 'selector' | 'text'>) {
+  const select = await loader.getHarness<MatSelectHarness>(MatSelectHarness);
+  await select.open();
+  await select.clickOptions(filter);
+}
+
+describe('filter component', () => {
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [FilterComponent, DatePipe, SpaceCasePipe, DateFilterComponent],
+      providers: [
+        DatePipe,
+        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+        provideMockStore({ initialState: {} }),
+      ],
+      imports: [
+        NoopAnimationsModule,
+        CommonModule,
+        FormsModule,
+      ]
+    })
+      .compileComponents();
+  });
+
+  it('filter info object should be populated', async () => {
+    const fixture = TestBed.createComponent(FilterComponent);
+    const component = fixture.componentInstance;
+
+    const originFunc = component.state.addFilter;
+
+    const spy = spyOn(component.state, 'addFilter');
+
+
+
+    spy.and.callFake( a => {
+      if(isObservable(a)) {
+        throw new Error('Observable not supported');
+      } else {
+        expect(a.filterType).toBe(FilterTypes.StringContains);
+        expect(a.filterValue).toBe('a');
+      }
+      return originFunc(a);
+    });
+
+    component.filter = {
+      key: 'name',
+      fieldType: FieldType.String
+    };
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const button = await loader.getHarness<MatButtonHarness>(MatButtonHarness.with( {text: 'Apply'}));
+
+    await setSelect(loader, {text: 'Contains'});
+    fillInput(fixture, 'filterValue', 'a');
+    await button.click();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,59 @@
+import { Component, ChangeDetectionStrategy, inject, input, computed, output, signal } from '@angular/core';
+import { filterTypeMap, FilterInfo, PartialFilter } from '../../classes/filter-info';
+import { TableStore } from '../../classes/table-store';
+import { FilterType, FilterTypes } from '../../enums/filterTypes';
+import { FieldType } from '../../interfaces/report-def';
+import { MatCardModule } from '@angular/material/card';
+import { NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SpaceCasePipe } from '../../../utilities';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { NumberFilterComponent } from '../number-filter/number-filter.component';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { DateTimeFilterComponent } from '../date-time-filter/date-time-filter.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+import { InListFilterComponent } from './in-list/in-list-filter.component';
+
+@Component({
+    selector: 'tb-filter',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+        imports: [
+      MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
+      MatInputModule, MatSelectModule, NumberFilterComponent,
+      DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
+      NgTemplateOutlet
+    ]
+})
+export class FilterComponent {
+  protected state = inject(TableStore);
+
+  filterTypes = filterTypeMap;
+  FilterType = FilterTypes;
+  FieldType = FieldType;
+
+  $filter = input.required<PartialFilter, PartialFilter>({ 
+    alias: 'filter',
+    transform: (f) => ({ ...f })
+  });
+
+  close = output();
+
+  $enteredFilterType = signal<FilterType | undefined>(undefined);
+  $currentFilterType = computed(() =>  this.$enteredFilterType() || this.$filter()?.filterType);
+  $availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType]);
+
+  onEnter(filter: FilterInfo, event: any) {
+    event.preventDefault();
+    if (filter.filterValue != null && filter.filterType) {
+      this.state.addFilter(filter);
+      this.close.emit();
+    }
+  }
+}

package/src/table-builder/components/filter/in-list/in-list-filter.component.ts

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { TableStore } from '../../../classes/table-store';
+import { FieldType } from '../../../interfaces/report-def';
+import { KeyValuePipe } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FunctionPipe, SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
+
+
+@Component({
+  selector: 'tb-in-list-filter , [tb-in-list-filter]',
+  template: `
+  @for (item of $keyValues() | keyvalue; track item.key) {
+    <div>
+      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{$metaData().fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
+
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InListFilterComponent,
+    multi: true
+  }],
+    imports: [
+    KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe
+  ]
+})
+export class InListFilterComponent implements ControlValueAccessor {
+  private ref = inject(ChangeDetectorRef);
+  private tableState = inject(TableStore);
+
+  value: string[] = [];
+  FieldType = FieldType;
+  writeValue(obj: string[]): void {
+    this.value = obj;
+
+    if(this.value) {
+      this.$selectedKeys.set(this.value.map( f => f ));
+    }
+    this.ref.markForCheck();
+  }
+
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  $key = input.required<string>({ alias: 'key' });
+  $selectedKeys = signal<string[]>([]);
+  $metaData = computed(() => this.tableState.$getMetaData(this.$key())());
+  $keyValues = computed((): {
+    [key: number]: string;
+    } => {
+    const metaData = this.$metaData();
+    if(metaData?.additional?.filterOptions?.filterableValues ) {
+      return  metaData.additional.filterOptions.filterableValues.reduce((prev: any, cur)=> { prev[cur] = cur; return prev }, {});
+    } else {
+      if(metaData?.fieldType === FieldType.Enum ) {
+        return metaData.additional!.enumMap!;
+      }
+    }
+    return {};
+  });
+
+  selectFilterChanged($event, val: string) {
+    if($event.checked) {
+      this.$selectedKeys.update( keys => [...keys, val]);
+    } else {
+      this.$selectedKeys.update(keys => keys.filter( item => item !== val));
+    }
+
+    this.value = this.$selectedKeys();
+    this.onChange(this.value);
+  }
+
+}

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.html

@@ -0,0 +1,55 @@
+@if($columns(); as displayCols){
+  <span matTooltip="Show/hide columns">
+    <button mat-icon-button [matMenuTriggerFor]="menu">
+      <mat-icon color="primary">visibility_off</mat-icon>
+    </button>
+  </span>
+  <mat-menu #menu="matMenu" class="my-mat-menu">
+
+    <button mat-menu-item>
+      <span matTooltip="Close">
+        <button class="filter-button" mat-icon-button>
+          <mat-icon>close</mat-icon>
+        </button>
+      </span>
+    </button>
+
+    <button mat-menu-item stop-propagation>
+      <span matTooltip="Show all columns">
+        <button mat-icon-button (click)="reset(displayCols)">
+          <mat-icon color="primary">done_all</mat-icon>
+        </button>
+      </span>
+
+      <span matTooltip="Hide all columns">
+        <button mat-icon-button (click)="unset(displayCols)">
+          <mat-icon color="primary">cancel</mat-icon>
+        </button>
+      </span>
+    </button>
+
+    <div cdkDropList (cdkDropListDropped)="drop($event)" stop-propagation [cdkDropListLockAxis]="'y'">
+      @for (col of displayCols; track col.key) {
+        <button [class.isHidden]="!col.isVisible" stop-propagation mat-menu-item cdkDrag [cdkDragData]="col">
+        <div (click)="col.isVisible = !col.isVisible; emit(displayCols)" style="display: flex; align-items: center;">
+          @if(col.isVisible){
+            <button mat-icon-button matTooltip="Hide Column" class="show-hide">
+              <mat-icon color="primary">check_box</mat-icon>
+            </button>
+          } @else {
+            <button mat-icon-button matTooltip="Show Column" class="show-hide">
+              <mat-icon>indeterminate_check_box</mat-icon>
+            </button>
+          }
+          
+          <p class="label">
+            {{col.displayName || (col.key | spaceCase) }}
+          </p>
+
+        </div>
+      </button>
+      }
+
+    </div>
+  </mat-menu>
+}

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.scss

@@ -0,0 +1,57 @@
+.show-hide {
+  margin-right: 15px;
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+}
+
+.label {
+    color: cornflowerblue;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+    display: inline-block;
+    width: 66%;
+}
+
+.row {
+    margin: 0;
+    padding: 0;
+}
+
+.isHidden {
+    background-color: lightgrey;
+    color: darkgray;
+    font-weight: 700;
+    font-size: 17px;
+    white-space: nowrap;
+}
+
+.filter-button {
+    margin-top: 10px;
+}
+
+.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);
+}
+.mdc-list-item__primary-text{
+  display: inline-block;
+  width: 100%;
+}
+

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.ts

@@ -0,0 +1,44 @@
+import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { DisplayCol } from '../../classes/display-col';
+import { TableStore } from '../../classes/table-store';
+import {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
+
+@Component({
+  selector: 'tb-col-displayer',
+  templateUrl: './gen-col-displayer.component.html',
+  styleUrls: ['./gen-col-displayer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush ,
+    imports: [
+    MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
+    DragDropModule, SpaceCasePipe
+  ]
+})
+export class GenColDisplayerComponent {
+  private tableState = inject(TableStore);
+  $columns = computed(() => this.tableState.$orderedCodeVisibleMetaDatas().map( md => ({
+    key: md.key,
+    displayName: md.displayName,
+    isVisible: !this.tableState.$hiddenKeys().includes(md.key)
+  })));
+
+  reset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = true);
+    this.emit(displayCols);
+  }
+  drop(event: CdkDragDrop<string[]>) {
+    this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder:event.previousIndex })
+  }
+  unset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = false);
+    this.emit(displayCols);
+  }
+
+  emit(displayCols: DisplayCol[]) {
+    this.tableState.setHiddenColumns(displayCols.map( c => ({key: c.key, visible: c.isVisible})));
+  }
+}

package/src/table-builder/components/generic-table/generic-table.component.html

@@ -0,0 +1,77 @@
+<mat-table
+  cdkDropList
+  cdkDropListLockAxis='x'
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)"
+  class="table-drag-list"
+  #table
+  [dataSource]="$dataSource()"
+  [trackBy]="$trackByFunction()"
+  [style]="$tableWidth()"
+>
+
+  <!-- select column -->
+  <ng-container matColumnDef="select">
+    @let selection = $selection();
+    <mat-header-cell *matHeaderCellDef  class="select-column">
+      <mat-checkbox (change)="$event ? masterToggle() : null"
+                    [checked]="!!($masterToggleChecked())"
+                    [indeterminate]="$masterToggleIndeterminate()">
+      </mat-checkbox>
+    </mat-header-cell>
+
+    <mat-cell *matCellDef="let row" class="select-column">
+      <mat-checkbox
+        (click)="$event.stopPropagation()"
+        (change)="$event ? selection.toggle(row) : null"
+        [checked]="selection.isSelected(row)"/>
+    </mat-cell>
+
+    <mat-footer-cell *matFooterCellDef class="select-column">
+      {{ selection.selected.length }}
+    </mat-footer-cell>
+  </ng-container>
+
+
+  <!-- index column -->
+  <ng-container matColumnDef="index">
+    <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" class="index-column">#
+    </mat-header-cell>
+    <mat-cell *matCellDef="let i = index;" class="index-column">
+      {{ 1 + i + $offsetIndex() }}
+    </mat-cell>
+    <mat-footer-cell *matFooterCellDef class="index-column"></mat-footer-cell>
+  </ng-container>
+
+  <!-- Grouping -->
+  <ng-container matColumnDef="groupHeader">
+    <mat-cell *matCellDef="let row">
+      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );
+      <div [style.paddingLeft]="row.padding + 'px !important'">
+        <button mat-icon-button (click)="setExpanded(row.key, row.groupName, !expanded());">
+          @if (!expanded()) {
+            <mat-icon>chevron_right</mat-icon>
+          } @else {
+            <mat-icon>expand_more</mat-icon>
+          }
+        </button>
+        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})
+      </div>
+      <div style="flex-grow: 1">
+        <ng-container *ngTemplateOutlet="state.$props().groupHeaderTemplate!; context: { element: row }"></ng-container>
+      </div>
+    </mat-cell>
+  </ng-container>
+
+  <mat-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()"
+           *matRowDef="let row; columns: $keys(); let i = index"/>
+  <mat-row [style.height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
+           [style.min-height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
+           *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;"/>
+</mat-table>
+
+<mat-header-row [style.height]="$headerHeight()" [style.min-height]="$headerHeight()"
+  *matHeaderRowDef="$keys(); sticky: state.$props().isSticky" [style.top.px]="($offset()! * -1)"/>
+<mat-footer-row [style.height]="$footerHeight()" [style.min-height]="$footerHeight()"
+  *matFooterRowDef="$keys(); sticky: $stickyFooter() "
+  [style.bottom.px]="$stickyFooter() ? ($offset()) : undefined"/>

package/src/table-builder/components/generic-table/generic-table.component.scss

@@ -0,0 +1,38 @@
+:host{
+  --mat-paginator-container-size: initial;
+}
+.select-column {
+  min-width: var(--tb-min-select-column-width, 42px)
+}
+.index-column {
+  min-width: var(--tb-min-index-column-width, 42px)
+}
+.mat-mdc-row:nth-child(odd) {
+  background-color: var(--tb-odd-row-background-color, #cdeefe);
+}
+.page-amounts{
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 12px;
+  margin-right: .2rem;
+}
+
+:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host::ng-deep{
+  & .mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-data-table__header-cell{
+    padding: var(--tb-cell-padding, 0 0 0 .2rem);
+    line-height: var(--tb-cell-line-height, normal);
+  }
+}
+
+::ng-deep .op-date-time-input{
+  line-height: 3rem;
+  font-size: .9rem;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  padding-left: 0.2rem;
+  width: 12rem;
+
+}