Move schedule and retention settings back to a separate dialog

dashboard/src/views/BackupTargetsView.vue

@@ -5,26 +5,21 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { marked } from 'marked';
-import { Button, ButtonGroup, TableView } from '@cloudron/pankow';
+import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
-import StateLED from  '../components/StateLED.vue';
+import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
 import BackupTargetDialog from  '../components/BackupTargetDialog.vue';
 import BackupList from  '../components/BackupList.vue';
-import BackupsModel from '../models/BackupsModel.js';
 import BackupTargetsModel from '../models/BackupTargetsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
-import { mountlike, s3like } from  '../utils.js';
 
 const profileModel = ProfileModel.create();
-const backupsModel = BackupsModel.create();
 const backupTargetsModel = BackupTargetsModel.create();
 
+const inputDialog = useTemplateRef('inputDialog');
+
 const profile = ref({});
-const manualBackupApps = ref([]);
 const config = ref({});
-const mountOptions = ref({});
-const mountStatus = ref({});
 const targets = ref([]);
 
 const columns = {
@@ -53,24 +48,27 @@ function onAddOrEdit(target = null) {
   backupTargetDialog.value.open(target);
 }
 
-const remountBusy = ref(false);
+const backupScheduleDialog = useTemplateRef('backupScheduleDialog');
+function onEditSchedule(target) {
+  backupScheduleDialog.value.open(target);
+}
 
-async function onRemount() {
-  if (!mountlike(config.value.provider)) return;
+async function onRemoveTarget(target) {
+  // TODO translate
+  const yes = await inputDialog.value.confirm({
+    title: 'Really remove this backup target?',
+    message: 'This will also remove any backups linked to this target',
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.cancel')
+  });
 
-  remountBusy.value = true;
+  if (!yes) return;
 
-  const [error] = await backupsModel.remount();
-  if (error) {
-    console.error('Failed to remount backup storage.', error);
-    window.pankow.notify({ text: `Remount failed: ${error.message}`, persistent: true, type: 'danger' });
-  }
+  const [error] = await backupTargetsModel.del(target.id);
+  if (error) console.error(error);
 
-  // give the backend some time
-  setTimeout(() => {
-    remountBusy.value = false;
-    refresh();
-  }, 2000);
+  await refresh();
 }
 
 async function refresh() {
@@ -78,17 +76,6 @@ async function refresh() {
   if (error) return console.error(error);
 
   targets.value = result;
-  // mountOptions.value = result.mountOptions || {};
-  // mountStatus.value = {};
-
-  // if (!mountlike(config.value.provider)) return;
-
-  // [error, result] = await backupsModel.mountStatus();
-  // if (error) return console.error(error);
-
-  // mountStatus.value = result;
-
-  console.log(targets.value)
 }
 
 onMounted(async () => {
@@ -104,7 +91,9 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <InputDialog ref="inputDialog" />
     <BackupTargetDialog ref="backupTargetDialog" @success="refresh()"/>
+    <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
 
     <Section title="Backup Targets">
       <template #header-buttons>
@@ -132,7 +121,9 @@ onMounted(async () => {
         <template #actions="target">
           <div class="table-actions">
             <ButtonGroup>
+              <Button tool secondary small icon="fa-solid fa-clock" @click.stop="onEditSchedule(target)"></Button>
               <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onAddOrEdit(target)"></Button>
+              <Button small tool danger :disabled="target.primary" @click.stop="onRemoveTarget(target)" icon="far fa-trash-alt" />
             </ButtonGroup>
           </div>
         </template>