Move most all table views to new action menu pattern

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, ButtonGroup, TextInput, SingleSelect, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, TextInput, SingleSelect, TableView, InputDialog } from '@cloudron/pankow';
 import { ROLES } from '../constants.js';
 import Section from '../components/Section.vue';
 import UserDialog from '../components/UserDialog.vue';
@@ -37,6 +37,43 @@ const usersColumns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onUserActionMenu(user, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-paper-plane',
+    label: t('users.users.invitationTooltip'),
+    visible: !user.inviteAccepted && !isMe(user) && !user.source,
+    disabled: !canEdit(user),
+    action: onInvitation.bind(null, user),
+  }, {
+    icon: 'fa-solid fa-key',
+    label: t('users.users.resetPasswordTooltip'),
+    visible: user.inviteAccepted && !user.source,
+    disabled: !canEdit(user),
+    action: onPasswordReset.bind(null, user),
+  }, {
+    icon: 'fa-solid fa-user-secret',
+    label: t('users.users.setGhostTooltip'),
+    visible: canImpersonate(user),
+    action: onImpersonate.bind(null, user),
+  }, {
+    icon: 'fa fa-pencil-alt',
+    label: t('main.action.edit'),
+    disabled: !canEdit(user),
+    action: onEditOrAddUser.bind(null, user),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    disabled: !canEdit(user),
+    action: onRemoveUser.bind(null, user),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const groupsColumns = {
   name: {
     label: t('users.groups.name'),
@@ -50,6 +87,22 @@ const groupsColumns = {
   actions: {}
 };
 
+function onGroupActionMenu(group, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    action: onEditOrAddGroup.bind(null, group),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemoveGroup.bind(null, group),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const profile = ref({});
 const busy = ref(true);
 const filterOptions = ref([
@@ -221,6 +274,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <UserDialog ref="userDialog" @success="refreshUsers()"/>
     <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
@@ -255,14 +309,8 @@ onMounted(async () => {
           </span>
         </template>
         <template #actions="user">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button small tool secondary :disabled="!canEdit(user)" v-if="!user.inviteAccepted && !isMe(user) && !user.source" @click.stop="onInvitation(user)" v-tooltip="$t('users.users.invitationTooltip')" icon="fa-solid fa-paper-plane" />
-              <Button small tool secondary :disabled="!canEdit(user)" v-if="user.inviteAccepted && !user.source" @click.stop="onPasswordReset(user)" v-tooltip="$t('users.users.resetPasswordTooltip')" icon="fa-solid fa-key" />
-              <Button small tool secondary v-if="canImpersonate(user)" @click.stop="onImpersonate(user)" v-tooltip="$t('users.users.setGhostTooltip')" icon="fa-solid fa-user-secret" />
-              <Button small tool secondary :disabled="!canEdit(user)" @click.stop="onEditOrAddUser(user)" v-tooltip="$t('users.users.editUserTooltip')" icon="fa fa-pencil-alt" />
-            </ButtonGroup>
-            <Button small tool danger :disabled="!canEdit(user) || isMe(user)" @click.stop="onRemoveUser(user)" v-tooltip="$t('users.users.removeUserTooltip')" icon="far fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onUserActionMenu(user, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>
@@ -283,11 +331,8 @@ onMounted(async () => {
           {{ groupMembers(group) }}
         </template>
         <template #actions="group">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button tool small secondary @click.stop="onEditOrAddGroup(group)" v-tooltip="'Edit Group'" icon="fa fa-pencil-alt" />
-            </ButtonGroup>
-            <Button tool small danger @click.stop="onRemoveGroup(group)" v-tooltip="'Remove Group'" icon="far fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>