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

Add dialog to edit backups

Browse Source
This commit is contained in:
Johannes Zellner
2025-02-06 13:38:19 +01:00
parent c6e93b9870
commit 2f5c4413e1
2 changed files with 74 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
dashboard/src/components/BackupList.vue
View File

@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, ProgressBar, TableView, Dialog } from 'pankow';
import { Button, ButtonGroup, ProgressBar, FormGroup, TextInput, Checkbox, TableView, Dialog } from 'pankow';
import { prettyLongDate } from 'pankow/utils';
import { TASK_TYPES, SECRET_PLACEHOLDER } from '../constants.js';
import Section from '../components/Section.vue';
@@ -151,10 +151,8 @@ async function onDownloadConfig(backup) {
download(filename, JSON.stringify(tmp, null, 4));
}
function onEdit(backup) {
console.log('edit', backup);
}
// backups info dialog
const infoDialog = useTemplateRef('infoDialog');
const infoBackup = ref({ contents: [] });
function onInfo(backup) {
@@ -162,6 +160,37 @@ function onInfo(backup) {
infoDialog.value.open();
}
// edit backups dialog
const editDialog = useTemplateRef('editDialog');
const editBackupError = ref('');
const editBackupBusy = ref(false);
const editBackupId = ref('');
const editBackupLabel = ref('');
const editBackupPersist = ref(false);
function onEdit(backup) {
editBackupError.value = '';
editBackupBusy.value = false;
editBackupId.value = backup.id;
editBackupLabel.value = backup.label;
editBackupPersist.value = backup.preserveSecs === -1;
editDialog.value.open();
}
async function onEditSubmit() {
editBackupBusy.value = true;
const [error] = await backupsModel.edit(editBackupId.value, editBackupLabel.value, editBackupPersist.value ? -1 : 0);
if (error) {
return console.error(error);
}
await refreshBackups();
editBackupBusy.value = false;
editDialog.value.close();
}
onMounted(async () => {
await refreshBackups();
await refreshTasks();
@@ -209,6 +238,29 @@ onMounted(async () => {
</span>
</Dialog>
<Dialog ref="editDialog"
:title="$t('backups.backupEdit.title')"
:reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
reject-style="secondary"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="editBackupBusy"
@confirm="onEditSubmit()"
>
<p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
<form @submit.prevent="onEditSubmit()" autocomplete="off">
<fieldset>
<FormGroup>
<label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
<TextInput id="backupLabelInput" v-model="editBackupLabel" />
</FormGroup>
<Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
<!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
</fieldset>
</form>
</Dialog>
<Section :title="$t('backups.listing.title')">
<template #header-buttons>
<Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
@@ -219,7 +271,7 @@ onMounted(async () => {
<i class="fas fa-archive" v-show="slotProps.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
</template>
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }} <b v-show="slotProps.label">({{ slotProps.label }})</b></template>
<template #content="slotProps">
<span v-if="slotProps.contents.length">{{ $t('backups.listing.appCount', { appCount: slotProps.contents.length }) }}</span>
@@ -228,8 +280,11 @@ onMounted(async () => {
<template #actions="slotProps">
<div class="table-actions">
<Button tool secondary small icon="fa-solid fa-pencil-alt" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click.stop="onEdit(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(slotProps)"></Button>
<ButtonGroup>
<Button tool secondary small icon="fa-solid fa-circle-info" @click.stop="onInfo(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-pencil-alt" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click.stop="onEdit(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(slotProps)"></Button>
</ButtonGroup>
</div>
</template>
</TableView>