Move schedule and retention settings back to a separate dialog

dashboard/src/components/BackupScheduleDialog.vue

@@ -0,0 +1,143 @@
+<script setup>
+
+import { ref, useTemplateRef, computed } from 'vue';
+import { Dialog, FormGroup, MultiSelect } from '@cloudron/pankow';
+import BackupTargetsModel from '../models/BackupTargetsModel.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const backupTargetsModel = BackupTargetsModel.create();
+
+const backupRetentions = [
+  { name: '2 days', id: { keepWithinSecs: 2 * 24 * 60 * 60 }},
+  { name: '1 week', id: { keepWithinSecs: 7 * 24 * 60 * 60 }}, // default
+  { name: '1 month', id: { keepWithinSecs: 30 * 24 * 60 * 60 }},
+  { name: '3 months', id: { keepWithinSecs: 3 * 30 * 24 * 60 * 60 }},
+  { name: '2 daily, 4 weekly', id: { keepDaily: 2, keepWeekly: 4 }},
+  { name: '3 daily, 4 weekly, 6 monthly', id: { keepDaily: 3, keepWeekly: 4, keepMonthly: 6 }},
+  { name: '7 daily, 4 weekly, 12 monthly', id: { keepDaily: 7, keepWeekly: 4, keepMonthly: 12 }},
+  { name: 'Forever', id: { keepWithinSecs: -1 }}
+];
+
+// values correspond to cron days
+const cronDays = [
+  { id: 0, name: 'Sunday' },
+  { id: 1, name: 'Monday' },
+  { id: 2, name: 'Tuesday' },
+  { id: 3, name: 'Wednesday' },
+  { id: 4, name: 'Thursday' },
+  { id: 5, name: 'Friday' },
+  { id: 6, name: 'Saturday' },
+];
+
+// generates 24h time sets (instead of american 12h) to avoid having to translate everything to locales eg. 12:00
+const cronHours = Array.from({ length: 24 }).map(function (v, i) { return { id: i, name: (i < 10 ? '0' : '') + i + ':00' }; });
+
+const policy = ref({
+  schedule: '',
+  retention: ''
+});
+
+const id = ref('');
+const busy = ref(false);
+const formError = ref('');
+const dialog = useTemplateRef('dialog');
+const days = ref([]);
+const hours = ref([]);
+const configureRetention = ref('');
+const isConfigureValid = computed(() => {
+  return !!days.value.length && !!hours.value.length;
+});
+
+async function onSubmit() {
+  if (!isConfigureValid.value) return;
+
+  busy.value = true;
+
+  let daysPattern;
+  if (days.value.length === 7) daysPattern = '*';
+  else daysPattern = days.value;
+
+  let hoursPattern;
+  if (hours.value.length === 24) hoursPattern = '*';
+  else hoursPattern = hours.value;
+
+  let [error] = await backupTargetsModel.setSchedule(id.value, `00 00 ${hoursPattern} * * ${daysPattern}`);
+  if (error) {
+    busy.value = false;
+    formError.value = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
+
+  [error] = await backupTargetsModel.setRetention(id.value, configureRetention.value);
+  if (error) {
+    busy.value = false;
+    formError.value = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
+
+  emit('success');
+  dialog.value.close();
+
+  busy.value = false;
+}
+
+defineExpose({
+  async open(target) {
+    id.value = target.id;
+    busy.value = false;
+    formError.value = false;
+
+    const currentRetentionString = JSON.stringify(target.retention);
+    let selectedRetention = backupRetentions.find(function (x) { return JSON.stringify(x.id) === currentRetentionString; });
+    if (!selectedRetention) selectedRetention = backupRetentions[0];
+    configureRetention.value = selectedRetention.id;
+
+    const tmp = target.schedule.split(' ');
+    const tmpHours = tmp[2].split(',');
+    const tmpDays = tmp[5].split(',');
+    if (tmpDays[0] === '*') days.value = cronDays.map((day) => { return day.id; });
+    else days.value = tmpDays.map((day) => { return parseInt(day, 10); });
+
+    hours.value = tmpHours.map((hour) => { return parseInt(hour, 10); });
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="$t('backups.configureBackupSchedule.title')"
+     reject-style="secondary"
+    :reject-label="busy ? null : $t('main.dialog.cancel')"
+    :confirm-label="$t('main.dialog.save')"
+    :confirm-busy="busy"
+    :confirm-active="isConfigureValid"
+    @confirm="onSubmit()"
+  >
+    <div class="error-label" v-show="formError">{{ formError }}</div>
+
+    <form @submit.prevent="onSubmit()" autocomplete="off">
+      <fieldset>
+        <FormGroup>
+          <label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
+          <p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>
+
+          <div style="display: flex; gap: 10px;">
+            <div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="days" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
+            <div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="hours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
+          </div>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
+          <select id="retentionInput" v-model="configureRetention">
+            <option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
+          </select>
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>