From 0061788919a0b1eec6e653751825a16b59541a7f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 26 Jun 2024 20:17:06 +0530
Subject: [PATCH] fix: added kanban actions

---
 frontend/src/pages/Deals.vue | 88 +++++++++++++++++++++++++++++++++++-
 frontend/src/pages/Leads.vue | 86 ++++++++++++++++++++++++++++++++++-
 frontend/src/pages/Tasks.vue | 42 ++++++++++++++++-
 3 files changed, 213 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index a0b99adb..fa7c95f6 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -158,6 +158,20 @@
         </div>
       </div>
     </template>
+
+    <template #actions="{ itemName }">
+      <div class="flex gap-2 items-center justify-between">
+        <div></div>
+        <Dropdown
+          class="flex items-center gap-2"
+          :options="actions(itemName)"
+          variant="ghost"
+          @click.stop.prevent
+        >
+          <Button icon="plus" variant="ghost" />
+        </Dropdown>
+      </div>
+    </template>
   </KanbanView>
   <DealsListView
     ref="dealsListView"
@@ -195,20 +209,39 @@
     v-model="showDealModal"
     :defaults="defaults"
   />
+  <NoteModal
+    v-model="showNoteModal"
+    :note="note"
+    doctype="CRM Deal"
+    :doc="docname"
+  />
+  <TaskModal
+    v-model="showTaskModal"
+    :task="task"
+    doctype="CRM Deal"
+    :doc="docname"
+  />
 </template>
 
 <script setup>
 import CustomActions from '@/components/CustomActions.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 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 ViewControls from '@/components/ViewControls.vue'
+import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
+import { callEnabled } from '@/composables/settings'
 import {
   dateFormat,
   dateTooltipFormat,
@@ -216,12 +249,13 @@ import {
   formatNumberIntoCurrency,
   formatTime,
 } from '@/utils'
-import { Breadcrumbs, Tooltip, Avatar } from 'frappe-ui'
+import { Breadcrumbs, Tooltip, Avatar, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, reactive, computed, h } from 'vue'
 
 const breadcrumbs = [{ label: __('Deals'), route: { name: 'Deals' } }]
 
+const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getDealStatus } = statusesStore()
@@ -397,4 +431,56 @@ function onNewClick(column) {
 
   showDealModal.value = true
 }
+
+function actions(itemName) {
+  let mobile_no = getRow(itemName, 'mobile_no')?.label || ''
+  let actions = [
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Make a Call'),
+      onClick: () => makeCall(mobile_no),
+      condition: () => mobile_no && callEnabled.value,
+    },
+    {
+      icon: h(NoteIcon, { class: 'h-4 w-4' }),
+      label: __('New Note'),
+      onClick: () => showNote(itemName),
+    },
+    {
+      icon: h(TaskIcon, { class: 'h-4 w-4' }),
+      label: __('New Task'),
+      onClick: () => showTask(itemName),
+    },
+  ]
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+}
+
+const docname = ref('')
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+function showNote(name) {
+  docname.value = name
+  showNoteModal.value = true
+}
+
+const showTaskModal = ref(false)
+const task = ref({
+  title: '',
+  description: '',
+  assigned_to: '',
+  due_date: '',
+  priority: 'Low',
+  status: 'Backlog',
+})
+
+function showTask(name) {
+  docname.value = name
+  showTaskModal.value = true
+}
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 94e30a7d..41e76c65 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -193,6 +193,19 @@
         </div>
       </div>
     </template>
+    <template #actions="{ itemName }">
+      <div class="flex gap-2 items-center justify-between">
+        <div></div>
+        <Dropdown
+          class="flex items-center gap-2"
+          :options="actions(itemName)"
+          variant="ghost"
+          @click.stop.prevent
+        >
+          <Button icon="plus" variant="ghost" />
+        </Dropdown>
+      </div>
+    </template>
   </KanbanView>
   <LeadsListView
     ref="leadsListView"
@@ -230,28 +243,47 @@
     v-model="showLeadModal"
     :defaults="defaults"
   />
+  <NoteModal
+    v-model="showNoteModal"
+    :note="note"
+    doctype="CRM Lead"
+    :doc="docname"
+  />
+  <TaskModal
+    v-model="showTaskModal"
+    :task="task"
+    doctype="CRM Lead"
+    :doc="docname"
+  />
 </template>
 
 <script setup>
 import CustomActions from '@/components/CustomActions.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 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 ViewControls from '@/components/ViewControls.vue'
+import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
+import { callEnabled } from '@/composables/settings'
 import { dateFormat, dateTooltipFormat, timeAgo, formatTime } from '@/utils'
-import { Breadcrumbs, Avatar, Tooltip } from 'frappe-ui'
+import { Breadcrumbs, Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
 
 const breadcrumbs = [{ label: __('Leads'), route: { name: 'Leads' } }]
 
+const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getLeadStatus } = statusesStore()
@@ -428,4 +460,56 @@ function onNewClick(column) {
 
   showLeadModal.value = true
 }
+
+function actions(itemName) {
+  let mobile_no = getRow(itemName, 'mobile_no')?.label || ''
+  let actions = [
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Make a Call'),
+      onClick: () => makeCall(mobile_no),
+      condition: () => mobile_no && callEnabled.value,
+    },
+    {
+      icon: h(NoteIcon, { class: 'h-4 w-4' }),
+      label: __('New Note'),
+      onClick: () => showNote(itemName),
+    },
+    {
+      icon: h(TaskIcon, { class: 'h-4 w-4' }),
+      label: __('New Task'),
+      onClick: () => showTask(itemName),
+    },
+  ]
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+}
+
+const docname = ref('')
+const showNoteModal = ref(false)
+const note = ref({
+  title: '',
+  content: '',
+})
+
+function showNote(name) {
+  docname.value = name
+  showNoteModal.value = true
+}
+
+const showTaskModal = ref(false)
+const task = ref({
+  title: '',
+  description: '',
+  assigned_to: '',
+  due_date: '',
+  priority: 'Low',
+  status: 'Backlog',
+})
+
+function showTask(name) {
+  docname.value = name
+  showTaskModal.value = true
+}
 </script>
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 04e91e76..60927534 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -115,6 +115,19 @@
         </div>
       </div>
     </template>
+    <template #actions="{ itemName }">
+      <div class="flex gap-2 items-center justify-between">
+        <div></div>
+        <Dropdown
+          class="flex items-center gap-2"
+          :options="actions(itemName)"
+          variant="ghost"
+          @click.stop.prevent
+        >
+          <Button icon="more-horizontal" variant="ghost" />
+        </Dropdown>
+      </div>
+    </template>
   </KanbanView>
   <TasksListView
     ref="tasksListView"
@@ -168,7 +181,14 @@ import KanbanView from '@/components/Kanban/KanbanView.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import { usersStore } from '@/stores/users'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
-import { Breadcrumbs, Tooltip, Avatar, TextEditor } from 'frappe-ui'
+import {
+  Breadcrumbs,
+  Tooltip,
+  Avatar,
+  TextEditor,
+  Dropdown,
+  call,
+} from 'frappe-ui'
 import { computed, ref } from 'vue'
 
 const breadcrumbs = [{ label: __('Tasks'), route: { name: 'Tasks' } }]
@@ -288,4 +308,24 @@ function createTask(column) {
 
   showTaskModal.value = true
 }
+
+function actions(name) {
+  return [
+    {
+      label: __('Delete'),
+      icon: 'trash-2',
+      onClick: () => {
+        deletetask(name)
+        tasks.value.reload()
+      },
+    },
+  ]
+}
+
+async function deletetask(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Task',
+    name,
+  })
+}
 </script>