From 28535d1a083c23573ff94556bbc54ea69451a8c7 Mon Sep 17 00:00:00 2001
From: MrCrayon <crayon@mysticrayon.com>
Date: Sun, 5 Apr 2020 16:32:27 +0800
Subject: [PATCH] Fix save bread when ajax calls are not done (#4716)

* WIP - Fix save bread when ajax calls are not done

Every relationship set in BREAD made three ajax calls to collect table fields.
In a BREAD with many relationship and/or slow server this could result in some relationship not correctly populated when hitting Submit button.

This PR prepopulate selects with already saved values, since we have it, and leaves ajax call only when table is changed or modal is opened.

Fixes #3960

TODO: Fix select width in modal

* Fix styling

Co-authored-by: Christoph Schweppe <info@cschweppe.de>
---
 .../views/tools/bread/edit-add.blade.php      | 52 ++++++++++---------
 .../bread/relationship-new-modal.blade.php    |  4 +-
 .../bread/relationship-partial.blade.php      |  3 ++
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/resources/views/tools/bread/edit-add.blade.php b/resources/views/tools/bread/edit-add.blade.php
index b41b2a03b4..511968406c 100644
--- a/resources/views/tools/bread/edit-add.blade.php
+++ b/resources/views/tools/bread/edit-add.blade.php
@@ -559,10 +559,6 @@ function sort() {
         /********** Relationship functionality **********/
 
        $(function () {
-            $('.rowDrop').each(function(){
-                populateRowsFromTable($(this));
-            });
-
             $('.relationship_type').change(function(){
                 if($(this).val() == 'belongsTo'){
                     $(this).parent().parent().find('.relationshipField').show();
@@ -584,19 +580,16 @@ function sort() {
             });
 
             $('.btn-new-relationship').click(function(){
+                // Update table data
+                $('#new_relationship_modal .relationship_table').trigger('change');
+
                 $('#new_relationship_modal').modal('show');
             });
 
             relationshipTextDataBinding();
 
             $('.relationship_table').on('change', function(){
-                var tbl_selected = $(this).val();
-                var rowDropDowns = $(this).parent().parent().find('.rowDrop');
-                $(this).parent().parent().find('.rowDrop').each(function(){
-                    console.log('1');
-                    $(this).data('table', tbl_selected);
-                    populateRowsFromTable($(this));
-                });
+                populateRowsFromTable($(this));
             });
 
             $('.voyager-relationship-details-btn').click(function(){
@@ -611,23 +604,32 @@ function sort() {
         });
 
         function populateRowsFromTable(dropdown){
-            var tbl = dropdown.data('table');
-            var selected_value = dropdown.data('selected');
-            if(tbl.length != 0){
-                $.get('{{ route('voyager.database.index') }}/' + tbl, function(data){
-                    $(dropdown).empty();
-                    for (var option in data) {
-                       $('<option/>', {
-                         value: option,
-                         html: option
-                       }).appendTo($(dropdown));
-                    }
+            var tbl = dropdown.val();
 
-                    if($(dropdown).find('option[value="'+selected_value+'"]').length > 0){
-                        $(dropdown).val(selected_value);
+            $.get('{{ route('voyager.database.index') }}/' + tbl, function(data){
+                var tbl_selected = $(dropdown).val();
+
+                $(dropdown).parent().parent().find('.rowDrop').each(function(){
+                    var selected_value = $(this).data('selected');
+
+                    var options = $.map(data, function (obj, key) {
+                        obj.id = key;
+                        obj.text = key; 
+
+                        return obj;
+                    });
+
+                    $(this).empty().select2({
+                        data: options
+                    });
+
+                    if (selected_value == '' || !$(this).find("option[value='"+selected_value+"']").length) {
+                        selected_value = $(this).find("option:first-child").val();
                     }
+
+                    $(this).val(selected_value).trigger('change');
                 });
-            }
+            });
         }
 
         function relationshipTextDataBinding(){
diff --git a/resources/views/tools/bread/relationship-new-modal.blade.php b/resources/views/tools/bread/relationship-new-modal.blade.php
index 913d0056ea..d413d22d93 100644
--- a/resources/views/tools/bread/relationship-new-modal.blade.php
+++ b/resources/views/tools/bread/relationship-new-modal.blade.php
@@ -56,11 +56,11 @@
 				                <div class="well">
 				                    <label>{{ __('voyager::database.relationship.selection_details') }}</label>
 				                    <p><strong>{{ __('voyager::database.relationship.display_the') }} <span class="label_table_name"></span>: </strong>
-				                        <select name="relationship_label" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="">
+				                        <select name="relationship_label" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="" style="width: 100%">
 				                        </select>
 				                    </p>
 				                    <p class="relationship_key"><strong>{{ __('voyager::database.relationship.store_the') }} <span class="label_table_name"></span>: </strong>
-				                        <select name="relationship_key" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="">
+				                        <select name="relationship_key" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="" style="width: 100%">
 				                        </select>
 									</p>
 
diff --git a/resources/views/tools/bread/relationship-partial.blade.php b/resources/views/tools/bread/relationship-partial.blade.php
index 5de017ddc6..10da829eb9 100644
--- a/resources/views/tools/bread/relationship-partial.blade.php
+++ b/resources/views/tools/bread/relationship-partial.blade.php
@@ -75,6 +75,7 @@
                 <div class="relationship_details_content margin_top hasOneMany @if($relationshipDetails->type == 'hasOne' || $relationshipDetails->type == 'hasMany') flexed @endif">
                     <label>{{ __('voyager::database.relationship.which_column_from') }} <span class="label_table_name"></span> {{ __('voyager::database.relationship.is_used_to_reference') }} <span>{{ \Illuminate\Support\Str::singular(ucfirst($table)) }}</span>?</label>
                     <select name="relationship_column_{{ $relationship['field'] }}" class="new_relationship_field select2 rowDrop" data-table="{{ $relationshipDetails->table ?? '' }}" data-selected="{{ $relationshipDetails->column }}">
+                        <option value="{{ $relationshipDetails->column ?? '' }}">{{ $relationshipDetails->column ?? '' }}</option>
                     </select>
                 </div>
             </div>
@@ -89,9 +90,11 @@
         <div class="relationship_details_content margin_top">
             <label>{{ __('voyager::database.relationship.display_the') }} <span class="label_table_name"></span></label>
             <select name="relationship_label_{{ $relationship['field'] }}" class="rowDrop select2" data-table="{{ $relationshipDetails->table ?? '' }}" data-selected="{{ $relationshipDetails->label ?? ''}}">
+                <option value="{{ $relationshipDetails->label ?? '' }}">{{ $relationshipDetails->label ?? '' }}</option>
             </select>
             <label class="relationship_key" style="@if($relationshipDetails->type == 'belongsTo' || $relationshipDetails->type == 'belongsToMany') display:block @endif">{{ __('voyager::database.relationship.store_the') }} <span class="label_table_name"></span></label>
             <select name="relationship_key_{{ $relationship['field'] }}" class="rowDrop select2 relationship_key" style="@if($relationshipDetails->type == 'belongsTo' || $relationshipDetails->type == 'belongsToMany') display:block @endif" data-table="@if(isset($relationshipDetails->table)){{ $relationshipDetails->table }}@endif" data-selected="@if(isset($relationshipDetails->key)){{ $relationshipDetails->key }}@endif">
+                <option value="{{ $relationshipDetails->key ?? '' }}">{{ $relationshipDetails->key ?? '' }}</option>
             </select>
             <br>
             @isset($relationshipDetails->taggable)