Split ListView by adding a CreateView

www/scripts/apps/admin/fields/views/list.js

@@ -4,16 +4,13 @@ define([
     "underscore",
     "backbone",
     "i18n",
+    "apps/admin/fields/views",
     "apps/admin/fields/views/listRow",
-    "apps/admin/fields/views/alert",
-    "models/field"
-], function($, jqueryui, _, Backbone, i18n, FieldListRowView, AlertView, FieldModel) {
-    var FieldListView = Backbone.View.extend({
+    "apps/admin/fields/views/create"
+], function($, jqueryui, _, Backbone, i18n, ViewUtils, FieldListRowView, CreateView) {
+    var FieldListView = Backbone.View.extend(_.extend({}, ViewUtils.MultiViews, {
         events: {
             "keyup #live_search": "searchAction",
-            "click .btn-submit-field": "createAction",
-            "click .btn-add-field": "toggleCreateFormAction",
-            "click .btn-cancel-field": "toggleCreateFormAction",
             "update-sort": "updateSortAction"
         },
         initialize: function() {
@@ -56,26 +53,9 @@ define([
 
             this._renderList(this.collection);
 
-            $("#new-source", this.$el).autocomplete({
-                minLength: 2,
-                source: function(request, response) {
-                    $.ajax({
-                        url: "/admin/fields/tags/search",
-                        dataType: "json",
-                        data: {
-                            term: request.term
-                        },
-                        success: function(data) {
-                            response($.map(data, function(item) {
-                                return {
-                                    label: item.label,
-                                    value: item.value
-                                };
-                            }));
-                        }
-                    });
-                }
-            }).autocomplete("widget").addClass("ui-autocomplete-admin-field");
+            this._assignView({
+                ".create-subview" : new CreateView()
+            });
 
             AdminFieldApp.resizeListBlock();
 
@@ -124,97 +104,6 @@ define([
 
             return this;
         },
-        createAction: function(event) {
-            var self = this;
-            var formErrors = 0;
-
-            var fieldName = $("#new-name", this.$el);
-            var fieldNameValue = fieldName.val();
-            var fieldTag = $("#new-source", this.$el);
-            var fieldTagValue = fieldTag.val();
-
-            // check for empty field name
-            if ("" === fieldNameValue) {
-                fieldName
-                    .closest(".control-group")
-                    .addClass("error")
-                    .find(".help-block")
-                    .empty()
-                    .append(i18n.t("validation_blank"));
-
-                formErrors++;
-            }
-
-            // check for duplicate field name
-            if ("undefined" !== typeof this.collection.find(function(model){
-                return model.get("name").toLowerCase() === fieldNameValue.toLowerCase();
-            })) {
-                fieldName
-                    .closest(".control-group")
-                    .addClass("error")
-                    .find(".help-block")
-                    .empty()
-                    .append(i18n.t("validation_name_exists"));
-
-                formErrors++;
-            }
-
-            // check for format tag
-            if ("" !== fieldTagValue && false === /[a-z]+:[a-z0-9]+/i.test(fieldTagValue)) {
-                fieldTag
-                    .closest(".control-group")
-                    .addClass("error")
-                    .find(".help-block")
-                    .empty()
-                    .append(i18n.t("validation_tag_invalid"));
-
-                formErrors++;
-            }
-
-            if (formErrors > 0 ) {
-                return;
-            }
-
-            var field = new FieldModel({
-                "sbas-id": AdminFieldApp.sbas_id,
-                "name": fieldNameValue,
-                "tag": fieldTagValue,
-                "multi": $("#new-multivalued", this.$el).is(":checked"),
-                "sorter": this.collection.max(function(model) {
-                    return model.get("sorter");
-                }).get("sorter") + 1
-            });
-
-            field.save(null, {
-                success: function(field, response, options) {
-                    if (response.success) {
-                        self.collection.add(field);
-                        _.last(self.itemViews).clickAction().animate();
-                    }
-
-                    new AlertView({
-                        alert: response.success ? "success" : "error", message: response.message
-                    }).render();
-                },
-                error: function(model, xhr, options) {
-                    new AlertView({
-                        alert: "error", message: i18n.t("something_wrong")}
-                    ).render();
-
-                    self.toggleCreateFormAction();
-                }
-            });
-
-            return this;
-        },
-        toggleCreateFormAction: function(event) {
-            var fieldBlock = $(".add-field-block", this.$el);
-
-            fieldBlock.is(":hidden") ? fieldBlock.show() : fieldBlock.hide();
-            AdminFieldApp.resizeListBlock();
-
-            return this;
-        },
         updateSortAction: function(event, model, ui) {
             var position = ui.item.index();
             this.collection.remove(model, {silent: true});
@@ -238,7 +127,7 @@ define([
 
             return this;
         }
-    });
+    }));
 
     return FieldListView;
 });