Merge pull request #887 from shariquerik/new-doc-issue

frontend/src/components/Activities/Activities.vue

@@ -250,7 +250,7 @@
               </span>
               <span v-if="activity.type">{{ __(activity.type) }}</span>
               <span
-                v-if="activity.data.field_label"
+                v-if="activity.data?.field_label"
                 class="max-w-xs truncate font-medium text-ink-gray-8"
               >
                 {{ __(activity.data.field_label) }}
@@ -307,7 +307,7 @@
             >
               <div class="inline-flex flex-wrap gap-1 text-ink-gray-5">
                 <span
-                  v-if="activity.data.field_label"
+                  v-if="activity.data?.field_label"
                   class="max-w-xs truncate text-ink-gray-5"
                 >
                   {{ __(activity.data.field_label) }}

frontend/src/components/Activities/AllModals.vue

@@ -91,10 +91,8 @@ function createCallLog() {
   let doctype = props.doctype
   let docname = props.doc.data?.name
   callLog.value = {
-    data: {
+    reference_doctype: doctype,
-      reference_doctype: doctype,
+    reference_docname: docname,
-      reference_docname: docname,
-    },
   }
   showCallLogModal.value = true
 }

frontend/src/components/Activities/CallArea.vue

@@ -97,7 +97,7 @@
       v-model:callLogModal="showCallLogModal"
       v-model:callLog="callLog"
     />
-    <CallLogModal v-model="showCallLogModal" v-model:callLog="callLog" />
+    <CallLogModal v-model="showCallLogModal" v-model:callLog="callLog.data" />
   </div>
 </template>
 <script setup>

frontend/src/components/Layouts/MobileLayout.vue

@@ -5,9 +5,11 @@
       <MobileAppHeader />
       <slot />
     </div>
+    <GlobalModals />
   </div>
 </template>
 <script setup>
 import MobileSidebar from '@/components/Mobile/MobileSidebar.vue'
 import MobileAppHeader from '@/components/Mobile/MobileAppHeader.vue'
+import GlobalModals from '@/components/Modals/GlobalModals.vue'
 </script>

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/CallLogModal.vue

@@ -3,13 +3,19 @@
     <template #body>
       <div class="px-4 pt-5 pb-6 bg-surface-modal sm:px-6">
         <div class="flex items-center justify-between mb-5">
-          <div>
+          <div class="flex items-center gap-2">
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
+            <Badge v-if="callLog.isDirty" :label="'Not Saved'" theme="orange" />
           </div>
           <div class="flex items-center gap-1">
-            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+            <Button
+              v-if="isManager() && !isMobileView"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
               <EditIcon class="w-4 h-4" />
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
@@ -18,37 +24,47 @@
           </div>
         </div>
         <div v-if="tabs.data">
-          <FieldLayout :tabs="tabs.data" :data="_callLog" doctype="CRM Call Log" />
+          <FieldLayout
+            :tabs="tabs.data"
+            :data="callLog.doc"
+            doctype="CRM Call Log"
+          />
           <ErrorMessage class="mt-8" :message="error" />
         </div>
       </div>
       <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button class="w-full" v-for="action in dialogOptions.actions" :key="action.label" v-bind="action"
+          <Button
-            :label="__(action.label)" :loading="loading" />
+            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="CRM Call Log" />
 </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 { getRandom } from '@/utils'
 import { capture } from '@/telemetry'
-import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
+import { useDocument } from '@/data/document'
+import { FeatherIcon, createResource, ErrorMessage, Badge } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
 const props = defineProps({
   options: {
     type: Object,
     default: {
-      afterInsert: () => { },
+      afterInsert: () => {},
     },
   },
 })
@@ -56,26 +72,14 @@ const props = defineProps({
 const { isManager } = usersStore()
 
 const show = defineModel()
-const callLog = defineModel('callLog')
+const _callLog = defineModel('callLog')
 
 const loading = ref(false)
 const error = ref(null)
 const title = ref(null)
 const editMode = ref(false)
 
-let _callLog = ref({
+const callLog = ref(null)
-  name: '',
-  type: '',
-  from: '',
-  to: '',
-  medium: '',
-  duration: '',
-  caller: '',
-  receiver: '',
-  status: '',
-  recording_url: '',
-  telephony_medium: 'Manual',
-})
 
 const dialogOptions = computed(() => {
   let title = !editMode.value ? __('New Call Log') : __('Edit Call Log')
@@ -99,41 +103,28 @@ const tabs = createResource({
   auto: true,
 })
 
-let doc = ref({})
+const callBacks = {
-
+  onSuccess: (doc) => {
-function updateCallLog() {
-  error.value = null
-  const old = { ...doc.value }
-  const newCallLog = { ..._callLog.value }
-
-  const dirty = JSON.stringify(old) !== JSON.stringify(newCallLog)
-
-  if (!dirty) {
-    show.value = false
-    return
-  }
-
-  loading.value = true
-  updateCallLogValues.submit({
-    doctype: 'CRM Call Log',
-    name: _callLog.value.name,
-    fieldname: newCallLog,
-  })
-}
-
-const updateCallLogValues = createResource({
-  url: 'frappe.client.set_value',
-  onSuccess(doc) {
     loading.value = false
-    if (doc.name) {
+    handleCallLogUpdate(doc)
-      handleCallLogUpdate(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 updateCallLog() {
+  loading.value = true
+  await callLog.value.save.submit(null, callBacks)
+}
 
 const createCallLog = createResource({
   url: 'frappe.client.insert',
@@ -143,7 +134,7 @@ const createCallLog = createResource({
         doctype: 'CRM Call Log',
         id: getRandom(6),
         telephony_medium: 'Manual',
-        ..._callLog.value,
+        ...callLog.value.doc,
       },
     }
   },
@@ -155,15 +146,7 @@ const createCallLog = createResource({
     }
   },
   onError(err) {
-    loading.value = false
+    callBacks.onError(err)
-    if (err.exc_type == 'MandatoryError') {
-      const errorMessage = err.messages
-        .map(msg => msg.split('Log:')[1].trim())
-        .join(', ')
-      error.value = `These fields are required: ${errorMessage}`
-      return
-    }
-    error.value = err
   },
 })
 
@@ -177,24 +160,22 @@ watch(
   (value) => {
     if (!value) return
     editMode.value = false
-    nextTick(() => {
+
-      // TODO: Issue with FormControl
+    let docname = _callLog.value?.name
-      // title.value.el.focus()
+    const { document } = useDocument('CRM Call Log', docname)
-      doc.value = callLog.value?.data || {}
+    callLog.value = document
-      _callLog.value = { ...doc.value }
+
-      if (_callLog.value.name) {
+    if (docname) {
-        editMode.value = true
+      editMode.value = true
-      }
+    } else {
-    })
+      callLog.value.doc = { ..._callLog.value }
+    }
   },
 )
 
-const showQuickEntryModal = ref(false)
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Call Log' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 </script>

frontend/src/components/Modals/ContactModal.vue

@@ -25,7 +25,7 @@
         <FieldLayout
           v-if="tabs.data?.length"
           :tabs="tabs.data"
-          :data="_contact"
+          :data="_contact.doc"
           doctype="Contact"
         />
       </div>
@@ -49,9 +49,16 @@ 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,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -68,8 +75,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -77,23 +82,27 @@ const show = defineModel()
 
 const loading = ref(false)
 
-let _contact = ref({})
+const { document: _contact } = useDocument('Contact')
+
+if (Object.keys(_contact.doc).length != 0) {
+  _contact.doc = {}
+}
 
 async function createContact() {
-  if (_contact.value.email_id) {
+  if (_contact.doc.email_id) {
-    _contact.value.email_ids = [{ email_id: _contact.value.email_id }]
+    _contact.doc.email_ids = [{ email_id: _contact.doc.email_id }]
-    delete _contact.value.email_id
+    delete _contact.doc.email_id
   }
 
-  if (_contact.value.mobile_no) {
+  if (_contact.doc.mobile_no) {
-    _contact.value.phone_nos = [{ phone: _contact.value.mobile_no }]
+    _contact.doc.phone_nos = [{ phone: _contact.doc.mobile_no }]
-    delete _contact.value.mobile_no
+    delete _contact.doc.mobile_no
   }
 
   const doc = await call('frappe.client.insert', {
     doc: {
       doctype: 'Contact',
-      ..._contact.value,
+      ..._contact.doc,
     },
   })
   if (doc.name) {
@@ -130,17 +139,13 @@ const tabs = createResource({
               field.read_only = false
             } else if (field.fieldname == 'address') {
               field.create = (value, close) => {
-                _contact.value.address = value
+                _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.value[field.fieldname] = []
+              _contact.doc[field.fieldname] = []
             }
           })
         })
@@ -149,20 +154,22 @@ const tabs = createResource({
   },
 })
 
-watch(
+onMounted(() => {
-  () => show.value,
+  Object.assign(_contact.doc, props.contact.data || props.contact || {})
-  (value) => {
+})
-    if (!value) return
-    nextTick(() => {
-      _contact.value = { ...props.contact.data }
-    })
-  },
-)
-
-const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  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>

frontend/src/components/Modals/CreateDocumentModal.vue

@@ -48,6 +48,7 @@ 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 { FeatherIcon, createResource, ErrorMessage, call } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
@@ -62,7 +63,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['showQuickEntryModal', 'callback'])
+const emit = defineEmits(['callback'])
 
 const { isManager } = usersStore()
 
@@ -139,9 +140,8 @@ watch(
 )
 
 function openQuickEntryModal() {
-  emit('showQuickEntryModal', props.doctype)
+  showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: props.doctype }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 </script>

frontend/src/components/Modals/DealModal.vue

@@ -50,7 +50,7 @@
             ref="fieldLayoutRef"
             v-if="tabs.data?.length"
             :tabs="tabs.data"
-            :data="deal"
+            :data="deal.doc"
             doctype="CRM Deal"
           />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
@@ -76,9 +76,11 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { Switch, createResource } from 'frappe-ui'
-import { computed, ref, reactive, onMounted, nextTick, watch } from 'vue'
+import { computed, ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -92,24 +94,11 @@ const show = defineModel()
 const router = useRouter()
 const error = ref(null)
 
-const deal = reactive({
+const { document: deal } = useDocument('CRM Deal')
-  organization: '',
+
-  organization_name: '',
+if (Object.keys(deal.doc).length != 0) {
-  website: '',
+  deal.doc = {}
-  no_of_employees: '',
+}
-  territory: '',
-  annual_revenue: '',
-  industry: '',
-  contact: '',
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  email: '',
-  mobile_no: '',
-  gender: '',
-  status: '',
-  deal_owner: '',
-})
 
 const hasOrganizationSections = ref(true)
 const hasContactSections = ref(true)
@@ -165,11 +154,11 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = dealStatuses.value
-              field.prefix = getDealStatus(deal.status).color
+              field.prefix = getDealStatus(deal.doc.status).color
             }
 
             if (field.fieldtype === 'Table') {
-              deal[field.fieldname] = []
+              deal.doc[field.fieldname] = []
             }
           })
         })
@@ -180,46 +169,49 @@ const tabs = createResource({
 
 const dealStatuses = computed(() => {
   let statuses = statusOptions('deal')
-  if (!deal.status) {
+  if (!deal.doc.status) {
-    deal.status = statuses[0].value
+    deal.doc.status = statuses[0].value
   }
   return statuses
 })
 
 function createDeal() {
-  if (deal.website && !deal.website.startsWith('http')) {
+  if (deal.doc.website && !deal.doc.website.startsWith('http')) {
-    deal.website = 'https://' + deal.website
+    deal.doc.website = 'https://' + deal.doc.website
   }
   if (chooseExistingContact.value) {
-    deal['first_name'] = null
+    deal.doc['first_name'] = null
-    deal['last_name'] = null
+    deal.doc['last_name'] = null
-    deal['email'] = null
+    deal.doc['email'] = null
-    deal['mobile_no'] = null
+    deal.doc['mobile_no'] = null
-  } else deal['contact'] = null
+  } else deal.doc['contact'] = null
 
   createResource({
     url: 'crm.fcrm.doctype.crm_deal.crm_deal.create_deal',
-    params: { args: deal },
+    params: { args: deal.doc },
     auto: true,
     validate() {
       error.value = null
-      if (deal.annual_revenue) {
+      if (deal.doc.annual_revenue) {
-        if (typeof deal.annual_revenue === 'string') {
+        if (typeof deal.doc.annual_revenue === 'string') {
-          deal.annual_revenue = deal.annual_revenue.replace(/,/g, '')
+          deal.doc.annual_revenue = deal.doc.annual_revenue.replace(/,/g, '')
-        } else if (isNaN(deal.annual_revenue)) {
+        } else if (isNaN(deal.doc.annual_revenue)) {
           error.value = __('Annual Revenue should be a number')
           return error.value
         }
       }
-      if (deal.mobile_no && isNaN(deal.mobile_no.replace(/[-+() ]/g, ''))) {
+      if (
+        deal.doc.mobile_no &&
+        isNaN(deal.doc.mobile_no.replace(/[-+() ]/g, ''))
+      ) {
         error.value = __('Mobile No should be a number')
         return error.value
       }
-      if (deal.email && !deal.email.includes('@')) {
+      if (deal.doc.email && !deal.doc.email.includes('@')) {
         error.value = __('Invalid Email')
         return error.value
       }
-      if (!deal.status) {
+      if (!deal.doc.status) {
         error.value = __('Status is required')
         return error.value
       }
@@ -242,22 +234,19 @@ function createDeal() {
   })
 }
 
-const showQuickEntryModal = defineModel('quickEntry')
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Deal' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 
 onMounted(() => {
-  Object.assign(deal, props.defaults)
+  Object.assign(deal.doc, props.defaults)
-  if (!deal.deal_owner) {
+  if (!deal.doc.deal_owner) {
-    deal.deal_owner = getUser().name
+    deal.doc.deal_owner = getUser().name
   }
-  if (!deal.status && dealStatuses.value[0].value) {
+  if (!deal.doc.status && dealStatuses.value[0].value) {
-    deal.status = dealStatuses.value[0].value
+    deal.doc.status = dealStatuses.value[0].value
   }
 })
 </script>

frontend/src/components/Modals/GlobalModals.vue

@@ -4,19 +4,24 @@
     v-model="showCreateDocumentModal"
     :doctype="createDocumentDoctype"
     :data="createDocumentData"
-    @showQuickEntryModal="(dt) => openQuickEntryModal(dt)"
     @callback="(data) => createDocumentCallback(data)"
   />
   <QuickEntryModal
     v-if="showQuickEntryModal"
     v-model="showQuickEntryModal"
-    :doctype="quickEntryDoctype"
+    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,
@@ -24,14 +29,11 @@ import {
   createDocumentData,
   createDocumentCallback,
 } from '@/composables/document'
-import { showAboutModal } from '@/composables/settings'
+import {
-import { ref } from 'vue'
+  showQuickEntryModal,
-
+  quickEntryProps,
-const showQuickEntryModal = ref(false)
+  showAddressModal,
-const quickEntryDoctype = ref('')
+  addressProps,
-
+  showAboutModal
-function openQuickEntryModal(dt) {
+} from '@/composables/modals'
-  showQuickEntryModal.value = true
-  quickEntryDoctype.value = dt
-}
 </script>

frontend/src/components/Modals/LeadModal.vue

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div>
-          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead" />
+          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead.doc" />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
@@ -48,10 +48,12 @@ import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { sessionStore } from '@/stores/session'
 import { isMobileView } from '@/composables/settings'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { computed, onMounted, ref, reactive, nextTick } from 'vue'
+import { useDocument } from '@/data/document'
+import { computed, onMounted, ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -68,6 +70,20 @@ const router = useRouter()
 const error = ref(null)
 const isLeadCreating = ref(false)
 
+const { document: lead } = useDocument('CRM Lead')
+
+if (Object.keys(lead.doc).length != 0) {
+  lead.doc = {}
+}
+
+const leadStatuses = computed(() => {
+  let statuses = statusOptions('lead')
+  if (!lead.doc.status) {
+    lead.doc.status = statuses?.[0]?.value
+  }
+  return statuses
+})
+
 const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'CRM Lead'],
@@ -81,11 +97,11 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = leadStatuses.value
-              field.prefix = getLeadStatus(lead.status).color
+              field.prefix = getLeadStatus(lead.doc.status).color
             }
 
             if (field.fieldtype === 'Table') {
-              lead[field.fieldname] = []
+              lead.doc[field.fieldname] = []
             }
           })
         })
@@ -94,23 +110,6 @@ const tabs = createResource({
   },
 })
 
-const lead = reactive({
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  email: '',
-  mobile_no: '',
-  gender: '',
-  organization: '',
-  website: '',
-  no_of_employees: '',
-  territory: '',
-  annual_revenue: '',
-  industry: '',
-  status: '',
-  lead_owner: '',
-})
-
 const createLead = createResource({
   url: 'frappe.client.insert',
   makeParams(values) {
@@ -123,43 +122,38 @@ const createLead = createResource({
   },
 })
 
-const leadStatuses = computed(() => {
-  let statuses = statusOptions('lead')
-  if (!lead.status) {
-    lead.status = statuses?.[0]?.value
-  }
-  return statuses
-})
-
 function createNewLead() {
-  if (lead.website && !lead.website.startsWith('http')) {
+  if (lead.doc.website && !lead.doc.website.startsWith('http')) {
-    lead.website = 'https://' + lead.website
+    lead.doc.website = 'https://' + lead.doc.website
   }
 
-  createLead.submit(lead, {
+  createLead.submit(lead.doc, {
     validate() {
       error.value = null
-      if (!lead.first_name) {
+      if (!lead.doc.first_name) {
         error.value = __('First Name is mandatory')
         return error.value
       }
-      if (lead.annual_revenue) {
+      if (lead.doc.annual_revenue) {
-        if (typeof lead.annual_revenue === 'string') {
+        if (typeof lead.doc.annual_revenue === 'string') {
-          lead.annual_revenue = lead.annual_revenue.replace(/,/g, '')
+          lead.doc.annual_revenue = lead.doc.annual_revenue.replace(/,/g, '')
-        } else if (isNaN(lead.annual_revenue)) {
+        } else if (isNaN(lead.doc.annual_revenue)) {
           error.value = __('Annual Revenue should be a number')
           return error.value
         }
       }
-      if (lead.mobile_no && isNaN(lead.mobile_no.replace(/[-+() ]/g, ''))) {
+      if (
+        lead.doc.mobile_no &&
+        isNaN(lead.doc.mobile_no.replace(/[-+() ]/g, ''))
+      ) {
         error.value = __('Mobile No should be a number')
         return error.value
       }
-      if (lead.email && !lead.email.includes('@')) {
+      if (lead.doc.email && !lead.doc.email.includes('@')) {
         error.value = __('Invalid Email')
         return error.value
       }
-      if (!lead.status) {
+      if (!lead.doc.status) {
         error.value = __('Status is required')
         return error.value
       }
@@ -185,22 +179,19 @@ function createNewLead() {
   })
 }
 
-const showQuickEntryModal = defineModel('quickEntry')
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
+  quickEntryProps.value = { doctype: 'CRM Lead' }
-    show.value = false
+  nextTick(() => (show.value = false))
-  })
 }
 
 onMounted(() => {
-  Object.assign(lead, props.defaults)
+  Object.assign(lead.doc, props.defaults)
-  if (!lead.lead_owner) {
+  if (!lead.doc?.lead_owner) {
-    lead.lead_owner = getUser().name
+    lead.doc.lead_owner = getUser().name
   }
-  if (!lead.status && leadStatuses.value[0]?.value) {
+  if (!lead.doc?.status && leadStatuses.value[0]?.value) {
-    lead.status = leadStatuses.value[0].value
+    lead.doc.status = leadStatuses.value[0].value
   }
 })
 </script>

frontend/src/components/Modals/OrganizationModal.vue

@@ -9,7 +9,12 @@
             </h3>
           </div>
           <div class="flex items-center gap-1">
-            <Button v-if="isManager() && !isMobileView" variant="ghost" class="w-7" @click="openQuickEntryModal">
+            <Button
+              v-if="isManager() && !isMobileView"
+              variant="ghost"
+              class="w-7"
+              @click="openQuickEntryModal"
+            >
               <EditIcon class="w-4 h-4" />
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
@@ -17,12 +22,23 @@
             </Button>
           </div>
         </div>
-        <FieldLayout v-if="tabs.data?.length" :tabs="tabs.data" :data="_organization" doctype="CRM Organization" />
+        <FieldLayout
+          v-if="tabs.data?.length"
+          :tabs="tabs.data"
+          :data="_organization.doc"
+          doctype="CRM Organization"
+        />
         <ErrorMessage class="mt-8" v-if="error" :message="__(error)" />
       </div>
       <div class="px-4 pt-4 pb-7 sm:px-6">
         <div class="space-y-2">
-          <Button class="w-full" variant="solid" :label="__('Create')" :loading="loading" @click="createOrganization" />
+          <Button
+            class="w-full"
+            variant="solid"
+            :label="__('Create')"
+            :loading="loading"
+            @click="createOrganization"
+          />
         </div>
       </div>
     </template>
@@ -34,9 +50,16 @@ 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,
+  showAddressModal,
+  addressProps,
+} from '@/composables/modals'
+import { useDocument } from '@/data/document'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -44,13 +67,11 @@ const props = defineProps({
     type: Object,
     default: {
       redirect: true,
-      afterInsert: () => { },
+      afterInsert: () => {},
     },
   },
 })
 
-const emit = defineEmits(['openAddressModal'])
-
 const { isManager } = usersStore()
 
 const router = useRouter()
@@ -60,30 +81,32 @@ const organization = defineModel('organization')
 const loading = ref(false)
 const title = ref(null)
 
-let _organization = ref({
+const { document: _organization } = useDocument('CRM Organization')
-  organization_name: '',
+
-  website: '',
+if (Object.keys(_organization.doc).length != 0) {
-  annual_revenue: '',
+  _organization.doc = { no_of_employees: '1-10' }
-  no_of_employees: '1-10',
+}
-  industry: '',
-})
 
 let doc = ref({})
 const error = ref(null)
 
 async function createOrganization() {
-  const doc = await call('frappe.client.insert', {
+  const doc = await call(
-    doc: {
+    'frappe.client.insert',
-      doctype: 'CRM Organization',
+    {
-      ..._organization.value,
+      doc: {
+        doctype: 'CRM Organization',
+        ..._organization.doc,
+      },
     },
-  }, {
+    {
-    onError: (err) => {
+      onError: (err) => {
-      if (err.error.exc_type == 'ValidationError') {
+        if (err.error.exc_type == 'ValidationError') {
-        error.value = err.error?.messages?.[0]
+          error.value = err.error?.messages?.[0]
-      }
+        }
-    }
+      },
-  })
+    },
+  )
   loading.value = false
   if (doc.name) {
     capture('organization_created')
@@ -116,17 +139,13 @@ const tabs = createResource({
           column.fields.forEach((field) => {
             if (field.fieldname == 'address') {
               field.create = (value, close) => {
-                _organization.value.address = value
+                _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.value[field.fieldname] = []
+              _organization.doc[field.fieldname] = []
             }
           })
         })
@@ -135,23 +154,25 @@ const tabs = createResource({
   },
 })
 
-watch(
+onMounted(() => {
-  () => show.value,
+  Object.assign(
-  (value) => {
+    _organization.doc,
-    if (!value) return
+    organization.value?.doc || organization.value || {},
-    nextTick(() => {
+  )
-      // TODO: Issue with FormControl
+})
-      // title.value.el.focus()
-      doc.value = organization.value?.doc || organization.value || {}
-      _organization.value = { ...doc.value }
-    })
-  },
-)
-
-const showQuickEntryModal = defineModel('showQuickEntryModal')
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  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/components/UserDropdown.vue

@@ -55,11 +55,8 @@ import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { getSettings } from '@/stores/settings'
-import {
+import { showSettings, isMobileView } from '@/composables/settings'
-  showSettings,
+import { showAboutModal } from '@/composables/modals'
-  isMobileView,
-  showAboutModal,
-} from '@/composables/settings'
 import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
 import { Dropdown } from 'frappe-ui'
 import { theme, toggleTheme } from '@/stores/theme'

frontend/src/composables/modals.js

@@ -0,0 +1,9 @@
+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/composables/settings.js

@@ -42,5 +42,3 @@ export const isMobileView = computed(() => window.innerWidth < 768)
 
 export const showSettings = ref(false)
 export const activeSettingsPage = ref('')
-
-export const showAboutModal = ref(false)

frontend/src/data/document.js

@@ -1,6 +1,7 @@
 import { getScript } from '@/data/script'
 import { runSequentially } from '@/utils'
 import { createDocumentResource, toast } from 'frappe-ui'
+import { reactive } from 'vue'
 
 const documentsCache = {}
 const controllersCache = {}
@@ -10,27 +11,34 @@ export function useDocument(doctype, docname) {
 
   documentsCache[doctype] = documentsCache[doctype] || {}
 
-  if (!documentsCache[doctype][docname]) {
+  if (!documentsCache[doctype][docname || '']) {
-    documentsCache[doctype][docname] = createDocumentResource({
+    if (docname) {
-      doctype: doctype,
+      documentsCache[doctype][docname] = createDocumentResource({
-      name: docname,
+        doctype: doctype,
-      onSuccess: async () => await setupFormScript(),
+        name: docname,
-      setValue: {
+        onSuccess: async () => await setupFormScript(),
-        onSuccess: () => {
+        setValue: {
-          toast.success(__('Document updated successfully'))
+          onSuccess: () => {
+            toast.success(__('Document updated successfully'))
+          },
+          onError: (err) => {
+            toast.error(__('Error updating document'))
+            console.error(err)
+          },
         },
-        onError: (err) => {
+      })
-          toast.error(__('Error updating document'))
+    } else {
-          console.error(err)
+      documentsCache[doctype][''] = reactive({
-        },
+        doc: {},
-      },
+      })
-    })
+      setupFormScript()
+    }
   }
 
   async function setupFormScript() {
     if (
       controllersCache[doctype] &&
-      typeof controllersCache[doctype][docname] === 'object'
+      typeof controllersCache[doctype][docname || ''] === 'object'
     ) {
       return
     }
@@ -39,9 +47,11 @@ export function useDocument(doctype, docname) {
       controllersCache[doctype] = {}
     }
 
-    controllersCache[doctype][docname] = {}
+    controllersCache[doctype][docname || ''] = {}
 
-    const controllersArray = await setupScript(documentsCache[doctype][docname])
+    const controllersArray = await setupScript(
+      documentsCache[doctype][docname || ''],
+    )
 
     if (!controllersArray || controllersArray.length === 0) return
 
@@ -53,14 +63,14 @@ export function useDocument(doctype, docname) {
       }
       organizedControllers[controllerKey].push(controller)
     }
-    controllersCache[doctype][docname] = organizedControllers
+    controllersCache[doctype][docname || ''] = organizedControllers
   }
 
   function getControllers(row = null) {
     const _doctype = row?.doctype || doctype
     const controllerKey = _doctype.replace(/\s+/g, '')
 
-    const docControllers = controllersCache[doctype]?.[docname]
+    const docControllers = controllersCache[doctype]?.[docname || '']
 
     if (
       typeof docControllers === 'object' &&
@@ -86,7 +96,7 @@ export function useDocument(doctype, docname) {
         this.value = row[fieldname]
         this.oldValue = getOldValue(fieldname, row)
       } else {
-        this.value = documentsCache[doctype][docname].doc[fieldname]
+        this.value = documentsCache[doctype][docname || ''].doc[fieldname]
         this.oldValue = getOldValue(fieldname)
       }
       await this[fieldname]?.()
@@ -151,9 +161,9 @@ export function useDocument(doctype, docname) {
   }
 
   function getOldValue(fieldname, row) {
-    if (!documentsCache[doctype][docname]) return ''
+    if (!documentsCache[doctype][docname || '']) return ''
 
-    const document = documentsCache[doctype][docname]
+    const document = documentsCache[doctype][docname || '']
     const oldDoc = document.originalDoc
 
     if (row?.name) {
@@ -166,7 +176,7 @@ export function useDocument(doctype, docname) {
   }
 
   return {
-    document: documentsCache[doctype][docname],
+    document: documentsCache[doctype][docname || ''],
     triggerOnChange,
     triggerOnRowAdd,
     triggerOnRowRemove,

frontend/src/data/script.js

@@ -33,7 +33,7 @@ export function getScript(doctype, view = 'Form') {
   }
 
   async function setupScript(document, helpers = {}) {
-    await scripts.promise
+    await scripts.list.promise
 
     let scriptDefs = doctypeScripts[doctype]
     if (!scriptDefs || Object.keys(scriptDefs).length === 0) return null

frontend/src/pages/CallLogs.vue

@@ -63,7 +63,7 @@
   />
   <CallLogModal
     v-model="showCallLogModal"
-    v-model:callLog="callLog"
+    v-model:callLog="callLog.data"
     :options="{ afterInsert: () => callLogs.reload() }"
   />
 </template>

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

@@ -63,17 +63,10 @@
     </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>
@@ -82,14 +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 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 } =
@@ -97,14 +87,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
 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)
@@ -166,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/Deal.vue

@@ -280,6 +280,7 @@
     }"
   />
   <ContactModal
+    v-if="showContactModal"
     v-model="showContactModal"
     :contact="_contact"
     :options="{

frontend/src/pages/Deals.vue

@@ -241,7 +241,6 @@
   <DealModal
     v-if="showDealModal"
     v-model="showDealModal"
-    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -258,11 +257,6 @@
     doctype="CRM Deal"
     :doc="docname"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Deal"
-  />
 </template>
 
 <script setup>
@@ -282,7 +276,6 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import DealModal from '@/components/Modals/DealModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@@ -306,7 +299,6 @@ const route = useRoute()
 
 const dealsListView = ref(null)
 const showDealModal = ref(false)
-const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

frontend/src/pages/Lead.vue

@@ -293,12 +293,6 @@
       />
     </template>
   </Dialog>
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Deal"
-    :onlyRequired="true"
-  />
   <FilesUploader
     v-if="lead.data?.name"
     v-model="showFilesUploader"
@@ -339,7 +333,6 @@ import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import {
@@ -348,6 +341,7 @@ import {
   setupCustomizations,
   copyToClipboard,
 } from '@/utils'
+import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { sessionStore } from '@/stores/session'
@@ -709,10 +703,12 @@ const dealTabs = createResource({
   },
 })
 
-const showQuickEntryModal = ref(false)
-
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
+  quickEntryProps.value = {
+    doctype: 'CRM Deal',
+    onlyRequired: true,
+  }
   showConvertToDealModal.value = false
 }
 </script>

frontend/src/pages/Leads.vue

@@ -267,7 +267,6 @@
   <LeadModal
     v-if="showLeadModal"
     v-model="showLeadModal"
-    v-model:quickEntry="showQuickEntryModal"
     :defaults="defaults"
   />
   <NoteModal
@@ -284,7 +283,6 @@
     doctype="CRM Lead"
     :doc="docname"
   />
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 
 <script setup>
@@ -304,7 +302,6 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global'
@@ -326,7 +323,6 @@ const route = useRoute()
 
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
-const showQuickEntryModal = ref(false)
 
 const defaults = reactive({})
 

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/MobileDeal.vue

@@ -222,6 +222,7 @@
     }"
   />
   <ContactModal
+    v-if="showContactModal"
     v-model="showContactModal"
     :contact="_contact"
     :options="{

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,12 +164,6 @@
     :errorTitle="errorTitle"
     :errorMessage="errorMessage"
   />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Organization"
-  />
-  <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
@@ -178,14 +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 QuickEntryModal from '@/components/Modals/QuickEntryModal.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'
@@ -222,7 +215,6 @@ const { getUser } = usersStore()
 const { $dialog } = globalStore()
 const { getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Organization')
-const showQuickEntryModal = ref(false)
 
 const route = useRoute()
 const router = useRouter()
@@ -342,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',
@@ -363,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
@@ -572,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

@@ -63,16 +63,9 @@
     </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'
@@ -80,8 +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 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'
@@ -94,12 +85,9 @@ 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)
@@ -162,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>

frontend/src/pages/Welcome.vue

@@ -41,21 +41,14 @@
       @click="showLeadModal = true"
     />
   </div>
-  <LeadModal
+  <LeadModal v-if="showLeadModal" v-model="showLeadModal" />
-    v-if="showLeadModal"
-    v-model="showLeadModal"
-    v-model:quickEntry="showQuickEntryModal"
-  />
-  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
 </template>
 <script setup>
 import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
 import GoogleIcon from '@/components/Icons/GoogleIcon.vue'
 import LeadModal from '@/components/Modals/LeadModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import { ref } from 'vue'
 
 const name = ref('John Doe')
 const showLeadModal = ref(false)
-const showQuickEntryModal = ref(false)
 </script>