Use ActionBar also for GroupsView

dashboard/src/views/GroupsView.vue

@@ -5,7 +5,8 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject, computed } from 'vue';
-import { Button, Menu, TableView, InputDialog, TextInput } from '@cloudron/pankow';
+import { Button, TableView, InputDialog, TextInput } from '@cloudron/pankow';
+import ActionBar from '../components/ActionBar.vue';
 import Section from '../components/Section.vue';
 import GroupDialog from '../components/GroupDialog.vue';
 import UsersModel from '../models/UsersModel.js';
@@ -16,9 +17,6 @@ const usersModel = UsersModel.create();
 const groupsModel = GroupsModel.create();
 const profileModel = ProfileModel.create();
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-
 const groupsColumns = {
   name: {
     label: t('users.groups.name'),
@@ -27,20 +25,17 @@ const groupsColumns = {
   },
   users: {
     label: t('users.groups.users'),
-    sort: true,
     nowrap: true,
     hideMobile: true,
-    width: '500px',
   },
-  actions: {
-    width: '55px',
-  }
+  actions: {}
 };
 
-function onGroupActionMenu(group, event) {
-  actionMenuModel.value = [{
+function createGroupActionMenu(group) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onEditOrAddGroup.bind(null, group),
   }, {
     separator: true,
@@ -49,8 +44,6 @@ function onGroupActionMenu(group, event) {
     label: t('main.action.remove'),
     action: onRemoveGroup.bind(null, group),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const profile = ref({});
@@ -156,7 +149,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
 
@@ -177,9 +169,10 @@ onMounted(async () => {
         </template>
         <template #users="group">{{ groupMembers(group) }}</template>
         <template #actions="group">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createGroupActionMenu(group)" />
+          <!-- <div style="text-align: right;"> -->
+            <!-- <Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" /> -->
+          <!-- </div> -->
         </template>
       </TableView>
     </Section>

dashboard/src/views/UsersView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, computed, useTemplateRef, inject } from 'vue';
-import { Button, Menu, TextInput, SingleSelect, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, TextInput, SingleSelect, TableView, InputDialog } from '@cloudron/pankow';
 import { ROLES } from '../constants.js';
 import Section from '../components/Section.vue';
 import ActionBar from '../components/ActionBar.vue';