ATLAS-1718: UI update to support enum-type attributes for tags

dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html

@@ -14,7 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="row row-margin-bottom">
+<div class="fontLoader" style="margin-top:-10px">
+    <i class="fa fa-refresh fa-spin-custom"></i>
+</div>
+<div class="row row-margin-bottom hide">
     <div class="col-sm-12">
         <div class="clearfix">
             <button type="button" class="btn btn-success btn-sm pull-right" data-id="attributeData"><i class="fa fa-plus"></i> Add New Attribute</button>

dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html

@@ -14,7 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<form name="tagDefinitionform" class="css-form" data-id="createTagForm">
+<div class="fontLoader" style="margin-top:-10px">
+    <i class="fa fa-refresh fa-spin-custom"></i>
+</div>
+<form name="tagDefinitionform" class="css-form hide" data-id="createTagForm">
     <div class="form-group">
         {{#if create}}
         <input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus>

dashboardv2/public/js/views/tag/AddTagAttributeView.js

@@ -20,8 +20,10 @@ define(['require',
     'backbone',
     'hbs!tmpl/tag/AddTagAttributeView_tmpl',
     'views/tag/TagAttributeItemView',
+    'utils/UrlLinks',
+    'collection/VTagList'
 
-], function(require, Backbone, AddTagAttributeView_tmpl, TagAttributeItemView) {
+], function(require, Backbone, AddTagAttributeView_tmpl, TagAttributeItemView, UrlLinks, VTagList) {
     'use strict';
 
     return Backbone.Marionette.CompositeView.extend(
@@ -61,13 +63,25 @@ define(['require',
             initialize: function(options) {
                 // this.parentView = options.parentView;
                 this.collection = new Backbone.Collection();
-                this.collectionAttribute();
+                this.typeEnum = new VTagList();
+                this.typeEnum.url = UrlLinks.typedefsUrl().defs;
+                this.typeEnum.modelAttrName = "enumDefs";
             },
             onRender: function() {
+                var that = this;
+                this.$('.fontLoader').show();
                 this.ui.addAttributeDiv.find('.closeInput').hide();
                 if (!('placeholder' in HTMLInputElement.prototype)) {
                     this.ui.addAttributeDiv.find('input,textarea').placeholder();
                 }
+                that.typeEnum.fetch({
+                    reset: true,
+                    complete: function(model, response) {
+                        that.collectionAttribute();
+                        that.$('.fontLoader').hide();
+                        that.$('.hide').removeClass('hide');
+                    }
+                });
             },
             bindEvents: function() {},
             collectionAttribute: function() {
@@ -81,6 +95,7 @@ define(['require',
                     "isUnique": false,
                     "isIndexable": false
                 }));
+
             },
             onClickAddAttriBtn: function() {
                 if (this.ui.addAttributeDiv.find("input").length > 0) {

dashboardv2/public/js/views/tag/CreateTagLayoutView.js

@@ -21,8 +21,10 @@ define(['require',
     'hbs!tmpl/tag/createTagLayoutView_tmpl',
     'utils/Utils',
     'views/tag/TagAttributeItemView',
+    'collection/VTagList',
+    'utils/UrlLinks',
     'platform'
-], function(require, Backbone, CreateTagLayoutViewTmpl, Utils, TagAttributeItemView, platform) {
+], function(require, Backbone, CreateTagLayoutViewTmpl, Utils, TagAttributeItemView, VTagList, UrlLinks, platform) {
 
     var CreateTagLayoutView = Backbone.Marionette.CompositeView.extend(
         /** @lends CreateTagLayoutView */
@@ -81,9 +83,14 @@ define(['require',
                     this.create = true;
                 }
                 this.collection = new Backbone.Collection();
+                this.typeEnum = new VTagList();
+                this.typeEnum.url = UrlLinks.typedefsUrl().defs;
+                this.typeEnum.modelAttrName = "enumDefs";
             },
             bindEvents: function() {},
             onRender: function() {
+                var that = this;
+                this.$('.fontLoader').show();
                 if (this.create) {
                     this.tagCollectionList();
                 } else {
@@ -92,6 +99,12 @@ define(['require',
                 if (!('placeholder' in HTMLInputElement.prototype)) {
                     this.ui.createTagForm.find('input,textarea').placeholder();
                 }
+                that.typeEnum.fetch({
+                    reset: true,
+                    complete: function(model, response) {
+                        that.hideLoader();
+                    }
+                });
             },
             tagCollectionList: function() {
                 var str = '',
@@ -114,6 +127,10 @@ define(['require',
                     });
                 }
             },
+            hideLoader: function() {
+                this.$('.fontLoader').hide();
+                this.$('.hide').removeClass('hide');
+            },
             collectionAttribute: function() {
                 this.collection.add(new Backbone.Model({
                     "name": "",
@@ -131,6 +148,7 @@ define(['require',
                 if (!('placeholder' in HTMLInputElement.prototype)) {
                     this.ui.addAttributeDiv.find('input,textarea').placeholder();
                 }
+
             }
         });
     return CreateTagLayoutView;

dashboardv2/public/js/views/tag/TagAttributeItemView.js

@@ -35,7 +35,7 @@ define(['require',
             ui: {
                 attributeInput: "[data-id='attributeInput']",
                 close: "[data-id='close']",
-                dataTypeSelector: "[data-id='dataTypeSelector']",
+                dataTypeSelector: "[data-id='dataTypeSelector']"
             },
             /** ui events hash */
             events: function() {
@@ -56,11 +56,14 @@ define(['require',
              */
             initialize: function(options) {
                 this.parentView = options.parentView;
+
             },
             onRender: function() {
-
+                var that = this;
+                _.each(this.parentView.typeEnum.models, function(objValue) {
+                    that.ui.dataTypeSelector.append("<option>" + objValue.attributes.name + "</option>");
+                });
             },
-            bindEvents: function() {},
             onCloseButton: function() {
                 if (this.parentView.collection.models.length > 0) {
                     this.model.destroy();