@sumaris-net/ngx-components 18.11.0 → 18.12.0

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

@@ -0,0 +1,287 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,61 @@
+<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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,20 @@
+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 {}