Use ActionBar in remaining lists

dashboard/src/components/DockerRegistries.vue

@@ -5,7 +5,8 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
-import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, TableView, InputDialog } from '@cloudron/pankow';
+import ActionBar from '../components/ActionBar.vue';
 import Section from '../components/Section.vue';
 import DockerRegistryDialog from '../components/DockerRegistryDialog.vue';
 import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
@@ -28,25 +29,23 @@ const columns = {
     label: t('dockerRegistries.username'),
     sort: true
   },
-  actions: {}
+  actions: {
+    width: '100px',
+  }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(registry, event) {
-  actionMenuModel.value = [{
+function createActionMenu(registry) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onEditOrAdd.bind(null, registry),
-  }, {
-    separator: true,
   }, {
     icon: 'fa-solid fa-trash-alt',
     label: t('main.action.remove'),
+    quickAction: true,
     action: onRemove.bind(null, registry),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const features = inject('features');
@@ -94,7 +93,6 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('dockerRegistries.title')" :title-badge="!features.privateDockerRegistry ? 'Upgrade' : ''">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <DockerRegistryDialog ref="dialog" @success="refresh()"/>
 
@@ -107,9 +105,7 @@ onMounted(async () => {
 
     <TableView :columns="columns" :model="registries" :busy="busy" :placeholder="$t('dockerRegistries.emptyPlaceholder')">
       <template #actions="registry">
-        <div style="text-align: right;">
-          <Button tool plain secondary @click.capture="onActionMenu(registry, $event)" icon="fa-solid fa-ellipsis" />
-        </div>
+        <ActionBar :actions="createActionMenu(registry)"/>
       </template>
     </TableView>
   </Section>

dashboard/src/components/SystemBackupList.vue

@@ -5,9 +5,10 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
+import { Button, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
 import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import { TASK_TYPES } from '../constants.js';
+import ActionBar from  '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import BackupsModel from '../models/BackupsModel.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
@@ -56,10 +57,8 @@ const columns = {
   actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(backup, event) {
-  actionMenuModel.value = [{
+function createActionMenu(backup) {
+  return [{
     icon: 'fa-solid fa-circle-info',
     label: t('backups.archives.info'),
     action: onInfo.bind(null, backup),
@@ -72,8 +71,6 @@ function onActionMenu(backup, event) {
     label: t('backups.listing.tooltipDownloadBackupConfig'),
     action: onDownloadConfig.bind(null, backup),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -243,8 +240,6 @@ defineExpose({ refresh });
 
 <template>
   <Section :title="$t('backups.listing.title')">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
-
     <BackupInfoDialog ref="infoDialog" />
 
     <Dialog ref="editDialog"
@@ -294,9 +289,7 @@ defineExpose({ refresh });
       <template #site="backup">{{ backup.site.name }}</template>
 
       <template #actions="backup">
-        <div style="text-align: right;">
-          <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
-        </div>
+        <ActionBar :actions="createActionMenu(backup)"/>
       </template>
     </TableView>
   </Section>

dashboard/src/views/AppArchiveView.vue

@@ -5,10 +5,11 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
+import { TableView, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { API_ORIGIN } from '../constants.js';
 import AppRestoreDialog from  '../components/AppRestoreDialog.vue';
+import ActionBar from  '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import ArchivesModel from '../models/ArchivesModel.js';
 import { download } from '../utils.js';
@@ -36,12 +37,11 @@ const columns = {
   actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(archive, event) {
-  actionMenuModel.value = [{
+function createActionMenu(archive) {
+  return [{
     icon: 'fa-solid fa-history',
     label: t('backups.restoreArchiveDialog.restoreAction'),
+    quickAction: true,
     action: onRestore.bind(null, archive),
   }, {
     separator: true,
@@ -56,8 +56,6 @@ function onActionMenu(archive, event) {
     label: t('main.action.remove'),
     action: onRemove.bind(null, archive),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -117,8 +115,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
-
     <Section :title="$t('backups.archives.title')">
       <InputDialog ref="inputDialog"/>
       <AppRestoreDialog ref="restoreDialog"/>
@@ -138,9 +134,7 @@ onMounted(async () => {
         <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>
 
         <template #actions="archive">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(archive, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(archive)"/>
         </template>
       </TableView>
     </Section>

dashboard/src/views/ServicesView.vue

@@ -5,10 +5,11 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { computed, reactive, onMounted, ref, useTemplateRef, nextTick, onUnmounted } from 'vue';
-import { Button, Menu, TableView, ProgressBar, FormGroup, Checkbox, Dialog } from '@cloudron/pankow';
+import { Button, TableView, ProgressBar, FormGroup, Checkbox, Dialog } from '@cloudron/pankow';
 import { prettyBinarySize } from '@cloudron/pankow/utils';
 import { each } from 'async';
 import Section from '../components/Section.vue';
+import ActionBar from '../components/ActionBar.vue';
 import StateLED from '../components/StateLED.vue';
 import ServicesModel from '../models/ServicesModel.js';
 import SystemModel from '../models/SystemModel.js';
@@ -34,17 +35,18 @@ const columns = {
     sort: true,
     hideMobile: true,
   },
-  actions: {}
+  actions: {
+    width: '100px',
+  }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(id, event) {
-  actionMenuModel.value = [{
+function createActionMenu(id) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.configure'),
-    disabled() { return refreshBusy.value; },
+    disabled: refreshBusy.value,
     visible: services[id].status !== 'disabled' && services[id].memoryLimit,
+    quickAction: true,
     action: onEdit.bind(null, id),
   }, {
     separator: true,
@@ -61,8 +63,6 @@ function onActionMenu(id, event) {
     target: '_blank',
     href: `/logs.html?id=${id}`,
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const services = reactive({
@@ -230,7 +230,6 @@ onUnmounted(() => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <Dialog ref="dialog"
       :title="$t('services.configure.title')"
       :confirm-busy="editBusy"
@@ -276,9 +275,7 @@ onUnmounted(() => {
           <span v-show="service.memoryLimit">{{ prettyBinarySize(service.memoryLimit) }}</span>
         </template>
         <template #actions="service">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(service.id, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(service.id)"/>
         </template>
       </TableView>
     </Section>

dashboard/src/views/VolumesView.vue

@@ -5,7 +5,8 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, useTemplateRef, onMounted } from 'vue';
-import { Button, Menu, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, TableView, TextInput, MaskedInput } from '@cloudron/pankow';
+import { Button, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, TableView, TextInput, MaskedInput } from '@cloudron/pankow';
+import ActionBar from  '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import VolumesModel from '../models/VolumesModel.js';
@@ -28,16 +29,17 @@ const columns = {
     sort: true,
     hideMobile: true,
   },
-  actions: {}
+  actions: {
+    width: '100px',
+  }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(volume, event) {
-  actionMenuModel.value = [{
+function createActionMenu(volume) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
     visible: volume.mountType === 'sshfs' || volume.mountType === 'cifs' || volume.mountType === 'nfs',
+    quickAction: true,
     action: openVolumeDialog.bind(null, volume),
   }, {
     separator: true,
@@ -59,8 +61,6 @@ function onActionMenu(volume, event) {
     label: t('main.action.remove'),
     action: onRemove.bind(null, volume),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -231,7 +231,6 @@ onMounted(async () =>{
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <!-- width is to fix the 70 characters per line for ssh key -->
@@ -335,9 +334,7 @@ onMounted(async () =>{
           </div>
         </template>
         <template #actions="volume">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(volume, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(volume)"/>
         </template>
       </TableView>
     </Section>