Use fieldState

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}

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}

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}

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")}

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
   )

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}

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(),

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}

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}

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}

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}

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}

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>