From 3d76137247c793d7cb76b2bbf0428a13341c28be Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 4 May 2020 15:37:09 +0100
Subject: [PATCH] [inject] Modify output labels for multi-value inject

---
 .../nodes/core/common/20-inject.html          | 212 +++++++-----------
 .../nodes/locales/en-US/messages.json         |   2 +-
 2 files changed, 87 insertions(+), 127 deletions(-)

diff --git a/packages/node_modules/@node-red/nodes/core/common/20-inject.html b/packages/node_modules/@node-red/nodes/core/common/20-inject.html
index bd90b82e4..0501042c3 100644
--- a/packages/node_modules/@node-red/nodes/core/common/20-inject.html
+++ b/packages/node_modules/@node-red/nodes/core/common/20-inject.html
@@ -19,7 +19,7 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
-    
+
     <div class="form-row node-input-property-container-row">
         <ol id="node-input-property-container"></ol>
     </div>
@@ -148,6 +148,21 @@
 </style>
 
 <script type="text/javascript">
+(function() {
+
+    function resizeDialog(size) {
+        size = size || { height: $(".red-ui-tray-content form").height() }
+        var rows = $("#dialog-form>div:not(.node-input-property-container-row):visible");
+        var height = size.height;
+        for (var i=0; i<rows.length; i++) {
+            height -= $(rows[i]).outerHeight(true);
+        }
+        var editorRow = $("#dialog-form>div.node-input-property-container-row");
+        height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+        height += 16;
+        $("#node-input-property-container").editableList('height',height);
+    }
+
     RED.nodes.registerType('inject',{
         category: 'common',
         color:"#a6bbcf",
@@ -169,69 +184,78 @@
         outputs:1,
         outputLabels: function(index) {
             var lab = '';
-            
+
             // if only payload and topic - display payload type
             // if only one property - show it's type
             // if more than one property (other than payload and topic) - show "x properties" where x is the number of properties.
-
             // this.props will not be an array for legacy inject nodes until they are re-deployed
-            if (Array.isArray(this.props)) {
-                var propertyCount = this.props.length;
-                var payloadProperty = this.props.find(p => p.p === 'payload');
-                var topicProperty = this.props.find(p => p.p === 'topic' && p.vt === 'str');
-                
-                if (payloadProperty && topicProperty) {
-                    lab = payloadProperty.vt;
-                } else if (propertyCount > 1){
-                    lab = propertyCount + " " + this._("inject.label.properties");
-                } else if(propertyCount === 1){
-                    lab = this.props[0].vt;
-                }
-                
-            } else {
-
-                lab = this.payloadType;
-                if (lab === "json") {
-                    try {
-                        lab = typeof JSON.parse(this.payload);
-                        if (lab === "object") {
-                            if (Array.isArray(JSON.parse(this.payload))) { lab = "Array"; }
-                        }
-                    } catch(e) {
-                        return this._("inject.label.invalid");
+            //
+            var props = this.props;
+            if (!Array.isArray(props)) {
+                props = [
+                    { p:"payload", v: this.payload, vt: this.payloadType },
+                    { p:"topic", v: this.topic, vt: "str" }
+                ]
+            }
+            if (props) {
+                for (var i=0,l=props.length; i<l; i++) {
+                    if (i > 0) lab += "\n";
+                    if (i === 5) {
+                        lab += " + "+(props.length-4);
+                        break;
                     }
+                    lab += props[i].p+": ";
+
+                    var propType = props[i].vt;
+                    if (propType === "json") {
+                        try {
+                            var parsedProp = JSON.parse(props[i].v);
+                            propType = typeof parsedProp;
+                            if (propType === "object" && Array.isArray(parsedProp)) {
+                                propType = "Array";
+                            }
+                        } catch(e) {
+                            propType = "invalid";
+                        }
+                    }
+                    lab += this._("inject.label."+propType);
                 }
             }
-            
-            var name = "inject.label."+lab;
-            var label = this._(name);
-            if (name !== label) { lab = label; }
-
             return lab;
         },
-        label: function() {        
+        label: function() {
             if (Array.isArray(this.props)) {
                 // find the payload & topic
-                var payloadProperty = this.props.find(p => p.p === 'payload');
-                var topicProperty = this.props.find(p => p.p === 'topic' && p.vt === 'str');
-                
+                var payloadProperty;
+                var topicProperty;
+                var payload;
+                var payloadType;
+                var topic;
+                for (var i=0,l=this.props.length; i<l; i++) {
+                    if (this.props[i].p === 'payload') {
+                        payloadProperty = this.props[i];
+                    } else if (this.props[i].p === 'topic' && this.props[i].vt === 'str') {
+                        topicProperty = this.props[i];
+                    }
+                }
+
                 // If no payload/topic are found, use the first property instead
-                if(this.props[0]){
+                if (this.props[0]){
                     payloadProperty = payloadProperty === undefined ? this.props[0] : payloadProperty;
                     topicProperty = topicProperty === undefined ? {v: payloadProperty.p} : topicProperty; // if no topic, use the property name of the payload
                 }
 
-                var payload = payloadProperty === undefined ? "" : payloadProperty.v;
-                var payloadType = payloadProperty === undefined ? "str" : payloadProperty.vt;
-                var topic = topicProperty === undefined ? "" : topicProperty.v;                
+                payload = payloadProperty === undefined ? "" : payloadProperty.v;
+                payloadType = payloadProperty === undefined ? "str" : payloadProperty.vt;
+                topic = topicProperty === undefined ? "" : topicProperty.v;
             } else {
                 /* Legacy */
-                var payload = this.payload;
-                var payloadType = this.payloadType;
-                var topic = this.topic;
+                payload = this.payload;
+                payloadType = this.payloadType;
+                topic = this.topic;
             }
-            
-            
+
+
             var suffix = "";
             // if fire once then add small indication
             if (this.once) {
@@ -281,13 +305,6 @@
             } else if (this.payloadType === 'string' || this.payloadType === 'none') {
                 this.payloadType = "str";
             }
-            $("#node-input-payloadType").val(this.payloadType);
-
-            $("#node-input-payload").typedInput({
-                default: 'str',
-                typeField: $("#node-input-payloadType"),
-                types:['flow','global','str','num','bool','json','bin','date','env']
-            });
 
             $("#inject-time-type-select").on("change", function() {
                 $("#node-input-crontab").val('');
@@ -301,10 +318,11 @@
                     $("#node-once").hide();
                     $("#node-input-once").prop('checked', false);
                 }
-                
+
                 // Scroll down
                 var scrollDiv = $("#dialog-form").parent();
                 scrollDiv.scrollTop(scrollDiv.prop('scrollHeight'));
+                resizeDialog();
             });
 
             $("#node-input-once").on("change", function() {
@@ -424,21 +442,9 @@
             $("#inject-time-type-select").val(repeattype);
             $("#inject-time-row-"+repeattype).show();
 
-            $("#node-input-payload").typedInput('type',this.payloadType);
-
-            $("#inject-time-type-select").trigger("change");
-            $("#inject-time-interval-time-start").trigger("change");
-
             /* */
 
-            function resizeItem(item) {
-                var newWidth = item.width();
-
-                item.find('.node-input-prop-property-name').typedInput("width", '155px');
-                item.find('.node-input-prop-property-value').typedInput("width", `${newWidth - 180}px`);
-            }
-
-            $('#node-input-property-container').css('min-height','150px').css('min-width','450px').editableList({
+            $('#node-input-property-container').css('min-height','120px').css('min-width','450px').editableList({
                 addItem: function(container,i,opt) {
                     var prop = opt;
                     if (!prop.hasOwnProperty('p')) {
@@ -451,14 +457,16 @@
                     var row = $('<div/>').appendTo(container);
 
                     var propertyName = $('<input/>',{class:"node-input-prop-property-name",type:"text"})
+                        .css("width","30%")
                         .appendTo(row)
                         .typedInput({types:['msg']});
 
-                    $('<div/>',{style: 'display:inline-block; padding:0px 4px 0px 4px;'})
+                    $('<div/>',{style: 'display:inline-block; padding:0px 6px;'})
                         .text('=')
                         .appendTo(row);
 
                     var propertyValue = $('<input/>',{class:"node-input-prop-property-value",type:"text"})
+                        .css("width","calc(70% - 30px)")
                         .appendTo(row)
                         .typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','bin','date','jsonata','env']});
 
@@ -466,10 +474,7 @@
 
                     propertyValue.typedInput('value',prop.v);
                     propertyValue.typedInput('type',prop.vt);
-
-                    resizeItem(container);
                 },
-                resizeItem: resizeItem,
                 removable: true,
                 sortable: true
             });
@@ -493,44 +498,9 @@
                 var prop = this.props[i];
                 $("#node-input-property-container").editableList('addItem',prop);
             }
-            
-            /* Experimental paste object
-             * This allows you to copy an object to your clipboard from the debug and then paste it back into an inject node
-             */
-            // $("#dialog-form").on('paste', function(e) {
-            //   var pasteData = e.originalEvent.clipboardData.getData('text');
-            //   try{
-            //       var pasteObject = JSON.parse(pasteData);
-            //   } catch(e){ }
-            //
-            //   if(pasteObject){
-            //       for(var p in pasteObject){
-            //           if(p === '_msgid') continue;
-            //           var v = pasteObject[p];
-            //           var vt = 'json';
-            //
-            //           // Remove existing property before adding to avoid duplicates
-            //           $(`#node-input-property-container .node-input-prop-property-name[value=${p}]`).closest('.red-ui-editableList-item-content').parent().remove();
-            //
-            //           if(typeof v === 'string'){
-            //               vt = 'str';
-            //           } else if (typeof v === "boolean") {
-            //               vt = 'bool';
-            //           } else if (!isNaN(v)) {
-            //               vt = 'num';
-            //           } else if(Array.isArray(v) && v.every(e => Number.isInteger(e) && e >= 0 && e <=255)) { // Fuzzy buffer detection
-            //               vt = 'bin';
-            //               v = JSON.stringify(pasteObject[p]);
-            //           } else {
-            //               vt = 'json';
-            //               v = JSON.stringify(pasteObject[p]);
-            //           }
-            //
-            //           var prop = {p, v, vt};
-            //           $("#node-input-property-container").editableList('addItem',prop);
-            //       }
-            //   }
-            // });
+
+            $("#inject-time-type-select").trigger("change");
+            $("#inject-time-interval-time-start").trigger("change");
 
         },
         oneditsave: function() {
@@ -539,7 +509,7 @@
             delete this.payloadType
             delete this.topic
             /* */
-            
+
             var repeat = "";
             var crontab = "";
             var type = $("#inject-time-type-select").val();
@@ -639,11 +609,11 @@
                 var p = {
                     p:prop.find(".node-input-prop-property-name").typedInput('value')
                 };
-
-                p.v = prop.find(".node-input-prop-property-value").typedInput('value');
-                p.vt = prop.find(".node-input-prop-property-value").typedInput('type');
-
-                node.props.push(p);
+                if (p.p) {
+                    p.v = prop.find(".node-input-prop-property-value").typedInput('value');
+                    p.vt = prop.find(".node-input-prop-property-value").typedInput('type');
+                    node.props.push(p);
+                }
             });
         },
         button: {
@@ -681,17 +651,7 @@
                 });
             }
         },
-        oneditresize: function(size) {
-            var rows = $("#dialog-form>div:not(.node-input-property-container-row):visible");
-            var height = size.height;
-            for (var i=0; i<rows.length; i++) {
-                height -= $(rows[i]).outerHeight(true);
-            }
-            var editorRow = $("#dialog-form>div.node-input-property-container-row");
-            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-            height += 16;
-            $("#node-input-property-container").editableList('height',height);
-        }
+        oneditresize: resizeDialog
     });
-
+})();
 </script>
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
index e1cfe23bc..979238ac9 100755
--- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json
@@ -52,7 +52,7 @@
             "string": "string",
             "boolean": "boolean",
             "number": "number",
-            "Array": "Array",
+            "Array": "array",
             "invalid": "Invalid JSON Object"
         },
         "timestamp": "timestamp",