Merge pull request #19 from Wtower/callback-functions

Callback functions
Wtower · Dec 21, 2016 · ac3c72b · ac3c72b
2 parents 845d84a + 86cf059
commit ac3c72b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 3 deletions.
diff --git a/docs/form-field-text.rst b/docs/form-field-text.rst
@@ -20,11 +20,13 @@ Binding reference
 - ``field-pattern``: A regular expression **without surrounding slashes** to test the input validity against.
   Combine with ``field-form`` and ``field-name`` to allow Angular to validate (string)
 - ``field-alert``: The text to display if the field is invalid. Requires ``field-form`` and ``field-name`` (string)
+- ``field-model-options``: Additional `ng-model-options`_ to pass to the field (object)
 - ``field-value``: A controller variable to return the ``ng-model`` input value (variable)
 - ``on-change``: A callback function to call if value changes (function)
 
 .. _HTML input type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 .. _Angular form: https://docs.angularjs.org/guide/forms
+.. _ng-model-options: https://docs.angularjs.org/api/ng/directive/ngModelOptions
 
 Controller
 ----------

diff --git a/docs/ga-panel.rst b/docs/ga-panel.rst
@@ -13,6 +13,10 @@ Binding reference
 - ``panel-query``: Whether to show a small input text box usually for filtering (boolean)
 - ``panel-query-string``: A controller variable to hold the ``panel-query`` input (variable)
 - ``panel-add-record-url``: A url to direct for adding a record. If provided a + icon will be available (string)
+- ``panel-query-model-options``: Additional `ng-model-options`_ to pass to the query field (object)
+- ``on-query-change``: A callback function to call if query value changes (function)
+
+.. _ng-model-options: https://docs.angularjs.org/api/ng/directive/ngModelOptions
 
 Transclude
 ----------
@@ -27,13 +31,16 @@ The component will initiate the necessary jquery required by gentelella as well.
 Code sample
 -----------
 
+Using simple filter
+^^^^^^^^^^^^^^^^^^^
+
 Template:
 
 ::
 
   <ga-panel panel-title="Products"
             panel-query="true"
-            panel-query-string="$ctrl.query"
+            panel-query-string="$ctrl.queryValue"
             panel-add-record-url="#!/products/add">
     <table class="table table-hover dataTable">
       <thead>
@@ -43,7 +50,7 @@ Template:
       </tr>
       </thead>
       <tbody>
-      <tr ng-repeat="product in $ctrl.products | filter:$ctrl.query">
+      <tr ng-repeat="product in $ctrl.products | filter:$ctrl.queryValue">
         <th scope="row"><a href="#!/products/{{ product._id }}">{{ $index + 1 }}</a></th>
         <td><a href="#!/products/{{ product._id }}">{{ product.name }}</a></td>
       </tr>
@@ -54,3 +61,32 @@ Template:
 Reference_
 
 .. _Reference: https://github.com/Wtower/generator-makrina/blob/master/generators/angular-component-list/templates/_object-name_-list.template.html
+
+Using callback function
+^^^^^^^^^^^^^^^^^^^^^^^
+
+Template:
+
+::
+
+  <ga-panel panel-title="Products"
+            panel-query="true"
+            panel-query-string="$ctrl.queryValue"
+            panel-query-model-options="{debounce: 1000}"
+            on-query-change="$ctrl.filter(queryValue)"
+            panel-add-record-url="#!/products/add">
+    <table class="table table-hover dataTable">
+      <thead>
+      <tr>
+        <th>#</th>
+        <th>Name</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr ng-repeat="product in $ctrl.products">
+        <th scope="row"><a href="#!/products/{{ product._id }}">{{ $index + 1 }}</a></th>
+        <td><a href="#!/products/{{ product._id }}">{{ product.name }}</a></td>
+      </tr>
+      </tbody>
+    </table>
+  </ga-panel>
diff --git a/gentelella/form-field-text/form-field-text.component.js b/gentelella/form-field-text/form-field-text.component.js
@@ -20,6 +20,7 @@ angular
       fieldForm: '=',
       fieldPattern: '@',
       fieldAlert: '@',
+      fieldModelOptions: '<',
       onChange: '&',
       fieldValue: '='
     },

diff --git a/gentelella/form-field-text/form-field-text.template.html b/gentelella/form-field-text/form-field-text.template.html
@@ -13,7 +13,8 @@
            ng-required="$ctrl.fieldRequired"
            ng-pattern="$ctrl.pattern"
            ng-change="$ctrl.onChange()"
-           ng-model="$ctrl.fieldValue">
+           ng-model="$ctrl.fieldValue"
+           ng-model-options="$ctrl.fieldModelOptions">
   </div>
   <div ng-if="$ctrl.fieldAlert" class="alert">{{ $ctrl.fieldAlert }}</div>
 </div>
diff --git a/gentelella/ga-panel/ga-panel.component.js b/gentelella/ga-panel/ga-panel.component.js
@@ -13,6 +13,8 @@ angular
       panelSubTitle: '@',
       panelQuery: '@',
       panelQueryString: '=',
+      panelQueryModelOptions: '<',
+      onQueryChange: '&',
       panelAddRecordUrl: '@'
     },
     transclude: true,

diff --git a/gentelella/ga-panel/ga-panel.template.html b/gentelella/ga-panel/ga-panel.template.html
@@ -7,6 +7,8 @@ <h2>{{ $ctrl.panelTitle }} <small ng-if="$ctrl.panelSubTitle">{{ $ctrl.panelSubT
                class="form-control input-sm"
                placeholder="Search"
                ng-model="$ctrl.panelQueryString"
+               ng-model-options="$ctrl.panelQueryModelOptions"
+               ng-change="$ctrl.onQueryChange({queryValue: $ctrl.panelQueryString})"
                aria-controls="datatable">
       </li>
       <li ng-if="$ctrl.panelAddRecordUrl">