feat: allow adding & editing address in contact & organization

frontend/src/components/Fields.vue

@@ -76,15 +76,23 @@
                 <span class="text-red-500" v-if="field.mandatory">*</span>
               </label>
             </div>
-            <Link
+            <div class="flex gap-1" v-else-if="field.type === 'Link'">
-              v-else-if="field.type === 'Link'"
+              <Link
-              class="form-control"
+                class="form-control flex-1"
-              :value="data[field.name]"
+                :value="data[field.name]"
-              :doctype="field.options"
+                :doctype="field.options"
-              @change="(v) => (data[field.name] = v)"
+                @change="(v) => (data[field.name] = v)"
-              :placeholder="__(field.placeholder || field.label)"
+                :placeholder="__(field.placeholder || field.label)"
-              :onCreate="field.create"
+                :onCreate="field.create"
-            />
+              />
+              <Button
+                v-if="data[field.name] && field.edit"
+                class="shrink-0"
+                label="Edit"
+                @click="field.edit(data[field.name])"
+              />
+            </div>
+
             <Link
               v-else-if="field.type === 'User'"
               class="form-control"

frontend/src/components/Modals/AddressModal.vue

@@ -0,0 +1,200 @@
+<template>
+  <Dialog v-model="show" :options="dialogOptions">
+    <template #body>
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+              {{ __(dialogOptions.title) || __('Untitled') }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div v-if="sections.data">
+          <Fields :sections="sections.data" :data="_address" />
+          <ErrorMessage class="mt-2" :message="error" />
+        </div>
+      </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <div class="space-y-2">
+          <Button
+            class="w-full"
+            v-for="action in dialogOptions.actions"
+            :key="action.label"
+            v-bind="action"
+            :label="__(action.label)"
+            :loading="loading"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import Fields from '@/components/Fields.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import { usersStore } from '@/stores/users'
+import { capture } from '@/telemetry'
+import { call, FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
+import { ref, nextTick, watch, computed } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: {
+      afterInsert: () => {},
+    },
+  },
+})
+
+const { isManager } = usersStore()
+
+const show = defineModel()
+const address = defineModel('address')
+
+const loading = ref(false)
+const error = ref(null)
+const title = ref(null)
+const editMode = ref(false)
+
+let _address = ref({
+  name: '',
+  address_title: '',
+  address_type: 'Billing',
+  address_line1: '',
+  address_line2: '',
+  city: '',
+  county: '',
+  state: '',
+  country: '',
+  pincode: '',
+})
+
+const dialogOptions = computed(() => {
+  let title = !editMode.value
+    ? __('New Address')
+    : __(_address.value.address_title)
+  let size = 'xl'
+  let actions = [
+    {
+      label: editMode.value ? __('Save') : __('Create'),
+      variant: 'solid',
+      onClick: () =>
+        editMode.value ? updateAddress() : createAddress.submit(),
+    },
+  ]
+
+  return { title, size, actions }
+})
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['quickEntryFields', 'Address'],
+  params: { doctype: 'Address', type: 'Quick Entry' },
+  auto: true,
+})
+
+let doc = ref({})
+
+function updateAddress() {
+  error.value = null
+  const old = { ...doc.value }
+  const newAddress = { ..._address.value }
+
+  const dirty = JSON.stringify(old) !== JSON.stringify(newAddress)
+  const values = newAddress
+
+  if (!dirty) {
+    show.value = false
+    return
+  }
+
+  loading.value = true
+  updateAddressValues.submit({
+    doctype: 'Address',
+    name: _address.value.name,
+    fieldname: values,
+  })
+}
+
+const updateAddressValues = createResource({
+  url: 'frappe.client.set_value',
+  onSuccess(doc) {
+    loading.value = false
+    if (doc.name) {
+      handleAddressUpdate(doc)
+    }
+  },
+  onError(err) {
+    loading.value = false
+    error.value = err
+  },
+})
+
+const createAddress = createResource({
+  url: 'frappe.client.insert',
+  makeParams() {
+    return {
+      doc: {
+        doctype: 'Address',
+        ..._address.value,
+      },
+    }
+  },
+  onSuccess(doc) {
+    loading.value = false
+    if (doc.name) {
+      capture('address_created')
+      handleAddressUpdate(doc)
+    }
+  },
+  onError(err) {
+    loading.value = false
+    error.value = err
+  },
+})
+
+function handleAddressUpdate(doc) {
+  show.value = false
+  props.options.afterInsert && props.options.afterInsert(doc)
+}
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      // TODO: Issue with FormControl
+      // title.value.el.focus()
+      doc.value = address.value?.doc || address.value || {}
+      _address.value = { ...doc.value }
+      if (_address.value.name) {
+        editMode.value = true
+      }
+    })
+  },
+)
+
+const showQuickEntryModal = defineModel('quickEntry')
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+</script>

frontend/src/components/Modals/ContactModal.vue

@@ -78,10 +78,16 @@
       </div>
     </template>
   </Dialog>
+  <AddressModal
+    v-model="showAddressModal"
+    v-model:address="_address"
+    v-model:quickEntry="showQuickEntryModal"
+  />
 </template>
 
 <script setup>
 import Fields from '@/components/Fields.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
 import ContactIcon from '@/components/Icons/ContactIcon.vue'
 import GenderIcon from '@/components/Icons/GenderIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
@@ -121,6 +127,9 @@ const show = defineModel()
 const detailMode = ref(false)
 const editMode = ref(false)
 let _contact = ref({})
+let _address = ref({})
+
+const showAddressModal = ref(false)
 
 async function updateContact() {
   if (!dirty.value) {
@@ -357,6 +366,20 @@ const filteredSections = computed(() => {
             isNew: true,
           })
         }
+      } else if (field.name == 'address') {
+        field.create = (value, close) => {
+          _contact.value.address = value
+          _address.value = {}
+          showAddressModal.value = true
+          close()
+        }
+        field.edit = async (addr) => {
+          _address.value = await call('frappe.client.get', {
+            doctype: 'Address',
+            name: addr,
+          })
+          showAddressModal.value = true
+        }
       }
     })
   })

frontend/src/components/Modals/OrganizationModal.vue

@@ -36,8 +36,8 @@
             </div>
           </div>
           <Fields
-            v-else-if="sections.data"
+            v-else-if="filteredSections"
-            :sections="sections.data"
+            :sections="filteredSections"
             :data="_organization"
           />
         </div>
@@ -56,10 +56,16 @@
       </div>
     </template>
   </Dialog>
+  <AddressModal
+    v-model="showAddressModal"
+    v-model:address="_address"
+    v-model:quickEntry="showQuickEntryModal"
+  />
 </template>
 
 <script setup>
 import Fields from '@/components/Fields.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import MoneyIcon from '@/components/Icons/MoneyIcon.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
@@ -93,6 +99,7 @@ const loading = ref(false)
 const title = ref(null)
 const detailMode = ref(false)
 const editMode = ref(false)
+let _address = ref({})
 let _organization = ref({
   organization_name: '',
   website: '',
@@ -101,6 +108,8 @@ let _organization = ref({
   industry: '',
 })
 
+const showAddressModal = ref(false)
+
 let doc = ref({})
 
 async function updateOrganization() {
@@ -243,6 +252,33 @@ const sections = createResource({
   auto: true,
 })
 
+const filteredSections = computed(() => {
+  let allSections = sections.data || []
+  if (!allSections.length) return []
+
+  allSections.forEach((s) => {
+    s.fields.forEach((field) => {
+      if (field.name == 'address') {
+        field.create = (value, close) => {
+          _organization.value.address = value
+          _address.value = {}
+          showAddressModal.value = true
+          close()
+        }
+        field.edit = async (addr) => {
+          _address.value = await call('frappe.client.get', {
+            doctype: 'Address',
+            name: addr,
+          })
+          showAddressModal.value = true
+        }
+      }
+    })
+  })
+
+  return allSections
+})
+
 watch(
   () => show.value,
   (value) => {

frontend/src/components/Settings/QuickEntryModal.vue

@@ -20,7 +20,7 @@
             type="select"
             class="w-1/4"
             v-model="_doctype"
-            :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
+            :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization', 'Address']"
             @change="reload"
           />
           <Switch