Fix many to one placeholder/default_value issue (Closes #1737) (#1738)

* Fix many to one placeholder/default_value issue (Closes #1737)

Sets the models value on load if the default value is used to prevent
directus throwing the nothing changed nothing saved issue. It also
allows the user to set the interface to allow_null once again, by
providing a placeholder which can be selected and has a null value.

* Add default placeholder text and update instructions

* Show / hide first option according to settings

* Save auto-selected value when no placeholder

* remove mark changed on serialization

api/locales/en.json

@@ -256,7 +256,7 @@
     "m2o_visible_column_comment": "Visible Column Name",
     "m2o_visible_column_template_comment": "Twig Template String",
     "m2o_visible_status_ids_comment": "A CSV of visible statuses (eg: '1,2' shows Published and Draft)",
-    "m2o_placeholder_text_comment": "Placeholder Text",
+    "m2o_placeholder_text_comment": "The first value will be saved for new items if no default or placeholder is used",
     "m2o_filter_column_comment": "Column thats value is used for filter search",
 
     "m2o_typeahead_placeholder": "Search for an item...",

app/core/interfaces/many_to_one/component.js

@@ -52,7 +52,7 @@ define([
         ui: 'text_input',
         type: 'String',
         comment: __t('m2o_placeholder_text_comment'),
-        default_value: '',
+        default_value: 'Please select an option',
         char_length: 255,
         required: false
       },

app/core/interfaces/many_to_one/input.html

@@ -1,7 +1,7 @@
 <div class="select-container">
 	<select name="{{name}}" {{#if readOnly}}readonly disabled{{/if}}>
-		{{#if allowNull}}
-		<option value="">{{placeholder}}</option>
+		{{#if placeholderAvailable}}
+		<option value="" {{#unless value}}selected{{/unless}} {{#if required}}disabled{{/if}}>{{placeholder}}</option>
 		{{/if}}
 		{{#data}}
 		<option value="{{id}}" {{#if selected}}selected{{/if}}>{{{name}}}</option>

app/core/interfaces/many_to_one/interface.js

@@ -58,12 +58,13 @@ define([
 
     serialize: function () {
       var optionTemplate = Handlebars.compile(this.options.settings.get('visible_column_template'));
-      var value = this.options.value;
+      var defaultValue = +this.options.schema.get('default_value');
+      var placeholderAvailable = !!this.options.settings.get('placeholder') && this.options.settings.get('placeholder').length > 0;
 
-      // Set the first value to the column when the record is new
-      // This prevent assigning the incorrect (null/empty) value to the column
-      if (this.collection.length > 0 && !this.options.settings.get('allow_null') && this.model.isNew()) {
-        value = this.collection.first().id;
+      var value = this.options.value || defaultValue;
+
+      if (value instanceof Backbone.Model) {
+        value = value.id;
       }
 
       if (this.options.settings.get('readonly') === true) {
@@ -73,10 +74,6 @@ define([
       var data = this.collection.map(function (model) {
         var data = model.toJSON();
 
-        if (value instanceof Backbone.Model) {
-          value = value.id;
-        }
-
         return {
           id: model.id,
           name: optionTemplate(data),
@@ -104,8 +101,11 @@ define([
         comment: this.options.schema.get('comment'),
         use_radio_buttons: this.options.settings.get('use_radio_buttons') === true,
         allowNull: this.options.settings.get('allow_null') === true,
-        placeholder: (this.options.settings.get('placeholder')) ? this.options.settings.get('placeholder') : __t('select_from_below'),
-        readOnly: this.options.settings.get('read_only') || !this.options.canWrite
+        placeholder: this.options.settings.get('placeholder'),
+        placeholderAvailable: placeholderAvailable,
+        readOnly: this.options.settings.get('read_only') || !this.options.canWrite,
+        value: this.value,
+        required: this.options.schema.isRequired()
       };
     },