rimecms 0.22.0

package/dist/panel/context/documentForm.svelte.js

@@ -0,0 +1,682 @@
+import { applyAction, deserialize } from '$app/forms';
+import { invalidateAll } from '$app/navigation';
+import { page } from '$app/state';
+import { apiUrl } from '../../core/api/index.js';
+import { compileDocumentConfig } from '../../core/config/shared/compile.js';
+import { PARAMS, VERSIONS_STATUS } from '../../core/constant.js';
+import { getFieldConfigByPath } from '../../core/fields/util.js';
+import { buildConfigMap } from '../../core/operations/configMap/index.js';
+import { normalizeFieldPath } from '../../util/doc.js';
+import { random } from '../../util/index.js';
+import { isObjectLiteral, omit } from '../../util/object.js';
+import cloneDeep from 'clone-deep';
+import { diff } from 'deep-object-diff';
+import { flatten } from 'flat';
+import { getContext, setContext } from 'svelte';
+import { toast } from 'svelte-sonner';
+import { t__ } from '../../core/i18n/index.js';
+import { moveItem } from '../../util/array.js';
+import { getValueAtPath, setValueAtPath } from '../../util/object.js';
+import { snapshot } from '../../util/state.js';
+import { API_PROXY, getAPIProxyContext } from './api-proxy.svelte.js';
+import { getCollectionContext } from './collection.svelte.js';
+import { setErrorsContext } from './errors.svelte.js';
+import { getLocaleContext } from './locale.svelte.js';
+import { getUserContext } from './user.svelte.js';
+function createDocumentFormState({ initial, element, config, readOnly, key, onNestedDocumentCreated, onDataChange, beforeSubmit, beforeRedirect, onFieldFocus }) {
+    //
+    let intialDoc = $state(initial);
+    let doc = $state(initial);
+    const documentConfig = compileDocumentConfig(config);
+    const changes = $derived(diff(intialDoc, doc));
+    let isDisabled = $state(readOnly);
+    let processing = $state(false);
+    const operation = $derived(doc.id ? 'update' : 'create');
+    const user = getUserContext();
+    const errors = setErrorsContext(key);
+    const isCollection = documentConfig.type === 'collection';
+    const collection = isCollection ? getCollectionContext(documentConfig.slug) : null;
+    const hasError = $derived(errors.length);
+    const canSubmit = $derived(!isDisabled && !readOnly && Object.keys(changes).length > 0 && !hasError);
+    const nestedLevel = initLevel();
+    const isLiveEdit = !!onDataChange;
+    const locale = getLocaleContext();
+    const titleContext = getContext('title');
+    const initialTitle = initTitle();
+    let title = $state(initialTitle);
+    const apiProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+    function initLevel() {
+        const last = key.split('_').pop();
+        const isDigit = /[\d]+/.test(last);
+        return isDigit ? parseInt(last) : 0;
+    }
+    function initTitle() {
+        if (documentConfig.type === 'area') {
+            titleContext.value = documentConfig.label;
+            return documentConfig.label;
+        }
+        else {
+            $effect(() => {
+                title = getValueAtPath(documentConfig.asTitle, doc) || '[untitled]';
+                if (nestedLevel === 0) {
+                    titleContext.value = title;
+                }
+            });
+            const initialTitle = getValueAtPath(documentConfig.asTitle, doc);
+            return doc && initialTitle ? initialTitle : '[untitled]';
+        }
+    }
+    const rebuildPaths = (items, basePath, parentPath = basePath) => {
+        return items.map((item, index) => {
+            // Clone the item
+            const newItem = cloneDeep(item);
+            // If item has a path property, update it with parent path
+            if ('path' in newItem) {
+                newItem.path = parentPath;
+            }
+            // If item is part of an array, update its position
+            newItem.position = index;
+            // Process all properties of the item
+            Object.keys(newItem).forEach((key) => {
+                // If property is an array of object, process it recursively
+                if (Array.isArray(newItem[key]) &&
+                    newItem[key].length &&
+                    isObjectLiteral(newItem[key][0])) {
+                    const newParentPath = `${parentPath}.${index}.${key}`;
+                    newItem[key] = rebuildPaths(newItem[key], basePath, newParentPath);
+                }
+            });
+            return newItem;
+        });
+    };
+    function setValue(path, value) {
+        doc = setValueAtPath(path, doc, value);
+        if (collection && operation === 'update')
+            collection.updateDoc(doc);
+        if (onDataChange)
+            onDataChange({ path, value });
+    }
+    /**
+     * Function that return a possible reactive value given a path.
+     *
+     * @param path Field path ex: blocks.0.title
+     * @returns the document nested value wich can be a $state or anything else
+     *
+     * @example
+     * const form = getDocumentFormContext()
+     * const value = form.getValue('blocks.0.title')
+     *
+     * //value will update if doc.blocks.0.title update
+     */
+    function getValue(path) {
+        return getValueAtPath(path, doc) || null;
+    }
+    function useTree(path) {
+        // Stamp used for re-render
+        let stamp = $state(new Date().getTime().toString());
+        const generateTempId = () => 'temp-' + new Date().getTime().toString();
+        const getItems = () => {
+            return getValueAtPath(path, doc) || [];
+        };
+        const assignItemsToDoc = (items) => {
+            doc = setValueAtPath(path, doc, items);
+            if (onDataChange)
+                onDataChange({ path, value: snapshot(items) });
+            /** update stamp to rerender */
+            stamp = new Date().getTime().toString();
+        };
+        const addItem = (emptyFields) => {
+            let items = [...getItems()];
+            const itemWithPath = {
+                ...emptyFields,
+                id: generateTempId(),
+                path: path,
+                position: items.length,
+                _children: []
+            };
+            items = items.toSpliced(items.length, 0, itemWithPath);
+            assignItemsToDoc(items);
+        };
+        const deleteItem = (atPath, index) => {
+            let items = cloneDeep(snapshot(getItems()));
+            // Get target array
+            const targetArray = getValueAtPath(atPath.replace(`${path}.`, ''), items) || items;
+            // Perform the move operation
+            targetArray.splice(index, 1);
+            // Rebuild all paths and positions
+            items = rebuildPaths(items, path);
+            errors.deleteAllThatStartWith(`${path}.${index}.`);
+            assignItemsToDoc(items);
+        };
+        const moveItem = (fromPath, toPath) => {
+            let items = cloneDeep(snapshot(getItems()));
+            const getArrayAndIndex = (path) => {
+                const parts = normalizeFieldPath(path).split('.');
+                let current = items;
+                let parentArray = items;
+                const finalIndex = parseInt(parts[parts.length - 1]);
+                for (let i = 0; i < parts.length - 1; i++) {
+                    const part = parts[i];
+                    if (part === '_children') {
+                        continue;
+                    }
+                    const index = parseInt(part);
+                    parentArray = current;
+                    if (!current[index]._children) {
+                        current[index]._children = [];
+                    }
+                    current = current[index]._children;
+                }
+                return {
+                    array: parts.includes('_children') ? current : parentArray,
+                    index: finalIndex,
+                    fullPath: parts.slice(0, -1).join('.')
+                };
+            };
+            // Get source and target information
+            const source = getArrayAndIndex(fromPath);
+            const target = getArrayAndIndex(toPath);
+            // Perform the move operation
+            const [itemToMove] = source.array.splice(source.index, 1);
+            target.array.splice(target.index, 0, itemToMove);
+            // Rebuild paths and positions
+            items = rebuildPaths(items, path);
+            assignItemsToDoc(items);
+        };
+        return {
+            addItem,
+            moveItem,
+            deleteItem,
+            path,
+            get stamp() {
+                return stamp;
+            },
+            get items() {
+                return getItems();
+            }
+        };
+    }
+    function useBlocks(path) {
+        const generateTempId = () => 'temp-' + new Date().getTime().toString();
+        const getBlocks = () => {
+            return cloneDeep(getValueAtPath(path, doc)) || [];
+        };
+        const assignBlocksToDoc = (blocks) => {
+            blocks = rebuildPaths(blocks, path);
+            doc = setValueAtPath(path, doc, blocks);
+            if (onDataChange)
+                onDataChange({ path, value: snapshot(blocks) });
+        };
+        const addBlock = (block) => {
+            const blockWithPath = {
+                ...block,
+                id: generateTempId(),
+                type: block.type,
+                path: path,
+                position: block.position
+            };
+            let blocks = [...getBlocks()];
+            blocks = blocks.toSpliced(block.position, 0, blockWithPath);
+            assignBlocksToDoc(blocks);
+        };
+        const deleteBlock = (index) => {
+            const blocks = [...getBlocks()]
+                .filter((_, i) => i !== index)
+                .map((block, index) => ({ ...block, position: index }));
+            errors.deleteAllThatStartWith(`${path}.${index}.`);
+            assignBlocksToDoc(blocks);
+        };
+        const moveBlock = (from, to) => {
+            let blocks = moveItem(getBlocks(), from, to);
+            blocks = blocks.map((block, index) => ({
+                ...block,
+                position: index
+            }));
+            assignBlocksToDoc(blocks);
+        };
+        const duplicateBlock = (index) => {
+            // return;
+            let blocks = [...getBlocks()];
+            const cloneBlock = (block) => {
+                // First deep clone the block so duplicate origin
+                // is not impacted.
+                const clone = cloneDeep(block);
+                // Function to reset all nested id properties
+                // so nested elements are threated as created elements
+                const resetIds = (obj) => {
+                    if ('id' in obj) {
+                        obj = { ...obj, id: generateTempId() };
+                    }
+                    for (const key of Object.keys(obj)) {
+                        const value = obj[key];
+                        if (Array.isArray(value) && value.length && isObjectLiteral(value[0])) {
+                            obj = {
+                                ...obj,
+                                [key]: value.map((child) => resetIds(child))
+                            };
+                        }
+                    }
+                    return obj;
+                };
+                // set temp-ids for nested elements
+                return resetIds(clone);
+            };
+            const blockCopy = cloneBlock(blocks[index]);
+            blocks.splice(index + 1, 0, blockCopy);
+            blocks = blocks.map((block, index) => ({
+                ...block,
+                position: index
+            }));
+            assignBlocksToDoc(blocks);
+        };
+        return {
+            addBlock,
+            deleteBlock,
+            moveBlock,
+            duplicateBlock,
+            get blocks() {
+                return getBlocks();
+            }
+        };
+    }
+    /**
+     * Function that return an unreactive snapshot of a value given a path.
+     *
+     * @param path Field path ex: blocks.0.title
+     * @returns an unreactive snapshot
+     *
+     * @example
+     * const form = getDocumentFormContext()
+     * const initialValue = form.getRawValue('blocks.0.title')
+     *
+     * // value will not update if doc.blocks.0.title update
+     */
+    function getRawValue(path) {
+        return snapshot(getValueAtPath(path, doc)) || null;
+    }
+    // Recursively remove id property from blocks/tree/relations
+    // This ensure elements to be threated as new,
+    // preventing an unwanted delete or update with the wrong locale
+    const removeIds = (data) => {
+        // Handle arrays
+        if (Array.isArray(data)) {
+            return data.map((item) => removeIds(item));
+        }
+        // Handle objects
+        if (typeof data === 'object' && data !== null) {
+            // First omit the id and locale properties
+            const withoutId = omit(['id', 'locale'], data);
+            const result = { ...withoutId, id: 'temp-' + random.randomId(8) };
+            // Replace with the current locale if present
+            if (locale.code && 'locale' in data) {
+                result.locale = locale.code;
+            }
+            // Then recursively process all remaining properties
+            for (const key in result) {
+                if (key !== 'id' && typeof result[key] === 'object' && result[key] !== null) {
+                    result[key] = removeIds(result[key]);
+                }
+            }
+            return result;
+        }
+        // Return primitive values as is
+        return data;
+    };
+    function useField(path, config) {
+        if (!config) {
+            config = getFieldConfigByPath(path, documentConfig.fields);
+            if (!config)
+                throw new Error(`can't find config for field : ${path}`);
+        }
+        path = path ? normalizeFieldPath(path) : config.name;
+        const parts = $derived(path.split('.'));
+        const validate = (value) => {
+            if (config.required && config.isEmpty(value)) {
+                errors.set(path, 'required::required_field');
+                return 'required';
+            }
+            if (config.validate) {
+                const validated = config.validate(value, {
+                    data: doc,
+                    locale: locale.code,
+                    id: doc.id ?? undefined,
+                    operation: doc.id ? 'update' : 'create',
+                    user: user.attributes,
+                    config
+                });
+                if (validated !== true) {
+                    errors.set(path, validated);
+                    return false;
+                }
+            }
+            if (errors.has(path)) {
+                errors.delete(path);
+            }
+            return true;
+        };
+        const getSiblings = () => {
+            let siblings = doc;
+            if (parts.length > 1) {
+                const upperPath = path.substring(0, path.lastIndexOf('.'));
+                siblings = getValueAtPath(upperPath, doc) || {};
+            }
+            return siblings;
+        };
+        const setValueFromDefaultLocale = async () => {
+            const BASE_API_URL = apiUrl(documentConfig.kebab);
+            let fetchURL = BASE_API_URL;
+            const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? '&draft=true' : '';
+            if (isCollection) {
+                fetchURL += `?where[id][equals]=${doc.id}&locale=${locale.defaultCode}${draftParam}`;
+            }
+            else {
+                fetchURL += `?locale=${locale.defaultCode}${draftParam}`;
+            }
+            // Fetch data
+            const result = await fetch(fetchURL).then((r) => r.json());
+            // Process data
+            if ((isCollection && Array.isArray(result.docs) && result.docs.length) || result.doc) {
+                // Extract data from the appropriate response structure:
+                // - For collections: data is in result.docs[0]
+                // - For areas: data is in result.doc
+                const document = isCollection ? result.docs[0] : result.doc;
+                const defaultLocaleValue = getValueAtPath(path, document) || [];
+                // Remove ids from blocks before setting the value
+                setFieldValue(removeIds(defaultLocaleValue));
+            }
+        };
+        const setFieldValue = (value) => {
+            const valid = validate(value);
+            if (!config.access?.update)
+                return;
+            if (operation === 'update' && !config.access.update(user.attributes)) {
+                return;
+            }
+            if (valid) {
+                setValue(path, value);
+                if (Array.isArray(config.hooks?.onChange)) {
+                    for (const hook of config.hooks?.onChange || []) {
+                        hook(value, {
+                            siblings: getSiblings(),
+                            useField,
+                            useBlocks,
+                            useTree
+                        });
+                    }
+                }
+            }
+        };
+        return {
+            path,
+            setValueFromDefaultLocale,
+            get value() {
+                return getValueAtPath(path, doc);
+            },
+            set value(value) {
+                setFieldValue(value);
+            },
+            get editable() {
+                if (readOnly)
+                    return false;
+                if (!config.access)
+                    return false;
+                if (operation === 'create') {
+                    return config.access.create(user.attributes);
+                }
+                else {
+                    return config.access.update(user.attributes);
+                }
+            },
+            get visible() {
+                if (config.access?.read && !config.access?.read(user.attributes)) {
+                    return false;
+                }
+                let visible = true;
+                if (config.condition) {
+                    try {
+                        visible = config.condition(doc, getSiblings());
+                    }
+                    catch (err) {
+                        console.error(err.message);
+                    }
+                }
+                return visible;
+            },
+            get error() {
+                return errors.value[path] || false;
+            },
+            get isEmpty() {
+                return !!config.isEmpty && config.isEmpty(getValueAtPath(path, doc));
+            }
+        };
+    }
+    const prepareData = async () => {
+        let data = {};
+        for (const key of Object.keys(changes)) {
+            data[key] = doc[key];
+        }
+        if (beforeSubmit) {
+            data = await beforeSubmit(data);
+        }
+        const flatData = flatten(data);
+        const formData = new FormData();
+        for (const key of Object.keys(flatData)) {
+            let value = flatData[key];
+            // Prevent empty array to be passed to formData as empty string
+            if (Array.isArray(value) && value.length === 0) {
+                value = '[]';
+            }
+            formData.set(key, value);
+        }
+        if (isCollection && documentConfig.upload) {
+            const uploadPath = page.url.searchParams.get(PARAMS.UPLOAD_PATH);
+            formData.set('_path', uploadPath || 'root');
+        }
+        return formData;
+    };
+    const submit = async (action) => {
+        if (processing)
+            return;
+        processing = true;
+        const result = await fetch(action, {
+            method: 'POST',
+            body: await prepareData()
+        }).then(async (r) => deserialize(await r.text()));
+        async function handleSuccess(data) {
+            const redirect = data?.redirectUrl || false;
+            const message = data?.message || t__('common.generic_success');
+            if (redirect) {
+                if (beforeRedirect) {
+                    const shouldRedirect = await beforeRedirect(data);
+                    toast.success(message);
+                    if (!shouldRedirect)
+                        return;
+                }
+                return applyAction({ type: 'redirect', location: redirect, status: 301 });
+            }
+            toast.success(message);
+            // Assign document
+            doc = (data?.document || doc);
+            if (nestedLevel === 0) {
+                await invalidateAll();
+                intialDoc = doc;
+            }
+            else {
+                toast.success(t__('common.doc_created'));
+                apiProxy.invalidateAll();
+                // Do not redirect on creation if it's a nested form
+                // the form will auto close and we are back to the parent
+                // Form so no need to assign the returned doc
+                if (onNestedDocumentCreated)
+                    onNestedDocumentCreated(doc);
+            }
+        }
+        async function handleError(data) {
+            // Handle error
+            if (data?.errors) {
+                errors.value = data.errors;
+                for (const [key, error] of Object.entries(errors.value)) {
+                    toast.error(key + ': ' + error);
+                }
+            }
+            else {
+                toast.error('An error occured');
+            }
+        }
+        switch (result.type) {
+            case 'success':
+                handleSuccess(result.data);
+                break;
+            case 'failure':
+                handleError(result.data);
+                break;
+        }
+        processing = false;
+    };
+    const enhance = (formElement) => {
+        const setStatus = (submitter) => {
+            const status = !!submitter?.dataset.status;
+            if (status && documentConfig.versions && documentConfig.versions.draft) {
+                setValue('status', submitter?.dataset.status);
+            }
+        };
+        const enhanceAction = (submitter) => {
+            let action = formElement.action;
+            const draft = !!submitter?.dataset.draft;
+            if (draft) {
+                action += `&draft=true`;
+            }
+            if (documentConfig.versions) {
+                if (!draft) {
+                    action += `&versionId=${doc.versionId}`;
+                }
+            }
+            return action;
+        };
+        const listener = async (event) => {
+            event.preventDefault();
+            setStatus(event.submitter);
+            submit(enhanceAction(event.submitter));
+        };
+        formElement.addEventListener('submit', listener);
+        return {
+            destroy() {
+                formElement.removeEventListener('submit', listener);
+            }
+        };
+    };
+    const buildPanelActionUrl = () => {
+        // Start with the base URI for the panel
+        let panelUri = `/panel/${config.kebab}`;
+        // Add the item ID to the URI if we're updating a collection doc
+        if (operation === 'update' && initial._prototype === 'collection' && initial.id) {
+            panelUri += `/${initial.id}`;
+        }
+        // Determine the appropriate action based on whether we're creating or updating
+        let actionSuffix;
+        if (operation === 'create') {
+            actionSuffix = '/create?/create';
+        }
+        else {
+            actionSuffix = '?/update';
+        }
+        // Add a redirect parameter if we're in a nested form ex: relation creation
+        // to prevent reidrect after creation
+        const redirectParam = nestedLevel > 0 ? `&${PARAMS.REDIRECT}=false` : '';
+        // Combine all parts to form the final action URL
+        return `${panelUri}${actionSuffix}${redirectParam}`;
+    };
+    const importDataFromDefaultLocale = async () => {
+        const BASE_API_URL = `${apiUrl(documentConfig.kebab)}`;
+        let fetchURL = BASE_API_URL;
+        const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? '&draft=true' : '';
+        if (isCollection) {
+            fetchURL += `?where[id][equals]=${doc.id}&locale=${locale.defaultCode}${draftParam}`;
+        }
+        else {
+            fetchURL += `?locale=${locale.defaultCode}${draftParam}`;
+        }
+        // Fetch data
+        const result = await fetch(fetchURL).then((r) => r.json());
+        // Process data
+        if ((isCollection && Array.isArray(result.docs) && result.docs.length) || result.doc) {
+            const defaultLocaleDoc = isCollection ? result.docs[0] : result.doc;
+            let data = { ...defaultLocaleDoc, locale: locale.code };
+            const configMap = buildConfigMap(defaultLocaleDoc, documentConfig.fields);
+            for (const [key, field] of Object.entries(configMap)) {
+                if (field.localized) {
+                    let value = getValueAtPath(key, data);
+                    value = removeIds(value);
+                    data = setValueAtPath(key, data, value);
+                }
+            }
+            doc = data;
+        }
+    };
+    return {
+        key,
+        setValue,
+        getRawValue,
+        enhance,
+        useField,
+        getValue,
+        useBlocks,
+        useTree,
+        nestedLevel,
+        buildPanelActionUrl,
+        readOnly,
+        importDataFromDefaultLocale,
+        get isDisabled() {
+            return isDisabled;
+        },
+        set isDisabled(bool) {
+            isDisabled = bool;
+        },
+        get element() {
+            const htmlFormElement = element();
+            if (!htmlFormElement)
+                throw new Error('form element is not defined');
+            return htmlFormElement;
+        },
+        get canSubmit() {
+            return canSubmit;
+        },
+        get processing() {
+            return processing;
+        },
+        get values() {
+            return doc;
+        },
+        get changes() {
+            return changes;
+        },
+        get errors() {
+            return errors;
+        },
+        set values(v) {
+            doc = v;
+        },
+        get config() {
+            return config;
+        },
+        get title() {
+            return title;
+        },
+        get isLive() {
+            return isLiveEdit;
+        },
+        setFocusedField(path) {
+            if (isLiveEdit && onFieldFocus) {
+                onFieldFocus(path);
+            }
+        }
+    };
+}
+const FORM_KEY = 'rime.form';
+export function setDocumentFormContext(args) {
+    const store = createDocumentFormState(args);
+    return setContext(`${FORM_KEY}.${args.key}`, store);
+}
+export function getDocumentFormContext(key = 'root') {
+    return getContext(`${FORM_KEY}.${key}`);
+}

package/dist/panel/context/errors.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { FormErrors } from '../types.js';
+export declare function setErrorsContext(key?: string): {
+    readonly length: number;
+    value: FormErrors;
+    readonly first: string;
+    has(key: string): boolean;
+    hasRequired(key: string): boolean;
+    get(key: string): string | false;
+    set(key: string, value: string): void;
+    delete(key: string): void;
+    deleteAllThatStartWith(path: string): void;
+};
+export declare function getErrorsContext(key?: string): {
+    readonly length: number;
+    value: FormErrors;
+    readonly first: string;
+    has(key: string): boolean;
+    hasRequired(key: string): boolean;
+    get(key: string): string | false;
+    set(key: string, value: string): void;
+    delete(key: string): void;
+    deleteAllThatStartWith(path: string): void;
+};