refactor: use doc in activity & child components

(cherry picked from commit af830b8782f2c9dbeca8ba1bce29565ab03388bc)

frontend/src/components/Activities/Activities.vue

@@ -367,7 +367,7 @@
     <div v-else-if="title == 'Data'" class="h-full flex flex-col px-3 sm:px-10">
       <DataFields
         :doctype="doctype"
-        :docname="doc.data.name"
+        :docname="docname"
         @beforeSave="(data) => emit('beforeSave', data)"
         @afterSave="(data) => emit('afterSave', data)"
       />
@@ -438,10 +438,9 @@
     :doc="doc"
   />
   <FilesUploader
-    v-if="doc.data?.name"
     v-model="showFilesUploader"
     :doctype="doctype"
-    :docname="doc.data.name"
+    :docname="docname"
     @after="
       () => {
         all_activities.reload()
@@ -514,6 +513,10 @@ const props = defineProps({
     type: String,
     default: 'CRM Lead',
   },
+  docname: {
+    type: String,
+    default: '',
+  },
   tabs: {
     type: Array,
     default: () => [],
@@ -524,11 +527,12 @@ const emit = defineEmits(['beforeSave', 'afterSave'])
 
 const route = useRoute()
 
-const doc = defineModel()
 const reload = defineModel('reload')
 const tabIndex = defineModel('tabIndex')
 
-const { document: _document } = useDocument(props.doctype, doc.value.data.name)
+const { document: _document } = useDocument(props.doctype, props.docname)
+
+const doc = computed(() => _document.doc || {})
 
 const reload_email = ref(false)
 const modalRef = ref(null)
@@ -545,8 +549,8 @@ const changeTabTo = (tabName) => {
 
 const all_activities = createResource({
   url: 'crm.api.activities.get_activities',
-  params: { name: doc.value.data.name },
-  cache: ['activity', doc.value.data.name],
+  params: { name: props.docname },
+  cache: ['activity', props.docname],
   auto: true,
   transform: ([versions, calls, notes, tasks, attachments]) => {
     return { versions, calls, notes, tasks, attachments }
@@ -557,10 +561,10 @@ const showWhatsappTemplates = ref(false)
 
 const whatsappMessages = createResource({
   url: 'crm.api.whatsapp.get_whatsapp_messages',
-  cache: ['whatsapp_messages', doc.value.data.name],
+  cache: ['whatsapp_messages', props.docname],
   params: {
     reference_doctype: props.doctype,
-    reference_name: doc.value.data.name,
+    reference_name: props.docname,
   },
   auto: true,
   transform: (data) => sortByCreation(data),
@@ -575,7 +579,7 @@ onMounted(() => {
   $socket.on('whatsapp_message', (data) => {
     if (
       data.reference_doctype === props.doctype &&
-      data.reference_name === doc.value.data.name
+      data.reference_name === props.docname
     ) {
       whatsappMessages.reload()
     }
@@ -597,8 +601,8 @@ function sendTemplate(template) {
     url: 'crm.api.whatsapp.send_whatsapp_template',
     params: {
       reference_doctype: props.doctype,
-      reference_name: doc.value.data.name,
-      to: doc.value.data.mobile_no,
+      reference_name: props.docname,
+      to: doc.value.mobile_no,
       template,
     },
     auto: true,
@@ -801,7 +805,7 @@ const callActions = computed(() => {
     },
     {
       label: __('Make a Call'),
-      onClick: () => makeCall(doc.data.mobile_no),
+      onClick: () => makeCall(doc.value.mobile_no),
       condition: () => callEnabled.value,
     },
   ]

frontend/src/components/Activities/ActivityHeader.vue

@@ -140,7 +140,7 @@ const defaultActions = computed(() => {
     {
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
       label: __('Make a Call'),
-      onClick: () => makeCall(props.doc.data.mobile_no),
+      onClick: () => makeCall(props.doc.mobile_no),
       condition: () => callEnabled.value,
     },
     {
@@ -184,7 +184,7 @@ const callActions = computed(() => {
     {
       label: __('Make a Call'),
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
-      onClick: () => makeCall(props.doc.data.mobile_no),
+      onClick: () => makeCall(props.doc.mobile_no),
       condition: () => callEnabled.value,
     },
   ]

frontend/src/components/Activities/AllModals.vue

@@ -4,7 +4,7 @@
     v-model:reloadTasks="activities"
     :task="task"
     :doctype="doctype"
-    :doc="doc.data?.name"
+    :doc="doc?.name"
     @after="redirect('tasks')"
   />
   <NoteModal
@@ -12,7 +12,7 @@
     v-model:reloadNotes="activities"
     :note="note"
     :doctype="doctype"
-    :doc="doc.data?.name"
+    :doc="doc?.name"
     @after="redirect('notes')"
   />
   <CallLogModal
@@ -92,8 +92,8 @@ const referenceDoc = ref({})
 
 function createCallLog() {
   let doctype = props.doctype
-  let docname = props.doc.data?.name
-  referenceDoc.value = { ...props.doc.data }
+  let docname = props.doc?.name
+  referenceDoc.value = { ...props.doc }
   callLog.value = {
     reference_doctype: doctype,
     reference_docname: docname,

frontend/src/components/Activities/WhatsAppBox.vue

@@ -107,9 +107,9 @@ function sendTextMessage(event) {
 async function sendWhatsAppMessage() {
   let args = {
     reference_doctype: props.doctype,
-    reference_name: doc.value.data.name,
+    reference_name: doc.value.name,
     message: content.value,
-    to: doc.value.data.mobile_no,
+    to: doc.value.mobile_no,
     attach: whatsapp.value.attach || '',
     reply_to: reply.value?.name || '',
     content_type: whatsapp.value.content_type,

frontend/src/components/CommunicationArea.vue

@@ -45,7 +45,7 @@
         onClick: () => {
           showEmailBox = false
           newEmailEditor.subject = subject
-          newEmailEditor.toEmails = doc.data.email ? [doc.data.email] : []
+          newEmailEditor.toEmails = doc.email ? [doc.email] : []
           newEmailEditor.ccEmails = []
           newEmailEditor.bccEmails = []
           newEmailEditor.cc = false
@@ -54,7 +54,7 @@
         },
       }"
       :editable="showEmailBox"
-      v-model="doc.data"
+      v-model="doc"
       v-model:attachments="attachments"
       :doctype="doctype"
       :subject="subject"
@@ -79,7 +79,7 @@
         },
       }"
       :editable="showCommentBox"
-      v-model="doc.data"
+      v-model="doc"
       v-model:attachments="attachments"
       :doctype="doctype"
       :placeholder="__('@John, can you please check this?')"
@@ -125,12 +125,12 @@ const attachments = ref([])
 
 const subject = computed(() => {
   let prefix = ''
-  if (doc.value.data?.lead_name) {
-    prefix = doc.value.data.lead_name
-  } else if (doc.value.data?.organization) {
-    prefix = doc.value.data.organization
+  if (doc.value?.lead_name) {
+    prefix = doc.value.lead_name
+  } else if (doc.value?.organization) {
+    prefix = doc.value.organization
   }
-  return `${prefix} (#${doc.value.data.name})`
+  return `${prefix} (#${doc.value.name})`
 })
 
 const signature = createResource({
@@ -199,7 +199,7 @@ async function sendMail() {
     subject: subject,
     content: newEmail.value,
     doctype: props.doctype,
-    name: doc.value.data.name,
+    name: doc.value.name,
     send_email: 1,
     sender: getUser().email,
     sender_full_name: getUser()?.full_name || undefined,
@@ -209,7 +209,7 @@ async function sendMail() {
 async function sendComment() {
   let comment = await call('frappe.desk.form.utils.add_comment', {
     reference_doctype: props.doctype,
-    reference_name: doc.value.data.name,
+    reference_name: doc.value.name,
     content: newComment.value,
     comment_email: getUser().email,
     comment_by: getUser()?.full_name || undefined,

frontend/src/pages/Deal.vue

@@ -43,16 +43,16 @@
       </Dropdown>
     </template>
   </LayoutHeader>
-  <div v-if="deal.data" class="flex h-full overflow-hidden">
+  <div v-if="doc.name" class="flex h-full overflow-hidden">
     <Tabs as="div" v-model="tabIndex" :tabs="tabs">
       <template #tab-panel>
         <Activities
           ref="activities"
           doctype="CRM Deal"
+          :docname="doc.name"
           :tabs="tabs"
           v-model:reload="reload"
           v-model:tabIndex="tabIndex"
-          v-model="deal"
           @beforeSave="beforeStatusChange"
           @afterSave="reloadAssignees"
         />
@@ -72,12 +72,12 @@
               size="3xl"
               class="size-12"
               :label="title"
-              :image="organization.data?.organization_logo"
+              :image="organization?.organization_logo"
             />
           </div>
         </Tooltip>
         <div class="flex flex-col gap-2.5 truncate text-ink-gray-9">
-          <Tooltip :text="organization.data?.name || __('Set an organization')">
+          <Tooltip :text="organization?.name || __('Set an organization')">
             <div class="truncate text-2xl font-medium">
               {{ title }}
             </div>
@@ -465,35 +465,28 @@ watch(
   { once: true },
 )
 
-const deal = createResource({
-  url: 'crm.fcrm.doctype.crm_deal.api.get_deal',
-  params: { name: props.dealId },
-  cache: ['deal', props.dealId],
-  onSuccess: (data) => {
-    if (data.organization) {
-      organization.update({
-        params: { doctype: 'CRM Organization', name: data.organization },
-      })
-      organization.fetch()
+const organizationDocument = ref(null)
+
+watch(
+  () => doc.value.organization,
+  (org) => {
+    if (org && !organizationDocument.value?.doc) {
+      let { document: _organizationDocument } = useDocument(
+        'CRM Organization',
+        org,
+      )
+      organizationDocument.value = _organizationDocument
     }
   },
-})
+  { immediate: true },
+)
 
-const organization = createResource({
-  url: 'frappe.client.get',
-  onSuccess: (data) => (deal.data._organizationObj = data),
-})
+const organization = computed(() => organizationDocument.value?.doc || {})
 
 onMounted(() => {
   $socket.on('crm_customer_created', () => {
     toast.success(__('Customer created successfully'))
   })
-
-  if (deal.data) {
-    organization.data = deal.data._organizationObj
-    return
-  }
-  deal.fetch()
 })
 
 onBeforeUnmount(() => {

frontend/src/pages/Lead.vue

@@ -48,16 +48,16 @@
       />
     </template>
   </LayoutHeader>
-  <div v-if="lead.data" class="flex h-full overflow-hidden">
+  <div v-if="doc.name" class="flex h-full overflow-hidden">
     <Tabs as="div" v-model="tabIndex" :tabs="tabs">
       <template #tab-panel>
         <Activities
           ref="activities"
           doctype="CRM Lead"
+          :docname="doc.name"
           :tabs="tabs"
           v-model:reload="reload"
           v-model:tabIndex="tabIndex"
-          v-model="lead"
           @beforeSave="saveChanges"
           @afterSave="reloadAssignees"
         />
@@ -365,17 +365,6 @@ watch(
   { once: true },
 )
 
-const lead = createResource({
-  url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
-  params: { name: props.leadId },
-  cache: ['lead', props.leadId],
-})
-
-onMounted(() => {
-  if (lead.data) return
-  lead.fetch()
-})
-
 const reload = ref(false)
 const showFilesUploader = ref(false)