fix: handle different fieldtypes in Section Fields component

frappe · Nov 22, 2023 · fa0767e · fa0767e
1 parent 267f42a
commit fa0767e
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 69 deletions.
diff --git 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()
diff --git 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
@@ -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'"
-          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'"
+        <Link
+          v-else-if="field.type === 'link'"
           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
@@ -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
@@ -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>