From d6f8106cfb2a457913bd4e79373b6c23a038e993 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 17 Mar 2024 12:30:11 +0530
Subject: [PATCH] fix: added delete option in list view bulk actions for all
 list view

---
 .../components/ListViews/ContactsListView.vue |  73 ++++++++++--
 .../components/ListViews/DealsListView.vue    |  41 ++++++-
 .../ListViews/EmailTemplatesListView.vue      | 110 +++++++++---------
 .../components/ListViews/LeadsListView.vue    |  41 ++++++-
 .../ListViews/OrganizationsListView.vue       |  73 ++++++++++--
 .../components/ListViews/TasksListView.vue    | 110 +++++++++---------
 frontend/src/pages/Contacts.vue               |   2 +-
 frontend/src/pages/EmailTemplates.vue         |   2 +-
 frontend/src/pages/Organizations.vue          |   2 +-
 frontend/src/pages/Tasks.vue                  |   2 +-
 10 files changed, 314 insertions(+), 142 deletions(-)

diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 694984e8..9a259f74 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -70,15 +70,13 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Button
-          variant="subtle"
-          label="Edit"
-          @click="editValues(selections, unselectAll)"
-        >
-          <template #prefix>
-            <EditIcon class="h-3 w-3" />
-          </template>
-        </Button>
+        <Dropdown :options="bulkActions(selections, unselectAll)">
+          <Button variant="ghost">
+            <template #icon>
+              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+            </template>
+          </Button>
+        </Dropdown>
       </template>
     </ListSelectBanner>
   </ListView>
@@ -97,13 +95,14 @@
     v-model:unselectAll="unselectAllAction"
     doctype="Contact"
     :selectedValues="selectedValues"
-    @reload="emit('reload')"
+    @reload="list.reload()"
   />
 </template>
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import { globalStore } from '@/stores/global'
+import { createToast } from '@/utils'
 import {
   Avatar,
   ListView,
@@ -114,6 +113,8 @@ import {
   ListRowItem,
   ListFooter,
   Tooltip,
+  Dropdown,
+  call,
 } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
@@ -141,12 +142,14 @@ const props = defineProps({
 const emit = defineEmits([
   'loadMore',
   'updatePageCount',
-  'reload',
   'columnWidthUpdated',
   'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
+const list = defineModel('list')
+
+const { $dialog } = globalStore()
 
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
@@ -162,4 +165,50 @@ function editValues(selections, unselectAll) {
   showEditModal.value = true
   unselectAllAction.value = unselectAll
 }
+
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'Contact',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+function bulkActions(selections, unselectAll) {
+  let actions = [
+    {
+      label: 'Edit',
+      onClick: () => editValues(selections, unselectAll),
+    },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
+  ]
+  return actions
+}
 </script>
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 9f0681f6..22500792 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -98,10 +98,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown
-          v-if="bulkActions.length"
-          :options="bulkActions(selections, unselectAll)"
-        >
+        <Dropdown :options="bulkActions(selections, unselectAll)">
           <Button variant="ghost">
             <template #icon>
               <FeatherIcon name="more-horizontal" class="h-4 w-4" />
@@ -203,6 +200,38 @@ function editValues(selections, unselectAll) {
   unselectAllAction.value = unselectAll
 }
 
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'CRM Deal',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
 const customBulkActions = ref([])
 
 function bulkActions(selections, unselectAll) {
@@ -211,6 +240,10 @@ function bulkActions(selections, unselectAll) {
       label: 'Edit',
       onClick: () => editValues(selections, unselectAll),
     },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
   ]
   customBulkActions.value.forEach((action) => {
     actions.push({
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index abfb3252..8fc5cd7f 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -54,23 +54,13 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <div class="flex gap-2">
-          <Button
-            theme="red"
-            variant="subtle"
-            label="Delete"
-            @click="deleteEmailTemplate(selections, unselectAll)"
-          />
-          <Button
-            variant="subtle"
-            label="Edit"
-            @click="editValues(selections, unselectAll)"
-          >
-            <template #prefix>
-              <EditIcon class="h-3 w-3" />
+        <Dropdown :options="bulkActions(selections, unselectAll)">
+          <Button variant="ghost">
+            <template #icon>
+              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
             </template>
           </Button>
-        </div>
+        </Dropdown>
       </template>
     </ListSelectBanner>
   </ListView>
@@ -88,13 +78,13 @@
     v-model:unselectAll="unselectAllAction"
     doctype="Email Template"
     :selectedValues="selectedValues"
-    @reload="emit('reload')"
+    @reload="list.reload()"
   />
 </template>
 <script setup>
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
 import { globalStore } from '@/stores/global'
+import { createToast } from '@/utils'
 import {
   ListView,
   ListHeader,
@@ -103,6 +93,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  Dropdown,
   call,
   Tooltip,
 } from 'frappe-ui'
@@ -133,53 +124,20 @@ const emit = defineEmits([
   'loadMore',
   'updatePageCount',
   'showEmailTemplate',
-  'reload',
   'columnWidthUpdated',
   'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
+const list = defineModel('list')
+
+const { $dialog } = globalStore()
 
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const { $dialog } = globalStore()
-
-function deleteEmailTemplate(selections, unselectAll) {
-  let title = 'Delete email template'
-  let message = 'Are you sure you want to delete this email template?'
-
-  if (selections.size > 1) {
-    title = 'Delete email templates'
-    message = 'Are you sure you want to delete these email templates?'
-  }
-
-  $dialog({
-    title: title,
-    message: message,
-    actions: [
-      {
-        label: 'Delete',
-        theme: 'red',
-        variant: 'solid',
-        async onClick(close) {
-          for (const selection of selections) {
-            await call('frappe.client.delete', {
-              doctype: 'Email Template',
-              name: selection,
-            })
-          }
-          close()
-          unselectAll()
-          emit('reload')
-        },
-      },
-    ],
-  })
-}
-
 const showEditModal = ref(false)
 const selectedValues = ref([])
 const unselectAllAction = ref(() => {})
@@ -189,4 +147,50 @@ function editValues(selections, unselectAll) {
   showEditModal.value = true
   unselectAllAction.value = unselectAll
 }
+
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'Email Template',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+function bulkActions(selections, unselectAll) {
+  let actions = [
+    {
+      label: 'Edit',
+      onClick: () => editValues(selections, unselectAll),
+    },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
+  ]
+  return actions
+}
 </script>
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 08722aaa..3a18a8d7 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -107,10 +107,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown
-          v-if="bulkActions.length"
-          :options="bulkActions(selections, unselectAll)"
-        >
+        <Dropdown :options="bulkActions(selections, unselectAll)">
           <Button variant="ghost">
             <template #icon>
               <FeatherIcon name="more-horizontal" class="h-4 w-4" />
@@ -212,6 +209,38 @@ function editValues(selections, unselectAll) {
   unselectAllAction.value = unselectAll
 }
 
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'CRM Lead',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
 const customBulkActions = ref([])
 
 function bulkActions(selections, unselectAll) {
@@ -220,6 +249,10 @@ function bulkActions(selections, unselectAll) {
       label: 'Edit',
       onClick: () => editValues(selections, unselectAll),
     },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
   ]
   customBulkActions.value.forEach((action) => {
     actions.push({
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index aeb2282e..0c01940e 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -57,15 +57,13 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Button
-          variant="subtle"
-          label="Edit"
-          @click="editValues(selections, unselectAll)"
-        >
-          <template #prefix>
-            <EditIcon class="h-3 w-3" />
-          </template>
-        </Button>
+        <Dropdown :options="bulkActions(selections, unselectAll)">
+          <Button variant="ghost">
+            <template #icon>
+              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+            </template>
+          </Button>
+        </Dropdown>
       </template>
     </ListSelectBanner>
   </ListView>
@@ -83,12 +81,13 @@
     v-model:unselectAll="unselectAllAction"
     doctype="CRM Organization"
     :selectedValues="selectedValues"
-    @reload="emit('reload')"
+    @reload="list.reload()"
   />
 </template>
 <script setup>
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
+import { globalStore } from '@/stores/global'
+import { createToast } from '@/utils'
 import {
   Avatar,
   ListView,
@@ -99,6 +98,8 @@ import {
   ListRowItem,
   ListFooter,
   Tooltip,
+  Dropdown,
+  call,
 } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
@@ -126,12 +127,14 @@ const props = defineProps({
 const emit = defineEmits([
   'loadMore',
   'updatePageCount',
-  'reload',
   'columnWidthUpdated',
   'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
+const list = defineModel('list')
+
+const { $dialog } = globalStore()
 
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
@@ -147,4 +150,50 @@ function editValues(selections, unselectAll) {
   showEditModal.value = true
   unselectAllAction.value = unselectAll
 }
+
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'CRM Organization',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+function bulkActions(selections, unselectAll) {
+  let actions = [
+    {
+      label: 'Edit',
+      onClick: () => editValues(selections, unselectAll),
+    },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
+  ]
+  return actions
+}
 </script>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index af294226..32e1cb0c 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -73,23 +73,13 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <div class="flex gap-2">
-          <Button
-            theme="red"
-            variant="subtle"
-            label="Delete"
-            @click="deleteTask(selections, unselectAll)"
-          />
-          <Button
-            variant="subtle"
-            label="Edit"
-            @click="editValues(selections, unselectAll)"
-          >
-            <template #prefix>
-              <EditIcon class="h-3 w-3" />
+        <Dropdown :options="bulkActions(selections, unselectAll)">
+          <Button variant="ghost">
+            <template #icon>
+              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
             </template>
           </Button>
-        </div>
+        </Dropdown>
       </template>
     </ListSelectBanner>
   </ListView>
@@ -107,17 +97,17 @@
     v-model:unselectAll="unselectAllAction"
     doctype="CRM Task"
     :selectedValues="selectedValues"
-    @reload="emit('reload')"
+    @reload="list.reload()"
   />
 </template>
 <script setup>
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
 import { dateFormat } from '@/utils'
 import { globalStore } from '@/stores/global'
+import { createToast } from '@/utils'
 import {
   Avatar,
   ListView,
@@ -127,6 +117,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  Dropdown,
   call,
   Tooltip,
 } from 'frappe-ui'
@@ -157,53 +148,20 @@ const emit = defineEmits([
   'loadMore',
   'updatePageCount',
   'showTask',
-  'reload',
   'columnWidthUpdated',
   'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
+const list = defineModel('list')
+
+const { $dialog } = globalStore()
 
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const { $dialog } = globalStore()
-
-function deleteTask(selections, unselectAll) {
-  let title = 'Delete task'
-  let message = 'Are you sure you want to delete this task?'
-
-  if (selections.size > 1) {
-    title = 'Delete tasks'
-    message = 'Are you sure you want to delete these tasks?'
-  }
-
-  $dialog({
-    title: title,
-    message: message,
-    actions: [
-      {
-        label: 'Delete',
-        theme: 'red',
-        variant: 'solid',
-        async onClick(close) {
-          for (const selection of selections) {
-            await call('frappe.client.delete', {
-              doctype: 'CRM Task',
-              name: selection,
-            })
-          }
-          close()
-          unselectAll()
-          emit('reload')
-        },
-      },
-    ],
-  })
-}
-
 const showEditModal = ref(false)
 const selectedValues = ref([])
 const unselectAllAction = ref(() => {})
@@ -213,4 +171,50 @@ function editValues(selections, unselectAll) {
   showEditModal.value = true
   unselectAllAction.value = unselectAll
 }
+
+function deleteValues(selections, unselectAll) {
+  $dialog({
+    title: 'Delete',
+    message: `Are you sure you want to delete ${selections.size} item${
+      selections.size > 1 ? 's' : ''
+    }?`,
+    variant: 'danger',
+    actions: [
+      {
+        label: 'Delete',
+        variant: 'solid',
+        theme: 'red',
+        onClick: (close) => {
+          call('frappe.desk.reportview.delete_items', {
+            items: JSON.stringify(Array.from(selections)),
+            doctype: 'CRM Task',
+          }).then(() => {
+            createToast({
+              title: 'Deleted successfully',
+              icon: 'check',
+              iconClasses: 'text-green-600',
+            })
+            unselectAll()
+            list.value.reload()
+            close()
+          })
+        },
+      },
+    ],
+  })
+}
+
+function bulkActions(selections, unselectAll) {
+  let actions = [
+    {
+      label: 'Edit',
+      onClick: () => editValues(selections, unselectAll),
+    },
+    {
+      label: 'Delete',
+      onClick: () => deleteValues(selections, unselectAll),
+    },
+  ]
+  return actions
+}
 </script>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index d796900d..43ce7526 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -20,6 +20,7 @@
   <ContactsListView
     v-if="contacts.data && rows.length"
     v-model="contacts.data.page_length_count"
+    v-model:list="contacts"
     :rows="rows"
     :columns="contacts.data.columns"
     :options="{
@@ -31,7 +32,6 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
-    @reload="contacts.reload()"
     @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 3a715e02..8e90c57f 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -20,6 +20,7 @@
   <EmailTemplatesListView
     v-if="emailTemplates.data && rows.length"
     v-model="emailTemplates.data.page_length_count"
+    v-model:list="emailTemplates"
     :rows="rows"
     :columns="emailTemplates.data.columns"
     :options="{
@@ -32,7 +33,6 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
-    @reload="emailTemplates.reload()"
     @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index c9a79ba1..29fd72e6 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -24,6 +24,7 @@
   <OrganizationsListView
     v-if="organizations.data && rows.length"
     v-model="organizations.data.page_length_count"
+    v-model:list="organizations"
     :rows="rows"
     :columns="organizations.data.columns"
     :options="{
@@ -35,7 +36,6 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
-    @reload="organizations.reload()"
     @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 4e8b4e39..1e979e65 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -20,6 +20,7 @@
   <TasksListView
     v-if="tasks.data && rows.length"
     v-model="tasks.data.page_length_count"
+    v-model:list="tasks"
     :rows="rows"
     :columns="tasks.data.columns"
     :options="{
@@ -32,7 +33,6 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
-    @reload="tasks.reload()"
     @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">