fix: show/add/delete note in lead/deal notes tab

crm/crm/doctype/crm_note/crm_note.json

@@ -8,7 +8,8 @@
  "engine": "InnoDB",
  "field_order": [
   "title",
-  "content"
+  "content",
+  "lead"
  ],
  "fields": [
   {
@@ -24,11 +25,17 @@
    "in_list_view": 1,
    "in_standard_filter": 1,
    "label": "Content"
+  },
+  {
+   "fieldname": "lead",
+   "fieldtype": "Link",
+   "label": "Lead",
+   "options": "CRM Lead"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-08-26 12:06:59.674655",
+ "modified": "2023-08-26 19:09:21.850043",
  "modified_by": "Administrator",
  "module": "CRM",
  "name": "CRM Note",

frontend/src/components/Activities.vue

@@ -1,9 +1,65 @@
 <template>
   <div class="p-5 flex items-center justify-between font-medium text-lg">
     <div>{{ title }}</div>
+    <Button
+      v-if="title == 'Calls'"
+      variant="solid"
+      label="Make a call"
+      @click="emit('makeCall')"
+    />
+    <Button
+      v-else-if="title == 'Notes'"
+      variant="solid"
+      label="Create note"
+      @click="emit('makeNote')"
+    />
   </div>
-  <div>
+  <div v-if="activities.length">
-    <div v-for="(activity, i) in activities">
+    <div v-if="title == 'Notes'" class="grid grid-cols-2 gap-4 p-5 pt-0">
+      <div
+        v-for="note in activities"
+        class="group flex flex-col justify-between gap-2 px-4 py-3 border rounded-lg h-40 shadow-sm hover:bg-gray-50 cursor-pointer"
+        @click="emit('makeNote', note)"
+      >
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-medium truncate">
+            {{ note.title }}
+          </div>
+          <Dropdown
+            :options="[
+              {
+                icon: 'trash-2',
+                label: 'Delete',
+                onClick: () => emit('deleteNote', note.name),
+              },
+            ]"
+            @click.stop
+          >
+            <Button
+              icon="more-horizontal"
+              variant="ghosted"
+              class="hover:bg-white"
+            />
+          </Dropdown>
+        </div>
+        <div
+          class="flex-1 text-base leading-5 text-gray-700 overflow-hidden"
+          v-html="note.content"
+        />
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <UserAvatar :user="note.owner" size="xs" />
+            <div class="text-sm text-gray-800">
+              {{ note.owner }}
+            </div>
+          </div>
+          <div class="text-sm text-gray-700">
+            {{ timeAgo(note.modified) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else v-for="(activity, i) in activities">
       <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-5">
         <div
           class="relative flex justify-center after:absolute after:border-l after:border-gray-300 after:top-0 after:left-[50%] after:-z-10"
@@ -95,13 +151,35 @@
       </div>
     </div>
   </div>
+  <div
+    v-else
+    class="flex-1 flex flex-col gap-3 items-center justify-center font-medium text-xl text-gray-500"
+  >
+    <component :is="emptyTextIcon" class="w-10 h-10" />
+    <span>{{ emptyText }}</span>
+    <Button
+      v-if="title == 'Calls'"
+      variant="solid"
+      label="Make a call"
+      @click="emit('makeCall')"
+    />
+    <Button
+      v-else-if="title == 'Notes'"
+      variant="solid"
+      label="Create note"
+      @click="emit('makeNote')"
+    />
+  </div>
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
-import { Button, FeatherIcon, Tooltip } from 'frappe-ui'
+import { Button, FeatherIcon, Tooltip, Dropdown } from 'frappe-ui'
-import { computed } from 'vue'
+import { computed, h } from 'vue'
 
 const { getUser } = usersStore()
 
@@ -116,6 +194,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['makeCall', 'makeNote', 'deleteNote'])
+
 const activities = computed(() => {
   props.activities.forEach((activity) => {
     activity.owner_name = getUser(activity.owner).full_name
@@ -143,6 +223,26 @@ const activities = computed(() => {
   return props.activities
 })
 
+const emptyText = computed(() => {
+  let text = 'No emails communications'
+  if (props.title == 'Calls') {
+    text = 'No call logs'
+  } else if (props.title == 'Notes') {
+    text = 'No notes'
+  }
+  return text
+})
+
+const emptyTextIcon = computed(() => {
+  let icon = EmailIcon
+  if (props.title == 'Calls') {
+    icon = PhoneIcon
+  } else if (props.title == 'Notes') {
+    icon = NoteIcon
+  }
+  return h(icon, { class: 'text-gray-500' })
+})
+
 function timelineIcon(activity_type) {
   if (activity_type == 'creation') {
     return 'plus'

frontend/src/components/NoteModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '4xl' }" @close="updateNote">
+    <template #body-title><div></div></template>
+    <template #body-content>
+      <div
+        class="flex flex-col gap-2 px-20 mt-5 mb-10 min-h-[400px] max-h-[500px] overflow-auto"
+      >
+        <TextInput
+          ref="title"
+          type="text"
+          class="!text-[30px] !h-10 !font-semibold bg-white border-none hover:bg-white focus:!shadow-none focus-visible:!ring-0"
+          v-model="updatedNote.title"
+          placeholder="Untitled note"
+        />
+        <TextEditor
+          ref="content"
+          editor-class="!prose-sm max-w-none p-2 overflow-auto focus:outline-none"
+          :bubbleMenu="true"
+          :content="updatedNote.content"
+          @change="(val) => (updatedNote.content = val)"
+          placeholder="Type something and press enter"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { TextInput, TextEditor, Dialog } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  note: {
+    type: Object,
+    default: {
+      title: '',
+      content: '',
+    },
+  },
+})
+
+const show = defineModel()
+const emit = defineEmits(['updateNote'])
+
+const title = ref(null)
+
+let updatedNote = ref({
+  title: '',
+  content: '',
+})
+
+function updateNote() {
+  if (
+    props.note.title !== updatedNote.value.title ||
+    props.note.content !== updatedNote.value.content
+  ) {
+    emit('updateNote', updatedNote.value)
+  }
+}
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    nextTick(() => {
+      title.value.el.focus()
+      updatedNote.value = { ...props.note }
+    })
+  }
+)
+</script>

frontend/src/pages/Deal.vue

@@ -66,11 +66,17 @@
       <div class="flex-1 flex flex-col">
         <TabPanels class="flex flex-1 overflow-hidden">
           <TabPanel
-            class="flex-1 overflow-y-auto"
+            class="flex-1 flex flex-col overflow-y-auto"
             v-for="tab in tabs"
             :key="tab.label"
           >
-            <Activities :title="tab.activityTitle" :activities="tab.content" />
+            <Activities
+              :title="tab.activityTitle"
+              :activities="tab.content"
+              @makeCall="makeCall(deal.data.mobile_no)"
+              @makeNote="(e) => showNote(e)"
+              @deleteNote="(e) => deleteNote(e)"
+            />
           </TabPanel>
         </TabPanels>
         <CommunicationArea
@@ -88,7 +94,9 @@
             :label="deal.data.organization_name"
             :image="deal.data.organization_logo"
           />
-          <div class="font-medium text-2xl">{{ deal.data.organization_name }}</div>
+          <div class="font-medium text-2xl">
+            {{ deal.data.organization_name }}
+          </div>
           <div class="flex gap-3">
             <Tooltip text="Make a call...">
               <Button
@@ -277,6 +285,7 @@
       </div>
     </div>
   </TabGroup>
+  <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -291,6 +300,7 @@ import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
+import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
@@ -305,12 +315,14 @@ import { usersStore } from '@/stores/users'
 import {
   createResource,
   createDocumentResource,
+  createListResource,
   FeatherIcon,
   Autocomplete,
   FormControl,
   Dropdown,
   Tooltip,
   Avatar,
+  call,
 } from 'frappe-ui'
 import { ref, computed, inject } from 'vue'
 
@@ -390,6 +402,7 @@ const tabs = computed(() => {
       label: 'Notes',
       icon: NoteIcon,
       activityTitle: 'Notes',
+      content: notes.data,
     },
   ]
 })
@@ -444,7 +457,7 @@ const detailSections = computed(() => {
           label: 'Next step',
           type: 'data',
           name: 'next_step',
-        }
+        },
       ],
     },
     {
@@ -489,6 +502,64 @@ const activeAgents = computed(() => {
       }
     })
 })
+
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+const notes = createListResource({
+  type: 'list',
+  doctype: 'CRM Note',
+  cache: ['Notes', props.dealId],
+  fields: ['name', 'title', 'content', 'owner', 'modified'],
+  filters: { lead: props.dealId },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+function showNote(n) {
+  note.value = n || {
+    title: '',
+    content: '',
+  }
+  showNoteModal.value = true
+}
+
+async function deleteNote(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Note',
+    name,
+  })
+  notes.reload()
+}
+
+async function updateNote(note) {
+  if (note.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Note',
+      name: note.name,
+      fieldname: note,
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'CRM Note',
+        title: note.title,
+        content: note.content,
+        lead: props.dealId,
+      },
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  }
+}
 </script>
 
 <style scoped>

frontend/src/pages/Lead.vue

@@ -35,7 +35,11 @@
         </template>
       </Dropdown>
       <Button label="Save" variant="solid" @click="updateLead()" />
-      <Button label="Convert to deal" variant="solid" @click="convertToDeal()" />
+      <Button
+        label="Convert to deal"
+        variant="solid"
+        @click="convertToDeal()"
+      />
     </template>
   </LayoutHeader>
   <TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @change="onTabChange">
@@ -65,11 +69,17 @@
       <div class="flex-1 flex flex-col">
         <TabPanels class="flex flex-1 overflow-hidden">
           <TabPanel
-            class="flex-1 overflow-y-auto"
+            class="flex-1 flex flex-col overflow-y-auto"
             v-for="tab in tabs"
             :key="tab.label"
           >
-            <Activities :title="tab.activityTitle" :activities="tab.content" />
+            <Activities
+              :title="tab.activityTitle"
+              :activities="tab.content"
+              @makeCall="makeCall(lead.data.mobile_no)"
+              @makeNote="(e) => showNote(e)"
+              @deleteNote="(e) => deleteNote(e)"
+            />
           </TabPanel>
         </TabPanels>
         <CommunicationArea
@@ -265,6 +275,7 @@
       </div>
     </div>
   </TabGroup>
+  <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -279,6 +290,7 @@ import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
+import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import {
@@ -293,12 +305,14 @@ import { usersStore } from '@/stores/users'
 import {
   createResource,
   createDocumentResource,
+  createListResource,
   FeatherIcon,
   Autocomplete,
   FormControl,
   Dropdown,
   Tooltip,
   Avatar,
+  call,
 } from 'frappe-ui'
 import { ref, computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
@@ -380,6 +394,7 @@ const tabs = computed(() => {
       label: 'Notes',
       icon: NoteIcon,
       activityTitle: 'Notes',
+      content: notes.data,
     },
   ]
 })
@@ -520,6 +535,64 @@ function convertToDeal() {
   updateLead()
   router.push({ name: 'Deal', params: { dealId: lead.data.name } })
 }
+
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+const notes = createListResource({
+  type: 'list',
+  doctype: 'CRM Note',
+  cache: ['Notes', props.leadId],
+  fields: ['name', 'title', 'content', 'owner', 'modified'],
+  filters: { lead: props.leadId },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+function showNote(n) {
+  note.value = n || {
+    title: '',
+    content: '',
+  }
+  showNoteModal.value = true
+}
+
+async function deleteNote(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Note',
+    name,
+  })
+  notes.reload()
+}
+
+async function updateNote(note) {
+  if (note.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Note',
+      name: note.name,
+      fieldname: note,
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'CRM Note',
+        title: note.title,
+        content: note.content,
+        lead: props.leadId,
+      },
+    })
+    if (d.name) {
+      notes.reload()
+    }
+  }
+}
 </script>
 
 <style scoped>

frontend/src/pages/Notes.vue

@@ -4,17 +4,17 @@
       <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
     <template #right-header>
-      <Button variant="solid" label="Create" @click="openNoteModal">
+      <Button variant="solid" label="Create" @click="createNote">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
   </LayoutHeader>
   <div class="border-b"></div>
-  <div v-if="notes.data" class="grid grid-cols-4 gap-4 p-5">
+  <div v-if="notes.data?.length" class="grid grid-cols-3 gap-4 p-5">
     <div
       v-for="note in notes.data"
       class="group flex flex-col justify-between gap-2 px-5 py-4 border rounded-lg h-52 shadow-sm hover:bg-gray-50 cursor-pointer"
-      @click="openNoteModal(note)"
+      @click="editNote(note)"
     >
       <div class="flex items-center justify-between">
         <div class="text-lg font-medium truncate">
@@ -54,40 +54,28 @@
       </div>
     </div>
   </div>
-  <Dialog
+  <div
-    v-model="showNoteModal"
+    v-else
-    :options="{ size: '4xl' }"
+    class="flex-1 p-5 flex items-center justify-center font-medium text-xl text-gray-500"
-    @close="updateNote"
   >
-    <template #body-title><div></div></template>
+    <div class="flex flex-col items-center gap-2">
-    <template #body-content>
+      <NoteIcon class="w-10 h-10 text-gray-500" />
-      <div
+      <span>No notes</span>
-        class="flex flex-col gap-2 px-20 mt-5 mb-10 min-h-[400px] max-h-[500px] overflow-auto"
+    </div>
-      >
+  </div>
-        <TextInput
+  <NoteModal
-          ref="title"
+    v-model="showNoteModal"
-          type="text"
+    :note="currentNote"
-          class="!text-[30px] !h-10 !font-semibold bg-white border-none hover:bg-white focus:!shadow-none focus-visible:!ring-0"
+    @updateNote="updateNote"
-          v-model="currentNote.title"
+  />
-          placeholder="Untitled note"
-        />
-        <TextEditor
-          ref="content"
-          editor-class="!prose-sm max-w-none p-2 overflow-auto focus:outline-none"
-          :bubbleMenu="true"
-          :content="currentNote.content"
-          @change="(val) => (currentNote.content = val)"
-          placeholder="Type something and press enter"
-        />
-      </div>
-    </template>
-  </Dialog>
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import NoteModal from '@/components/NoteModal.vue'
 import { timeAgo } from '@/utils'
 import {
   FeatherIcon,
@@ -98,7 +86,7 @@ import {
   call,
   Dropdown,
 } from 'frappe-ui'
-import { nextTick, ref } from 'vue'
+import { ref } from 'vue'
 
 const list = {
   title: 'Notes',
@@ -108,9 +96,6 @@ const list = {
 
 const showNoteModal = ref(false)
 const currentNote = ref(null)
-const oldNote = ref(null)
-const title = ref(null)
-const content = ref(null)
 
 const notes = createListResource({
   type: 'list',
@@ -123,29 +108,25 @@ const notes = createListResource({
   auto: true,
 })
 
-const openNoteModal = (note) => {
+function createNote() {
-  let noteCopy = { ...note }
+  currentNote.value = {
-  oldNote.value = note
+    title: '',
-  currentNote.value = noteCopy
+    content: '',
+  }
   showNoteModal.value = true
-
-  nextTick(() => title.value.el.focus())
 }
 
-async function updateNote() {
+function editNote(note) {
-  if (
+  currentNote.value = note
-    currentNote.value.title === oldNote.value.title &&
+  showNoteModal.value = true
-    currentNote.value.content === oldNote.value.content
+}
-  ) {
-    return
-  }
-  currentNote.value.content = content.value?.editor.getHTML()
 
-  if (currentNote.value.name) {
+async function updateNote(note) {
+  if (note.name) {
     let d = await call('frappe.client.set_value', {
       doctype: 'CRM Note',
-      name: currentNote.value.name,
+      name: note.name,
-      fieldname: currentNote.value,
+      fieldname: note,
     })
     if (d.name) {
       notes.reload()
@@ -154,8 +135,8 @@ async function updateNote() {
     let d = await call('frappe.client.insert', {
       doc: {
         doctype: 'CRM Note',
-        title: currentNote.value.title,
+        title: note.title,
-        content: currentNote.value.content,
+        content: note.content,
       },
     })
     if (d.name) {