You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by pi...@apache.org on 2022/03/23 04:41:57 UTC

[atlas] branch master updated: ATLAS-3985:#3 Not able to assign classification with mandatory attribute of type 'array'

This is an automated email from the ASF dual-hosted git repository.

pinal pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git


The following commit(s) were added to refs/heads/master by this push:
     new 7360c20  ATLAS-3985:#3 Not able to assign classification with mandatory attribute of type 'array<string>'
7360c20 is described below

commit 7360c2064dddda9e83bb67c7ccc8cc065b715692
Author: Prasad Pawar <pr...@freestoneinfotech.com>
AuthorDate: Thu Mar 17 19:04:19 2022 +0530

    ATLAS-3985:#3 Not able to assign classification with mandatory attribute of type 'array<string>'
    
    Signed-off-by: Pinal Shah <pi...@freestoneinfotech.com>
---
 dashboardv2/public/css/scss/tag.scss               |  7 ++
 .../templates/tag/TagAttributeItemView_tmpl.html   |  1 +
 .../public/js/views/tag/AddTagAttributeView.js     |  1 +
 dashboardv2/public/js/views/tag/AddTagModalView.js | 90 +++++++++++++++-------
 .../public/js/views/tag/TagAttributeItemView.js    | 42 +++++++---
 dashboardv3/public/css/scss/tag.scss               |  7 ++
 .../templates/tag/TagAttributeItemView_tmpl.html   |  1 +
 .../public/js/views/tag/AddTagAttributeView.js     |  1 +
 dashboardv3/public/js/views/tag/AddTagModalView.js | 90 +++++++++++++++-------
 .../public/js/views/tag/TagAttributeItemView.js    | 42 +++++++---
 10 files changed, 210 insertions(+), 72 deletions(-)

diff --git a/dashboardv2/public/css/scss/tag.scss b/dashboardv2/public/css/scss/tag.scss
index e07c3b9..c7bfb7e 100644
--- a/dashboardv2/public/css/scss/tag.scss
+++ b/dashboardv2/public/css/scss/tag.scss
@@ -207,4 +207,11 @@
 .addtag-propagte-box {
     border: 1px solid #ddd;
     border-radius: 7px;
+}
+
+.attributePlusData .toggle {
+    font-size: 20px;
+    /* cursor: pointer; */
+    padding: 0px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/dashboardv2/public/js/templates/tag/TagAttributeItemView_tmpl.html b/dashboardv2/public/js/templates/tag/TagAttributeItemView_tmpl.html
index 012c310..c4b1728 100644
--- a/dashboardv2/public/js/templates/tag/TagAttributeItemView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/TagAttributeItemView_tmpl.html
@@ -32,6 +32,7 @@
         </select>
     </div>
     <div class="col-sm-2 attributePlusData" align="right">
+        <a href="javascript:void(0);" class="toggleDuplicates hide"><i class="fa fa-toggle-off col-sm-2 toggle" title="Make LIST" data-id="toggleButton"></i></a>
         <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/tag/AddTagAttributeView.js b/dashboardv2/public/js/views/tag/AddTagAttributeView.js
index f59476e..3be0a82 100644
--- a/dashboardv2/public/js/views/tag/AddTagAttributeView.js
+++ b/dashboardv2/public/js/views/tag/AddTagAttributeView.js
@@ -72,6 +72,7 @@ define(['require',
                     this.ui.addAttributeDiv.find('input,textarea').placeholder();
                 }
                 that.$('.hide').removeClass('hide');
+                this.ui.addAttributeDiv.find('.toggleDuplicates').addClass("hide");
             },
             bindEvents: function() {},
             collectionAttribute: function() {
diff --git a/dashboardv2/public/js/views/tag/AddTagModalView.js b/dashboardv2/public/js/views/tag/AddTagModalView.js
index d846276..1b46291 100644
--- a/dashboardv2/public/js/views/tag/AddTagModalView.js
+++ b/dashboardv2/public/js/views/tag/AddTagModalView.js
@@ -160,21 +160,24 @@ define(['require',
                 tagAttributeNames.each(function(i, item) {
                     var selection = $(item).data("key"),
                         isRequired = $(item).hasClass('required'),
-                        datatypeSelection = $(item).data("type");
-                    $(item).removeClass('errorValidate');
+                        datatypeSelection = $(item).data("type"),
+                        $valueElement = $(item);
+                    $valueElement.removeClass('errorValidate');
                     if (datatypeSelection === "date") {
-                        tagAttributes[selection] = Date.parse($(item).val()) || null;
+                        tagAttributes[selection] = Date.parse($valueElement.val()) || null;
                     } else {
                         if (isRequired) {
-                            if ($(item).val().length) {
+                            if ($valueElement.val().length) {
                                 tagAttributes[selection] = $(item).val() || null;
+                                // tagAttributes[selection] = that.getValue($valueElement, datatypeSelection);
                             } else {
                                 isValidateAttrValue = false;
-                                $(item).addClass('errorValidate');
+                                $valueElement.addClass('errorValidate');
                                 validationKey.push($(item).data("key"));
                             }
                         } else {
                             tagAttributes[selection] = $(item).val() || null;
+                            // tagAttributes[selection] = that.getValue($valueElement, datatypeSelection);
                         }
                     }
                 });
@@ -282,6 +285,23 @@ define(['require',
             });
             this.bindEvents();
         },
+        getValue: function($item, datatypeSelection) {
+            var that = this;
+            return (datatypeSelection && datatypeSelection.indexOf("array") >= 0) ? that.getArrayValues($item) : ($item.val() || null);
+        },
+        getArrayValues: function($item) {
+            var that = this,
+                arrayValues = $item.val();
+            if ($item.hasClass("set-array") || arrayValues.length == 0) {
+                return (arrayValues || null);
+            } else {
+                return _.map(arrayValues, function(value) {
+                    var splitBy = that.guid + "_",
+                        splitedValue = value.split(splitBy);
+                    return (splitedValue.length > 1) ? splitedValue[1] : splitedValue[0];
+                })
+            }
+        },
         validateValues: function(attributeDefs) {
             var isValidate = true,
                 applyErrorClass = function(scope) {
@@ -425,9 +445,9 @@ define(['require',
                             '<select class="' + inputClassName + '" data-key="' + name + '">' + str + '</select></div>');
                     } else if (typeName.indexOf('array') == 0) {
                         var arraytTypeName = new DOMParser().parseFromString(typeName, "text/html");
-
-                        that.ui.tagAttribute.append('<div class="form-group"><label class="' + (isOptional ? "" : " required") + '">' + name + '</label>' + ' (' + typeName + ')' +
-                            '<select class="' + inputClassName + '" data-id="addArryString" multiple="multiple" data-key="' + name + '" data-type="' + arraytTypeName.documentElement.textContent + '"></select></div>');
+                        var addCardinalityClass = inputClassName + " js-states js-example-events form-control" + (obj.cardinality == "SET" ? " set-array" : " list-array");
+                        that.ui.tagAttribute.append('<div class="form-group"><label class="' + (isOptional ? "" : " required") + '">' + name + '</label>' + ' (' + typeName + ') ' + obj.cardinality +
+                            '<select class="' + addCardinalityClass + '" data-id="addArryString" multiple="multiple" data-key="' + name + '" data-type="' + arraytTypeName.documentElement.textContent + '"></select></div>');
                     } else {
                         var textElement = that.getElement(name, typeName, inputClassName);
                         if (_.isTypePrimitive(typeName)) {
@@ -462,11 +482,14 @@ define(['require',
                     }
                 });
                 that.$('select[data-type="array<string>"]').each(function() {
-                    var stringData = $(this).data('key');
+                    var stringData = $(this).data('key'),
+                        self = this;
                     if (that.tagModel) {
                         var stringValues = that.tagModel.attributes[stringData] || [],
                             str = stringValues.map(function(label) {
-                                return "<option selected > " + _.escape(label) + " </option>";
+                                // var id = ($(self).hasClass("list-array")) ? ("" + Utils.generateUUID() + that.guid + "_" + label + "") : ("" + label + "");
+                                // return ($(self).hasClass("list-array")) ? "<option selected value=" + id + "> " + _.escape(label) + " </option>" : "<option selected> " + _.escape(label) + " </option>";
+                                return "<option selected> " + _.escape(label) + " </option>";
                             });
                         $(this).html(str);
                     }
@@ -489,27 +512,41 @@ define(['require',
                         }
                     };
                     $(this).select2({
-                        placeholder: "Select String",
-                        allowClear: false,
-                        tags: true,
-                        multiple: true,
-                        createTag: function(data) {
-                            var found = _.find(this.$element.select2("data"), { id: data.term });
-                            if (!found) {
-                                return { id: data.term, text: data.term };
-                            }
-                        },
-                        templateResult: that.formatResultSearch
-                    })
-
+                            tags: true,
+                            multiple: true,
+                            createTag: function(data) {
+                                // var isSET = this.$element.hasClass("set-array"),
+                                //     found = _.find(this.$element.select2("data"), { id: data.term });
+                                // if (isSET) {
+                                //     if (!found) {
+                                //         return { id: data.term, text: data.term };
+                                //     }
+                                // } else {
+                                //     return { id: data.term, text: data.term };
+                                // }
+                                var found = _.find(this.$element.select2("data"), { id: data.term });
+                                if (!found) {
+                                    return { id: data.term, text: data.term };
+                                }
+                            },
+                            templateResult: that.formatResultSearch
+                        })
+                        // .on("select2:select", function(e) {
+                        //     if ($(this).hasClass("list-array")) { //allow duplicates value for list
+                        //         var options = $(this).find("option"),
+                        //             id = "" + Utils.generateUUID() + that.guid + "_" + e.params.data.text + "";
+                        //         $(self).append('<option value="' + id + '">' + e.params.data.text + '</option>');
+                        //     }
+                        // })
                 });
                 this.showAttributeBox();
             }
         },
         formatResultSearch: function(state) {
-            if (!state.element && state.text.trim() !== "") {
-                return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");
-            }
+            if (state.text.trim() == "") return;
+            if (!state.id) return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");;
+            // if (state.element && state.element.selected) return;
+            return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");
         },
         getElement: function(labelName, typeName, inputClassName) {
             var value = this.tagModel && this.tagModel.attributes ? (this.tagModel.attributes[_.unescape(labelName)] || "") : "",
@@ -525,7 +562,6 @@ define(['require',
             } else {
                 return '<input type="text" value="' + _.escape(value) + '" class="' + inputClassName + '" data-key="' + labelName + '" data-type="' + typeName + '"/>';
             }
-
         },
         checkTimezoneProperty: function(e) {
             if (e.checked) {
diff --git a/dashboardv2/public/js/views/tag/TagAttributeItemView.js b/dashboardv2/public/js/views/tag/TagAttributeItemView.js
index 55d1f91..595b769 100644
--- a/dashboardv2/public/js/views/tag/TagAttributeItemView.js
+++ b/dashboardv2/public/js/views/tag/TagAttributeItemView.js
@@ -35,7 +35,8 @@ define(['require',
             ui: {
                 attributeInput: "[data-id='attributeInput']",
                 close: "[data-id='close']",
-                dataTypeSelector: "[data-id='dataTypeSelector']"
+                dataTypeSelector: "[data-id='dataTypeSelector']",
+                toggleButton: "[data-id='toggleButton']"
             },
             /** ui events hash */
             events: function() {
@@ -44,17 +45,40 @@ define(['require',
                     this.model.set({ "name": e.target.value.trim() });
                 };
                 events["change " + this.ui.dataTypeSelector] = function(e) {
-                    var typeName = e.target.value.trim();
+                    var typeName = e.target.value.trim(),
+                        cardinality = "SINGLE",
+                        valuesMinCount = 0,
+                        valuesMaxCount = 1,
+                        $toggleButton = $(e.currentTarget.parentElement.nextElementSibling.firstElementChild);
                     if (typeName.indexOf("array") == 0) {
-                        this.model.set({
-                            "cardinality": "SET",
-                            "valuesMinCount": 1,
-                            "valuesMaxCount": 2147483647
-                        });
+                        $toggleButton.removeClass("hide");
+                        cardinality = "SET"
+                        valuesMinCount = 1;
+                        valuesMaxCount = 2147483647;
+                    } else {
+                        $toggleButton.addClass("hide");
                     }
-                    this.model.set({ "typeName": typeName });
+                    this.model.set({
+                        "typeName": typeName,
+                        "cardinality": cardinality,
+                        "valuesMinCount": valuesMinCount,
+                        "valuesMaxCount": valuesMaxCount
+                    });
                 };
-                events["click " + this.ui.close] = 'onCloseButton';
+                events["click " + this.ui.toggleButton] = function(e) {
+                        var toggleElement = $(e.target),
+                            isList = toggleElement.hasClass("fa-toggle-off"),
+                            cardinality = isList ? "LIST" : "SET";
+                        if (isList) {
+                            toggleElement.removeClass("fa-toggle-off").addClass("fa-toggle-on");
+                            toggleElement.attr("data-original-title", "Make SET");
+                        } else {
+                            toggleElement.removeClass("fa-toggle-on").addClass("fa-toggle-off");
+                            toggleElement.attr("data-original-title", "Make LIST");
+                        }
+                        this.model.set({ "cardinality": cardinality });
+                    },
+                    events["click " + this.ui.close] = 'onCloseButton';
                 return events;
             },
 
diff --git a/dashboardv3/public/css/scss/tag.scss b/dashboardv3/public/css/scss/tag.scss
index 5a023e6..b20f34e 100644
--- a/dashboardv3/public/css/scss/tag.scss
+++ b/dashboardv3/public/css/scss/tag.scss
@@ -209,4 +209,11 @@
 
 .entityTypeSelector {
     margin: 10px 0px;
+}
+
+.attributePlusData .toggle {
+    font-size: 20px;
+    /* cursor: pointer; */
+    padding: 0px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/tag/TagAttributeItemView_tmpl.html b/dashboardv3/public/js/templates/tag/TagAttributeItemView_tmpl.html
index 012c310..c4b1728 100644
--- a/dashboardv3/public/js/templates/tag/TagAttributeItemView_tmpl.html
+++ b/dashboardv3/public/js/templates/tag/TagAttributeItemView_tmpl.html
@@ -32,6 +32,7 @@
         </select>
     </div>
     <div class="col-sm-2 attributePlusData" align="right">
+        <a href="javascript:void(0);" class="toggleDuplicates hide"><i class="fa fa-toggle-off col-sm-2 toggle" title="Make LIST" data-id="toggleButton"></i></a>
         <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/tag/AddTagAttributeView.js b/dashboardv3/public/js/views/tag/AddTagAttributeView.js
index f59476e..3be0a82 100644
--- a/dashboardv3/public/js/views/tag/AddTagAttributeView.js
+++ b/dashboardv3/public/js/views/tag/AddTagAttributeView.js
@@ -72,6 +72,7 @@ define(['require',
                     this.ui.addAttributeDiv.find('input,textarea').placeholder();
                 }
                 that.$('.hide').removeClass('hide');
+                this.ui.addAttributeDiv.find('.toggleDuplicates').addClass("hide");
             },
             bindEvents: function() {},
             collectionAttribute: function() {
diff --git a/dashboardv3/public/js/views/tag/AddTagModalView.js b/dashboardv3/public/js/views/tag/AddTagModalView.js
index d846276..1b46291 100644
--- a/dashboardv3/public/js/views/tag/AddTagModalView.js
+++ b/dashboardv3/public/js/views/tag/AddTagModalView.js
@@ -160,21 +160,24 @@ define(['require',
                 tagAttributeNames.each(function(i, item) {
                     var selection = $(item).data("key"),
                         isRequired = $(item).hasClass('required'),
-                        datatypeSelection = $(item).data("type");
-                    $(item).removeClass('errorValidate');
+                        datatypeSelection = $(item).data("type"),
+                        $valueElement = $(item);
+                    $valueElement.removeClass('errorValidate');
                     if (datatypeSelection === "date") {
-                        tagAttributes[selection] = Date.parse($(item).val()) || null;
+                        tagAttributes[selection] = Date.parse($valueElement.val()) || null;
                     } else {
                         if (isRequired) {
-                            if ($(item).val().length) {
+                            if ($valueElement.val().length) {
                                 tagAttributes[selection] = $(item).val() || null;
+                                // tagAttributes[selection] = that.getValue($valueElement, datatypeSelection);
                             } else {
                                 isValidateAttrValue = false;
-                                $(item).addClass('errorValidate');
+                                $valueElement.addClass('errorValidate');
                                 validationKey.push($(item).data("key"));
                             }
                         } else {
                             tagAttributes[selection] = $(item).val() || null;
+                            // tagAttributes[selection] = that.getValue($valueElement, datatypeSelection);
                         }
                     }
                 });
@@ -282,6 +285,23 @@ define(['require',
             });
             this.bindEvents();
         },
+        getValue: function($item, datatypeSelection) {
+            var that = this;
+            return (datatypeSelection && datatypeSelection.indexOf("array") >= 0) ? that.getArrayValues($item) : ($item.val() || null);
+        },
+        getArrayValues: function($item) {
+            var that = this,
+                arrayValues = $item.val();
+            if ($item.hasClass("set-array") || arrayValues.length == 0) {
+                return (arrayValues || null);
+            } else {
+                return _.map(arrayValues, function(value) {
+                    var splitBy = that.guid + "_",
+                        splitedValue = value.split(splitBy);
+                    return (splitedValue.length > 1) ? splitedValue[1] : splitedValue[0];
+                })
+            }
+        },
         validateValues: function(attributeDefs) {
             var isValidate = true,
                 applyErrorClass = function(scope) {
@@ -425,9 +445,9 @@ define(['require',
                             '<select class="' + inputClassName + '" data-key="' + name + '">' + str + '</select></div>');
                     } else if (typeName.indexOf('array') == 0) {
                         var arraytTypeName = new DOMParser().parseFromString(typeName, "text/html");
-
-                        that.ui.tagAttribute.append('<div class="form-group"><label class="' + (isOptional ? "" : " required") + '">' + name + '</label>' + ' (' + typeName + ')' +
-                            '<select class="' + inputClassName + '" data-id="addArryString" multiple="multiple" data-key="' + name + '" data-type="' + arraytTypeName.documentElement.textContent + '"></select></div>');
+                        var addCardinalityClass = inputClassName + " js-states js-example-events form-control" + (obj.cardinality == "SET" ? " set-array" : " list-array");
+                        that.ui.tagAttribute.append('<div class="form-group"><label class="' + (isOptional ? "" : " required") + '">' + name + '</label>' + ' (' + typeName + ') ' + obj.cardinality +
+                            '<select class="' + addCardinalityClass + '" data-id="addArryString" multiple="multiple" data-key="' + name + '" data-type="' + arraytTypeName.documentElement.textContent + '"></select></div>');
                     } else {
                         var textElement = that.getElement(name, typeName, inputClassName);
                         if (_.isTypePrimitive(typeName)) {
@@ -462,11 +482,14 @@ define(['require',
                     }
                 });
                 that.$('select[data-type="array<string>"]').each(function() {
-                    var stringData = $(this).data('key');
+                    var stringData = $(this).data('key'),
+                        self = this;
                     if (that.tagModel) {
                         var stringValues = that.tagModel.attributes[stringData] || [],
                             str = stringValues.map(function(label) {
-                                return "<option selected > " + _.escape(label) + " </option>";
+                                // var id = ($(self).hasClass("list-array")) ? ("" + Utils.generateUUID() + that.guid + "_" + label + "") : ("" + label + "");
+                                // return ($(self).hasClass("list-array")) ? "<option selected value=" + id + "> " + _.escape(label) + " </option>" : "<option selected> " + _.escape(label) + " </option>";
+                                return "<option selected> " + _.escape(label) + " </option>";
                             });
                         $(this).html(str);
                     }
@@ -489,27 +512,41 @@ define(['require',
                         }
                     };
                     $(this).select2({
-                        placeholder: "Select String",
-                        allowClear: false,
-                        tags: true,
-                        multiple: true,
-                        createTag: function(data) {
-                            var found = _.find(this.$element.select2("data"), { id: data.term });
-                            if (!found) {
-                                return { id: data.term, text: data.term };
-                            }
-                        },
-                        templateResult: that.formatResultSearch
-                    })
-
+                            tags: true,
+                            multiple: true,
+                            createTag: function(data) {
+                                // var isSET = this.$element.hasClass("set-array"),
+                                //     found = _.find(this.$element.select2("data"), { id: data.term });
+                                // if (isSET) {
+                                //     if (!found) {
+                                //         return { id: data.term, text: data.term };
+                                //     }
+                                // } else {
+                                //     return { id: data.term, text: data.term };
+                                // }
+                                var found = _.find(this.$element.select2("data"), { id: data.term });
+                                if (!found) {
+                                    return { id: data.term, text: data.term };
+                                }
+                            },
+                            templateResult: that.formatResultSearch
+                        })
+                        // .on("select2:select", function(e) {
+                        //     if ($(this).hasClass("list-array")) { //allow duplicates value for list
+                        //         var options = $(this).find("option"),
+                        //             id = "" + Utils.generateUUID() + that.guid + "_" + e.params.data.text + "";
+                        //         $(self).append('<option value="' + id + '">' + e.params.data.text + '</option>');
+                        //     }
+                        // })
                 });
                 this.showAttributeBox();
             }
         },
         formatResultSearch: function(state) {
-            if (!state.element && state.text.trim() !== "") {
-                return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");
-            }
+            if (state.text.trim() == "") return;
+            if (!state.id) return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");;
+            // if (state.element && state.element.selected) return;
+            return $("<span>Add<strong> '" + _.escape(state.text) + "'</strong></span>");
         },
         getElement: function(labelName, typeName, inputClassName) {
             var value = this.tagModel && this.tagModel.attributes ? (this.tagModel.attributes[_.unescape(labelName)] || "") : "",
@@ -525,7 +562,6 @@ define(['require',
             } else {
                 return '<input type="text" value="' + _.escape(value) + '" class="' + inputClassName + '" data-key="' + labelName + '" data-type="' + typeName + '"/>';
             }
-
         },
         checkTimezoneProperty: function(e) {
             if (e.checked) {
diff --git a/dashboardv3/public/js/views/tag/TagAttributeItemView.js b/dashboardv3/public/js/views/tag/TagAttributeItemView.js
index 55d1f91..595b769 100644
--- a/dashboardv3/public/js/views/tag/TagAttributeItemView.js
+++ b/dashboardv3/public/js/views/tag/TagAttributeItemView.js
@@ -35,7 +35,8 @@ define(['require',
             ui: {
                 attributeInput: "[data-id='attributeInput']",
                 close: "[data-id='close']",
-                dataTypeSelector: "[data-id='dataTypeSelector']"
+                dataTypeSelector: "[data-id='dataTypeSelector']",
+                toggleButton: "[data-id='toggleButton']"
             },
             /** ui events hash */
             events: function() {
@@ -44,17 +45,40 @@ define(['require',
                     this.model.set({ "name": e.target.value.trim() });
                 };
                 events["change " + this.ui.dataTypeSelector] = function(e) {
-                    var typeName = e.target.value.trim();
+                    var typeName = e.target.value.trim(),
+                        cardinality = "SINGLE",
+                        valuesMinCount = 0,
+                        valuesMaxCount = 1,
+                        $toggleButton = $(e.currentTarget.parentElement.nextElementSibling.firstElementChild);
                     if (typeName.indexOf("array") == 0) {
-                        this.model.set({
-                            "cardinality": "SET",
-                            "valuesMinCount": 1,
-                            "valuesMaxCount": 2147483647
-                        });
+                        $toggleButton.removeClass("hide");
+                        cardinality = "SET"
+                        valuesMinCount = 1;
+                        valuesMaxCount = 2147483647;
+                    } else {
+                        $toggleButton.addClass("hide");
                     }
-                    this.model.set({ "typeName": typeName });
+                    this.model.set({
+                        "typeName": typeName,
+                        "cardinality": cardinality,
+                        "valuesMinCount": valuesMinCount,
+                        "valuesMaxCount": valuesMaxCount
+                    });
                 };
-                events["click " + this.ui.close] = 'onCloseButton';
+                events["click " + this.ui.toggleButton] = function(e) {
+                        var toggleElement = $(e.target),
+                            isList = toggleElement.hasClass("fa-toggle-off"),
+                            cardinality = isList ? "LIST" : "SET";
+                        if (isList) {
+                            toggleElement.removeClass("fa-toggle-off").addClass("fa-toggle-on");
+                            toggleElement.attr("data-original-title", "Make SET");
+                        } else {
+                            toggleElement.removeClass("fa-toggle-on").addClass("fa-toggle-off");
+                            toggleElement.attr("data-original-title", "Make LIST");
+                        }
+                        this.model.set({ "cardinality": cardinality });
+                    },
+                    events["click " + this.ui.close] = 'onCloseButton';
                 return events;
             },