Fixes #71 Enables inline errors for fields

CHANGELOG.md

@@ -20,14 +20,16 @@ All Notable changes to `Backpack CRUD` will be documented in this file
 - Nothing
 
 
-## [3.2.0] - 2017-xx-xx
+## [3.2.0] - 2017-02-xx
 
 ### Added
 - form save button better UI&UX: they have the options in a dropdown instead of radio buttons and the default behaviour is stored in the session upon change - thanks to [Owen Melbourne](https://github.com/OwenMelbz);
 - redirect_after_save button actions;
 - filters on list views (deleted the 3.1.41 and 4.1.42 tags because they were breaking changes);
 - routes are now abstracted intro CrudRoute, so that new routes can be easily added;
 - Greek translation (thanks [Stamatis Katsaounis](https://github.com/skatsaounis));
+- tabbed create&update forms - thanks to [Owen Melbourne](https://github.com/OwenMelbz);
+- grouped and inline errors - thanks to [Owen Melbourne](https://github.com/OwenMelbz);
 
 ### Fixed
 - excluded _method from massAssignment, so create/update errors will be more useful;

src/CrudPanel.php

@@ -8,6 +8,7 @@
 use Backpack\CRUD\PanelTraits\Access;
 use Backpack\CRUD\PanelTraits\Create;
 use Backpack\CRUD\PanelTraits\Delete;
+use Backpack\CRUD\PanelTraits\Errors;
 use Backpack\CRUD\PanelTraits\Fields;
 use Backpack\CRUD\PanelTraits\Update;
 use Backpack\CRUD\PanelTraits\AutoSet;
@@ -22,7 +23,7 @@
 
 class CrudPanel
 {
-    use Create, Read, Update, Delete, Reorder, Access, Columns, Fields, Query, Buttons, AutoSet, FakeFields, FakeColumns, ViewsAndRestoresRevisions, AutoFocus, Filters, Tabs;
+    use Create, Read, Update, Delete, Errors, Reorder, Access, Columns, Fields, Query, Buttons, AutoSet, FakeFields, FakeColumns, ViewsAndRestoresRevisions, AutoFocus, Filters, Tabs;
 
     // --------------
     // CRUD variables
@@ -64,6 +65,11 @@ class CrudPanel
 
     // The following methods are used in CrudController or your EntityCrudController to manipulate the variables above.
 
+    public function __construct()
+    {
+        $this->setErrorDefaults();
+    }
+
     // ------------------------------------------------------
     // BASICS - model, route, entity_name, entity_name_plural
     // ------------------------------------------------------

src/PanelTraits/Errors.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Backpack\CRUD\PanelTraits;
+
+trait Errors
+{
+    protected $groupedErrors = true;
+    protected $inlineErrors = false;
+
+    public function setErrorDefaults()
+    {
+        $this->groupedErrors = config('backpack.crud.show_grouped_errors', true);
+        $this->inlineErrors = config('backpack.crud.show_inline_errors', false);
+    }
+
+    // Getters
+
+    public function groupedErrorsEnabled()
+    {
+        return $this->groupedErrors;
+    }
+
+    public function inlineErrorsEnabled()
+    {
+        return $this->inlineErrors;
+    }
+
+    // Setters
+
+    public function enableGroupedErrors()
+    {
+        $this->groupedErrors = true;
+
+        return $this->groupedErrors;
+    }
+
+    public function disableGroupedErrors()
+    {
+        $this->groupedErrors = false;
+
+        return $this->groupedErrors;
+    }
+
+    public function enableInlineErrors()
+    {
+        $this->inlineErrors = true;
+
+        return $this->inlineErrors;
+    }
+
+    public function disableInlineErrors()
+    {
+        $this->inlineErrors = false;
+
+        return $this->inlineErrors;
+    }
+}

src/PanelTraits/Filters.php

@@ -6,13 +6,31 @@
 
 trait Filters
 {
-    // ------------
-    // FILTERS
-    // ------------
-
     public $filters = [];
 
-    public function __construct()
+    public function filtersEnabled()
+    {
+        return ! is_array($this->filters);
+    }
+
+    public function filtersDisabled()
+    {
+        return is_array($this->filters);
+    }
+
+    public function enableFilters()
+    {
+        if ($this->filtersDisabled()) {
+            $this->filters = new FiltersCollection;
+        }
+    }
+
+    public function disableFilters()
+    {
+        $this->filters = [];
+    }
+
+    public function clearFilters()
     {
         $this->filters = new FiltersCollection;
     }
@@ -32,6 +50,9 @@ public function addFilter($options, $values = false, $filter_logic = false)
             $values = $values();
         }
 
+        // enable the filters functionality
+        $this->enableFilters();
+
         // check if another filter with the same name exists
         if (! isset($options['name'])) {
             abort(500, 'All your filters need names.');

src/config/backpack/crud.php

@@ -7,17 +7,21 @@
     | Backpack\CRUD preferences
     |--------------------------------------------------------------------------
     */
+
+    /*
+    |------------
+    | CREATE & UPDATE
+    |------------
+    */
     // Where do you want to redirect the user by default, after a CRUD entry is saved in the Add or Edit forms?
     'default_save_action' => 'save_and_back', //options: save_and_back, save_and_edit, save_and_new
 
     // When using tabbed forms (create & update), what kind of tabs would you like?
     'tabs_type' => 'horizontal', //options: horizontal, vertical
 
-    /*
-    |------------
-    | CREATE
-    |------------
-    */
+    // How would you like the validation errors to be shown?
+    'show_grouped_errors' => true,
+    'show_inline_errors' => true,
 
     /*
     |------------
@@ -34,12 +38,6 @@
 
     // PREVIEW
 
-    /*
-    |------------
-    | UPDATE
-    |------------
-    */
-
     /*
     |------------
     | DELETE

src/resources/views/create.blade.php

@@ -21,17 +21,7 @@
 			<a href="{{ url($crud->route) }}"><i class="fa fa-angle-double-left"></i> {{ trans('backpack::crud.back_to_all') }} <span class="text-lowercase">{{ $crud->entity_name_plural }}</span></a><br><br>
 		@endif
 
-		{{-- Show the errors, if any --}}
-	    @if ($errors->any())
-            <div class="callout callout-danger">
-                <h4>{{ trans('backpack::crud.please_fix') }}</h4>
-                <ul>
-                    @foreach($errors->all() as $error)
-                        <li>{{ $error }}</li>
-                    @endforeach
-                </ul>
-            </div>
-	    @endif
+		@include('crud::inc.grouped_errors')
 
 		  {!! Form::open(array('url' => $crud->route, 'method' => 'post', 'files'=>$crud->hasUploadFields('create'))) !!}
 		  <div class="box">

src/resources/views/edit.blade.php

@@ -21,17 +21,7 @@
 			<a href="{{ url($crud->route) }}"><i class="fa fa-angle-double-left"></i> {{ trans('backpack::crud.back_to_all') }} <span class="text-lowercase">{{ $crud->entity_name_plural }}</span></a><br><br>
 		@endif
 
-		{{-- Show the errors, if any --}}
-	    @if ($errors->any())
-            <div class="callout callout-danger">
-                <h4>{{ trans('backpack::crud.please_fix') }}</h4>
-                <ul>
-                    @foreach($errors->all() as $error)
-                        <li>{{ $error }}</li>
-                    @endforeach
-                </ul>
-            </div>
-	    @endif
+		@include('crud::inc.grouped_errors')
 
 		  {!! Form::open(array('url' => $crud->route.'/'.$entry->getKey(), 'method' => 'put', 'files'=>$crud->hasUploadFields('update', $entry->getKey()))) !!}
 		  <div class="box">

src/resources/views/form_content.blade.php

@@ -21,54 +21,83 @@
     @stack('crud_fields_scripts')
 
     <script>
-        jQuery('document').ready(function($){
+    jQuery('document').ready(function($){
 
-          //Save button dropdown toggles
-          var saveActions = $('#saveActions'),
-          crudForm        = saveActions.parents('form'),
-          saveActionField = $('[name="save_action"]');
+      // 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();
+      saveActions.on('click', '.dropdown-menu a', function(){
+          var saveAction = $(this).data('value');
+          saveActionField.val( saveAction );
+          crudForm.submit();
+      });
+
+      // Ctrl+S and Cmd+S trigger Save button click
+      $(document).keydown(function(e) {
+          if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey))
+          {
+              e.preventDefault();
+              // alert("Ctrl-s pressed");
+              $("button[type=submit]").trigger('click');
+              return false;
+          }
+          return true;
+      });
+
+      // Place the focus on the first element in the form
+      @if( $crud->autoFocusOnFirstField )
+        @php
+          $focusField = array_first($fields, function($field) {
+              return isset($field['auto_focus']) && $field['auto_focus'] == true;
           });
+        @endphp
 
-            // Ctrl+S and Cmd+S trigger Save button click
-            $(document).keydown(function(e) {
-                if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey))
-                {
-                    e.preventDefault();
-                    // alert("Ctrl-s pressed");
-                    $("button[type=submit]").trigger('click');
-                    return false;
-                }
-                return true;
-            });
+        @if ($focusField)
+          window.focusField = $('[name="{{ $focusField['name'] }}"]').eq(0),
+        @else
+          var focusField = $('form').find('input, textarea, select').not('[type="hidden"]').eq(0),
+        @endif
+
+        fieldOffset = focusField.offset().top,
+        scrollTolerance = $(window).height() / 2;
+
+        focusField.trigger('focus');
+
+        if( fieldOffset > scrollTolerance ){
+            $('html, body').animate({scrollTop: (fieldOffset - 30)});
+        }
+      @endif
+
+      // Add inline errors to the DOM
+      @if ($crud->inlineErrorsEnabled() && $errors->any())
+
+        window.errors = {!! json_encode($errors->messages()) !!};
+        // console.error(window.errors);
 
-          @if( $crud->autoFocusOnFirstField )
-            //Focus on first field
-            @php
-              $focusField = array_first($fields, function($field){
-                  return isset($field['auto_focus']) && $field['auto_focus'] == true;
-              })
-            @endphp
-
-            @if($focusField)
-              window.focusField = $('[name="{{ $focusField['name'] }}"]').eq(0),
-            @else
-              var focusField = $('form').find('input, textarea, select').not('[type="hidden"]').eq(0),
-            @endif
-
-            fieldOffset = focusField.offset().top,
-            scrollTolerance = $(window).height() / 2;
-
-            focusField.trigger('focus');
-
-            if( fieldOffset > scrollTolerance ){
-                $('html, body').animate({scrollTop: (fieldOffset - 30)});
-            }
-          @endif
+        $.each(errors, function(property, messages){
+
+            var field = $('[name="' + property + '"]'),
+                container = field.parents('.form-group');
+
+            container.addClass('has-error');
+
+            $.each(messages, function(key, msg){
+                // highlight the input that errored
+                var row = $('<div class="help-block">' + msg + '</div>');
+                row.appendTo(container);
+
+                // highlight its parent tab
+                @if ($crud->tabsEnabled())
+                var tab_id = $(container).parent().attr('id');
+                $("#form_tabs [aria-controls="+tab_id+"]").addClass('text-red');
+                @endif
+            });
         });
+
+      @endif
+
+      });
     </script>
 @endsection

src/resources/views/inc/grouped_errors.blade.php

@@ -0,0 +1,11 @@
+{{-- Show the errors, if any --}}
+@if ($crud->groupedErrorsEnabled() && $errors->any())
+    <div class="callout callout-danger">
+        <h4>{{ trans('backpack::crud.please_fix') }}</h4>
+        <ul>
+            @foreach($errors->all() as $error)
+                <li>{{ $error }}</li>
+            @endforeach
+        </ul>
+    </div>
+@endif

src/resources/views/inc/show_tabbed_fields.blade.php

@@ -21,7 +21,7 @@
 
 <div class="tab-container {{ $horizontalTabs ? 'col-md-12' : 'col-md-3 m-t-10' }}">
 
-    <div class="nav-tabs-custom">
+    <div class="nav-tabs-custom" id="form_tabs">
         <ul class="nav {{ $horizontalTabs ? 'nav-tabs' : 'nav-stacked nav-pills'}}" role="tablist">
             @foreach ($crud->getTabs() as $k => $tab)
                 <li role="presentation" class="{{$k == 0 ? 'active' : ''}}">