Add some quick actions in users listing

dashboard/src/views/UsersView.vue

@@ -8,6 +8,7 @@ import { ref, onMounted, computed, useTemplateRef, inject } from 'vue';
 import { Button, Menu, TextInput, SingleSelect, TableView, InputDialog } from '@cloudron/pankow';
 import { ROLES } from '../constants.js';
 import Section from '../components/Section.vue';
+import ActionBar from '../components/ActionBar.vue';
 import UserDialog from '../components/UserDialog.vue';
 import ImpersonateDialog from '../components/ImpersonateDialog.vue';
 import InvitationDialog from '../components/InvitationDialog.vue';
@@ -41,18 +42,15 @@ const usersColumns = {
     nowrap: true,
     width: '400px',
   },
-  actions: {
-    width: '55px',
-  }
+  actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onUserActionMenu(user, event) {
-  actionMenuModel.value = [{
+function createUserActionMenu(user) {
+  return [{
     icon: 'fa fa-pencil-alt',
     label: t('main.action.edit'),
     disabled: !canEdit(user),
+    quickAction: true,
     action: onEditOrAddUser.bind(null, user),
   }, {
     separator: true,
@@ -61,6 +59,7 @@ function onUserActionMenu(user, event) {
     label: t('users.users.invitationTooltip'),
     visible: !user.inviteAccepted && !isMe(user) && !user.source,
     disabled: !canEdit(user),
+    quickAction: true,
     action: onInvitation.bind(null, user),
   }, {
     icon: 'fa-solid fa-qrcode',
@@ -87,8 +86,6 @@ function onUserActionMenu(user, event) {
     disabled: !canEdit(user) || isMe(user),
     action: onRemoveUser.bind(null, user),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const external2FA = ref(false);
@@ -259,7 +256,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <UserDialog ref="userDialog" @success="refreshUsers()"/>
     <ImpersonateDialog ref="impersonateDialog" />
@@ -299,10 +295,11 @@ onMounted(async () => {
           {{ user.groupIds.map(gid => groupsById[gid] ? groupsById[gid].name : gid).join(' ') }}
         </template>
         <template #actions="user">
-          <div class="table-actions">
+          <ActionBar :actions="createUserActionMenu(user)" />
+          <!-- <div class="table-actions"> -->
             <!-- <Button tool plain secondary :disabled="!canEdit(user)" @click.capture="onEditOrAddUser(user)" :tooltip="$t('main.action.edit')" icon="fa-solid fa-pencil-alt" /> -->
-            <Button tool plain secondary @click.capture="onUserActionMenu(user, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+            <!-- <Button tool plain secondary @click.capture="onUserActionMenu(user, $event)" icon="fa-solid fa-ellipsis" /> -->
+          <!-- </div> -->
         </template>
       </TableView>
     </Section>