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

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

@@ -0,0 +1,639 @@
+import {AbstractControl, AbstractControlOptions, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, ValidatorFn} from '@angular/forms';
+import {Entity} from '../services/model/entity.model';
+import {SharedFormArrayValidators} from '../../shared/validator/validators';
+import {round, toBoolean} from '../../shared/functions';
+import {filterNumberInput, selectInputContent} from '../../shared/inputs';
+import {waitFor, WaitForOptions} from '../../shared/observables';
+import {
+  addValueInArray,
+  clearValueInArray,
+  copyEntity2Form,
+  disableControls,
+  getControlFromPath,
+  getFormErrors,
+  getFormValueFromEntity,
+  logFormErrors,
+  markAllAsTouched,
+  markAsUntouched,
+  removeValueInArray,
+  resizeArray,
+  updateValueAndValidity,
+  waitIdle,
+  waitWhilePending
+} from '../../shared/forms';
+
+export declare type IAppFormGetter = () => IAppForm;
+
+export declare interface OnReady {
+  ngOnReady();
+}
+
+export interface IAppForm  {
+  // From Angular form
+  invalid: boolean;
+  valid: boolean;
+  dirty: boolean;
+  pending: boolean;
+  error: string;
+  enabled: boolean;
+  disabled: boolean;
+  touched: boolean;
+  untouched: boolean;
+
+  // Specific to IAppForm
+  empty?: boolean;
+  loading?: boolean;
+  ready(): Promise<void>;
+  waitIdle(opts?: WaitForOptions): Promise<any>;
+
+  disable(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  enable(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+
+  markAsPristine(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAsUntouched(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAsTouched(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAllAsTouched(opts?: {emitEvent?: boolean});
+  markAsDirty(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAsLoading(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAsLoaded(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+  markAsReady(opts?: {onlySelf?: boolean; emitEvent?: boolean;});
+}
+
+
+/**
+ * A form that do nothing
+ */
+export class AppNullForm implements IAppForm {
+  readonly invalid = false;
+  readonly valid = false;
+  readonly dirty = false;
+  readonly empty = true;
+  readonly pending = false;
+  readonly error = null;
+  readonly enabled = false;
+  readonly loading = false;
+  readonly touched = false;
+  get disabled(): boolean {
+    return !this.enabled;
+  }
+  get untouched(): boolean {
+    return !this.touched;
+  }
+
+  disable(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  enable(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+
+  markAsPristine(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAsUntouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAsTouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAllAsTouched(opts?: { emitEvent?: boolean }) {}
+  markAsDirty(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAsLoading(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAsLoaded(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+  markAsReady(opts?: {onlySelf?: boolean; emitEvent?: boolean }){}
+
+  waitIdle(opts?: WaitForOptions): Promise<any> {
+    return Promise.reject(false);
+  }
+  ready(): Promise<any> {
+    return Promise.reject(true);
+  }
+}
+
+
+export class AppFormProvider<F extends IAppForm = IAppForm> implements IAppForm {
+  static NULL_FORM = new AppNullForm();
+
+  constructor(private getterFn: () => F) {
+  }
+
+  private get delegate(): IAppForm {
+    return this.getterFn() || AppFormProvider.NULL_FORM;
+  }
+
+  waitDelegate(opts?: WaitForOptions): Promise<F> {
+    let content: F;
+    return waitFor(() => {
+      content = this.getterFn();
+      return !!content;
+    }, opts).then(_ => content);
+  }
+
+  /* -- delegated methods -- */
+
+  get enabled(): boolean {
+    return this.delegate.enabled;
+  }
+  get disabled(): boolean {
+    return this.delegate.disabled;
+  }
+  get error(): string {
+    return this.delegate.error;
+  }
+  get invalid(): boolean {
+    return this.delegate.invalid;
+  }
+  get valid(): boolean {
+    return this.delegate.valid;
+  }
+  get dirty(): boolean {
+    return this.delegate.dirty;
+  }
+  get empty(): boolean {
+    return this.delegate.empty;
+  }
+  get pending(): boolean {
+    return this.delegate.pending;
+  }
+  get loading(): boolean {
+    return this.delegate.loading;
+  }
+  get touched(): boolean {
+    return this.delegate.touched;
+  }
+  get untouched(): boolean {
+    return this.delegate.untouched;
+  }
+  ready(): Promise<any> {
+    return this.delegate.ready();
+  }
+  waitIdle(opts?: WaitForOptions): Promise<any> {
+    return this.delegate.waitIdle();
+  }
+  disable(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.disable(opts);
+  }
+  enable(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.enable(opts);
+  }
+  markAsPristine(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsPristine(opts);
+  }
+  markAsUntouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsUntouched(opts);
+  }
+  markAsTouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsTouched(opts);
+  }
+  markAllAsTouched(opts?: { emitEvent?: boolean }) {
+    return this.delegate.markAllAsTouched(opts);
+  }
+  markAsDirty(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsDirty(opts);
+  }
+  markAsLoading(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsLoading(opts);
+  }
+  markAsLoaded(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsLoaded(opts);
+  }
+  markAsReady(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    return this.delegate.markAsReady(opts);
+  }
+}
+
+export interface FormArrayHelperOptions {
+  allowEmptyArray: boolean; // false by default
+  validators?: ValidatorFn[];
+}
+
+export class FormArrayHelper<T = Entity<any>, C extends AbstractControl = AbstractControl> {
+
+  static getOrCreateArray(
+    formBuilder: UntypedFormBuilder,
+    form: UntypedFormGroup,
+    arrayName: string): UntypedFormArray {
+    const disabled = form.disabled;
+    let arrayControl = form.get(arrayName) as UntypedFormArray;
+    if (!arrayControl) {
+      arrayControl = formBuilder.array([]);
+
+      // Apply parent disabled state, before to push it into the array
+      // This is need to avoid parent form to be enabled, after calling resizeArray()
+      if (disabled && arrayControl.enabled) arrayControl.disable({emitEvent: false});
+
+      form.addControl(arrayName, arrayControl);
+    }
+    return arrayControl;
+  }
+
+  private _allowEmptyArray: boolean;
+  private readonly _validators: ValidatorFn[];
+
+  get allowEmptyArray(): boolean {
+    return this._allowEmptyArray;
+  }
+
+  set allowEmptyArray(value: boolean) {
+    this.setAllowEmptyArray(value);
+  }
+
+  get formArray(): UntypedFormArray {
+    return this._formArray;
+  }
+
+  constructor(
+    private readonly _formArray: UntypedFormArray,
+    private createControl: (value?: T) => C,
+    private equals: (v1: T, v2: T) => boolean,
+    private isEmpty: (value: T) => boolean,
+    options?: FormArrayHelperOptions
+  ) {
+    this._validators = options && options.validators;
+
+    // empty array not allow by default
+    this.setAllowEmptyArray(toBoolean(options?.allowEmptyArray, false));
+  }
+
+  /**
+   * @param value
+   * @param options
+   */
+  add(value?: T, options?: { emitEvent: boolean }): boolean {
+    return addValueInArray(this._formArray, this.createControl, this.equals, this.isEmpty, value, options);
+  }
+
+  removeAt(index: number) {
+    // Do not remove if last criterion
+    if (!this._allowEmptyArray && this._formArray.length === 1) {
+      return clearValueInArray(this._formArray, this.isEmpty, index);
+    }
+    else {
+      return removeValueInArray(this._formArray, this.isEmpty, index);
+    }
+  }
+
+  resize(length: number, options?: {emitEvent?: boolean}): boolean {
+    return resizeArray(this._formArray, this.createControl, length, options);
+  }
+
+  clearAt(index: number): boolean {
+    return clearValueInArray(this._formArray, this.isEmpty, index);
+  }
+
+  isLast(index: number): boolean {
+    return (this._formArray.length - 1) === index;
+  }
+
+  removeAllEmpty() {
+    let index = this._formArray.controls.findIndex(c => this.isEmpty(c.value));
+    while(index !== -1) {
+      this.removeAt(index);
+      index = this._formArray.controls.findIndex(c => this.isEmpty(c.value));
+    }
+  }
+
+  size(): number {
+    return this._formArray.length;
+  }
+
+  at(index: number): C {
+    return this._formArray.at(index) as C;
+  }
+
+  /**
+   * Resize the FormArray, then set values
+   * @param values
+   * @param options
+   */
+  setValue(values: T[], options?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }): void {
+    this.resize(values?.length||0);
+    this._formArray.setValue(values, options);
+  }
+
+  /**
+   * Resize the FormArray, then patch values
+   * @param values
+   * @param options
+   */
+  patchValue(values: T[], options?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }): void {
+    this.resize(values?.length||0);
+    this._formArray.patchValue(values, options);
+  }
+
+  disable(opts?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }) {
+    this._formArray.controls.forEach(c => c.disable(opts));
+  }
+
+  enable(opts?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }) {
+    this._formArray.controls.forEach(c => c.enable(opts));
+  }
+
+  forEach(ite: (control: C) => void ) {
+    const size = this.size();
+    for(let i = 0; i < size; i++) {
+      const control = this._formArray.at(i) as C;
+      if (control) ite(control);
+    }
+  }
+
+  /* -- internal methods -- */
+
+  protected setAllowEmptyArray(value: boolean) {
+    if (this._allowEmptyArray === value) return; // Skip if same
+
+    this._allowEmptyArray = value;
+
+    // Set required (or reste) min length validator
+    if (this._allowEmptyArray) {
+      this._formArray.setValidators(this._validators || null);
+    }
+    else {
+      this._formArray.setValidators((this._validators || []).concat(SharedFormArrayValidators.requiredArrayMinLength(1)));
+    }
+  }
+}
+
+export declare interface AppFormArrayOptions extends AbstractControlOptions {
+  allowEmptyArray?: boolean; // true by default
+  allowReuseControls?: boolean; // true by default
+}
+
+export class AppFormArray<T extends Entity<T>, C extends AbstractControl> extends UntypedFormArray {
+
+  private options?: AppFormArrayOptions
+
+  get allowEmptyArray(): boolean {
+    return this.options.allowEmptyArray;
+  }
+
+  set allowEmptyArray(value: boolean) {
+    this.setAllowEmptyArray(value);
+  }
+
+  constructor(private createControl: (value?: T) => C,
+              private equals: (v1: T, v2: T) => boolean,
+              private isEmpty: (value: T) => boolean,
+              options?: AppFormArrayOptions | undefined | null
+  ) {
+    super([], options);
+    this.options = {
+      allowEmptyArray: true,
+      allowReuseControls: true,
+      ...options
+    }
+    this.setAllowEmptyArray(this.options.allowEmptyArray);
+  }
+
+  /**
+   * WIll rebuild the array, using the given values
+   * @param values
+   * @param options
+   */
+  setValue(values: any[], options?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }): void {
+    if (values === undefined) throw new Error('\'undefined\' value not allowed in AppFormArray.setValue(). Use \'null\' or \'[]\' to clear the array');
+
+    if (this.options.allowReuseControls === false) {
+      const disabled = this.disabled;
+
+      // Clean all
+      this.resize(0, {emitEvent: options?.emitEvent});
+
+      // Recreate each control, with a default value
+      (values || []).forEach(value => {
+        const control = this.createControl(value);
+
+        // Apply parent disabled state, before to push it into the array
+        // This is need to avoid parent form to be enabled, after calling AppFormArray.patchValue() (e.g. in table's row validator)
+        if (disabled && control.enabled) control.disable({emitEvent: false})
+        else if (!disabled && control.disabled) control.enable({emitEvent: false})
+
+        this.push(control, options);
+      });
+    }
+    else {
+      this.resize(values?.length || 0, {emitEvent: false});
+      super.setValue(values, options);
+    }
+  }
+
+  patchValue(values: any[]|null|undefined, options?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }): void {
+    // --- /!\ From official Angular doc of 'FormGroup.patchValue()' :
+    //   Even though the `value` argument type doesn't allow `null` and `undefined` values, the
+    //   `patchValue` can be called recursively and inner data structures might have these values, so
+    //   we just ignore such cases when a field containing FormGroup instance receives `null` or
+    //   `undefined` as a value.
+    // ---
+    if (values == null) return; // Ignore
+
+    if (this.options.allowReuseControls === false) {
+      const disabled = this.disabled;
+
+      // Clean all
+      this.resize(0, {emitEvent: options?.emitEvent});
+
+      // Recreate each control, with a default value
+      (values || []).forEach(value => {
+        const control = this.createControl(value);
+
+        // Apply parent disabled state, before to push it into the array
+        // This is need to avoid parent form to be enabled, after calling AppFormArray.patchValue() (e.g. in table's row validator)
+        if (disabled && control.enabled) control.disable({emitEvent: false})
+        else if (!disabled && control.disabled) control.enable({emitEvent: false})
+
+        this.push(control, options);
+      });
+    }
+    else {
+      this.resize(values?.length || 0, {emitEvent: false});
+      super.patchValue(values, options);
+    }
+  }
+
+  resize(length: number, options?: {emitEvent?: boolean}) {
+
+    if (this.length === length) return; // Nothing to do
+
+    const disabled = this.disabled; // Save enabled here, because update can occur from resizeArray()
+
+    // Reduce
+    while (this.length > length) {
+      this.removeAt(this.length - 1, {emitEvent: options?.emitEvent});
+    }
+
+    // Or increase size
+    while (this.length < length) {
+      const control = this.createControl();
+
+      // Apply parent disabled state, before to push it into the array
+      // This is need to avoid parent form to be enabled, after calling AppFormArray.patchValue() (e.g. in table's row validator)
+      if (disabled && control.enabled) control.disable({emitEvent: false})
+      else if (!disabled && control.disabled) control.enable({emitEvent: false});
+
+      this.push(control, options);
+    }
+  }
+
+  disable(opts?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }) {
+    super.disable(opts);
+    this.controls.forEach(c => c.disable(opts));
+  }
+
+  enable(opts?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }) {
+    super.enable(opts);
+    this.controls.forEach(c => c.enable(opts));
+  }
+
+  forEach(ite: (control: C) => void ) {
+    const size = this.length;
+    for(let i = 0; i < size; i++) {
+      const control = this.at(i) as C;
+      if (control) ite(control);
+    }
+  }
+
+  /**
+   * @param value
+   * @param options
+   */
+  add(value?: T, options?: { emitEvent: boolean }) {
+    addValueInArray(this, this.createControl, this.equals, this.isEmpty, value, options);
+  }
+
+  removeAt(index: number, options?: {emitEvent: boolean }) {
+    // Do not remove if last criterion
+    if (this.options.allowEmptyArray === false && this.length === 1) {
+      this.clearAt(index, options);
+    }
+    else {
+      super.removeAt(index, options);
+    }
+  }
+
+  clearAt(index: number, options?: {emitEvent: boolean }) {
+    const control = this.at(index);
+    if (this.isEmpty(control.value)) return; // skip (not need to clear)
+
+    if (control instanceof UntypedFormGroup) {
+      copyEntity2Form({}, control, options);
+    }
+    else if (control instanceof UntypedFormArray) {
+      control.setValue([], options);
+    }
+    else {
+      control.setValue(null, options);
+    }
+    this.markAsDirty();
+  }
+
+  isLast(index: number): boolean {
+    return (this.length - 1) === index;
+  }
+
+  removeAllEmpty() {
+    let index = this.controls.findIndex(c => this.isEmpty(c.value));
+    while(index !== -1) {
+      this.removeAt(index);
+      index = this.controls.findIndex(c => this.isEmpty(c.value));
+    }
+  }
+
+  /* -- internal -- */
+
+  protected setAllowEmptyArray(value: boolean) {
+    if (this.options.allowEmptyArray === value) return; // Skip if same
+
+    this.options.allowEmptyArray = value;
+
+    // Set required (or reste) min length validator
+    if (this.options.allowEmptyArray) {
+      this.setValidators(this.options.validators || null);
+    }
+    else {
+      const validators = this.options?.validators || [];
+      this.setValidators(
+        (Array.isArray(validators) ? validators : [validators])
+          .concat(SharedFormArrayValidators.requiredArrayMinLength(1)));
+    }
+  }
+}
+
+// TODO continue to use this kind of declaration ?
+export class AppFormUtils {
+  static copyEntity2Form = copyEntity2Form;
+  static getFormValueFromEntity = getFormValueFromEntity;
+  static logFormErrors = logFormErrors;
+  static getControlFromPath = getControlFromPath;
+  static filterNumberInput = filterNumberInput;
+  static disableControls = disableControls;
+  static selectInputContent = selectInputContent;
+  /**
+   * @deprecated use markAllAsTouched() instead (naming was wrong)
+   */
+  static markAsTouched = markAllAsTouched;
+
+  /**
+   * Marks the control and all its descendant controls as touched.
+   * See also:
+   * - `markAsTouched()`
+   */
+  static markAllAsTouched = markAllAsTouched;
+  static markAsUntouched = markAsUntouched;
+  static waitWhilePending = waitWhilePending;
+  static waitIdle = waitIdle;
+  static updateValueAndValidity = updateValueAndValidity;
+
+  static getFormErrors = getFormErrors;
+
+  static isForm(object: any): object is IAppForm {
+    return object instanceof AppFormProvider
+      || 'dirty' in object && 'enabled' in object && 'valid' in object;
+  }
+
+  // ArrayForm
+  static addValueInArray = addValueInArray;
+  static removeValueInArray = removeValueInArray;
+  static resizeArray = resizeArray;
+  static clearValueInArray = clearValueInArray;
+
+  // Calculated fields
+  static calculatedSuffix = 'Calculated';
+  static isControlHasInput = isControlHasInput;
+  static setCalculatedValue = setCalculatedValue;
+  static resetCalculatedValue = resetCalculatedValue;
+}
+
+
+export function isControlHasInput(controls: { [key: string]: AbstractControl}, controlName: string): boolean {
+  // true if the control has a value and its 'calculated' control has the value 'false'
+  return controls[controlName].value && !toBoolean(controls[controlName + AppFormUtils.calculatedSuffix].value, false);
+}
+
+export function setCalculatedValue(controls: { [key: string]: AbstractControl}, controlName: string, value: number | undefined) {
+  // set value to control
+  controls[controlName].setValue(round(value));
+  // set 'calculated' control to 'true'
+  controls[controlName + AppFormUtils.calculatedSuffix].setValue(true);
+}
+
+export function resetCalculatedValue(controls: { [key: string]: AbstractControl}, controlName: string) {
+  if (!isControlHasInput(controls, controlName)) {
+    // set undefined only if control already calculated
+    AppFormUtils.setCalculatedValue(controls, controlName, undefined);
+  }
+}
+

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

@@ -0,0 +1,67 @@
+
+<ng-container *ngIf="!loading; else listSkeleton">
+
+  <!-- List -->
+  <ion-list class="ion-no-padding" >
+
+    <ng-container *ngFor="let itemControl of itemControls; index as i; last as last">
+      <ion-item *ngIf="itemControl.value; let item"
+                [class.disabled]="disabled" tappable
+                (click)="onItemClick($event, item)"
+                [color]="selection.isSelected(item) ? 'secondary100' : undefined"
+                [button]="selectionChanges.observers|isNotEmptyArray">
+        <ion-label>{{displayWith(item)}}</ion-label>
+
+        <!-- buttons -->
+        <ion-buttons slot="end" *ngIf="enabled" class="action-buttons">
+          <ion-button fill="clear" (click)="removeAt(i)">
+            <ion-icon slot="icon-only" name="trash"></ion-icon>
+          </ion-button>
+
+          <ion-button *ngFor="let button of options.buttons"
+                      fill="clear" [color]="button.color"
+                      [class.cdk-visually-hidden]="button.disabled|async"
+                      (click)="onItemButtonClick(button, $event, item, i)"
+                      [title]="(button.title || '')|translate">
+            <ion-icon slot="icon-only" [name]="button.icon"></ion-icon>
+          </ion-button>
+
+        </ion-buttons>
+      </ion-item>
+    </ng-container>
+  </ion-list>
+
+  <!-- Add button -->
+  <ion-button color="tertiary" fill="clear"
+              *ngIf="enabled && onNewItem.observers.length; else emptyText"
+              [title]="'COMMON.BTN_ADD'|translate"
+              (click)="onNewClick($event)" >
+    <ion-icon slot="start" name="add"></ion-icon>
+    <ion-label translate>COMMON.BTN_ADD</ion-label>
+  </ion-button>
+
+  <!-- Empty (if readonly) -->
+  <ng-template #emptyText>
+    <ion-text  *ngIf="!length" color="medium"><i translate>COMMON.EMPTY_OPTION</i></ion-text>
+  </ng-template>
+</ng-container>
+
+<ng-template #listSkeleton>
+
+  <ion-list>
+    <ng-container *ngTemplateOutlet="itemSkeleton"></ng-container>
+    <ng-container *ngTemplateOutlet="itemSkeleton"></ng-container>
+    <ng-container *ngTemplateOutlet="itemSkeleton"></ng-container>
+  </ion-list>
+
+</ng-template>
+
+<ng-template #itemSkeleton>
+
+  <ion-item>
+    <ion-label>
+      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    </ion-label>
+  </ion-item>
+
+</ng-template>