@cocreate/elements 1.33.0 → 1.33.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.33.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.33.0...v1.33.1) (2024-01-17)
+
+
+### Bug Fixes
+
+* improved filter handling ([a207811](https://github.com/CoCreate-app/CoCreate-elements/commit/a207811f82d0ce08d0026e64e4fff8dbaa358327))
+* relocated render-json to setData ([55b65cf](https://github.com/CoCreate-app/CoCreate-elements/commit/55b65cfd3173672a8f2d67c8d6baf681e0ff6c72))
+* update to support new query system ([e005926](https://github.com/CoCreate-app/CoCreate-elements/commit/e005926fd2a9da6f50cb8951dff38cdf35e715a4))
+
 # [1.33.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.32.0...v1.33.0) (2024-01-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "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",

package/src/index.js

@@ -81,34 +81,6 @@ async function init(element) {
 }
 
 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
-        for (let attribute of el.attributes) {
-            if (attribute.match(/{{(.*?)}}/)) {
-                let value = renderValue(attribute, undefined, attribute.value)
-                if (value)
-                    attribute.value = value
-            }
-        }
-        if (el.innerHTML.match(/{{(.*?)}}/)) {
-            let value = renderValue(el, undefined, el.innerHTML)
-            if (value)
-                attribute.value = value
-        }
-
-        // if (el.textContent.match(/{{(.*?)}}/)) {
-        //     let value = renderValue(el, undefined, el.textContent)
-        //     if (value)
-        //         attribute.value = value
-        // }
-
-        // let Data = JSON.parse(match[1]);
-        // Data.method = object.read
-        // CRUD.send(Data)
-
-    }
-
     // if (el.closest('.template')) return;
 
     let data = getObject(el);
@@ -135,7 +107,7 @@ async function initElement(el) {
     // if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
     await filter.init()
     if (el.getFilter) {
-        data.$filter = el.getFilter();
+        data.$filter = await el.getFilter();
 
         el.setFilter = (filter) => {
             data.$filter = filter
@@ -286,6 +258,31 @@ async function read(element, data, dataKey) {
     }, 500);
 }
 
+function get$in(query, mergedValues = []) {
+    for (let key of Object.keys(query)) {
+        if (key === '$and' || key === '$or' || key === '$nor') {
+            for (let i = 0; i < query[key].length; i++) {
+                sort$in(query[key][i], mergedValues)
+            }
+        } else if (typeof query[key] === 'object' && !Array.isArray(query[key])) {
+            if (query[key].$in)
+                mergedValues = [...mergedValues, ...query[key].$in];
+        }
+    }
+    return mergedValues
+}
+
+function sort$in(data, query) {
+    let mergedValues = get$in(query);
+
+    if (mergedValues.length) {
+        const sorted = mergedValues
+            .map(name => data.find(career => career.name === name))
+            .filter(career => career !== undefined);
+        return sorted
+    }
+}
+
 async function setData(element, data) {
     if (!element) {
         element = getDataElements(data)
@@ -301,26 +298,43 @@ async function setData(element, data) {
         type = 'object'
 
     if (data.$filter && data.$filter.query) {
-        let mergedValues = [];
-
-        data.$filter.query.forEach(obj => {
-            if (obj.operator === '$in') {
-                mergedValues = [...mergedValues, ...obj.value];
-            }
-        });
-
-        if (mergedValues.length) {
-            const sortedType = mergedValues
-                .map(name => data[type].find(career => career.name === name))
-                .filter(career => career !== undefined);
-            data[type] = sortedType
-        }
+        let sortedData = sort$in(data[type], data.$filter.query)
+        if (sortedData)
+            data[type] = sortedData
     }
 
     for (let el of element) {
         // if rendered in server side skip 
         if (el.hasAttribute('rendered'))
             return el.removeAttribute('rendered');
+        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
+            // for (let attribute of el.attributes) {
+            //     if (attribute.value.match(/{{(.*?)}}/)) {
+            //         let value = await renderValue(attribute, data[type][0], attribute.value)
+            //         if (value)
+            //             attribute.value = value
+            //     }
+            // }
+            // if (el.innerHTML.match(/{{(.*?)}}/)) {
+            //     let value = renderValue(el, data[type], el.innerHTML)
+            //     if (value)
+            //         el.innerHTML = value
+            // }
+
+            // if (el.textContent.match(/{{(.*?)}}/)) {
+            //     let value = renderValue(el, undefined, el.textContent)
+            //     if (value)
+            //         attribute.value = value
+            // }
+
+            // let Data = JSON.parse(match[1]);
+            // Data.method = object.read
+            // CRUD.send(Data)
+            console.log('render-json', '')
+
+        }
 
         if (!data[type])
             continue;
@@ -345,8 +359,17 @@ async function setData(element, data) {
 }
 
 async function filterData(element, data, type, key) {
-    if (key) {
+    let operator = '', value
+
+    if (key && key !== '$length') {
         if (!data || !type) return
+
+        if (key.startsWith('$')) {
+            operator = key.split('.')[0] || ''
+        }
+
+        let property = key.replace(operator + '.', '')
+
         if (Array.isArray(data[type])) {
             let Data = []
             for (let doc of data[type]) {
@@ -356,27 +379,37 @@ async function filterData(element, data, type, key) {
                     if (_id && doc._id !== _id)
                         return
                 }
-                if (doc[key]) {
-                    if (Array.isArray(doc[key]))
-                        Data.push(...doc[key])
+                if (doc[property]) {
+                    if (Array.isArray(doc[property]))
+                        Data.push(...doc[property])
                     else
-                        Data.push(doc[key])
+                        Data.push(doc[property])
                 } else
                     return
             }
             // if (Data.length === 1) {
-            //     data = { [key]: Data[0] }
+            //     data = { [property]: Data[0] }
             // } else
-            data = Data
+            if (!operator)
+                data = Data
+            else if (operator === '$sum') {
+                value = Data.reduce((accumulator, currentValue) => {
+                    return accumulator + currentValue;
+                }, 0);
+            }
         } else {
-            data = { [key]: data[type][key] }
+            data = { [property]: data[type][property] }
         }
     }
 
-    if (element.getFilter && data.method && !data.method.endsWith('.read'))
+    if (operator) {
+        element.setValue(value);
+    } else if (element.getFilter && data.method && !data.method.endsWith('.read'))
         await checkFilters(element, data, type)
     else if (element.renderValue) {
         await element.renderValue(data);
+    } else if (key === '$length') {
+        element.setValue(data[type].length);
     } else if (data)
         element.setValue(data)
 
@@ -388,6 +421,7 @@ async function filterData(element, data, type, key) {
 
     if (!data[type] || !Array.isArray(data[type]) || !data[type].length)
         return
+
     const evt = new CustomEvent('fetchedData', { bubbles: true });
     element.dispatchEvent(evt);
 }
@@ -403,7 +437,7 @@ async function checkFilters(element, data, type) {
     } else
         newData = data
 
-    let filter = element.getFilter()
+    let filter = await element.getFilter()
     if (filter && filter.query) {
         for (let i = 0; i < newData.length; i++) {
             let isMatch = queryData(newData[i], filter.query)
@@ -1068,14 +1102,8 @@ async function dndCrudData(element, parent, operator) {
 
 function dndNewData(element, data) {
     let Data = {}
-    let query = data.$filter.query
-    if (query && query.length) {
-        for (let i = 0; i < query.length; i++) {
-            if (query.operator === "$eq")
-                Data[query.key] = query.value
-            if (query.operator === "$ne")
-                Data[query.key] = query.value
-        }
+    if (data.$filter.query) {
+        dndNewDataUpdate(Data, data.$filter.query)
     }
 
     let sortName, sortDirection
@@ -1105,6 +1133,23 @@ function dndNewData(element, data) {
 
 }
 
+function dndNewDataUpdate(Data, query) {
+    for (let key of Object.keys(query)) {
+        if (key === '$and' || key === '$or' || key === '$nor') {
+            for (let i = 0; i < query[key].length; i++) {
+                dndNewDataUpdate(Data, query[key][i])
+            }
+        } else if (typeof query[key] === 'object' && !Array.isArray(query[key])) {
+            if (query[key].$eq)
+                Data[key] = query[key].$eq
+            if (query[key].$ne)
+                Data[key] = query[key].$ne
+        } else {
+            Data[key] = query[key]
+        }
+    }
+}
+
 function dndCrudSend(data, crudType) {
     if (CRUD) {
         let action = data.type;