fix: create new email/phone no using dropdown also show all emails/phones

crm/api/contact.py

@@ -0,0 +1,48 @@
+import frappe
+
+
+@frappe.whitelist()
+def create_new(contact, field, value):
+    """Create new email or phone for a contact"""
+    if not frappe.has_permission("Contact", "write", contact):
+        frappe.throw("Not permitted", frappe.PermissionError)
+
+    contact = frappe.get_doc("Contact", contact)
+
+    if field == "email":
+        contact.append("email_ids", {"email_id": value})
+    elif field in ("mobile_no", "phone"):
+        contact.append("phone_nos", {"phone": value})
+    else:
+        frappe.throw("Invalid field")
+
+    contact.save()
+    return True
+
+
+@frappe.whitelist()
+def set_as_primary(contact, field, value):
+    """Set email or phone as primary for a contact"""
+    if not frappe.has_permission("Contact", "write", contact):
+        frappe.throw("Not permitted", frappe.PermissionError)
+
+    contact = frappe.get_doc("Contact", contact)
+
+    if field == "email":
+        for email in contact.email_ids:
+            if email.email_id == value:
+                email.is_primary = 1
+            else:
+                email.is_primary = 0
+    elif field in ("mobile_no", "phone"):
+        name = "is_primary_mobile_no" if field == "mobile_no" else "is_primary_phone"
+        for phone in contact.phone_nos:
+            if phone.phone == value:
+                phone.set(name, 1)
+            else:
+                phone.set(name, 0)
+    else:
+        frappe.throw("Invalid field")
+
+    contact.save()
+    return True

frontend/src/components/DropdownItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <button
+    :class="[
+      active ? 'bg-gray-100' : 'text-gray-800',
+      'group flex h-7 w-full items-center justify-between gap-3 rounded px-2 text-base',
+    ]"
+    @click="onClick"
+  >
+    <span class="whitespace-nowrap">
+      {{ value }}
+    </span>
+    <FeatherIcon
+      v-if="selected"
+      name="check"
+      class="text-primary-500 h-4 w-4"
+      size="sm"
+    />
+  </button>
+</template>
+<script setup>
+import { FeatherIcon } from 'frappe-ui'
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

frontend/src/pages/Contact.vue

@@ -95,14 +95,40 @@
               {{ field.label }}
             </div>
             <div class="flex-1 overflow-hidden">
-              <FormControl
+              <Dropdown
-                v-if="field.type === 'email'"
+                v-if="field.type === 'dropdown'"
-                type="email"
+                :options="field.options"
-                class="form-control"
+                class="form-control show-dropdown-icon w-full flex-1"
-                :value="contact[field.name]"
+              >
-                @change.stop="updateContact(field.name, $event.target.value)"
+                <template #default="{ open }">
-                :debounce="500"
+                  <div
-              />
+                    class="dropdown-button flex w-full items-center justify-between gap-2"
+                  >
+                    <Button
+                      :label="contact[field.name]"
+                      class="w-full justify-between truncate"
+                    >
+                      <div class="truncate">{{ contact[field.name] }}</div>
+                    </Button>
+                    <FeatherIcon
+                      :name="open ? 'chevron-up' : 'chevron-down'"
+                      class="h-4 text-gray-600"
+                    />
+                  </div>
+                </template>
+                <template #footer>
+                  <Button
+                    variant="ghost"
+                    class="w-full !justify-start"
+                    label="Create one"
+                    @click="field.create()"
+                  >
+                    <template #prefix>
+                      <FeatherIcon name="plus" class="h-4" />
+                    </template>
+                  </Button>
+                </template>
+              </Dropdown>
               <FormControl
                 v-else-if="field.type === 'link'"
                 type="autocomplete"
@@ -174,6 +200,16 @@
       </template>
     </Tabs>
   </div>
+  <Dialog v-model="show" :options="dialogOptions">
+    <template #body-content>
+      <FormControl
+        :type="new_field.type"
+        variant="outline"
+        v-model="new_field.value"
+        :placeholder="new_field.placeholder"
+      />
+    </template>
+  </Dialog>
 </template>
 
 <script setup>
@@ -181,21 +217,23 @@ import {
   FormControl,
   FeatherIcon,
   Breadcrumbs,
+  Dialog,
   Avatar,
   FileUploader,
   ErrorMessage,
-  Dropdown,
   Tooltip,
   Tabs,
   call,
   createResource,
   createListResource,
 } from 'frappe-ui'
+import Dropdown from '@/components/frappe-ui/Dropdown.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import DropdownItem from '@/components/DropdownItem.vue'
 import ExternalLinkIcon from '@/components/Icons/ExternalLinkIcon.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
@@ -520,13 +558,63 @@ const details = computed(() => {
     },
     {
       label: 'Email',
-      type: 'email',
+      type: 'dropdown',
-      name: 'email',
+      name: 'email_id',
+      options: contact.value?.email_ids?.map((email) => {
+        return {
+          label: email.email_id,
+          value: email.email_id,
+          component: h(DropdownItem, {
+            value: email.email_id,
+            selected: email.email_id === contact.value.email_id,
+            onClick: () => setAsPrimary('email', email.email_id),
+          }),
+        }
+      }),
+      create: () => {
+        new_field.value = { type: 'email', placeholder: 'Add email address' }
+        dialogOptions.value = {
+          title: 'Add email',
+          actions: [
+            {
+              label: 'Add',
+              variant: 'solid',
+              onClick: ({ close }) => createNew('email', close),
+            },
+          ],
+        }
+        show.value = true
+      },
     },
     {
       label: 'Mobile no.',
-      type: 'phone',
+      type: 'dropdown',
       name: 'mobile_no',
+      options: contact.value?.phone_nos?.map((phone) => {
+        return {
+          label: phone.phone,
+          value: phone.phone,
+          component: h(DropdownItem, {
+            value: phone.phone,
+            selected: phone.phone === contact.value.mobile_no,
+            onClick: () => setAsPrimary('mobile_no', phone.phone),
+          }),
+        }
+      }),
+      create: () => {
+        new_field.value = { type: 'phone', placeholder: 'Add mobile no.' }
+        dialogOptions.value = {
+          title: 'Add mobile no.',
+          actions: [
+            {
+              label: 'Add',
+              variant: 'solid',
+              onClick: ({ close }) => createNew('phone', close),
+            },
+          ],
+        }
+        show.value = true
+      },
     },
     {
       label: 'Organization',
@@ -548,6 +636,11 @@ const details = computed(() => {
   ]
 })
 
+const show = ref(false)
+const new_field = ref({})
+
+const dialogOptions = ref({})
+
 function updateContact(fieldname, value) {
   createResource({
     url: 'frappe.client.set_value',
@@ -576,6 +669,39 @@ function updateContact(fieldname, value) {
     },
   })
 }
+
+async function setAsPrimary(field, value) {
+  let d = await call('crm.api.contact.set_as_primary', {
+    contact: props.contactId,
+    field,
+    value,
+  })
+  if (d) {
+    contacts.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}
+
+async function createNew(field, close) {
+  let d = await call('crm.api.contact.create_new', {
+    contact: props.contactId,
+    field,
+    value: new_field.value.value,
+  })
+  if (d) {
+    contacts.reload()
+    createToast({
+      title: 'Contact updated',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+  close()
+}
 </script>
 
 <style scoped>
@@ -600,4 +726,14 @@ function updateContact(fieldname, value) {
   color: white;
   width: 0;
 }
+
+:deep(:has(> .dropdown-button)) {
+  width: 100%;
+}
+
+:deep(.dropdown-button > button > span) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>