@cocreate/elements 1.23.3 → 1.23.5

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.23.5](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.23.4...v1.23.5) (2023-10-14)
+
+
+### Bug Fixes
+
+* added other crud types to attribute queries ([513472c](https://github.com/CoCreate-app/CoCreate-elements/commit/513472c768412e8b7ed5b205a48d16a49349cfaa))
+* attribute mutation not firing when selector applied. temporarily removed selector ([3b5551f](https://github.com/CoCreate-app/CoCreate-elements/commit/3b5551ff0e7c3838b7079e6d14574831ad6a7ba5))
+* bump dependencies ([1aa9443](https://github.com/CoCreate-app/CoCreate-elements/commit/1aa944336afdcd38b4f0915c6146d89d0ea56b1c))
+* data.filter updated to data$filter ([5a64fbf](https://github.com/CoCreate-app/CoCreate-elements/commit/5a64fbfe0d5e580633aa0deed131619c070e0fac))
+* getData ([e74675e](https://github.com/CoCreate-app/CoCreate-elements/commit/e74675ea5ed0f9b800fb18874864c93e8a8a5353))
+* improved setting method conditions ([013753a](https://github.com/CoCreate-app/CoCreate-elements/commit/013753a541eca3f88b4d5350763f52f38bef2932))
+* replaced action with data.method ([bfe513c](https://github.com/CoCreate-app/CoCreate-elements/commit/bfe513c5c498c84d2f11ce7d07ce71095dd232bf))
+* save and delete action ([f32e9b6](https://github.com/CoCreate-app/CoCreate-elements/commit/f32e9b6e661211b8fb0548aaa03ffd28b4bd1edd))
+
+## [1.23.4](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.23.3...v1.23.4) (2023-10-09)
+
+
+### Bug Fixes
+
+* bump dependencies ([6adac76](https://github.com/CoCreate-app/CoCreate-elements/commit/6adac767eb93127a7c27bb80791121a2f748406d))
+
 ## [1.23.3](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.23.2...v1.23.3) (2023-10-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.23.3",
+  "version": "1.23.5",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -58,12 +58,12 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.11.4",
-    "@cocreate/crud-client": "^1.28.2",
-    "@cocreate/element-prototype": "^1.11.3",
-    "@cocreate/filter": "^1.23.1",
-    "@cocreate/observer": "^1.11.3",
-    "@cocreate/render": "^1.28.1",
-    "@cocreate/utils": "^1.25.1"
+    "@cocreate/actions": "^1.11.6",
+    "@cocreate/crud-client": "^1.28.4",
+    "@cocreate/element-prototype": "^1.11.5",
+    "@cocreate/filter": "^1.23.3",
+    "@cocreate/observer": "^1.11.5",
+    "@cocreate/render": "^1.28.3",
+    "@cocreate/utils": "^1.25.3"
   }
 }

package/src/form.js

@@ -48,7 +48,7 @@ function runObjectId(form) {
 * @param form
 */
 function setAttribute(form) {
-    let elements = form.querySelectorAll('[key]');
+    let elements = form.querySelectorAll('[storage], [database], [array], [index], [object], [key]');
 
     for (let attribute of form.attributes) {
         let variable = window.CoCreateConfig.attributes[attribute.name]

package/src/index.js

@@ -27,8 +27,8 @@ import Observer from '@cocreate/observer';
 import Actions from '@cocreate/actions';
 import CRUD from '@cocreate/crud-client';
 import { dotNotationToObject, queryData, sortData, getAttributes, getAttributeNames, checkValue } from '@cocreate/utils';
-import '@cocreate/filter';
-import { render } from '@cocreate/render';
+import filter from '@cocreate/filter';
+import render from '@cocreate/render';
 import '@cocreate/element-prototype';
 import './fetchSrc';
 import { reset } from './form'
@@ -39,7 +39,7 @@ const keys = new Map();
 const forms = new Map(); // form, [elements]
 const debounce = new Map();
 
-function init(element) {
+async function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
     else if (!element) {
@@ -52,7 +52,7 @@ function init(element) {
         if (elements.has(element[i]) || element.tagName === 'FORM')
             continue
 
-        let data = initElement(element[i]);
+        let data = await initElement(element[i]);
         if (data) {
             let dataKey = initDataKey(element[i], data)
             dataObjects.set(dataKey.string, data)
@@ -67,7 +67,7 @@ function init(element) {
     }
 }
 
-function initElement(el) {
+async function initElement(el) {
     if (el.hasAttribute('render-json')) {
         // TODO find the json template in the text or attributes
         // if found add the node as an element, if the element has crud attributes also add as the element
@@ -119,9 +119,12 @@ function initElement(el) {
             });
         }
     }
-
+    // let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
+    // if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
+    await filter.init()
     if (el.getFilter) {
         data.$filter = el.getFilter();
+
         el.setFilter = (filter) => {
             data.$filter = filter
             let dataKey = initDataKey(el, data)
@@ -227,10 +230,13 @@ async function read(element, data, dataKey) {
     delayTimer = setTimeout(function () {
         debounce.delete(dataKey.string)
         // TODO: should server support string and string array for type object, methods create, read, delete
-        if (data.type === 'object') {
+        if (!data.$filter && data.type === 'object') {
             if (typeof data.object === 'string')
                 data.object = { _id: data.object }
 
+            if (Array.isArray(data.object))
+                data.object = { _id: data.object[0]._id }
+
             if (!data.object._id.match(/^[0-9a-fA-F]{24}$/))
                 return
         }
@@ -272,7 +278,7 @@ function setData(element, data) {
 
         const { key, isRead, isListen, isCrdt } = getAttributes(el);
         if (el.getFilter || el.renderValue)
-            filterData(el, data, type, key, action)
+            filterData(el, data, type, key)
         else {
             let value = CRUD.getValueFromObject(data[type][0], key);
             if (key) {
@@ -286,7 +292,7 @@ function setData(element, data) {
     }
 }
 
-function filterData(element, data, type, key, action) {
+function filterData(element, data, type, key) {
     if (key) {
         if (!data.type) return
         if (Array.isArray(data[type])) {
@@ -305,8 +311,8 @@ function filterData(element, data, type, key, action) {
         }
     }
 
-    if (element.getFilter && action && !action.startsWith('read'))
-        checkFilters(element, data, type, action)
+    if (element.getFilter && data.method && !data.method.startsWith('read'))
+        checkFilters(element, data, type)
     else if (element.renderValue)
         element.renderValue(data);
     // render({ element, data, key: type });
@@ -317,7 +323,7 @@ function filterData(element, data, type, key, action) {
     element.dispatchEvent(evt);
 }
 
-function checkFilters(element, data, type, action) {
+function checkFilters(element, data, type) {
     let Data = element.getData()
     if (!Data) return
 
@@ -329,25 +335,31 @@ function checkFilters(element, data, type, action) {
         newData = data
 
     let filter = element.getFilter()
-    if (filter && filter.query)
-        newData = queryData(newData, filter.query)
-    if (!newData.length)
+    if (filter && filter.query) {
+        for (let i = 0; i < newData.length; i++) {
+            let isMatch = queryData(newData[i], filter.query)
+            if (!isMatch)
+                newData.slice(i, 1)
+        }
+    }
+
+    if (!newData || !newData.length)
         return
 
     if (Array.isArray(Data)) {
         if (Array.isArray(newData)) {
             for (let i = 0; i < newData.length; i++) {
-                checkIndex(element, data, Data, newData[i], type, filter, action)
+                checkIndex(element, data, Data, newData[i], type, filter)
             }
         } else {
-            checkIndex(element, data, Data, newData, type, filter, action)
+            checkIndex(element, data, Data, newData, type, filter)
         }
     } else {
         let primaryKey
         if (type === 'object') {
             primaryKey = '_id';
         } else {
-            primaryKey = 'key';
+            primaryKey = 'name';
         }
 
         if (Data[primaryKey] === newData[primaryKey]) {
@@ -361,7 +373,7 @@ function checkFilters(element, data, type, action) {
     }
 }
 
-function checkIndex(element, data, Data, newData, type, filter, action) {
+function checkIndex(element, data, Data, newData, type, filter) {
     let index
     if (type === 'object') {
         index = Data.findIndex(obj => obj._id === newData._id);
@@ -372,7 +384,7 @@ function checkIndex(element, data, Data, newData, type, filter, action) {
     if (!data.$filter)
         data.$filter = {}
 
-    if (action.startsWith('delete')) {
+    if (data.method.startsWith('delete')) {
         if (!index && index !== 0)
             return
         data.$filter.remove = true
@@ -387,7 +399,7 @@ function checkIndex(element, data, Data, newData, type, filter, action) {
         }
 
         if (filter && filter.sort) {
-            newData.isNewData = true
+            Data[index].isNewData = true
             Data = sortData(Data, filter.sort)
             index = Data.findIndex(obj => obj.isNewData);
         }
@@ -408,7 +420,7 @@ function checkIndex(element, data, Data, newData, type, filter, action) {
 
 function getDataKey(data) {
     let dataKey = {};
-    let attributes = ["host", "organization_id", "apikey", "method", "type", "storage", "database", "array", "index", "object", "key", "updateKey", "filter", "upsert", "namespace", "room", "broadcast", "broadcastSender", "broadcastBrowser"];
+    let attributes = ["host", "organization_id", "apikey", "method", "type", "storage", "database", "array", "index", "object", "key", "updateKey", "$filter", "upsert", "namespace", "room", "broadcast", "broadcastSender", "broadcastBrowser"];
 
     for (let attribute of attributes) {
         if (attribute === 'key' && data.type === 'object')
@@ -444,7 +456,7 @@ function getDataElements(data) {
 
 function getDataKeys(data) {
     const matchingKeyStrings = [];
-    const targetKeys = ["type", "storage", "database", "array", "index", "object", 'filter'];
+    const targetKeys = ["type", "storage", "database", "array", "index", "object", '$filter'];
 
     for (const [keyString, sortedKey] of keys.entries()) {
         let hasMatch = true;
@@ -488,10 +500,17 @@ function getData(form) {
     let formObject = forms.get(form)
     for (let type of formObject.types.values()) {
         for (let [element, data] of type.entries()) {
+            if (!element.hasAttribute('key'))
+                continue
+            if (element.hasAttribute('actions')) {
+                let attribute = element.getAttribute('actions')
+                if (attribute.includes('save', 'delete'))
+                    continue
+            }
             let Data = { ...data }
             let dataKey = elements.get(element)
             let value = element.getValue()
-            console.log(type, value, data)
+            // console.log(type, value, data)
 
             if (!Data[Data.type] && Data.key) {
                 Data.method = 'create.' + Data.type
@@ -507,19 +526,29 @@ function getData(form) {
 
             } else if (Data[Data.type] && Data.key) {
                 let attributes = element.attributes
-                if (!Data.key.startsWith('$')) {
+                if (Data.key.startsWith('$')) {
                     for (let i = 0; i < attributes.length; i++) {
                         let operators = ['$rename', '$inc', '$push', '$each', '$splice', '$unset', '$delete', '$slice', '$pop', '$shift', '$addToSet', '$pull']
-                        if (!operators.includes(attributes[i].name)) {
+                        if (operators.includes(attributes[i].name)) {
                             Data.key = attributes[i].name + '.' + Data.key
                             break;
                         }
                     }
                 }
 
-                if (Data.type = 'object')
-                    Data.object[Data.key] = value
-                else {
+
+                if (Data.type = 'object') {
+                    if (typeof Data[Data.type] === 'string')
+                        if (Data.key == '{}')
+                            Data[Data.type] = { _id: Data[Data.type], ...value }
+                        else
+                            Data[Data.type] = { _id: Data[Data.type], [Data.key]: value }
+                    else if (typeof Data[Data.type] === 'object')
+                        if (Data.key == '{}')
+                            Data[Data.type] = { ...Data[Data.type], ...value }
+                        else
+                            Data[Data.type][Data.key] = value
+                } else {
                     Data[Data.type] = { [Data[Data.type]]: value }
                 }
 
@@ -556,22 +585,27 @@ function getData(form) {
 
             //dataKey should be used to group
             let key = dataKey + Data.method
-            if (dataKeys.has(key))
-                dataKeys.get(key).push(Data)
-            else
-                dataKeys.set(key, [Data])
-
+            if (dataKeys.has(key)) {
+                let storedData = dataKeys.get(key)[Data.type]
+                dataKeys.get(key)[Data.type] = { ...storedData, ...Data[Data.type] }
+            } else {
+                dataKeys.set(key, Data)
+            }
         }
     }
 
     // TODO: group by methods so we can make one crud request per method
-    let dataArray = []
+    let dataArray = Array.from(dataKeys.values())
+
     return dataArray
 }
 
 async function save(element) {
     if (!element) return;
     let data, value
+    let upsert = element.getAttribute('upsert')
+    if (upsert !== undefined || upsert !== null)
+        upsert = true
     if (element.tagName === "FORM") {
         data = element.getData()
     } else {
@@ -623,11 +657,37 @@ async function save(element) {
     }
 
     for (let i = 0; i < data.length; i++) {
-        data[i].method = 'update.' + data[i].type
+        if (data[i].type === 'object' && !data[i]) {
+            if (typeof data[i].object === 'string') {
+                if (!data[i]._id)
+                    data[i].method = 'create.object'
+                else {
+                    data[i].method = 'update.object'
+                    if (upsert)
+                        data[i].upsert = true
+                }
+            } else if (Array.isArray(data[i].object)) {
+                if (!data[i].object[0]._id)
+                    data[i].method = 'create.object'
+                else {
+                    data[i].method = 'update.object'
+                    if (upsert)
+                        data[i].upsert = true
+                }
+            } else if (typeof data[i].object === 'object') {
+                if (!data[i].object._id)
+                    data[i].method = 'create.object'
+                else {
+                    data[i].method = 'update.object'
+                    if (upsert)
+                        data[i].upsert = true
+                }
+            }
+        }
 
-        if (data[i].method && data[i].method.startsWith('create'))
+        if (data[i].method && data[i].method.startsWith('create')) {
             element.setAttribute(data[i].type, 'pending');
-        else if (data[i].method && data[i].method.startsWith('update') && data[i].type == 'object' && typeof value == 'string' && window.CoCreate.crdt && !'crdt') {
+        } else if (data[i].method && data[i].method.startsWith('update') && data[i].type == 'object' && typeof value == 'string' && window.CoCreate.crdt && !'crdt') {
             return window.CoCreate.crdt.replaceText({
                 array: data[i].array,
                 key: data[i].key,
@@ -640,7 +700,10 @@ async function save(element) {
 
         if (data[i] && (data[i].method.startsWith('create') || data[i].type !== 'object' && data[i].method.startsWith('update'))) {
             setTypeValue(element, data[i])
-        }
+        } else if (data[i])
+            document.dispatchEvent(new CustomEvent('saved', {
+                detail: data[i]
+            }));
 
     }
 
@@ -731,19 +794,46 @@ function setTypeValue(element, data) {
         //         }
         //     }
     }
+
+    document.dispatchEvent(new CustomEvent('saved', {
+        detail: data
+    }));
+
 }
 
 async function remove(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
     for (let i = 0; i < element.length; i++) {
-        let key = elements.get(element[i])
-        if (key) {
-            let els = keys.get(key).elements
-            els.delete(element[i])
-            elements.delete(key)
-            debounce.delete(element[i])
-            // TODO: delete element from forms map
+        if (element[i].tagName === 'FORM') {
+            let form = forms.get(element[i]).elements
+            for (let el of form.keys()) {
+                let key = elements.get(el)
+                if (key) {
+                    keys.get(key).elements.delete(el)
+                    elements.delete(el)
+                    // debounce.delete(key)
+                }
+            }
+            let key = elements.get(element[i])
+            if (key) {
+                keys.get(key).elements.delete(element[i])
+            }
+            elements.delete(element[i])
+            forms.delete(element[i])
+        } else {
+
+            let key = elements.get(element[i])
+            if (key) {
+                keys.get(key).elements.delete(element[i])
+                elements.delete(element[i])
+                // debounce.delete(key)
+                let form = element[i].closest('form')
+                form = forms.get(form)
+                if (form) {
+                    form.elements.delete(element[i])
+                }
+            }
         }
     }
 }
@@ -768,7 +858,11 @@ Observer.init({
     observe: ['addedNodes'],
     target: '[render-clone]',
     callback: function (mutation) {
-        let renderedNode = CoCreate.render.renderedNodes.get(mutation.target)
+        let delayTimer = debounce.get(mutation)
+        clearTimeout(delayTimer);
+        debounce.delete(mutation.target)
+
+        let renderedNode = render.renderedNodes.get(mutation.target)
         if (!renderedNode) return
 
         if (!mutation.movedFrom) return
@@ -911,7 +1005,15 @@ Observer.init({
     observe: ['removedNodes'],
     target: selector,
     callback: function (mutation) {
-        if (mutation.target.parentElement) return
+        // if (mutation.target.parentElement) return
+        // if (mutation.target.parentElement) {
+        //     let delayTimer = setTimeout(function () {
+        //         debounce.delete(mutation.target)
+        //         remove(mutation.target)
+        //     }, 3000);
+        //     debounce.set(mutation.target, delayTimer)
+        // } else
+        if (mutation.target.hasAttribute('render-clone')) return
         remove(mutation.target)
     }
 });
@@ -919,8 +1021,8 @@ Observer.init({
 Observer.init({
     name: 'CoCreateElementsAttributes',
     observe: ['attributes'],
-    attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'key']),
-    target: selector,
+    attributeName: ['storage', 'database', 'array', 'index', 'object', 'key'],
+    // target: selector, // blocks mutations when applied
     callback: function (mutation) {
         remove(mutation.target)
         init([mutation.target]);
@@ -936,6 +1038,24 @@ Actions.init({
     }
 });
 
+Actions.init({
+    name: "delete",
+    endEvent: "deleted",
+    callback: async (action) => {
+        const data = getObject(action.element);
+        if (data) {
+            data.method = 'delete.' + data.type
+            if (data.type === 'object' && typeof data[data.type] === 'string')
+                data[data.type] = { _id: data[data.type] }
+
+            let response = await CRUD.send(data)
+            document.dispatchEvent(new CustomEvent('deleted', {
+                detail: response
+            }));
+        }
+    }
+});
+
 init();
 
 export default { init, read, save, getData, reset, elements, keys, forms, debounce, getAttributes };