Reorder bits in the app backup page

This commit is contained in:
Johannes Zellner
2025-04-28 17:06:31 +02:00
parent 6e06e05f12
commit 39d631b056
2 changed files with 35 additions and 30 deletions

View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, useTemplateRef } from 'vue';
import { Dialog, FormGroup, SingleSelect, TextInput } from 'pankow';
import { Dialog, FormGroup, SingleSelect } from 'pankow';
import { prettyDate } from 'pankow/utils';
import { ISTATES } from '../constants.js';
import { taskNameFromInstallationState } from '../utils.js';

View File

@@ -9,6 +9,7 @@ import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, Button
import { prettyLongDate } from 'pankow/utils';
import { API_ORIGIN, SECRET_PLACEHOLDER } from '../../constants.js';
import { download } from '../../utils.js';
import AppImportDialog from '../AppImportDialog.vue';
import AppRestoreDialog from '../AppRestoreDialog.vue';
import SettingsItem from '../SettingsItem.vue';
import AppsModel from '../../models/AppsModel.js';
@@ -158,8 +159,9 @@ async function onRestoreSubmit() {
restoreDialog.value.close();
}
const importDialog = useTemplateRef('importDialog');
function onImport() {
// TODO
importDialog.value.open(props.app.id);
}
const cloneDialog = useTemplateRef('cloneDialog');
@@ -187,6 +189,7 @@ onMounted(async () => {
<div>
<AppRestoreDialog ref="cloneDialog"/>
<AppImportDialog ref="importDialog"/>
<Dialog ref="editDialog"
:title="$t('backups.backupEdit.title')"
:reject-label="$t('main.dialog.cancel')"
@@ -251,10 +254,37 @@ onMounted(async () => {
</div>
</Dialog>
<label>{{ $t('app.backups.backups.title') }}</label>
<p>{{ $t('app.backups.backups.description') }}</p>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.auto.title') }}</label>
<div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
</FormGroup>
<Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
</SettingsItem>
<br/>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.import.title') }}</label>
<div>{{ $t('app.backups.import.description') }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
</div>
</SettingsItem>
<hr/>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.backups.title') }}</label>
<div>{{ $t('app.backups.backups.description') }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
</div>
</SettingsItem>
<p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
<TableView :model="backups" :columns="columns" :busy="busy">
<template #preserveSecs="backup">
@@ -275,30 +305,5 @@ onMounted(async () => {
</div>
</template>
</TableView>
<br/>
<p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
<Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
<hr/>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.import.title') }}</label>
<div>{{ $t('app.backups.import.description') }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
</div>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('app.backups.auto.title') }}</label>
<div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
</FormGroup>
<Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
</SettingsItem>
</div>
</template>