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

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

@@ -0,0 +1,422 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnInit, Optional, Provider, ViewChild} from '@angular/core';
+import {ControlValueAccessor, FormGroupDirective, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormControl, ValidationErrors, Validators} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
+import {isMoment, Moment} from 'moment/moment';
+import {DATE_ISO_PATTERN, DEFAULT_PLACEHOLDER_CHAR, KEYBOARD_HIDE_DELAY_MS} from '../../constants';
+import {SharedValidators} from '../../validator/validators';
+import {isBlankString, isNil, isNilOrBlank, isNotNil, isNotNilBoolean, isNotNilOrBlank, sleep} from '../../functions';
+import {InputElement, setTabIndex} from '../../inputs';
+import {BehaviorSubject, Subscription} from 'rxjs';
+import {FloatLabelType, MatFormFieldAppearance} from '@angular/material/form-field';
+import {DateFilterFn, MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {isFocusableElement} from '../../focusable';
+import {isMobile} from '../../platforms';
+import {Keyboard} from '@capacitor/keyboard';
+import {filter} from 'rxjs/operators';
+import {MomentDateAdapter} from '@angular/material-moment-adapter';
+import {DateUtils, fromDateISOString, toDateISOString} from '../../dates';
+
+const DEFAULT_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => MatDateShort),
+  multi: true
+};
+
+const TEXT_MASK = [/\d/, /\d/, /\d/, /\d/];
+
+const noop = () => {};
+
+@Component({
+  selector: 'mat-date-short-field',
+  templateUrl: './material.dateshort.html',
+  styleUrls: ['./material.dateshort.scss'],
+  providers: [
+    DEFAULT_VALUE_ACCESSOR,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MatDateShort implements OnInit, ControlValueAccessor, InputElement {
+
+  private _onChangeCallback: (_: any) => void = noop;
+  private _onTouchedCallback: () => void = noop;
+  private readonly _subscription = new Subscription();
+  private _writing = true;
+  private _disabling = false;
+  private _tabindex: number;
+  private _readonly = false;
+
+  textControl: UntypedFormControl;
+  datePattern: string;
+  locale: string;
+  readonly mask = TEXT_MASK;
+
+  @Input() mobile: boolean;
+  @Input() formControl: UntypedFormControl;
+  @Input() formControlName: string;
+  @Input() placeholder: string;
+  @Input() floatLabel: FloatLabelType = 'auto';
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() required: boolean;
+  @Input() compact = false;
+  @Input() placeholderChar: string = DEFAULT_PLACEHOLDER_CHAR;
+  @Input() autofocus = false;
+  @Input() startDate: Moment | null = null;
+  @Input() clearable = false;
+  @Input() datePickerFilter: DateFilterFn<Moment>;
+
+  @Input() set readonly(value: boolean){
+    this._readonly = value;
+    this.markForCheck();
+  }
+
+  get readonly(): boolean {
+    return this._readonly;
+  }
+
+  @Input() set tabindex(value: number) {
+    if (this._tabindex !== value) {
+      this._tabindex = value;
+      if (!this._writing) this.updateTabIndex();
+    }
+  }
+
+  get tabindex(): number {
+    return this._tabindex;
+  }
+
+  get value(): any {
+    return this.formControl.value;
+  }
+
+  get disabled(): boolean {
+    return this.formControl.disabled;
+  }
+
+  @ViewChild('datePicker') datePicker!: MatDatepicker<Moment>;
+  @ViewChild('matInput', {static: false}) _matInput: ElementRef;
+
+  constructor(
+    private dateAdapter: MomentDateAdapter,
+    private translate: TranslateService,
+    private formBuilder: UntypedFormBuilder,
+    private cd: ChangeDetectorRef,
+    @Optional() private formGroupDir: FormGroupDirective,
+  ) {
+    this.locale = (translate.currentLang || translate.defaultLang).substring(0, 2);
+  }
+
+  ngOnInit() {
+    this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
+    if (!this.formControl) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-short-field>.');
+
+    this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+
+    this.required = isNotNilBoolean(this.required) ? this.required : (this.formControl.validator === Validators.required || isBlankString(this.required));
+
+    // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
+    if (!this.formControl.validator || this.formControl.validator === Validators.required) {
+      this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
+    }
+    else {
+      this.formControl.setValidators(this.required ? [this.formControl.validator, Validators.required, SharedValidators.validDate] :
+        [this.formControl.validator, SharedValidators.validDate]);
+    }
+
+    // Create the text control
+    this.textControl = this.formBuilder.control(null,
+      // Important: should copy errors from the model formControl
+      () => this.formControl.errors
+    );
+
+    // Get patterns to display date
+    this.updatePattern(this.translate.instant('COMMON.DATE_YEAR_PATTERN'));
+    this._subscription.add(
+      this.translate.get('COMMON.DATE_YEAR_PATTERN')
+        .subscribe((pattern) => this.updatePattern(pattern))
+    );
+
+    this._subscription.add(
+      this.textControl.valueChanges
+        .subscribe((value) => this.onFormChange(value)));
+
+    // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
+    this._subscription.add(
+    this.formControl.statusChanges
+      .pipe(
+        filter((_) => !this.readonly && !this._writing && !this._disabling) // Skip
+      )
+      .subscribe(() => {
+        this.textControl.updateValueAndValidity({emitEvent: false});
+        if (this.formControl.touched && !this.textControl.touched) {
+          this.textControl.markAsTouched();
+        }
+        this.markForCheck();
+      })
+    );
+
+    this._writing = false;
+  }
+
+  ngAfterViewInit() {
+    this.updateTabIndex();
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  writeValue(value: any): void {
+    if (this._writing) return; // Skip
+    this._writing = true;
+
+    // DEBUG
+    //console.debug("[mat-date] writeValue() with:", value);
+
+    // Convert into date
+    // Important: clone, because startOf will update the existing date
+    const date = isMoment(value) ? value.clone() : fromDateISOString(value);
+
+    if (!date || !date.isValid()) {
+      this.textControl.patchValue(null, {emitEvent: false});
+      if (this.formControl.value) {
+        this.formControl.patchValue(null, {emitEvent: false});
+        this._onChangeCallback(null);
+      }
+    }
+    else {
+      // Reset day
+      const year = date.startOf('year');
+      const yearStr = this.dateAdapter.format(year, this.datePattern);
+
+      if (this.textControl.value !== yearStr) {
+        // Update text control
+        this.textControl.patchValue(yearStr, {emitEvent: false});
+      }
+    }
+
+    this._writing = false;
+    this.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this._disabling) return;
+
+    this._disabling = true;
+    if (isDisabled) {
+      this.textControl.disable({emitEvent: false});
+    } else {
+      this.textControl.enable({emitEvent: false});
+    }
+    this._disabling = false;
+
+    this.markForCheck();
+  }
+
+  openDatePicker() {
+    if (!this.datePicker) return;
+
+    if (!this.datePicker.opened) {
+      // DEBUG
+      //console.debug('[mat-date-short] Opening date picker...');
+
+      this.datePicker.open();
+    }
+  }
+
+  focus() {
+    if (!this._matInput) return;
+
+    setTimeout(() => {
+      if (isFocusableElement(this._matInput.nativeElement)) {
+        this._matInput.nativeElement.focus();
+      }
+    });
+  }
+
+  clear() {
+    this.textControl.patchValue(null, {emitEvent: false});
+    this.formControl.setValue(null, {emitEvent: false});
+    this._onChangeCallback(null);
+    this.markAsTouched();
+    this.markAsDirty();
+  }
+
+  /* -- protected methods -- */
+
+  protected _onDatePickerChange(event: MatDatepickerInputEvent<Moment>): void {
+    // Make sure event is valid
+    if (!event || (event.value !== null && !isMoment(event.value))) {
+      console.warn('Invalid MatDatepicker event. Skipping', event);
+      return; // Skip
+    }
+
+    let value = event.value;
+
+    // No value, but mobile mode: use the current year
+    if (!value && this.mobile) {
+      value = DateUtils.moment().locale(this.locale)
+        .startOf('year')
+        .utc(true);
+      this.formControl.setValue(toDateISOString(value), {
+        emitEvent: false // Will call writeValue()
+      });
+      return;
+    }
+
+    let date = value?.clone().locale(this.locale)
+      .startOf('year')
+      .utc(true);
+    const dateStr = date && this.dateAdapter.format(date, this.datePattern) || null;
+
+    if (this.textControl.value !== dateStr) {
+      // DEBUG
+      //console.debug('[mat-date-time] Emit new value: ' + dateStr);
+
+      this.textControl.setValue(dateStr, {
+        emitEvent: true // Will call onFormChange
+      });
+    }
+  }
+
+  protected _openDatePickerIfMobile(event: Event) {
+    if (!this.mobile
+      || event?.defaultPrevented
+      || this.datePicker?.opened
+      || this.disabled) return;
+
+    //console.debug('[mat-date-short] Preparing to open date picker... ');
+
+    this._preventEvent(event);
+
+    // Open the picker
+    this.openDatePicker();
+  }
+
+  protected _checkIfTouched(opts?: {emitEvent?: boolean}) {
+    if (this.textControl.touched) {
+      this._onTouchedCallback();
+
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  // select only year
+  protected _closeDatePicker(value: Moment) {
+    this.datePicker?.close();
+
+    // Get the model value
+    const isoDate = toDateISOString(value);
+
+    if (this.formControl.value !== isoDate) {
+      this.formControl.setValue(isoDate);
+    }
+  }
+
+  protected _preventEvent(event: Event) {
+    if (!event) return;
+    event.preventDefault();
+    if (event.stopPropagation) event.stopPropagation();
+    if (event.stopImmediatePropagation) event.stopImmediatePropagation();
+  }
+
+  /* -- private methods -- */
+
+  private updatePattern(pattern: string) {
+    pattern = pattern !== 'COMMON.DATE_YEAR_PATTERN' ? pattern : 'YYYY';
+    if (this.datePattern !== pattern) {
+      this.datePattern = pattern;
+      this.markForCheck();
+    }
+  }
+
+  private onFormChange(value: string): void {
+    if (this._writing) return; // Skip if call by self
+    this._writing = true;
+
+    if (value) {
+      // Make to remove placeholder chars
+      while (value.indexOf(this.placeholderChar) !== -1) {
+        value = value.replace(this.placeholderChar, '');
+      }
+    }
+
+    // Parse day string
+    let date = value && this.dateAdapter.parse(value, this.datePattern) || null;
+
+    // Reset time
+    date = date && date.locale(this.locale).startOf('year');
+
+    // Get the model value
+    const dateStr = date && date.isValid() ? toDateISOString(date) : date;
+    // Set model value
+    if (this.formControl.value !== dateStr) {
+
+      // DEBUG
+      //console.debug('[mat-date-time] Emit new value: ' + dateStr);
+
+      // Apply to form control. => Will call writeValue()
+      // NOT NEED, because a formControl should NOT be used by multiple fields
+      //this.formControl.setValue(dateStr, {emitEvent: false});
+
+      // Changes comes from inside function: use the callback
+      this._onChangeCallback(dateStr);
+
+      // Check if need to update controls
+      this._checkIfTouched();
+
+      // Force textControl validity
+      this.textControl.updateValueAndValidity();
+    }
+
+    this._writing = false;
+    this.markForCheck();
+  }
+
+  private async waitKeyboardHide(waitKeyboardDelay: boolean) {
+
+    try {
+      // Force keyboard to be hide
+      await Keyboard.hide();
+
+      // Wait an additional delay, to be sure the keyboard has been totally hidden
+      await sleep(KEYBOARD_HIDE_DELAY_MS);
+    }
+    catch(e) {
+      console.error(e);
+    }
+  }
+
+  private updateTabIndex() {
+    if (isNil(this._tabindex) || this._tabindex === -1) return; // skip
+
+    // Focus to input
+    setTimeout(() => {
+      setTabIndex(this._matInput, this._tabindex);
+      this.markForCheck();
+    });
+  }
+
+  private markAsTouched(opts?: {onlySelf?: boolean}) {
+    this.textControl.markAsTouched(opts);
+    this._onTouchedCallback();
+    this.markForCheck();
+  }
+
+  private markAsDirty(opts?: any) {
+    this.formControl.markAsDirty(opts);
+  }
+
+  private markForCheck() {
+    this.cd.markForCheck();
+  }
+}

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

@@ -0,0 +1,224 @@
+<!-- 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: displayPattern} }}</ion-text>
+</mat-form-field>
+
+<!-- writable + time -->
+<ng-template #writable >
+  <ion-grid class="ion-no-padding mat-form-field-{{appearance}}">
+    <ion-row class="ion-no-padding no-wrap" nowrap>
+
+      <!-- day -->
+      <ion-col class="day ion-no-padding">
+        <mat-form-field [floatLabel]="floatLabel"
+                        [appearance]="appearance"
+                        [class.mat-form-field-invalid]="formControl.touched && formControl.invalid"
+                        >
+
+          <mat-label (focusin)="mobile && _preventEvent($event)" *ngIf="placeholder" >{{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]="dayControl"
+                 [textMask]="{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}"
+                 [placeholder]="'COMMON.DATE_PLACEHOLDER'|translate"
+                 (blur)="_checkIfTouched()"
+                 (keyup.arrowDown)="openDatePicker($event, datePicker)"
+                 (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]="dayControl"
+                 (click)="_openDatePickerIfMobile($event, datePicker)"
+                 [required]="required"
+                 [tabindex]="tabindex"
+                 readonly>
+          <input matInput type="text" [formControl]="formControl" hidden
+                 *ngIf="mobile"
+                 [matDatepicker]="datePicker"
+                 [matDatepickerFilter]="datePickerFilter"
+                 (dateChange)="_onDatePickerChange($event)"
+                 readonly>
+
+          <button type="button" mat-icon-button tabindex="-1" matSuffix
+                  (click)="openDatePicker($event, datePicker)"
+                  [disabled]="formControl.disabled">
+            <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>
+          </button>
+          <button matSuffix mat-icon-button tabindex="-1"
+                  type="button"
+                  *ngIf="clearable"
+                  (click)="clear()"
+                  [hidden]="formControl.disabled || !formControl.value">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-form-field>
+
+        <!-- The date picker -->
+        <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>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>
+              <ion-icon slot="end" name="chevron-forward"></ion-icon>
+            </ion-button>
+          </mat-datepicker-actions>
+        </mat-datepicker>
+
+        <!-- cancel button -->
+        <ng-template #dateHeader>
+          <ion-button fill="clear" color="dark">
+            <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+          </ion-button>
+        </ng-template>
+
+        <div class="mat-form-field-subscript mat-form-field-subscript-wrapper" >
+          <!-- errors -->
+          <mat-error  *ngIf="formControl.touched && formControl.invalid && 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_TIME</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>
+
+          <!-- 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>
+        </div>
+
+      </ion-col>
+
+      <!-- hour -->
+      <ion-col class="hour ion-no-padding">
+        <mat-form-field [floatLabel]="floatLabel"
+                        [appearance]="appearance"
+                        [class.mat-form-field-invalid]="formControl.touched && (hourControl.invalid || formControl.invalid)">
+          <mat-label *ngIf="placeholder && floatLabel != 'never'" translate>COMMON.TIME</mat-label>
+
+          <input matInput #matInput type="text" [formControl]="hourControl"
+                 *ngIf="!mobile"
+                 class="mat-input-element"
+                 autocomplete="off"
+                 min="0" max="23"
+                 [textMask]="{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}"
+                 [placeholder]="'COMMON.TIME_PLACEHOLDER'|translate"
+                 [required]="required"
+                 (keyup.arrowDown)="openTimePicker($event)"
+                 (keyup.escape)="_preventEvent($event)"
+                 (blur)="_checkIfTouched()"
+                 [tabindex]="tabindex !== undefined ? tabindex+1 : undefined">
+
+          <input #matInput type="text"
+                 class="mat-input-element"
+                 *ngIf="mobile"
+                 [formControl]="hourControl"
+                 (click)="_openTimePickerIfMobile($event)"
+                 readonly>
+
+          <!-- Hide the final (hidden) input -->
+          <input matInput [formControl]="hourControl"
+                 hidden
+                 [ngxTimepicker]="timePicker"
+                 [format]="24"
+                 readonly>
+
+          <button matSuffix type="button" mat-icon-button
+                  tabindex="-1"
+                  *ngIf="!compact && !mobile"
+                  [disabled]="formControl.disabled"
+                  (click)="openTimePicker($event)" >
+            <mat-icon>keyboard_arrow_down</mat-icon>
+          </button>
+          <button matSuffix type="button" mat-icon-button
+                  tabindex="-1"
+                  *ngIf="!compact && mobile"
+                  [disabled]="formControl.disabled"
+                  (click)="_openTimePickerIfMobile($event)">
+            <mat-icon>access_time</mat-icon>
+          </button>
+
+          <ngx-material-timepicker #timePicker [@.disabled]="true"
+                                   (timeSet)="_onTimePickerChange($event)"
+                                   [ESC]="!mobile"
+                                   [defaultTime]="'00:00'"
+                                   [cancelBtnTmpl]="timePickerCancelButton"
+                                   [confirmBtnTmpl]="timePickerOkButton"
+                                   [preventOverlayClick]="mobile"
+                                   [enableKeyboardInput]="false"
+                                   [disableAnimation]="true">
+            <!-- cancel button -->
+            <ng-template #timePickerCancelButton>
+              <ion-button fill="clear" color="dark">
+                <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+              </ion-button>
+            </ng-template>
+
+            <!-- confirm button -->
+            <ng-template #timePickerOkButton>
+              <ion-button fill="solid" color="tertiary">
+                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
+              </ion-button>
+            </ng-template>
+
+          </ngx-material-timepicker>
+        </mat-form-field>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+
+</ng-template>
+
+<ng-template #iconDesktop>
+  <mat-icon>keyboard_arrow_down</mat-icon>
+</ng-template>
+
+<ng-template #iconDate>
+  <mat-icon>date_range</mat-icon>
+</ng-template>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>