From 0a8585da63db7170f53e2dd2aac921d1aa537c52 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 5 Apr 2021 17:22:46 -0400
Subject: [PATCH] Afform - Allow search range by postal code

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)
---
 .../ang/afGuiEditor/elements/afGuiField.component.js | 12 +++++++++---
 ext/afform/admin/ang/afGuiEditor/inputType/Text.html |  7 ++++++-
 ext/afform/core/ang/af/fields/Text.html              |  7 ++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.component.js
index b9f5aa8eb5..325f3bb3da 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.component.js
@@ -37,10 +37,16 @@
       };
 
       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() {
diff --git a/ext/afform/admin/ang/afGuiEditor/inputType/Text.html b/ext/afform/admin/ang/afGuiEditor/inputType/Text.html
index f65172c3d0..5a3192f35a 100644
--- a/ext/afform/admin/ang/afGuiEditor/inputType/Text.html
+++ b/ext/afform/admin/ang/afGuiEditor/inputType/Text.html
@@ -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>
diff --git a/ext/afform/core/ang/af/fields/Text.html b/ext/afform/core/ang/af/fields/Text.html
index 7b3982482c..862fa07322 100644
--- a/ext/afform/core/ang/af/fields/Text.html
+++ b/ext/afform/core/ang/af/fields/Text.html
@@ -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>
-- 
2.25.1