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

package/src/app/core/form/list/list.form.scss

@@ -1,40 +0,0 @@
-:host {
-  --ion-item-background-selected: var(--ion-color-secondary100);
-  --ion-item-color-selected: var(--ion-color-secondary100-contrast);
-}
-ion-item.disabled {
-  ion-label {
-    color: var(--ion-color-medium-shade, grey);
-  }
-}
-
-ion-item {
-  --min-height: 48px;
-  background-color: var(--ion-item-background);
-
-  ion-text,
-  ion-label {
-    color: var(--ion-item-color);
-  }
-
-  .action-buttons {
-    visibility: hidden;
-    display: none;
-  }
-
-  &:hover {
-    height: var(--min-height);
-    --ion-item-background-color: var(--ion-color-light);
-    --ion-item-color: var(--ion-color-light-contrast);
-    .action-buttons {
-      margin-top: -1px;
-      visibility: visible;
-      display: block;
-    }
-  }
-
-  &.selected {
-    --ion-item-background-color-hover: var(--ion-item-background-selected) !important;
-    --ion-item-color-hover: var(--ion-item-color-selected) !important;
-  }
-}

package/src/app/core/form/list/list.form.ts

@@ -1,278 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Injector,
-  Input,
-  OnInit,
-  Optional,
-  Output
-} from '@angular/core';
-import {AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, FormGroupDirective, Validators} from '@angular/forms';
-import {referentialToString} from '../../services/model/referential.model';
-import {isNil} from '../../../shared/functions';
-import {DateAdapter} from '@angular/material/core';
-import {Moment} from 'moment';
-import {LocalSettingsService} from '../../services/local-settings.service';
-import {AppForm} from '../form.class';
-import {AppFormUtils, FormArrayHelper, FormArrayHelperOptions} from '../form.utils';
-import {SelectionModel} from '@angular/cdk/collections';
-import {Observable} from 'rxjs';
-import {Color} from '@ionic/core';
-
-export declare interface ItemButton<T = any> {
-  title?: string;
-  click: (event: Event, item: T, index: number) => void;
-  icon: string;
-  color?: Color;
-  disabled?: Observable<boolean>;
-}
-
-export declare type AppListFormOptions<T> = FormArrayHelperOptions & {
-  allowMultipleSelection?: boolean;
-  buttons?: ItemButton<T>[];
-};
-
-@Component({
-  selector: 'app-list-form',
-  templateUrl: 'list.form.html',
-  styleUrls: ['./list.form.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AppListForm<T = any> extends AppForm<T[]> implements OnInit {
-  helper: FormArrayHelper<T>;
-  selection = new SelectionModel<T>(true, []);
-
-  @Input() formArrayName: string;
-  @Input() formArray: UntypedFormArray;
-  @Input() options: AppListFormOptions<T>;
-
-  @Input('displayWith') displayWithFn: (item: any) => string = referentialToString;
-  @Input('equals') equalsFn: (v1: T, v2: T) => boolean;
-
-  @Output() onNewItem = new EventEmitter<Event>();
-  @Output() selectionChanges = new EventEmitter<T[]>(true);
-
-  set value(data: T[]) {
-    this.setValue(data);
-  }
-
-  get value(): T[] {
-    return this.formArray.value as T[];
-  }
-
-  get itemControls(): UntypedFormGroup[] {
-    return this.formArray && this.formArray.controls as UntypedFormGroup[];
-  }
-
-  get length(): number {
-    return this.helper ? this.helper.size() : 0;
-  }
-
-  get empty(): boolean {
-    return this.length === 0;
-  }
-
-  get touched(): boolean {
-    return this.formArray && (this.formArray.touched || (this.formArray.controls || []).findIndex(c => c.touched) !== -1);
-  }
-
-  get untouched(): boolean {
-    return !this.formArray || this.formArray.untouched || (this.formArray.controls || []).findIndex(c => c.touched) === -1;
-  }
-
-  get dirty(): boolean {
-    return this.formArray && this.formArray.dirty;
-  }
-
-  get invalid(): boolean {
-    return !this.formArray || this.formArray.invalid;
-  }
-
-  get valid(): boolean {
-    return this.formArray && this.formArray.valid;
-  }
-
-  get pending(): boolean {
-    return !this.formArray || this.formArray.pending;
-  }
-
-  markAsTouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
-    AppFormUtils.markAsTouched(this.formArray, opts);
-    if (!opts || opts.emitEvent !== false) this.markForCheck();
-  }
-
-  markAllAsTouched(opts?: { emitEvent?: boolean }) {
-    AppFormUtils.markAllAsTouched(this.formArray, opts);
-    if (!opts || opts.emitEvent !== false) this.markForCheck();
-  }
-
-  constructor(
-    protected injector: Injector,
-    protected formBuilder: UntypedFormBuilder,
-    protected dateAdapter: DateAdapter<Moment>,
-    protected settings: LocalSettingsService,
-    protected cd: ChangeDetectorRef,
-    @Optional() private formGroupDir: FormGroupDirective
-  ) {
-    super(injector, null);
-
-    //this.debug = !environment.production;
-  }
-
-  ngOnInit() {
-
-    this.options = {
-      allowEmptyArray: true,
-      allowMultipleSelection: true,
-      buttons: [],
-      ...this.options};
-
-    // Retrieve the form
-    const form = (this.formArray && this.formArray.parent as UntypedFormGroup || this.formGroupDir && this.formGroupDir.form || this.formBuilder.group({}));
-    this.setForm(form);
-
-    this.formArray = this.formArray || this.formArrayName && form.get(this.formArrayName) as UntypedFormArray;
-    this.formArrayName = this.formArrayName || this.formArray && Object.keys(form.controls).find(key => form.get(key) === this.formArray) || 'properties';
-    if (!this.formArray) {
-      console.warn(`Missing array control '${this.formArrayName}'. Will create it!`);
-      this.formArray = this.formBuilder.array([]);
-      this.form.addControl(this.formArrayName, this.formArray);
-    }
-
-    this.equalsFn = this.equalsFn || ((v1: any, v2: any) => (isNil(v1) && isNil(v2)) || v1 === v2);
-    this.helper = new FormArrayHelper<T>(
-      this.formArray,
-      (value) => this.createControl(value),
-      this.equalsFn,
-      (value) => isNil(value),
-      this.options
-    );
-
-    super.ngOnInit();
-  }
-
-  ngOnDestroy() {
-    super.ngOnDestroy();
-
-    this.onNewItem.complete();
-    this.onNewItem.unsubscribe();
-    this.selectionChanges.complete();
-    this.selectionChanges.unsubscribe();
-  }
-
-  setValue(data: T[] | any) {
-    data = data || [];
-
-    if (this.helper) {
-      this.helper.resize(data.length);
-      this.helper.formArray.patchValue(data, {emitEvent: false});
-    }
-    else {
-      console.warn('TODO: cannot applyied setValue() on fromArray, because formArrayHelper not exists yet !');
-    }
-
-    this.selection.clear();
-    this.markAsPristine();
-    this.markAsLoaded();
-  }
-
-  /** Whether the number of selected elements matches the total number of rows. */
-  isAllSelected() {
-    return this.selection.selected.length === this.length;
-  }
-
-  async masterToggle(opts?: {emitEvent?: boolean}) {
-    if (this.loading) return;
-    if (this.isAllSelected()) {
-      this.selection.clear();
-    } else {
-      const items = this.value;
-      items.forEach(item => this.selection.select(item));
-    }
-
-    if (!opts || opts.emitEvent !== false) {
-      this.selectionChanges.emit(this.selection.selected);
-    }
-  }
-
-  async onItemClick(event: MouseEvent, item: T, opts?: {emitEvent?: boolean}) {
-
-    if (!item || event.defaultPrevented || !this.selectionChanges.observers.length) return;
-
-    // Multiple selection (if ctrl+click)
-    if (event.ctrlKey && this.options.allowMultipleSelection) {
-      this.selection.toggle(item);
-    }
-    else {
-      // Unselect all
-
-      // Select the item (or reselect)
-      if (!this.selection.isSelected(item) || (this.options.allowMultipleSelection && this.selection.selected.length > 1)) {
-        this.selection.clear();
-        this.selection.select(item);
-      }
-      // Unselect all
-      else {
-        this.selection.clear();
-      }
-    }
-
-    if (!opts || opts.emitEvent !== false) {
-      this.selectionChanges.emit(this.selection.selected);
-    }
-  }
-
-  async onItemButtonClick(button: ItemButton, event: MouseEvent, item: T, index: number) {
-    if (button.click) button.click(event, item, index);
-    await this.onItemClick(event, item);
-  }
-
-  hasSelection(): boolean {
-    return this.selection.hasValue();
-  }
-
-  onNewClick(event) {
-    this.onNewItem.emit(event);
-  }
-
-  add(value: T, opts?: {emitEvent?: boolean}) {
-    const done = this.helper.add(value, {emitEvent: true});
-    if (done) {
-      if (!this.options.allowMultipleSelection) {
-        this.selection.clear();
-      }
-      this.selection.toggle(value);
-      this.markForCheck();
-
-      if (!opts || opts.emitEvent !== false) {
-        this.selectionChanges.emit(this.selection.selected);
-      }
-    }
-  }
-
-  removeAt(index: number) {
-    const item = this.helper.at(index).value;
-    if (this.selection.isSelected(item)) {
-      this.selection.deselect(item);
-    }
-    this.helper.removeAt(index);
-  }
-
-  displayWith(value: T): string {
-    return this.displayWithFn ? this.displayWithFn(value) : (value as any);
-  }
-
-  /* -- protected methods -- */
-
-  protected createControl(data?: any): AbstractControl {
-    return this.formBuilder.control(data || null, Validators.required);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-
-}
-

package/src/app/core/form/list/list.module.ts

@@ -1,25 +0,0 @@
-import {NgModule} from '@angular/core';
-import {SharedModule} from '../../../shared/shared.module';
-import {AppListForm} from './list.form';
-import {TranslateModule} from '@ngx-translate/core';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    TranslateModule.forChild()
-  ],
-
-  declarations: [
-    // Other components
-    AppListForm
-  ],
-  exports: [
-    TranslateModule,
-
-    // Components
-    AppListForm,
-  ]
-})
-export class AppListFormModule {
-
-}

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

@@ -1,129 +0,0 @@
-
-<!-- Properties -->
-<form [formGroup]="form" class="form-container">
-  <ion-grid *ngIf="!loading; else propertiesSkeleton"
-            formArrayName="properties" class="ion-no-padding" >
-    <ion-row class="ion-no-padding">
-      <ion-col class="ion-no-padding ion-align-self-end" size="12">
-        <span class="toolbar-spacer"></span>
-
-        <!-- Show more options -->
-        <ion-button color="light" *ngIf="formArray?.length === 0"
-                    [title]="'SETTINGS.BTN_SHOW_MORE_HELP'|translate"
-                    (click)="helper.add()">
-          <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>
-          <mat-icon slot="end">arrow_drop_down</mat-icon>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-
-    <ng-container *ngFor="let fieldForm of fieldForms; let i=index">
-      <ion-row class="ion-no-padding" [formGroupName]="i">
-
-        <!-- property key -->
-        <ion-col size="6" class="ion-no-padding">
-          <mat-form-field floatLabel="never" *ngIf="fieldForm|formGetControl:'key' as control">
-            <mat-select [formControl]="control"
-                        [placeholder]="'SETTINGS.PROPERTY_KEY'|translate"
-                        (selectionChange)="updateDefinitionAt(i)"
-                        [tabindex]="20+i*2"
-                        required>
-
-              <!-- When option's key not a well known option, add it as first select option -->
-              <mat-option *ngIf="isUnknownField(fieldForm)" [value]="control.value">
-                {{control.value}}
-              </mat-option>
-
-              <mat-option *ngFor="let item of definitions" [value]="item.key">{{ item.label | translate }}
-              </mat-option>
-
-            </mat-select>
-
-            <mat-error *ngIf="control.hasError('required') && !helper.isLast(i)"
-                       translate>ERROR.FIELD_REQUIRED
-            </mat-error>
-          </mat-form-field>
-        </ion-col>
-
-        <!-- property value -->
-        <ion-col class="ion-no-padding" padding-left >
-          <app-form-field *ngIf="getDefinitionAt(i); let definition; else unknownValue"
-                          floatLabel="never"
-                          [definition]="definition"
-                          [formControl]="fieldForm|formGetControl:'value'"
-                          [placeholder]="'SETTINGS.PROPERTY_VALUE' | translate"
-                          [chipColor]="chipColor"
-                          [required]="true"
-                          [tabindex]="20+i*2 + 1">
-          </app-form-field>
-          <ng-template #unknownValue>
-            <mat-form-field floatLabel="never">
-              <input type="text" matInput
-                     [placeholder]="'SETTINGS.PROPERTY_VALUE' | translate"
-                     [formControl]="fieldForm|formGetControl:'value'"
-                     [required]="true"
-                     [tabindex]="20+i*2 + 1">
-            </mat-form-field>
-          </ng-template>
-        </ion-col>
-
-        <ion-col size="auto" class="ion-no-padding">
-          <button type="button" mat-icon-button color="light"
-                  [disabled]="disabled"
-                  [title]="'COMMON.BTN_DELETE'|translate"
-                  (click)="removeAt(i)">
-            <mat-icon>close</mat-icon>
-          </button>
-          <button [hidden]="!helper.isLast(i)"
-                  type="button"
-                  mat-icon-button
-                  color="light"
-                  [disabled]="disabled"
-                  [title]="'SETTINGS.BTN_ADD_PROPERTY'|translate"
-                  (click)="helper.add()">
-            <mat-icon>add</mat-icon>
-          </button>
-        </ion-col>
-      </ion-row>
-    </ng-container>
-  </ion-grid>
-</form>
-
-<ng-template #propertiesSkeleton>
-
-  <ion-grid class="ion-no-padding">
-    <ng-container *ngTemplateOutlet="propertyRowSkeleton"></ng-container>
-    <ng-container *ngTemplateOutlet="propertyRowSkeleton"></ng-container>
-    <ng-container *ngTemplateOutlet="propertyRowSkeleton"></ng-container>
-  </ion-grid>
-
-</ng-template>
-
-<ng-template #propertyRowSkeleton>
-
-  <ion-row>
-    <!-- property key -->
-    <ion-col>
-      <mat-form-field>
-        <input matInput hidden>
-        <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-        <ion-icon name="arrow-dropdown" matSuffix></ion-icon>
-      </mat-form-field>
-    </ion-col>
-    <!-- value -->
-    <ion-col>
-      <mat-form-field>
-        <input matInput hidden>
-        <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-      </mat-form-field>
-    </ion-col>
-    <!-- buttons -->
-    <ion-col size="2">
-      <button type="button" mat-icon-button color="light"
-              [disabled]="true">
-        <mat-icon>close</mat-icon>
-      </button>
-    </ion-col>
-  </ion-row>
-
-</ng-template>

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

@@ -1,147 +0,0 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnInit, Optional} from '@angular/core';
-import {UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, FormGroupDirective, Validators} from '@angular/forms';
-import {EntityUtils} from '../../services/model/entity.model';
-import {FormFieldDefinition, FormFieldDefinitionMap} from '../../../shared/form/field.model';
-import {isEmptyArray, isNil} from '../../../shared/functions';
-import {DateAdapter, ThemePalette} from '@angular/material/core';
-import {Moment} from 'moment';
-import {LocalSettingsService} from '../../services/local-settings.service';
-import {AppForm} from '../form.class';
-import {FormArrayHelper, FormArrayHelperOptions} from '../form.utils';
-import {AppColors, Property} from '../../../shared/types';
-import {PropertyValidator} from './property.validator';
-import {PredefinedColors} from '@ionic/core';
-
-@Component({
-  selector: 'app-properties-form',
-  templateUrl: 'properties.form.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {provide: PropertyValidator, useClass: PropertyValidator}
-  ]
-})
-export class AppPropertiesForm<T = Property> extends AppForm<T[]> implements OnInit {
-
-  definitionsMapByKey: FormFieldDefinitionMap = {};
-  definitionsByIndex: { [index: number]: FormFieldDefinition } = {};
-  helper: FormArrayHelper<Property>;
-
-  @Input() formArrayName: string;
-  @Input() formArray: UntypedFormArray;
-  @Input() options: FormArrayHelperOptions;
-  @Input() definitions: FormFieldDefinition[];
-  @Input() chipColor: ThemePalette | PredefinedColors = 'accent';
-
-  set value(data: T[]) {
-    this.setValue(data);
-  }
-
-  get value(): T[] {
-    return this.formArray.value as T[];
-  }
-  get length(): number {
-    return this.formArray?.length || 0;
-  }
-
-  get fieldForms(): UntypedFormGroup[] {
-    return this.formArray.controls as UntypedFormGroup[];
-  }
-
-  constructor(
-    injector: Injector,
-    protected formBuilder: UntypedFormBuilder,
-    protected dateAdapter: DateAdapter<Moment>,
-    protected settings: LocalSettingsService,
-    protected cd: ChangeDetectorRef,
-    protected validator: PropertyValidator,
-    @Optional() private formGroupDir: FormGroupDirective
-  ) {
-    super(injector,
-      null);
-
-    //this.debug = !environment.production;
-  }
-
-  ngOnInit() {
-    if (isEmptyArray(this.definitions)) {
-      throw new Error('Missing or invalid attribute \'definitions\'');
-    }
-
-    // Fill options map
-    this.definitionsMapByKey = {};
-    this.definitions.forEach(o => {
-      this.definitionsMapByKey[o.key] = o;
-    });
-
-    // Retrieve the form
-    const form = (this.formArray && this.formArray.parent as UntypedFormGroup || this.formGroupDir && this.formGroupDir.form || this.formBuilder.group({}));
-    this.setForm(form);
-
-    this.formArray = this.formArray || this.formArrayName && form.get(this.formArrayName) as UntypedFormArray;
-    this.formArrayName = this.formArrayName || this.formArray && Object.keys(form.controls).find(key => form.get(key) === this.formArray) || 'properties';
-    if (!this.formArray) {
-      console.warn(`Missing array control '${this.formArrayName}'. Will create it!`);
-      this.formArray = this.formBuilder.array([]);
-      this.form.addControl(this.formArrayName, this.formArray);
-    }
-
-    this.helper = new FormArrayHelper<Property>(
-      this.formArray,
-      (value) => this.validator.getFormGroup(value),
-      (v1, v2) => (!v1 && !v2) || v1.key === v2.key,
-      (value) => isNil(value) || (isNil(value.key) && isNil(value.value)),
-      this.options
-    );
-
-    super.ngOnInit();
-  }
-
-  getDefinitionAt(index: number): FormFieldDefinition {
-    let definition = this.definitionsByIndex[index];
-    if (!definition) {
-      definition = this.updateDefinitionAt(index);
-      this.definitionsByIndex[index] = definition;
-    }
-    return definition;
-  }
-
-  updateDefinitionAt(index: number): FormFieldDefinition {
-    const key = (this.formArray.at(index) as UntypedFormGroup).controls.key.value;
-    const definition = key && this.definitionsMapByKey[key] || null;
-    this.definitionsByIndex[index] = definition; // update map by index
-    this.markForCheck();
-    return definition;
-  }
-
-  removeAt(index: number) {
-    this.helper.removeAt(index);
-    this.definitionsByIndex = {}; // clear map by index
-    this.markForCheck();
-  }
-
-  isUnknownField(fieldForm: UntypedFormGroup) {
-    const keyControl = fieldForm.get('key');
-    const key = keyControl && keyControl.value;
-    return key && isNil(this.definitionsMapByKey[key]);
-  }
-
-  setValue(data: T[] | any) {
-    if (!data) return; // Skip
-
-    // Transform properties map into array
-    const values = EntityUtils.getMapAsArray<T>(data);
-    this.helper.resize(values.length);
-    this.helper.formArray.patchValue(values, {emitEvent: false});
-
-    this.markAsPristine();
-    this.markAsLoaded();
-  }
-
-  /* -- protected methods -- */
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-
-}
-

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

@@ -1,30 +0,0 @@
-import {NgModule} from '@angular/core';
-import {SharedModule} from '../../../shared/shared.module';
-import {AppPropertiesForm} from './properties.form';
-import {TranslateModule} from '@ngx-translate/core';
-import {AppPropertiesTable} from './properties.table';
-import {AppTableModule} from '../../table/table.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    TranslateModule.forChild(),
-    AppTableModule
-  ],
-
-  declarations: [
-    // Other components
-    AppPropertiesForm,
-    AppPropertiesTable
-  ],
-  exports: [
-    TranslateModule,
-
-    // Components
-    AppPropertiesForm,
-    AppPropertiesTable
-  ]
-})
-export class AppPropertiesFormModule {
-
-}