Rename BackupScheduleDialog.vue to BackupSiteScheduleDialog.vue

2025-11-05 13:41:13 +01:00
parent 9d6a755486
commit 5b6f796606
2 changed files with 4 additions and 4 deletions
@@ -0,0 +1,131 @@
+<script setup>
+
+import { ref, useTemplateRef, computed } from 'vue';
+import { Checkbox, Dialog, FormGroup, SingleSelect, MultiSelect } from '@cloudron/pankow';
+import BackupSitesModel from '../models/BackupSitesModel.js';
+import { cronDays, cronHours } from '../utils.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const backupSitesModel = BackupSitesModel.create();
+
+const id = ref('');
+const busy = ref(false);
+const formError = ref('');
+const dialog = useTemplateRef('dialog');
+const scheduleEnabled = ref(false);
+const days = ref([]);
+const hours = ref([]);
+const configureRetention = ref(''); // this is 'name' and not 'id' of backupRetentions because SingleSelect needs strings
+const isConfigureValid = computed(() => {
+  return !!days.value.length && !!hours.value.length;
+});
+
+async function onSubmit() {
+  if (!isConfigureValid.value) return;
+
+  busy.value = true;
+
+  let schedule;
+  if (scheduleEnabled.value) {
+    let daysPattern;
+    if (days.value.length === 7) daysPattern = '*';
+    else daysPattern = days.value;
+
+    let hoursPattern;
+    if (hours.value.length === 24) hoursPattern = '*';
+    else hoursPattern = hours.value;
+
+    schedule = `00 00 ${hoursPattern} * * ${daysPattern}`;
+  } else {
+    schedule = 'never';
+  }
+
+  let [error] = await backupSitesModel.setSchedule(id.value, schedule);
+  if (error) {
+    busy.value = false;
+    formError.value = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
+
+  const selectedRetention = BackupSitesModel.backupRetentions.find(function (x) { return x.name === configureRetention.value; });
+  [error] = await backupSitesModel.setRetention(id.value, selectedRetention.id);
+  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(site) {
+    id.value = site.id;
+    busy.value = false;
+    formError.value = false;
+
+    const currentRetentionString = JSON.stringify(site.retention);
+    const selectedRetention = BackupSitesModel.backupRetentions.find(function (x) { return JSON.stringify(x.id) === currentRetentionString; });
+    configureRetention.value = selectedRetention ? selectedRetention.name : BackupSitesModel.backupRetentions[0].name;
+
+    if (site.schedule === 'never') {
+      scheduleEnabled.value = false;
+    } else {
+      scheduleEnabled.value = true;
+
+      const tmp = site.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); });
+
+      if (tmpHours[0] === '*') hours.value = cronHours.map(h => h.id);
+      else 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="$t('main.dialog.cancel')"
+    :reject-active="!busy"
+    :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>
+          <div v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></div>
+
+          <Checkbox :label="$t('main.statusEnabled')" v-model="scheduleEnabled" />
+          <div v-if="scheduleEnabled" style="display: flex; gap: 10px; margin-left: 10px">
+            <div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" :disabled="!scheduleEnabled" v-model="days" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
+            <div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect :disabled="!scheduleEnabled" v-model="hours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
+          </div>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
+          <!-- we do not used id as key because SingleSelect can only handle strings -->
+          <SingleSelect id="retentionInput" v-model="configureRetention" :options="BackupSitesModel.backupRetentions" option-key="name" option-label="name" />
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>