@sumaris-net/ngx-components 18.14.0 → 18.14.2

package/src/app/shared/named-filter/named-filter-selector.component.ts

@@ -1,287 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Inject,
-  Injector,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-import { PopoverController, ToastController } from '@ionic/angular';
-import { AppForm } from '../../core/form/form.class';
-import { FilesUtils } from '../file/file.utils';
-import { isEmptyArray, isNil, isNilOrBlank, isNilOrNaN, isNotNil, isNotNilOrBlank } from '../functions';
-import { MatAutocompleteField } from '../material/autocomplete/material.autocomplete';
-import { MatAutocompleteFieldConfig } from '../material/autocomplete/material.autocomplete.config';
-import { Toasts } from '../toast/toasts';
-import { INamedFilter, INamedFilterFilter, NamedFilter } from './named-filter.model';
-import { APP_NAMED_FILTER_SERVICE, INamedFilterService, NamedFilterLoadOptions, NamedFilterWatchOptions } from './named-filter.service';
-import { debounceTime, distinctUntilChanged } from 'rxjs';
-import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-
-export type NamedFilterSelectorButtonsPosition = 'matSuffix' | 'after';
-
-@Component({
-  selector: 'app-named-filter-selector',
-  styleUrls: ['./named-filter-selector.component.scss'],
-  templateUrl: './named-filter-selector.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NamedFilterSelector extends AppForm<{ namedFilter: any }> implements OnInit {
-  protected readonly logPrefix = '[named-filter-selector]';
-
-  private _entityName: string;
-  private _deleteDisabled = false;
-
-  @Input() mobile: boolean;
-  @Input() set entityName(entityName: string) {
-    if (!entityName || this._entityName === entityName) return;
-    this._entityName = entityName;
-    // Update autocomplete filter
-    this.autocompleteField.filter = { ...this.autocompleteField.filter, ...this.getFilter() };
-  }
-
-  get entityName(): string {
-    return this._entityName;
-  }
-
-  @Input() appearance: MatFormFieldAppearance;
-  @Input() subscriptSizing: SubscriptSizing;
-  @Input() filterContentProvider: () => any;
-  @Input() filterImportCallback: (namedFilter: NamedFilter) => Promise<NamedFilter>;
-  @Input() filterFormDirty: boolean;
-  @Input() showButtons = true;
-  @Input() exportFileNamePrefix = 'filter';
-  @Input() autocompleteConfig: MatAutocompleteFieldConfig;
-  @Input() dropButtonTitle: string;
-  @Input() clearButtonTitle: string;
-  @Input() detectChangeOnSelectFilter: boolean = false; // Else is on value change
-  @Input() buttonsPosition: NamedFilterSelectorButtonsPosition;
-
-  @Input() set disabled(_disabled: boolean) {
-    if (_disabled) this.disable();
-    else this.enable();
-  }
-  get disabled(): boolean {
-    return !this._enabled;
-  }
-
-  get isNew(): boolean {
-    return isNilOrNaN(this.value?.namedFilter?.id);
-  }
-
-  get saveDisabled(): boolean {
-    return !this.dirty || isNilOrBlank(this.value.namedFilter);
-  }
-
-  get deleteDisabled(): boolean {
-    return this._deleteDisabled || this.isNew;
-  }
-
-  get dirty(): boolean {
-    return super.dirty || this.filterFormDirty;
-  }
-
-  @Output() filterSelected = new EventEmitter<any>();
-  @Output() filterDeleted = new EventEmitter<NamedFilter>();
-  @Output() filterCleared = new EventEmitter<void>();
-
-  @ViewChild(MatAutocompleteField, { static: true }) autocompleteField: MatAutocompleteField;
-
-  constructor(
-    protected injector: Injector,
-    protected formBuilder: UntypedFormBuilder,
-    protected cd: ChangeDetectorRef,
-    protected toastController: ToastController,
-    protected popoverController: PopoverController,
-    @Inject(APP_NAMED_FILTER_SERVICE)
-    protected dataService: INamedFilterService<INamedFilter<any>, INamedFilterFilter<any, any>, NamedFilterWatchOptions, NamedFilterLoadOptions>
-  ) {
-    super(injector, formBuilder.group({ namedFilter: [null] }));
-  }
-
-  ngOnInit(): void {
-    this.mobile = this.mobile ?? this.settings.mobile;
-    this.buttonsPosition = this.buttonsPosition ?? (this.mobile ? 'after' : 'matSuffix');
-
-    this.registerAutocompleteField('namedFilter', {
-      suggestFn: (value, filter) => this.dataService.suggest(value, filter),
-      attributes: ['name'],
-      filter: this.getFilter(),
-      applyImplicitValue: false,
-      ...this.autocompleteConfig,
-    });
-
-    if (this.detectChangeOnSelectFilter) {
-      this.registerSubscription(this.autocompleteField.selectionChange.subscribe((event) => this.onFilterChanges(event.value)));
-    } else {
-      this.registerSubscription(
-        this.form.controls.namedFilter.valueChanges.pipe(debounceTime(100), distinctUntilChanged()).subscribe((value) => this.onFilterChanges(value))
-      );
-    }
-  }
-
-  getFilter(): any {
-    return {
-      entityName: this.entityName,
-    };
-  }
-
-  markForCheck() {
-    this.cd.markForCheck();
-  }
-
-  async save(event: UIEvent) {
-    if (event?.defaultPrevented) return;
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    const filterContent = this.filterContentProvider();
-
-    if (this.debug) console.debug(`${this.logPrefix} save named filter`, filterContent);
-
-    if (isNilOrBlank(filterContent)) return;
-
-    const currentSelected = this.value.namedFilter;
-    let result: NamedFilter;
-
-    if (typeof currentSelected === 'string') {
-      result = NamedFilter.fromObject({
-        name: currentSelected,
-        entityName: this.entityName,
-        content: filterContent,
-      });
-    } else {
-      result = NamedFilter.fromObject({
-        ...currentSelected,
-        content: filterContent,
-      });
-    }
-
-    const savedEntity = await this.dataService.save(result);
-    this.setControlValue(savedEntity);
-    this.autocompleteField.reloadItems();
-    this.markAsPristine();
-  }
-
-  async delete(event?: UIEvent) {
-    if (event?.defaultPrevented) return;
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    const data = this.value.namedFilter;
-
-    if (this.debug) console.debug(`${this.logPrefix} delete named filter`, data);
-
-    if (typeof data === 'object') {
-      await this.dataService.delete(data);
-      this.reset();
-      this.autocompleteField.reloadItems();
-      this.autocompleteField.blurred.emit();
-      this.filterDeleted.emit(data);
-      Toasts.show(this.toastController, this.translate, {
-        type: 'info',
-        message: 'COMMON.NAMED_FILTER.DELETED',
-      });
-    }
-  }
-
-  onMoreOptionsClick(event: Event) {
-    event.preventDefault();
-    event.stopPropagation(); // Avoid field focus gain
-  }
-
-  async export(event?: UIEvent) {
-    if (event?.defaultPrevented) return;
-    event?.preventDefault();
-
-    const id = this.autocompleteField.value?.id;
-
-    if (this.debug) console.debug(`${this.logPrefix} export named filter`, id);
-
-    if (!id) return;
-
-    const data = await this.dataService.load(id, { withContent: true });
-
-    if (data) {
-      FilesUtils.writeTextToFile(JSON.stringify(data, null, 2), {
-        type: 'application/json',
-        filename: `${this.exportFileNamePrefix}-${data.entityName}-${data.name}.json`,
-      });
-    } else {
-      Toasts.show(this.toastController, this.translate, {
-        type: 'error',
-        message: 'COMMON.NAMED_FILTER.NOT_FOUND',
-      });
-    }
-  }
-
-  async import(event: Event) {
-    if (event?.defaultPrevented) return;
-    event?.preventDefault();
-
-    const result = await FilesUtils.showUploadPopover(this.popoverController, event, {
-      uploadFn: (file) => FilesUtils.readAsText(file),
-      title: 'COMMON.NAMED_FILTER.IMPORT',
-      fileExtension: '.json',
-      uniqueFile: true,
-      instantUpload: true,
-    });
-    if (!result || isEmptyArray(result.data)) return;
-    try {
-      let data = JSON.parse(result.data[0].response.body);
-      if (this.debug) console.debug(`${this.logPrefix} import named filter`, data);
-      if (this.filterImportCallback) {
-        data = await this.filterImportCallback(data);
-        if (isNil(data)) {
-          return; // Abort import if callback returns null or undefined
-        }
-      }
-      this.setControlValue(data);
-      this.filterSelected.emit(data.content);
-      this.markAsDirty();
-    } catch (e) {
-      console.error(e);
-      Toasts.show(this.toastController, this.translate, {
-        type: 'error',
-        message: 'COMMON.NAMED_FILTER.IMPORT_FAILED',
-      });
-    }
-  }
-
-  protected async onFilterChanges(value: NamedFilter | string) {
-    if (this.debug) console.debug(`${this.logPrefix} filter change`, value);
-
-    // Emit cleared event if bound
-    if (isNil(value) && this.filterCleared.observed) {
-      this.filterCleared.emit();
-    }
-
-    if (typeof value === 'object' && value?.id && isNotNil(value.id)) {
-      try {
-        const data = await this.dataService.load(value.id, { withContent: true });
-        this._deleteDisabled = !this.dataService.canUserWrite(data);
-
-        const filter = isNotNilOrBlank(data?.content) ? data.content : null;
-        if (filter) {
-          this.filterSelected.emit(filter);
-          this.markAsPristine();
-        }
-      } catch (e) {
-        Toasts.show(this.toastController, this.translate, {
-          type: 'error',
-          message: 'COMMON.NAMED_FILTER.LOAD_FAILED',
-        });
-      }
-    }
-  }
-
-  protected setControlValue(value: NamedFilter) {
-    this.setValue({ namedFilter: value });
-    this.autocompleteField.blurred.emit();
-  }
-}

package/src/app/shared/named-filter/named-filter.model.ts

@@ -1,64 +0,0 @@
-import { Entity, IEntity } from '../../core/services/model/entity.model';
-import { EntityFilter, IEntityFilter } from '../../core/services/model/filter.model';
-import { EntityClass } from '../../core/services/model/entity.decorators';
-
-export interface INamedFilter<T extends INamedFilter<T>> extends IEntity<T> {
-  name: string;
-  entityName: string;
-  content: any;
-  recorderPersonId: number;
-  recorderDepartmentId: number;
-}
-
-@EntityClass({ typename: 'NamedFilterVO' })
-export class NamedFilter<T extends NamedFilter<any> = NamedFilter<any>> extends Entity<T> implements INamedFilter<T> {
-  static fromObject: (source: any, opts?: any) => NamedFilter;
-
-  name: string;
-  entityName: string;
-  content: any;
-  recorderPersonId: number;
-  recorderDepartmentId: number;
-
-  fromObject(source: any, opts?: any) {
-    super.fromObject(source, opts);
-    this.name = source.name;
-    this.entityName = source.entityName;
-    this.recorderPersonId = source.recorderPersonId;
-    this.recorderDepartmentId = source.recorderDepartmentId;
-    try {
-      this.content = typeof source?.content === 'string' ? JSON.parse(source?.content) : source?.content || undefined;
-    } catch (e) {
-      console.error(`[named-filter] can't parse content json`, source);
-      throw e;
-    }
-  }
-}
-
-export interface INamedFilterFilter<F extends INamedFilterFilter<any, T>, T extends INamedFilter<T>> extends IEntityFilter<F, T> {
-  searchText: string;
-  entityName: string;
-  recorderPersonId: number;
-  recorderDepartmentId: number;
-}
-
-@EntityClass({ typename: 'NamedFilterFilterVO' })
-export class NamedFilterFilter<F extends NamedFilterFilter<any, T> = NamedFilterFilter<any, any>, T extends NamedFilter<any> = NamedFilter<any>>
-  extends EntityFilter<F, T>
-  implements INamedFilterFilter<F, T>
-{
-  static fromObject: (source: any, opts?: any) => NamedFilterFilter;
-
-  searchText: string = null;
-  entityName: string = null;
-  recorderPersonId: number = null;
-  recorderDepartmentId: number = null;
-
-  fromObject(source: any, opts?: any) {
-    super.fromObject(source, opts);
-    this.searchText = source.searchText;
-    this.entityName = source.entityName;
-    this.recorderPersonId = source.recorderPersonId;
-    this.recorderDepartmentId = source.recorderDepartmentId;
-  }
-}

package/src/app/shared/named-filter/named-filter.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { TranslateModule } from '@ngx-translate/core';
-import { NamedFilterSelector } from './named-filter-selector.component';
-import { SharedMatAutocompleteModule } from '../material/autocomplete/material.autocomplete.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { SharedMaterialModule } from '../material/material.module';
-
-@NgModule({
-  imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule],
-  declarations: [NamedFilterSelector],
-  exports: [NamedFilterSelector],
-})
-export class SharedNamedFilterModule {}

package/src/app/shared/named-filter/named-filter.service.ts

@@ -1,100 +0,0 @@
-import { Directive, InjectionToken } from '@angular/core';
-import { EntityUtils } from '../../core/services/model/entity.model';
-import {
-  EntitiesServiceLoadOptions,
-  EntityServiceWatchOptions,
-  IEntitiesService,
-  IEntityService,
-  LoadResult,
-  SuggestService,
-} from '../services/entity-service.class';
-import { GraphqlService } from '../../core/graphql/graphql.service';
-import { BaseEntityService, BaseEntityServiceOptions } from '../../core/services/base-entity-service.class';
-import { PlatformService } from '../../core/services/platform.service';
-import { AccountService } from '../../core/services/account.service';
-import { isNil } from '../functions';
-import { INamedFilter, INamedFilterFilter, NamedFilter, NamedFilterFilter } from './named-filter.model';
-
-export const APP_NAMED_FILTER_SERVICE = new InjectionToken<INamedFilterService<any, any, any, any>>('namedFilterService');
-
-export interface INamedFilterService<
-  T extends INamedFilter<T>,
-  F extends INamedFilterFilter<F, T>,
-  WO extends NamedFilterWatchOptions,
-  LO extends NamedFilterLoadOptions,
-> extends IEntitiesService<T, F, WO>,
-    IEntityService<T, number, LO>,
-    SuggestService<T, F> {}
-
-export interface NamedFilterWatchOptions extends EntityServiceWatchOptions {
-  withContent?: boolean;
-}
-
-export interface NamedFilterLoadOptions extends EntitiesServiceLoadOptions {
-  withContent?: boolean;
-}
-
-// @dynamic
-@Directive()
-export abstract class AbstractNamedFilterService<
-    T extends NamedFilter<T>,
-    F extends NamedFilterFilter<F, T>,
-    WO extends NamedFilterWatchOptions = NamedFilterWatchOptions,
-    LO extends NamedFilterLoadOptions = NamedFilterLoadOptions,
-  >
-  extends BaseEntityService<T, F, number>
-  implements INamedFilterService<T, F, WO, LO>
-{
-  protected constructor(
-    protected graphql: GraphqlService,
-    protected platform: PlatformService,
-    protected account: AccountService,
-    protected dataType: new () => T,
-    protected filterType: new () => F,
-    protected options: BaseEntityServiceOptions<T, number>
-  ) {
-    super(graphql, platform, dataType, filterType, {
-      defaultSortBy: 'name',
-      defaultSortDirection: 'asc',
-      ...options,
-    });
-    this._logPrefix = '[named-filter-service] ';
-  }
-
-  async suggest(value: any, filter: Partial<F>): Promise<LoadResult<T>> {
-    if (EntityUtils.isNotEmpty(value, 'id')) return { data: [value] };
-    value = (typeof value === 'string' && value !== '*' && value) || undefined;
-    return this.loadAll(0, !value ? 30 : 10, 'name', 'asc', this.asSuggestFilter(value, filter), <EntitiesServiceLoadOptions>{
-      withTotal: true,
-    });
-  }
-
-  asSuggestFilter(searchText: string, filter?: Partial<F>): F {
-    return <F>{
-      ...filter,
-      searchText,
-    };
-  }
-
-  asFilter(source: any): F {
-    const filter = super.asFilter(source);
-
-    // Default filter on current user
-    if (this.account.isLogin() && isNil(filter.recorderPersonId) && isNil(filter.recorderDepartmentId))
-      filter.recorderPersonId = this.account.person.id;
-
-    return filter;
-  }
-
-  protected fillDefaultProperties(source: T) {
-    super.fillDefaultProperties(source);
-
-    // Default recorder
-    if (isNil(source.recorderPersonId) && isNil(source.recorderDepartmentId)) source.recorderPersonId = this.account.person.id;
-
-    // Stringify content
-    if (typeof source.content === 'object') {
-      source.content = JSON.stringify(source.content);
-    }
-  }
-}

package/src/app/shared/named-filter/testing/named-filter-selector.testing.html

@@ -1,61 +0,0 @@
-<app-toolbar defaultBackHref="testing/shared">
-  <ion-title>Named filter selector testing page</ion-title>
-  @if (!mobile) {
-    <ion-buttons slot="end">
-      <app-named-filter-selector
-        class="ion-padding-right ion-padding-top"
-        [entityName]="'DummyEntity'"
-        [subscriptSizing]="'dynamic'"
-        [filterContentProvider]="namedFilterContentProvider"
-        [filterFormDirty]="filterForm.dirty"
-        [autocompleteConfig]="namedFilterAutocompleteConfig"
-        [filterImportCallback]="filterImportCallback"
-        (filterSelected)="setFilter($event)"
-        [detectChangeOnSelectFilter]="true"
-      ></app-named-filter-selector>
-    </ion-buttons>
-  }
-</app-toolbar>
-<ion-content>
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        <ion-card>
-          <ion-card-header>
-            <ion-label>Dummy filter</ion-label>
-          </ion-card-header>
-          <ion-card-content>
-            @if (mobile) {
-              <app-named-filter-selector
-                class="ion-padding-right ion-padding-top"
-                [entityName]="'DummyEntity'"
-                [subscriptSizing]="'dynamic'"
-                [filterContentProvider]="namedFilterContentProvider"
-                [filterFormDirty]="filterForm.dirty"
-                [autocompleteConfig]="namedFilterAutocompleteConfig"
-                [filterImportCallback]="filterImportCallback"
-                (filterSelected)="setFilter($event)"
-                [detectChangeOnSelectFilter]="true"
-              ></app-named-filter-selector>
-            }
-
-            <form class="form-container" [formGroup]="filterForm">
-              <div class="form-group">
-                <label for="filter-a">Filter A&nbsp;</label>
-                <input type="text" class="form-control" id="filter-a" name="filter-a" formControlName="filterA" />
-              </div>
-              <div class="form-group">
-                <label for="filter-b">Filter B&nbsp;</label>
-                <input type="text" class="form-control" id="filter-b" name="filter-b" formControlName="filterB" />
-              </div>
-              <div class="form-group">
-                <label for="filter-a">Filter C&nbsp;</label>
-                <input type="text" class="form-control" id="filter-c" name="filter-c" formControlName="filterC" />
-              </div>
-            </form>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</ion-content>

package/src/app/shared/named-filter/testing/named-filter-selector.testing.ts

@@ -1,80 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { MatAutocompleteFieldConfig } from '../../material/autocomplete/material.autocomplete.config';
-import { NamedFilter } from '../named-filter.model';
-import { LocalSettingsService } from '../../../core/services/local-settings.service';
-
-class DummyFilter {
-  filterA: string;
-  filterB: string;
-  filterC: string;
-}
-
-@Component({
-  selector: 'app-name-filter-selector-testing',
-  templateUrl: './named-filter-selector.testing.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NamedFilterSelectorTestingPage implements OnDestroy {
-  private _subscription = new Subscription();
-  protected _filterForm: UntypedFormGroup;
-  protected mobile: boolean;
-
-  protected namedFilterContentProvider = (): object => this.filterForm.value;
-  protected namedFilterAutocompleteConfig: MatAutocompleteFieldConfig = {
-    showAllOnFocus: true,
-  };
-
-  @Input()
-  set filterForm(value: UntypedFormGroup) {
-    this.setFilterForm(value);
-  }
-
-  get filterForm(): UntypedFormGroup {
-    return this._filterForm;
-  }
-  constructor(
-    protected cd: ChangeDetectorRef,
-    protected settings: LocalSettingsService,
-    formBuilder: UntypedFormBuilder
-  ) {
-    this._filterForm = formBuilder.group({
-      filterA: [null],
-      filterB: [null],
-      filterC: [null],
-    });
-    this.mobile = settings.mobile;
-  }
-
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
-  }
-
-  setFilterForm(filterForm: UntypedFormGroup) {
-    if (this._filterForm !== filterForm) {
-      this._filterForm = filterForm;
-      this._subscription.add(this._filterForm.statusChanges.subscribe((_) => this.markForCheck()));
-    }
-  }
-
-  getFilterValue(): any {
-    return this._filterForm.value;
-  }
-
-  protected markForCheck() {
-    this.cd.detectChanges();
-  }
-
-  protected filterImportCallback = async (namedFilter: NamedFilter): Promise<NamedFilter> => {
-    delete namedFilter.id;
-    delete namedFilter.updateDate;
-    return namedFilter;
-  };
-
-  async setFilter(filter: Partial<DummyFilter>, opts?: { emitEvent: boolean }) {
-    filter = filter || {};
-    this.filterForm.patchValue(filter, { emitEvent: false });
-    this.markForCheck();
-  }
-}

package/src/app/shared/named-filter/testing/named-filter.testing.module.ts

@@ -1,20 +0,0 @@
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../shared.module';
-import { NamedFilterSelectorTestingPage } from './named-filter-selector.testing';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-const routes: Routes = [
-  {
-    path: 'name-filter-selector',
-    pathMatch: 'full',
-    component: NamedFilterSelectorTestingPage,
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), SharedModule],
-  declarations: [NamedFilterSelectorTestingPage],
-  exports: [RouterModule, NamedFilterSelectorTestingPage],
-})
-export class NamedFilterSelectorTestingModule {}