jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Remove all usage of old table action pattern

Browse Source
This commit is contained in:
Johannes Zellner
2025-08-18 19:12:38 +02:00
parent faef230d85
commit 42945e1b42
6 changed files with 107 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/app/Backups.vue
+43 -11
View File
@@ -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>