Merge pull request #783 from SilverStripers/bugfix/grid-filter-errors

client/dist/styles/userforms-cms.css

@@ -1 +1 @@
-.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:2;background:#f7f8fa;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}
+.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:2;background:#f7f8fa;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}.cms .grid-field__table .grid-field__uf-filter-header{padding:0}.cms .grid-field__table .grid-field__uf-filter-header .form__fieldgroup-label{color:#fff}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger),.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger):hover{background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header table{width:100%}

client/src/styles/userforms-cms.scss

@@ -140,3 +140,25 @@
     }
   }
 }
+
+
+
+.cms .grid-field__table .grid-field__uf-filter-header {
+  padding: 0;
+
+  .form__fieldgroup-label {
+    color: $white;
+  }
+
+  .ss-gridfield-button-filter:not(.trigger) {
+    background-color: $brand-success;
+  }
+
+  .ss-gridfield-button-filter:not(.trigger):hover {
+    background-color: $brand-success;
+  }
+
+  table {
+    width: 100%;
+  }
+}

code/Form/UserFormsGridFieldFilterHeader.php

@@ -9,9 +9,11 @@ use SilverStripe\Forms\DropdownField;
 use SilverStripe\Forms\FieldGroup;
 use SilverStripe\Forms\GridField\GridField;
 use SilverStripe\Forms\GridField\GridField_FormAction;
+use SilverStripe\Forms\GridField\GridFieldDataColumns;
 use SilverStripe\Forms\GridField\GridFieldFilterHeader;
 use SilverStripe\Forms\TextField;
 use SilverStripe\ORM\ArrayList;
+use SilverStripe\ORM\FieldType\DBDate;
 use SilverStripe\ORM\SS_List;
 use SilverStripe\View\ArrayData;
 
@@ -91,35 +93,45 @@ class UserFormsGridFieldFilterHeader extends GridFieldFilterHeader
         )));
 
         foreach (array($start, $end) as $date) {
-            $date->setDateFormat('y-mm-dd');
+            $date->setDateFormat(DBDate::ISO_DATE);
             $date->addExtraClass('no-change-track');
         }
 
-        $end->setValue($state->end);
+        if ($state->end) {
-        $start->setValue($state->start);
+            $end->setValue($state->end);
+        }
+        if ($state->start) {
+            $start->setValue($state->start);
+        }
 
 
         $fields->push($actions = FieldGroup::create(
             GridField_FormAction::create($gridField, 'filter', false, 'filter', null)
-                ->addExtraClass('ss-gridfield-button-filter')
+                ->addExtraClass('ss-gridfield-button-filter btn btn-primary')
-                ->setAttribute('title', _t('SilverStripe\\Forms\\GridField\\GridField.Filter', "Filter"))
+                ->setTitle(_t(__CLASS__.'.FILTER', "Filter"))
+                ->setAttribute('title', _t(__CLASS__.'.FILTER', "Filter"))
                 ->setAttribute('id', 'action_filter_' . $gridField->getModelClass() . '_' . $columnField),
             GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
-                ->addExtraClass('ss-gridfield-button-close')
+                ->addExtraClass('ss-gridfield-button-close btn ')
-                ->setAttribute('title', _t('SilverStripe\\Forms\\GridField\\GridField.ResetFilter', "Reset"))
+                ->setTitle(_t(__CLASS__.'.RESET', "Reset"))
+                ->setAttribute('title', _t(__CLASS__.'.RESET', "Reset"))
                 ->setAttribute('id', 'action_reset_' . $gridField->getModelClass() . '_' . $columnField)
         ));
 
         $actions->addExtraClass('filter-buttons');
         $actions->addExtraClass('no-change-track');
 
+        $colSpan = 2 + count($gridField->getConfig()->getComponentByType(GridFieldDataColumns::class)
+            ->getDisplayFields($gridField));
+
         $forTemplate = ArrayData::create(array(
-            'Fields' => $fields
+            'Fields'    => $fields,
+            'ColSpan'   => $colSpan
         ));
 
 
         return array(
-            'header' => $forTemplate->renderWith(GridFieldFilterHeader::class . '_Row')
+            'header' => $forTemplate->renderWith(UserFormsGridFieldFilterHeader::class . '_Row')
         );
     }
 

lang/en.yml

@@ -36,6 +36,8 @@ en:
     FROM: From
     TILL: Till
     WHEREVALUEIS: 'where value is..'
+    RESET: Reset
+    FILTER: Filter
   SilverStripe\UserForms\Model\EditableCustomRule:
     PLURALNAME: 'Editable Custom Rules'
     PLURALS:

templates/SilverStripe/UserForms/Form/UserFormsGridFieldFilterHeader_Row.ss

@@ -0,0 +1,13 @@
+<% if $Fields %>
+    <tr class="grid-field__filter-header" style="display:none;">
+        <td colspan="{$ColSpan}" class="grid-field__uf-filter-header">
+            <table>
+                <tr>
+                    <% loop $Fields %>
+                        <th class="extra">$Field</th>
+                    <% end_loop %>
+                </tr>
+            </table>
+        </td>
+    </tr>
+<% end_if %>