Make backuptarget actions a dropdown menu

dashboard/src/views/BackupTargetsView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
@@ -131,6 +131,43 @@ async function refresh() {
   busy.value = false;
 }
 
+const actionMenuModel = ref([]);
+
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(target, event) {
+  // TODO translate
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-sync-alt',
+    label: t('backups.location.remount'),
+    visible: target.provider === 'sshfs' || target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'ext4' || target.provider === 'xfs',
+    action: onRemount.bind(null, target),
+  }, {
+    separator: true,
+    visible: target.provider === 'sshfs' || target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'ext4' || target.provider === 'xfs',
+  }, {
+    icon: 'fa-solid fa-clock',
+    label: 'Schedule and Retention',
+    action: onEditSchedule.bind(null, target),
+  }, {
+    icon: 'fa-solid fa-crown',
+    label: 'Set as Primary',
+    disabled: target.primary,
+    action: onMakePrimaryTarget.bind(null, target),
+  }, {
+    icon: 'fa-solid fa-pencil-alt',
+    label: 'Edit',
+  }, {
+    separator: true
+  }, {
+    icon: 'fa-solid fa-trash',
+    label: 'Remove',
+    disabled: target.primary,
+    action: onRemoveTarget.bind(null, target),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 onMounted(async () => {
   const [error, result] = await profileModel.get();
   if (error) return console.error(error);
@@ -144,6 +181,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <BackupTargetDialog ref="backupTargetDialog" @success="refresh()"/>
     <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
@@ -180,7 +218,10 @@ onMounted(async () => {
         </template>
 
         <template #actions="target">
-          <div class="table-actions">
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(target, $event)" icon="fa-solid fa-ellipsis" />
+          </div>
+          <!-- <div class="table-actions">
             <ButtonGroup>
               <Button tool secondary small icon="fa-solid fa-sync-alt" v-if="target.provider === 'sshfs' || target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'ext4' || target.provider === 'xfs'" v-tooltip="$t('backups.location.remount')" @click.stop="onRemount(target)"></Button>
               <Button tool secondary small icon="fa-solid fa-clock" @click.stop="onEditSchedule(target)"></Button>
@@ -189,6 +230,7 @@ onMounted(async () => {
               <Button small tool danger :disabled="target.primary" @click.stop="onRemoveTarget(target)" icon="far fa-trash-alt" />
             </ButtonGroup>
           </div>
+           -->
         </template>
       </TableView>
     </Section>