fix: delete task

frontend/src/App.vue

@@ -3,11 +3,13 @@
   <DesktopLayout v-else-if="session().isLoggedIn">
     <router-view />
   </DesktopLayout>
+  <Dialogs />
   <Toasts />
 </template>
 
 <script setup>
 import DesktopLayout from '@/components/DesktopLayout.vue'
+import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
 import { Toasts } from 'frappe-ui'
 </script>

frontend/src/components/Activities.vue

@@ -114,7 +114,7 @@
               </div>
             </div>
           </div>
-          <div class="flex items-center">
+          <div class="flex items-center gap-1">
             <Dropdown
               :options="taskStatusOptions(updateTaskStatus, task)"
               @click.stop
@@ -123,6 +123,38 @@
                 <TaskStatusIcon :status="task.status" />
               </Button>
             </Dropdown>
+            <Dropdown
+              :options="[
+                {
+                  icon: 'trash-2',
+                  label: 'Delete',
+                  onClick: () => {
+                    $dialog({
+                      title: 'Delete task',
+                      message: 'Are you sure you want to delete this task?',
+                      actions: [
+                        {
+                          label: 'Delete',
+                          theme: 'red',
+                          variant: 'solid',
+                          onClick({ close }) {
+                            deleteTask(task.name)
+                            close()
+                          },
+                        },
+                      ],
+                    })
+                  },
+                },
+              ]"
+              @click.stop
+            >
+              <Button
+                icon="more-horizontal"
+                variant="ghosted"
+                class="hover:bg-gray-300"
+              />
+            </Dropdown>
           </div>
         </div>
         <div
@@ -873,6 +905,14 @@ function showTask(t) {
   showTaskModal.value = true
 }
 
+async function deleteTask(name) {
+  await call('frappe.client.delete', {
+    doctype: 'CRM Task',
+    name,
+  })
+  tasks.reload()
+}
+
 function updateTaskStatus(status, task) {
   call('frappe.client.set_value', {
     doctype: 'CRM Task',

frontend/src/main.js

@@ -18,6 +18,7 @@ import {
   setConfig,
   frappeRequest,
 } from 'frappe-ui'
+import { createDialog } from './utils/dialogs'
 import socket from './socket'
 import { getCachedListResource } from 'frappe-ui/src/resources/listResource'
 import { getCachedResource } from 'frappe-ui/src/resources/resources'
@@ -46,6 +47,8 @@ for (let key in globalComponents) {
   app.component(key, globalComponents[key])
 }
 
+app.config.globalProperties.$dialog = createDialog
+
 app.mount('#app')
 
 socket.on('refetch_resource', (data) => {
@@ -57,3 +60,7 @@ socket.on('refetch_resource', (data) => {
     }
   }
 })
+
+if (import.meta.env.DEV) {
+  window.$dialog = createDialog
+}

frontend/src/utils/dialogs.js

@@ -0,0 +1,31 @@
+import { Dialog, ErrorMessage } from 'frappe-ui'
+import { h, reactive, ref } from 'vue'
+
+let dialogs = ref([])
+
+export let Dialogs = {
+  name: 'Dialogs',
+  render() {
+    return dialogs.value.map((dialog) => {
+      return h(
+        Dialog,
+        {
+          options: dialog,
+          modelValue: dialog.show,
+          'onUpdate:modelValue': (val) => (dialog.show = val),
+        },
+        () => [
+          h('p', { class: 'text-p-base text-gray-700' }, dialog.message),
+          h(ErrorMessage, { class: 'mt-2', message: dialog.error }),
+        ]
+      )
+    })
+  },
+}
+
+export function createDialog(options) {
+  let dialog = reactive(options)
+  dialog.key = `dialog-${Math.random().toString(36).slice(2, 9)}`
+  dialogs.value.push(dialog)
+  dialog.show = true
+}