@sumaris-net/ngx-components 18.12.0 → 18.12.2

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

@@ -1,305 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { round, toBoolean } from '../../shared/functions';
-import { filterNumberInput, selectInputContent, selectInputContentFromEvent } from '../../shared/inputs';
-import { waitFor, WaitForOptions } from '../../shared/observables';
-import {
-  addValueInArray,
-  clearValueInArray,
-  copyEntity2Form,
-  disableAndClearControl,
-  disableAndClearControls,
-  disableControl,
-  disableControls,
-  enableControl,
-  enableControls,
-  filterFormErrors,
-  filterFormErrorsByPath,
-  filterFormErrorsByPrefix,
-  getControlFromPath,
-  getFormErrors,
-  getFormValueFromEntity,
-  logFormErrors,
-  markAllAsTouched,
-  markAsUntouched,
-  removeValueInArray,
-  resizeArray,
-  setControlEnabled,
-  setControlsEnabled,
-  updateValueAndValidity,
-  waitIdle,
-  waitWhilePending,
-} from '../../shared/forms';
-
-export declare type IAppFormGetter = () => IAppForm;
-
-export declare interface OnReady {
-  ngOnReady();
-}
-
-export interface IAppForm<T = any> {
-  // From Angular form
-  invalid: boolean;
-  valid: boolean;
-  dirty: boolean;
-  pending: boolean;
-  error: string;
-  enabled: boolean;
-  disabled: boolean;
-  touched: boolean;
-  untouched: boolean;
-  disable(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  enable(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-
-  // Specific to IAppForm
-  empty?: boolean;
-  loading?: boolean;
-  loaded?: boolean;
-  destroyed?: boolean;
-  ready(): Promise<void>;
-  waitIdle(opts?: WaitForOptions): Promise<any>;
-
-  // Optional functions
-  setValue?: (data: T, opts?: { onlySelf?: boolean; emitEvent?: boolean }) => Promise<void> | void;
-  patchValue?: (data: T, opts?: { onlySelf?: boolean; emitEvent?: boolean }) => Promise<void> | void;
-  reset?: (data?: T, opts?: { onlySelf?: boolean; emitEvent?: boolean }) => void;
-  getValue?: () => Promise<T> | T;
-
-  markAsPristine(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAsUntouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAsTouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAllAsTouched(opts?: { emitEvent?: boolean }): void;
-  markAsDirty(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAsLoading(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAsLoaded(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-  markAsReady(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void;
-}
-
-export interface CanSave {
-  dirty: boolean;
-  valid: boolean;
-  save(): Promise<boolean>;
-}
-
-export interface CanLeave extends CanSave {
-  cancel(event?: Event): Promise<void>;
-  deactivate?: () => Promise<void>;
-}
-
-/**
- * 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);
-  }
-
-  async save(): Promise<boolean> {
-    if (AppFormUtils.canSave(this.delegate)) {
-      return this.delegate.save();
-    }
-    return true;
-  }
-}
-
-/**
- * Helper class, for angular forms
- */
-export class AppFormUtils {
-  static copyEntity2Form = copyEntity2Form;
-  static getFormValueFromEntity = getFormValueFromEntity;
-  static logFormErrors = logFormErrors;
-  static getControlFromPath = getControlFromPath;
-  static filterNumberInput = filterNumberInput;
-  static enableControls = enableControls;
-  static enableControl = enableControl;
-  static disableControl = disableControl;
-  static disableControls = disableControls;
-  static disableAndClearControl = disableAndClearControl;
-  static disableAndClearControls = disableAndClearControls;
-  static setControlEnabled = setControlEnabled;
-  static setControlsEnabled = setControlsEnabled;
-  static selectInputContentFromEvent = selectInputContentFromEvent;
-  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);
-  }
-
-  static canSave(object: any): object is IAppForm & CanSave {
-    return 'save' in object && AppFormUtils.isForm(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;
-
-  // Form errors
-  static filterErrorsByPrefix = filterFormErrorsByPrefix;
-  static filterErrorsByPath = filterFormErrorsByPath;
-  static filterErrors = filterFormErrors;
-}
-
-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

@@ -1,68 +0,0 @@
-<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.observed; 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>

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,266 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Injector, Input, OnInit, Optional, Output } from '@angular/core';
-import { AbstractControl, FormGroupDirective, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, 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 } from '../form.utils';
-import { SelectionModel } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-import { Color } from '@ionic/core';
-import { FormArrayHelper, FormArrayHelperOptions } from '../array/form-array';
-
-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 applied 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.observed) 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,20 +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 {}