ATLAS-1897 : UI - Render HTML element based on attribute data-type while assigning Tag to entity.

dashboardv2/public/js/views/tag/addTagModalView.js

@@ -26,6 +26,7 @@ define(['require',
     'utils/UrlLinks',
     'utils/Enums',
     'utils/Messages',
+    'daterangepicker'
 ], function(require, AddTagModalViewTmpl, VTagList, VCommonList, Modal, VEntity, Utils, UrlLinks, Enums, Messages) {
     'use strict';
 
@@ -82,7 +83,12 @@ define(['require',
                     };
                 tagAttributeNames.each(function(i, item) {
                     var selection = $(item).data("key");
-                    tagAttributes[selection] = $(item).val() || null;
+                    var datatypeSelection = $(item).data("type");
+                    if (datatypeSelection === "date") {
+                        tagAttributes[selection] = Date.parse($(item).val()) || null;
+                    } else {
+                        tagAttributes[selection] = $(item).val() || null;
+                    }
                 });
 
                 if (that.multiple) {
@@ -271,16 +277,44 @@ define(['require',
                         _.each(enumValue, function(key, value) {
                             str += '<option ' + (that.tagModel && key.value === that.tagModel.attributes[name] ? 'selected' : '') + '>' + key.value + '</option>';
                         })
-                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
+                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' + ' (' + typeName + ')' +
                             '<select class="form-control attributeInputVal attrName" data-key="' + name + '">' + str + '</select></div>');
                     } else {
-                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
-                            '<input type="text" value="' + (that.tagModel ? (that.tagModel.attributes[name] == null ? '' : that.tagModel.attributes[name]) : '') + '" class="form-control attributeInputVal attrName" data-key="' + name + '" ></input></div>');
+                        var textElement = that.getElement(name, typeName);
+                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' + ' (' + typeName + ')' + textElement);
+                    }
+                });
+                that.$('input[data-type="date"]').each(function() {
+                    if (!$(this).data('daterangepicker')) {
+                        var dateObj = { "singleDatePicker": true, "showDropdowns": true };
+                        if (that.tagModel) {
+                            var formatDate = Number(this.value);
+                            dateObj["startDate"] = new Date(formatDate);
+                        }
+                        $(this).daterangepicker(dateObj);
+                    }
+                });
+                that.$('select[data-type="boolean"]').each(function() {
+                    var labelName = $(this).data('key');
+                    if (that.tagModel) {
+                        this.value = that.tagModel.attributes[labelName];
                     }
                 });
                 this.showAttributeBox();
             }
         },
+        getElement: function(labelName, typeName) {
+            var value = this.tagModel && this.tagModel.attributes ? (this.tagModel.attributes[labelName] || "") : "",
+                type = (typeName === "int" || typeName === "long" || typeName === "float" || typeName === "byte" || typeName === "double" || typeName === "short") ? "number" : "text";
+            if (typeName === "boolean") {
+                return '<select class="form-control attributeInputVal attrName" data-key="' + labelName + '" data-type="' + typeName + '"> ' +
+                    '<option value="">--Select true or false--</option>' +
+                    '<option value="true">true</option>' +
+                    '<option value="false">false</option></select>';
+            } else {
+                return '<input type="' + type + '" value="' + value + '" class="form-control attributeInputVal attrName" data-key="' + labelName + '"  data-type="' + typeName + '"></input></div>';
+            }
+        },
         saveTagData: function(options) {
             var that = this;
             this.entityModel = new VEntity();