@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

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

@@ -0,0 +1,219 @@
+<mat-toolbar *ngIf="showToolbar" [class.expanded]="filterExpansionPanel.expanded">
+
+  <!-- Refresh -->
+  <button mat-icon-button *ngIf="!mobile"
+          [title]="'COMMON.BTN_REFRESH'|translate"
+          (click)="onRefresh.emit()">
+    <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">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)="onRefresh.emit()">
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <!-- search -->
+            <mat-form-field>
+              <input matInput [placeholder]="'SETTINGS.FILTER.SEARCH'|translate" 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">
+
+      <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>
+          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">
+<!--          <mat-autocomplete-field-->
+<!--            *ngIf="row.id === -1; else readOnlyDefinition"-->
+<!--            floatLabel="never"-->
+<!--            [formControl]="row.validator | formGetControl : 'definition'"-->
+<!--            [config]="autocompleteFields.definition"-->
+<!--            [required]="true"-->
+<!--          ></mat-autocomplete-field>-->
+<!--          <ng-template #readOnlyDefinition>-->
+            {{ row.currentData | propertyGet : 'definition.translatedName' }}
+<!--          </ng-template>-->
+        </td>
+      </ng-container>
+
+      <!-- value column -->
+      <ng-container matColumnDef="value">
+        <th mat-header-cell *matHeaderCellDef>
+          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <app-form-field
+            *ngIf="row.validator | formGetValue: 'id'"
+            floatLabel="never"
+            [definition]="definitionsMapByKey[row.validator | formGetValue: 'id']"
+            [formControl]="row.validator | formGetControl:'value'"
+            [placeholder]="i18nColumnPrefix + 'VALUE' | translate"
+            [required]="true">
+          </app-form-field>
+        </td>
+      </ng-container>
+
+      <!-- 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

@@ -0,0 +1,291 @@
+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 {isNotEmptyArray, isNotNil} from '../../../shared/functions';
+import {FilterFn} from '../../../shared/services/entity-service.class';
+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 {ObjectMap} from '../../../shared/types';
+import {debounceTime, filter, tap} from 'rxjs/operators';
+import {AppFormUtils} from '../form.utils';
+import {MatExpansionPanel} from '@angular/material/expansion';
+
+interface TranslatedFormFieldDefinition extends FormFieldDefinition {
+  translatedName?: string;
+}
+
+@EntityClass({typename: 'PropertyEntity'})
+export class PropertyEntity extends Entity<PropertyEntity, string> {
+  static fromObject: (source: any, opts?: any) => PropertyEntity;
+
+  definition: TranslatedFormFieldDefinition = null;
+  value: any = null;
+
+  fromObject(source: any) {
+    super.fromObject(source);
+    this.id = source.definition?.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;
+
+  // availableDefinitions$ = new BehaviorSubject<TranslatedFormFieldDefinition[]>([]);
+  definitionsMapByKey: FormFieldDefinitionMap = {};
+  translationsByKey: ObjectMap<string> = {};
+  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.translatedName'}
+      }),
+      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 options map
+    this.definitionsMapByKey = {};
+    this.definitions?.forEach(o => {
+      this.definitionsMapByKey[o.key] = o;
+    });
+
+    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;
+  }
+
+  setValue(value: PropertyEntity[], opts?: { emitEvent?: boolean }) {
+
+    // Update translations
+    this.translationsByKey = isNotEmptyArray(this.definitions) ? this.translate.instant(this.definitions.map(def => def.label)) : {};
+
+    // Build entities
+    const source = (value || []).slice();
+    const target: PropertyEntity[] = [];
+    target.push(
+      ...this.definitions
+        .map(definition => PropertyEntity.fromObject({
+          id: definition.key,
+          // translate definition label
+          definition: this.toTranslatedFormFieldDefinition(definition),
+          // get user value or default value
+          value: this.toValue(source, definition)
+        }))
+    );
+
+    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.onRefresh.emit(event);
+    if (this.filterExpansionPanel && this.filterPanelFloating) this.filterExpansionPanel.close();
+  }
+
+  toTranslatedFormFieldDefinition = (definition: FormFieldDefinition): TranslatedFormFieldDefinition =>
+    ({...definition, translatedName: this.translationsByKey[definition.label]});
+
+  resetProperty(event: UIEvent, row: TableElement<PropertyEntity>) {
+    event?.preventDefault();
+    row.validator.patchValue({ value: row.currentData.definition.defaultValue });
+    this.markRowAsDirty();
+  }
+
+  protected toValue(values: PropertyEntity[], definition: FormFieldDefinition): any {
+    const value = values.find(v => v.id === definition.key)?.value;
+    return isNotNil(value) ? value : definition.defaultValue;
+  }
+}

package/src/app/core/form/properties/property.validator.ts

@@ -0,0 +1,22 @@
+import {Directive} from '@angular/core';
+import {UntypedFormBuilder, Validators} from '@angular/forms';
+import {Property} from '../../../shared/types';
+import {AppValidatorService} from '../../services/validator/base.validator.class';
+
+@Directive()
+export class PropertyValidator extends AppValidatorService<Property> {
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder
+  ) {
+    super(formBuilder, null);
+  }
+
+  getFormGroupConfig(data?: Property): { [p: string]: any } {
+    return {
+      key: [data && data.key || null, Validators.compose([Validators.required, Validators.max(50)])],
+      value: [data && data.value || null, Validators.required]
+    };
+  }
+}
+

package/src/app/core/form/properties/testing/properties-form.test.html

@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar color="primary">
+
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Properties form test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <form [formGroup]="form">
+    <app-properties-form #propertiesForm
+                         formArrayName="properties"
+                         [definitions]="propertyDefinitions" [options]="{allowEmptyArray: true}">
+
+    </app-properties-form>
+  </form>
+</ion-content>

package/src/app/core/form/properties/testing/properties-form.test.ts

@@ -0,0 +1,102 @@
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {FormFieldDefinition} from '../../../../shared/form/field.model';
+import {AppPropertiesForm} from '../properties.form';
+import {StatusIds} from '../../../services/model/model.enum';
+import {suggestFromArray} from '../../../../shared/services';
+import {LoadResult} from '../../../../shared/services/entity-service.class';
+import {ObjectMap} from '../../../../shared/types';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+const TEST_PROPERTIES = Object.freeze({
+
+  // Entity
+  ENTITY: <FormFieldDefinition>{
+    key: 'sumaris.properties.entity',
+    label: 'Select one entity',
+    type: 'entity',
+    autocomplete: {
+      filter: {
+        entityName: 'LocationLevel',
+        statusIds: [StatusIds.DISABLE, StatusIds.ENABLE]
+      },
+      attributes: ['label', 'name']
+    },
+    defaultValue: null
+  },
+
+  // Entities
+  ENTITIES: <FormFieldDefinition>{
+    key: 'sumaris.properties.entities',
+    label: 'Select many entities',
+    type: 'entities',
+    autocomplete: {
+      filter: {
+        entityName: 'LocationLevel',
+        statusIds: [StatusIds.DISABLE, StatusIds.ENABLE]
+      },
+      attributes: ['label', 'name']
+    },
+    defaultValue: null
+  }
+});
+
+
+const FAKE_ENTITIES = [
+  {id: 1, label: 'AAA', name: 'Item A', description: 'Very long description A', comments: 'Very very long comments... again for A'},
+  {id: 2, label: 'BBB', name: 'Item B', description: 'Very long description B', comments: 'Very very long comments... again for B'},
+  {id: 3, label: 'CCC', name: 'Item C', description: 'Very long description C', comments: 'Very very long comments... again for C'}
+];
+
+@Component({
+  selector: 'app-properties-form-test',
+  templateUrl: './properties-form.test.html'
+})
+export class PropertiesFormTestPage implements OnInit, AfterViewInit {
+
+  propertyDefinitions: FormFieldDefinition[];
+  i18nFieldPrefix: string;
+  form: FormGroup;
+
+  @ViewChild('propertiesForm', {read: AppPropertiesForm, static: true}) propertiesForm: AppPropertiesForm;
+
+  constructor(
+    protected formBuilder: FormBuilder
+  ) {
+    this.i18nFieldPrefix = ''
+    this.form = formBuilder.group({
+      properties: formBuilder.array([
+        this.formBuilder.group({
+        key: [null, Validators.compose([Validators.required, Validators.max(50)])],
+        value: [null, Validators.required]
+      })])
+    })
+
+    this.propertyDefinitions = Object.values(TEST_PROPERTIES).map(def => {
+      if (def.type === 'entity' || def.type === 'entities') {
+        def = Object.assign({}, def); // Copy
+        def.autocomplete = {
+          suggestFn: (value, filter) => this.suggestEntity(value, filter),
+          ...def.autocomplete
+        };
+      }
+      return def;
+    });
+  }
+
+  ngOnInit() {
+
+    this.propertiesForm.markAsReady();
+    this.propertiesForm.enable();
+  }
+
+  ngAfterViewInit() {
+    const properties: ObjectMap = {};
+    properties[TEST_PROPERTIES.ENTITIES.key] = FAKE_ENTITIES[0];
+    this.propertiesForm.setValue(properties);
+  }
+
+  protected async suggestEntity(value: any, filter: any): Promise<LoadResult<any>> {
+    return suggestFromArray(FAKE_ENTITIES, value, filter);
+  }
+
+}

package/src/app/core/form/properties/testing/properties-form.testing.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {PropertiesFormTestPage} from './properties-form.test';
+import {SharedModule} from '../../../../shared/shared.module';
+import {CoreModule} from '../../../core.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    CoreModule,
+    TranslateModule.forChild()
+  ],
+  declarations: [
+    PropertiesFormTestPage
+  ],
+  exports: [
+    RouterModule,
+    PropertiesFormTestPage
+  ]
+})
+export class PropertiesFormTestingModule {
+}