From 949b72ed600ac08c0c16bd9aef1612b08b1f17ad Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 28 Dec 2023 17:23:12 +0530
Subject: [PATCH] fix: added groupActions dropdown button option in
 CustomActions component

---
 frontend/src/components/CustomActions.vue | 43 +++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CustomActions.vue b/frontend/src/components/CustomActions.vue
index e28dd5d3..7a674053 100644
--- a/frontend/src/components/CustomActions.vue
+++ b/frontend/src/components/CustomActions.vue
@@ -1,16 +1,55 @@
 <template>
   <Button
-    v-for="action in actions"
+    v-for="action in normalActions"
     :label="action.label"
     @click="action.onClick()"
-  />
+  >
+    <template v-if="action.icon" #prefix>
+      <FeatherIcon :name="action.icon" class="h-4 w-4" />
+    </template>
+  </Button>
+  <Dropdown v-if="groupedActions.length" :options="groupedActions">
+    <Button>
+      <template #icon>
+        <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+      </template>
+    </Button>
+  </Dropdown>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { Dropdown, FeatherIcon } from 'frappe-ui'
+
 const props = defineProps({
   actions: {
     type: Object,
     required: true,
   },
 })
+
+const groupedActions = computed(() => {
+  const _actions = props.actions.filter((action) => action.group)
+  const groupedActions = {}
+
+  for (const action of _actions) {
+    if (!groupedActions[action.group]) {
+      groupedActions[action.group] = []
+    }
+
+    groupedActions[action.group].push(action)
+  }
+
+  let _groupedActions = [
+    ...Object.keys(groupedActions).map((group) => ({
+      group,
+      items: groupedActions[group],
+    })),
+  ]
+  return _groupedActions
+})
+
+const normalActions = computed(() => {
+  return props.actions.filter((action) => !action.group)
+})
 </script>