Merge pull request #202 from shariquerik/grouped-with-label-actions

fix: Grouped button with label

frontend/src/components/CustomActions.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-if="normalActions.length && !isMobileView"
     v-for="action in normalActions"
     :label="action.label"
     @click="action.onClick()"
@@ -11,6 +12,22 @@
   <Dropdown v-if="groupedActions.length" :options="groupedActions">
     <Button icon="more-horizontal" />
   </Dropdown>
+  <div
+    v-if="groupedWithLabelActions.length && !isMobileView"
+    v-for="g in groupedWithLabelActions"
+    :key="g.label"
+  >
+    <Dropdown :options="g.action" v-slot="{ open }">
+      <Button :label="g.label">
+        <template #suffix>
+          <FeatherIcon
+            :name="open ? 'chevron-up' : 'chevron-down'"
+            class="h-4"
+          />
+        </template>
+      </Button>
+    </Dropdown>
+  </div>
 </template>
 
 <script setup>
@@ -25,9 +42,32 @@ const props = defineProps({
   },
 })
 
+const normalActions = computed(() => {
+  return props.actions.filter((action) => !action.group)
+})
+
+const groupedWithLabelActions = computed(() => {
+  let _actions = []
+
+  props.actions
+    .filter((action) => action.buttonLabel && action.group)
+    .forEach((action) => {
+      let groupIndex = _actions.findIndex((a) => a.label === action.buttonLabel)
+      if (groupIndex > -1) {
+        _actions[groupIndex].action.push(action)
+      } else {
+        _actions.push({
+          label: action.buttonLabel,
+          action: [action],
+        })
+      }
+    })
+  return _actions
+})
+
 const groupedActions = computed(() => {
   let _actions = []
-  let _normalActions = props.actions.filter((action) => !action.group)
+  let _normalActions = normalActions.value
   if (isMobileView.value && _normalActions.length) {
     _actions.push({
       group: __('Actions'),
@@ -39,17 +79,14 @@ const groupedActions = computed(() => {
       })),
     })
   }
+  if (isMobileView.value && groupedWithLabelActions.value.length) {
+    groupedWithLabelActions.value.map((group) => {
+      group.action.forEach((action) => _actions.push(action))
+    })
+  }
   _actions = _actions.concat(
-    props.actions.filter((action) => action.group)
+    props.actions.filter((action) => action.group && !action.buttonLabel)
   )
   return _actions
 })
-
-const normalActions = computed(() => {
-  let _actions = props.actions.filter((action) => !action.group)
-  if (isMobileView.value && _actions.length) {
-    return []
-  }
-  return _actions
-})
 </script>