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

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

@@ -0,0 +1,137 @@
+<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="12">
+          <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]="false"
+                    ></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>
+                  {{stringify(form.controls.entity.value)}}
+                  </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')"
+                               [logPrefix]="'[mat-chips-initialized] '"
+                               chipColor="primary"
+                               [debug]="true"
+              ></mat-chips-field>
+              {{stringify(form.controls.entityInitial.value)}}
+            </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"
+                               [logPrefix]="'[mat-chips-disabled] '"
+                               chipColor="warning"
+                               [debug]="true"
+              ></mat-chips-field>
+              {{stringify(form.controls.disableEntity.value)}}
+            </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"
+                                      [logPrefix]="'[mat-chips-readonly] '"
+                                      [readonly]="true"
+              ></mat-chips-field>
+              {{stringify(form.controls.entity.value)}}
+            </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,175 @@
+import {Component, OnInit} from '@angular/core';
+import {UntypedFormBuilder, UntypedFormGroup} 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 {MatFormFieldAppearance} from '@angular/material/form-field';
+import {suggestFromArray} from "../../../services";
+import {MatAutocompleteConfigHolder} from '../../autocomplete/material.autocomplete.config';
+
+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 = 'legacy';
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder
+  ) {
+    this.form = formBuilder.group({
+      entity: [null, SharedValidators.entity],
+      entityInitial: [null, SharedValidators.entity],
+      disableEntity: [null, SharedValidators.entity],
+      farEntity: [null, SharedValidators.entity]
+    });
+
+    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();
+    //setTimeout(() => this.loadData(), 1500);
+
+    //
+    setTimeout(() => this.loadItems(), 1000);
+  }
+
+  // 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)
+    };
+
+    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,52 @@
+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 {TextMaskModule} from 'angular2-text-mask';
+import {NgxMaterialTimepickerModule} from 'ngx-material-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';
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    TextMaskModule,
+    NgxMaterialTimepickerModule,
+    TranslateModule.forChild(),
+    SharedDirectivesModule
+  ],
+  exports: [
+    MatIconModule,
+    MatDate,
+    MatDateTime,
+    MatDateShort
+  ],
+  declarations: [
+    MatDate,
+    MatDateTime,
+    MatDateShort
+  ]
+})
+export class SharedMatDateTimeModule {
+}
+

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

@@ -0,0 +1,132 @@
+<!-- readonly -->
+<mat-form-field *ngIf="readonly; else writable"
+                [floatLabel]="floatLabel"
+                [appearance]="appearance"
+                class="mat-form-field-disabled">
+  <div matPrefix>
+    <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+  </div>
+
+  <input matInput hidden type="text"
+         readonly
+         [placeholder]="placeholder"
+         [formControl]="formControl">
+  <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>
+
+  <div matSuffix>
+    <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+  </div>
+</mat-form-field>
+
+<!-- writable -->
+<ng-template #writable>
+
+  <mat-form-field [floatLabel]="floatLabel"
+                  [appearance]="appearance">
+
+    <mat-label>{{placeholder}}</mat-label>
+
+    <div matPrefix>
+      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+    </div>
+
+    <!-- Desktop -->
+    <input matInput #matInput autocomplete="off" type="text"
+           class="mat-input-element"
+           *ngIf="!mobile"
+           [formControl]="textControl"
+           [textMask]="{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}"
+           [placeholder]="'COMMON.DATE_PLACEHOLDER'|translate"
+           (blur)="_checkIfTouched()"
+           (keyup.arrowDown)="openDatePicker()"
+           (keyup.escape)="_preventEvent($event)"
+           [required]="required"
+           [tabindex]="tabindex"
+           [appAutofocus]="autofocus">
+    <input type="text" [formControl]="formControl" hidden
+           *ngIf="!mobile"
+           [matDatepicker]="datePicker"
+           [matDatepickerFilter]="datePickerFilter"
+           (dateChange)="_onDatePickerChange($event)"
+           readonly>
+
+    <!-- Mobile -->
+    <input #matInput autocomplete="off" type="text"
+           class="mat-input-element"
+           *ngIf="mobile"
+           [formControl]="textControl"
+           (focus)="_openDatePickerIfMobile($event)"
+           (click)="_openDatePickerIfMobile($event)"
+           [required]="required"
+           [tabindex]="tabindex"
+           readonly>
+    <input matInput type="text" [formControl]="formControl" hidden
+           *ngIf="mobile"
+           [matDatepicker]="datePicker"
+           [matDatepickerFilter]="datePickerFilter"
+           (dateChange)="_onDatePickerChange($event)"
+           readonly>
+
+    <button matSuffix type="button" mat-icon-button tabindex="-1"
+            (click)="openDatePicker()"
+            [disabled]="disabled">
+      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>
+    </button>
+
+    <mat-datepicker #datePicker
+                    [touchUi]="mobile"
+                    [disabled]="disabled"
+                    [startAt]="startDate">
+      <!-- Date picker buttons -->
+      <mat-datepicker-actions *ngIf="mobile">
+        <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>
+
+    <button matSuffix mat-icon-button tabindex="-1"
+            type="button"
+            *ngIf="clearable"
+            (click)="clear()"
+            [hidden]="formControl.disabled || !formControl.value">
+      <mat-icon>close</mat-icon>
+    </button>
+
+    <!-- errors -->
+    <mat-error *ngIf="formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey"
+               [ngSwitch]="errorKey">
+      <span *ngSwitchCase="'required'" translate>ERROR.FIELD_REQUIRED</span>
+      <span *ngSwitchCase="'validDate'" translate>ERROR.FIELD_NOT_VALID_DATE</span>
+      <span *ngSwitchCase="'dateIsAfter'">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>
+      <span *ngSwitchCase="'dateIsBefore'">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>
+      <span *ngSwitchCase="'dateRange'" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>
+      <span *ngSwitchCase="'dateMaxDuration'" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>
+      <span *ngSwitchCase="'dateMinDuration'" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>
+      <span *ngSwitchCase="'msg'">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>
+    </mat-error>
+    <ng-content select="mat-error"></ng-content>
+
+    <div matSuffix>
+      <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+    </div>
+
+    <!-- mat hint -->
+    <div class="mat-form-field-hint-wrapper" [class.cdk-visually-hidden]="formControl.invalid">
+      <div class="mat-form-field-hint-spacer"></div>
+      <ng-content select="mat-hint"></ng-content>
+    </div>
+  </mat-form-field>
+
+</ng-template>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+<ng-template #matSuffixTemplate>
+  <ng-content select="[matSuffix]"></ng-content>
+</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;
+  }
+}