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

package/src/app/core/form/text-popover/testing/text-popover.testing.html

@@ -1,45 +0,0 @@
-<ion-toolbar color="primary">
-  <ion-title>Text popover</ion-title>
-</ion-toolbar>
-
-<ion-content class="ion-padding">
-
-  <p>Multi lines examples:<br/>
-    <small>Press Ctrl+Enter to validate</small>
-    <small>
-      <pre>multiline: true</pre>
-    </small>
-  </p>
-
-  <ion-button (click)="showPopover($event, {})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>
-  </ion-button>
-
-  <ion-button (click)="showPopover($event, {autofocus: true})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>&nbsp;(autofocus)
-  </ion-button>
-
-  <ion-button (click)="showSharePopoverWithButtons($event, {autofocus: true})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>&nbsp;(headerButtons)
-  </ion-button>
-
-  <p>One line examples:
-    <small>
-      <pre>multiline: false</pre>
-    </small>
-  </p>
-
-
-  <ion-button (click)="showPopover($event, {multiline : false})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>&nbsp;
-  </ion-button>
-
-  <ion-button (click)="showPopover($event, {multiline : false, autofocus: true})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>&nbsp;(autofocus)
-  </ion-button>
-
-  <ion-button (click)="showSharePopoverWithButtons($event, {multiline : false})" color="tertiary">
-    <span translate>COMMON.BTN_SHOW</span>&nbsp;(headerButtons)
-  </ion-button>
-
-</ion-content>

package/src/app/core/form/text-popover/testing/text-popover.testing.module.ts

@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {IonicModule} from '@ionic/angular';
-import {CommonModule} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {TextPopoverTestingPage} from './text-popover.testing';
-
-const routes: Routes = [
-  {
-    path: 'text-popover',
-    pathMatch: 'full',
-    component: TextPopoverTestingPage
-  }
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    TranslateModule.forChild(),
-    RouterModule.forChild(routes)
-  ],
-  declarations: [
-    TextPopoverTestingPage
-  ],
-  exports: [
-    RouterModule,
-    TextPopoverTestingPage
-  ]
-})
-export class TextPopoverTestingModule {
-}

package/src/app/core/form/text-popover/testing/text-popover.testing.ts

@@ -1,77 +0,0 @@
-import {Component} from '@angular/core';
-import {PopoverController, ToastController} from '@ionic/angular';
-import {TextPopover, TextPopoverOptions} from '../text-popover.component';
-import {Clipboard} from '@capacitor/clipboard';
-import {Toasts} from '../../../../shared/toast/toasts';
-import {TranslateService} from '@ngx-translate/core';
-
-@Component({
-  selector: 'text-popover-testing',
-  templateUrl: 'text-popover.testing.html'
-})
-export class TextPopoverTestingPage  {
-
-  constructor(
-    private popoverController: PopoverController,
-    private toastController: ToastController,
-    private translate: TranslateService,
-  ) {
-  }
-
-  async showPopover(event: Event, opts?: Partial<TextPopoverOptions>) {
-    const modal = await this.popoverController.create({
-      component: TextPopover,
-      componentProps: <TextPopoverOptions>{
-        title: 'modalTitle',
-        headerColor: 'primary',
-        placeholder: 'your text',
-        ...opts
-      },
-      backdropDismiss: false,
-      keyboardClose: false,
-      event,
-      translucent: true,
-      cssClass: 'popover-large',
-    });
-
-    await modal.present();
-    const { data } = await modal.onDidDismiss();
-
-    if (data) {
-      console.info('Popover result: ', data);
-    }
-  }
-
-
-  protected async showSharePopoverWithButtons(event: UIEvent, opts?: Partial<TextPopoverOptions>) {
-    opts = {
-      ...opts,
-      text: opts?.multiline !== false
-        ? 'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit'
-        : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      editing: false,
-      headerButtons: [
-        {
-          icon: 'copy',
-          text: 'Copy',
-          fill: 'outline',
-          side: 'end',
-          handler: async (value: string) => {
-            await Clipboard.write({
-              label: opts?.title,
-              string: value,
-            });
-
-            await Toasts.show(this.toastController, this.translate, {
-              type: 'info', message: 'INFO.COPY_SUCCEED'
-            });
-
-            return false; // Avoid dismiss
-          }
-        },
-      ],
-    };
-
-    return this.showPopover(event, opts);
-  }
-}

package/src/app/core/form/text-popover/text-form.component.html

@@ -1,44 +0,0 @@
-<form class="form-container" [formGroup]="form" (ngSubmit)="onSubmit.emit($event)">
-  <mat-form-field *ngIf="multiline; else monoline">
-    <textarea
-      #textArea
-      matInput
-      [formControl]="control"
-      [placeholder]="placeholder"
-      [readonly]="control.disabled"
-      [class.fixed-height]="!autoHeight"
-      [cdkTextareaAutosize]="autoHeight"
-      (keyup)="textAreaChanged($event)"
-      (keydown.control.enter)="onSubmit.emit($event)"
-      [autofocus]="autofocus"
-    ></textarea>
-    <mat-error *ngIf="control.hasError('maxlength')">
-      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}
-    </mat-error>
-    <mat-hint *ngIf="maxLength" align="end">
-      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}
-    </mat-hint>
-  </mat-form-field>
-  <ng-template #monoline>
-    <mat-form-field>
-      <input
-        #textInput
-        matInput
-        [formControl]="control"
-        [placeholder]="placeholder"
-        [readonly]="control.disabled"
-        [appAutofocus]="autofocus"
-        (keydown.control.enter)="onSubmit.emit($event)"
-      />
-      <mat-error *ngIf="control.hasError('maxlength')">
-        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}
-      </mat-error>
-      <mat-error *ngIf="control.hasError('pattern')">
-        {{ 'ERROR.FIELD_INVALID' | translate }}
-      </mat-error>
-      <mat-hint *ngIf="maxLength" align="end">
-        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}
-      </mat-hint>
-    </mat-form-field>
-  </ng-template>
-</form>

package/src/app/core/form/text-popover/text-form.component.scss

@@ -1,8 +0,0 @@
-textarea {
-  --textarea-height: 11.5em;
-  max-height: var(--textarea-height);
-
-  &.fixed-height {
-    height: var(--textarea-height);
-  }
-}

package/src/app/core/form/text-popover/text-form.component.ts

@@ -1,65 +0,0 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Injector, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {UntypedFormBuilder, UntypedFormControl, ValidatorFn, Validators} from '@angular/forms';
-import {CdkTextareaAutosize} from '@angular/cdk/text-field';
-import {AppForm} from '../form.class';
-import {isNotNil} from '../../../shared/functions';
-import {focusInput} from '../../../shared/inputs';
-
-@Component({
-  selector: 'app-text-form',
-  templateUrl: './text-form.component.html',
-  styleUrls: ['./text-form.component.scss'],
-})
-export class TextForm extends AppForm<{text: string}> implements OnInit {
-  @Input() showError = true;
-  @Input() placeholder: string;
-  @Input() multiline = true;
-  @Input() autoHeight = false;
-  @Input() maxLength = 2000;
-  @Input() autofocus = false;
-  @Input() validator: ValidatorFn = null;
-
-  @Output() textAreaChanges = new EventEmitter<string>();
-
-  @ViewChild('textArea') textArea: ElementRef;
-  @ViewChild('textInput') textInput: ElementRef;
-  @ViewChild(CdkTextareaAutosize) autosizeDirective: CdkTextareaAutosize;
-
-  control: UntypedFormControl;
-
-  constructor(protected injector: Injector, protected cd: ChangeDetectorRef, protected formBuilder: UntypedFormBuilder) {
-    super(injector);
-  }
-
-  ngOnInit() {
-    // Compute validators
-    const validators = isNotNil(this.maxLength) && this.maxLength > 0 ? [Validators.maxLength(this.maxLength)] : [];
-    if (this.validator) validators.push(this.validator);
-
-    // Create the form
-    const form = this.formBuilder.group({
-      text: [null, validators.length ? Validators.compose(validators) : null]
-    });
-    this.control = form.get('text') as UntypedFormControl;
-    this.setForm(form);
-
-    super.ngOnInit();
-  }
-
-  textAreaChanged(event: KeyboardEvent) {
-    this.textAreaChanges.emit(this.control.value);
-  }
-
-  containerResize() {
-    this.autosizeDirective?.resizeToFitContent(true);
-  }
-
-  focusInput() {
-    if (this.textArea) focusInput(this.textArea);
-    if (this.textInput) focusInput(this.textInput);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/core/form/text-popover/text-popover.component.html

@@ -1,86 +0,0 @@
-<ion-header *ngIf="showHeader">
-  <ion-toolbar [color]="headerColor">
-    <ion-buttons slot="start">
-      <ion-button *ngIf="mobile && editing"
-                  (click)="cancel()"
-                  [title]="'COMMON.BTN_CANCEL'|translate">
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-      <ion-button *ngFor="let button of headerButtons|arrayFilter: isStartSide"
-                  [fill]="button.fill"
-                  [color]="button.color"
-                  (click)="clickButton(button)">
-        <ion-icon *ngIf="button.icon" [slot]="button.text ? 'start' : 'icon-only'" [name]="button.icon"></ion-icon>
-        <ion-text *ngIf="button.text">{{button.text|translate}}</ion-text>
-      </ion-button>
-    </ion-buttons>
-
-    <ion-title *ngIf="title">{{title|translate}}</ion-title>
-
-    <ion-buttons slot="end">
-      <ion-button *ngFor="let button of headerButtons|arrayFilter: isEndSide"
-                  [fill]="button.fill"
-                  [color]="button.color"
-                  (click)="clickButton(button)">
-        <ion-icon *ngIf="button.icon" [slot]="button.text ? 'start' : 'icon-only'" [name]="button.icon"></ion-icon>
-        <ion-text *ngIf="button.text">{{button.text|translate}}</ion-text>
-      </ion-button>
-
-      <ng-container *ngIf="mobile">
-        <ion-button *ngIf="editing" (click)="onValidate($event)"
-                    [disabled]="disabled"
-                    [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate">
-          <ion-icon slot="icon-only" name="checkmark"></ion-icon>
-        </ion-button>
-        <ion-button *ngIf="!editing"
-                    (click)="cancel()"
-                    [title]="'COMMON.BTN_CLOSE'|translate">
-          <ion-icon slot="icon-only" name="close"></ion-icon>
-        </ion-button>
-      </ng-container>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding"
-             [class.has-header]="showHeader"
-             cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
-  <ion-item *ngIf="form.error" visible-xs visible-sm visible-mobile lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" class="error" [innerHTML]="form.error|translate"></ion-label>
-  </ion-item>
-
-  <app-text-form #form [placeholder]="placeholder"
-                 [multiline]="multiline"
-                 [maxLength]="maxLength"
-                 [autoHeight]="autoHeight"
-                 [autofocus]="editing && autofocus"
-                 [validator]="validator"
-                 (onSubmit)="onValidate($event)"
-  ></app-text-form>
-</ion-content>
-
-<ion-footer *ngIf="showFooter">
-  <ion-toolbar>
-    <ion-row class="ion-no-padding" nowrap>
-      <ion-col>
-
-      </ion-col>
-
-      <ion-col size="auto">
-        <ion-button fill="clear" color="dark" (click)="cancel()">
-          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-        </ion-button>
-        <ion-button
-          [fill]="disabled ? 'clear' : 'solid'"
-          (click)="onValidate($event)"
-          (keyup.enter)="onValidate($event)"
-          color="tertiary"
-          [disabled]="disabled"
-          [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate">
-          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
-</ion-footer>

package/src/app/core/form/text-popover/text-popover.component.scss

@@ -1,7 +0,0 @@
-ion-content {
-  --textarea-height: 11.5em;  // ~ 10 lines
-
-  &.has-header {
-    --textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em));
-  }
-}

package/src/app/core/form/text-popover/text-popover.component.ts

@@ -1,165 +0,0 @@
-import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {PopoverController, PopoverOptions} from '@ionic/angular';
-import {Subscription} from 'rxjs';
-import {TranslateService} from '@ngx-translate/core';
-import {TextForm} from './text-form.component';
-import {logFormErrors, waitWhilePending} from '../../../shared/forms';
-import {ValidatorFn} from '@angular/forms';
-import {Color, OverlayEventDetail} from '@ionic/core';
-import {isNotEmptyArray, isNotNilOrBlank, toBoolean} from '../../../shared/functions';
-
-
-export interface TextPopoverOptions {
-  title?: string;
-  text?: string;
-  placeholder?: string;
-  editing?: boolean;
-  multiline?: boolean;
-  autoHeight?: boolean;
-  maxLength?: number;
-  autofocus?: boolean;
-  validator?: ValidatorFn;
-  // Header stuff
-  showHeader?: boolean;
-  headerColor?: Color;
-  headerButtons?: TextPopoverButton[];
-}
-
-export interface TextPopoverButton {
-  text?: string;
-  icon?: string;
-  color?: Color;
-  fill?: 'outline'|'clear'|'solid';
-  side?: 'start' | 'end';
-  role?: 'cancel' | string;
-  cssClass?: string | string[];
-  handler?: (value: string) => boolean | void | Promise<boolean | void>;
-}
-
-@Component({
-  selector: 'app-text-popover',
-  templateUrl: './text-popover.component.html',
-  styleUrls: [
-    './text-popover.component.scss',
-  ]
-})
-export class TextPopover implements OnInit, AfterViewInit, OnDestroy, TextPopoverOptions {
-
-  static async show(ctrl: PopoverController,
-                    event: Event,
-                    opts: TextPopoverOptions,
-                    popoverOpts?: PopoverOptions) : Promise<OverlayEventDetail> {
-    const modal = await ctrl.create({
-      event,
-      component: TextPopover,
-      componentProps: opts,
-      ...popoverOpts
-    });
-
-    await modal.present();
-    return await modal.onDidDismiss();
-  }
-
-  @ViewChild('form', { static: true }) form: TextForm;
-
-  @Input() showHeader: boolean;
-  @Input() headerColor: Color = null;
-  @Input() showFooter: boolean;
-  @Input() title: string = null;
-  @Input() text: string;
-  @Input() placeholder = '';
-  @Input() editing = true;
-  @Input() multiline = true;
-  @Input() autoHeight: boolean = false;
-  @Input() maxLength = 2000;
-  @Input() autofocus = false;
-  @Input() validator: ValidatorFn = null;
-  @Input() headerButtons: TextPopoverButton[] = null;
-  @Input() mobile = false;
-
-  subscription = new Subscription();
-
-  get disabled() {
-    return this.form.disabled;
-  }
-
-  get enabled() {
-    return this.form.enabled;
-  }
-
-  get valid() {
-    return this.form?.valid || false;
-  }
-
-  get value() {
-    return this.form?.value.text;
-  }
-
-  constructor(protected popoverController: PopoverController, protected translate: TranslateService) {}
-
-  ngOnInit(): void {
-    this.showHeader = toBoolean(this.showHeader, isNotNilOrBlank(this.title) || isNotEmptyArray(this.headerButtons));
-    this.showFooter = toBoolean(this.showFooter, !this.mobile);
-    this.enable();
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => this.form.setValue({ text: this.text }), 0);
-  }
-
-  async onValidate(event: any): Promise<any> {
-    await waitWhilePending(this.form);
-
-    if (!this.valid) {
-      logFormErrors(this.form.control);
-      return;
-    }
-
-    try {
-      const value = this.value;
-      this.disable();
-      await this.popoverController.dismiss(value);
-      this.form.error = null;
-    } catch (err) {
-      this.form.error = (err && err.message) || err;
-      this.enable();
-    }
-  }
-
-  disable() {
-    this.form.disable();
-  }
-
-  enable() {
-    if (this.editing) this.form.enable();
-  }
-
-  cancel() {
-    this.popoverController.dismiss();
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  protected async clickButton(button: TextPopoverButton) {
-    if (typeof button.handler === 'function') {
-      const result = await button.handler(this.value);
-      // TODO comment interpreter le true ?? => fermer ou annuler l'action ?
-      if (result === true) {
-        return this.popoverController.dismiss(this.value, button.role);
-      }
-    }
-    else {
-      return this.popoverController.dismiss(this.value, button.role);
-    }
-  }
-
-  protected isStartSide(button: TextPopoverButton) {
-    return button?.side === 'start';
-  }
-
-  protected isEndSide(button: TextPopoverButton) {
-    return button?.side !== 'start';
-  }
-}

package/src/app/core/form/text-popover/text-popover.module.ts

@@ -1,27 +0,0 @@
-import {NgModule} from '@angular/core';
-import {SharedModule} from '../../../shared/shared.module';
-import {TextPopover} from './text-popover.component';
-import {TextForm} from './text-form.component';
-import {TranslateModule} from '@ngx-translate/core';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    TranslateModule.forChild()
-  ],
-
-  declarations: [
-    // Components
-    TextForm,
-    TextPopover
-  ],
-  exports: [
-    TranslateModule,
-    // Components
-    TextForm,
-    TextPopover
-  ]
-})
-export class AppTextPopoverModule {
-
-}

package/src/app/core/graphql/graphql.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {HttpClientModule} from '@angular/common/http';
-
-@NgModule({
-  imports: [
-    HttpClientModule
-  ],
-  exports: [
-    HttpClientModule
-  ]
-})
-export class AppGraphQLModule {
-
-  constructor() {
-  }
-}
-