fix: moved address modal to global modals and control it using modals.js

2025-06-04 19:15:12 +05:30 · 2025-06-04 19:15:12 +05:30 · c4caabe722
commit c4caabe722
parent 8dcb77634b
11 changed files with 130 additions and 201 deletions
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@ -22,8 +22,12 @@
            </Button>
          </div>
        </div>
-        <div v-if="tabs.data">
-          <FieldLayout :tabs="tabs.data" :data="_address" doctype="Address" />
+        <div v-if="tabs.data && _address.doc">
+          <FieldLayout
+            :tabs="tabs.data"
+            :data="_address.doc"
+            doctype="Address"
+          />
          <ErrorMessage class="mt-2" :message="error" />
        </div>
      </div>
@ -41,24 +45,24 @@
      </div>
    </template>
  </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="Address"
-  />
 </template>

 <script setup>
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
-import { ref, nextTick, watch, computed } from 'vue'
+import { ref, nextTick, computed, onMounted } from 'vue'

 const props = defineProps({
+  address: {
+    type: String,
+    default: '',
+  },
  options: {
    type: Object,
    default: {
@ -70,30 +74,18 @@ const props = defineProps({
 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 { document: _address } = useDocument('Address', props.address || '')

 const dialogOptions = computed(() => {
  let title = !editMode.value
    ? __('New Address')
-    : __(_address.value.address_title)
+    : __(_address.doc?.address_title)
  let size = 'xl'
  let actions = [
    {
@ -114,42 +106,28 @@ const tabs = createResource({
  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) {
+const callBacks = {
+  onSuccess: (doc) => {
    loading.value = false
-    if (doc.name) {
-      handleAddressUpdate(doc)
-    }
+    handleAddressUpdate(doc)
  },
-  onError(err) {
+  onError: (err) => {
    loading.value = false
+    if (err.exc_type == 'MandatoryError') {
+      const errorMessage = err.messages
+        .map((msg) => msg.split(': ')[2].trim())
+        .join(', ')
+      error.value = __('These fields are required: {0}', [errorMessage])
+      return
+    }
    error.value = err
  },
-})
+}
+
+async function updateAddress() {
+  loading.value = true
+  await _address.save.submit(null, callBacks)
+}

 const createAddress = createResource({
  url: 'frappe.client.insert',
@ -157,7 +135,7 @@ const createAddress = createResource({
    return {
      doc: {
        doctype: 'Address',
-        ..._address.value,
+        ..._address.doc,
      },
    }
  },
@ -179,27 +157,17 @@ function handleAddressUpdate(doc) {
  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
-      }
-    })
-  },
-)
+onMounted(() => {
+  editMode.value = props.address ? true : false

-const showQuickEntryModal = ref(false)
+  if (!props.address) {
+    _address.doc = { address_type: 'Billing' }
+  }
+})

 function openQuickEntryModal() {
  showQuickEntryModal.value = true
+  quickEntryProps.value = { doctype: 'Address' }
  nextTick(() => {
    show.value = false
  })
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@ -49,7 +49,12 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
-import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import {
+  showQuickEntryModal,
+  quickEntryProps,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
 import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
@ -70,8 +75,6 @@ const props = defineProps({
  },
 })

-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()

 const router = useRouter()
@ -137,14 +140,10 @@ const tabs = createResource({
            } else if (field.fieldname == 'address') {
              field.create = (value, close) => {
                _contact.doc.address = value
-                emit('openAddressModal')
-                show.value = false
+                openAddressModal()
                close()
              }
-              field.edit = (address) => {
-                emit('openAddressModal', address)
-                show.value = false
-              }
+              field.edit = (address) => openAddressModal(address)
            } else if (field.fieldtype === 'Table') {
              _contact.doc[field.fieldname] = []
            }
@ -164,6 +163,15 @@ function openQuickEntryModal() {
  quickEntryProps.value = { doctype: 'Contact' }
  nextTick(() => (show.value = false))
 }
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+  nextTick(() => (show.value = false))
+}
 </script>

 <style scoped>
--- a/frontend/src/components/Modals/GlobalModals.vue
+++ b/frontend/src/components/Modals/GlobalModals.vue
@ -11,11 +11,17 @@
    v-model="showQuickEntryModal"
    v-bind="quickEntryProps"
  />
+  <AddressModal
+    v-if="showAddressModal"
+    v-model="showAddressModal"
+    v-bind="addressProps"
+  />
  <AboutModal v-model="showAboutModal" />
 </template>
 <script setup>
 import CreateDocumentModal from '@/components/Modals/CreateDocumentModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
 import AboutModal from '@/components/Modals/AboutModal.vue'
 import {
  showCreateDocumentModal,
@ -26,6 +32,8 @@ import {
 import {
  showQuickEntryModal,
  quickEntryProps,
-  showAboutModal,
+  showAddressModal,
+  addressProps,
+  showAboutModal
 } from '@/composables/modals'
 </script>
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@ -50,7 +50,12 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
-import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import {
+  showQuickEntryModal,
+  quickEntryProps,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
 import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
@ -67,8 +72,6 @@ const props = defineProps({
  },
 })

-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()

 const router = useRouter()
@ -137,14 +140,10 @@ const tabs = createResource({
            if (field.fieldname == 'address') {
              field.create = (value, close) => {
                _organization.doc.address = value
-                emit('openAddressModal')
-                show.value = false
+                openAddressModal()
                close()
              }
-              field.edit = (address) => {
-                emit('openAddressModal', address)
-                show.value = false
-              }
+              field.edit = (address) => openAddressModal(address)
            } else if (field.fieldtype === 'Table') {
              _organization.doc[field.fieldname] = []
            }
@ -167,4 +166,13 @@ function openQuickEntryModal() {
  quickEntryProps.value = { doctype: 'CRM Organization' }
  nextTick(() => (show.value = false))
 }
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+  nextTick(() => (show.value = false))
+}
 </script>
--- a/frontend/src/composables/modals.js
+++ b/frontend/src/composables/modals.js
@ -3,4 +3,7 @@ import { ref } from 'vue';
 export const showQuickEntryModal = ref(false);
 export const quickEntryProps = ref({});

+export const showAddressModal = ref(false);
+export const addressProps = ref({});
+
 export const showAboutModal = ref(false);
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@ -172,7 +172,6 @@
    :errorTitle="errorTitle"
    :errorMessage="errorMessage"
  />
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>

 <script setup>
@ -185,8 +184,8 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import { formatDate, timeAgo } from '@/utils'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
@ -208,7 +207,6 @@ import {
 } from 'frappe-ui'
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { errorMessage as _errorMessage } from '../utils'

 const { brand } = getSettings()
 const { $dialog, makeCall } = globalStore()
@ -228,9 +226,7 @@ const props = defineProps({
 const route = useRoute()
 const router = useRouter()

-const showAddressModal = ref(false)
 const _contact = ref({})
-const _address = ref({})

 const errorTitle = ref('')
 const errorMessage = ref('')
@ -493,17 +489,10 @@ function getParsedSections(_sections) {
            ...field,
            create: (value, close) => {
              _contact.value.address = value
-              _address.value = {}
-              showAddressModal.value = true
+              openAddressModal()
              close()
            },
-            edit: async (addr) => {
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
+            edit: (address) => openAddressModal(address),
          }
        } else {
          return field
@ -562,18 +551,6 @@ async function deleteOption(doctype, name) {
  toast.success(__('Contact updated'))
 }

-async function updateField(fieldname, value) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname,
-    value,
-  })
-  toast.success(__('Contact updated'))
-
-  contact.reload()
-}
-
 const { getFormattedCurrency } = getMeta('CRM Deal')

 const columns = computed(() => dealColumns)
@ -641,4 +618,12 @@ const dealColumns = [
    width: '8rem',
  },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@ -66,9 +66,7 @@
    v-if="showContactModal"
    v-model="showContactModal"
    :contact="{}"
-    @openAddressModal="(_address) => openAddressModal(_address)"
  />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>

 <script setup>
@ -77,13 +75,11 @@ import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
-import { call } from 'frappe-ui'
 import { ref, computed } from 'vue'

 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@ -91,13 +87,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 const { getOrganization } = organizationsStore()

 const showContactModal = ref(false)
-const showAddressModal = ref(false)

 const contactsListView = ref(null)

 // contacts data is loaded in the ViewControls component
 const contacts = ref({})
-const address = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
@ -159,15 +153,4 @@ const rows = computed(() => {
    return _rows
  })
 })
-
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
-  }
-  showAddressModal.value = true
-  address.value = _address || {}
-}
 </script>
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@ -156,7 +156,6 @@
      </TabPanel>
    </Tabs>
  </div>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>

 <script setup>
@ -168,9 +167,9 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import { formatDate, timeAgo } from '@/utils'
 import { getView } from '@/utils/view'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
@ -212,9 +211,7 @@ const props = defineProps({
 const route = useRoute()
 const router = useRouter()

-const showAddressModal = ref(false)
 const _contact = ref({})
-const _address = ref({})

 const contact = createResource({
  url: 'crm.api.contact.get_contact',
@ -467,17 +464,10 @@ function getParsedSections(_sections) {
            ...field,
            create: (value, close) => {
              _contact.value.address = value
-              _address.value = {}
-              showAddressModal.value = true
+              openAddressModal()
              close()
            },
-            edit: async (addr) => {
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
+            edit: (address) => openAddressModal(address),
          }
        } else {
          return field
@ -536,18 +526,6 @@ async function deleteOption(doctype, name) {
  toast.success(__('Contact updated'))
 }

-async function updateField(fieldname, value) {
-  await call('frappe.client.set_value', {
-    doctype: 'Contact',
-    name: props.contactId,
-    fieldname,
-    value,
-  })
-  toast.success(__('Contact updated'))
-
-  contact.reload()
-}
-
 const { getFormattedCurrency } = getMeta('CRM Deal')

 const columns = computed(() => dealColumns)
@ -615,4 +593,12 @@ const dealColumns = [
    width: '8rem',
  },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@ -145,20 +145,19 @@
      </TabPanel>
    </Tabs>
  </div>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>

 <script setup>
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@ -296,9 +295,7 @@ function openWebsite() {
  else window.open(organization.doc.website, '_blank')
 }

-const showAddressModal = ref(false)
 const _organization = ref({})
-const _address = ref({})

 const sections = createResource({
  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
@ -317,17 +314,10 @@ function getParsedSections(_sections) {
            ...field,
            create: (value, close) => {
              _organization.value.address = value
-              _address.value = {}
-              showAddressModal.value = true
+              openAddressModal()
              close()
            },
-            edit: async (addr) => {
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
+            edit: (address) => openAddressModal(address),
          }
        } else {
          return field
@ -533,4 +523,12 @@ const contactColumns = [
    width: '8rem',
  },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@ -164,7 +164,6 @@
    :errorTitle="errorTitle"
    :errorMessage="errorMessage"
  />
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>

 <script setup>
@ -173,13 +172,13 @@ import Resizer from '@/components/Resizer.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@ -335,9 +334,7 @@ function openWebsite() {
  else window.open(organization.doc.website, '_blank')
 }

-const showAddressModal = ref(false)
 const _organization = ref({})
-const _address = ref({})

 const sections = createResource({
  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
@ -356,17 +353,10 @@ function getParsedSections(_sections) {
            ...field,
            create: (value, close) => {
              _organization.value.address = value
-              _address.value = {}
-              showAddressModal.value = true
+              openAddressModal()
              close()
            },
-            edit: async (addr) => {
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
+            edit: (address) => openAddressModal(address),
          }
        } else {
          return field
@ -565,4 +555,12 @@ const contactColumns = [
    width: '8rem',
  },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@ -65,9 +65,7 @@
  <OrganizationModal
    v-if="showOrganizationModal"
    v-model="showOrganizationModal"
-    @openAddressModal="(_address) => openAddressModal(_address)"
  />
-  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@ -75,7 +73,6 @@ import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
@ -88,11 +85,9 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =

 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
-const showAddressModal = ref(false)

 // organizations data is loaded in the ViewControls component
 const organizations = ref({})
-const address = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
@ -155,15 +150,4 @@ const rows = computed(() => {
    return _rows
  })
 })
-
-async function openAddressModal(_address) {
-  if (_address) {
-    _address = await call('frappe.client.get', {
-      doctype: 'Address',
-      name: _address,
-    })
-  }
-  showAddressModal.value = true
-  address.value = _address || {}
-}
 </script>