Afform - Allow search range by postal code
authorColeman Watts <coleman@civicrm.org>
Mon, 5 Apr 2021 21:22:46 +0000 (17:22 -0400)
committerColeman Watts <coleman@civicrm.org>
Mon, 5 Apr 2021 21:22:46 +0000 (17:22 -0400)
Search display forms only allow numeric fields to be a search range,
but postal code is an exception (it's stored as a string but is numeric in some locales)

ext/afform/admin/ang/afGuiEditor/elements/afGuiField.component.js
ext/afform/admin/ang/afGuiEditor/inputType/Text.html
ext/afform/core/ang/af/fields/Text.html

index b9f5aa8eb55e73590894c1a32d6f0d6963b2670e..325f3bb3daa31598ab4aa375b5f64710c4ecd855 100644 (file)
       };
 
       this.canBeRange = function() {
+        // Range search only makes sense for search display forms
         return this.isSearch() &&
-          !ctrl.getDefn().input_attrs.multiple &&
-          _.includes(['Date', 'Timestamp', 'Integer', 'Float'], ctrl.getDefn().data_type) &&
-          _.includes(['Date', 'Number', 'Select'], $scope.getProp('input_type'));
+          // Hack for postal code which is not stored as a number but can act like one
+          (ctrl.node.name.substr(-11) === 'postal_code' || (
+            // Multiselects cannot use range search
+            !ctrl.getDefn().input_attrs.multiple &&
+            // DataType & inputType must make sense for a range
+            _.includes(['Date', 'Timestamp', 'Integer', 'Float'], ctrl.getDefn().data_type) &&
+            _.includes(['Date', 'Number', 'Select'], $scope.getProp('input_type'))
+        ));
       };
 
       this.canBeMultiple = function() {
index f65172c3d0e5cd070896749bb3d6241ec814c724..5a3192f35ae07bdf2e34bb8c13af79324a3a320c 100644 (file)
@@ -1 +1,6 @@
-<input autocomplete="off" class="form-control" ng-model="getSet('input_attrs.placeholder')" ng-model-options="{getterSetter: true}" type="text" title="{{:: ts('Click to add placeholder text') }}" />
+<div class="form-inline">
+  <div class="form-group" ng-repeat="i in $ctrl.getRangeElements('Text')">
+    <span class="af-field-range-sep" ng-if="i">-</span>
+    <input autocomplete="off" class="form-control" ng-model="getSet('input_attrs.placeholder' + i)" ng-model-options="{getterSetter: true}" type="text" title="{{:: ts('Click to add placeholder text') }}"/>
+  </div>
+</div>
index 7b3982482ce238c8881760af1ce755df6aa7da18..862fa07322d2f04b185786b32754899a774a4a6e 100644 (file)
@@ -1 +1,6 @@
-<input class="form-control" type="text" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
+<input ng-if=":: !$ctrl.defn.search_range" class="form-control" type="text" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
+<div ng-if=":: $ctrl.defn.search_range" class="form-inline">
+  <input class="form-control" type="text" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['>=']" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
+  <span class="af-field-range-sep">-</span>
+  <input class="form-control" type="text" id="{{:: fieldId }}2" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['<=']" placeholder="{{:: $ctrl.defn.input_attrs.placeholder2 }}" >
+</div>