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

- Added api endpoint PATCH /api/backups/path
- Cleanup backup page UI for mobile screens

client/pages/config/backups.vue

@@ -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) {

client/strings/en-us.json

@@ -597,6 +597,8 @@
   "MessageAddToPlayerQueue": "Add to player queue",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
   "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
+  "MessageBackupsLocationPathEmpty": "Backup location path cannot be empty",
+  "MessageBackupsLocationEditNote": "Note: Updating the backup location will not move or modify existing backups",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoRSSFeeds": "No RSS feeds are open",