mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-03 17:54:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add:Ability to edit backup location path on backups page #2973

Browse source 
- Added api endpoint PATCH /api/backups/path
- Cleanup backup page UI for mobile screens
This commit is contained in:
advplyr 2024-06-19 17:14:37 -05:00
parent 8498cab842
commit 331d7a41ab
5 changed files with 149 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

85
client/pages/config/backups.vue
View file

@ -1,10 +1,27 @@
<template>
<div>
<app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
<div v-if="backupLocation" class="flex items-center mb-4">
<span class="material-icons-outlined text-2xl text-black-50 mr-2">folder</span>
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelBackupLocation }}:</span>
<div class="text-gray-100 pl-4">{{ backupLocation }}</div>
<div v-if="backupLocation" class="mb-4 max-w-full overflow-hidden">
<div class="flex items-center mb-0.5">
<span class="material-icons-outlined text-2xl text-black-50 mr-2">folder</span>
<span class="text-white text-opacity-60 uppercase text-sm whitespace-nowrap">{{ $strings.LabelBackupLocation }}:</span>
</div>
<div v-if="!showEditBackupPath" class="inline-flex items-center w-full overflow-hidden">
<p class="text-gray-100 max-w-[calc(100%-40px)] text-sm sm:text-base break-words">{{ backupLocation }}</p>
<div class="w-10 min-w-10 flex items-center justify-center">
<button class="text-black-50 hover:text-yellow-500 inline-flex" type="button" @click="showEditBackupPath = !showEditBackupPath">
<span class="material-icons text-lg">edit</span>
</button>
</div>
</div>
<div v-else>
<form class="flex items-center w-full space-x-1" @submit.prevent="saveBackupPath">
<ui-text-input v-model="newBackupLocation" :disabled="savingBackupPath" class="w-full max-w-[calc(100%-50px)] text-sm h-8" />
<ui-btn small :loading="savingBackupPath" color="success" type="submit" class="h-8">{{ $strings.ButtonSave }}</ui-btn>
<ui-btn small :disabled="savingBackupPath" type="button" class="h-8" @click="cancelEditBackupPath">{{ $strings.ButtonCancel }}</ui-btn>
</form>
<p class="text-sm text-warning/80 pt-1">{{ $strings.MessageBackupsLocationEditNote }}</p>
</div>
</div>
<div class="flex items-center py-2">
@ -15,21 +32,23 @@
</div>
<div v-if="enableBackups" class="mb-6">
<div class="flex items-center pl-6 mb-2">
<span class="material-icons-outlined text-2xl text-black-50 mr-2">schedule</span>
<div class="w-40">
<div class="flex items-center pl-0 sm:pl-6 mb-2">
<span class="material-icons-outlined text-xl sm:text-2xl text-black-50 mr-2">schedule</span>
<div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span>
</div>
<div class="text-gray-100">{{ scheduleDescription }}</div>
<span class="material-icons text-lg text-black-50 hover:text-yellow-500 cursor-pointer ml-2" @click="showCronBuilder = !showCronBuilder">edit</span>
<div class="text-gray-100 text-sm sm:text-base">{{ scheduleDescription }}</div>
<button class="ml-2 text-black-50 hover:text-yellow-500 inline-flex" type="button" @click="showCronBuilder = !showCronBuilder">
<span class="material-icons text-lg">edit</span>
</button>
</div>
<div v-if="nextBackupDate" class="flex items-center pl-6 py-0.5 px-2">
<span class="material-icons-outlined text-2xl text-black-50 mr-2">event</span>
<div class="w-40">
<div v-if="nextBackupDate" class="flex items-center pl-0 sm:pl-6 py-0.5">
<span class="material-icons-outlined text-xl sm:text-2xl text-black-50 mr-2">event</span>
<div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span>
</div>
<div class="text-gray-100">{{ nextBackupDate }}</div>
<div class="text-gray-100 text-sm sm:text-base">{{ nextBackupDate }}</div>
</div>
</div>
@ -49,7 +68,7 @@
</ui-tooltip>
</div>
<tables-backups-table @loaded="backupsLoaded" />
<tables-backups-table ref="backupsTable" @loaded="backupsLoaded" />
<modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
</app-settings-content>
@ -72,7 +91,10 @@ export default {
cronExpression: '',
newServerSettings: {},
showCronBuilder: false,
backupLocation: ''
showEditBackupPath: false,
backupLocation: '',
newBackupLocation: '',
savingBackupPath: false
}
},
watch: {
@ -107,6 +129,39 @@ export default {
methods: {
backupsLoaded(backupLocation) {
this.backupLocation = backupLocation
this.newBackupLocation = backupLocation
},
cancelEditBackupPath() {
this.newBackupLocation = this.backupLocation
this.showEditBackupPath = false
},
saveBackupPath() {
if (!this.newBackupLocation?.trim()) {
this.$toast.error(this.$strings.MessageBackupsLocationPathEmpty)
return
}
this.newBackupLocation = this.newBackupLocation.trim()
if (this.newBackupLocation === this.backupLocation) {
this.showEditBackupPath = false
return
}
this.savingBackupPath = true
this.$axios
.patch('/api/backups/path', { path: this.newBackupLocation })
.then(() => {
this.backupLocation = this.newBackupLocation
this.showEditBackupPath = false
this.$refs.backupsTable.loadBackups()
})
.catch((error) => {
console.error('Failed to save backup path', error)
const errorMsg = error.response?.data || 'Failed to save backup path'
this.$toast.error(errorMsg)
})
.finally(() => {
this.savingBackupPath = false
})
},
updateBackupsSettings() {
if (isNaN(this.maxBackupSize) || this.maxBackupSize <= 0) {