fix: handle new document for call log

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_docname: docname,
-    },
+    reference_doctype: doctype,
+    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/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,19 +24,33 @@
           </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"
-            :label="__(action.label)" :loading="loading" />
+          <Button
+            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" />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Call Log"
+  />
 </template>
 
 <script setup>
@@ -41,14 +61,21 @@ import { usersStore } from '@/stores/users'
 import { isMobileView } from '@/composables/settings'
 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,
+  call,
+} from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
 const props = defineProps({
   options: {
     type: Object,
     default: {
-      afterInsert: () => { },
+      afterInsert: () => {},
     },
   },
 })
@@ -56,26 +83,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({
-  name: '',
-  type: '',
-  from: '',
-  to: '',
-  medium: '',
-  duration: '',
-  caller: '',
-  receiver: '',
-  status: '',
-  recording_url: '',
-  telephony_medium: 'Manual',
-})
+const callLog = ref(null)
 
 const dialogOptions = computed(() => {
   let title = !editMode.value ? __('New Call Log') : __('Edit Call Log')
@@ -99,41 +114,28 @@ const tabs = createResource({
   auto: true,
 })
 
-let doc = ref({})
-
-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) {
+const callBacks = {
+  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('Log:')[1].trim())
+        .join(', ')
+      error.value = `These fields are required: ${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 +145,7 @@ const createCallLog = createResource({
         doctype: 'CRM Call Log',
         id: getRandom(6),
         telephony_medium: 'Manual',
-        ..._callLog.value,
+        ...callLog.value.doc,
       },
     }
   },
@@ -155,15 +157,7 @@ const createCallLog = createResource({
     }
   },
   onError(err) {
-    loading.value = false
-    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
+    callBacks.onError(err)
   },
 })
 
@@ -177,15 +171,16 @@ watch(
   (value) => {
     if (!value) return
     editMode.value = false
-    nextTick(() => {
-      // TODO: Issue with FormControl
-      // title.value.el.focus()
-      doc.value = callLog.value?.data || {}
-      _callLog.value = { ...doc.value }
-      if (_callLog.value.name) {
-        editMode.value = true
-      }
-    })
+
+    let docname = _callLog.value?.name
+    const { document } = useDocument('CRM Call Log', docname)
+    callLog.value = document
+
+    if (docname) {
+      editMode.value = true
+    } else {
+      callLog.value.doc = { ..._callLog.value }
+    }
   },
 )
 

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>