@sumaris-net/ngx-components 18.12.13 → 18.14.0

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

@@ -0,0 +1,207 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Chips 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 size="6">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-text color="primary">Suggest() function</ion-text>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-grid class="ion-no-padding">
+                <ion-row>
+                  <ion-col>
+                    <mat-chips-field
+                      formControlName="entity"
+                      placeholder="A chip field"
+                      [appearance]="appearance"
+                      [config]="autocompleteFields.get('entity-suggestFn')"
+                      [logPrefix]="'[mat-chips-empty] '"
+                      chipColor="accent"
+                      [debug]="true"
+                    ></mat-chips-field>
+                  </ion-col>
+
+                  <ion-col>
+                    <mat-form-field [appearance]="appearance">
+                      <mat-label>Another field</mat-label>
+                      <input matInput type="text" />
+                    </mat-form-field>
+                  </ion-col>
+                </ion-row>
+                <ion-row>
+                  <ion-col>
+                    {{ form.controls.entity.value | json }}
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col size="6">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-text color="primary">Required</ion-text>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <pre><small>required: true</small></pre>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-grid class="ion-no-padding">
+                <ion-row>
+                  <ion-col>
+                    <mat-chips-field
+                      formControlName="requiredEntity"
+                      placeholder="A required chip field"
+                      [appearance]="appearance"
+                      [config]="autocompleteFields.get('entity-items')"
+                      [logPrefix]="'[mat-chips-required] '"
+                      chipColor="accent"
+                      required
+                      [debug]="true"
+                    ></mat-chips-field>
+                  </ion-col>
+
+                  <ion-col>
+                    <mat-form-field [appearance]="appearance">
+                      <mat-label>Another required field</mat-label>
+                      <input matInput type="text" required />
+                    </mat-form-field>
+                  </ion-col>
+                </ion-row>
+                <ion-row>
+                  <ion-col>
+                    {{ form.controls.entity.value | json }}
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Suggest() function with initial value</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-chips-field
+                formControlName="entityInitial"
+                [config]="autocompleteFields.get('entity-suggestFn')"
+                placeholder="A suggestFn field"
+                [logPrefix]="'[mat-chips-initialized] '"
+                chipColor="primary"
+                [debug]="true"
+              ></mat-chips-field>
+              {{ form.controls.entityInitial.value | json }}
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Disabled control</ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-chips-field
+                formControlName="disableEntity"
+                [config]="autocompleteFields.get('entity-suggestFn')"
+                [equals]="equals"
+                placeholder="A disabled field"
+                [logPrefix]="'[mat-chips-disabled] '"
+                chipColor="warn"
+                [debug]="true"
+              ></mat-chips-field>
+              {{ form.controls.disableEntity.value | json }}
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Readonly control</ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-chips-field
+                formControlName="entity"
+                [config]="autocompleteFields.get('entity-suggestFn')"
+                [equals]="equals"
+                placeholder="A readonly field"
+                [logPrefix]="'[mat-chips-readonly] '"
+                [readonly]="true"
+              ></mat-chips-field>
+              {{ form.controls.entity?.value | json }}
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Suggest with length threshold</ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small>
+                    <pre>
+                          suggest: (value, filter) => LoadResult&lt;any&gt;
+                          suggestLengthThreshold: '3'</pre
+                    >
+                  </small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-chips-field
+                formControlName="entity"
+                placeholder="Entity"
+                [config]="autocompleteFields.get('entity-suggestFn')"
+                [equals]="equals"
+                [suggestLengthThreshold]="3"
+                [logPrefix]="'[mat-chips-suggestLengthThreshold] '"
+                [debug]="true"
+              ></mat-chips-field>
+              {{ form.controls.entity?.value | json }}
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+</ion-content>

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

@@ -0,0 +1,169 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { SharedValidators } from '../../../validator/validators';
+import { isNil, isNotNil, sleep } from '../../../functions';
+import { LoadResult } from '../../../services/entity-service.class';
+import { EntityUtils } from '../../../../core/services/model/entity.model';
+import { suggestFromArray } from '../../../services';
+import { MatAutocompleteConfigHolder } from '../../autocomplete/material.autocomplete.config';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+
+class EntityTestClass {
+  id: number;
+  label: string;
+  name: string;
+}
+
+const FAKE_ENTITIES: EntityTestClass[] = [
+  { id: 1, label: 'AAA', name: 'Item A' },
+  { id: 2, label: 'BBB', name: 'Item B' },
+  { id: 3, label: 'CCC', name: 'Item C' },
+  { id: 4, label: 'DDD', name: 'Item D' },
+  { id: 5, label: 'EEE', name: 'Item E' },
+  { id: 6, label: 'FFF', name: 'Item F' },
+  { id: 7, label: 'GGG', name: 'Item G' },
+];
+
+function deepCopy(values?: EntityTestClass[], size?: number): EntityTestClass[] {
+  if (isNil(size)) {
+    return (values || FAKE_ENTITIES).map((entity) => Object.assign({}, entity));
+  }
+
+  let result = [];
+  let i = 1;
+  while (result.length < size) {
+    result = result.concat(
+      (values || FAKE_ENTITIES).map((entity) => {
+        const name = entity.name + ' #' + i;
+        return { ...entity, id: i++, name };
+      })
+    );
+  }
+  return result.slice(0, size);
+}
+
+@Component({
+  selector: 'app-chips-test',
+  templateUrl: './chips.test.html',
+})
+export class ChipsTestPage implements OnInit {
+  private _items = deepCopy(FAKE_ENTITIES, 100);
+  private _$items = new BehaviorSubject<EntityTestClass[]>(undefined);
+
+  form: UntypedFormGroup;
+  autocompleteFields = new MatAutocompleteConfigHolder();
+  appearance: MatFormFieldAppearance = 'fill';
+  mobile = true;
+
+  constructor(protected formBuilder: UntypedFormBuilder) {
+    this.form = formBuilder.group({
+      entity: [null, SharedValidators.entity],
+      entityInitial: [null, SharedValidators.entity],
+      disableEntity: [null, SharedValidators.entity],
+      farEntity: [null, SharedValidators.entity],
+      requiredEntity: [null, Validators.compose([Validators.required, SharedValidators.entities])],
+    });
+
+    this.form.get('disableEntity').disable();
+  }
+
+  ngOnInit() {
+    // From suggest
+    this.autocompleteFields.add('entity-suggestFn', {
+      suggestFn: (value, filter) => this.suggest(value, filter),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+      equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0,
+    });
+
+    // From items
+    this.autocompleteFields.add('entity-items', {
+      items: this._items.slice(),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+      equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0,
+    });
+
+    // Far entity, in the list
+    this.autocompleteFields.add('entity-far', {
+      suggestFn: (value, filter) => this.suggest(value, filter),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // From $items observable
+    this.autocompleteFields.add('entity-$items', {
+      items: this._$items,
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    this.loadData();
+  }
+
+  // Load the form with data
+  async loadData() {
+    const items = deepCopy(FAKE_ENTITIES);
+    const data = {
+      entity: items.slice(0, 1), // Select the first
+      entityInitial: items.slice(1, 2),
+      disableEntity: items.slice(1, 2),
+      farEntity: items[2],
+      requiredEntity: null,
+    };
+
+    this.form.setValue(data);
+
+    // Load observables
+    setTimeout(() => this.loadItems(), 1000);
+  }
+
+  async loadItems() {
+    this._$items.next(this._items.slice());
+  }
+
+  entityToString(item: any) {
+    return [(item && item.label) || undefined, (item && item.name) || undefined].filter(isNotNil).join(' - ');
+  }
+
+  async suggest(value: any, filter?: any): Promise<LoadResult<EntityTestClass>> {
+    filter = { offset: 0, size: 30, ...filter };
+    const res = suggestFromArray(this._items, value, {
+      ...filter,
+      searchAttributes: ['label', 'name'],
+    });
+
+    // Simulate a size = 30
+    const total = res.total || res.data.length;
+
+    const nextOffset = filter.offset + res.data.length;
+    if (nextOffset < total) {
+      filter = { ...filter, offset: nextOffset };
+      return {
+        total,
+        data: res.data,
+        fetchMore: async (variables) => {
+          await sleep(1000); // Simulate access to server
+          return this.suggest(value, { ...filter, ...variables });
+        },
+      };
+    }
+
+    return res;
+  }
+
+  doSubmit(_) {
+    console.debug('Validate form: ', this.form.value);
+  }
+
+  equals(o1: EntityTestClass, o2: EntityTestClass): boolean {
+    return o1 && o2 && o1.id === o2.id;
+  }
+
+  /* -- protected methods -- */
+
+  stringify(value: any) {
+    return JSON.stringify(value);
+  }
+}

package/src/app/shared/material/datetime/datetime.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { MatCommonModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { SharedPipesModule } from '../../pipes/pipes.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDate } from './material.date';
+import { MatDateTime } from './material.datetime';
+import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDateShort } from './material.dateshort';
+import { SharedDirectivesModule } from '../../directives/directives.module';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MaskitoDirective } from '@maskito/angular';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    MaskitoDirective,
+    TranslateModule.forChild(),
+    SharedDirectivesModule,
+    NgxMatTimepickerModule,
+  ],
+  exports: [MatIconModule, MatDate, MatDateTime, MatDateShort],
+  declarations: [MatDate, MatDateTime, MatDateShort],
+})
+export class SharedMatDateTimeModule {}

package/src/app/shared/material/datetime/material.date.html

@@ -0,0 +1,186 @@
+<!-- readonly -->
+@if (readonly) {
+  <mat-form-field
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    class="mat-form-field-disabled"
+  >
+    <div matPrefix>
+      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+    </div>
+    @if (floatLabel !== 'never' && !!placeholder) {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+    <input matInput hidden type="text" readonly [formControl]="formControl" />
+    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>
+    <div matSuffix>
+      <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+    </div>
+
+    <!-- hints -->
+    <mat-hint [class.cdk-visually-hidden]="formControl.invalid">
+      <ng-container *ngTemplateOutlet="matHintTemplate"></ng-container>
+    </mat-hint>
+  </mat-form-field>
+} @else {
+  <mat-form-field
+    [floatLabel]="floatLabel | asFloatLabelType"
+    (focus)="_openDatePickerIfMobile($event)"
+    (click)="_openDatePickerIfMobile($event)"
+    [appearance]="appearance"
+  >
+    <div matPrefix>
+      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+    </div>
+
+    @if (floatLabel !== 'never' && !!placeholder) {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+    <!-- Desktop -->
+    @if (!mobile) {
+      <input
+        matInput
+        #matInput
+        autocomplete="off"
+        type="text"
+        [maskito]="maskitoOptions"
+        [formControl]="textControl"
+        (blur)="_onBlur()"
+        (keyup.arrowDown)="openDatePicker()"
+        (keyup.escape)="_preventEvent($event)"
+        [required]="required"
+        [tabindex]="tabindex"
+        [appAutofocus]="autofocus"
+      />
+      <input
+        type="text"
+        [formControl]="formControl"
+        hidden
+        [matDatepicker]="datePicker"
+        [matDatepickerFilter]="datePickerFilter"
+        (dateChange)="_onDatePickerChange($event)"
+        readonly
+      />
+    } @else {
+      <!-- Mobile -->
+      <input
+        #matInput
+        autocomplete="off"
+        type="text"
+        class="mat-mdc-form-field-input-control mdc-text-field__input"
+        [formControl]="textControl"
+        [required]="required"
+        [tabindex]="tabindex"
+        readonly
+      />
+      <input
+        matInput
+        type="text"
+        [formControl]="formControl"
+        hidden
+        [matDatepicker]="datePicker"
+        [matDatepickerFilter]="datePickerFilter"
+        (dateChange)="_onDatePickerChange($event)"
+        readonly
+      />
+    }
+
+    <div matSuffix>
+      <button type="button" mat-icon-button tabindex="-1" (click)="openDatePicker()" [disabled]="disabled">
+        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>
+      </button>
+
+      @if (clearable) {
+        <button
+          mat-icon-button
+          tabindex="-1"
+          type="button"
+          (click)="clear($event)"
+          [hidden]="formControl.disabled || !formControl.value"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+      }
+
+      <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+    </div>
+
+    <!-- errors -->
+    <mat-error *ngIf="formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey">
+      @switch (errorKey) {
+        @case ('required') {
+          <span translate>ERROR.FIELD_REQUIRED</span>
+        }
+        @case ('validDate') {
+          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>
+        }
+        @case ('dateIsAfter') {
+          <span>
+            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}
+          </span>
+        }
+        @case ('dateIsBefore') {
+          <span>
+            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}
+          </span>
+        }
+        @case ('dateRange') {
+          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>
+        }
+        @case ('dateMaxDuration') {
+          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>
+        }
+        @case ('dateMinDuration') {
+          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>
+        }
+        @case ('msg') {
+          <span>
+            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}
+          </span>
+        }
+      }
+    </mat-error>
+    <ng-container *ngTemplateOutlet="matErrorTemplate"></ng-container>
+    <!-- hints -->
+    @if (!formControl.invalid) {
+      <mat-hint>
+        <ng-container *ngTemplateOutlet="matHintTemplate"></ng-container>
+      </mat-hint>
+    }
+  </mat-form-field>
+
+  <mat-datepicker #datePicker [touchUi]="mobile" [disabled]="disabled" [startAt]="startDate">
+    <!-- Date picker buttons -->
+    @if (mobile) {
+      <mat-datepicker-actions>
+        <ion-button fill="clear" color="dark" matDatepickerCancel>
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+        <ion-button fill="solid" color="tertiary" matDatepickerApply>
+          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
+        </ion-button>
+      </mat-datepicker-actions>
+    }
+  </mat-datepicker>
+}
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+<ng-template #matSuffixTemplate>
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>
+
+<ng-template #matErrorTemplate>
+  <ng-content select="mat-error,[matError]"></ng-content>
+</ng-template>
+
+<ng-template #matHintTemplate>
+  <div class="mat-mdc-form-field-hint-wrapper">
+    <ng-content select="mat-hint:not([align='end']),[matHint]"></ng-content>
+    <div class="mat-mdc-form-field-hint-spacer"></div>
+    <ng-content select="mat-hint[align='end']"></ng-content>
+  </div>
+</ng-template>

package/src/app/shared/material/datetime/material.date.scss

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+}
+
+mat-form-field {
+  input[readonly] {
+    user-select: none !important;
+  }
+  .datetime-md {
+    padding: 0 !important;
+  }
+  button[hidden] {
+    display: none;
+  }
+}