json-object-editor 0.10.439 → 0.10.440

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## CHANGELOG
 
 ### 0.10.400
+	440 - added joe-chip, tags rendering logic
 	439 - Enhanced route handling in Sites.js to support paths with and without leading slashes.
 	438 - enhance get function with itemtype parameter, and improve notifier functionality
 	437 - tagsList optimized using cache

package/css/joe-styles.css

@@ -3497,7 +3497,23 @@ th.joe-objectlist-object-row-template-header {
         color:#202020;
         margin:3px;
     }
+/*-------------------------
+    T2: Chips
+-------------------------*/
 
+    joe-chips{
+        display:block;
+        position:relative;
+        font-size:12px;
+        /* padding:3px; */
+    }
+    joe-chip{
+        display: inline-block;
+        padding:2px 4px;
+        background: #eee;
+        color:#202020;
+        margin:3px;
+    }
 /*-------------------------
     V: Preview
 -------------------------*/

package/css/joe.css

@@ -3983,7 +3983,23 @@ th.joe-objectlist-object-row-template-header {
         color:#202020;
         margin:3px;
     }
+/*-------------------------
+    T2: Chips
+-------------------------*/
 
+    joe-chips{
+        display:block;
+        position:relative;
+        font-size:12px;
+        /* padding:3px; */
+    }
+    joe-chip{
+        display: inline-block;
+        padding:2px 4px;
+        background: #eee;
+        color:#202020;
+        margin:3px;
+    }
 /*-------------------------
     V: Preview
 -------------------------*/

package/js/JsonObjectEditor.jquery.craydent.js

@@ -304,10 +304,43 @@ function JsonObjectEditor(specs){
     }
     this.Data = {};
     this.Render = {
-        schema_icon:function(schema,classes){
-            var icon = (self.schemas[schema] && self.schemas[schema].menuicon)||'';
-            icon && (icon = `<joe-icon class="${classes ||''}">${icon}</joe-icon>`);
+        schema_icon: function (schema, classes) {
+            var icon = (self.schemas[schema] && self.schemas[schema].menuicon) || '';
+            icon && (icon = `<joe-icon class="${classes || ''}">${icon}</joe-icon>`);
             return icon;
+        },
+        ref_chip: function (things, specs) {
+            specs = typeof specs === 'string' ? { cssclass: specs } : (specs || {});
+            const items = Array.isArray(things) ? things : things?.tags || [];
+            if (!items.length) return '';
+
+            const labelProp = specs.labelProp || 'name';
+            const tooltipProp = specs.tooltipProp === false ? null : (specs.tooltipProp || 'info');
+
+            let html = `<joe-chips class="${specs.cssclass || ''}">`;
+
+            items.forEach(ref => {
+                const obj = typeof ref === 'object' ? ref : $J.get(ref);
+                if (!obj) return;
+
+                const label = obj[labelProp] || '';
+                const title = tooltipProp && obj[tooltipProp] ? ` title="${obj[tooltipProp]}"` : '';
+
+                let style = '';
+                if (specs.useStatusColor && obj.status) {
+                    const statusObj = _joe.Cache.get(obj.status);
+                    if (statusObj?.color) {
+                        style = ` style="border-left:4px solid ${statusObj.color}"`;
+                    }
+                } else if (obj.color) {
+                    style = ` style="background:${obj.color}"`;
+                }
+
+                html += `<joe-chip data-id="${obj._id}"${title}${style}>${label}</joe-chip>`;
+            });
+
+            html += '</joe-chips>';
+            return html;
         }
     };
     //TODO: make current.clear a function
@@ -9901,7 +9934,8 @@ logit(intent)
                         +'</joe-user-cube>';
 
                         return html;
-                }
+                },
+
             }
         },
         handleUpdate:function(payload){
@@ -10258,6 +10292,18 @@ logit(intent)
                     self.SERVER.loadAdditionalItems(__jsu.items);
                     return
                 }
+                //run schema onload again just in case?
+                for (let name in self.schemas) {
+                const schema = self.schemas[name];
+                if (schema.onload && self.Data[name]) {
+                    try {
+                        console.log(`Rerunning onload for schema: ${name}`);
+                        schema.onload(self.Data[name]);
+                    } catch (e) {
+                        self.Error.add('schema onload re-run error: ' + name, e);
+                    }
+                }
+            }
                 for(var sc in self.Data){
                     capp && capp.Button.update(sc+'SchemaBtn',{counter:self.Data[sc].length});
                 }

package/js/joe-full.js

@@ -11609,10 +11609,43 @@ function JsonObjectEditor(specs){
     }
     this.Data = {};
     this.Render = {
-        schema_icon:function(schema,classes){
-            var icon = (self.schemas[schema] && self.schemas[schema].menuicon)||'';
-            icon && (icon = `<joe-icon class="${classes ||''}">${icon}</joe-icon>`);
+        schema_icon: function (schema, classes) {
+            var icon = (self.schemas[schema] && self.schemas[schema].menuicon) || '';
+            icon && (icon = `<joe-icon class="${classes || ''}">${icon}</joe-icon>`);
             return icon;
+        },
+        ref_chip: function (things, specs) {
+            specs = typeof specs === 'string' ? { cssclass: specs } : (specs || {});
+            const items = Array.isArray(things) ? things : things?.tags || [];
+            if (!items.length) return '';
+
+            const labelProp = specs.labelProp || 'name';
+            const tooltipProp = specs.tooltipProp === false ? null : (specs.tooltipProp || 'info');
+
+            let html = `<joe-chips class="${specs.cssclass || ''}">`;
+
+            items.forEach(ref => {
+                const obj = typeof ref === 'object' ? ref : $J.get(ref);
+                if (!obj) return;
+
+                const label = obj[labelProp] || '';
+                const title = tooltipProp && obj[tooltipProp] ? ` title="${obj[tooltipProp]}"` : '';
+
+                let style = '';
+                if (specs.useStatusColor && obj.status) {
+                    const statusObj = _joe.Cache.get(obj.status);
+                    if (statusObj?.color) {
+                        style = ` style="border-left:4px solid ${statusObj.color}"`;
+                    }
+                } else if (obj.color) {
+                    style = ` style="background:${obj.color}"`;
+                }
+
+                html += `<joe-chip data-id="${obj._id}"${title}${style}>${label}</joe-chip>`;
+            });
+
+            html += '</joe-chips>';
+            return html;
         }
     };
     //TODO: make current.clear a function
@@ -21206,7 +21239,8 @@ logit(intent)
                         +'</joe-user-cube>';
 
                         return html;
-                }
+                },
+
             }
         },
         handleUpdate:function(payload){
@@ -21563,6 +21597,18 @@ logit(intent)
                     self.SERVER.loadAdditionalItems(__jsu.items);
                     return
                 }
+                //run schema onload again just in case?
+                for (let name in self.schemas) {
+                const schema = self.schemas[name];
+                if (schema.onload && self.Data[name]) {
+                    try {
+                        console.log(`Rerunning onload for schema: ${name}`);
+                        schema.onload(self.Data[name]);
+                    } catch (e) {
+                        self.Error.add('schema onload re-run error: ' + name, e);
+                    }
+                }
+            }
                 for(var sc in self.Data){
                     capp && capp.Button.update(sc+'SchemaBtn',{counter:self.Data[sc].length});
                 }

package/js/joe.js

@@ -310,10 +310,43 @@ function JsonObjectEditor(specs){
     }
     this.Data = {};
     this.Render = {
-        schema_icon:function(schema,classes){
-            var icon = (self.schemas[schema] && self.schemas[schema].menuicon)||'';
-            icon && (icon = `<joe-icon class="${classes ||''}">${icon}</joe-icon>`);
+        schema_icon: function (schema, classes) {
+            var icon = (self.schemas[schema] && self.schemas[schema].menuicon) || '';
+            icon && (icon = `<joe-icon class="${classes || ''}">${icon}</joe-icon>`);
             return icon;
+        },
+        ref_chip: function (things, specs) {
+            specs = typeof specs === 'string' ? { cssclass: specs } : (specs || {});
+            const items = Array.isArray(things) ? things : things?.tags || [];
+            if (!items.length) return '';
+
+            const labelProp = specs.labelProp || 'name';
+            const tooltipProp = specs.tooltipProp === false ? null : (specs.tooltipProp || 'info');
+
+            let html = `<joe-chips class="${specs.cssclass || ''}">`;
+
+            items.forEach(ref => {
+                const obj = typeof ref === 'object' ? ref : $J.get(ref);
+                if (!obj) return;
+
+                const label = obj[labelProp] || '';
+                const title = tooltipProp && obj[tooltipProp] ? ` title="${obj[tooltipProp]}"` : '';
+
+                let style = '';
+                if (specs.useStatusColor && obj.status) {
+                    const statusObj = _joe.Cache.get(obj.status);
+                    if (statusObj?.color) {
+                        style = ` style="border-left:4px solid ${statusObj.color}"`;
+                    }
+                } else if (obj.color) {
+                    style = ` style="background:${obj.color}"`;
+                }
+
+                html += `<joe-chip data-id="${obj._id}"${title}${style}>${label}</joe-chip>`;
+            });
+
+            html += '</joe-chips>';
+            return html;
         }
     };
     //TODO: make current.clear a function
@@ -9907,7 +9940,8 @@ logit(intent)
                         +'</joe-user-cube>';
 
                         return html;
-                }
+                },
+
             }
         },
         handleUpdate:function(payload){
@@ -10264,6 +10298,18 @@ logit(intent)
                     self.SERVER.loadAdditionalItems(__jsu.items);
                     return
                 }
+                //run schema onload again just in case?
+                for (let name in self.schemas) {
+                const schema = self.schemas[name];
+                if (schema.onload && self.Data[name]) {
+                    try {
+                        console.log(`Rerunning onload for schema: ${name}`);
+                        schema.onload(self.Data[name]);
+                    } catch (e) {
+                        self.Error.add('schema onload re-run error: ' + name, e);
+                    }
+                }
+            }
                 for(var sc in self.Data){
                     capp && capp.Button.update(sc+'SchemaBtn',{counter:self.Data[sc].length});
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-object-editor",
-  "version": "0.10.439",
+  "version": "0.10.440",
   "description": "JOE the Json Object Editor | Platform Edition",
   "main": "app.js",
   "scripts": {

package/server/schemas/goal.js

@@ -42,20 +42,34 @@ var schema = {
         `
         return html; 
     },
+
     fields:[
         {extend:'name',specs:{width:'75%'}},
         {name:'code',width:'25%'},
         'info',
         'description',
+        {name:'completion_equation',display:'completion equation',type:'code',language:'javascript',comment:'This is a javascript function that takes an item as an argument and returns a number between 0 and 1 representing the completion percentage of the goal. It can use any properties of the item or datasets in joe'},
+        {name:'complettion_percentage', reloadable:true, display:'completion percentage',type:'content',run:function(item){
+            const fn = tryEval(item.completion_equation);
+            const result = fn(item); // or any item
+            return Math.round(result*100) + '%'; // Assuming the function returns a number between 0 and 1
+            return 80 + '%'; // Placeholder, should be calculated based on completion_equation
+        }},
         'impact',
         'group',
-
-        {name:'milestones',type:'objectList',properties:[
+        // {name:'has_milestones',display:'has milestones',type:'boolean',comment:'If true, this goal has milestones that can be tracked.',rerender:['milestones','timeline']},
+        {name:'milestones',
+            /*condition:function(item){return !!!item.has_milestones;},*/
+            type:'objectList',properties:[
             {name:'name'},
             {name:'status',type:'select',values:['','roadmap','in-progress','completed'],width:'120px'}
         ]},
 
-        {section_start:'timeline'},
+        {section_start:'timeline',
+        //     condition:function(item){
+        //     return !!!item.has_milestones;
+        // }
+    },
             {name:'start_dt',display:'kickoff',type:'date', native:true,width:'50%'},
             {name:'end_dt',display:'completion',type:'date', native:true,width:'50%'},
             {name:'phases',type:'objectList',

package/server/schemas/tag.js

@@ -92,7 +92,7 @@ var tag ={
             tags.map(function(tag){
                 let tagObj = _joe.Cache.get(tag);//$J.get(tag);
                 if(tagObj){
-                    html+= `<joe-tag data-id="${tagObj._id}" title="${tagObj.info}" style="${tagObj.color && (`background:'${tagObj.color}'`)}">${tagObj.name}</joe-tag>`;
+                    html+= `<joe-tag data-id="${tagObj._id}" title="${tagObj.info}" style="${tagObj.color && (`background:'${tagObj.color}'`)||''}">${tagObj.name}</joe-tag>`;
                 }
             })
             html+= '</joe-tags>';