Add app backup edit dialog

dashboard/src/components/app/Backups.vue

@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, watch, onMounted } from 'vue';
-import { Icon, Button, Switch, TableView, ButtonGroup } from 'pankow';
+import { ref, watch, onMounted, useTemplateRef } from 'vue';
+import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import AppsModel from '../../models/AppsModel.js';
 
@@ -36,10 +36,16 @@ const columns = ref({
 
 const busy = ref(true);
 const errorMessage = ref('');
+const editBusy = ref(false);
+const editError = ref('');
+const editBackup = ref({});
+const editPersist = ref(false);
+const editLabel = ref('');
 const createBusy = ref(false);
 const importBusy = ref(false);
 const autoBackupsEnabled = ref(false);
 const backups = ref([]);
+const editDialog = useTemplateRef('editDialog');
 
 watch(autoBackupsEnabled, async (newValue) => {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: newValue });
@@ -54,6 +60,27 @@ async function onCreate() {
   setTimeout(() => createBusy.value = false, 2000);
 }
 
+function onEdit(backup) {
+  editBusy.value = false;
+  editBackup.value = backup;
+  editPersist.value = backup.preserveSecs === -1;
+  editLabel.value = backup.label || '';
+  editError.value = '';
+  editDialog.value.open();
+}
+
+async function onEditSubmit() {
+  const [error] = await appsModel.updateBackup(props.app.id, editBackup.value.id, editLabel.value, editPersist.value  ? -1 : 0);
+  if (error) {
+    editError.value = error.body ? error.body.message : 'Internal error';
+    editBusy.value = false;
+    return console.error(error);
+  }
+
+  refresh();
+  editDialog.value.close();
+}
+
 function getDownloadLink(backup) {
   const accessToken = localStorage.token;
   const origin = import.meta.env.VITE_API_ORIGIN || window.location.origin;
@@ -78,6 +105,54 @@ onMounted(async () => {
 </script>
 
 <template>
+  <Dialog ref="editDialog"
+    :title="$t('backups.backupEdit.title')"
+    :reject-label="$t('main.dialog.cancel')"
+     reject-style="secondary"
+    :confirm-label="$t('main.dialog.save')"
+    :confirm-active="true"
+    :confirm-busy="editBusy"
+    @confirm="onEditSubmit()"
+  >
+    <div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+        <div class="info-value">{{ editBackup.id }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+        <div class="info-value">{{ editBackup.emotePath }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+        <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+        <div class="info-value">{{ editBackup.packageVersion }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
+        <div class="info-value">{{ editBackup.format }}</div>
+      </div>
+
+      <form @submit.prevent="onEditSubmit()" autocomplete="off">
+        <fieldset :disabled="editBusy">
+          <p class="has-error" v-show="editError">{{ editError }}</p>
+
+          <FormGroup>
+            <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
+            <TextInput v-model="editLabel" id="labelInput" />
+          </FormGroup>
+
+          <br/>
+
+          <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
+        </fieldset>
+      </form>
+    </div>
+  </Dialog>
+
   <div>
     <label>{{ $t('app.backups.backups.title') }}</label>
     <p>{{ $t('app.backups.backups.description') }}</p>
@@ -86,7 +161,7 @@ onMounted(async () => {
 
     <TableView :model="backups" :columns="columns" :busy="busy">
       <template #preserveSecs="backup">
-        <Icon icon="fa-solid fa-archive" v-show="backup.preseveSecs === -1" />
+        <Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
       </template>
       <template #creationTime="backup">
         {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>