From e291f2068c737d9acf08caf1a1746dba43517f83 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 May 2024 22:32:44 +0530
Subject: [PATCH] fix: implemented ListBulkAction component in all List View

---
 frontend/src/components/ListBulkActions.vue   |   2 +-
 .../components/ListViews/CallLogsListView.vue |  99 +++--------------
 .../components/ListViews/ContactsListView.vue | 104 +++---------------
 .../ListViews/EmailTemplatesListView.vue      | 102 ++---------------
 .../ListViews/OrganizationsListView.vue       | 104 +++---------------
 .../components/ListViews/TasksListView.vue    | 102 ++---------------
 6 files changed, 65 insertions(+), 448 deletions(-)

diff --git a/frontend/src/components/ListBulkActions.vue b/frontend/src/components/ListBulkActions.vue
index ad33a0ab..6b54b15d 100644
--- a/frontend/src/components/ListBulkActions.vue
+++ b/frontend/src/components/ListBulkActions.vue
@@ -135,7 +135,7 @@ const customListActions = ref([])
 
 function bulkActions(selections, unselectAll) {
   let actions = []
-  debugger
+
   if (!props.options.hideEdit) {
     actions.push({
       label: __('Edit'),
diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index d4381818..e3aa425a 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -80,7 +80,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -95,8 +97,18 @@
     }"
     @loadMore="emit('loadMore')"
   />
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
+    doctype="CRM Call Log"
+    :options="{
+      hideEdit: true,
+      hideAssign: true,
+    }"
+  />
 </template>
 <script setup>
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -108,12 +120,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { setupListActions, createToast } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -146,89 +154,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-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 Call Log',
-          }).then(() => {
-            createToast({
-              title: 'Deleted successfully',
-              icon: 'check',
-              iconClasses: 'text-green-600',
-            })
-            unselectAll()
-            list.value.reload()
-            close()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customBulkActions = ref([])
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: 'Delete',
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  customBulkActions.value.forEach((action) => {
-    actions.push({
-      label: action.label,
-      onClick: () =>
-        action.onClick({
-          list: list.value,
-          selections,
-          unselectAll,
-          call,
-          createToast,
-          $dialog,
-          router,
-        }),
-    })
-  })
-  return actions
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index e1169ae5..4a192497 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -82,7 +82,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -98,18 +100,18 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="Contact"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -121,10 +123,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -157,92 +157,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    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()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 22625af9..52f3b4b0 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -69,7 +69,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -84,17 +84,17 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="Email Template"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   ListView,
   ListHeader,
@@ -104,11 +104,9 @@ import {
   ListRowItem,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -142,92 +140,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    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()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 29a00d2d..7a3509e0 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -69,7 +69,9 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown
+          :options="listBulkActionsRef.bulkActions(selections, unselectAll)"
+        >
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -84,17 +86,17 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="CRM Organization"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </template>
 <script setup>
-import EditValueModal from '@/components/Modals/EditValueModal.vue'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
@@ -106,10 +108,8 @@ import {
   ListFooter,
   Tooltip,
   Dropdown,
-  call,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -142,92 +142,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    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()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 63ceb354..103a1a52 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -82,7 +82,7 @@
     </ListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
-        <Dropdown :options="bulkActions(selections, unselectAll)">
+        <Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
           <Button icon="more-horizontal" variant="ghost" />
         </Dropdown>
       </template>
@@ -97,21 +97,21 @@
     }"
     @loadMore="emit('loadMore')"
   />
-  <EditValueModal
-    v-model="showEditModal"
+  <ListBulkActions
+    ref="listBulkActionsRef"
+    v-model="list"
     doctype="CRM Task"
-    :selectedValues="selectedValues"
-    @reload="reload"
+    :options="{
+      hideAssign: true,
+    }"
   />
 </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 EditValueModal from '@/components/Modals/EditValueModal.vue'
+import ListBulkActions from '@/components/ListBulkActions.vue'
 import { dateFormat } from '@/utils'
-import { globalStore } from '@/stores/global'
-import { setupListActions, createToast } from '@/utils'
 import {
   Avatar,
   ListView,
@@ -122,11 +122,9 @@ import {
   ListRowItem,
   ListFooter,
   Dropdown,
-  call,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -160,92 +158,14 @@ const emit = defineEmits([
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
-const router = useRouter()
-
-const { $dialog } = globalStore()
-
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)
 })
 
-const showEditModal = ref(false)
-const selectedValues = ref([])
-const unselectAllAction = ref(() => {})
-
-function editValues(selections, unselectAll) {
-  selectedValues.value = selections
-  showEditModal.value = true
-  unselectAllAction.value = unselectAll
-}
-
-function deleteValues(selections, unselectAll) {
-  $dialog({
-    title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [
-      selections.size,
-    ]),
-    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()
-          })
-        },
-      },
-    ],
-  })
-}
-
-const customListActions = ref([])
-
-function bulkActions(selections, unselectAll) {
-  let actions = [
-    {
-      label: __('Edit'),
-      onClick: () => editValues(selections, unselectAll),
-    },
-    {
-      label: __('Delete'),
-      onClick: () => deleteValues(selections, unselectAll),
-    },
-  ]
-  return actions
-}
-
-function reload() {
-  unselectAllAction.value?.()
-  list.value?.reload()
-}
-
-onMounted(() => {
-  if (!list.value?.data) return
-  setupListActions(list.value.data, {
-    list: list.value,
-    call,
-    createToast,
-    $dialog,
-    router,
-  })
-  // customBulkActions.value = list.value?.data?.bulkActions || []
-  customListActions.value = list.value?.data?.listActions || []
-})
+const listBulkActionsRef = ref(null)
 
 defineExpose({
-  customListActions,
+  customListActions: listBulkActionsRef.value?.customListActions,
 })
 </script>