@cocreate/elements 1.46.0 → 1.48.0

package/src/setDataHandler.js

@@ -1,6 +1,7 @@
 import {
     dotNotationToObject,
     queryData,
+    searchData,
     sortData,
     getAttributes,
     checkValue,
@@ -8,21 +9,25 @@ import {
 } from "@cocreate/utils";
 import CRUD from "@cocreate/crud-client";
 import filter from "@cocreate/filter";
-import { elements, forms, keys } from "./mapRegistry.js"
+import { elements, forms, keys } from "./mapRegistry.js";
+import { getDataElements, getDataObject } from "./getDataHandler.js";
 
-export function setDataType(element, data, action) {
+export async function setDataType(element, data, action) {
     // TODO: if an array name is updated, the attibute array="" needs to be updated.
 
     if (!data) return;
 
+    const dataElements = new Set(getDataElements(data));
+
     let form;
     if (element.tagName === "FORM") {
         form = element;
-    } else if (element.parentElement){
+    } else if (element.parentElement) {
         form = element.parentElement.closest("form");
     }
 
     if (!form) {
+        dataElements.add(element);
         if (data.type === "object") {
             if (data.object?.[0]?._id) {
                 element.setAttribute("object", data.object[0]._id);
@@ -32,12 +37,31 @@ export function setDataType(element, data, action) {
         }
     } else {
         let formObject = forms.get(form);
-        if (form.getAttribute("object") === "pending")
-            form.setAttribute("object", data.object[0]._id);
+        const fieldsets = form.querySelectorAll('fieldset[object="pending"]');
+        for (const scope of [...fieldsets, form]) {
+            if (scope.getAttribute("object") === "pending") {
+                const object = data.object?.[0];
+                if (scope.hasAttribute("array")) {
+                    const arrays = scope.getAttribute("array").split(",");
+                    const objectArrays = Array.isArray(object?.$array)
+                        ? object.$array
+                        : [object?.$array];
+                    if (object?._id && arrays.some((array) => {
+                        const name = array.trim();
+                        return name !== "" && objectArrays.includes(name);
+                    })) {
+                        scope.setAttribute("object", object._id);
+                    }
+                } else if (object?._id) {
+                    scope.setAttribute("object", object._id);
+                }
+            }
+        }
 
-        let elements = formObject.types.get(data.type);
+        const typeElements = formObject?.types?.get(data.type);
 
-        for (let [el, elData] of elements.entries()) {
+        for (let [el, elData] of typeElements?.entries() || []) {
+            dataElements.add(el);
             if (data.type === "object") {
                 if (!elData.object || elData.object === "pending") {
                     elData.object = data.object[0]._id;
@@ -48,9 +72,10 @@ export function setDataType(element, data, action) {
                 el.setAttribute(data.type, data[data.type].name);
             }
         }
-        setData(Array.from(elements.keys()), data);
     }
 
+    if (dataElements.size) await setData(Array.from(dataElements), data);
+
     if (action) {
         action.element.dispatchEvent(
             new CustomEvent("saved", {
@@ -107,14 +132,22 @@ export async function setData(element, data) {
         type = data.method.split(".")[0];
     } else if (type == "key") type = "object";
 
-    if (data.$filter && data.$filter.query) {
-        let sortedData = sort$in(data[type], data.$filter.query);
+    if (data.filter && data.filter.query) {
+        let sortedData = sort$in(data[type], data.filter.query);
         if (sortedData && sortedData.length) data[type] = sortedData;
     }
 
     for (let el of element) {
-        // if rendered in server side skip
-        if (el.hasAttribute("rendered")) return el.removeAttribute("rendered");
+        // Keep SSR content for this element without skipping its batch siblings.
+        if (el.hasAttribute("rendered")) {
+            el.removeAttribute("rendered");
+            continue;
+        }
+        if (
+            data.method?.endsWith(".delete") &&
+            !(el.getFilter || el.renderValue)
+        )
+            continue;
         if (el.hasAttribute("render-json")) {
             console.log("render-json", "");
         }
@@ -129,6 +162,14 @@ export async function setData(element, data) {
         }
 
         const { key, isRead, isUpdate, isListen, isCrdt } = getAttributes(el);
+        const hasRenderController =
+            el.hasAttribute("render-query") || el.hasAttribute("render-json");
+
+        // array/object without a key establishes CRUD identity only. Do not
+        // write the response into the element unless it explicitly controls a
+        // render target.
+        if (key === undefined && !hasRenderController) continue;
+
         let elementType = el.getAttribute("type");
         if (elementType !== "file" && (el.getFilter || el.renderValue))
             await filterData(el, data, type, key);
@@ -188,6 +229,24 @@ export async function setData(element, data) {
 }
 
 async function filterData(element, data, type, key) {
+    if (key === "$length" && (data.error || !Array.isArray(data[type]))) return;
+    if (
+        data.method &&
+        !data.method.endsWith(".read") &&
+        (element.getFilter || element.renderValue)
+    ) {
+        // A write payload is a document delta, not the result of this count's
+        // query. Keep the displayed count until its own filtered read completes.
+        // Re-read even for partial updates: a document may have left the query.
+        if (key === "$length" && element.getFilter && element.setFilter) {
+            if (data.error || !data[type]?.length) return;
+            element.setFilter(await element.getFilter());
+            return;
+        }
+        await checkFilters(element, data, type);
+        return;
+    }
+
     let operator = "",
         value;
 
@@ -250,24 +309,18 @@ async function filterData(element, data, type, key) {
         element.renderValue &&
         data.method &&
         data.method.endsWith(".read") &&
-        data.$filter &&
-        (data.$filter.overwrite || !isRendered)
+        data.filter &&
+        (data.filter.overwrite || !isRendered)
     ) {
         await element.renderValue(data);
     } else if (
-        (data.$filter && data.$filter.loadmore) ||
+        (data.filter && data.filter.loadMore) ||
         (data.method && data.method.endsWith(".read") && isRendered)
     ) {
         await loadMore(element, data, type);
-    } else if (
-        element.getFilter &&
-        data.method &&
-        !data.method.endsWith(".read")
-    ) {
-        await checkFilters(element, data, type);
     } else if (element.renderValue) {
         if (key)
-            data = {[key]: data}
+            data = { [key]: data }
         await element.renderValue(data);
     } else if (key === "$length") {
         element.setValue(data[type].length);
@@ -289,68 +342,84 @@ async function filterData(element, data, type, key) {
         value = data[type][0];
     } else if (data) element.setValue(data);
 
-    if (data.$filter) {
+    if (data.filter) {
         let filterElement = filter.filters.get(element);
-        if (filterElement) filterElement.index = data.$filter.index;
+        if (filterElement) filterElement.index = data.filter.index;
     }
 
-    if (!data[type] || !Array.isArray(data[type]) || !data[type].length) return;
-
-    const evt = new CustomEvent("fetchedData", { bubbles: true });
+    const evt = new CustomEvent("fetchedData", {
+        bubbles: true,
+        detail: data
+    });
     element.dispatchEvent(evt);
+
+    if (!data[type] || !Array.isArray(data[type]) || !data[type].length) return;
 }
 
 async function loadMore(element, data, type, sort) {
-    let clonedData = { ...data };
-    let renderedData = await element.getData();
-    if (!renderedData || !renderedData[type]) {
-        return;
-    }
-    for (let i = 0; i < clonedData[type].length; i++) {
-        let index;
-        if (type === "object") {
-            index = renderedData[type].findIndex(
-                (obj) => obj._id === clonedData[type][i]._id
-            );
-        } else {
-            index = renderedData[type].findIndex(
-                (obj) => obj.name === clonedData[type][i].name
-            );
-        }
-
-        if (index >= 0) {
-            clonedData[type].splice(i, 1);
-            i--; // Adjust the index to account for the removed item
-        }
-    }
-    if (clonedData[type].length > 0) {
-        await element.renderValue(clonedData);
+    const renderedData = await element.getData();
+    if (!renderedData || !renderedData[type]) return;
+
+    const key = type === "object" ? "_id" : "name";
+    const renderedKeys = new Set(renderedData[type].map(item => item[key]));
+    const records = data[type].filter(item => {
+        if (renderedKeys.has(item[key])) return false;
+        renderedKeys.add(item[key]);
+        return true;
+    });
+    if (records.length) {
+        await element.renderValue({
+            ...data,
+            [type]: records,
+            filter: { ...data.filter, loadMore: true, overwrite: false }
+        });
     }
 }
 
 async function checkFilters(element, data, type) {
+    if (type && data[type]) {
+        const applyUpdate = (record) => {
+            if (!record?.$update) return record;
+            const { $update, ...fields } = record;
+            return { ...fields, ...$update };
+        };
+        data = {
+            ...data,
+            [type]: Array.isArray(data[type])
+                ? data[type].map(applyUpdate)
+                : applyUpdate(data[type])
+        };
+    }
+
     let localData;
     if (!element.getData) {
-        // TODO: fix: getObject as this is related to render or form, but filter could exist on an input which does not have getObject
+        // TODO: getDataObject is related to render or form, but filter could exist on an input which does not have getData
         // TODO: generate an object of current element key: value to use with filter. because filter is used object is not defined
-        localData = getObject(element);
-        if (Array.isArray(localData[type])) localData = localData[type][0];
+        localData = getDataObject(element);
+        if (localData && Array.isArray(localData[type])) {
+            localData = localData[type][0];
+        }
     } else localData = await element.getData();
 
     if (!localData) return;
 
+    let filter = localData.filter
     let newData;
     if (type) {
         localData = localData[type];
         newData = data[type];
     } else newData = data;
 
-    let filter = await element.getFilter();
-    if (filter && filter.query) {
-        newData = newData.filter(item => queryData(item, filter.query));
+    if (localData == null) {
+        if (element.renderValue) localData = [];
+        else return;
     }
 
-    if (!newData || !newData.length) return;
+    if (
+        newData == null ||
+        (Array.isArray(newData) && newData.length === 0)
+    )
+        return;
 
     if (Array.isArray(localData)) {
         if (Array.isArray(newData)) {
@@ -361,6 +430,9 @@ async function checkFilters(element, data, type) {
             checkIndex(element, data, localData, newData, type, filter);
         }
     } else {
+        if (data.method?.endsWith(".delete")) return;
+
+        let matched = false;
         let primaryKey;
         if (type === "object") {
             primaryKey = "_id";
@@ -370,21 +442,27 @@ async function checkFilters(element, data, type) {
 
         if (Array.isArray(newData)) {
             for (let i = 0; i < newData.length; i++) {
+                if (!newData[i]) continue;
                 if (
                     typeof localData === "string" &&
                     localData === newData[i][primaryKey]
                 ) {
                     localData = newData[i];
-                } else if (localData[primaryKey] === newData[i][primaryKey]) {
+                    matched = true;
+                } else if (localData[primaryKey] && localData[primaryKey] === newData[i][primaryKey]) {
                     localData = dotNotationToObject(newData[i], localData);
+                    matched = true;
                 }
             }
         } else if (typeof localData === "string" && localData === newData[primaryKey]) {
             localData = newData;
-        } else if (localData[primaryKey] === newData[primaryKey]) {
+            matched = true;
+        } else if (localData[primaryKey] && localData[primaryKey] === newData[primaryKey]) {
             localData = dotNotationToObject(newData, localData);
+            matched = true;
         }
 
+        if (!matched) return;
         if (element.renderValue) element.renderValue(data);
         // render({ element, data, key: type });
         else if (data) element.setValue(localData);
@@ -392,50 +470,51 @@ async function checkFilters(element, data, type) {
 }
 
 function checkIndex(element, data, localData, newData, type, filter) {
-    let index;
-    if (type === "object") {
-        index = localData.findIndex((obj) => obj._id === newData._id);
-    } else {
-        index = localData.findIndex((obj) => obj.name === newData.name);
-    }
-
-    if (!data.$filter) data.$filter = {};
-
-    if (data.method.endsWith(".delete")) {
+    if (!newData) return;
+    const primaryKey = type === "object" ? "_id" : "name";
+    const primaryValue = newData[primaryKey];
+    let index = localData.findIndex(
+        (item) => item?.[primaryKey] === primaryValue
+    );
+    const isMatch =
+        (!filter?.query || queryData(newData, filter.query)) &&
+        (!filter?.search || searchData(newData, filter.search));
+
+    if (!data.filter) data.filter = {};
+
+    if (data.method.endsWith(".delete") || !isMatch) {
         if (index === -1) return;
-        data.$filter.remove = true;
+        data.filter.remove = true;
         localData.splice(index, 1);
     } else {
         if (data.method.endsWith(".create")) {
             if (index === -1) {
-                data.$filter.create = true;
-                if (filter && filter.sort) newData.isNewData = true;
-                else index = localData.length;
+                data.filter.create = true;
+                index = localData.length;
                 localData.push(newData);
             }
         } else {
             if (index === -1) return;
-            data.$filter.update = true;
-            data.$filter.currentIndex = index;
+            data.filter.update = true;
+            data.filter.currentIndex = index;
             localData[index] = dotNotationToObject(newData, localData[index]);
-            if (filter && filter.sort) {
-                localData[index].isNewData = true;
-            }
         }
 
         if (filter && filter.sort) {
             localData = sortData(localData, filter.sort);
-            index = localData.findIndex((obj) => obj.isNewData);
+            index = localData.findIndex(
+                (item) => item?.[primaryKey] === primaryValue
+            );
         }
     }
 
     if (index >= 0) {
-        if (data.$filter.currentIndex === index)
-            delete data.$filter.currentIndex;
-        data.$filter.index = index;
+        if (data.filter.currentIndex === index)
+            delete data.filter.currentIndex;
+        data.filter.index = index;
         if (element.renderValue) element.renderValue(data);
         else if (data) element.setValue(localData);
     }
 }
 
-export default { setDataType, setData }
+export default { setDataType, setData }