@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/shared/rx-state/rx-state.decorators.ts

@@ -0,0 +1,281 @@
+import { Observable } from 'rxjs';
+import { ProjectValueReducer, RxState } from '@rx-angular/state';
+
+let production = false;
+export function enableRxStateProdMode() {
+  production = true;
+}
+
+declare type Constructor<T = any> = new (...args: any[]) => T;
+
+type ObservablePropertyDecorator<T> = <K extends PropertyKey>(target: any, propertyKey: K) => void;
+
+type StatePropertyDecorator<T> = <K extends PropertyKey>(target: any, propertyKey: K) => void;
+
+// Utility for decorators
+class DecoratorUtils {
+  static capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  static createMethodName(prefix: string, propertyKey: string): string {
+    return `${prefix}${this.capitalize(propertyKey)}`;
+  }
+  static createPropertyName(prefix: string, propertyKey: string): string {
+    return `${prefix}${this.capitalize(propertyKey)}`;
+  }
+
+  static validateStateProperty(target: any, stateVarName: string): string {
+    if (!production && stateVarName !== 'this') {
+      return `
+        if (!${stateVarName}) {
+          throw new Error('Missing state! Please add a RxState in class: ' + this.constructor.name);
+        }
+      `;
+    }
+    return '';
+  }
+}
+
+const STATE_VAR_NAME_KEY = '__stateName';
+const DEFAULT_STATE_VAR_NAME = '_state';
+
+/**
+ * Decorator to register the RxState property in a component
+ * Must be used once per class hierarchy
+ */
+export function RxStateRegister(): PropertyDecorator {
+  return function (target: Constructor<any>, key: string) {
+    if (target[STATE_VAR_NAME_KEY]) {
+      throw new Error(`Cannot define more than one @RxStateRegister() in class hierarchy. Found: ${target[STATE_VAR_NAME_KEY]} and ${key}`);
+    }
+
+    Object.defineProperty(target, STATE_VAR_NAME_KEY, {
+      value: key,
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    });
+  };
+}
+
+/**
+ * Decorator for RxState properties with getter/setter access
+ * Creates reactive properties that sync with RxState
+ */
+export function RxStateProperty<T = any, K extends keyof T = any, V extends T[K] = any>(
+  statePropertyName?: string | K,
+  projectValueReducer?: ProjectValueReducer<T, K, V>
+): StatePropertyDecorator<V> {
+  return function <P extends PropertyKey>(target: any, key: P) {
+    // Vérification de type au runtime (optionnelle)
+    const descriptor = Object.getOwnPropertyDescriptor(target, key);
+    if (descriptor && typeof descriptor.value !== 'undefined') {
+      // On peut ajouter ici des vérifications de type runtime si nécessaire
+    }
+
+    const finalStatePropertyName = (statePropertyName as string) || (key as string);
+    const stateVarName = target instanceof RxState ? null : target[STATE_VAR_NAME_KEY] || DEFAULT_STATE_VAR_NAME;
+    const stateObject = stateVarName ? `this.${stateVarName}` : 'this';
+
+    // Generate method names
+    const getMethodName = DecoratorUtils.createMethodName('_get', key as string);
+    const setMethodName = DecoratorUtils.createMethodName('_set', key as string);
+    const reducerMethodName = DecoratorUtils.createMethodName('_reduce', key as string);
+
+    // State validation (only in development)
+    const stateValidation = DecoratorUtils.validateStateProperty(target, stateObject);
+
+    // Create reducer logic
+    const reducerLogic = projectValueReducer ? `(state) => this.${reducerMethodName}(state, value)` : '() => value';
+
+    // Create dynamic methods using Function constructor for better performance
+    const getter = new Function(`
+      return function ${getMethodName}() {
+        ${stateValidation}
+        return ${stateObject}.get('${finalStatePropertyName}');
+      }
+    `)();
+
+    const setter = new Function(`
+      return function ${setMethodName}(value) {
+        ${stateValidation}
+        ${stateObject}.set('${finalStatePropertyName}', ${reducerLogic});
+      }
+    `)();
+
+    // Attach methods to prototype
+    target[getMethodName] = getter;
+    target[setMethodName] = setter;
+    if (projectValueReducer) {
+      target[reducerMethodName] = projectValueReducer;
+    }
+
+    // Define property with getter/setter
+    Object.defineProperty(target, key, {
+      get: getter,
+      set: setter,
+      enumerable: true,
+      configurable: true,
+    });
+
+    // Development logging
+    if (!production) {
+      console.debug(`[RxStateProperty] ${target.constructor?.name}.${key as string} -> state.${finalStatePropertyName}`);
+    }
+  };
+}
+
+/**
+ * Decorator for RxState observable selectors
+ * Creates observable properties that select from RxState
+ *
+ * ⚠️ IMPORTANT: La propriété décorée DOIT être typée comme Observable<T>
+ *
+ * @example
+ * ```typescript
+ * @RxStateSelect()
+ * protected pmfms$: Observable<IPmfm[]>; // ✅ Correct
+ *
+ * @RxStateSelect()
+ * protected badProperty: boolean; // ❌ TypeScript Error
+ * ```
+ */
+export function RxStateSelect<T = any, R = T[keyof T]>(
+  statePropertyName?: string | keyof T | '$',
+  opts?: {
+    stateName?: string;
+  }
+): ObservablePropertyDecorator<Observable<R>> {
+  return function <P extends PropertyKey>(target: any, key: P) {
+    // Vérification simple basée sur la convention (optionnelle)
+    if (!production && !(key as string).endsWith('$')) {
+      console.warn(
+        `[RxStateSelect] Convention: Property ${target.constructor?.name}.${key as string} should end with '$' to indicate it's an Observable`
+      );
+    }
+
+    // Determine state property name (remove trailing $ if present)
+    const finalStatePropertyName = (statePropertyName as string) || (key as string).replace(/\$$/, '');
+
+    // Determine state object
+    const stateVarName = target instanceof RxState ? null : target[STATE_VAR_NAME_KEY] || opts?.stateName || DEFAULT_STATE_VAR_NAME;
+    const stateObject = stateVarName ? `this.${stateVarName}` : 'this';
+
+    // Create cache property name
+    const cachePropertyName = `_${key as string}`;
+
+    // Generate method name
+    const getMethodName = DecoratorUtils.createMethodName('_get', (key as string).replace(/\$$/, '') + '$');
+
+    // Create observable selector logic
+    const observableSelector =
+      finalStatePropertyName === '$'
+        ? `${stateObject}.$`
+        : finalStatePropertyName.includes('.')
+          ? `${stateObject}.select('${finalStatePropertyName.split('.').join("', '")}')`
+          : `${stateObject}.select('${finalStatePropertyName}')`;
+
+    // State validation
+    const stateValidation = DecoratorUtils.validateStateProperty(target, stateObject);
+
+    // Create getter with caching
+    const getter = new Function(`
+      return function ${getMethodName}() {
+        ${stateValidation}
+        if (!this.${cachePropertyName}) {
+          this.${cachePropertyName} = ${observableSelector};
+        }
+        return this.${cachePropertyName};
+      }
+    `)();
+
+    // Attach method to prototype
+    target[getMethodName] = getter;
+
+    // Define property with getter only
+    Object.defineProperty(target, key, {
+      get: getter,
+      enumerable: true,
+      configurable: false,
+    });
+
+    // Development logging
+    if (!production) {
+      console.debug(`[RxStateSelect] ${target.constructor?.name}.${key as string} -> ${observableSelector}`);
+    }
+  };
+}
+
+/**
+ * Utility decorator to create computed observables from state
+ *
+ * ⚠️ IMPORTANT: La propriété décorée DOIT être typée comme Observable<T>
+ */
+export function RxStateComputed<T = any, K extends keyof T = any, R = any>(
+  dependencies: K[],
+  computeFn?: (slice: Pick<T, K>) => R,
+  opts?: {
+    stateName?: string;
+    keyCompareMap?: any;
+  }
+): ObservablePropertyDecorator<Observable<R>> {
+  return function <P extends PropertyKey>(target: any, key: P) {
+    // Vérification simple basée sur la convention (optionnelle)
+    if (!production && !(key as string).endsWith('$')) {
+      console.warn(
+        `[RxStateComputed] Convention: Property ${target.constructor?.name}.${key as string} should end with '$' to indicate it's an Observable`
+      );
+    }
+    const stateVarName = target instanceof RxState ? null : target[STATE_VAR_NAME_KEY] || opts?.stateName || DEFAULT_STATE_VAR_NAME;
+    const stateObject = stateVarName ? `this.${stateVarName}` : 'this';
+
+    const cachePropertyName = `_${key as string}`;
+    const getMethodName = DecoratorUtils.createMethodName('_get', (key as string).replace(/\$$/, '') + '$');
+    const computeMethodName = DecoratorUtils.createMethodName('_compute', key as string);
+    const keyCompareMapPropertyName = DecoratorUtils.createPropertyName(`_compareMap`, key as string);
+
+    // State validation
+    const stateValidation = DecoratorUtils.validateStateProperty(target, stateObject);
+
+    // Create dependencies array as string for code generation
+    const dependenciesStr = dependencies.map((dep) => `'${dep as string}'`).join(', ');
+
+    // Create the compute method as string, for code generation
+    const computeMethodNameStr = computeFn ? `, (slice) => this.${computeMethodName}(slice)` : '';
+
+    // Create the comparator map function as string, for code generation
+    const keyCompareMapStr = opts?.keyCompareMap ? `, this.${keyCompareMapPropertyName}` : '';
+
+    // Create getter with caching using RxState's native multi-select + pipe(map())
+    const getter = new Function(`
+      return function ${getMethodName}() {
+        ${stateValidation}
+        if (!this.${cachePropertyName}) {
+          const { map } = require('rxjs/operators');
+          this.${cachePropertyName} = ${stateObject}.select([${dependenciesStr}]${computeMethodNameStr}${keyCompareMapStr});
+        }
+        return this.${cachePropertyName};
+      }
+    `)();
+
+    // Attach compute method, optional keyCompareMap with unique name, and getter to prototype
+    if (computeFn) target[computeMethodName] = computeFn;
+    if (opts?.keyCompareMap) target[keyCompareMapPropertyName] = opts.keyCompareMap;
+    target[getMethodName] = getter;
+
+    // Define property with getter only
+    Object.defineProperty(target, key, {
+      get: getter,
+      enumerable: true,
+      configurable: false,
+    });
+
+    // Development logging
+    if (!production) {
+      console.debug(
+        `[RxStateComputed] ${target.constructor?.name}.${key as string} -> ${stateObject}.select([${dependenciesStr}]).pipe(map(computeFn))`
+      );
+    }
+  };
+}

package/src/app/shared/rx-state/rx-state.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RxFor } from '@rx-angular/template/for';
+import { RxIf } from '@rx-angular/template/if';
+import { RxPush } from '@rx-angular/template/push';
+import { RxLet } from '@rx-angular/template/let';
+
+@NgModule({
+  imports: [RxPush, RxFor, RxIf, RxLet],
+  exports: [RxPush, RxFor, RxIf, RxLet],
+})
+export class RxStateModule {}

package/src/app/shared/rx-state/rx-state.types.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export type Observed<T> = {
+  [K in keyof T as `${string & K}$`]: Observable<T[K]>;
+};

package/src/app/shared/services/entity-service.class.ts

@@ -0,0 +1,120 @@
+import { Observable } from 'rxjs';
+import { FetchPolicy, WatchQueryFetchPolicy } from '@apollo/client/core';
+import { SortDirection } from '@angular/material/sort';
+import { EmptyObject } from '../../core/graphql/graphql.utils';
+
+export declare interface Page {
+  offset: number;
+  size: number;
+  sortBy?: string;
+  sortDirection?: SortDirection;
+}
+
+export declare type FetchMoreFn<R, V = EmptyObject> = (variables?: V) => Promise<R>;
+
+export declare interface LoadResult<T> {
+  data: T[];
+  total?: number;
+  errors?: any[];
+  fetchMore?: FetchMoreFn<LoadResult<T>>;
+}
+
+export declare type SuggestFn<T, F> = (
+  value: any,
+  filter?: F,
+  sortBy?: string | keyof T,
+  sortDirection?: SortDirection,
+  opts?: {
+    fetchPolicy?: FetchPolicy;
+    offset?: number;
+    size?: number;
+    [key: string]: any;
+  }
+) => Promise<T[] | LoadResult<T>>;
+
+export declare interface SuggestService<T, F> {
+  suggest: SuggestFn<T, F>;
+}
+
+export declare interface EntityServiceLoadOptions<E = any> {
+  fetchPolicy?: FetchPolicy;
+  trash?: boolean;
+  toEntity?: boolean | ((source: any, opts?: any) => E);
+  query?: any;
+  variables?: any;
+  [key: string]: any;
+}
+
+export declare interface EntityServiceWatchOptions<T = any> {
+  fetchPolicy?: WatchQueryFetchPolicy;
+  trash?: boolean;
+  toEntity?: boolean | ((source: any, opts?: any) => T);
+  query?: any;
+  variables?: any;
+  [key: string]: any;
+}
+export declare interface EntityServiceListenChangesOptions<T = any> {
+  interval?: number;
+  fetchPolicy?: FetchPolicy;
+  toEntity?: boolean | ((source: any) => T);
+  query?: any;
+  variables?: any;
+  [key: string]: any;
+}
+
+export declare interface IEntityService<T, ID = any, LO = EntityServiceLoadOptions<T>> {
+  load(id: ID, opts?: LO): Promise<T>;
+
+  canUserWrite(data: T, opts?: any): boolean;
+
+  save(data: T, opts?: any): Promise<T>;
+
+  delete(data: T, opts?: any): Promise<any>;
+
+  listenChanges(id: ID, opts?: any): Observable<T | undefined>;
+}
+
+export declare interface EntitiesServiceLoadOptions<T = any> extends EntityServiceLoadOptions<T> {
+  withTotal?: boolean;
+}
+
+export declare interface EntitiesServiceWatchOptions<T = any> extends EntityServiceWatchOptions<T> {
+  withTotal?: boolean;
+}
+
+export declare interface IEntitiesService<T, F, O extends EntitiesServiceWatchOptions = EntitiesServiceWatchOptions<T>> {
+  // TODO change to required (in a future version)
+  readonly defaultFetchPolicy?: WatchQueryFetchPolicy;
+
+  watchAll(offset: number, size: number, sortBy?: string, sortDirection?: SortDirection, filter?: Partial<F>, options?: O): Observable<LoadResult<T>>;
+
+  // TODO
+  /*watchPage(
+    page: Page<T>,
+    filter?: F,
+    options?: O
+  ): Observable<LoadResult<T>>;*/
+
+  saveAll(data: T[], opts?: any): Promise<T[]>;
+
+  deleteAll(data: T[], opts?: any): Promise<any>;
+
+  asFilter(filter: Partial<F>): F;
+}
+
+export declare type LoadResultByPageFn<T> = (offset: number, size: number) => Promise<LoadResult<T>>;
+
+export interface IEntityFullService<T, ID, F, O extends EntitiesServiceWatchOptions & EntityServiceLoadOptions>
+  extends IEntityService<T, ID, O>,
+    IEntitiesService<T, F, O> {}
+
+export function mergeLoadResult<T>(res1: LoadResult<T>, res2: LoadResult<T>): LoadResult<T> {
+  return {
+    data: (res1.data || []).concat(...res2.data),
+    total: (res1.total || res1.data?.length || 0) + (res2.total || res2.data?.length || 0),
+  };
+}
+
+export function isEntityService<T, ID>(service: any): service is IEntityService<T, ID> {
+  return service && service.load && service.save && service.delete;
+}

package/src/app/shared/services/job.utils.ts

@@ -0,0 +1,124 @@
+import { BehaviorSubject, defer, Observable } from 'rxjs';
+import { isNil, isNotNil, toNumber } from '../functions';
+import { LoadResult, LoadResultByPageFn } from './entity-service.class';
+
+export type CallableWithProgressionFn<O extends CallableWithProgressionOptions> = (opts?: O) => Promise<any>;
+export interface CallableWithProgressionOptions {
+  maxProgression?: number;
+  progression?: BehaviorSubject<number>;
+  [key: string]: any;
+}
+
+// @dynamic
+export class JobUtils {
+  static defers<O extends CallableWithProgressionOptions>(runnableList: CallableWithProgressionFn<O>[], opts?: O): Observable<number>[] {
+    return runnableList.map((runnable) => JobUtils.defer(runnable, opts));
+  }
+
+  static defer<O extends CallableWithProgressionOptions>(runnable: CallableWithProgressionFn<O>, opts?: O): Observable<number> {
+    return defer<Observable<number>>(() => JobUtils.run(runnable, opts));
+  }
+
+  static run<O extends CallableWithProgressionOptions>(runnable: CallableWithProgressionFn<O>, opts: O): Observable<number> {
+    const progression = new BehaviorSubject<number>(0);
+    runnable({ ...opts, progression })
+      .then(() => {
+        if (opts?.maxProgression) progression.next(opts.maxProgression);
+        progression.complete();
+      })
+      .catch((err) => progression.error(err));
+    return progression;
+  }
+
+  static async fetchAllPages<T>(
+    loadPageFn: LoadResultByPageFn<T>,
+    opts?: {
+      progression?: BehaviorSubject<number>;
+      maxProgression?: number;
+      onPageLoaded?: (pageResult: LoadResult<T>) => any;
+      logPrefix?: string;
+      fetchSize?: number;
+    }
+  ): Promise<LoadResult<T>> {
+    const maxProgression = toNumber(opts?.maxProgression, 100);
+    const progression = opts?.progression;
+    let total;
+    let pageCount;
+    let progressionStep;
+    let currentPageDataCount: number;
+    const fetchSize = toNumber(opts?.fetchSize, 1000);
+    if (fetchSize <= 0) throw new Error('Unable to fetch pages: invalid fetchSize: ' + fetchSize);
+    let offset = 0;
+    let data: T[] = [];
+    do {
+      if (opts && opts.logPrefix) console.debug(`${opts.logPrefix} Fetching page #${offset / fetchSize}...`);
+
+      // Fetch a page
+      const res = await loadPageFn(offset, fetchSize);
+
+      // Concat to previous result
+      data = data.concat(res.data);
+
+      // Compute variables, for next loop
+      currentPageDataCount = (res.data && res.data.length) || 0;
+      offset += currentPageDataCount;
+
+      // Set total count (only once)
+      if (isNil(total) && isNotNil(res.total)) {
+        total = res.total;
+        // Compute the number of page
+        pageCount = Math.round(res.total / fetchSize + 0.5); // Round to HALF_UP integer
+        // Compute step, by dividing maxProgression by number of page
+        if (progression) {
+          progressionStep = maxProgression / pageCount;
+          // DEBUG
+          if (opts && opts.logPrefix)
+            console.debug(
+              `${opts.logPrefix} {pageCount: ${pageCount}, progress: ${progression.value?.toFixed(2)}, pageProgressStep: ${progressionStep?.toFixed(1)}}`
+            );
+        }
+      }
+
+      // Increment progression on each iteration (if possible)
+      if (isNotNil(progressionStep)) {
+        progression.next(progression.value + progressionStep);
+      }
+
+      if (opts?.onPageLoaded) opts.onPageLoaded(res);
+    } while (currentPageDataCount > 0 && ((isNil(total) && currentPageDataCount === fetchSize) || (isNotNil(total) && offset < total)));
+
+    // Complete progression to reach progressionStep value (because of round)
+    if (isNotNil(progressionStep)) {
+      // If total return by loadAll was bad !
+      if (isNotNil(total) && data.length < total) {
+        console.warn(`A function loadAll() returned a bad total (less than all page's data)! Expected ${total} but fetch ${data.length}`);
+        total = data.length;
+        pageCount = Math.round(data.length / fetchSize + 0.5);
+      }
+
+      // Compute final increment, using the real page count
+      progressionStep = Math.max(0, maxProgression - progressionStep * pageCount);
+    }
+
+    // Or increment once (e.g. when total is not known, in received LoadResult)
+    else if (progression) {
+      progressionStep = maxProgression;
+    }
+
+    // DEBUG
+    if (opts && opts.logPrefix)
+      console.debug(
+        `${opts.logPrefix} All pages fetched - {progress: ${progression.value?.toFixed(2)}, lastProgressStep: ${progressionStep?.toFixed(1)}`
+      );
+
+    // Final increment
+    if (progression && progressionStep > 0) {
+      progression.next(progression.value + progressionStep);
+    }
+
+    return {
+      data,
+      total,
+    };
+  }
+}