json-object-editor 0.10.633 → 0.10.638

package/server/schemas/question.js

@@ -1,6 +1,59 @@
 var question ={
     title: 'Q | ${name}',
     info:"The question panel is where you can manage the questions used to build a form.",
+    // Curated summary for agents
+    summary:{
+        description:'Reusable question definition used to build forms with various input types.',
+        purpose:'Questions define form field types (text, select, boolean, etc.) and can be organized into forms. Questions can reference datasets for select/multiple types, can be marked as usable for visitor ID or submission date tracking, and are categorized with tags. Questions are used in the Questionnaire and Church apps.',
+        labelField:'name',
+        defaultSort:{ field:'joeUpdated', dir:'desc' },
+        searchableFields:['name','info','title','fieldname','_id'],
+        allowedSorts:['joeUpdated','created','name','question_type'],
+        relationships:{
+            outbound:[
+                { field:'tags', targetSchema:'tag', cardinality:'many' }
+            ],
+            inbound:{ graphRef:'server/relationships.graph.json' }
+        },
+        joeManagedFields:['created','joeUpdated'],
+        fields:[
+            { name:'_id', type:'string', required:true },
+            { name:'itemtype', type:'string', required:true, const:'question' },
+            { name:'name', type:'string', required:true },
+            { name:'info', type:'string' },
+            { name:'title', type:'string' },
+            { name:'fieldname', type:'string' },
+            { name:'question_type', type:'string', enumValues:['oneline','textarea','select','boolean','multiple','content','password','number'] },
+            { name:'question_dataset', type:'string' },
+            { name:'option_template', type:'string' },
+            { name:'value_template', type:'string' },
+            { name:'options', type:'objectList' },
+            { name:'content', type:'code' },
+            { name:'required', type:'boolean' },
+            { name:'canBeId', type:'boolean' },
+            { name:'canBeDate', type:'boolean' },
+            { name:'tags', type:'string', isArray:true, isReference:true, targetSchema:'tag' },
+            { name:'joeUpdated', type:'string', format:'date-time', required:true },
+            { name:'created', type:'string', format:'date-time', required:true }
+        ]
+    },
+    subsets:function(){
+        return [{name:'Required',filter:{required:true},stripeColor:'#ff9999'}
+
+        ].concat(_joe.Filter.Options.getDatasetPropertyValues(
+            'question',
+            'question_type',
+            { group: 'fieldtype', collapsed: false } // optional grouping
+        ));
+    },
+    stripeColor:function(item){
+        if(item.required){
+            return {
+                title:'Required',
+                color:'#ff9999'
+            };
+        }
+    },
     filters:function(item){
         return _joe.Filter.Options.tags({group:true,untagged:true,collapsed:true});
     },
@@ -20,12 +73,12 @@ var question ={
                 return (['multiple','select'].indexOf(item.question_type) == -1);
             }
         },
-        {name:'option_template',width:'33%',
+        {name:'option_template',width:'33%',display:'option template',comment:'template for each option, use ${property} to display the property value.',
             hidden:function(item){
                 return (['multiple','select'].indexOf(item.question_type) == -1);
             }
         },
-        {name:'value_template',width:'33%',
+        {name:'value_template',width:'33%',display:'value template',comment:'defaults to _id',
             hidden:function(item){
                 return (['multiple','select'].indexOf(item.question_type) == -1);
             }

package/server/schemas/submission.js

@@ -2,6 +2,36 @@ var schema ={
     title: 'Submission | ${form_name}',
     info:"A submission is a response to a form. ",
     menuicon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="-19 -19 88 88" transform="rotate(-90)"><path d="M30 3A1 1 0 0 0 29.8 3L8 3 8 47 42 47 42 40.4 40 42 40 45 36.2 45 36 45.1 36 45 10 45 10 5 29 5 29 16 40 16 40 21 42 22.6 42 14.6 30.8 3.4A1 1 0 0 0 30.6 3.2L30.4 3 30.2 3A1 1 0 0 0 30 3zM31 6.4L38.6 14 31 14 31 6.4zM16 21L16 23 34 23 34 21 16 21zM38 22L38 28 31 28 31 35 38 35 38 41 50 31.5 38 22zM40 26.1L46.8 31.5 40 36.9 40 35 40 33 38 33 33 33 33 30 38 30 40 30 40 28 40 26.1zM16 27L16 29 29 29 29 27 16 27zM16 33L16 35 29 35 29 33 16 33z"/></svg>',
+    // Curated summary for agents
+    summary:{
+        description:'Form submission response containing visitor data and form answers.',
+        purpose:'Submissions store responses to forms. Each submission references a form and optionally a visitor (identified by form\'s visitor_id_field). Submission data contains the answers to form questions. Submissions are used in the Questionnaire and Church apps.',
+        labelField:'form_name',
+        defaultSort:{ field:'created', dir:'desc' },
+        searchableFields:['form_name','visitor','submission_date','_id'],
+        allowedSorts:['created','joeUpdated','submission_date','form_name'],
+        relationships:{
+            outbound:[
+                { field:'form', targetSchema:'form', cardinality:'one' },
+                { field:'visitor', targetSchema:'visitor', cardinality:'one' }
+            ],
+            inbound:{ graphRef:'server/relationships.graph.json' }
+        },
+        joeManagedFields:['created','joeUpdated'],
+        fields:[
+            { name:'_id', type:'string', required:true },
+            { name:'itemtype', type:'string', required:true, const:'submission' },
+            { name:'form_name', type:'string' },
+            { name:'form', type:'string', isReference:true, targetSchema:'form' },
+            { name:'visitor', type:'string', isReference:true, targetSchema:'visitor' },
+            { name:'submission_date', type:'string' },
+            { name:'data', type:'object' },
+            { name:'computed', type:'code' },
+            { name:'source', type:'string' },
+            { name:'joeUpdated', type:'string', format:'date-time', required:true },
+            { name:'created', type:'string', format:'date-time', required:true }
+        ]
+    },
     subsets:function(i){
         var subsets = [];
         return subsets;

package/web-components/joe-matrix.css

@@ -0,0 +1,480 @@
+joe-matrix {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fafafa;
+}
+
+.matrix-controls {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
+}
+
+.matrix-controls select,
+.matrix-controls button {
+  margin: 5px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 14px
+}
+
+.matrix-controls button:hover {
+  background: #f0f0f0
+}
+
+.matrix-controls label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: #666
+}
+
+joe-matrix .matrix-canvas {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+joe-matrix .matrix-canvas:active {
+  cursor: grabbing;
+}
+
+joe-matrix .matrix-node {
+  cursor: pointer;
+  user-select: none;
+}
+
+joe-matrix .matrix-node circle {
+  fill: #4a90e2;
+  stroke: #2c5aa0;
+  stroke-width: 2px;
+  transition: all 0.2s ease;
+}
+
+joe-matrix .matrix-node-bg {
+  fill: #4a90e2;
+  stroke: #2c5aa0;
+  stroke-width: 2px;
+  transition: all 0.2s ease;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+joe-matrix .matrix-node:hover .matrix-node-bg {
+  fill: #6ba3f0;
+  stroke-width: 3px;
+}
+
+joe-matrix .matrix-node:hover circle:not(.matrix-node-bg) {
+  fill: #6ba3f0;
+  stroke-width: 3px;
+}
+
+/* ============================================
+   SELECTED NODE STYLES
+   ============================================
+   These styles apply when a node has the "selected" class.
+   The selected class is added via JavaScript when a node is clicked.
+   ============================================ */
+
+/* Background circle for selected nodes - orange color */
+joe-matrix .matrix-node.selected .matrix-node-bg {
+  fill: #ff8804 !important;
+  stroke: #cc6d03 !important;
+  stroke-width: 3px !important;
+}
+
+/* Regular circles (non-background) for selected nodes - orange color */
+joe-matrix .matrix-node.selected circle:not(.matrix-node-bg) {
+  fill: #ff8804 !important;
+  stroke: #cc6d03 !important;
+  stroke-width: 3px !important;
+}
+
+/* SVG icon container - pointer events disabled so clicks pass through */
+joe-matrix .matrix-node-icon {
+  pointer-events: none;
+}
+
+joe-matrix .matrix-node-icon foreignObject {
+  overflow: visible;
+}
+
+/* SVG icon base styles */
+joe-matrix .matrix-node-icon foreignObject svg {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+/* Make SVG icon white when node is selected */
+joe-matrix .matrix-node.selected .matrix-node-icon foreignObject svg path {
+  fill: white;
+  stroke: white;
+}
+
+joe-matrix .matrix-node.selected .matrix-node-icon foreignObject svg circle {
+  fill: white;
+  stroke: white;
+}
+
+joe-matrix .matrix-node.selected .matrix-node-icon foreignObject svg rect {
+  fill: white;
+  stroke: white;
+}
+
+joe-matrix .matrix-node.selected .matrix-node-icon foreignObject svg polygon {
+  fill: white;
+  stroke: white;
+}
+
+joe-matrix .matrix-node.selected .matrix-node-icon foreignObject svg polyline {
+  stroke: white;
+}
+
+joe-matrix .matrix-node text {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 12px;
+  fill: #333;
+  pointer-events: none;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+joe-matrix .matrix-link {
+  stroke: #999;
+  stroke-width: 1.5px;
+  stroke-opacity: 0.6;
+  fill: none;
+  pointer-events: none;
+}
+
+joe-matrix .matrix-link:hover {
+  stroke-opacity: 1;
+  stroke-width: 2px;
+}
+
+joe-matrix .matrix-link.many {
+  stroke-dasharray: 5, 5;
+}
+
+joe-matrix .matrix-link-label {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 10px;
+  fill: #666;
+  pointer-events: none;
+  text-anchor: middle;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+joe-matrix .matrix-link-label tspan {
+  fill: #333;
+  font-weight: 500;
+}
+
+joe-matrix .matrix-zoom-controls {
+  position: absolute;
+  top: 180px;
+  left: 10px;
+  z-index: 100;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+joe-matrix .matrix-zoom-controls button {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+joe-matrix .matrix-zoom-controls button:hover {
+  background: #f0f0f0;
+}
+
+joe-matrix .matrix-legend {
+  position: absolute;
+  top: 180px;
+  left: 80px;
+  z-index: 100;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 12px;
+}
+
+joe-matrix .matrix-legend h4 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+joe-matrix .matrix-legend-item {
+  display: flex;
+  align-items: center;
+  margin: 5px 0;
+  gap: 8px;
+}
+
+joe-matrix .matrix-legend-item .legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid;
+}
+
+joe-matrix .matrix-tooltip {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 1000;
+  display: none;
+}
+
+joe-matrix .matrix-tooltip.visible {
+  display: block;
+}
+
+/* ============================================
+   MATRIX PROPERTIES PANEL
+   ============================================
+   Styles for the properties panel that appears when a node is clicked.
+   This panel displays schema information including relationships, fields, etc.
+   ============================================ */
+
+/* Main properties panel container */
+#matrix-properties-panel {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 400px;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  padding: 20px;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
+  font-size: 14px;
+}
+
+/* Panel header with title and close button */
+#matrix-properties-panel .matrix-props-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+#matrix-properties-panel .matrix-props-title {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#matrix-properties-panel .matrix-props-title-icon {
+  display: inline-flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+#matrix-properties-panel .matrix-props-title-icon svg {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+#matrix-properties-panel .matrix-props-title-text {
+  flex: 1;
+}
+
+#matrix-properties-panel #close-properties {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #999;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  line-height: 1;
+}
+
+#matrix-properties-panel #close-properties:hover {
+  color: #666;
+}
+
+/* Section containers */
+#matrix-properties-panel .matrix-props-section {
+  margin-bottom: 15px;
+}
+
+#matrix-properties-panel .matrix-props-text {
+  color: #666;
+}
+
+/* Code elements */
+#matrix-properties-panel code {
+  background: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+/* Relationships section */
+#matrix-properties-panel .matrix-props-relationships {
+  margin-bottom: 20px;
+  padding: 12px;
+  background: #f0f7ff;
+  border-left: 4px solid #4a90e2;
+  border-radius: 4px;
+}
+
+#matrix-properties-panel .matrix-props-relationships-title {
+  display: block;
+  margin-bottom: 8px;
+  color: #2c5aa0;
+}
+
+#matrix-properties-panel .matrix-props-relationships-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+#matrix-properties-panel .matrix-props-relationship-item {
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+#matrix-properties-panel .matrix-props-relationship-item.many {
+  background: #fff3cd;
+  border-color: #ffc107;
+}
+
+#matrix-properties-panel .matrix-props-relationship-item.one {
+  background: #d4edda;
+  border-color: #28a745;
+}
+
+#matrix-properties-panel .matrix-props-relationship-item.missing {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+#matrix-properties-panel .matrix-props-relationship-field {
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: bold;
+  margin-right: 6px;
+}
+
+#matrix-properties-panel .matrix-props-relationship-arrow {
+  margin: 0 4px;
+}
+
+#matrix-properties-panel .matrix-props-relationship-cardinality {
+  color: #666;
+  font-size: 11px;
+}
+
+#matrix-properties-panel .matrix-props-relationship-warning {
+  color: #d93025;
+  font-size: 11px;
+}
+
+/* No relationships message */
+#matrix-properties-panel .matrix-props-no-relationships {
+  margin-bottom: 15px;
+  padding: 8px;
+  background: #fff3cd;
+  border-left: 4px solid #ffc107;
+  border-radius: 4px;
+  color: #856404;
+}
+
+#matrix-properties-panel .matrix-props-no-relationships-text {
+  font-size: 12px;
+}
+
+/* Fields section */
+#matrix-properties-panel .matrix-props-fields-container {
+  /* max-height: 300px;
+  overflow-y: auto; */
+  margin-top: 8px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+#matrix-properties-panel .matrix-props-field-item {
+  padding: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+#matrix-properties-panel .matrix-props-field-type {
+  color: #666;
+  font-size: 12px;
+}
+
+#matrix-properties-panel .matrix-props-field-comment {
+  color: #999;
+  font-size: 11px;
+  margin-left: 8px;
+}
+
+/* Searchable fields section */
+#matrix-properties-panel .matrix-props-searchable-list {
+  margin-top: 4px;
+}
+
+#matrix-properties-panel .matrix-props-searchable-tag {
+  display: inline-block;
+  background: #e8f5e9;
+  padding: 2px 8px;
+  border-radius: 12px;
+  margin: 2px;
+  font-size: 12px;
+}