From 56d5a0b8f6fbc0e265bdc0068f253d601d56c62a Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Wed, 1 Nov 2023 16:01:45 +0000
Subject: [PATCH] Further read only settings

---
 packages/bbui/src/Form/Core/Checkbox.svelte   |  6 ++
 packages/bbui/src/Form/Core/DatePicker.svelte |  4 +-
 packages/bbui/src/Form/DatePicker.svelte      |  2 +
 packages/client/manifest.json                 | 57 ++++++++++++++++++-
 .../components/app/forms/BooleanField.svelte  |  2 +
 .../components/app/forms/DateTimeField.svelte |  2 +
 .../src/components/app/forms/JSONField.svelte |  2 +
 .../app/forms/RelationshipField.svelte        |  2 +
 8 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index 3efc737bfb..3eaaf4dede 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -8,6 +8,7 @@
   export let id = null
   export let text = null
   export let disabled = false
+  export let readonly = false
   export let size
   export let indeterminate = false
 
@@ -29,6 +30,11 @@
     checked={value}
     {disabled}
     on:change={onChange}
+    on:click={e => {
+      if (readonly) {
+        e.preventDefault()
+      }
+    }}
     type="checkbox"
     class="spectrum-Checkbox-input"
     {id}
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 7ce15292be..786aee40b6 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -9,6 +9,7 @@
 
   export let id = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let enableTime = true
   export let value = null
@@ -186,7 +187,7 @@
   >
     <div
       id={flatpickrId}
-      class:is-disabled={disabled}
+      class:is-disabled={disabled || readonly}
       class:is-invalid={!!error}
       class="flatpickr spectrum-InputGroup spectrum-Datepicker"
       class:is-focused={open}
@@ -211,6 +212,7 @@
         {/if}
         <input
           {disabled}
+          {readonly}
           data-input
           type="text"
           class="spectrum-Textfield-input spectrum-InputGroup-input"
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 04ce8b5467..f17871a576 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -7,6 +7,7 @@
   export let label = null
   export let labelPosition = "above"
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let enableTime = true
   export let timeOnly = false
@@ -33,6 +34,7 @@
   <DatePicker
     {error}
     {disabled}
+    {readonly}
     {value}
     {placeholder}
     {enableTime}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 90c897139c..7559825267 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2851,6 +2851,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "validation/number",
         "label": "Validation",
@@ -3392,6 +3403,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "validation/boolean",
         "label": "Validation",
@@ -3563,6 +3585,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "validation/datetime",
         "label": "Validation",
@@ -3836,7 +3869,7 @@
       },
       {
         "type": "boolean",
-        "label": "Disabled",
+        "label": "Read only",
         "key": "disabled",
         "defaultValue": false
       },
@@ -3912,6 +3945,17 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
       }
     ]
   },
@@ -3964,6 +4008,17 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
       }
     ]
   },
diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index a65d041c29..9635a7d7b5 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let text
   export let disabled = false
+  export let readonly = false
   export let size
   export let validation
   export let defaultValue
@@ -49,6 +50,7 @@
     <CoreCheckbox
       value={fieldState.value}
       disabled={fieldState.disabled}
+      {readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
       {size}
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 6bcd20d250..8124c7861a 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let enableTime = true
   export let timeOnly = false
   export let time24hr = false
@@ -40,6 +41,7 @@
       value={fieldState.value}
       on:change={handleChange}
       disabled={fieldState.disabled}
+      {readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
       appendTo={document.getElementById("flatpickr-root")}
diff --git a/packages/client/src/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index c80060d3d6..1ee09c8460 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -7,6 +7,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let defaultValue = ""
   export let onChange
 
@@ -60,6 +61,7 @@
         value={serialiseValue(fieldState.value)}
         on:change={handleChange}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 544a1a8434..9d2d6adf0f 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -11,6 +11,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let validation
   export let autocomplete = true
   export let defaultValue
@@ -200,6 +201,7 @@
       on:loadMore={loadMore}
       id={fieldState.fieldId}
       disabled={fieldState.disabled}
+      {readonly}
       error={fieldState.error}
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}