@nu-art/thunderstorm-frontend 0.400.5

package/utils/EditableItem.js

@@ -0,0 +1,552 @@
+import { _keys, compare, deepClone, deleteKeysObject, exists, generateHex, isErrorOfType, KeysOfDB_Object, Logger, mergeObject, MUSTNeverHappenException, queuedDebounce, removeFromArrayByIndex, removeItemFromArray, resolveContent, Second, ValidationException, WhoCallThisException } from '@nu-art/ts-common';
+export const EditableItemStatus_Saving = 'saving';
+export const EditableItemStatus_SavedWithErrors = 'saved-with-errors';
+export const EditableItemStatus_FailedValidation = 'failed-validation';
+export const EditableItemStatus_ErrorSaving = 'error-saving';
+export const EditableItemStatus_UnsavedChanges = 'unsaved-changes';
+export const EditableItemStatus_Creating = 'creating';
+export const EditableItemStatus_Saved = 'saved';
+export const EditableItemStatus_Unknown = 'unknown';
+const EditableItemStatuses = [
+    EditableItemStatus_Saving,
+    EditableItemStatus_SavedWithErrors,
+    EditableItemStatus_FailedValidation,
+    EditableItemStatus_ErrorSaving,
+    EditableItemStatus_UnsavedChanges,
+    EditableItemStatus_Creating,
+    EditableItemStatus_Saved,
+    EditableItemStatus_Unknown,
+];
+/**
+ * A utility class for editing any item of type T.
+ * It encapsulates an item along with functions to save and delete the item.
+ * This class can be used with any type of item that can be modified, saved, and deleted.
+ *
+ * @template T The type of the item.
+ */
+export class EditableItem extends Logger {
+    static AUTO_SAVE = false;
+    internalSaveAction;
+    status = EditableItemStatus_Unknown;
+    statusListener = [];
+    item;
+    originalItem;
+    validationResults;
+    conflictingItem;
+    _autoSave = EditableItem.AUTO_SAVE;
+    _isSaving = false;
+    saveError;
+    onSaveCompleted;
+    onChanged;
+    preSaveAction;
+    deleteAction;
+    saveAction;
+    onError;
+    /**
+     * Constructs an EditableItem instance.
+     *
+     * @param item The item to be edited.
+     * @param saveAction The function to be called when saving the item.
+     * @param deleteAction The function to be called when deleting the item.
+     */
+    constructor(item) {
+        super();
+        this.setTag(`${this.constructor['name']}-${generateHex(4)}`);
+        // this.setMinLevel(LogLevel.Verbose);
+        // @ts-ignore
+        if (!!item.__updated) {
+            // @ts-ignore
+            this.logVerbose(`constructor - ${item.__updated}`, new WhoCallThisException());
+        }
+        this.internalSaveAction = async (item) => {
+            // update ui and make sure it called the on change
+            this._isSaving = true;
+            this.calculateState();
+            this.preSaveAction?.(item);
+            this.callOnChange();
+            try {
+                let response = await this.saveAction(item);
+                response = this.processResponse(response);
+                this.updateItemImpl(response);
+                this.callOnChange();
+                this.onSaveCompleted?.(response);
+                delete this.saveError;
+                return response;
+            }
+            catch (err) {
+                this.saveError = err;
+                // is this really needed?? from quai fork
+                // this.handleValidationError(err as Error);
+                if (!this.onError)
+                    throw err;
+                await this.onError(item, err);
+                return item;
+            }
+            finally {
+                this._isSaving = false;
+                this.calculateState(); // <== this results in has changes
+            }
+        };
+        this.autoSaveImpl.bind(this);
+        this.hasConflicts.bind(this);
+        this.processResponse.bind(this);
+        this.updateItemImpl(item);
+        this.calculateState();
+    }
+    updateItemImpl(newItem) {
+        // @ts-ignore
+        this['item'] = deepClone(newItem);
+        this.originalItem = newItem;
+    }
+    setOnError(onError) {
+        this.onError = onError;
+        return this;
+    }
+    setOnChanged(onChanged) {
+        this.onChanged = onChanged;
+        return this;
+    }
+    handleValidationError(err) {
+        throw err;
+    }
+    setSaveAction(saveAction) {
+        this.saveAction = saveAction;
+        return this;
+    }
+    setDeleteAction(deleteAction) {
+        this.deleteAction = deleteAction;
+        return this;
+    }
+    setPreSaveAction(preSaveAction) {
+        this.preSaveAction = preSaveAction;
+        return this;
+    }
+    setOnDelete(onDelete) {
+        this.deleteAction = onDelete;
+        return this;
+    }
+    setOnSaveCompleted(onSaved) {
+        this.onSaveCompleted = onSaved;
+        return this;
+    }
+    setConflictingItem(conflictingItem) {
+        if (exists(conflictingItem) && this.hasConflicts(conflictingItem)) {
+            this.conflictingItem = conflictingItem;
+            this.callOnChange();
+            return;
+        }
+        delete this.conflictingItem;
+        if (exists(conflictingItem))
+            this.updateItem(conflictingItem);
+    }
+    hasConflicts(conflictingItem) {
+        return !compare(conflictingItem, this.item);
+    }
+    hasChanges() {
+        // console.group('compare', this.originalItem);
+        // console.log('item', this.item);
+        // console.log('originalItem', this.originalItem);
+        // console.groupEnd();
+        return !compare(this.item, this.originalItem);
+    }
+    addStatusListener(listener) {
+        this.statusListener.push(listener);
+        listener.onEditableItemStatusChanged(this.status, this.status, this);
+    }
+    removeStatusListener(listener) {
+        removeItemFromArray(this.statusListener, listener);
+    }
+    calculateState() {
+        if (this.isSaving())
+            return this.setStatus(EditableItemStatus_Saving);
+        if (this.hasValidationError())
+            return this.setStatus(EditableItemStatus_FailedValidation);
+        if (this.saveError)
+            return this.setStatus(EditableItemStatus_ErrorSaving);
+        if (this.hasChanges()) {
+            return this.setStatus(EditableItemStatus_UnsavedChanges);
+        }
+        return this.setStatus(EditableItemStatus_Unknown);
+    }
+    setStatus(newStatus) {
+        const prevStatus = this.status;
+        this.status = newStatus;
+        if (prevStatus === newStatus)
+            return;
+        this.logDebug(`Status changed: ${prevStatus} => ${newStatus}`);
+        this.statusListener.forEach(l => l.onEditableItemStatusChanged(newStatus, prevStatus, this));
+    }
+    getStatus() {
+        return this.status;
+    }
+    /**
+     * Set the auto-save mode.Page_ItemsEditor
+     *
+     * @param mode The auto-save mode.
+     * @returns The instance itself for method chaining.
+     */
+    setAutoSave(mode) {
+        this._autoSave = mode;
+        return this;
+    }
+    /**
+     * Get the saving status of the current editable instance
+     * @returns The saving status as boolean
+     */
+    isSaving() {
+        return this._isSaving;
+    }
+    /**
+     * Set the value of a specific property in the item.
+     *
+     * @template K The type of the key.
+     * @param key The key of the property.
+     * @param value The new value of the property.
+     * @returns A boolean indicating whether the value has been set.
+     */
+    set(key, value) {
+        const finalValue = resolveContent(value);
+        this.logVerbose(`set: ${String(key)}:`, finalValue);
+        if (!exists(finalValue) && exists(this.item[key])) {
+            if (Array.isArray(this.item))
+                removeFromArrayByIndex(this.item, key);
+            else
+                delete this.item[key];
+            return true;
+        }
+        if (compare(finalValue, this.item[key]))
+            return false;
+        this.item[key] = finalValue;
+        return true;
+    }
+    /**
+     * Updates the item with the given values and performs auto-save if enabled.
+     * This method allows partial updates, only the properties provided in the values object will be updated.
+     *
+     * @param values An object with partial properties of T.
+     * @returns A promise representing the auto-save operation if changes were made and auto-save is enabled.
+     */
+    async updateObj(values) {
+        this.logVerbose(`updateObj:`, values);
+        const hasChanges = _keys(values).reduce((hasChanges, prop) => {
+            return this.set(prop, values[prop]) || hasChanges;
+        }, false);
+        this.autoSave(hasChanges);
+    }
+    /**
+     * Equivalent to array.push
+     * @param value
+     * @param index
+     */
+    updateArrayAt(value, index = this.item.length) {
+        this.logVerbose(`updateArrayAt(${index}):`, value);
+        return this.updateObj({ [index]: value });
+    }
+    removeArrayItem(index) {
+        this.logVerbose(`removeArrayItem(${index}):`);
+        return this.updateObj({ [index]: undefined });
+    }
+    // async updateArr<P extends Created<T>>(values: Partial<{ [K in keyof P]: ResolvableContent<T[K] | undefined> }>) {
+    // 	const hasChanges = _keys(values).reduce((hasChanges, prop) => {
+    // 		return this.set(prop, values[prop]) || hasChanges;
+    // 	}, false);
+    //
+    // 	return this.autoSave(hasChanges);
+    // }
+    /**
+     * Update the value of a specific property in the item and perform auto-save if enabled.
+     *
+     * @template K The type of the key.
+     * @param key The key of the property.
+     * @param value The new value of the property.
+     * @returns A promise representing the auto-save operation if enabled, undefined otherwise.
+     */
+    async update(key, value) {
+        this.logVerbose(`updating ${String(key)}`);
+        this.autoSave(this.set(key, value));
+    }
+    /**
+     * Get a value of a specific property
+     *
+     * @template K The type of the key.
+     * @param key The key of the property.
+     * @param fallbackValue
+     * @returns Readonly type of the value in T[K].
+     */
+    // @ts-ignore
+    get(key, fallbackValue) {
+        return (this.item[key] ?? (this.item[key] = fallbackValue));
+    }
+    hasError(key) {
+        const validationResults = this.validationResults;
+        const error = key ? validationResults?.results?.[key] : validationResults?.results;
+        if (!error)
+            return;
+        if (validationResults?.editing)
+            return error;
+    }
+    hasErrors = () => !!this.validationResults;
+    hasValidationError = () => !!this.validationResults;
+    setValidationResults(ValidationResults) {
+        this.validationResults = ValidationResults;
+        return this;
+    }
+    /**
+     * If auto save in the editable item is true, preform the save action
+     * Can be overridden in deriving classes
+     * @protected
+     */
+    async autoSaveImpl() {
+        this.logDebug(`performing autosave`);
+        // Return item cloned to make sure it's not frozen
+        await this.internalSaveAction(this.item);
+    }
+    processResponse(dbItem) {
+        return deepClone(dbItem);
+    }
+    autoSave(hasChanges = true) {
+        if (!hasChanges)
+            return this.logVerbose(`will not perform autosave.. no changes`);
+        if (this._autoSave)
+            try {
+                this.autoSaveImpl();
+            }
+            catch (err) {
+                this.logError(`Error while autosave:`, err);
+            }
+        if (this.validationResults)
+            this.validate();
+        this.setTag(`${this.constructor['name']}-${generateHex(4)}`);
+        this.logVerbose(`calling onChange - autoSave`);
+        return this.onChanged?.(this);
+    }
+    /**
+     * Save the item by calling the saveAction function.
+     *
+     * @returns The promise returned by the saveAction function.
+     */
+    async save(consumeError = true) {
+        this.logInfo(`Saving`);
+        // Save the current item
+        return this.internalSaveAction(this.item);
+    }
+    /**
+     * Delete the item by calling the deleteAction function.
+     *
+     * @template K The type of the key.
+     * @returns A promise representing the delete operation.
+     */
+    async delete() {
+        return this.deleteAction(this.item);
+    }
+    /**
+     * Return a new EditableItem that represents a property of the current item.
+     *
+     * @template K The type of the key.
+     * @param key The key of the property.
+     * @param defaultValue The default value of the property.
+     * @returns The new EditableItem.
+     */
+    editProp(key, defaultValue) {
+        let itemToEdit = this.item[key] || (this.item[key] = resolveContent(defaultValue));
+        if (Array.isArray(itemToEdit) || typeof itemToEdit === 'object')
+            itemToEdit = deepClone(itemToEdit);
+        let validationResults;
+        const result = this.validationResults?.results?.[key];
+        if (this.validationResults && exists(result)) {
+            validationResults = {
+                autoSave: this.validationResults.autoSave,
+                editing: this.validationResults.editing,
+                results: result // checked if exists in the above condition
+            };
+        }
+        const editableProp = new EditableItem(itemToEdit)
+            .setSaveAction(async (value) => {
+            this.set(key, value);
+            await this.autoSave();
+            return value;
+        })
+            .setDeleteAction(() => this.delete())
+            .setValidationResults(validationResults)
+            .setAutoSave(true);
+        if (exists(this.conflictingItem))
+            editableProp.setConflictingItem(this.conflictingItem?.[key]);
+        this.logVerbose(`editing prop => ${editableProp.tag} - ${String(key)}`);
+        return editableProp;
+    }
+    /**
+     * Return a new EditableItem for the DB Entity described by the reference id associated with the provided key and module.
+     *
+     * @template K The type of the key.
+     * @param key The key of the reference id.
+     * @param module The module associated with the reference id.
+     * @param initialValue An initial value to use in case there is no reference id.
+     *
+     * @returns The new EditableItem.
+     */
+    editRefV3(key, module, initialValue) {
+        const itemId = this.item[key];
+        let editingItem;
+        if (!exists(itemId))
+            editingItem = initialValue;
+        else {
+            editingItem = module.cache.unique(itemId);
+            if (!exists(editingItem))
+                throw new MUSTNeverHappenException(`Could not find db item for id: ${itemId} in collection: ${module.dbDef.dbKey}`);
+        }
+        return new EditableDBItemV3(editingItem, module);
+    }
+    /**
+     * Implement in children! validate the item using custom logic
+     * @protected
+     */
+    validate() {
+        return;
+    }
+    /**
+     * Trigger on change with all necessary actions for the editable instance
+     * @protected
+     */
+    callOnChange() {
+        // Make sure UI re-renders
+        this.setTag(`${this.constructor['name']}-${generateHex(4)}`);
+        this.onChanged?.(this);
+    }
+    /**
+     * handle item update from a different source out of the editable item
+     * @param newItem The item passed to the instance from the third party
+     */
+    updateItem(newItem) {
+        // Update item if needed
+        this.updateItemImpl(newItem);
+        this.callOnChange();
+    }
+}
+/**
+ * A utility class for editing any item of type T that can be stored in a database.
+ * This class extends EditableItem and adds functionality related to database operations.
+ *
+ * @template T The type of the item that extends DB_Object.
+ * @template Ks The keys of the T type. Default is '_id'.
+ */
+export class EditableDBItemV3 extends EditableItem {
+    module;
+    // @ts-ignore
+    debounceInstance;
+    debounceTimeout = 2 * Second;
+    /**
+     * Constructs an EditableDBItemV3 instance.
+     *
+     * @param item The item to be edited.
+     * @param module The module for database operations.
+     * @param onCompleted The function to be called when the operation is completed.
+     * @param debounceInstance Debounce instance from previous editable item
+     */
+    constructor(item, module, debounceInstance) {
+        super(item);
+        this.setSaveAction(async (_item) => await module.v1.upsert(_item).executeSync());
+        this.setDeleteAction(async (_item) => await module.v1.delete(_item).executeSync());
+        this.module = module;
+        //binds
+        this.save.bind(this);
+        this.autoSaveImpl.bind(this);
+        this.processResponse.bind(this);
+        this.debounceInstance = queuedDebounce(async () => {
+            this.logDebug('Debounce triggered');
+            await this.internalSaveAction(this.item);
+        }, this.debounceTimeout, 5 * Second);
+    }
+    async save(consumeError = true) {
+        try {
+            return await super.save(consumeError);
+        }
+        catch (e) {
+            this.handleValidationError(e);
+            if (!consumeError)
+                throw e;
+        }
+    }
+    processResponse(dbItem) {
+        // Changing the saving flag back to false and call onChange
+        const currentUIItem = deleteKeysObject({ ...this.item }, [...KeysOfDB_Object,
+            ...(this.module.dbDef.generatedProps ?? _keys(this.module.dbDef.generatedPropsValidator))]);
+        return mergeObject(dbItem, currentUIItem);
+    }
+    /**
+     * Preform auto save in editable db item will be in debounce
+     * @protected
+     */
+    async autoSaveImpl() {
+        if (this.validate())
+            this.debounceInstance();
+        this.calculateState();
+        this.callOnChange();
+    }
+    setDebounceTimeout = (timeout) => {
+        this.debounceTimeout = timeout;
+        return this;
+    };
+    hasConflicts(_conflictingItem) {
+        const item = deleteKeysObject({ ...this.item }, [...KeysOfDB_Object,
+            ...(this.module.dbDef.generatedProps ?? _keys(this.module.dbDef.generatedPropsValidator))]);
+        const conflictingItem = deleteKeysObject({ ..._conflictingItem }, [...KeysOfDB_Object,
+            ...(this.module.dbDef.generatedProps ?? _keys(this.module.dbDef.generatedPropsValidator))]);
+        return !compare(conflictingItem, item);
+    }
+    calculateState() {
+        if (this.isSaving())
+            return this.setStatus(EditableItemStatus_Saving);
+        if (this.hasValidationError() && !this.hasChanges() && this.get('_id'))
+            return this.setStatus(EditableItemStatus_SavedWithErrors);
+        if (this.hasValidationError())
+            return this.setStatus(EditableItemStatus_FailedValidation);
+        if (this.saveError)
+            return this.setStatus(exports.EditableItemStatus_ErrorSaving);
+        if (this.hasChanges()) {
+            return this.setStatus(EditableItemStatus_UnsavedChanges);
+        }
+        if (!this.get('_id'))
+            return this.setStatus(EditableItemStatus_Creating);
+        if (this.get('_id'))
+            return this.setStatus(EditableItemStatus_Saved);
+        return this.setStatus(EditableItemStatus_Unknown);
+    }
+    /**
+     * Use the db module provided to validate and update the validation results accordingly
+     * @return preDB item if validation succeeded otherwise returns void
+     */
+    validate() {
+        try {
+            this.module.validateImpl(this.item);
+            this.setValidationResults(undefined);
+            return this.item;
+        }
+        catch (e) {
+            this.handleValidationError(e);
+        }
+    }
+    /**
+     * Update db item from a source out of the save action merged with the current UI item in the instance
+     * @param newItem The item passed to the instance from the third party
+     */
+    updateItem(newItem) {
+        this.logWarning(`updating item externally, __updated: ${newItem.__updated}`);
+        const currentUIItem = deleteKeysObject({ ...this.item }, [...KeysOfDB_Object, ..._keys(this.module.dbDef.generatedPropsValidator)]);
+        super.updateItem(mergeObject(currentUIItem, newItem));
+        this.validate();
+    }
+    handleValidationError(e) {
+        const validationException = isErrorOfType(e, (ValidationException));
+        if (!validationException)
+            throw e;
+        this.logInfo('Validation error while saving');
+        this.setValidationResults({
+            autoSave: this._autoSave,
+            editing: this.validationResults?.editing || !!this.item._id || !this._autoSave,
+            results: validationException.result
+        });
+        // while getting new errors (for now) we need to call on change in order to replace the editable item instance.. (this will change)
+        this.setTag(`${this.constructor['name']}-${generateHex(4)}`);
+        this.onChanged?.(this);
+    }
+}

package/utils/console/LogClient_ConsoleInterceptor.d.ts

@@ -0,0 +1,5 @@
+import { LogClient_MemBuffer } from '@nu-art/ts-common';
+export declare class LogClient_ConsoleInterceptor extends LogClient_MemBuffer {
+    constructor(name: string, maxBuffers?: number, maxBufferSize?: number);
+    private overrideConsole;
+}

package/utils/console/LogClient_ConsoleInterceptor.js

@@ -0,0 +1,70 @@
+// BaseComponent.MinLogLevel = LogLevel.Debug;
+import { LogClient_MemBuffer, LogLevel } from '@nu-art/ts-common';
+export class LogClient_ConsoleInterceptor extends LogClient_MemBuffer {
+    constructor(name, maxBuffers = 10, maxBufferSize = 1024 * 1024) {
+        super(name, maxBuffers, maxBufferSize);
+        this.overrideConsole();
+    }
+    overrideConsole() {
+        const originConsole = { ...window.console };
+        const overrideLog = (logLevel, method) => {
+            const logToBuffer = (...args) => {
+                const message = args[0];
+                if (!message || typeof message !== 'string') {
+                    return this.logMessage(logLevel, false, '', args);
+                }
+                args.shift();
+                const formatRegex = /(%[sidfoOc])/g;
+                let formatted = '';
+                let i = 0;
+                let match;
+                while ((match = formatRegex.exec(message)) !== null) {
+                    formatted += message.substring(i, match.index);
+                    const specifier = match[1];
+                    const arg = args.shift();
+                    switch (specifier) {
+                        case '%c':
+                            break;
+                        case '%s':
+                            formatted += arg;
+                            break;
+                        case '%d':
+                        case '%i':
+                            formatted += Number.parseInt(arg).toLocaleString();
+                            break;
+                        case '%f':
+                            formatted += Number.parseFloat(arg).toLocaleString();
+                            break;
+                        case '%O':
+                        case '%o':
+                            formatted += JSON.stringify(arg, null, 2);
+                            break;
+                        default:
+                            formatted += specifier;
+                    }
+                    i = formatRegex.lastIndex; // exclude the format specifier
+                }
+                formatted += message.substring(i);
+                this.logMessage(logLevel, false, '', [formatted]);
+            };
+            return (...args) => {
+                try {
+                    logToBuffer(...args);
+                }
+                catch (e) {
+                    originConsole['error']('error logging console message with args: ', ...args);
+                }
+                originConsole[method](...args);
+            };
+        };
+        window.console = {
+            ...window.console,
+            log: overrideLog(LogLevel.Verbose, 'log'),
+            debug: overrideLog(LogLevel.Debug, 'debug'),
+            info: overrideLog(LogLevel.Info, 'info'),
+            warn: overrideLog(LogLevel.Warning, 'warn'),
+            error: overrideLog(LogLevel.Error, 'error'),
+            trace: overrideLog(LogLevel.Error, 'trace'),
+        };
+    }
+}

package/utils/perform-action/genereteToasts.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const isDependencyError: (e: any) => boolean;
+export declare const generateErrorToastContent: (e: any, content: React.ReactNode, additionalData: any) => React.ReactNode;

package/utils/perform-action/genereteToasts.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { _keys, filterInstances, isErrorOfType, ValidationException } from '@nu-art/ts-common';
+export const isDependencyError = (e) => {
+    return (e.errorResponse?.error.type === 'has-dependencies');
+};
+export const generateErrorToastContent = (e, content, additionalData) => {
+    //
+    // if (isDependencyError(e)) {
+    // 	return <ResolveDependencyToast dependencyConflicts={e.errorResponse.error.data} deletedEntity={additionalData}/>;
+    // }
+    if (isErrorOfType(e, ValidationException))
+        return _jsx("div", { children: `Invalid input for fields: ${filterInstances(_keys(e.result)).join(', ')}` });
+    return _jsx("div", { children: "Something went wrong, try again later..." });
+};

package/utils/perform-action/index.d.ts

@@ -0,0 +1,2 @@
+export * from './performAction.js';
+export * from './notification-dispatchers.js';

package/utils/perform-action/index.js

@@ -0,0 +1,2 @@
+export * from './performAction.js';
+export * from './notification-dispatchers.js';

package/utils/perform-action/notification-dispatchers.d.ts

@@ -0,0 +1,6 @@
+import { UniqueId } from "@nu-art/ts-common";
+import { ThunderDispatcher } from "../../core/thunder-dispatcher.js";
+export interface OnDeleteConflicts {
+    __onDeleteConflicts: (entity: string, conflictingIds: UniqueId[]) => void;
+}
+export declare const dispatch_onDeleteConflicts: ThunderDispatcher<OnDeleteConflicts, "__onDeleteConflicts", [entity: string, conflictingIds: string[]], void>;

package/utils/perform-action/notification-dispatchers.js

@@ -0,0 +1,2 @@
+import { ThunderDispatcher } from "../../core/thunder-dispatcher.js";
+export const dispatch_onDeleteConflicts = new ThunderDispatcher('__onDeleteConflicts');