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

(cherry picked from commit c4caabe72266efa62976281f2a96036261cfc697)

frontend/src/components/Modals/AddressModal.vue

@@ -22,8 +22,12 @@
             </Button>
           </div>
         </div>
-        <div v-if="tabs.data">
+        <div v-if="tabs.data && _address.doc">
-          <FieldLayout :tabs="tabs.data" :data="_address" doctype="Address" />
+          <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({
+const { document: _address } = useDocument('Address', props.address || '')
-  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)
+    : __(_address.doc?.address_title)
   let size = 'xl'
   let actions = [
     {
@@ -114,42 +106,28 @@ const tabs = createResource({
   auto: true,
 })
 
-let doc = ref({})
+const callBacks = {
-
+  onSuccess: (doc) => {
-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)
-      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(
+onMounted(() => {
-  () => show.value,
+  editMode.value = props.address ? true : false
-  (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)
+  if (!props.address) {
+    _address.doc = { address_type: 'Billing' }
+  }
+})
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = { doctype: 'Address' }
   nextTick(() => {
     show.value = false
   })

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')
+                openAddressModal()
-                show.value = false
                 close()
               }
-              field.edit = (address) => {
+              field.edit = (address) => openAddressModal(address)
-                emit('openAddressModal', address)
-                show.value = false
-              }
             } 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>

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>

frontend/src/components/Modals/OrganizationModal.vue

@@ -60,7 +60,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'
@@ -77,8 +82,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -150,14 +153,10 @@ const tabs = createResource({
             if (field.fieldname == 'address') {
               field.create = (value, close) => {
                 _organization.doc.address = value
-                emit('openAddressModal')
+                openAddressModal()
-                show.value = false
                 close()
               }
-              field.edit = (address) => {
+              field.edit = (address) => openAddressModal(address)
-                emit('openAddressModal', address)
-                show.value = false
-              }
             } else if (field.fieldtype === 'Table') {
               _organization.doc[field.fieldname] = []
             }
@@ -180,4 +179,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>

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);

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 = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } 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>

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>

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 = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } 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>

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 = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -533,4 +523,12 @@ const contactColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

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 = {}
+              openAddressModal()
-              showAddressModal.value = true
               close()
             },
-            edit: async (addr) => {
+            edit: (address) => openAddressModal(address),
-              _address.value = await call('frappe.client.get', {
-                doctype: 'Address',
-                name: addr,
-              })
-              showAddressModal.value = true
-            },
           }
         } else {
           return field
@@ -565,4 +555,12 @@ const contactColumns = [
     width: '8rem',
   },
 ]
+
+function openAddressModal(_address) {
+  showAddressModal.value = true
+  addressProps.value = {
+    doctype: 'Address',
+    address: _address,
+  }
+}
 </script>

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>