@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/material/test/test-component.ts

@@ -0,0 +1,295 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { Subject } from 'rxjs';
+import { IonicModule } from '@ionic/angular';
+
+/** @title Form field with custom telephone number input control. */
+@Component({
+  selector: 'form-field-custom-control-example',
+  template: `
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+
+        <ion-title>Custom field test page</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div [formGroup]="form">
+        <mat-form-field>
+          <mat-label>Phone number</mat-label>
+          <example-tel-input formControlName="tel" required></example-tel-input>
+          <mat-icon matSuffix>phone</mat-icon>
+          <mat-hint>Include area code</mat-hint>
+        </mat-form-field>
+        <p>Entered value: {{ form.valueChanges | async | json }}</p>
+      </div>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, forwardRef(() => MyTelInput), MatIconModule, AsyncPipe, JsonPipe, IonicModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldCustomControlExample {
+  readonly form = new FormGroup({
+    tel: new FormControl(null),
+  });
+}
+
+/** Data structure for holding telephone number. */
+export class MyTel {
+  constructor(
+    public area: string,
+    public exchange: string,
+    public subscriber: string
+  ) {}
+}
+
+/** Custom `MatFormFieldControl` for telephone number input. */
+@Component({
+  selector: 'example-tel-input',
+  templateUrl: 'test-component.html',
+  styleUrl: 'test-component.css',
+  providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }],
+  host: {
+    '[class.example-floating]': 'shouldLabelFloat',
+    '[id]': 'id',
+  },
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, IonicModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
+  static nextId = 0;
+  readonly areaInput = viewChild.required<HTMLInputElement>('area');
+  readonly exchangeInput = viewChild.required<HTMLInputElement>('exchange');
+  readonly subscriberInput = viewChild.required<HTMLInputElement>('subscriber');
+  ngControl = inject(NgControl, { optional: true, self: true });
+  readonly parts: FormGroup<{
+    area: FormControl<string | null>;
+    exchange: FormControl<string | null>;
+    subscriber: FormControl<string | null>;
+  }>;
+  readonly stateChanges = new Subject<void>();
+  readonly touched = signal(false);
+  readonly controlType = 'example-tel-input';
+  readonly id = `example-tel-input-${MyTelInput.nextId++}`;
+  readonly _userAriaDescribedBy = input<string>('', { alias: 'aria-describedby' });
+  readonly _placeholder = input<string>('', { alias: 'placeholder' });
+  readonly _required = input<boolean, unknown>(false, {
+    alias: 'required',
+    transform: booleanAttribute,
+  });
+  readonly _disabledByInput = input<boolean, unknown>(false, {
+    alias: 'disabled',
+    transform: booleanAttribute,
+  });
+  readonly _value = model<MyTel | null>(null, { alias: 'value' });
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  protected readonly _formField = inject(MAT_FORM_FIELD, {
+    optional: true,
+  });
+
+  private readonly _focused = signal(false);
+  private readonly _disabledByCva = signal(false);
+  private readonly _disabled = computed(() => this._disabledByInput() || this._disabledByCva());
+  private readonly _focusMonitor = inject(FocusMonitor);
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  get focused(): boolean {
+    return this._focused();
+  }
+
+  get empty() {
+    const {
+      value: { area, exchange, subscriber },
+    } = this.parts;
+
+    return !area && !exchange && !subscriber;
+  }
+
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+
+  get userAriaDescribedBy() {
+    return this._userAriaDescribedBy();
+  }
+
+  get placeholder(): string {
+    return this._placeholder();
+  }
+
+  get required(): boolean {
+    return this._required();
+  }
+
+  get disabled(): boolean {
+    return this._disabled();
+  }
+
+  get value(): MyTel | null {
+    return this._value();
+  }
+
+  get errorState(): boolean {
+    return this.parts.invalid && this.touched();
+  }
+
+  constructor() {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+
+    this.parts = inject(FormBuilder).group({
+      area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+      exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+      subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
+    });
+
+    effect(() => {
+      // Read signals to trigger effect.
+      this._placeholder();
+      this._required();
+      this._disabled();
+      this._focused();
+      // Propagate state changes.
+      untracked(() => this.stateChanges.next());
+    });
+
+    effect(() => {
+      if (this._disabled()) {
+        untracked(() => this.parts.disable());
+      } else {
+        untracked(() => this.parts.enable());
+      }
+    });
+
+    effect(() => {
+      const value = this._value() || new MyTel('', '', '');
+      untracked(() => this.parts.setValue(value));
+    });
+
+    this.parts.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+      this.stateChanges.next();
+    });
+
+    this.parts.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+      const tel = this.parts.valid
+        ? new MyTel(this.parts.value.area || '', this.parts.value.exchange || '', this.parts.value.subscriber || '')
+        : null;
+      this._updateValue(tel);
+    });
+  }
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+    this._focusMonitor.stopMonitoring(this._elementRef);
+  }
+
+  onFocusIn() {
+    if (!this._focused()) {
+      this._focused.set(true);
+    }
+  }
+
+  onFocusOut(event: FocusEvent) {
+    if (!this._elementRef.nativeElement.contains(event.relatedTarget as Element)) {
+      this.touched.set(true);
+      this._focused.set(false);
+      this.onTouched();
+    }
+  }
+
+  autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void {
+    if (!control.errors && nextElement) {
+      this._focusMonitor.focusVia(nextElement, 'program');
+    }
+  }
+
+  autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void {
+    if (control.value.length < 1) {
+      this._focusMonitor.focusVia(prevElement, 'program');
+    }
+  }
+
+  setDescribedByIds(ids: string[]) {
+    const controlElement = this._elementRef.nativeElement.querySelector('.example-tel-input-container')!;
+    controlElement.setAttribute('aria-describedby', ids.join(' '));
+  }
+
+  onContainerClick() {
+    if (this.parts.controls.subscriber.valid) {
+      this._focusMonitor.focusVia(this.subscriberInput(), 'program');
+    } else if (this.parts.controls.exchange.valid) {
+      this._focusMonitor.focusVia(this.subscriberInput(), 'program');
+    } else if (this.parts.controls.area.valid) {
+      this._focusMonitor.focusVia(this.exchangeInput(), 'program');
+    } else {
+      this._focusMonitor.focusVia(this.areaInput(), 'program');
+    }
+  }
+
+  writeValue(tel: MyTel | null): void {
+    this._updateValue(tel);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void {
+    this.autoFocusNext(control, nextElement);
+    this.onChange(this.value);
+  }
+
+  private _updateValue(tel: MyTel | null) {
+    const current = this._value();
+    if (tel === current || (tel?.area === current?.area && tel?.exchange === current?.exchange && tel?.subscriber === current?.subscriber)) {
+      return;
+    }
+    this._value.set(tel);
+  }
+}

package/src/app/shared/material/testing/common.test.html

@@ -0,0 +1,227 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Common field test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <!-- Empty value -->
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Empty value</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>
+                      {{ stringify(form.controls.empty.value) }}
+                    </pre>
+                    <br />
+                    <pre>
+                      formControl.valid? {{ form.controls.empty?.valid }}
+                    </pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <mat-label>Value</mat-label>
+                <input matInput formControlName="empty" />
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col>
+          <!-- Empty value + required -->
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Empty value (required)</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <mat-label>Value</mat-label>
+                <input matInput formControlName="emptyRequired" [required]="true" />
+
+                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- Enable  -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">With value</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.enable.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <mat-label>Value</mat-label>
+                <input matInput formControlName="enable" [required]="true" />
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- Disable -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Disable</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.disable.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <mat-label>Value</mat-label>
+                <input matInput formControlName="disable" [required]="true" />
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- Readonly  -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Readonly toggle</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-checkbox
+                (change)="desktopReadonlyField.readOnly = $event.checked"
+                [checked]="desktopReadonlyField.readOnly"
+              >Readonly ?</mat-checkbox>
+              <mat-form-field>
+                <mat-label>Value</mat-label>
+                <input matInput #desktopReadonlyField formControlName="readonly" [readOnly]="true" />
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- Boolean -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Boolean</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.disable.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-boolean-field formControlName="boolean" placeholder="Boolean"></mat-boolean-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- MatSelect  -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Mat Select</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <mat-label>Select</mat-label>
+                <mat-select [formControl]="form.controls['select'] | formGetControl" placeholder="Select a value">
+                  <mat-select-trigger>
+                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}
+                  </mat-select-trigger>
+                  @for (item of statusList; track item) {
+                    <mat-option [value]="item">{{ item.label | translate }}</mat-option>
+                  }
+                </mat-select>
+
+
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- MatDateTime  -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Mat DateTime</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>{{ stringify(form.controls.date.value) }}</pre>
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-date-time-field
+                [formControl]="form.controls['date'] | formGetControl"
+                placeholder="Date/Time">
+              </mat-date-time-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+</ion-content>

package/src/app/shared/material/testing/common.test.ts

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { AppFormUtils } from '../../../core/form/form.utils';
+import { debounceTime } from 'rxjs/operators';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { SharedFormGroupValidators, SharedValidators } from '../../validator/validators';
+import { isMobile } from '../../platforms';
+import { DateUtils, toDateISOString } from '../../dates';
+import { StatusList } from '../../../core/services/model/referential.model';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'mat-common-test',
+  templateUrl: './common.test.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatCommonTestPage implements OnInit, OnDestroy {
+  showLogPanel = true;
+  logContent = '';
+
+  form: UntypedFormGroup;
+
+  statusList = StatusList;
+
+  private subscription = new Subscription();
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder,
+    protected cd: ChangeDetectorRef
+  ) {
+    this.form = formBuilder.group(
+      {
+        empty: [null],
+        emptyRequired: [null, Validators.required],
+        enable: [null, Validators.required],
+        disable: [null, Validators.required],
+        readonly: [null],
+        select: [null, Validators.required],
+        boolean: [null],
+        date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
+      },
+      {
+        validators: SharedFormGroupValidators.dateRange('empty', 'enable'),
+      }
+    );
+
+    const disableControl = this.form.get('disable');
+    disableControl.disable();
+
+    // Copy the 'enable' value, into the disable control
+    this.subscription.add(this.form.get('enable').valueChanges.subscribe((value) => disableControl.setValue(value)));
+
+    this.showLogPanel = this.showLogPanel || isMobile(window);
+  }
+
+  ngOnInit() {
+    setTimeout(() => this.loadData(), 250);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  // Load the form with data
+  async loadData() {
+    const now = DateUtils.moment();
+
+    const data = {
+      empty: null, // toDateISOString(now.clone().add(2, 'hours')),
+      emptyRequired: null,
+      enable: toDateISOString(now),
+      disable: now.clone(),
+      readonly: now.clone(),
+      select: null,
+      boolean: null,
+      date: null,
+    };
+
+    this.form.setValue(data);
+
+    this.log('[test-page] Data loaded: ' + JSON.stringify(data));
+
+    this.subscription.add(
+      this.form
+        .get('empty')
+        .valueChanges.pipe(debounceTime(300))
+        .subscribe((value) => this.log('[test-page] Value n°1: ' + JSON.stringify(value)))
+    );
+
+    this.subscription.add(
+      this.form
+        .get('enable')
+        .valueChanges.pipe(debounceTime(300))
+        .subscribe((value) => this.log('[test-page] Value n°2: ' + JSON.stringify(value)))
+    );
+  }
+
+  doSubmit(_) {
+    this.form.markAllAsTouched();
+    this.log('[test-page] Form content: ' + JSON.stringify(this.form.value));
+    this.log('[test-page] Form status: ' + this.form.status);
+    if (this.form.invalid) {
+      this.log('[test-page] Form errors: ' + JSON.stringify(this.form.errors));
+
+      // DEBUG
+      AppFormUtils.logFormErrors(this.form);
+    }
+  }
+
+  log(message: string) {
+    console.debug(message);
+
+    if (this.showLogPanel) {
+      this.logContent += message + '<br/>';
+      this.cd.markForCheck();
+    }
+  }
+
+  clearLogPanel() {
+    this.logContent = '';
+    this.cd.markForCheck();
+  }
+
+  stringify = JSON.stringify;
+
+  /* -- protected methods -- */
+}