feat: allow adding/editing Address in Contact & Organization

crm/fcrm/doctype/crm_organization/crm_organization.json

@@ -15,7 +15,8 @@
   "column_break_pnpp",
   "website",
   "territory",
-  "industry"
+  "industry",
+  "address"
  ],
  "fields": [
   {
@@ -68,12 +69,18 @@
    "fieldtype": "Link",
    "label": "Currency",
    "options": "Currency"
+  },
+  {
+   "fieldname": "address",
+   "fieldtype": "Link",
+   "label": "Address",
+   "options": "Address"
   }
  ],
  "image_field": "organization_logo",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-06-20 12:59:55.297752",
+ "modified": "2024-09-13 15:52:05.106389",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Organization",

crm/install.py

@@ -123,11 +123,15 @@ def add_default_fields_layout():
 		},
 		"Contact-Quick Entry": {
 			"doctype": "Contact",
-			"layout": '[{"label":"Salutation","columns":1,"fields":["salutation"],"hideLabel":true},{"label":"Full Name","columns":2,"hideBorder":true,"fields":["first_name","last_name"],"hideLabel":true},{"label":"Email","columns":1,"hideBorder":true,"fields":["email_id"],"hideLabel":true},{"label":"Mobile No. & Gender","columns":2,"hideBorder":true,"fields":["mobile_no","gender"],"hideLabel":true},{"label":"Organization","columns":1,"hideBorder":true,"fields":["company_name"],"hideLabel":true},{"label":"Designation","columns":1,"hideBorder":true,"fields":["designation"],"hideLabel":true}]'
+			"layout": '[{"label":"Salutation","columns":1,"fields":["salutation"],"hideLabel":true},{"label":"Full Name","columns":2,"hideBorder":true,"fields":["first_name","last_name"],"hideLabel":true},{"label":"Email","columns":1,"hideBorder":true,"fields":["email_id"],"hideLabel":true},{"label":"Mobile No. & Gender","columns":2,"hideBorder":true,"fields":["mobile_no","gender"],"hideLabel":true},{"label":"Organization","columns":1,"hideBorder":true,"fields":["company_name"],"hideLabel":true},{"label":"Designation","columns":1,"hideBorder":true,"fields":["designation"],"hideLabel":true},{"label":"Address","columns":1,"hideBorder":true,"fields":["address"],"hideLabel":true}]'
 		},
 		"CRM Organization-Quick Entry": {
 			"doctype": "CRM Organization",
-			"layout": '[{"label":"Organization Name","columns":1,"fields":["organization_name"],"hideLabel":true},{"label":"Website & Revenue","columns":2,"hideBorder":true,"fields":["website","annual_revenue"],"hideLabel":true},{"label":"Territory","columns":1,"hideBorder":true,"fields":["territory"],"hideLabel":true},{"label":"No of Employees & Industry","columns":2,"hideBorder":true,"fields":["no_of_employees","industry"],"hideLabel":true}]'
+			"layout": '[{"label":"Organization Name","columns":1,"fields":["organization_name"],"hideLabel":true},{"label":"Website & Revenue","columns":2,"hideBorder":true,"fields":["website","annual_revenue"],"hideLabel":true},{"label":"Territory","columns":1,"hideBorder":true,"fields":["territory"],"hideLabel":true},{"label":"No of Employees & Industry","columns":2,"hideBorder":true,"fields":["no_of_employees","industry"],"hideLabel":true},{"label":"Address","columns":1,"hideBorder":true,"fields":["address"],"hideLabel":true}]'
+		},
+		"Address-Quick Entry": {
+			"doctype": "Address",
+			"layout": '[{"label":"Address","columns":1,"fields":["address_title","address_type","address_line1","address_line2","city","state","country","pincode"],"hideLabel":true}]'
 		},
 	}
 

crm/patches.txt

@@ -6,6 +6,6 @@ crm.patches.v1_0.move_crm_note_data_to_fcrm_note
 [post_model_sync]
 # Patches added in this section will be executed after doctypes are migrated
 crm.patches.v1_0.create_email_template_custom_fields
-crm.patches.v1_0.create_default_fields_layout
+crm.patches.v1_0.create_default_fields_layout #13/09/2024
 crm.patches.v1_0.create_default_sidebar_fields_layout
 crm.patches.v1_0.update_deal_quick_entry_layout

frontend/src/components/Fields.vue

@@ -76,15 +76,27 @@
                 <span class="text-red-500" v-if="field.mandatory">*</span>
               </label>
             </div>
-            <Link
-              v-else-if="field.type === 'Link'"
-              class="form-control"
-              :value="data[field.name]"
-              :doctype="field.options"
-              @change="(v) => (data[field.name] = v)"
-              :placeholder="__(field.placeholder || field.label)"
-              :onCreate="field.create"
-            />
+            <div class="flex gap-1" v-else-if="field.type === 'Link'">
+              <Link
+                class="form-control flex-1"
+                :value="data[field.name]"
+                :doctype="field.options"
+                @change="(v) => (data[field.name] = v)"
+                :placeholder="__(field.placeholder || field.label)"
+                :onCreate="field.create"
+              />
+              <Button
+                v-if="data[field.name] && field.edit"
+                class="shrink-0"
+                :label="__('Edit')"
+                @click="field.edit(data[field.name])"
+              >
+                <template #prefix>
+                  <EditIcon class="h-4 w-4" />
+                </template>
+              </Button>
+            </div>
+
             <Link
               v-else-if="field.type === 'User'"
               class="form-control"
@@ -198,6 +210,7 @@
 </template>
 
 <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'

frontend/src/components/Kanban/KanbanView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex overflow-x-auto">
+  <div class="flex overflow-x-auto h-full">
     <Draggable
       v-if="columns"
       :list="columns"

frontend/src/components/Modals/AddressModal.vue

@@ -0,0 +1,206 @@
+<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>
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="Address"
+  />
+</template>
+
+<script setup>
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+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 = ref(false)
+
+function openQuickEntryModal() {
+  showQuickEntryModal.value = true
+  nextTick(() => {
+    show.value = false
+  })
+}
+</script>

frontend/src/components/Modals/ContactModal.vue

@@ -78,10 +78,12 @@
       </div>
     </template>
   </Dialog>
+  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </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 +123,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 +362,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
+        }
       }
     })
   })