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

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

@@ -0,0 +1,38 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {AutocompleteTestPage} from './autocomplete.test';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {AppModule} from '../../../../app.module';
+import {ReactiveFormsModule} from '@angular/forms';
+
+describe('AutocompleteTestPage', () => {
+  let component: AutocompleteTestPage;
+  let fixture: ComponentFixture<AutocompleteTestPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    schemas: [
+        CUSTOM_ELEMENTS_SCHEMA
+    ],
+    imports: [
+        ReactiveFormsModule
+    ],
+    providers: [
+        AppModule
+    ],
+    declarations: [
+        AutocompleteTestPage
+    ],
+    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,247 @@
+import {AfterViewInit, 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'}
+];
+
+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-autocomplete-test',
+  templateUrl: './autocomplete.test.html'
+})
+export class AutocompleteTestPage implements OnInit, AfterViewInit {
+
+  private _items = deepCopy(FAKE_ENTITIES, 100);
+  private _$items = new BehaviorSubject<EntityTestClass[]>(undefined);
+
+  form: UntypedFormGroup;
+  autocompleteFields = new MatAutocompleteConfigHolder();
+  memoryHide = false;
+  memoryMobile = true;
+  memoryAutocompleteFieldName = 'entity-$items';
+  memoryTimer: Subscription;
+
+  mode: 'mobile'|'desktop'|'memory'|'temp' = 'mobile';
+
+  @ViewChild('farEntityField') farEntityField: MatAutocompleteField;
+  @ViewChild(IonModal) ionModal: IonModal;
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder
+  ) {
+    this.form = formBuilder.group({
+      entity: [null, SharedValidators.entity],
+      missingEntity: [null, SharedValidators.entity],
+      disableEntity: [null, SharedValidators.entity],
+      entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
+      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
+    });
+
+    // 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
+    });
+
+  }
+
+  ngAfterViewInit() {
+
+    if (this.farEntityField) {
+      setTimeout(() => {
+        this.farEntityField.suggestLengthThreshold=2;
+        this.farEntityField.reloadItems();
+      }, 2000);
+    }
+
+    setTimeout(()=> this.loadData(), 1000);
+  }
+
+  // Load the form with data
+  async loadData() {
+    const data = {
+      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)
+    };
+
+    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>> {
+    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(50)
+      .subscribe(() => {
+        this.memoryHide = !this.memoryHide;
+      });
+  }
+
+  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,164 @@
+import {AfterViewInit, ANIMATION_MODULE_TYPE, Directive, ElementRef, HostBinding, Inject, Input, NgZone, OnChanges, OnDestroy, Optional, Renderer2, SimpleChanges} from '@angular/core';
+import {MatBadge, MatBadgePosition} from '@angular/material/badge';
+import {AppColors} from '../../types';
+import {AriaDescriber} from '@angular/cdk/a11y';
+import {BooleanInput} from '@angular/cdk/coercion';
+
+export declare type MatBadgeFill = 'clear' | 'solid';
+
+@Directive({
+  selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
+  inputs: [
+    'disabled: matBadgeDisabled',
+    'color: appBadgeColor',
+    'size: appBadgeSize',
+    'fill: appBadgeFill',
+    'hidden: appBadgeHidden',
+    'overlap: appBadgeOverlap',
+    'position: appBadgePosition'
+  ]
+})
+export class BadgeDirective extends MatBadge implements AfterViewInit, OnChanges, OnDestroy {
+
+  @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() 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 = 0x00A0; // 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) {
+      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';
+
+    let size: number;
+    switch (this.size) {
+      case 'large':
+        size = 24;
+        break;
+      case 'medium':
+        size = 22;
+        break;
+      case 'small':
+        size = 16;
+        break;
+    }
+    let hidden = this.appBadgeHidden;
+    let html = '';
+    if (this.appBadgeMatIcon) {
+      html = `<i class="material-icons" style="font-size: ${size}px;">${this.appBadgeMatIcon}</i>`;
+    }
+    else if (this.appBadgeIcon) {
+      html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
+    }
+    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';
+
+
+
+
+      /*
+      // WOARKROUND 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,22 @@
+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 {
+}
+