@masterteam/components 0.0.57 → 0.0.59

package/fesm2022/masterteam-components.mjs

@@ -2,6 +2,9 @@ import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeuix/themes/aura';
 import { updatePreset, definePreset } from '@primeuix/themes';
 import { MessageService, ConfirmationService } from 'primeng/api';
+import { computed } from '@angular/core';
+import { of } from 'rxjs';
+import { tap, catchError, finalize } from 'rxjs/operators';
 
 /**
  * Converts a hex color string to an HSL tuple.
@@ -447,12 +450,6 @@ function provideMTConfirmation() {
     return ConfirmationService;
 }
 
-function isInvalid(control) {
-    if (!control)
-        return false;
-    return control && control?.invalid && control?.touched;
-}
-
 class ValidatorConfig {
     type;
     value;
@@ -902,13 +899,263 @@ function wrapValidatorWithMessage(validator, errorKey, message) {
 // return  new TextFieldConfig()
 // }
 
+/**
+ * Base facade with smart query selector factory
+ */
+class BaseFacade {
+    /**
+     * Creates a query object with separate signals for data, loading, and error states
+     * Each property is its own signal for granular reactivity
+     *
+     * @example
+     * readonly modulesQuery = this.query(
+     *   'getModulesLoading',
+     *   (state) => state.allModules
+     * );
+     *
+     * // In template - each is a separate signal:
+     * @if (modulesQuery.isPending()) { Loading... }
+     * @if (modulesQuery.error(); as error) { Error: {{ error }} }
+     * @if (modulesQuery.data(); as modules) {
+     *   <div *ngFor="let m of modules">{{ m.title }}</div>
+     * }
+     */
+    query(loadingKey, dataSelector) {
+        const stateSignal = this.state();
+        const isPending = computed(() => {
+            const currentState = stateSignal();
+            return currentState.loadingActive?.includes(loadingKey) ?? false;
+        }, ...(ngDevMode ? [{ debugName: "isPending" }] : []));
+        const error = computed(() => {
+            const currentState = stateSignal();
+            return currentState.errors?.[loadingKey] ?? null;
+        }, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        const data = computed(() => {
+            const currentState = stateSignal();
+            const hasError = currentState.errors?.[loadingKey];
+            return hasError ? null : dataSelector(currentState);
+        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        const isSuccess = computed(() => !isPending() && !error() && data() !== null, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        const isError = computed(() => !!error(), ...(ngDevMode ? [{ debugName: "isError" }] : []));
+        return {
+            data,
+            isPending,
+            isSuccess,
+            isError,
+            error,
+        };
+    }
+    /**
+     * Creates a loading signal for a specific operation
+     */
+    loading(loadingKey) {
+        const stateSignal = this.state();
+        return computed(() => {
+            const currentState = stateSignal();
+            return currentState.loadingActive?.includes(loadingKey) ?? false;
+        });
+    }
+    /**
+     * Creates an error signal for a specific operation
+     */
+    errorSignal(loadingKey) {
+        const stateSignal = this.state();
+        return computed(() => {
+            const currentState = stateSignal();
+            return currentState.errors?.[loadingKey] ?? null;
+        });
+    }
+}
+
+function createEntityAdapter() {
+    return {
+        addOne: (state, entity) => [...state, entity],
+        upsertOne: (state, entity, uniqueKey = 'id') => {
+            const key = entity[uniqueKey];
+            if (key == null)
+                return state;
+            const index = state.findIndex((e) => e[uniqueKey] === key);
+            if (index === -1) {
+                return [...state, entity];
+            }
+            const clone = [...state];
+            clone[index] = entity;
+            return clone;
+        },
+        updateOne: (state, id, changes, uniqueKey = 'id') => state.map((e) => (e[uniqueKey] === id ? { ...e, ...changes } : e)),
+        removeOne: (state, id, uniqueKey = 'id') => state.filter((e) => e[uniqueKey] !== id),
+        setAll: (_state, entities) => [...entities],
+    };
+}
+
+function startLoading(ctx, loadingName) {
+    const { loadingActive, errors } = ctx.getState();
+    if (!loadingActive.includes(loadingName)) {
+        ctx.patchState({
+            loadingActive: [...loadingActive, loadingName],
+        });
+    }
+    if (errors && errors[loadingName]) {
+        const { [loadingName]: _removed, ...rest } = errors;
+        ctx.patchState({ errors: rest });
+    }
+}
+function endLoading(ctx, loadingName) {
+    const { loadingActive } = ctx.getState();
+    ctx.patchState({
+        loadingActive: loadingActive.filter((name) => name !== loadingName),
+    });
+}
+function setLoadingError(ctx, loadingName, message) {
+    const { errors } = ctx.getState();
+    ctx.patchState({
+        errors: { ...errors, [loadingName]: message },
+    });
+}
+
+function handleApiRequest(config) {
+    const { ctx, key, request$, onSuccess, onError, errorMessage } = config;
+    startLoading(ctx, key);
+    return request$.pipe(tap((response) => {
+        const state = ctx.getState();
+        const patch = onSuccess(response, state);
+        if (patch) {
+            ctx.patchState(patch);
+        }
+    }), catchError((error) => {
+        const state = ctx.getState();
+        const message = error?.error?.message ?? error?.message ?? errorMessage;
+        setLoadingError(ctx, key, message);
+        // Call onError callback if provided
+        if (onError) {
+            const patch = onError(error, state);
+            if (patch) {
+                ctx.patchState(patch);
+            }
+        }
+        return of(null);
+    }), finalize(() => endLoading(ctx, key)));
+}
+
+/**
+ * T      = entity type (Module, User, ...)
+ * TState = full state model (must include LoadingStateShape)
+ * TLoad  = union type of loading keys for this feature
+ */
+class CrudStateBase {
+    adapter = createEntityAdapter();
+    /**
+     * Helper to create default updateState function
+     */
+    getDefaultUpdateState(stateProperty) {
+        // Try to extract the property name from the stateProperty function
+        const funcStr = stateProperty.toString();
+        const match = funcStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/); // Match .propertyName
+        const key = match ? match[1] : 'items';
+        return (state, items) => ({ [key]: items });
+    }
+    /**
+     * Load data (single item or array) with config object
+     */
+    load(ctx, config) {
+        return handleApiRequest({
+            ctx,
+            key: config.key,
+            request$: config.request$,
+            onSuccess: (response, state) => {
+                const data = config.transform
+                    ? config.transform(response.data)
+                    : response.data;
+                // If stateProperty provided, use adapter for array operations
+                if (config.stateProperty) {
+                    const items = this.adapter.setAll(config.stateProperty(state), data);
+                    const updateState = config.updateState ??
+                        this.getDefaultUpdateState(config.stateProperty);
+                    return updateState(state, items);
+                }
+                // Otherwise, use custom updateState directly
+                if (config.updateState) {
+                    return config.updateState(state, data);
+                }
+                throw new Error('Either stateProperty or updateState must be provided');
+            },
+            onError: config.onError,
+            errorMessage: config.errorMessage ?? 'Failed to load data',
+        });
+    }
+    /**
+     * Create one entity with config object
+     */
+    create(ctx, config) {
+        const updateState = config.updateState ?? this.getDefaultUpdateState(config.stateProperty);
+        return handleApiRequest({
+            ctx,
+            key: config.key,
+            request$: config.request$,
+            onSuccess: (response, state) => {
+                const entity = config.transform
+                    ? config.transform(response.data)
+                    : response.data;
+                const items = this.adapter.addOne(config.stateProperty(state), entity);
+                return updateState(state, items);
+            },
+            onError: config.onError,
+            errorMessage: config.errorMessage ?? 'Failed to create item',
+        });
+    }
+    /**
+     * Update one entity with config object
+     */
+    update(ctx, config) {
+        const updateState = config.updateState ?? this.getDefaultUpdateState(config.stateProperty);
+        return handleApiRequest({
+            ctx,
+            key: config.key,
+            request$: config.request$,
+            onSuccess: (response, state) => {
+                const entity = config.transform
+                    ? config.transform(response.data)
+                    : response.data;
+                const items = this.adapter.upsertOne(config.stateProperty(state), entity, config.uniqueKey);
+                return updateState(state, items);
+            },
+            onError: config.onError,
+            errorMessage: config.errorMessage ?? 'Failed to update item',
+        });
+    }
+    /**
+     * Delete one entity with config object
+     */
+    delete(ctx, config) {
+        const updateState = config.updateState ?? this.getDefaultUpdateState(config.stateProperty);
+        return handleApiRequest({
+            ctx,
+            key: config.key,
+            request$: config.request$,
+            onSuccess: (_response, state) => {
+                const items = this.adapter.removeOne(config.stateProperty(state), config.id, config.uniqueKey);
+                return updateState(state, items);
+            },
+            onError: config.onError,
+            errorMessage: config.errorMessage ?? 'Failed to delete item',
+        });
+    }
+}
+
+function isInvalid(control) {
+    if (!control)
+        return false;
+    return control && control?.invalid && control?.touched;
+}
+
 /*
  * Public API Surface of components
  */
+// Config
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFieldConfig, CheckboxFieldConfig, ColorPickerFieldConfig, DateFieldConfig, EditorFieldConfig, IconFieldConfig, MultiSelectFieldConfig, NumberFieldConfig, PickListFieldConfig, RadioButtonFieldConfig, RadioCardsFieldConfig, SelectFieldConfig, SliderFieldConfig, SpacerFieldConfig, TextFieldConfig, TextareaFieldConfig, ToggleFieldConfig, UploadFileFieldConfig, UserSearchFieldConfig, ValidatorConfig, changeBackgroundColor, changePrimaryColor, changeTextColor, createCustomValidator, generateTailwindPalette, isInvalid, provideMTComponents, provideMTConfirmation, provideMTMessages, wrapValidatorWithMessage };
+export { BaseFacade, BaseFieldConfig, CheckboxFieldConfig, ColorPickerFieldConfig, CrudStateBase, DateFieldConfig, EditorFieldConfig, IconFieldConfig, MultiSelectFieldConfig, NumberFieldConfig, PickListFieldConfig, RadioButtonFieldConfig, RadioCardsFieldConfig, SelectFieldConfig, SliderFieldConfig, SpacerFieldConfig, TextFieldConfig, TextareaFieldConfig, ToggleFieldConfig, UploadFileFieldConfig, UserSearchFieldConfig, ValidatorConfig, changeBackgroundColor, changePrimaryColor, changeTextColor, createCustomValidator, createEntityAdapter, endLoading, generateTailwindPalette, handleApiRequest, isInvalid, provideMTComponents, provideMTConfirmation, provideMTMessages, setLoadingError, startLoading, wrapValidatorWithMessage };
 //# sourceMappingURL=masterteam-components.mjs.map