Add search to record finder

modules/backend/assets/css/october.css

@@ -8262,10 +8262,14 @@ label {
   margin-top: -44px;
   height: 88px;
   width: 36px;
+  color: #8c8c8c;
 }
 .field-recordfinder .btn i {
   font-size: 14px;
 }
+.field-recordfinder .btn:hover {
+  color: #666666;
+}
 .field-recordfinder .text-muted i {
   font-size: 14px;
   position: relative;
@@ -8276,6 +8280,12 @@ label {
 .field-recordfinder .primary {
   font-weight: 600;
 }
+.recordfinder-search {
+  background-position: right -81px !important;
+  border-top: none  !important;
+  border-left: none  !important;
+  border-right: none  !important;
+}
 .form-buttons {
   padding-bottom: 20px;
   font-size: 0;

modules/backend/assets/less/controls/forms.less

@@ -213,10 +213,15 @@ label {
         margin-top: -44px;
         height: 88px;
         width: 36px;
+        color: lighten(@btn-default-color, 15%);
 
         i {
             font-size: 14px;
         }
+
+        &:hover {
+            color: @btn-default-color;
+        }
     }
     .text-muted i {
         font-size: 14px;
@@ -230,6 +235,13 @@ label {
     }
 }
 
+.recordfinder-search {
+    background-position: right -81px !important;
+    border-top: none  !important;
+    border-left: none  !important;
+    border-right: none  !important;
+}
+
 .form-buttons {
     .clearfix();
     padding-bottom: 20px;

modules/backend/formwidgets/RecordFinder.php

@@ -64,6 +64,11 @@ class RecordFinder extends FormWidgetBase
      */
     protected $listWidget;
 
+    /**
+     * @var Backend\Classes\WidgetBase Reference to the widget used for searching.
+     */
+    protected $searchWidget;
+
     /**
      * {@inheritDoc}
      */
@@ -82,6 +87,20 @@ class RecordFinder extends FormWidgetBase
 
         if (post('recordfinder_flag')) {
             $this->listWidget = $this->makeListWidget();
+            $this->listWidget->bindToController();
+
+            $this->searchWidget = $this->makeSearchWidget();
+            $this->searchWidget->bindToController();
+
+            /*
+             * Link the Search Widget to the List Widget
+             */
+            $this->searchWidget->bindEvent('search.submit', function() {
+                $this->listWidget->setSearchTerm($this->searchWidget->getActiveTerm());
+                return $this->listWidget->onRefresh();
+            });
+
+            $this->searchWidget->setActiveTerm(null);
         }
     }
 
@@ -112,6 +131,7 @@ class RecordFinder extends FormWidgetBase
         $this->vars['nameValue'] = $this->getNameValue();
         $this->vars['descriptionValue'] = $this->getDescriptionValue();
         $this->vars['listWidget'] = $this->listWidget;
+        $this->vars['searchWidget'] = $this->searchWidget;
         $this->vars['prompt'] = str_replace('%s', '<i class="icon-th-list"></i>', $this->prompt);
     }
 
@@ -168,6 +188,7 @@ class RecordFinder extends FormWidgetBase
         $config->alias = $this->alias . 'List';
         $config->showSetup = false;
         $config->showCheckboxes = false;
+        $config->recordsPerPage = 20;
         $config->recordOnClick = sprintf("$('#%s').recordFinder('updateRecord', this, ':id')", $this->getId());
         $widget = $this->makeWidget('Backend\Widgets\Lists', $config);
 
@@ -185,4 +206,15 @@ class RecordFinder extends FormWidgetBase
 
         return $widget;
     }
+
+    protected function makeSearchWidget()
+    {
+        $config = $this->makeConfig();
+        $config->alias = $this->alias . 'Search';
+        $config->growable = false;
+        $config->useSession = false;
+        $widget = $this->makeWidget('Backend\Widgets\Search', $config);
+        $widget->cssClasses[] = 'recordfinder-search';
+        return $widget;
+    }
 }

modules/backend/formwidgets/recordfinder/partials/_recordfinder_form.htm

@@ -5,7 +5,10 @@
             <h4 class="modal-title">Find Record</h4>
         </div>
 
-        <?= $listWidget->render() ?>
+        <div class="list-flush" data-request-data="recordfinder_flag: 1">
+            <?= $searchWidget->render() ?>
+            <?= $listWidget->render() ?>
+        </div>
 
         <div class="modal-footer">
             <button

modules/backend/widgets/Search.php

@@ -19,12 +19,17 @@ class Search extends WidgetBase
     public $defaultAlias = 'search';
 
     /**
-     * @var string Search placeholder text
+     * @var string Search placeholder text.
      */
     public $placeholder;
 
     /**
-     * @var string Active search term pulled from session data
+     * @var bool Field show grow when selected.
+     */
+    public $growable = true;
+
+    /**
+     * @var string Active search term pulled from session data.
      */
     public $activeTerm;
 
@@ -33,6 +38,11 @@ class Search extends WidgetBase
      */
     public $customPartial;
 
+    /**
+     * @var array List of CSS classes to apply to the list container element.
+     */
+    public $cssClasses = [];
+
     /**
      * Constructor.
      */
@@ -48,6 +58,17 @@ class Search extends WidgetBase
 
         if (isset($this->config->partial))
             $this->customPartial = $this->config->partial;
+
+        if (isset($this->config->growable))
+            $this->growable = $this->config->growable;
+
+        /*
+         * Add CSS class styles
+         */
+        $this->cssClasses[] = 'icon search';
+
+        if ($this->growable)
+            $this->cssClasses[] = 'growable';
     }
 
     /**
@@ -68,6 +89,7 @@ class Search extends WidgetBase
      */
     public function prepareVars()
     {
+        $this->vars['cssClasses'] = implode(' ', $this->cssClasses);
         $this->vars['placeholder'] = $this->placeholder;
         $this->vars['value'] = $this->getActiveTerm();
     }
@@ -80,11 +102,7 @@ class Search extends WidgetBase
         /*
          * Save or reset search term in session
          */
-        $term = post('term');
-        if (strlen($term))
-            $this->putSession('term', $term);
-        else
-            $this->resetSession();
+        $this->setActiveTerm(post('term'));
 
         /*
          * Trigger class event, merge results as viewable array
@@ -101,4 +119,17 @@ class Search extends WidgetBase
     {
         return $this->activeTerm = $this->getSession('term', '');
     }
+
+    /**
+     * Sets an active search term for this widget instance.
+     */
+    public function setActiveTerm($term)
+    {
+        if (strlen($term))
+            $this->putSession('term', $term);
+        else
+            $this->resetSession();
+
+        $this->activeTerm = $term;
+    }
 }

modules/backend/widgets/search/partials/_search.htm

@@ -10,7 +10,7 @@
             data-track-input
             data-load-indicator
             data-load-indicator-opaque
-            class="form-control icon search growable"
+            class="form-control <?= $cssClasses ?>"
             autocomplete="off" />
     </div>