From 84caa76e86703f22c036737e0caf36577a23d41f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 25 Jan 2024 22:27:48 +0530
Subject: [PATCH] fix: show disabled checkbox if it is read only field

---
 frontend/src/components/SectionFields.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 6f0f7d7f..52e97b9d 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -14,22 +14,25 @@
         class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
       >
         <Tooltip
-          v-if="field.read_only"
+          v-if="field.read_only && field.type !== 'checkbox'"
           class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
           :text="field.tooltip"
         >
           {{ data[field.name] }}
         </Tooltip>
+        <FormControl
+          v-else-if="field.type == 'checkbox'"
+          class="form-control"
+          :type="field.type"
+          v-model="data[field.name]"
+          @change.stop="emit('update', field.name, $event.target.checked)"
+          :disabled="Boolean(field.read_only)"
+        />
         <FormControl
           v-else-if="
-            [
-              'email',
-              'number',
-              'date',
-              'password',
-              'textarea',
-              'checkbox',
-            ].includes(field.type)
+            ['email', 'number', 'date', 'password', 'textarea'].includes(
+              field.type
+            )
           "
           class="form-control"
           :class="{