Move most all table views to new action menu pattern

dashboard/src/views/UserDirectoryOpenIdProviderView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
 import { copyToClipboard } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -19,6 +19,24 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(client, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    action: onEdit.bind(null, client),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemove.bind(null, client),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const inputDialog = useTemplateRef('inputDialog');
 const editDialog = useTemplateRef('editDialog');
 
@@ -83,7 +101,8 @@ async function onSubmit() {
 
 async function onRemove(client) {
   const yes = await inputDialog.value.confirm({
-    message: t('oidc.deleteClientDialog.title', { client: client.name }) + ' ' + t('oidc.deleteClientDialog.description'),
+    title: t('oidc.deleteClientDialog.title', { client: client.name }),
+    message: t('oidc.deleteClientDialog.description'),
     confirmStyle: 'danger',
     confirmLabel: t('main.dialog.delete'),
     rejectLabel: t('main.dialog.cancel')
@@ -119,6 +138,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <Dialog ref="editDialog"
       :title="clientId ? $t('oidc.editClientDialog.title', { client: clientName }) : $t('oidc.newClientDialog.title')"
@@ -184,9 +204,8 @@ onMounted(async () => {
 
       <TableView :columns="columns" :model="clients" :placeholder="$t('oidc.clients.empty')">
         <template #actions="client">
-          <div class="table-actions">
-            <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(client)"></Button>
-            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(client)"></Button>
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(client, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>