From ebd3b26be049935261e20223a52081437c977f53 Mon Sep 17 00:00:00 2001
From: chrisala <chris.godwin.ala@gmail.com>
Date: Fri, 12 Jan 2024 17:15:31 +1100
Subject: [PATCH] Implemented readonly support for date and selectOne types
 #225

---
 .../javascripts/forms-knockout-bindings.js     | 18 ++++++++++++++++++
 .../assets/javascripts/knockout-dates.js       | 10 ++++++++--
 .../forms/EditModelWidgetRenderer.groovy       |  3 +++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/grails-app/assets/javascripts/forms-knockout-bindings.js b/grails-app/assets/javascripts/forms-knockout-bindings.js
index fab0809..82107c3 100644
--- a/grails-app/assets/javascripts/forms-knockout-bindings.js
+++ b/grails-app/assets/javascripts/forms-knockout-bindings.js
@@ -1252,5 +1252,23 @@
         }
     };
 
+    ko.bindingHandlers['disableClick'] = {
+        'update': function (element, valueAccessor) {
+            var value = ko.utils.unwrapObservable(valueAccessor());
+            if (value) {
+                this.eventHandler = $(element).on('mousedown.disableClick keydown.disableClick touchstart.disableClick', function(e) {
+                    e.preventDefault();
+                    return false;
+                });
+            }
+            else {
+                if (this.eventHandler) {
+                    $(element).off('mousedown.disableClick keydown.disableClick touchstart.disableClick');
+                }
+            }
+
+        }
+    };
+
 })();
 
diff --git a/grails-app/assets/javascripts/knockout-dates.js b/grails-app/assets/javascripts/knockout-dates.js
index e990240..16aeffb 100644
--- a/grails-app/assets/javascripts/knockout-dates.js
+++ b/grails-app/assets/javascripts/knockout-dates.js
@@ -18,16 +18,22 @@
                 $element.data('date', initialDateStr);
             }
 
-            var defaults = {format: 'dd-mm-yyyy', autoclose: true};
+            var defaults = {format: 'dd-mm-yyyy', autoclose: true, enableOnReadonly: false};
             var options = _.defaults(allBindingsAccessor().datepickerOptions || {}, defaults);
 
+            $element.click(function() {
+                if ($element.prop('disabled') && $element.prop('readonly')) {
+                    e.preventDefault();
+                }
+            });
+
             //initialize datepicker with some optional options
             $element.datepicker(options);
 
             // if the parent container holds any element with the class 'open-datepicker'
             // then add a hook to do so
             $element.parent().find('.open-datepicker').click(function () {
-                if (!$element.prop('disabled')) {
+                if (!$element.prop('disabled') && !$element.prop('readonly')) {
                     $element.datepicker('show');
                 }
             });
diff --git a/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy b/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
index 39cd4a8..2a9e5df 100644
--- a/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
+++ b/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
@@ -116,6 +116,9 @@ public class EditModelWidgetRenderer implements ModelWidgetRenderer {
 
         context.databindAttrs.add 'optionsCaption', '"Please select"'
         context.attributes.addSpan("form-control form-control-sm")
+        if (isReadOnly(context)) { // HTML Select elements don't support the readonly attribute so we add disabled.  This will break validation though.
+            context.databindAttrs.add('disableClick', 'true')
+        }
 
         context.writer <<  "<select${context.attributes.toString()} class=\"select form-control form-control-sm\" data-bind='${context.databindAttrs.toString()}'${context.validationAttr}></select>"
     }