From 33e37261b2e8a16404efb68467eb27eea7e42ac7 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Wed, 1 Nov 2023 16:27:52 +0000
Subject: [PATCH] Use fieldState

---
 .../client/src/components/app/forms/AttachmentField.svelte   | 4 +++-
 packages/client/src/components/app/forms/BooleanField.svelte | 3 ++-
 .../client/src/components/app/forms/CodeScannerField.svelte  | 4 +++-
 .../client/src/components/app/forms/DateTimeField.svelte     | 3 ++-
 packages/client/src/components/app/forms/Field.svelte        | 2 ++
 packages/client/src/components/app/forms/Form.svelte         | 4 +++-
 packages/client/src/components/app/forms/InnerForm.svelte    | 3 +++
 packages/client/src/components/app/forms/JSONField.svelte    | 3 ++-
 .../client/src/components/app/forms/LongFormField.svelte     | 5 +++--
 .../client/src/components/app/forms/MultiFieldSelect.svelte  | 5 +++--
 packages/client/src/components/app/forms/OptionsField.svelte | 5 +++--
 .../client/src/components/app/forms/RelationshipField.svelte | 3 ++-
 packages/client/src/components/app/forms/StringField.svelte  | 5 +++--
 13 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index e24115ebc0..861d881733 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -6,6 +6,7 @@
   export let field
   export let label
   export let disabled = false
+  export let readonly = false
   export let compact = false
   export let validation
   export let extensions
@@ -71,6 +72,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   type="attachment"
   bind:fieldState
@@ -81,7 +83,7 @@
     {#if fieldState}
       <CoreDropzone
         value={fieldState.value}
-        disabled={fieldState.disabled}
+        disabled={fieldState.disabled || fieldState.readonly}
         error={fieldState.error}
         on:change={handleChange}
         {processFiles}
diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index 9635a7d7b5..1f59ddcfa6 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -40,6 +40,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   defaultValue={isTruthy(defaultValue)}
   type="boolean"
@@ -50,7 +51,7 @@
     <CoreCheckbox
       value={fieldState.value}
       disabled={fieldState.disabled}
-      {readonly}
+      readonly={fieldState.readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
       {size}
diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte
index c408f78d7c..a9c115e852 100644
--- a/packages/client/src/components/app/forms/CodeScannerField.svelte
+++ b/packages/client/src/components/app/forms/CodeScannerField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let type = "barcodeqr"
   export let disabled = false
+  export let readonly = false
   export let validation
   export let defaultValue = ""
   export let onChange
@@ -32,6 +33,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   {type}
@@ -42,7 +44,7 @@
     <CodeScanner
       value={fieldState.value}
       on:change={handleUpdate}
-      disabled={fieldState.disabled}
+      disabled={fieldState.disabled || fieldState.readonly}
       {allowManualEntry}
       scanButtonText={scanText}
       {beepOnScan}
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 8124c7861a..22a76e5ef2 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -30,6 +30,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   type="datetime"
@@ -41,7 +42,7 @@
       value={fieldState.value}
       on:change={handleChange}
       disabled={fieldState.disabled}
-      {readonly}
+      readonly={fieldState.readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
       appendTo={document.getElementById("flatpickr-root")}
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 5d4da5afef..16115583a7 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -11,6 +11,7 @@
   export let defaultValue
   export let type
   export let disabled = false
+  export let readonly = false
   export let validation
 
   // Get contexts
@@ -29,6 +30,7 @@
     type,
     defaultValue,
     disabled,
+    readonly,
     validation,
     formStep
   )
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 87883fe4b6..1a740585f3 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -8,6 +8,7 @@
   export let theme
   export let size
   export let disabled = false
+  export let readonly = false
   export let actionType = "Create"
   export let initialFormStep = 1
 
@@ -39,7 +40,7 @@
   $: schemaKey = generateSchemaKey(schema)
   $: initialValues = getInitialValues(actionType, dataSource, $context)
   $: resetKey = Helpers.hashString(
-    schemaKey + JSON.stringify(initialValues) + disabled
+    schemaKey + JSON.stringify(initialValues) + disabled + readonly
   )
 
   // Returns the closes data context which isn't a built in context
@@ -97,6 +98,7 @@
       {theme}
       {size}
       {disabled}
+      {readonly}
       {actionType}
       {schema}
       {table}
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 4dacf36244..6ebe9de7ec 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -6,6 +6,7 @@
 
   export let dataSource
   export let disabled = false
+  export let readonly = false
   export let initialValues
   export let size
   export let schema
@@ -148,6 +149,7 @@
       type,
       defaultValue = null,
       fieldDisabled = false,
+      fieldReadOnly = false,
       validationRules,
       step = 1
     ) => {
@@ -205,6 +207,7 @@
           error: initialError,
           disabled:
             disabled || fieldDisabled || (isAutoColumn && !editAutoColumns),
+          readonly: readonly || fieldReadOnly,
           defaultValue,
           validator,
           lastUpdate: Date.now(),
diff --git a/packages/client/src/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index 1ee09c8460..cf96f54a23 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -49,6 +49,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   type="json"
@@ -61,7 +62,7 @@
         value={serialiseValue(fieldState.value)}
         on:change={handleChange}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 8482a6a68e..a9087a0a9c 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -59,6 +59,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   type="longform"
@@ -72,7 +73,7 @@
         value={fieldState.value}
         on:change={handleChange}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}
@@ -90,7 +91,7 @@
         value={fieldState.value}
         on:change={handleChange}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index cb4879f86e..4ee691061a 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -56,6 +56,7 @@
   {field}
   {label}
   {disabled}
+  {readonly}
   {validation}
   defaultValue={expandedDefaultValue}
   type="array"
@@ -72,7 +73,7 @@
         getOptionValue={flatOptions ? x => x : x => x.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         on:change={handleChange}
         {placeholder}
         {options}
@@ -83,7 +84,7 @@
         value={fieldState.value || []}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         {options}
         {direction}
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index c01827471a..dc18df8dbe 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -46,6 +46,7 @@
   {field}
   {label}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   type="options"
@@ -59,7 +60,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         {options}
         {placeholder}
@@ -74,7 +75,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
-        {readonly}
+        readonly={fieldState.readonly}
         error={fieldState.error}
         {options}
         {direction}
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 9d2d6adf0f..10fcaa904f 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -184,6 +184,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   defaultValue={expandedDefaultValue}
   {type}
@@ -201,7 +202,7 @@
       on:loadMore={loadMore}
       id={fieldState.fieldId}
       disabled={fieldState.disabled}
-      {readonly}
+      readonly={fieldState.readonly}
       error={fieldState.error}
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index 624611c733..674be9f1b2 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -7,11 +7,11 @@
   export let placeholder
   export let type = "text"
   export let disabled = false
+  export let readonly = false
   export let validation
   export let defaultValue = ""
   export let align
   export let onChange
-  export let readonly = false
 
   let fieldState
   let fieldApi
@@ -28,6 +28,7 @@
   {label}
   {field}
   {disabled}
+  {readonly}
   {validation}
   {defaultValue}
   type={type === "number" ? "number" : "string"}
@@ -40,12 +41,12 @@
       value={fieldState.value}
       on:change={handleChange}
       disabled={fieldState.disabled}
+      readonly={fieldState.readonly}
       error={fieldState.error}
       id={fieldState.fieldId}
       {placeholder}
       {type}
       {align}
-      {readonly}
     />
   {/if}
 </Field>