Bind label field to backend

Fix bindings

Fix typo

templates/web/admin/fields/templates.html.twig

@@ -45,12 +45,28 @@
                 <h3>{% trans %}Add a new field{% endtrans %}</h3>
                 <form class="form-horizontal">
                     <div class="control-group">
-                        <label class="control-label" for="new-name"">{% trans %}Label{% endtrans %}</label>
+                        <label class="control-label" for="new-name"">{% trans %}Name{% endtrans %}</label>
                         <div class="controls">
                             <input type="text" id="new-name" class="input-block-level" placeholder="">
                             <span class="help-block"></span>
                         </div>
                     </div>
+                    <div class="control-group">
+                        <label class="control-label" for="new-name"">{% trans %}Labels{% endtrans %}</label>
+                        <div class="controls">
+                            <ul class="unstyled inline">
+                                <li class="select lng-label"><a href="#new-label_fr">FR</a></li>
+                                <li class="lng-label"><a href="#new-label_en">EN</a></li>
+                                <li class="lng-label"><a href="#new-label_de">DE</a></li>
+                                <li class="lng-label"><a href="#new-label_nl">NL</a></li>
+                            </ul>
+                            <input type="text" id="new-label_en" class="input-block-level input-label" style="display:none" placeholder="{% trans %}English label{% endtrans %}">
+                            <input type="text" id="new-label_fr" class="input-block-level input-label" placeholder="{% trans %}French label{% endtrans %}">
+                            <input type="text" id="new-label_de" class="input-block-level input-label" style="display:none" placeholder="{% trans %}German label{% endtrans %}">
+                            <input type="text" id="new-label_nl" class="input-block-level input-label" style="display:none" placeholder="{% trans %}Dutch label{% endtrans %}">
+                            <span class="help-block"></span>
+                        </div>
+                    </div>
                     <div class="control-group">
                         <label class="control-label" for="new-source">{% trans %}Source{% endtrans %}</label>
                         <div class="controls">
@@ -81,14 +97,23 @@
                 <td><%= field.sorter %></td>
                 <td><button type="button" class="btn btn-danger delete-field pull-right"><i class="icon-trash icon-white"></i>delete</button></td>
             </tr>
-            <tr class="edit-name ">
-                <td colspan="2" class="control-group <%= modelErrors && modelErrors.has('name') ? 'error' : '' %>">
-                    <input id="name" type="text" value="<%= field.name %>" class="input-block-level">
-                    <span class="help-block">
-                        <% if(modelErrors && modelErrors.get('name')) { %>
-                            <%= modelErrors.get('name').message %>
-                        <% } %>
-                    </span>
+            <tr class="edit-name">
+                <td colspan="2">
+                    <%= field.name %>
+                </td>
+            </tr>
+            <tr class="edit-label ">
+                <td colspan="2" class="control-group">
+                    <ul class="unstyled inline">
+                        <li class="select lng-label"><a href="#label_fr">FR</a></li>
+                        <li class="lng-label"><a href="#label_en">EN</a></li>
+                        <li class="lng-label"><a href="#label_de">DE</a></li>
+                        <li class="lng-label"><a href="#label_nl">NL</a></li>
+                    </ul>
+                    <input type="text" value="<%= field.label_en %>" id="label_en" class="input-block-level input-label" style="display:none" placeholder="{% trans %}English label{% endtrans %}">
+                    <input type="text" value="<%= field.label_fr %>" id="label_fr" class="input-block-level input-label" placeholder="{% trans %}French label{% endtrans %}">
+                    <input type="text" value="<%= field.label_de %>" id="label_de" class="input-block-level input-label" style="display:none" placeholder="{% trans %}German label{% endtrans %}">
+                    <input type="text" value="<%= field.label_nl %>" id="label_nl" class="input-block-level input-label" style="display:none" placeholder="{% trans %}Dutch label{% endtrans %}">
                 </td>
             </tr>
             <tr>

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

@@ -21,7 +21,8 @@ define([
         events: {
             "click .btn-submit-field": "createAction",
             "click .btn-add-field": "toggleCreateFormAction",
-            "click .btn-cancel-field": "toggleCreateFormAction"
+            "click .btn-cancel-field": "toggleCreateFormAction",
+            "click .lng-label a": "_toggleLabels"
         },
         render: function() {
             var template = _.template($("#create_template").html());
@@ -86,6 +87,18 @@ define([
                 formErrors++;
             }
 
+
+            if (false === /^[a-zA-Z]([a-zA-Z0-9]+)$/i.test(fieldNameValue)) {
+                fieldName
+                    .closest(".control-group")
+                    .addClass("error")
+                    .find(".help-block")
+                    .empty()
+                    .append(i18n.t("validation_name_invalid"));
+
+                formErrors++;
+            }
+
             // check for format tag
             if ("" !== fieldTagValue && false === /[a-z]+:[a-z0-9]+/i.test(fieldTagValue)) {
                 fieldTag
@@ -106,6 +119,10 @@ define([
                 "sbas-id": AdminFieldApp.sbas_id,
                 "name": fieldNameValue,
                 "tag": fieldTagValue,
+                "label_en" : $("#new-label_en", this.$el).val(),
+                "label_fr" : $("#new-label_fr", this.$el).val(),
+                "label_de" : $("#new-label_de", this.$el).val(),
+                "label_nl" : $("#new-label_nl", this.$el).val(),
                 "multi": $("#new-multivalued", this.$el).is(":checked"),
                 "sorter": AdminFieldApp.fieldsCollection.max(function(model) {
                     return model.get("sorter");
@@ -145,6 +162,14 @@ define([
             AdminFieldApp.resizeListBlock();
 
             return this;
+        },
+        _toggleLabels: function(event) {
+            event.preventDefault();
+            var curLabel = $(event.target);
+            $('.lng-label', this.$el).removeClass("select");
+            curLabel.closest(".lng-label").addClass("select");
+            $('.input-label', this.$el).hide();
+            $(curLabel.attr('href'), this.$el).show();
         }
     });
 

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

@@ -85,11 +85,12 @@ define([
         events: {
             "click": "focusAction",
             "click .delete-field": "deleteAction",
-            "keyup input#name": "nameFieldChangedAction",
             "keyup input#tbranch": "fieldChangedAction",
             "keyup input#tag": "tagFieldChangedAction",
+            "keyup input.input-label": "labelChangedAction",
             "change input[type=checkbox]": "fieldChangedAction",
-            "change select": "selectionChangedAction"
+            "change select": "selectionChangedAction",
+            "click .lng-label a": "_toggleLabels"
         },
         focusAction: function() {
             var index = AdminFieldApp.fieldListView.collection.indexOf(this.model);
@@ -99,51 +100,6 @@ define([
 
             return this;
         },
-        // on input name keyup check for errors
-        nameFieldChangedAction: function(event) {
-            var self = this;
-            var fieldName = $(event.target);
-            var fieldNameId = fieldName.attr("id");
-            var fieldNameValue = fieldName.val();
-
-            var nameExists = ("undefined" !== typeof AdminFieldApp.fieldListView.collection.find(function(model) {
-                return model.get("name").toLowerCase() === fieldNameValue.toLowerCase() && self.model.get("id") !== model.get("id");
-            }));
-
-            var nameValid = /^[a-zA-Z]([a-zA-Z0-9]+)$/i.test(fieldNameValue);
-
-            // check for empty or duplicate field name
-            var notValid = "" === fieldNameValue || nameExists || !nameValid;
-
-            if (notValid) {
-                fieldName
-                    .closest(".control-group")
-                    .addClass("error")
-                    .find(".help-block")
-                    .empty()
-                    .append(i18n.t("" === fieldNameValue ? "validation_blank" : (nameExists ? "validation_name_exists" : "validation_name_invalid")));
-                // add error
-                AdminFieldApp.errorManager.addModelFieldError(new Error(
-                    self.model, fieldNameId, i18n.t("" === fieldNameValue ? "validation_blank" : (nameExists ? "validation_name_exists" : "validation_name_invalid"))
-                ));
-            } else if (fieldName.closest(".control-group").hasClass("error")) {
-                fieldName
-                    .closest(".control-group")
-                    .removeClass("error")
-                    .find(".help-block")
-                    .empty();
-                // remove error
-                AdminFieldApp.errorManager.removeModelFieldError(
-                    self.model, fieldNameId
-                );
-            }
-
-            if (!notValid) {
-                this.fieldChangedAction(event);
-            }
-
-            return this;
-        },
         selectionChangedAction: function(e) {
             var field = $(e.target);
             var data = {};
@@ -161,6 +117,17 @@ define([
 
             return this;
         },
+        labelChangedAction: function(e) {
+            var field = $(e.target);
+            var fieldId = field.attr("id");
+            var data = this.model.get("labels");
+
+            data[fieldId.split("_").pop()] = field.val();
+
+            this.model.set(data);
+
+            return this;
+        },
         tagFieldChangedAction: function(e) {
             var fieldTag = $(e.target);
             var fieldTagId = fieldTag.attr("id");
@@ -251,6 +218,14 @@ define([
             if (index >= 0) {
                 AdminFieldApp.fieldListView.itemViews[index].select().animate();
             }
+        },
+        _toggleLabels: function(event) {
+            event.preventDefault();
+            var curLabel = $(event.target);
+            $('.lng-label', this.$el).removeClass("select");
+            curLabel.closest(".lng-label").addClass("select");
+            $('.input-label', this.$el).hide();
+            $(curLabel.attr('href'), this.$el).show();
         }
     }));
 

www/scripts/models/field.js

@@ -34,7 +34,13 @@ define([
             "indexable": true,
             "dces-element": null,
             "vocabulary-type": null,
-            "vocabulary-restricted": false
+            "vocabulary-restricted": false,
+            "labels": {
+                "fr" : "",
+                "en" : "",
+                "de" : "",
+                "nl" : ""
+            }
         }
     });
 

www/skins/admin/css/fields.css

@@ -17,7 +17,18 @@
     padding: 10px 0;
 }
 
-#admin-field-app .left-block li {
+#admin-field-app .lng-label a {
+    color: #aaa;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+#admin-field-app .lng-label.select a {
+    color: #0080FF;
+}
+
+#admin-field-app #collection-fields li {
     background: #FFF;
     border-top: 1px solid #ccc;
     border-left: 1px solid #ccc;
@@ -25,86 +36,92 @@
     height:  55px;
 }
 
-#admin-field-app .left-block li .trigger-click {
+#admin-field-app ul.inline li {
+    display: inline-block;
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+#admin-field-app #collection-fields li .trigger-click {
     cursor: pointer;
 }
 
-#admin-field-app .left-block li.border-bottom{
+#admin-field-app #collection-fields li.border-bottom{
     border-bottom: 1px solid #ccc;
 }
 
-#admin-field-app .left-block li table {
+#admin-field-app #collection-fields li table {
     table-layout: fixed;
     width: 100%;
 }
 
-#admin-field-app .left-block li .field-name {
+#admin-field-app #collection-fields li .field-name {
     font-weight: bold;
     font-size: 16px;
     color: #666;
 }
 
-#admin-field-app .left-block li .handle {
+#admin-field-app #collection-fields li .handle {
     width: 10%;
     vertical-align: middle;
     text-align: center;
     cursor: move;
 }
 
-#admin-field-app .left-block li .trigger-click {
+#admin-field-app #collection-fields li .trigger-click {
     padding: 10px;
 }
 
-#admin-field-app .left-block li .position {
+#admin-field-app #collection-fields li .position {
     width: 10%;
     vertical-align: bottom;
     text-align: center;
 }
 
-#admin-field-app .left-block li .chip {
+#admin-field-app #collection-fields li .chip {
     width: 10%;
 }
 
-#admin-field-app .left-block li .handle, #admin-field-app li .position {
+#admin-field-app #collection-fields li .handle, #admin-field-app #collection-fields li .position {
     color: #ccc;
     border-right: 1px solid #ccc;
 }
 
-#admin-field-app .left-block li.last {
+#admin-field-app #collection-fields li.last {
     border-bottom: 1px solid #ccc;
 }
 
-#admin-field-app .left-block li.selected {
+#admin-field-app #collection-fields li.selected {
     border-top-color: #0080FF;
     background: #FFF;
     color: #000;
 }
 
-#admin-field-app .left-block li.last.selected {
+#admin-field-app #collection-fields li.last.selected {
     border-bottom-color: #0080FF;
 }
 
-#admin-field-app .left-block li.last.selected.error {
+#admin-field-app #collection-fields li.last.selected.error {
     border-bottom-color: #9d261d;
 }
 
-#admin-field-app .left-block li.selected + li {
+#admin-field-app #collection-fields li.selected + li {
     border-top-color: #0080FF;
 }
 
-#admin-field-app .left-block li.selected.error {
+#admin-field-app #collection-fields li.selected.error {
     border-top-color: #9d261d;
 }
 
-#admin-field-app .left-block li.selected.error + li {
+#admin-field-app #collection-fields li.selected.error + li {
     border-top-color: #9d261d;
 }
 
-#admin-field-app .left-block li.selected .field-name {
+#admin-field-app #collection-fields li.selected .field-name {
     color: #0080FF;
 }
 
-#admin-field-app .left-block li.error .field-name {
+#admin-field-app #collection-fields li.error .field-name {
     color: #9d261d;
 }
 
@@ -184,11 +201,19 @@
     height: 50px;
 }
 
-#admin-field-app .edit-block .edit-name {
-    height: 60px;
+#admin-field-app .edit-block .edit-order td {
+    height: 50px;
 }
 
-#admin-field-app .edit-block input#name {
+#admin-field-app .edit-block .edit-label {
+    height: 75px;
+}
+
+#admin-field-app .edit-block .edit-label ul {
+    margin: 0;
+}
+
+#admin-field-app .edit-block .edit-name td {
     font-size: 28px;
     color: #0080FF;
     height: 42px;