From fa0767e90a591770ed1ea4d4c67360c97cbf9c68 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 22 Nov 2023 17:50:56 +0530
Subject: [PATCH] fix: handle different fieldtypes in Section Fields component

---
 crm/api/doc.py                            |  6 ++
 crm/fcrm/doctype/crm_deal/crm_deal.json   |  4 +-
 frontend/src/components/SectionFields.vue | 71 ++++++++++++++++-------
 frontend/src/pages/Deal.vue               | 23 --------
 frontend/src/pages/Lead.vue               | 24 --------
 5 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index e09fd90e..4150aaa0 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -172,6 +172,12 @@ def get_type(field):
 		return "phone"
 	elif field.fieldtype == "Data" and field.options == "Email":
 		return "email"
+	elif field.fieldtype == "Check":
+		return "checkbox"
+	elif field.fieldtype == "Int":
+		return "number"
+	elif field.fieldtype in ["Small Text", "Text", "Long Text"]:
+		return "textarea"
 	elif field.read_only:
 		return "read_only"
 	return field.fieldtype.lower()
\ No newline at end of file
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.json b/crm/fcrm/doctype/crm_deal/crm_deal.json
index 1cc608fc..8e75e2b2 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.json
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.json
@@ -40,7 +40,7 @@
   {
    "fetch_from": "organization.annual_revenue",
    "fieldname": "annual_revenue",
-   "fieldtype": "Int",
+   "fieldtype": "Currency",
    "label": "Amount",
    "read_only": 1
   },
@@ -136,7 +136,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-22 13:26:52.401192",
+ "modified": "2023-11-22 17:52:31.595525",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",
diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index d0c2ec27..12d6dbd0 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-1.5">
+  <div class="flex flex-col gap-1.5 max-h-[300px] overflow-y-auto">
     <div
       v-for="field in fields"
       :key="field.label"
@@ -8,15 +8,24 @@
       <div class="w-[106px] shrink-0 text-gray-600">
         {{ field.label }}
       </div>
-      <div class="flex-1 overflow-hidden">
-        <Link
-          v-if="field.type === 'link'"
+      <div class="grid flex-1 items-center overflow-hidden min-h-[28px]">
+        <FormControl
+          v-if="
+            [
+              'email',
+              'number',
+              'date',
+              'password',
+              'textarea',
+              'checkbox',
+            ].includes(field.type)
+          "
           class="form-control"
+          :type="field.type"
           :value="data[field.name]"
-          :doctype="field.doctype"
           :placeholder="field.placeholder"
-          @change="(data) => emit('update', field.name, data)"
-          :onCreate="field.create"
+          :debounce="500"
+          @change.stop="emit('update', field.name, $event.target.value)"
         />
         <FormControl
           v-else-if="field.type === 'select'"
@@ -27,21 +36,14 @@
           :debounce="500"
           @change.stop="emit('update', field.name, $event.target.value)"
         />
-        <FormControl
-          v-else-if="field.type === 'email'"
+        <Link
+          v-else-if="field.type === 'link'"
           class="form-control"
-          type="email"
           :value="data[field.name]"
-          :debounce="500"
-          @change.stop="emit('update', field.name, $event.target.value)"
-        />
-        <FormControl
-          v-else-if="field.type === 'date'"
-          class="form-control"
-          type="date"
-          :value="data[field.name]"
-          :debounce="500"
-          @change.stop="emit('update', field.name, $event.target.value)"
+          :doctype="field.doctype"
+          :placeholder="field.placeholder"
+          @change="(data) => emit('update', field.name, data)"
+          :onCreate="field.create"
         />
         <Tooltip
           v-else-if="field.type === 'read_only'"
@@ -86,3 +88,32 @@ const emit = defineEmits(['update'])
 
 const data = defineModel()
 </script>
+
+<style scoped>
+:deep(.form-control input:not([type='checkbox'])),
+:deep(.form-control select),
+:deep(.form-control textarea),
+:deep(.form-control button) {
+  border-color: transparent;
+  background: white;
+}
+
+:deep(.form-control button) {
+  gap: 0;
+}
+:deep(.form-control [type='checkbox']) {
+  margin-left: 9px;
+  cursor: pointer;
+}
+
+:deep(.form-control button > div) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.form-control button svg) {
+  color: white;
+  width: 0;
+}
+</style>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 4a04d889..c4a027a4 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -516,26 +516,3 @@ function updateField(name, value, callback) {
   })
 }
 </script>
-
-<style scoped>
-:deep(.form-control input),
-:deep(.form-control button) {
-  border-color: transparent;
-  background: white;
-}
-
-:deep(.form-control button) {
-  gap: 0;
-}
-
-:deep(.form-control button > div) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep(.form-control button svg) {
-  color: white;
-  width: 0;
-}
-</style>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 92da3b37..82176221 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -357,27 +357,3 @@ function updateField(name, value, callback) {
   })
 }
 </script>
-
-<style scoped>
-:deep(.form-control input),
-:deep(.form-control select),
-:deep(.form-control button) {
-  border-color: transparent;
-  background: white;
-}
-
-:deep(.form-control button) {
-  gap: 0;
-}
-
-:deep(.form-control button > div) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep(.form-control button svg) {
-  color: white;
-  width: 0;
-}
-</style>