@one-paragon/angular-utilities 2.8.2 → 2.8.4

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

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy, computed, inject, input } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+import { TableStore } from '../../classes/table-store';
+import { InListFilterComponent } from '../filter/in-list/in-list-filter.component';
+import { AllValueOptions, FieldType } from '../../interfaces/meta-data';
+
+@Component({
+  selector: 'tb-date-filter',
+  templateUrl: './date-filter.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrl: '../filter/filter.component.scss',
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  imports: [
+    MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
+  ]
+})
+export class DateFilterComponent {
+  FilterType = FilterType;
+  FieldType = FieldType;
+  $info = input.required<PartialFilter>({ alias: 'info' });
+  $currentFilterType = input.required<FilterType>({ alias: 'currentFilterType' });
+  private state = inject(TableStore)
+  $metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+  $allValuesInMeta = computed(() => {
+    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+}

package/src/table-builder/components/date-time-filter/date-time-filter.component.html

@@ -0,0 +1,25 @@
+@let currentFilterType = $currentFilterType();
+@let info = $info();
+
+@if(currentFilterType !== FilterType.DateTimeBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
+{
+  <input type="datetime-local" preventEnter name="filterValue" class="op-date-time-input" [ngModel]="info.filterValue"/>
+}
+@if(currentFilterType === FilterType.DateTimeBetween)
+{
+  <ng-container ngModelGroup="filterValue">
+    <input type="datetime-local" preventEnter name="Start" class="op-date-time-input" [ngModel]="info.filterValue?.Start"/>
+    <input type="datetime-local" preventEnter name="End" class="op-date-time-input" [ngModel]="info.filterValue?.End"/>
+  </ng-container>
+}
+@if(currentFilterType === FilterType.In)
+{
+  @if($allValuesInMeta())
+  {
+    <tb-in-list-filter name="filterValue" [key]="info.key" [values]="info.filterValue" [(ngModel)]="info.filterValue" />
+  }
+  @else
+  {
+    <lib-in-filter name="filterValue" [type]="FieldType.Date" [(ngModel)]="info.filterValue" />
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy, input, inject, computed } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { AllValueOptions, FieldType } from '../../interfaces/meta-data';
+import { TableStore } from '../../classes/table-store';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+import { InListFilterComponent } from '../filter/in-list/in-list-filter.component';
+
+@Component({
+  selector: 'tb-date-time-filter',
+  templateUrl: './date-time-filter.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrl: '../filter/filter.component.scss',
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  imports: [
+    FormsModule, InFilterComponent, InListFilterComponent
+  ]
+})
+export class DateTimeFilterComponent {
+  FilterType = FilterType;
+  FieldType = FieldType;
+
+  $info = input.required<PartialFilter>({ alias: 'info' });
+  $currentFilterType = input.required<FilterType>({ alias: 'currentFilterType' });
+
+  private state = inject(TableStore)
+  $metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+  $allValuesInMeta = computed(() => {
+    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+}

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

@@ -0,0 +1,120 @@
+@let filter = $filter();
+@let currentFilterType = $currentFilterType();
+
+@if (filter)
+{
+  <mat-card appearance="outlined" class="filter-card">
+    <mat-card-content>
+      <form #form="ngForm"  (keydown.enter)="onEnter(form.value,$event)" (keydown.escape)="close$.next()">
+        <input type="hidden" name="filterId" [ngModel]="filter.filterId" />
+        <input type="hidden" name="key" [ngModel]="filter.key" />
+        <input type="hidden" name="fieldType" [ngModel]="filter.fieldType" />
+        <div class="head-row" >
+          <h4 class="filter-name">{{(filter.key | spaceCase)}} Filter</h4>
+          <button class="cancel-button small-button" color="primary" mat-icon-button type="button" [matTooltip]="'Close'"
+              (click)="close$.next();">
+            <mat-icon class="cancel-button" color="primary">close</mat-icon>
+          </button>
+        </div>
+        <div class="filter-row">
+            <div class="inline">
+              <mat-form-field class="my-filter" >
+                  <mat-select  placeholder="Select Filter Type" name="filterType"  [ngModel]="$currentFilterType()" [panelWidth]="null" (ngModelChange)="$enteredFilterType.set($event)">
+                    @for (kvp of filterTypes[filter.fieldType]; track kvp)
+                    {
+                      <mat-option [value]="kvp">
+                        {{ kvp }}
+                      </mat-option>
+                    }
+                  </mat-select>
+              </mat-form-field>
+            </div>
+            @if(
+              filter.fieldType === FieldType.String
+              || filter.fieldType === FieldType.Array
+              || filter.fieldType === FieldType.Unknown
+              || filter.fieldType === FieldType.PhoneNumber)
+            {
+              <ng-container *ngTemplateOutlet="String" />
+            }
+            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)
+            {
+              <tb-number-filter [info]="filter" [currentFilterType]="currentFilterType!" />
+            }
+            @else if(filter.fieldType === FieldType.Boolean)
+            {
+              <ng-container *ngTemplateOutlet="Boolean" />
+            }
+            @else if(
+              filter.fieldType === FieldType.Date
+              || (
+                  filter.fieldType === FieldType.DateTime
+                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)
+                ))
+            {
+              <tb-date-filter [info]="filter" [currentFilterType]="currentFilterType!" />
+            }
+            @else if(filter.fieldType === FieldType.DateTime)
+            {
+              <tb-date-time-filter [info]="filter" [currentFilterType]="currentFilterType!" />
+            }
+            @else if(filter.fieldType === FieldType.Enum)
+            {
+              <ng-container *ngTemplateOutlet="Enum" />
+            }
+
+            @if(currentFilterType === FilterType.IsNull)
+            {
+              <mat-radio-group name="filterValue" [ngModel]="filter.filterValue">
+                <mat-radio-button [value]="true">True</mat-radio-button>
+                <mat-radio-button [value]="false">False</mat-radio-button>
+              </mat-radio-group>
+            }
+        </div>
+        <button mat-button disableRipple [disabled]="form.value.filterValue==undefined || !form.value.filterType" (click)="addFilter(form.value)">
+          Apply
+        </button>
+      
+      
+      <ng-template #String>
+        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
+        {
+          <mat-form-field class="my-filter">
+            <input matInput name="filterValue" [ngModel]="filter.filterValue" />
+          </mat-form-field>
+        }
+        @else if(currentFilterType === FilterType.In)
+        {
+          @if($allValuesInMeta())
+          {
+            <tb-in-list-filter name="filterValue" [key]="filter.key" [values]="filter.filterValue" [(ngModel)]="filter.filterValue" />
+          }
+          @else
+          {
+            <lib-in-filter name="filterValue" [type]="FieldType.String" [(ngModel)]="filter.filterValue" />
+          }
+        }
+      </ng-template>
+      
+      <ng-template #Boolean >
+        @if(currentFilterType === FilterType.BooleanEquals)
+        {
+          <div class="switch">
+            <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" >
+              <mat-radio-button preventEnter [value]="true">True</mat-radio-button>
+              <mat-radio-button preventEnter [value]="false">False</mat-radio-button>
+            </mat-radio-group>
+          </div>
+        }
+      </ng-template>
+      <ng-template #Enum>
+        @if(currentFilterType === FilterType.In)
+        {
+          <tb-in-list-filter name='filterValue' [key]="filter.key" [values]="filter.filterValue" [(ngModel)]="filter.filterValue" />
+
+        }
+      </ng-template>
+      </form>
+    </mat-card-content>
+  </mat-card>
+}

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

@@ -0,0 +1,60 @@
+.filter-name {
+  color: var(tb-filter-name);
+  margin: 10px 0;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.switch {
+  display: inline-block;
+}
+
+.head-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.filter-row{
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+mat-card.filter-card{
+  &::ng-deep mat-form-field{
+    width: 150px;
+  }
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper{
+    line-height: 0;
+    &::before{
+      height: 0;
+    }
+  }
+}
+.inline{
+  display: inline-block;
+}
+.small-button {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  ::ng-deep * {
+    line-height: initial;
+    font-size: initial;
+    height: 18px;
+    width: 18px;
+    font-size: 18px;
+    bottom: initial;
+
+  }
+}
+.cancel-button{
+  font-weight: 700;
+}
+.date-toggle ::ng-deep svg{
+  position: absolute;
+  left: 0;
+  top: 0;
+}

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

@@ -0,0 +1,86 @@
+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/meta-data';
+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 { FilterType } 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(FilterType.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,73 @@
+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 } from '../../enums/filterTypes';
+import { AllValueOptions, FieldType } from '../../interfaces/meta-data';
+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';
+import { merge, Subject } from 'rxjs';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'tb-filter',
+  templateUrl: './filter.component.html',
+  styleUrl: './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 = FilterType;
+  FieldType = FieldType;
+
+  $filter = input.required<PartialFilter, PartialFilter>({
+    alias: 'filter',
+    transform: (f) => ({ ...f })
+  });
+  $metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)());
+  $allValuesInMeta = computed(() => {
+    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+  close$ = new Subject<void>();
+  done$ = new Subject<void>();
+  close = outputFromObservable(this.close$);
+  done = outputFromObservable(merge(this.done$, this.close$));
+
+  $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.addFilter(filter);
+      this.close$.next();
+    }
+  }
+
+  addFilter(filter: FilterInfo){
+    this.state.addFilter({ ...filter });
+    this.done$.next();
+  }
+}

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

@@ -0,0 +1,171 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, input, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TableStore } from '../../../classes/table-store';
+import { AllValueOptions, FieldType } from '../../../interfaces/meta-data';
+import { CurrencyPipe, DatePipe, KeyValue } from '@angular/common';
+import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
+import { FunctionPipe, SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
+import { isBlankValueFilter, isNotBlankValueFilter } from '../../../services/all-values-filter-creator.service';
+
+@Component({
+  selector: 'tb-in-list-filter',
+  template: `
+    @if($specialBlank(); as specialBlank)
+    {
+      <div>
+        <mat-checkbox [checked]="$specialBlankSelected()" stop-propagation (change)='selectFilterChanged($event, specialBlank)' >
+          {{specialBlank.value}}
+        </mat-checkbox>
+      </div>
+    }
+    @switch ($metaData().fieldType)
+    {
+      @case (FieldType.Enum)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{(item.key | spaceCase)}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.Date)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'shortDate'}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.DateTime)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'short'}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.Currency)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | currency }}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @default
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.key}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [`
+    :host {
+      display: block;
+      max-height: max(50vh, 400px);
+      overflow-y: auto;
+    }
+  `],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InListFilterComponent,
+    multi: true
+  }],
+  imports: [
+    MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
+  ]
+})
+export class InListFilterComponent implements ControlValueAccessor {
+  private ref = inject(ChangeDetectorRef);
+  private tableState = inject(TableStore);
+
+  $values = input<string[]>([], { alias: 'values' });
+  #e = effect(() => this.writeValue(this.$values()));
+  value: (string)[] = [];
+  FieldType = FieldType;
+
+  writeValue(obj: string[]): void {
+    this.value = obj;
+    if(this.value) {
+      const selectedKeys = this.$keyValues().filter(item => this.value.includes(this.getValue(this.$metaData().fieldType, item)));
+      this.$selectedKeys.set(selectedKeys);
+    }
+    this.ref.markForCheck();
+  }
+
+  includes = (value: KeyValue<string, any>, values: KeyValue<string, any>[]) => {
+    return values.map(item => this.getValue(this.$metaData().fieldType, item)).includes(this.getValue(this.$metaData().fieldType, value));
+  }
+
+  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<KeyValue<string, any>[]>([]);
+  $metaData = computed(() => this.tableState.$getMetaData(this.$key())());
+  $allValues = computed(() => {
+    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+  $specialBlank = computed(() => {
+    const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
+    if(!specialBlank) return;
+    return { key: specialBlank, value: 'BLANK' } as KeyValue<string, any>;
+  });
+  $specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)));
+  $keyValues = computed(():
+    KeyValue<string, any>[] => {
+    const metaData = this.$metaData();
+    if(this.$allValues()) {
+      return this.tableState.selectSignal(s => s.allFilters)()[metaData.key].filter(isNotBlankValueFilter).map(f => ({ key: f, value: f }));
+    } else if(metaData?.additional?.filterOptions?.filterableValues ) {
+      return (metaData.additional.filterOptions.filterableValues as []).map(value => ({ key: value, value }));
+    } else if(metaData?.fieldType === FieldType.Enum ) {
+      return Object.entries(metaData.additional!.enumMap!).map(([key, value]) => ({ key: value, value: +key }));
+    }
+    return [];
+  });
+
+  selectFilterChanged($event: MatCheckboxChange, val: KeyValue<string, any>) {
+    if($event.checked) {
+      this.$selectedKeys.update(keys => [...keys, val]);
+    } else {
+      this.$selectedKeys.update(keys => keys.filter( item => item !== val));
+    }
+    this.value = this.$selectedKeys().map(item => this.getValue(this.$metaData().fieldType, item));
+    this.onChange(this.value);
+  }
+
+  getValue(metaDateType: FieldType, val: KeyValue<string, any>) {
+    if(metaDateType === FieldType.Enum) {
+      return val.value;
+    }
+    return val.key;
+  }
+}

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

@@ -0,0 +1,60 @@
+@if($columns(); as displayCols)
+{
+  <span matTooltip="Show/hide columns">
+    <button color="primary" 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 color="primary" mat-icon-button (click)="reset(displayCols)">
+          <mat-icon color="primary">done_all</mat-icon>
+        </button>
+      </span>
+
+      <span matTooltip="Hide all columns">
+        <button color="primary" mat-icon-button (click)="unset(displayCols)">
+          <mat-icon color="primary">cancel</mat-icon>
+        </button>
+      </span>
+    </button>
+
+    <div cdkDropList stop-propagation [cdkDropListLockAxis]="'y'" (cdkDropListDropped)="drop($event)">
+      @for (col of displayCols; track col.key)
+      {
+        <button stop-propagation mat-menu-item cdkDrag [class.isHidden]="!col.isVisible" [cdkDragData]="col">
+        <div style="display: flex; align-items: center;" (click)="col.isVisible = !col.isVisible; emit(displayCols)">
+          @if(col.isVisible)
+          {
+            <button color="primary" 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>
+}