Remove all usage of old table action pattern

dashboard/src/components/AppPasswords.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
@@ -40,6 +40,18 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(appPassword, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemove.bind(null, appPassword),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 // new dialog props
 const addedPassword = ref('');
 const passwordName = ref('');
@@ -99,9 +111,9 @@ function onCopyToClipboard(password) {
   window.pankow.notify({ type: 'success', text: 'Password copied!' });
 }
 
-async function onRemove(id, name) {
+async function onRemove(appPassword) {
   const yes = await inputDialog.value.confirm({
-    message: t('profile.removeAppPassword.title', { name }),
+    message: t('profile.removeAppPassword.title', { name: appPassword.name }),
     confirmStyle: 'danger',
     confirmLabel: t('main.dialog.yes'),
     rejectLabel: t('main.dialog.no')
@@ -109,7 +121,7 @@ async function onRemove(id, name) {
 
   if (!yes) return;
 
-  const [error] = await appPasswordsModel.remove(id);
+  const [error] = await appPasswordsModel.remove(appPassword.id);
   if (error) return console.error(error);
 
   await refresh();
@@ -149,6 +161,7 @@ onMounted(async () => {
 
 <template>
   <div>
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <Dialog ref="newDialog"
@@ -197,8 +210,8 @@ onMounted(async () => {
       <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
         <template #creationTime="password">{{ prettyLongDate(password.creationTime) }}</template>
         <template #actions="password">
-          <div class="table-actions">
-            <Button small tool danger @click="onRemove(password.id, password.name)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(password, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>