refactor: call log modal code refactor

(cherry picked from commit 28ea88f61e731aeeac64cd4272a61b7149d6a3d5)

frontend/src/components/Activities/AllModals.vue

@@ -16,8 +16,9 @@
     @after="redirect('notes')"
   />
   <CallLogModal
+    v-if="showCallLogModal"
     v-model="showCallLogModal"
-    v-model:callLog="callLog"
+    :data="callLog"
     :options="{ afterInsert: () => activities.reload() }"
   />
 </template>

frontend/src/components/Activities/CallArea.vue

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

frontend/src/components/Modals/CallLogModal.vue

@@ -44,9 +44,13 @@ import { getRandom } from '@/utils'
 import { capture } from '@/telemetry'
 import { useDocument } from '@/data/document'
 import { FeatherIcon, createResource, ErrorMessage, Badge } from 'frappe-ui'
-import { ref, nextTick, watch, computed } from 'vue'
+import { ref, nextTick, computed, onMounted } from 'vue'
 
 const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
   options: {
     type: Object,
     default: {
@@ -58,14 +62,15 @@ const props = defineProps({
 const { isManager } = usersStore()
 
 const show = defineModel()
-const _callLog = defineModel('callLog')
 
 const loading = ref(false)
 const error = ref(null)
-const title = ref(null)
 const editMode = ref(false)
 
-const callLog = ref(null)
+const { document: callLog } = useDocument(
+  'CRM Call Log',
+  props.data?.name || '',
+)
 
 const dialogOptions = computed(() => {
   let title = !editMode.value ? __('New Call Log') : __('Edit Call Log')
@@ -109,7 +114,7 @@ const callBacks = {
 
 async function updateCallLog() {
   loading.value = true
-  await callLog.value.save.submit(null, callBacks)
+  await callLog.save.submit(null, callBacks)
 }
 
 const createCallLog = createResource({
@@ -120,7 +125,7 @@ const createCallLog = createResource({
         doctype: 'CRM Call Log',
         id: getRandom(6),
         telephony_medium: 'Manual',
-        ...callLog.value.doc,
+        ...callLog.doc,
       },
     }
   },
@@ -141,23 +146,13 @@ function handleCallLogUpdate(doc) {
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
-watch(
+onMounted(() => {
-  () => show.value,
+  editMode.value = props.data?.name ? true : false
-  (value) => {
-    if (!value) return
-    editMode.value = false
 
-    let docname = _callLog.value?.name
+  if (!props.data?.name) {
-    const { document } = useDocument('CRM Call Log', docname)
+    callLog.doc = { ...props.data }
-    callLog.value = document
+  }
-
+})
-    if (docname) {
-      editMode.value = true
-    } else {
-      callLog.value.doc = { ..._callLog.value }
-    }
-  },
-)
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true

frontend/src/pages/CallLogs.vue

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