@cocreate/elements 1.46.0 → 1.48.0

package/src/crudHandler.js

@@ -8,8 +8,11 @@ import CRUD from "@cocreate/crud-client";
 
 import { elements, keys, debounce } from "./mapRegistry.js";
 import { getDataObject } from "./getDataHandler.js";
-import { setData } from "./setDataHandler.js";
-import { deriveSubscriptionKeys } from "./subscribeHandler.js";
+import { setData, setDataType } from "./setDataHandler.js";
+import {
+    deriveSubscriptionKeys,
+    getSubscription
+} from "./subscribeHandler.js";
 
 /**
  * Reads data for one or more elements based on their dataKey scope.
@@ -26,8 +29,12 @@ export async function read(element, data, dataKey) {
             data = { ...existingData.dataKey.object };
     }
 
-    if (!dataKey || !data.type) return;
-    if (!data.$filter && (!data[data.type] || !data[data.type].length)) return;
+    if (!dataKey || !data?.type) {
+        return;
+    }
+    if (!data.filter && !data[data.type]) {
+        return;
+    }
 
     if (!(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element];
@@ -42,12 +49,10 @@ export async function read(element, data, dataKey) {
         if (
             isRead !== "false" &&
             !el.hasRead &&
-            (!data.$filter || (data.$filter && data.$filter.isFilter !== false))
+            (!data.filter || (data.filter && data.filter.isFilter !== false))
         ) {
             el.hasRead = true;
             delay.elements.set(el, true);
-        } else {
-            // console.log("read skipped", el);
         }
     }
 
@@ -55,26 +60,39 @@ export async function read(element, data, dataKey) {
 
     clearTimeout(delay.timer);
     delay.timer = setTimeout(function () {
-        if (!data.$filter && data.type === "object") {
-            if (!data.object) return;
+        // Detach this batch before sending so reads queued while the request is
+        // in flight cannot mutate (or later delete) the same element map.
+        const els = Array.from(delay.elements?.keys() || []);
+        if (debounce.get(dataKey.string) === delay)
+            debounce.delete(dataKey.string);
+        clearTimeout(delay.timer);
+        delete delay.elements;
+        delete delay.timer;
+
+        if (!els.length) return;
+
+        if (!data.filter && data.type === "object") {
+            if (!data.object) {
+                return;
+            }
             else if (typeof data.object === "string")
                 data.object = { _id: data.object };
             else if (Array.isArray(data.object)) {
                 if (data.object.length)
                     data.object = { _id: data.object[0]._id };
-            } else if (!data.object._id.match(/^[0-9a-fA-F]{24}$/)) return;
+            } else if (!data.object._id.match(/^[0-9a-fA-F]{24}$/)) {
+                return;
+            }
         }
 
         data.method = data.type + ".read";
+        const subscription = getSubscription(data);
+        if (subscription) data.subscription = subscription.string;
 
-        CRUD.send(data).then((responseData) => {
-            debounce.delete(dataKey.string);
-            let els = Array.from(delay.elements.keys());
-            clearTimeout(delay.timer);
-            delete delay.elements;
-            delete delay.timer;
-
-            setData(els, responseData);
+        CRUD.send(data).then(async (responseData) => {
+            if (responseData) {
+                await setData(els, responseData);
+            }
         });
     }, 500);
 }
@@ -111,8 +129,17 @@ export async function save(element, action) {
 
         value = await element.getValue();
         let key = element.getAttribute("key");
-
-        if (typeof data[data.type] === "string")
+        if (data.type === "object" && !data.object) {
+            if (key == "{}") {
+                if (Array.isArray(value)) {
+                    data[data.type] = value.map((v) => ({ ...v }));
+                } else
+                    data[data.type] = value;
+            } else {
+                data[data.type] = { [key]: value };
+            }
+        }
+        else if (typeof data[data.type] === "string")
             if (key == "{}")
                 data[data.type] = { _id: data[data.type], ...value };
             else data[data.type] = { _id: data[data.type], [key]: value };
@@ -183,19 +210,26 @@ export async function save(element, action) {
         }
 
         // Derive and attach subscriptionKeys array (contains specific document key and list key)
+        const subscription = getSubscription(data[i]);
+        if (subscription) data[i].subscription = subscription.string;
         data[i].subscriptionKeys = deriveSubscriptionKeys(data[i]);
 
         data[i] = await CRUD.send(data[i]);
+        const errors = data[i]?.error;
+        if (!data[i] || (Array.isArray(errors) ? errors.length > 0 : !!errors)) {
+            const message = Array.isArray(errors)
+                ? errors.map((error) => error.message || String(error)).join("; ")
+                : errors?.message || String(errors || "Save failed");
+            throw new Error(message);
+        }
 
         responseDataList.push(data[i]);
 
         if (
             data[i] &&
-            (data[i].method.endsWith(".create") ||
-                (data[i].type !== "object" &&
-                    data[i].method.endsWith(".update")))
+            (data[i].method.endsWith(".create") || data[i].method.endsWith(".update"))
         ) {
-            setDataType(element, data[i], action);
+            await setDataType(element, data[i], action);
         } else if (data[i]) {
             if (action) {
                 action.element.dispatchEvent(
@@ -220,8 +254,49 @@ Actions.init([
     {
         name: "save",
         endEvent: "saved",
-        callback: (action) => {
-            if (action.form || action) save(action.form, action);
+        callback: async (action) => {
+            if (action.element.hasAttribute("save-query")) {
+                const targets = queryElements({
+                    element: action.element,
+                    prefix: "save"
+                });
+
+                if (!targets.length) {
+                    action.abort({
+                        code: "save-target-not-found",
+                        message: "The save target could not be found.",
+                        selector: action.element.attributes.getNamedItem("save-query")?.value
+                    });
+                    return;
+                }
+
+                try {
+                    const result = [];
+                    for (const target of targets) {
+                        result.push(await save(target));
+                    }
+                    action.end({ result });
+                } catch (error) {
+                    action.abort({
+                        code: "save-failed",
+                        message: "Unable to save the form.",
+                        cause: error
+                    });
+                    console.error("Save action failed:", error);
+                }
+                return;
+            }
+
+            try {
+                await save(action.form || action.element, action);
+            } catch (error) {
+                action.abort({
+                    code: "save-failed",
+                    message: "Unable to save the form.",
+                    cause: error
+                });
+                console.error("Save action failed:", error);
+            }
         }
     },
     {
@@ -238,34 +313,63 @@ Actions.init([
                 elements = [action.element];
             }
 
+            const groups = new Map();
             for (let i = 0; i < elements.length; i++) {
                 const data = getDataObject(elements[i]);
-                if (!data) return;
+                if (!data) continue;
                 data.method = data.type + ".delete";
 
-                if (elements[i].renderValue) {
-                    let selected = elements[i].querySelectorAll(".selected");
-                    data[data.type] = [];
-                    for (let j = 0; j < selected.length; j++) {
-                        let attribute = selected[j].getAttribute(data.type);
-                        if (attribute) {
-                            attribute = attribute.split(",");
-                            for (let k = 0; k < attribute.length; k++) {
-                                if (data.type === "object")
-                                    data[data.type].push({ _id: attribute[k] });
-                                else {
-                                    data[data.type].push(attribute[k]);
-                                }
-                            }
-                        }
-                    }
-                } else if (
+                if (
                     data.type === "object" &&
                     typeof data[data.type] === "string"
                 )
                     data[data.type] = { _id: data[data.type] };
 
-                // Attach subscriptionKeys before sending delete payload
+                if (data.type !== "object") {
+                    groups.set(Symbol(), data);
+                    continue;
+                }
+
+                const groupKey = JSON.stringify({
+                    storage: data.storage || "",
+                    database: data.database || "",
+                    array: data.array
+                });
+                const objects = Array.isArray(data.object)
+                    ? data.object
+                    : [data.object];
+                let group = groups.get(groupKey);
+
+                if (!group) {
+                    group = {
+                        ...data,
+                        object: [],
+                        objectIds: new Set()
+                    };
+                    groups.set(groupKey, group);
+                }
+
+                for (const object of objects) {
+                    if (!object || !object._id || group.objectIds.has(object._id))
+                        continue;
+                    group.objectIds.add(object._id);
+                    group.object.push({ _id: object._id });
+                }
+            }
+
+            for (const data of groups.values()) {
+                if (data.objectIds) {
+                    delete data.objectIds;
+                    if (!data.object.length) continue;
+                }
+
+                // Subscribe the requester at collection scope. A grouped object
+                // array is a delete payload, not a subscribable document key.
+                const subscriptionData = { ...data };
+                delete subscriptionData.object;
+                const subscription = getSubscription(subscriptionData);
+                if (subscription)
+                    data.subscription = subscription.string;
                 data.subscriptionKeys = deriveSubscriptionKeys(data);
 
                 let response = await CRUD.send(data);
@@ -279,4 +383,4 @@ Actions.init([
     }
 ]);
 
-export default { read, save };
+export default { read, save };

package/src/dndHandler.js

@@ -2,7 +2,8 @@ import { dotNotationToObject } from "@cocreate/utils";
 import CRUD from "@cocreate/crud-client";
 import Observer from "@cocreate/observer";
 import { render, renderValue, renderedNodes } from "@cocreate/render";
-import { elements, keys, debounce } from "./mapRegistry.js"
+import { elements, keys, debounce } from "./mapRegistry.js";
+import { getDataElements, getDataObject } from "./getDataHandler.js";
 
 // TODO: has the potential to work on most of the crud elements specifically if the value is an object or an array
 async function dndCrud(draggedEl, draggedFrom, droppedEl, droppedIn) {
@@ -69,12 +70,12 @@ async function dndCrudData(element, parent, operator) {
 
 function dndNewData(element, data) {
     let dragData = {};
-    if (data.$filter.query) {
-        dndNewDataUpdate(dragData, data.$filter.query);
+    if (data.filter.query) {
+        dndNewDataUpdate(dragData, data.filter.query);
     }
 
     let sortName, sortDirection;
-    let sort = data.$filter.sort;
+    let sort = data.filter.sort;
     if (sort && sort.length) {
         for (let i = sort.length - 1; i >= 0; i--) {
             if (typeof data[sort.key] === "number") {
@@ -89,7 +90,9 @@ function dndNewData(element, data) {
 
     let renderedNode = renderedNodes.get(element);
     if (renderedNode) {
-        keyPath = renderedNode.keyPath;
+        const renderKeys = renderedNode.keys || {};
+        const activeKey = Object.keys(renderKeys).at(-1);
+        keyPath = activeKey ? renderKeys[activeKey].path : undefined;
         clonesMap = renderedNode.template.clones;
         clones = Array.from(clonesMap.values());
         index = clones.indexOf(element);
@@ -141,9 +144,9 @@ Observer.init({
         let renderedNode = renderedNodes.get(mutation.target);
         if (!renderedNode) return;
 
-        if (!mutation.movedFrom) return;
-        let draggedEl = mutation.target;
-        let draggedFrom = mutation.movedFrom.parentElement;
+        if (!mutation.move || mutation.move.isDescendant) return;
+        let draggedEl = mutation.move.movedElement;
+        let draggedFrom = mutation.move.from.parentElement;
         let droppedEl =
             mutation.target.nextElementSibling ||
             mutation.target.previousElementSibling;