@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/core/form/properties/properties.table.html

@@ -1,228 +0,0 @@
-<mat-toolbar *ngIf="showToolbar" [class.expanded]="filterExpansionPanel.expanded">
-  <!-- Refresh -->
-  <button mat-icon-button *ngIf="!mobile" [title]="'COMMON.BTN_REFRESH' | translate" (click)="emitRefresh()">
-    <mat-icon>refresh</mat-icon>
-  </button>
-
-  <ion-item *ngIf="!mobile && error; let error" lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" [innerHTML]="error | translate"></ion-label>
-  </ion-item>
-
-  <div class="toolbar-spacer"></div>
-
-  <!-- Reset filter -->
-  <button mat-icon-button (click)="resetFilter()" *ngIf="filterCriteriaCount">
-    <mat-icon color="accent">filter_list_alt</mat-icon>
-    <mat-icon class="icon-secondary" style="left: 16px; top: 5px; font-weight: bold">close</mat-icon>
-  </button>
-
-  <!-- Show filter -->
-  <button mat-icon-button (click)="filterExpansionPanel.toggle()">
-    <mat-icon
-      [matBadge]="filterCriteriaCount"
-      [matBadgeHidden]="filterIsEmpty"
-      matBadgeColor="accent"
-      matBadgeSize="small"
-      matBadgePosition="above after"
-      aria-hidden="false"
-    >
-      filter_list_alt
-    </mat-icon>
-  </button>
-</mat-toolbar>
-
-<ion-content class="ion-no-padding">
-  <!-- search -->
-  <mat-expansion-panel
-    #filterExpansionPanel
-    class="filter-panel"
-    [class.ion-no-padding]="mobile"
-    [class.filter-panel-floating]="filterPanelFloating"
-  >
-    <form class="form-container" [formGroup]="filterForm" (ngSubmit)="emitRefresh()">
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <!-- search -->
-            <mat-form-field>
-              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>
-              <input matInput formControlName="searchText" />
-
-              <button
-                mat-icon-button
-                matSuffix
-                tabindex="-1"
-                type="button"
-                (click)="clearControlValue($event, filterForm.controls.searchText)"
-                [hidden]="filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value"
-              >
-                <mat-icon>close</mat-icon>
-              </button>
-            </mat-form-field>
-          </ion-col>
-
-          <ion-col>
-            <mat-boolean-field
-              [style]="'checkbox'"
-              formControlName="notDefaultOnly"
-              [placeholder]="'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate"
-              floatLabel="always"
-            ></mat-boolean-field>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </form>
-
-    <mat-action-row>
-      <!-- Counter  -->
-      <ion-label
-        [hidden]="(loadingSubject | async) || filterForm.dirty"
-        [color]="empty && 'danger'"
-        class="ion-padding"
-      >
-        {{
-          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')
-            | translate
-              : {
-                  count: (totalRowCount | numberFormat),
-                }
-        }}
-      </ion-label>
-
-      <div class="toolbar-spacer"></div>
-
-      <button
-        mat-icon-button
-        color="accent"
-        *ngIf="filterPanelFloating"
-        (click)="toggleFilterPanelFloating()"
-        class="hidden-xs hidden-sm hidden-md"
-        [title]="(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate"
-      >
-        <mat-icon>
-          <span style="transform: rotate(90deg)">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>
-        </mat-icon>
-      </button>
-
-      <!-- Close panel -->
-      <ion-button mat-button fill="clear" color="dark" (click)="closeFilterPanel()" [disabled]="loadingSubject | async">
-        <ion-text translate>COMMON.BTN_CLOSE</ion-text>
-      </ion-button>
-
-      <!-- Search button -->
-      <ion-button
-        mat-button
-        [color]="filterForm.dirty ? 'tertiary' : 'dark'"
-        [fill]="filterForm.dirty ? 'solid' : 'clear'"
-        (click)="applyFilterAndClosePanel($event)"
-        [disabled]="loadingSubject | async"
-      >
-        <ion-text translate>COMMON.BTN_APPLY</ion-text>
-      </ion-button>
-    </mat-action-row>
-  </mat-expansion-panel>
-
-  <ion-refresher slot="fixed" *ngIf="mobile" (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-
-  <!-- table -->
-  <div class="table-container">
-    <table
-      #table
-      mat-table
-      matSort
-      matSortDisableClear
-      [dataSource]="dataSource"
-      [matSortActive]="defaultSortBy"
-      [matSortDirection]="defaultSortDirection"
-      [trackBy]="trackByFn"
-      [style.--mat-row-height]="'52px'"
-    >
-      <ng-container matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="true"></th>
-        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="true"></td>
-      </ng-container>
-
-      <!-- id column (hidden) -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!debug"></th>
-        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!debug">
-          {{ row.currentData.id }}
-        </td>
-      </ng-container>
-
-      <!-- definition column -->
-      <ng-container matColumnDef="definition">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="ion-padding-start">
-          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row" class="ion-padding-start">
-          {{ row.currentData | propertyGet: 'definition.label' }}
-        </td>
-      </ng-container>
-
-      <!-- value column -->
-      <app-row-field
-        name="value"
-        floatLabel="never"
-        [definitionFn]="definitionByRow"
-        [headerI18n]="i18nColumnPrefix + 'VALUE'"
-        [required]="true"
-      ></app-row-field>
-
-      <!-- Actions buttons column -->
-      <app-actions-column
-        [stickyEnd]="true"
-        [canCancel]="false"
-        [canDelete]="false"
-        [dirtyIcon]="false"
-        [cellTemplate]="cellInjection"
-      >
-        <!-- cell injection-->
-        <ng-template #cellInjection let-row>
-          <button
-            type="button"
-            mat-icon-button
-            *ngIf="
-              !mobile &&
-              !disabled &&
-              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue
-            "
-            [class.visible-hover-row]="!mobile"
-            [tabindex]="-1"
-            [title]="'SETTINGS.BTN_RESET_PROPERTY' | translate"
-            (click)="resetProperty($event, row)"
-          >
-            <mat-icon>undo</mat-icon>
-          </button>
-        </ng-template>
-      </app-actions-column>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        [class.mat-row-selected]="row.editing"
-        [class.mat-row-error]="row.validator?.invalid"
-        [class.mat-row-dirty]="row.validator?.dirty"
-        (click)="clickRow($event, row)"
-        (keydown.escape)="escapeEditingRow($event)"
-        [cdkTrapFocus]="row.validator?.invalid"
-      ></tr>
-    </table>
-
-    <ng-container *ngIf="loadingSubject | async; else noResult">
-      <ion-item>
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-item>
-    </ng-container>
-
-    <ng-template #noResult>
-      <ion-item *ngIf="totalRowCount === 0">
-        <ion-text color="danger" class="text-italic" translate>COMMON.NO_RESULT</ion-text>
-      </ion-item>
-    </ng-template>
-  </div>
-</ion-content>

package/src/app/core/form/properties/properties.table.ts

@@ -1,275 +0,0 @@
-import { AppInMemoryTable } from '../../table/memory-table.class';
-import { ChangeDetectionStrategy, Component, Directive, Inject, Injector, Input, OnInit, ViewChild } from '@angular/core';
-import { RESERVED_END_COLUMNS, RESERVED_START_COLUMNS } from '../../table/table.model';
-import { InMemoryEntitiesService } from '../../../shared/services/memory-entity-service.class';
-import { Entity, EntityAsObjectOptions, EntityUtils } from '../../services/model/entity.model';
-import { AppValidatorService } from '../../services/validator/base.validator.class';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { FormFieldDefinition, FormFieldDefinitionMap } from '../../../shared/form/field.model';
-import { isNotNil, splitByProperty } from '../../../shared/functions';
-import { Environment, ENVIRONMENT } from '../../../../environments/environment.class';
-import { TableElement } from '@e-is/ngx-material-table';
-import { EntityClass } from '../../services/model/entity.decorators';
-import { EntityFilter } from '../../services/model/filter.model';
-import { FilterFn, Property } from '../../../shared/types';
-import { debounceTime, filter, tap } from 'rxjs/operators';
-import { AppFormUtils } from '../form.utils';
-import { MatExpansionPanel } from '@angular/material/expansion';
-
-@EntityClass({ typename: 'PropertyEntity' })
-export class PropertyEntity extends Entity<PropertyEntity, string> implements Property {
-  static fromObject: (source: any, opts?: any) => PropertyEntity;
-
-  definition: FormFieldDefinition = null;
-  value: any = null;
-
-  get key(): string {
-    return this.definition?.key || this.id;
-  }
-
-  fromObject(source: any) {
-    super.fromObject(source);
-    this.id = source.definition?.key ?? source.key ?? source.id;
-    this.definition = source.definition;
-    this.value = source.value;
-  }
-
-  asObject(opts?: EntityAsObjectOptions): any {
-    const target = super.asObject(opts);
-    target.id = this.definition.key;
-    delete target.definition;
-    return target;
-  }
-}
-
-export class PropertyEntityFilter extends EntityFilter<PropertyEntityFilter, PropertyEntity> {
-  static fromObject: (source, opts?: any) => PropertyEntityFilter;
-
-  searchText: string;
-  notDefaultOnly = false;
-
-  fromObject(source: any) {
-    super.fromObject(source);
-    this.searchText = source.searchText;
-    this.notDefaultOnly = source.notDefaultOnly;
-  }
-
-  asObject(opts?: EntityAsObjectOptions): any {
-    return super.asObject(opts);
-  }
-
-  protected buildFilter(): FilterFn<PropertyEntity>[] {
-    const filterFns = super.buildFilter();
-
-    const searchTextFilter = EntityUtils.searchTextFilter('definition.translatedName', this.searchText);
-    if (searchTextFilter) filterFns.push(searchTextFilter);
-
-    if (this.notDefaultOnly) {
-      filterFns.push((data) => isNotNil(data.value) && data.definition.defaultValue !== data.value);
-    }
-
-    return filterFns;
-  }
-
-  protected isCriteriaNotEmpty(key: string, value: any): boolean {
-    if (key === 'notDefaultOnly') return value === true;
-    return super.isCriteriaNotEmpty(key, value);
-  }
-}
-
-@Directive()
-export class PropertyEntityValidator extends AppValidatorService<PropertyEntity> {
-  constructor(protected formBuilder: UntypedFormBuilder) {
-    super(formBuilder, null);
-  }
-
-  getFormGroupConfig(data?: PropertyEntity): { [p: string]: any } {
-    return {
-      id: [data?.id || null],
-      definition: [data?.definition || null, Validators.required],
-      value: [data?.value || null],
-    };
-  }
-}
-
-@Component({
-  selector: 'app-properties-table',
-  templateUrl: 'properties.table.html',
-  styleUrls: ['properties.table.scss'],
-  providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AppPropertiesTable extends AppInMemoryTable<PropertyEntity, PropertyEntityFilter, string> implements OnInit {
-  @Input() definitions: FormFieldDefinition[];
-  @Input() showToolbar = true;
-  @ViewChild(MatExpansionPanel, { static: true }) filterExpansionPanel: MatExpansionPanel;
-
-  definitionsMapByKey: FormFieldDefinitionMap = {};
-  filterForm: UntypedFormGroup;
-  filterCriteriaCount = 0;
-  filterPanelFloating = true;
-
-  constructor(
-    protected injector: Injector,
-    protected formBuilder: UntypedFormBuilder,
-    protected validatorService: PropertyEntityValidator,
-    @Inject(ENVIRONMENT) environment: Environment
-  ) {
-    super(
-      injector,
-      [...RESERVED_START_COLUMNS, 'definition', 'value', ...RESERVED_END_COLUMNS],
-      PropertyEntity,
-      new InMemoryEntitiesService(PropertyEntity, PropertyEntityFilter, {
-        sortByReplacement: { definition: 'definition.label' },
-      }),
-      validatorService
-    );
-
-    this.inlineEdition = true;
-    this.defaultSortBy = 'definition';
-    this.defaultSortDirection = 'asc';
-    this.debug = !environment?.production;
-
-    this.filterForm = formBuilder.group({
-      searchText: [],
-      notDefaultOnly: [null],
-    });
-
-    this.autoLoad = false;
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-
-    // Fill definitions map
-    this.definitions = (this.definitions || []).map((def) => {
-      return {
-        ...def,
-        label: this.translate.instant(def.label),
-      };
-    });
-    this.definitionsMapByKey = splitByProperty(this.definitions, 'key');
-
-    this.registerCellValueChanges('definition').subscribe((definition) => {
-      if (isNotNil(definition) && this.editedRow?.id === -1) {
-        this.editedRow.validator.patchValue({ id: definition.key, value: definition.defaultValue });
-      }
-    });
-
-    this.registerCellValueChanges('value').subscribe(() => {
-      this.markAsDirty();
-    });
-
-    this.registerSubscription(
-      this.filterForm.valueChanges
-        .pipe(
-          debounceTime(250),
-          filter((_) => {
-            const valid = this.filterForm.valid;
-            if (!valid && this.debug) AppFormUtils.logFormErrors(this.filterForm);
-            return valid;
-          }),
-          // Update the filter
-          tap((json) => this.setFilter(json))
-        )
-        .subscribe()
-    );
-
-    this.resetFilter();
-
-    this.markAsReady();
-  }
-
-  get value(): PropertyEntity[] {
-    let values = super.value || [];
-
-    // remove unset options
-    values = values.filter((property) => isNotNil(property.value !== property.definition.defaultValue));
-
-    return values;
-  }
-
-  set value(data: PropertyEntity[]) {
-    super.value = data;
-  }
-
-  definitionByRow = (row: TableElement<PropertyEntity>): FormFieldDefinition => this.definitionsMapByKey[row.currentData.id];
-
-  setValue(value: PropertyEntity[], opts?: { emitEvent?: boolean }) {
-    // Build entities
-    const target: PropertyEntity[] = this.definitions.map((definition) => {
-      const property = (value || [])?.find((source) => source.key === definition.key);
-      const propertyValue = property?.value ?? definition.defaultValue;
-      // Convert to entity
-      return PropertyEntity.fromObject({
-        id: definition.key,
-        definition,
-        // get user value or default value
-        value: propertyValue,
-      });
-    });
-
-    super.setValue(target, opts);
-  }
-
-  clearControlValue(event: Event, formControl: AbstractControl): boolean {
-    if (event) event.stopPropagation(); // Avoid to enter input the field
-    formControl.setValue(null);
-    return false;
-  }
-
-  resetFilter(value?: any, opts?: { emitEvent: boolean }) {
-    const f = <PropertyEntityFilter>{ searchText: null, notDefaultOnly: false, ...value };
-    this.filterForm.reset(f, opts);
-    this.setFilter(f || null, opts);
-    this.filterCriteriaCount = 0;
-    if (this.filterExpansionPanel && this.filterPanelFloating) this.filterExpansionPanel.close();
-    this.resetError();
-  }
-
-  setFilter(filter: PropertyEntityFilter, opts?: { emitEvent?: boolean }) {
-    filter = this.dataSource.dataService.asFilter(filter);
-
-    // Update criteria count
-    const criteriaCount = filter.countNotEmptyCriteria();
-    if (criteriaCount !== this.filterCriteriaCount) {
-      this.filterCriteriaCount = criteriaCount;
-      this.markForCheck();
-    }
-
-    // Update the form content
-    if (this.filterForm && (!opts || opts.emitEvent !== false)) {
-      this.filterForm.patchValue(filter.asObject(), { emitEvent: false });
-    }
-
-    super.setFilter(filter as PropertyEntityFilter, opts);
-  }
-
-  get filterIsEmpty(): boolean {
-    return this.filterCriteriaCount === 0;
-  }
-
-  toggleFilterPanelFloating() {
-    this.filterPanelFloating = !this.filterPanelFloating;
-    this.markForCheck();
-  }
-
-  closeFilterPanel() {
-    if (this.filterExpansionPanel) this.filterExpansionPanel.close();
-    this.filterPanelFloating = true;
-  }
-
-  applyFilterAndClosePanel(event?: Event) {
-    const filter = this.filterForm.value;
-    this.setFilter(filter, { emitEvent: false });
-    this.emitRefresh(event);
-    if (this.filterExpansionPanel && this.filterPanelFloating) this.filterExpansionPanel.close();
-  }
-
-  resetProperty(event: UIEvent, row: TableElement<PropertyEntity>) {
-    event?.preventDefault();
-    row.validator.patchValue({ value: row.currentData.definition.defaultValue });
-    this.confirmEditCreate();
-    this.markRowAsDirty();
-  }
-}