fix: moved dropdown component from Fields to section fields for contact page

frontend/src/components/DropdownItem.vue

@@ -15,6 +15,14 @@
       />
 
       <div class="actions flex items-center justify-center">
+        <Button
+          v-if="editMode"
+          variant="ghost"
+          :label="__('Save')"
+          size="sm"
+          class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+          @click="saveOption"
+        />
         <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
           <div>
             <Button
@@ -27,7 +35,7 @@
             </Button>
           </div>
         </Tooltip>
-        <Tooltip text="Edit">
+        <Tooltip v-if="!editMode" text="Edit">
           <div>
             <Button
               variant="ghost"
@@ -93,7 +101,8 @@ const toggleEditMode = () => {
   editMode.value && nextTick(() => inputRef.value.el.focus())
 }
 
-const saveOption = () => {
+const saveOption = (e) => {
+  if (!e.target.value) return
   toggleEditMode()
   props.option.onSave(props.option, isNew.value)
   isNew.value = false

frontend/src/components/Fields.vue

@@ -130,55 +130,6 @@
                 </Tooltip>
               </template>
             </Link>
-            <div v-else-if="field.type === 'Dropdown'">
-              <NestedPopover>
-                <template #target="{ open }">
-                  <Button
-                    :label="data[field.name]"
-                    class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
-                  >
-                    <div class="truncate">{{ data[field.name] }}</div>
-                    <template #suffix>
-                      <FeatherIcon
-                        :name="open ? 'chevron-up' : 'chevron-down'"
-                        class="h-4 text-gray-600"
-                      />
-                    </template>
-                  </Button>
-                </template>
-                <template #body>
-                  <div
-                    class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
-                  >
-                    <div>
-                      <DropdownItem
-                        v-if="field.options?.length"
-                        v-for="option in field.options"
-                        :key="option.name"
-                        :option="option"
-                      />
-                      <div v-else>
-                        <div class="p-1.5 px-7 text-base text-gray-500">
-                          {{ __('No {0} Available', [field.label]) }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="pt-1.5">
-                      <Button
-                        variant="ghost"
-                        class="w-full !justify-start"
-                        :label="__('Create New')"
-                        @click="field.create()"
-                      >
-                        <template #prefix>
-                          <FeatherIcon name="plus" class="h-4" />
-                        </template>
-                      </Button>
-                    </div>
-                  </div>
-                </template>
-              </NestedPopover>
-            </div>
             <DateTimePicker
               v-else-if="field.type === 'Datetime'"
               v-model="data[field.name]"
@@ -221,8 +172,6 @@
 
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
-import DropdownItem from '@/components/DropdownItem.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'

frontend/src/components/Modals/ContactModal.vue

@@ -97,7 +97,6 @@ import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
-import { createToast } from '@/utils'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -259,110 +258,7 @@ const filteredSections = computed(() => {
 
   allSections.forEach((s) => {
     s.fields.forEach((field) => {
-      if (field.name == 'email_id') {
+      if (field.name == 'address') {
-        field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
-        field.options =
-          props.contact.data?.email_ids?.map((email) => {
-            return {
-              name: email.name,
-              value: email.email_id,
-              selected: email.email_id === props.contact.data.email_id,
-              placeholder: 'john@doe.com',
-              onClick: () => {
-                _contact.value.email_id = email.email_id
-                setAsPrimary('email', email.email_id)
-              },
-              onSave: (option, isNew) => {
-                if (isNew) {
-                  createNew('email', option.value)
-                  if (props.contact.data.email_ids.length === 1) {
-                    _contact.value.email_id = option.value
-                  }
-                } else {
-                  editOption('Contact Email', option.name, 'email_id', option.value)
-                }
-              },
-              onDelete: async (option, isNew) => {
-                props.contact.data.email_ids =
-                  props.contact.data.email_ids.filter(
-                    (email) => email.name !== option.name,
-                  )
-                !isNew && (await deleteOption('Contact Email', option.name))
-                if (_contact.value.email_id === option.value) {
-                  if (props.contact.data.email_ids.length === 0) {
-                    _contact.value.email_id = ''
-                  } else {
-                    _contact.value.email_id = props.contact.data.email_ids.find(
-                      (email) => email.is_primary,
-                    )?.email_id
-                  }
-                }
-              },
-            }
-          }) || []
-        field.create = () => {
-          props.contact.data?.email_ids?.push({
-            name: 'new-1',
-            value: '',
-            selected: false,
-            isNew: true,
-          })
-        }
-      } else if (
-        field.name == 'mobile_no' ||
-        field.name == 'actual_mobile_no'
-      ) {
-        field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
-        field.name = 'actual_mobile_no'
-        field.options =
-          props.contact.data?.phone_nos?.map((phone) => {
-            return {
-              name: phone.name,
-              value: phone.phone,
-              selected: phone.phone === props.contact.data.actual_mobile_no,
-              onClick: () => {
-                _contact.value.actual_mobile_no = phone.phone
-                _contact.value.mobile_no = phone.phone
-                setAsPrimary('mobile_no', phone.phone)
-              },
-              onSave: (option, isNew) => {
-                if (isNew) {
-                  createNew('phone', option.value)
-                  if (props.contact.data.phone_nos.length === 1) {
-                    _contact.value.actual_mobile_no = option.value
-                  }
-                } else {
-                  editOption('Contact Phone', option.name, 'phone', option.value)
-                }
-              },
-              onDelete: async (option, isNew) => {
-                props.contact.data.phone_nos =
-                  props.contact.data.phone_nos.filter(
-                    (phone) => phone.name !== option.name,
-                  )
-                !isNew && (await deleteOption('Contact Phone', option.name))
-                if (_contact.value.actual_mobile_no === option.value) {
-                  if (props.contact.data.phone_nos.length === 0) {
-                    _contact.value.actual_mobile_no = ''
-                  } else {
-                    _contact.value.actual_mobile_no =
-                      props.contact.data.phone_nos.find(
-                        (phone) => phone.is_primary_mobile_no,
-                      )?.phone
-                  }
-                }
-              },
-            }
-          }) || []
-        field.create = () => {
-          props.contact.data?.phone_nos?.push({
-            name: 'new-1',
-            value: '',
-            selected: false,
-            isNew: true,
-          })
-        }
-      } else if (field.name == 'address') {
         field.create = (value, close) => {
           _contact.value.address = value
           _address.value = {}
@@ -383,68 +279,6 @@ const filteredSections = computed(() => {
   return allSections
 })
 
-async function setAsPrimary(field, value) {
-  let d = await call('crm.api.contact.set_as_primary', {
-    contact: props.contact.data.name,
-    field,
-    value,
-  })
-  if (d) {
-    props.contact.reload()
-    createToast({
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-green-600',
-    })
-  }
-}
-
-async function createNew(field, value) {
-  let d = await call('crm.api.contact.create_new', {
-    contact: props.contact.data.name,
-    field,
-    value,
-  })
-  if (d) {
-    props.contact.reload()
-    createToast({
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-green-600',
-    })
-  }
-}
-
-async function editOption(doctype, name, fieldname, value) {
-  let d = await call('frappe.client.set_value', {
-    doctype,
-    name,
-    fieldname,
-    value,
-  })
-  if (d) {
-    props.contact.reload()
-    createToast({
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-green-600',
-    })
-  }
-}
-
-async function deleteOption(doctype, name) {
-  await call('frappe.client.delete', {
-    doctype,
-    name,
-  })
-  await props.contact.reload()
-  createToast({
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-green-600',
-  })
-}
-
 const dirty = computed(() => {
   return JSON.stringify(props.contact.data) !== JSON.stringify(_contact.value)
 })

frontend/src/components/SectionFields.vue

@@ -19,13 +19,64 @@
         class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
       >
         <div
-          v-if="field.read_only && field.type !== 'checkbox'"
+          v-if="
+            field.read_only && !['checkbox', 'dropdown'].includes(field.type)
+          "
           class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
         >
           <Tooltip :text="__(field.tooltip)">
             <div>{{ data[field.name] }}</div>
           </Tooltip>
         </div>
+        <div v-else-if="field.type === 'dropdown'">
+          <NestedPopover>
+            <template #target="{ open }">
+              <Button
+                :label="data[field.name]"
+                class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+              >
+                <div class="truncate">{{ data[field.name] }}</div>
+                <template #suffix>
+                  <FeatherIcon
+                    :name="open ? 'chevron-up' : 'chevron-down'"
+                    class="h-4 text-gray-600"
+                  />
+                </template>
+              </Button>
+            </template>
+            <template #body>
+              <div
+                class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
+              >
+                <div>
+                  <DropdownItem
+                    v-if="field.options?.length"
+                    v-for="option in field.options"
+                    :key="option.name"
+                    :option="option"
+                  />
+                  <div v-else>
+                    <div class="p-1.5 px-7 text-base text-gray-500">
+                      {{ __('No {0} Available', [field.label]) }}
+                    </div>
+                  </div>
+                </div>
+                <div class="pt-1.5">
+                  <Button
+                    variant="ghost"
+                    class="w-full !justify-start"
+                    :label="__('Create New')"
+                    @click="field.create()"
+                  >
+                    <template #prefix>
+                      <FeatherIcon name="plus" class="h-4" />
+                    </template>
+                  </Button>
+                </div>
+              </div>
+            </template>
+          </NestedPopover>
+        </div>
         <FormControl
           v-else-if="field.type == 'checkbox'"
           class="form-control"
@@ -109,13 +160,21 @@
         class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
         @click="field.link(data[field.name])"
       />
+      <EditIcon
+        v-if="field.type === 'link' && field.edit && data[field.name]"
+        class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+        @click="field.edit(data[field.name])"
+      />
     </div>
   </FadedScrollableDiv>
 </template>
 
 <script setup>
+import NestedPopover from '@/components/NestedPopover.vue'
+import DropdownItem from '@/components/DropdownItem.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { usersStore } from '@/stores/users'
@@ -188,7 +247,8 @@ function evaluate(code, context = {}) {
 :deep(.form-control input:not([type='checkbox'])),
 :deep(.form-control select),
 :deep(.form-control textarea),
-:deep(.form-control button) {
+:deep(.form-control button),
+.dropdown-button {
   border-color: transparent;
   background: white;
 }

frontend/src/pages/Contact.vue

@@ -271,17 +271,12 @@
     doctype="Contact"
     @reload="() => fieldsLayout.reload()"
   />
-  <ContactModal
-    v-model="showContactModal"
-    v-model:quickEntry="showQuickEntryModal"
-    :contact="contact"
-    :options="{ detailMode }"
-  />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
     doctype="Contact"
   />
+  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
@@ -297,13 +292,14 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
-import ContactModal from '@/components/Modals/ContactModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import {
   dateFormat,
   dateTooltipFormat,
   timeAgo,
   formatNumberIntoCurrency,
+  createToast,
 } from '@/utils'
 import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global.js'
@@ -340,10 +336,13 @@ const props = defineProps({
 const route = useRoute()
 const router = useRouter()
 
+const showAddressModal = ref(false)
 const showSidePanelModal = ref(false)
 const showContactModal = ref(false)
 const showQuickEntryModal = ref(false)
 const detailMode = ref(false)
+const _contact = ref({})
+const _address = ref({})
 
 const contact = createResource({
   url: 'crm.api.contact.get_contact',
@@ -455,20 +454,226 @@ const rows = computed(() => {
   return deals.data.map((row) => getDealRowObject(row))
 })
 
-// const fieldsLayout = ref({
-//   data: {},
-// })
-
 const fieldsLayout = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
   cache: ['fieldsLayout', props.contactId],
   params: { doctype: 'Contact', name: props.contactId },
   auto: true,
-  // transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedFields(data),
 })
 
-function updateField(fieldname, value) {
+function getParsedFields(data) {
-  call('frappe.client.set_value', {
+  return data.map((section) => {
+    return {
+      ...section,
+      fields: computed(() =>
+        section.fields.map((field) => {
+          if (field.name === 'email_id') {
+            return {
+              ...field,
+              type: 'dropdown',
+              options:
+                contact.data?.email_ids?.map((email) => {
+                  return {
+                    name: email.name,
+                    value: email.email_id,
+                    selected: email.email_id === contact.data.email_id,
+                    placeholder: 'john@doe.com',
+                    onClick: () => {
+                      _contact.value.email_id = email.email_id
+                      setAsPrimary('email', email.email_id)
+                    },
+                    onSave: (option, isNew) => {
+                      if (isNew) {
+                        createNew('email', option.value)
+                        if (contact.data.email_ids.length === 1) {
+                          _contact.value.email_id = option.value
+                        }
+                      } else {
+                        editOption(
+                          'Contact Email',
+                          option.name,
+                          'email_id',
+                          option.value,
+                        )
+                      }
+                    },
+                    onDelete: async (option, isNew) => {
+                      contact.data.email_ids = contact.data.email_ids.filter(
+                        (email) => email.name !== option.name,
+                      )
+                      !isNew &&
+                        (await deleteOption('Contact Email', option.name))
+                      if (_contact.value.email_id === option.value) {
+                        if (contact.data.email_ids.length === 0) {
+                          _contact.value.email_id = ''
+                        } else {
+                          _contact.value.email_id = contact.data.email_ids.find(
+                            (email) => email.is_primary,
+                          )?.email_id
+                        }
+                      }
+                    },
+                  }
+                }) || [],
+              create: () => {
+                contact.data?.email_ids?.push({
+                  name: 'new-1',
+                  value: '',
+                  selected: false,
+                  isNew: true,
+                })
+              },
+            }
+          } else if (field.name === 'mobile_no') {
+            return {
+              ...field,
+              type: 'dropdown',
+              options:
+                contact.data?.phone_nos?.map((phone) => {
+                  return {
+                    name: phone.name,
+                    value: phone.phone,
+                    selected: phone.phone === contact.data.actual_mobile_no,
+                    onClick: () => {
+                      _contact.value.actual_mobile_no = phone.phone
+                      _contact.value.mobile_no = phone.phone
+                      setAsPrimary('mobile_no', phone.phone)
+                    },
+                    onSave: (option, isNew) => {
+                      if (isNew) {
+                        createNew('phone', option.value)
+                        if (contact.data.phone_nos.length === 1) {
+                          _contact.value.actual_mobile_no = option.value
+                        }
+                      } else {
+                        editOption(
+                          'Contact Phone',
+                          option.name,
+                          'phone',
+                          option.value,
+                        )
+                      }
+                    },
+                    onDelete: async (option, isNew) => {
+                      contact.data.phone_nos = contact.data.phone_nos.filter(
+                        (phone) => phone.name !== option.name,
+                      )
+                      !isNew &&
+                        (await deleteOption('Contact Phone', option.name))
+                      if (_contact.value.actual_mobile_no === option.value) {
+                        if (contact.data.phone_nos.length === 0) {
+                          _contact.value.actual_mobile_no = ''
+                        } else {
+                          _contact.value.actual_mobile_no =
+                            contact.data.phone_nos.find(
+                              (phone) => phone.is_primary_mobile_no,
+                            )?.phone
+                        }
+                      }
+                    },
+                  }
+                }) || [],
+              create: () => {
+                contact.data?.phone_nos?.push({
+                  name: 'new-1',
+                  value: '',
+                  selected: false,
+                  isNew: true,
+                })
+              },
+            }
+          } else if (field.name === 'address') {
+            return {
+              ...field,
+              create: (value, close) => {
+                _contact.value.address = value
+                _address.value = {}
+                showAddressModal.value = true
+                close()
+              },
+              edit: async (addr) => {
+                _address.value = await call('frappe.client.get', {
+                  doctype: 'Address',
+                  name: addr,
+                })
+                showAddressModal.value = true
+              },
+            }
+          } else {
+            return field
+          }
+        }),
+      ),
+    }
+  })
+}
+
+async function setAsPrimary(field, value) {
+  let d = await call('crm.api.contact.set_as_primary', {
+    contact: contact.data.name,
+    field,
+    value,
+  })
+  if (d) {
+    contact.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function createNew(field, value) {
+  if (!value) return
+  let d = await call('crm.api.contact.create_new', {
+    contact: contact.data.name,
+    field,
+    value,
+  })
+  if (d) {
+    contact.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function editOption(doctype, name, fieldname, value) {
+  let d = await call('frappe.client.set_value', {
+    doctype,
+    name,
+    fieldname,
+    value,
+  })
+  if (d) {
+    contact.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function deleteOption(doctype, name) {
+  await call('frappe.client.delete', {
+    doctype,
+    name,
+  })
+  await contact.reload()
+  createToast({
+    title: 'Contact updated',
+    icon: 'check',
+    iconClasses: 'text-green-600',
+  })
+}
+
+async function updateField(fieldname, value) {
+  await call('frappe.client.set_value', {
     doctype: 'Contact',
     name: props.contactId,
     fieldname,