@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/material/datetime/testing/mat-date.test.ts

@@ -0,0 +1,145 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { debounceTime } from 'rxjs/operators';
+import { SharedFormGroupValidators, SharedValidators } from '../../../validator/validators';
+import { AppFormUtils } from '../../../../core/form/form.utils';
+import { DateUtils, toDateISOString } from '../../../dates';
+import 'moment-timezone';
+import { isMobile } from '../../../platforms';
+import { Subscription, timer } from 'rxjs';
+
+@Component({
+  selector: 'app-data-test',
+  templateUrl: './mat-date.test.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateTestPage implements OnInit {
+  showLogPanel = true;
+  logContent = '';
+
+  memoryHide = false;
+  memoryMobile = true;
+  memoryTimer: Subscription;
+  timezone = 'Indian/Mahe';
+
+  form: UntypedFormGroup;
+  mode: 'mobile' | 'desktop' | 'memory' | 'temp' = 'mobile';
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder,
+    protected cd: ChangeDetectorRef
+  ) {
+    this.form = formBuilder.group(
+      {
+        empty: [null, SharedValidators.validDateAllowNoTime],
+        emptyRequired: [null, Validators.compose([Validators.required, SharedValidators.validDateAllowNoTime])],
+        enable: [null, Validators.required],
+        disable: [null, Validators.required],
+        readonly: [null],
+        timezone: [null],
+        hint: [null],
+      },
+      {
+        validators: SharedFormGroupValidators.dateRange('empty', 'enable'),
+      }
+    );
+
+    const disableControl = this.form.get('disable');
+    disableControl.disable();
+
+    // Copy the 'enable' value, into the disable control
+    this.form.get('enable').valueChanges.subscribe((value) => disableControl.setValue(value));
+
+    this.showLogPanel = this.showLogPanel || isMobile(window);
+  }
+
+  ngOnInit() {
+    setTimeout(() => this.loadData(), 250);
+  }
+
+  toggleMode(value) {
+    if (this.mode !== value) {
+      this.mode = value;
+      this.stopMemoryTimer();
+    }
+  }
+
+  // Load the form with data
+  async loadData() {
+    const now = DateUtils.moment();
+
+    const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
+
+    const data = {
+      empty: null, // toDateISOString(now.clone().add(2, 'hours')),
+      emptyRequired: null,
+      enable: toDateISOString(now),
+      disable: now.clone(),
+      readonly: now.clone(),
+      timezone: nowAtMahe,
+      hint: now.clone(),
+    };
+
+    this.form.setValue(data);
+
+    this.log('[test-page] Data loaded: ' + JSON.stringify(data));
+
+    this.form
+      .get('empty')
+      .valueChanges.pipe(debounceTime(300))
+      .subscribe((value) => this.log('[test-page] Value n°1: ' + JSON.stringify(value)));
+
+    this.form
+      .get('enable')
+      .valueChanges.pipe(debounceTime(300))
+      .subscribe((value) => this.log('[test-page] Value n°2: ' + JSON.stringify(value)));
+
+    this.form
+      .get('timezone')
+      .valueChanges.pipe(debounceTime(300))
+      .subscribe((value) => this.log('[test-page] Value with timezone: ' + JSON.stringify(value)));
+  }
+
+  doSubmit(event) {
+    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();
+  }
+
+  startMemoryTimer() {
+    this.memoryTimer = timer(50, 50).subscribe(() => {
+      this.memoryHide = !this.memoryHide;
+      this.cd.markForCheck();
+    });
+  }
+
+  stopMemoryTimer() {
+    this.memoryTimer?.unsubscribe();
+    this.memoryTimer = null;
+    this.memoryHide = false;
+  }
+
+  stringify = JSON.stringify;
+
+  /* -- protected methods -- */
+}

package/src/app/shared/material/datetime/testing/mat-dateshort.test.html

@@ -0,0 +1,530 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Date short field test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- Tab nav - mobile/desktop mode -->
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
+    <a mat-tab-link [active]="mode === 'mobile'" (click)="toggleMode('mobile')">
+      <mat-label>Mobile</mat-label>
+    </a>
+    <a mat-tab-link [active]="mode === 'desktop'" (click)="toggleMode('desktop')">
+      <mat-label>Desktop</mat-label>
+    </a>
+    <a mat-tab-link [active]="mode === 'memory'" (click)="toggleMode('memory')">
+      <mat-label>Memory leak debug</mat-label>
+    </a>
+    <a mat-tab-link [active]="mode === 'temp'" (click)="toggleMode('temp')">
+      <mat-label>Temporary</mat-label>
+    </a>
+  </nav>
+
+  <form #tabPanel class="form-container ion-padding" [formGroup]="form" (ngSubmit)="doSubmit($event)">
+    @if (mode === 'memory') {
+      <ion-grid>
+        <!-- debugging memory leak -->
+        <ion-row>
+          <ion-col>
+            <ion-text><h4>Debug memory leak</h4></ion-text>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col size="auto">
+            @if (!memoryTimer) {
+              <ion-button (click)="startMemoryTimer()">Start timer</ion-button>
+            }
+            @if (memoryTimer) {
+              <ion-button (click)="stopMemoryTimer()">Stop timer</ion-button>
+            }
+          </ion-col>
+          <ion-col size="4">
+            <mat-form-field floatLabel="auto">
+              <input matInput type="text" hidden />
+              <mat-checkbox (change)="memoryMobile = $event.checked" [checked]="memoryMobile">Mobile ?</mat-checkbox>
+            </mat-form-field>
+          </ion-col>
+          <ion-col>
+            @if (!memoryHide) {
+              <mat-date-short-field
+                formControlName="empty"
+                placeholder="Date"
+                [required]="true"
+                [mobile]="memoryMobile"
+                [clearable]="true"
+              >
+                <ion-icon matPrefix name="calendar-outline"></ion-icon>
+              </mat-date-short-field>
+            }
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    }
+
+    @if (mode === 'mobile') {
+      <ion-grid>
+        <!-- Mobile mode -->
+        <ion-row>
+          <ion-col>
+            <ion-text><h4>Mobile mode</h4></ion-text>
+          </ion-col>
+        </ion-row>
+        <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>
+                    </small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <mat-date-short-field formControlName="empty" placeholder="Date" [mobile]="true" [clearable]="true">
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-field>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+          <ion-col>
+            <!-- Empty value -->
+            <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-date-short-field
+                  formControlName="emptyRequired"
+                  placeholder="Date"
+                  [required]="true"
+                  [mobile]="true"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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-date-short-field
+                  formControlName="enable"
+                  placeholder="Date"
+                  [required]="true"
+                  [mobile]="true"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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-date-short-field formControlName="disable" placeholder="Date" [required]="true" [mobile]="true">
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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>
+                <ion-grid>
+                  <ion-row>
+                    <ion-col size="4">
+                      <mat-checkbox
+                        (change)="mobileReadonlyField.readonly = $event.checked"
+                        [checked]="mobileReadonlyField.readonly"
+                      >
+                        Readonly ?
+                      </mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showReadonlyHint [checked]="true">Hint ?</mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showReadonlyIcons [checked]="true">Icons ?</mat-checkbox>
+                    </ion-col>
+                  </ion-row>
+                  <ion-row>
+                    <ion-col>
+                      <mat-date-short-field
+                        #mobileReadonlyField
+                        formControlName="readonly"
+                        placeholder="Date"
+                        [readonly]="true"
+                        [mobile]="true"
+                        [clearable]="true"
+                      >
+                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                        @if (showReadonlyIcons.checked) {
+                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
+                        }
+                        @if (showReadonlyHint.checked) {
+                          <mat-hint>Some hint</mat-hint>
+                        }
+                      </mat-date-short-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+
+          <!-- Hint -->
+          <ion-col size="12" size-md="6" size-lg="6">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">Hint</ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small>
+                      <pre>{{ stringify(form.controls.hint.value) }}</pre>
+                    </small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid>
+                  <ion-row>
+                    <ion-col size="4">
+                      <mat-checkbox #showHint [checked]="true">Hint ?</mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showHintAlignEnd [checked]="false" [disabled]="!showHint.checked">
+                        Align end ?
+                      </mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showIcons [checked]="true">Suffix icon ?</mat-checkbox>
+                    </ion-col>
+                  </ion-row>
+                  <ion-row>
+                    <ion-col>
+                      <mat-date-short-field
+                        formControlName="hint"
+                        placeholder="Date"
+                        [mobile]="true"
+                        [clearable]="true"
+                      >
+                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                        @if (showIcons.checked) {
+                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
+                        }
+                        @if (showHint.checked) {
+                          <mat-hint [align]="showHintAlignEnd.checked ? 'end' : 'start'">Some hint</mat-hint>
+                        }
+                      </mat-date-short-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        </ion-row>
+        <!-- debug console -->
+        <ion-row>
+          <!-- buttons -->
+          <ion-col size="2">
+            <!-- submit form -->
+            <ion-button (click)="doSubmit($event)" fill="outline">
+              <ion-icon name="checkmark" slot="icon-only"></ion-icon>
+            </ion-button>
+            <!-- clear log  -->
+            <ion-button (click)="clearLogPanel()" fill="outline">
+              <ion-icon name="trash" slot="icon-only"></ion-icon>
+            </ion-button>
+          </ion-col>
+          @if (showLogPanel) {
+            <ion-col size="10">
+              <ion-text color="primary">
+                Log:
+                <br />
+              </ion-text>
+              <div class="ion-padding-start">
+                <ion-text color="medium">
+                  <small [innerHTML]="logContent"></small>
+                </ion-text>
+              </div>
+            </ion-col>
+          }
+        </ion-row>
+      </ion-grid>
+    }
+
+    @if (mode === 'desktop') {
+      <ion-grid>
+        <!-- Desktop mode -->
+        <ion-row>
+          <ion-col>
+            <ion-text><h4>Desktop mode</h4></ion-text>
+          </ion-col>
+        </ion-row>
+        <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-date-short-field
+                  formControlName="empty"
+                  #desktopEmptyField
+                  placeholder="Date"
+                  [mobile]="false"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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-date-short-field
+                  formControlName="emptyRequired"
+                  placeholder="Date"
+                  [required]="true"
+                  [mobile]="false"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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-date-short-field
+                  formControlName="enable"
+                  placeholder="Date"
+                  [required]="true"
+                  [mobile]="false"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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-date-short-field formControlName="disable" placeholder="Date" [required]="true" [mobile]="false">
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-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"
+                ></mat-checkbox>
+                <mat-date-short-field
+                  #desktopReadonlyField
+                  formControlName="readonly"
+                  placeholder="Date"
+                  [readonly]="true"
+                  [mobile]="false"
+                  [clearable]="true"
+                >
+                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                </mat-date-short-field>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+
+          <!-- Hint -->
+          <ion-col size="12" size-md="6" size-lg="6">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">Hint</ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small>
+                      <pre>{{ stringify(form.controls.hint.value) }}</pre>
+                    </small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid>
+                  <ion-row>
+                    <ion-col size="4">
+                      <mat-checkbox #showHint [checked]="true">Hint ?</mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showHintAlignEnd [checked]="false" [disabled]="!showHint.checked">
+                        Align end ?
+                      </mat-checkbox>
+                    </ion-col>
+                    <ion-col size="4">
+                      <mat-checkbox #showIcons [checked]="true">Suffix icon ?</mat-checkbox>
+                    </ion-col>
+                  </ion-row>
+                  <ion-row>
+                    <ion-col>
+                      <mat-date-short-field
+                        formControlName="hint"
+                        placeholder="Date"
+                        [mobile]="false"
+                        [clearable]="true"
+                      >
+                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
+                        @if (showIcons.checked) {
+                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
+                        }
+                        @if (showHint.checked) {
+                          <mat-hint [align]="showHintAlignEnd.checked ? 'end' : 'start'">Some hint</mat-hint>
+                        }
+                      </mat-date-short-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    }
+  </form>
+</ion-content>