@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/material/autocomplete/testing/autocomplete.test.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { AppModule } from '../../../../app.module';
+import { SharedMatAutocompleteModule } from '../material.autocomplete.module';
+import { AutocompleteTestPage } from './autocomplete.test';
+import { TranslateModule } from '@ngx-translate/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SharedModule } from '../../../shared.module';
+
+describe('MatAutocompleteField', () => {
+  let component: AutocompleteTestPage;
+  let fixture: ComponentFixture<AutocompleteTestPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [TranslateModule.forRoot(), NoopAnimationsModule, SharedModule, SharedMatAutocompleteModule],
+      declarations: [AutocompleteTestPage],
+      providers: [AppModule],
+      teardown: { destroyAfterEach: false },
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AutocompleteTestPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,272 @@
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { SharedFormArrayValidators, SharedValidators } from '../../../validator/validators';
+import { MatAutocompleteField } from '../material.autocomplete';
+import { isNil, isNotNil, sleep } from '../../../functions';
+import { BehaviorSubject, Subscription, timer } from 'rxjs';
+import { LoadResult } from '../../../services/entity-service.class';
+import { suggestFromArray } from '../../../services';
+import { MatAutocompleteConfigHolder } from '../material.autocomplete.config';
+import { IonModal } from '@ionic/angular';
+
+class EntityTestClass {
+  id: number;
+  label: string;
+  name: string;
+}
+
+const FAKE_ENTITIES = [
+  { id: 1, label: 'AAA', name: 'Item A', description: 'Very long description A', comments: 'Very very long comments. again for A' },
+  { id: 2, label: 'BBB', name: 'Item B', description: 'Very long description B', comments: 'Very very long comments. again for B' },
+  { id: 3, label: 'CCC', name: 'Item C', description: 'Very long description C', comments: 'Very very long comments. again for C' },
+  { id: 4, label: 'DDD', name: 'Item D', description: 'Very long description D', comments: 'Very very long comments. again for D' },
+  { id: 5, label: 'EEE', name: 'Item E', description: 'Very long description E', comments: 'Very very long comments. again for E' },
+];
+
+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 label = entity.label + i;
+        const name = entity.name + ' #' + i;
+        return { ...entity, id: i++, label, name };
+      })
+    );
+  }
+  return result.slice(0, size);
+}
+
+@Component({
+  selector: 'app-autocomplete-test',
+  templateUrl: './autocomplete.test.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AutocompleteTestPage implements OnInit, AfterViewInit {
+  protected _items: any[] = deepCopy(FAKE_ENTITIES, 100);
+  protected _$items = new BehaviorSubject<EntityTestClass[]>(undefined);
+  protected _favoriteItems: any[] = deepCopy(FAKE_ENTITIES, 2).reverse();
+
+  protected _favoriteFarItems: any[] = [...deepCopy(FAKE_ENTITIES, 2), FAKE_ENTITIES[2]].reverse();
+
+  form: UntypedFormGroup;
+  autocompleteFields = new MatAutocompleteConfigHolder();
+  memoryHide = false;
+  memoryMobile = true;
+  memoryAutocompleteFieldName = 'entity-$items';
+  memoryTimer: Subscription;
+
+  mode: 'mobile' | 'desktop' | 'memory' | 'temp' = 'desktop';
+
+  @ViewChild('farEntityField') farEntityField: MatAutocompleteField;
+  @ViewChild(IonModal) ionModal: IonModal;
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder,
+    private cd: ChangeDetectorRef
+  ) {
+    this.form = formBuilder.group({
+      emptyEntity: [null, SharedValidators.entity],
+      entity: [null, SharedValidators.entity],
+      missingEntity: [null, SharedValidators.entity],
+      disableEntity: [null, SharedValidators.entity],
+      entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
+      farEntity: [null, SharedValidators.entity],
+      withButton: [null, SharedValidators.entity],
+    });
+
+    this.form.get('disableEntity').disable();
+  }
+
+  ngOnInit() {
+    this.mode = this.mode || 'mobile';
+
+    // From suggest
+    this.autocompleteFields.add('entity-suggestFn', {
+      suggestFn: (value, filter) => this.suggest(value, filter),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // From items array
+    this.autocompleteFields.add('entity-items', {
+      items: this._items.slice(),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // From $items observable
+    this.autocompleteFields.add('entity-$items', {
+      items: this._$items,
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // From $items with filter
+    this.autocompleteFields.add('entity-items-filter', {
+      service: {
+        suggest: (value, filter) => this.suggest(value, filter),
+      },
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // From items
+    this.autocompleteFields.add('entity-items-large', {
+      items: FAKE_ENTITIES.slice(),
+      attributes: ['label', 'name', 'description', 'comments'],
+      displayWith: this.entityToString,
+    });
+
+    // Far entity, in the list
+    this.autocompleteFields.add('entity-far', {
+      suggestFn: (value, filter) => this.suggest(value, filter),
+      attributes: ['label', 'name'],
+      displayWith: this.entityToString,
+    });
+
+    // For multiple value
+    this.autocompleteFields.add('entities-items-filter', {
+      service: {
+        suggest: (value, filter) => this.suggest(value, filter),
+      },
+      attributes: ['label', 'name'],
+      multiple: true,
+    });
+
+    // With button mode values
+    this.autocompleteFields.add('entity-with-button', {
+      service: {
+        suggest: (value, filter) => this.suggest(value, filter),
+      },
+      attributes: ['label', 'name'],
+    });
+  }
+
+  ngAfterViewInit() {
+    if (this.farEntityField) {
+      setTimeout(() => {
+        if (this.farEntityField) {
+          this.farEntityField.suggestLengthThreshold = 2;
+          this.farEntityField.reloadItems();
+        }
+      }, 500);
+    }
+
+    setTimeout(() => this.loadData(), 1000);
+  }
+
+  // Load the form with data
+  async loadData() {
+    const data = {
+      emptyEntity: null,
+
+      entity: deepCopy(FAKE_ENTITIES)[0], // First
+
+      farEntity: deepCopy(FAKE_ENTITIES)[2],
+
+      // This item is NOT in the items list => i should be displayed anyway
+      missingEntity: {
+        id: -1,
+        label: '??',
+        name: 'Missing item',
+      },
+
+      disableEntity: deepCopy(FAKE_ENTITIES)[2],
+
+      entities: deepCopy(FAKE_ENTITIES),
+
+      withButton: deepCopy(FAKE_ENTITIES)[0],
+    };
+
+    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(' - ');
+  }
+
+  entitiesToString(items: any[]) {
+    return (items || []).map(this.entityToString).join(', ');
+  }
+
+  async suggest(value: any, filter?: any): Promise<LoadResult<EntityTestClass>> {
+    if (isNotNil(value?.id)) return { data: [value] };
+
+    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;
+  }
+
+  toggleMode(value) {
+    if (this.mode !== value) {
+      this.mode = value;
+      this.stopMemoryTimer();
+    }
+  }
+
+  startMemoryTimer() {
+    this.memoryTimer = timer(0, 50).subscribe(() => {
+      this.memoryHide = !this.memoryHide;
+      this.cd.markForCheck();
+    });
+  }
+
+  stopMemoryTimer() {
+    this.memoryTimer?.unsubscribe();
+    this.memoryTimer = null;
+    this.memoryHide = false;
+  }
+
+  updateFilter(autocompleteField: MatAutocompleteField, fieldName: string) {
+    const filter: { searchAttribute?: string } = this.autocompleteFields.get(fieldName).filter || {};
+    filter.searchAttribute = !filter || filter.searchAttribute !== 'name' ? 'name' : 'label';
+    autocompleteField.reloadItems();
+  }
+
+  /* -- protected methods -- */
+
+  stringify(value: any) {
+    return JSON.stringify(value);
+  }
+}

package/src/app/shared/material/badge/badge.directive.ts

@@ -0,0 +1,217 @@
+import {
+  AfterViewInit,
+  ANIMATION_MODULE_TYPE,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Inject,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
+import { MatBadge, MatBadgePosition, MatBadgeSize } from '@angular/material/badge';
+import { AppColors } from '../../types';
+import { AriaDescriber } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { isNotNilOrBlank } from '../../functions';
+
+export declare type MatBadgeFill = 'clear' | 'solid';
+const EMPTY_CHAR = 0x00a0;
+const SIZE_TO_PX = {
+  large: 28,
+  medium: 22,
+  small: 16,
+};
+@Directive({
+  selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
+})
+export class BadgeDirective extends MatBadge implements AfterViewInit, OnChanges, OnDestroy, OnInit {
+  @HostBinding('class.mat-badge') true;
+  @HostBinding('class.mat-badge-overlap') get isOverlapHost() {
+    return this.overlap;
+  }
+  @HostBinding('class.mat-badge-above') get isAboveHost() {
+    return this.isAbove();
+  }
+  @HostBinding('class.mat-badge-below') get isBelowHost() {
+    return !this.isAbove();
+  }
+  @HostBinding('class.mat-badge-before') get isBeforeHost() {
+    return !this.isAfter();
+  }
+  @HostBinding('class.mat-badge-after') get isAfterHost() {
+    return this.isAfter();
+  }
+  @HostBinding('class.mat-badge-small') get isSmallHost() {
+    return this.size === 'small';
+  }
+  @HostBinding('class.mat-badge-medium') get isMediumHost() {
+    return this.size === 'medium';
+  }
+  @HostBinding('class.mat-badge-large') get isLargeHost() {
+    return this.size === 'large';
+  }
+  @HostBinding('class.mat-badge-hidden') get isHiddenHost() {
+    return this.hidden || !this.content;
+  }
+  @HostBinding('class.mat-badge-disabled') get isDisabledHost() {
+    return this.disabled;
+  }
+
+  @Input() set appBadge(value: string | number) {
+    this.content = isNotNilOrBlank(value) ? value : EMPTY_CHAR;
+  }
+  get appBadge(): string | number {
+    return this.content;
+  }
+
+  @Input() set appBadgeDisabled(value: boolean) {
+    this.disabled = value;
+  }
+  get appBadgeDisabled(): boolean {
+    return this.disabled;
+  }
+  @Input() set appBadgeSize(value: MatBadgeSize) {
+    this.size = value;
+  }
+  get appBadgeSize(): MatBadgeSize {
+    return this.size;
+  }
+
+  @Input() appBadgeColor: AppColors;
+  @Input() appBadgeFill: MatBadgeFill;
+  @Input() appBadgeMatIcon: string;
+  @Input() appBadgeIcon: string;
+  @Input() appBadgeHidden: BooleanInput;
+  @Input() appBadgeOverlap: BooleanInput;
+  @Input() appBadgePosition: MatBadgePosition;
+
+  private _html: string;
+
+  constructor(
+    _ngZone: NgZone,
+    protected el: ElementRef<HTMLElement>,
+    _ariaDescriber: AriaDescriber,
+    _renderer: Renderer2,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string | undefined
+  ) {
+    super(_ngZone, el, _ariaDescriber, _renderer, _animationMode);
+    this.content = EMPTY_CHAR; // Will be invisible
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngAfterViewInit() {
+    this.updateView();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (
+      changes.appBadgeColor ||
+      changes.appBadgeFill ||
+      changes.appBadgeMatIcon ||
+      changes.appBadgeIcon ||
+      changes.appBadgeHidden ||
+      changes.appBadgeOverlap ||
+      changes.appBadgePosition ||
+      changes.appBadge ||
+      changes.appBadgeSize ||
+      changes.appBadgeDisabled
+    ) {
+      this.updateView();
+    }
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+  }
+
+  private updateView() {
+    const badge = this.getBadgeElement();
+    if (!badge) return;
+
+    // Fix color
+    if (!this.appBadgeColor) this.appBadgeColor = 'primary';
+    if (this.appBadgeColor === 'warn') this.appBadgeColor = 'warning';
+
+    const size = SIZE_TO_PX[this.size];
+    const fontSize = `var(--mat-badge-legacy-${this.size}-size-container-size,${size}px)`;
+    let hidden = this.appBadgeHidden;
+    if (!hidden) {
+      let html = '';
+      if (this.appBadgeMatIcon) {
+        html = `<i class="material-icons" style="font-size: ${fontSize};">${this.appBadgeMatIcon}</i>`;
+      } else if (this.appBadgeIcon) {
+        html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
+      } else if (isNotNilOrBlank(this.content) && this.content !== EMPTY_CHAR) {
+        html = '' + this.content;
+      } else {
+        hidden = true;
+      }
+      if (!hidden && this._html !== html) {
+        this._html = html;
+        badge.innerHTML = html;
+      }
+    }
+
+    // Update style
+    // fill: 'clear'
+    if (this.appBadgeFill === 'clear') {
+      badge.style.color = `var(--ion-color-${this.appBadgeColor})`;
+      badge.style.background = 'transparent';
+    }
+    // fill: 'solid' (default value)
+    else {
+      badge.style.background = `var(--ion-color-${this.appBadgeColor})`;
+      badge.style.color = `var(--ion-color-${this.appBadgeColor}-contrast)`;
+    }
+
+    if (hidden) {
+      badge.style.display = 'none';
+    } else {
+      if (badge.style.display !== 'inline-block') badge.style.display = 'inline-block';
+      if (badge.style.position !== 'absolute') badge.style.position = 'absolute';
+
+      /*
+      // WORKAROUND to force position of the badge, when inside a <mat-button> (e.g. on a <mat-label>)
+      const overlap = this.overlap;
+
+      // Right/left position
+      if (this.isAfter() ) {
+        const parentWidth = badge.parentElement.getBoundingClientRect().width;
+        if (parentWidth > 0) {
+          const left = `${parentWidth - (overlap ? size / 2 : 0)}px`;
+          if (badge.style.left !== left) badge.style.left = left;
+          if (badge.style.right !== '') badge.style.right = '';
+        }
+        else {
+          const right = `${-1 * (overlap ? size / 2 : size)}px`;
+          if (badge.style.right !== right) badge.style.right = right;
+          if (badge.style.left !== '') badge.style.left = '';
+        }
+      }
+
+      // Top/bottom position
+      if (this.isAbove()) {
+        const parentHeight = badge.parentElement.getBoundingClientRect().height;
+        if (parentHeight > 0) {
+          const bottom = `${parentHeight - (overlap ? (size / 2) : size)}px`;
+          if (badge.style.bottom !== bottom) badge.style.bottom = bottom;
+          if (badge.style.top !== '') badge.style.top = '';
+        }
+        else {
+          const top = `${-1 * (overlap ? (size / 2) : size)}px`;
+          if (badge.style.top !== top) badge.style.top = top;
+          if (badge.style.bottom !== '') badge.style.bottom = '';
+        }
+      }*/
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { BadgeDirective } from './badge.directive';
+import { MatBadgeModule } from '@angular/material/badge';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, MatBadgeModule],
+  exports: [BadgeDirective],
+  declarations: [BadgeDirective],
+})
+export class SharedBadgeModule {}