From 2a5d88b2e52a28545aa2a8773ef9d5cb9c7f4e17 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Jan 2025 20:10:03 +0530
Subject: [PATCH] fix: address modal not opening on second try

---
 .../src/components/Modals/ContactModal.vue    | 20 +++++++-----------
 .../components/Modals/OrganizationModal.vue   | 21 +++++++------------
 frontend/src/pages/Contacts.vue               | 18 +++++++++++++++-
 frontend/src/pages/Organizations.vue          | 18 +++++++++++++++-
 4 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 47315e7a..151dad98 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -42,12 +42,10 @@
       </div>
     </template>
   </Dialog>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
 import FieldLayout from '@/components/FieldLayout.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
@@ -69,6 +67,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['openAddressModal'])
+
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -77,9 +77,6 @@ const show = defineModel()
 const loading = ref(false)
 
 let _contact = ref({})
-let _address = ref({})
-
-const showAddressModal = ref(false)
 
 async function createContact() {
   if (_contact.value.email_id) {
@@ -133,16 +130,13 @@ const tabs = createResource({
             } else if (field.name == 'address') {
               field.create = (value, close) => {
                 _contact.value.address = value
-                _address.value = {}
-                showAddressModal.value = true
+                emit('openAddressModal')
+                show.value = false
                 close()
               }
-              field.edit = async (addr) => {
-                _address.value = await call('frappe.client.get', {
-                  doctype: 'Address',
-                  name: addr,
-                })
-                showAddressModal.value = true
+              field.edit = (address) => {
+                emit('openAddressModal', address)
+                show.value = false
               }
             } else if (field.type === 'Table') {
               _contact.value[field.name] = []
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 227ab89e..4a3a14ed 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -42,12 +42,10 @@
       </div>
     </template>
   </Dialog>
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
 import FieldLayout from '@/components/FieldLayout.vue'
-import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
@@ -65,6 +63,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['openAddressModal'])
+
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -74,8 +74,6 @@ const organization = defineModel('organization')
 const loading = ref(false)
 const title = ref(null)
 
-let _address = ref({})
-
 let _organization = ref({
   organization_name: '',
   website: '',
@@ -84,8 +82,6 @@ let _organization = ref({
   industry: '',
 })
 
-const showAddressModal = ref(false)
-
 let doc = ref({})
 
 async function createOrganization() {
@@ -128,16 +124,13 @@ const tabs = createResource({
             if (field.name == 'address') {
               field.create = (value, close) => {
                 _organization.value.address = value
-                _address.value = {}
-                showAddressModal.value = true
+                emit('openAddressModal')
+                show.value = false
                 close()
               }
-              field.edit = (addr) => {
-                _address.value = await call('frappe.client.get', {
-                  doctype: 'Address',
-                  name: addr,
-                })
-                showAddressModal.value = true
+              field.edit = (address) => {
+                emit('openAddressModal', address)
+                show.value = false
               }
             } else if (field.type === 'Table') {
               _organization.value[field.name] = []
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 049f681b..b2de02e6 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -60,16 +60,17 @@
     </div>
   </div>
   <ContactModal
-    v-if="showContactModal"
     v-model="showContactModal"
     v-model:showQuickEntryModal="showQuickEntryModal"
     :contact="{}"
+    @openAddressModal="(_address) => openAddressModal(_address)"
   />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
     doctype="Contact"
   />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 
 <script setup>
@@ -79,11 +80,13 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.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 } =
@@ -92,11 +95,13 @@ const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
 const showQuickEntryModal = 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)
@@ -158,4 +163,15 @@ 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>
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index f58bb3f8..282411b2 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -60,15 +60,16 @@
     </div>
   </div>
   <OrganizationModal
-    v-if="showOrganizationModal"
     v-model="showOrganizationModal"
     v-model:showQuickEntryModal="showQuickEntryModal"
+    @openAddressModal="(_address) => openAddressModal(_address)"
   />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
     doctype="CRM Organization"
   />
+  <AddressModal v-model="showAddressModal" v-model:address="address" />
 </template>
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@@ -77,10 +78,12 @@ import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.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'
 import { formatDate, timeAgo, website } from '@/utils'
+import { call } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@@ -89,9 +92,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
 const showQuickEntryModal = 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)
@@ -154,4 +159,15 @@ 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>