Remove all usage of old table action pattern

dashboard/src/components/ApiTokens.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from '@cloudron/pankow';
+import { Button, Menu, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from '@cloudron/pankow';
 import { copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
 import Section from './Section.vue';
@@ -48,6 +48,18 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(apiToken, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRevokeToken.bind(null, apiToken),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const isValid = computed(() => {
   if (!tokenName.value) return false;
   if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
@@ -92,9 +104,9 @@ function onReset() {
   }, 500);
 }
 
-async function onRevokeToken(id, name) {
+async function onRevokeToken(apiToken) {
   const yes = await inputDialog.value.confirm({
-    message: t('profile.removeApiToken.title', { name }),
+    message: t('profile.removeApiToken.title', { name: apiToken.name }),
     confirmStyle: 'danger',
     confirmLabel: t('main.dialog.yes'),
     rejectLabel: t('main.dialog.no')
@@ -102,7 +114,7 @@ async function onRevokeToken(id, name) {
 
   if (!yes) return;
 
-  const [error] = await tokensModel.remove(id);
+  const [error] = await tokensModel.remove(apiToken.id);
   if (error) return console.error(error);
 
   await refreshApiTokens();
@@ -116,6 +128,7 @@ onMounted(async () => {
 
 <template>
   <div>
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <Dialog ref="newDialog"
@@ -182,8 +195,8 @@ onMounted(async () => {
           <span v-else>{{ '*' }}</span>
         </template>
         <template #actions="apiToken">
-          <div class="table-actions">
-            <Button small tool danger @click="onRevokeToken(apiToken.id, apiToken.name)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(apiToken, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>

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>

dashboard/src/components/app/Backups.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog, ProgressBar } from '@cloudron/pankow';
+import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, Menu, Dialog, ProgressBar } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { API_ORIGIN, RSTATES } from '../../constants.js';
 import { download } from '../../utils.js';
@@ -44,6 +44,45 @@ const columns = ref({
   }
 });
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(backup, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    visible: props.app.accessLevel === 'admin',
+    action: onEdit.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-download',
+    label: t('app.backups.backups.downloadBackupTooltip'),
+    // TODO backup.format is now part of the backup target!
+    visible: backup.format === 'tgz' && props.app.accessLevel === 'admin',
+    action: getDownloadLink.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-file-alt',
+    label: t('app.backups.backups.downloadConfigTooltip'),
+    visible: props.app.accessLevel === 'admin',
+    action: onDownloadConfig.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-clone',
+    label: t('app.backups.backups.cloneTooltip'),
+    visible: props.app.accessLevel === 'admin',
+    action: onClone.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-history',
+    label: t('app.backups.backups.restoreTooltip'),
+    disabled: !!props.app.taskId || props.app.runState === 'stopped',
+    action: onRestore.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-key',
+    label: t('app.backups.backups.checkIntegrity'),
+    visible: props.app.accessLevel === 'admin',
+    action: onCheckIntegrity.bind(null, backup),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const busy = ref(true);
 const errorMessage = ref('');
 const editBusy = ref(false);
@@ -224,8 +263,8 @@ onMounted(async () => {
 </script>
 
 <template>
-
   <div>
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <AppRestoreDialog ref="cloneDialog"/>
     <AppImportDialog ref="importDialog"/>
     <Dialog ref="editDialog"
@@ -328,15 +367,8 @@ onMounted(async () => {
         {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
       </template>
       <template #actions="backup">
-        <div class="table-actions">
-          <ButtonGroup>
-            <Button secondary tool small icon="fa-solid fa-pencil-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click="onEdit(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-download" v-if="backup.format === 'tgz' && app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadBackupTooltip')" :href="getDownloadLink(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-file-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadConfigTooltip')" @click="onDownloadConfig(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-clone" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.cloneTooltip')" @click="onClone(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-history" :disabled="!!app.taskId || app.runState === 'stopped'" v-tooltip="$t('app.backups.backups.restoreTooltip')" @click="onRestore(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-key" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.checkIntegrity')" @click="onCheckIntegrity(backup)"></Button>
-          </ButtonGroup>
+        <div style="text-align: right;">
+          <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
         </div>
       </template>
     </TableView>