Add app restore dialog

dashboard/src/components/app/Backups.vue

@@ -50,6 +50,7 @@ const importBusy = ref(false);
 const autoBackupsEnabled = ref(false);
 const backups = ref([]);
 const editDialog = useTemplateRef('editDialog');
+const restoreDialog = useTemplateRef('restoreDialog');
 
 watch(autoBackupsEnabled, async (newValue) => {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: newValue });
@@ -118,6 +119,27 @@ async function onDownloadConfig(backup) {
   download(filename, JSON.stringify(tmp, null, 4));
 }
 
+const restoreBusy = ref(false);
+const restoreBackup = ref({});
+
+async function onRestore(backup) {
+  restoreBusy.value = false;
+  restoreBackup.value = backup;
+  restoreDialog.value.open();
+}
+
+async function onRestoreSubmit() {
+  restoreBusy.value = true;
+
+  const [error] = await appsModel.restore(props.app.id, restoreBackup.value.id);
+  if (error) {
+    restoreBusy.value = false;
+    return console.error(error);
+  }
+
+  restoreDialog.value.close();
+}
+
 async function refresh() {
   const [error, result] = await appsModel.backups(props.app.id);
   if (error) return console.error(error);
@@ -183,6 +205,22 @@ onMounted(async () => {
     </div>
   </Dialog>
 
+  <Dialog ref="restoreDialog"
+    :title="$t('app.restoreDialog.title', { app: app.fqdn })"
+    :reject-label="$t('main.dialog.close')"
+     reject-style="secondary"
+    :confirm-label="$t('app.restoreDialog.restoreAction')"
+    :confirm-active="true"
+    :confirm-busy="restoreBusy"
+    @confirm="onRestoreSubmit()"
+  >
+    <div>
+      <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
+      <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
+      <br/>
+    </div>
+  </Dialog>
+
   <div>
     <label>{{ $t('app.backups.backups.title') }}</label>
     <p>{{ $t('app.backups.backups.description') }}</p>