Merge branch 'main' into phone-field

Author: tabacitu

package-lock.json

@@ -72,4 +72,19 @@ public static function getWithFallbackFor(string $domain, string $viewNamespaces
 
         return array_unique(array_merge($viewNamespacesFromConfig, self::getFor($domain)));
     }
+
+    /**
+     * This is an helper function that returns the view namespace with the view name appended.
+     * It's usefull to use in blade templates with `@includeFirst(ViewNamespaces::getViewPathsFor('columns', 'some_column'))`.
+     *
+     * @param  string  $domain
+     * @param  string  $viewName
+     * @return array
+     */
+    public static function getViewPathsFor(string $domain, string $viewName)
+    {
+        return array_map(function ($item) use ($viewName) {
+            return $item.'.'.$viewName;
+        }, self::getFor($domain));
+    }
 }

src/ViewNamespaces.php

@@ -162,7 +162,7 @@ public function makeFirstField()
             return false;
         }
 
-        $firstField = array_keys(array_slice($this->getCleanFields(), 0, 1))[0];
+        $firstField = array_keys(array_slice($this->getCleanStateFields(), 0, 1))[0];
         $this->beforeField($firstField);
     }
 

src/app/Library/CrudPanel/Traits/Fields.php

@@ -242,13 +242,30 @@ private function getCountFromQuery(Builder $query)
         // add the count query in the "outer" query.
         $outerQuery = $outerQuery->selectRaw('count(*) as total_rows');
 
+        // Expression columns are hand-written by developers in ->selectRaw() and we can't exclude those statements reliably
+        // so we just store them and re-use them in the sub-query too.
+        $expressionColumns = [];
+
+        foreach ($crudQuery->columns as $column) {
+            if (! is_string($column) && is_a($column, 'Illuminate\Database\Query\Expression')) {
+                $expressionColumns[] = $column;
+            }
+        }
         // add the subquery from where the "outer query" will count the results.
         // this subquery is the "main crud query" without some properties:
         // - columns : we manually select the "minimum" columns possible from database.
         // - orders/limit/offset because we want the "full query count" where orders don't matter and limit/offset would break the total count
         $subQuery = $crudQuery->cloneWithout(['columns', 'orders', 'limit', 'offset']);
 
-        $outerQuery = $outerQuery->fromSub($subQuery->select($modelTable.'.'.$this->model->getKeyName()), $modelTable.'_aggregator');
+        // select only one column for the count
+        $subQuery->select($modelTable.'.'.$this->model->getKeyName());
+
+        // in case there are raw expressions we need to add them too.
+        foreach ($expressionColumns as $expression) {
+            $subQuery->selectRaw($expression);
+        }
+
+        $outerQuery = $outerQuery->fromSub($subQuery, str_replace('.', '_', $modelTable).'_aggregator');
 
         return $outerQuery->cursor()->first()->total_rows;
     }

src/app/Library/CrudPanel/Traits/Query.php

@@ -13,6 +13,7 @@
     <input
     	type="password"
     	name="{{ $field['name'] }}"
+        value="{{ $field['value'] ?? $field['default'] ?? '' }}"
         @include('crud::fields.inc.attributes')
     	>
 

src/resources/views/crud/fields/password.blade.php

@@ -119,15 +119,8 @@ function preventUnload(event) {
       @endif
 
       // Save button has multiple actions: save and exit, save and edit, save and new
-      var saveActions = $('#saveActions'),
-      crudForm        = saveActions.parents('form'),
-      saveActionField = $('[name="_save_action"]');
-
-      saveActions.on('click', '.dropdown-menu a', function(){
-          var saveAction = $(this).data('value');
-          saveActionField.val( saveAction );
-          crudForm.submit();
-      });
+      var saveActions = $('#saveActions')
+      crudForm        = saveActions.parents('form')
 
       // Ctrl+S and Cmd+S trigger Save button click
       $(document).keydown(function(e) {

src/resources/views/crud/form_content.blade.php

@@ -9,10 +9,8 @@
     class CrudField {
         constructor(name) {
             this.name = name;
-
-            // get the input/textarea/select that has that field name
-            this.$input = $(`input[name="${this.name}"], textarea[name="${this.name}"], select[name="${this.name}"], select[name="${this.name}[]"]`).first();
-
+            // get the current input
+            this.$input = this.activeInput;
             // get the field wraper
             this.wrapper = this.inputWrapper;
 
@@ -36,6 +34,13 @@ class CrudField {
 
         }
 
+        get activeInput() {
+            // get the input/textarea/select that has that field name
+            this.$input = $(`input[name="${this.name}"], textarea[name="${this.name}"], select[name="${this.name}"], select[name="${this.name}[]"]`);
+            let possibleInput = this.$input.length === 1 ? this.$input : this.$input.filter(function() { return $(this).closest('[id=inline-create-dialog]').length });
+            return possibleInput.length === 1 ? possibleInput : this.$input.first();
+        }
+
         get mainInput() {
             let input = this.wrapper.find('[bp-field-main-input]').first();
 

src/resources/views/crud/inc/form_fields_script.blade.php

@@ -13,11 +13,11 @@
 
         <div class="btn-group" role="group">
             @if(!empty($saveAction['options']))
-                <button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">&#x25BC;</span></button>
-                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                    @foreach( $saveAction['options'] as $value => $label)
-                    <button type="submit" class="dropdown-item" data-value="{{ $value }}">{{ $label }}</a>
-                    @endforeach
+                <button id="bpSaveButtonsGroup" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">&#x25BC;</span></button>
+                <div class="dropdown-menu" aria-labelledby="bpSaveButtonsGroup">
+                @foreach( $saveAction['options'] as $value => $label)
+                    <button type="submit" class="dropdown-item" data-value="{{ $value }}">{{ $label }}</button>
+                @endforeach
                 </div>
             @endif
         </div>
@@ -33,3 +33,82 @@
     </div>
 @endif
 
+@push('after_scripts')
+<script>
+
+    // this function checks if form is valid. 
+    function checkFormValidity(form) {
+        // the condition checks if `checkValidity` is defined in the form (browser compatibility)
+        if (form[0].checkValidity) {
+            return form[0].checkValidity();
+        }
+        return false;
+    }
+
+    // this function checks if any of the inputs has errors and report them on page.
+    // we use it to report the errors after form validation fails and making the error fields visible
+    function reportValidity(form) {
+        // the condition checks if `reportValidity` is defined in the form (browser compatibility)
+        if (form[0].reportValidity) {
+            // hide the save actions drop down if open
+            $('#saveActions').find('.dropdown-menu').removeClass('show');
+            // validate and display form errors
+            form[0].reportValidity();
+        }
+    }
+
+    function changeTabIfNeededAndDisplayErrors(form) {
+        // we get the first erroed field
+        var $firstErrorField = form.find(":invalid").first();
+        // we find the closest tab
+        var $closestTab = $($firstErrorField).closest('.tab-pane');
+        // if we found the tab we will change to that tab before reporting validity of form
+        if($closestTab.length) {
+            var id = $closestTab.attr('id');
+                // switch tabs
+                $('.nav a[href="#' + id + '"]').tab('show');
+        }
+        reportValidity(form);
+    }
+
+    // make all submit buttons trigger HTML5 validation
+    jQuery(document).ready(function($) {
+
+        var selector = $('#bpSaveButtonsGroup').next();
+        var form = $(selector).closest('form');
+        var saveActionField = $('[name="save_action"]');
+        var $defaultSubmitButton = $(form).find(':submit');
+        // this is the main submit button, the default save action.
+        $($defaultSubmitButton).on('click', function(e) {
+            e.preventDefault();
+            $saveAction = $(this).children('span').eq(1);
+            // if form is valid just submit it
+            if(checkFormValidity(form)) {
+                saveActionField.val( $saveAction.attr('data-value') );
+                form.submit();
+            }else{
+                // navigate to the tab where the first error happens 
+                changeTabIfNeededAndDisplayErrors(form);
+            }
+        });
+
+        //this is for the anchors AKA other non-default save actions.
+        $(selector).find('a').each(function() {
+            $(this).click(function(e) {
+                //we check if form is valid
+                if (checkFormValidity(form)) {
+                    //if everything is validated we proceed with the submission
+                    var saveAction = $(this).data('value');
+                    saveActionField.val( saveAction );
+                    form.submit();
+                }else{
+                    // navigate to the tab where the first error happens 
+                    changeTabIfNeededAndDisplayErrors(form);
+                }
+                e.stopPropagation();
+            });
+        });
+    });
+
+    </script>
+@endpush