feat: task edition in front end

2026-07-09 18:16:32 +02:00
parent 2e5eb86848
commit 1b8e6ff8ae
6 changed files with 208 additions and 19 deletions
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, watch } from "vue";
+const cron = defineModel<string|null>({ required: true });
+
+const props = defineProps<{editMode: boolean}>();
+
+enum CRON_OPTION {
+    ONE_TIME = 1,
+    EVERY_DAY = 2,
+    EVERY_WEEK = 3,
+    EVERY_MONTH = 4,
+    EVERY_YEAR = 5,
+    SPECIFIC = 6,
+}
+
+const cronOption = ref<CRON_OPTION>(CRON_OPTION.ONE_TIME);
+const cronValue = ref<number>(1);
+
+function updateFromValue() {
+    let value: RegExpMatchArray | null;
+    if (cron.value === null) {
+        cronOption.value = CRON_OPTION.ONE_TIME;
+    } else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_DAY;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_WEEK;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_MONTH;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_YEAR;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else {
+        cronOption.value = CRON_OPTION.SPECIFIC;
+    }
+}
+
+function updateCron() {
+    switch(cronOption.value) {
+        case CRON_OPTION.ONE_TIME:
+            cron.value = null;
+            break;
+        case CRON_OPTION.EVERY_DAY:
+            cron.value = `0 ${cronValue.value.toFixed(0)} * * *`;
+            break;
+        case CRON_OPTION.EVERY_WEEK:
+            cron.value = `0 0 * * ${cronValue.value.toFixed(0)}`;
+            break;
+        case CRON_OPTION.EVERY_MONTH:
+            cron.value = `0 0 ${cronValue.value.toFixed(0)} * *`;
+            break;
+        case CRON_OPTION.EVERY_YEAR:
+            cron.value = `0 0 1 ${cronValue.value.toFixed(0)} *`;
+            break;
+        case CRON_OPTION.SPECIFIC:
+            cron.value ??= '0 0 * * *';
+            break;
+    }
+}
+
+function changecronOption() {
+    switch(cronOption.value) {
+        case CRON_OPTION.EVERY_DAY:
+            cronValue.value = 0;
+            break;
+        case CRON_OPTION.EVERY_WEEK:
+        case CRON_OPTION.EVERY_MONTH:
+        case CRON_OPTION.EVERY_YEAR:
+            cronValue.value = 1;
+            break;
+    }
+    updateCron();
+}
+
+onBeforeMount(updateFromValue);
+watch(cron, () => {
+    if (!props.editMode) {
+        updateFromValue();
+    }
+});
+
+watch(cronValue, updateCron);
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <select v-model="cronOption" class="select" @change="changecronOption">
+          <option :value="CRON_OPTION.ONE_TIME">One time (do not repeat)</option>
+          <option :value="CRON_OPTION.EVERY_DAY">Every day at</option>
+          <option :value="CRON_OPTION.EVERY_WEEK">Every week on</option>
+          <option :value="CRON_OPTION.EVERY_MONTH">Every month on the</option>
+          <option :value="CRON_OPTION.EVERY_YEAR">Every year on</option>
+          <option :value="CRON_OPTION.SPECIFIC">Specific</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_DAY" v-model="cronValue" class="select">
+          <option v-for="i in Array.from(Array(24).keys())" :key="`h${i}`" :value="i">{{ i.toFixed(0).padStart(2, '0') }}:00</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_WEEK" v-model="cronValue" class="select">
+          <option :value="1">Monday</option>
+          <option :value="2">Tuesday</option>
+          <option :value="3">Wednesday</option>
+          <option :value="4">Thursday</option>
+          <option :value="5">Friday</option>
+          <option :value="6">Saturday</option>
+          <option :value="7">Sunday</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_MONTH" v-model="cronValue" class="select">
+          <option v-for="i in Array.from(Array(32).keys())" :key="`d${i}`" :value="i">{{i}}{{ i % 10 == 1 ? 'st' : (i % 10 === 2 ? 'nd': (i % 10 === 3 ? 'rd' : 'th')) }}</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_YEAR" v-model="cronValue" class="select">
+          <option :value="1">January</option>
+          <option :value="2">February</option>
+          <option :value="3">March</option>
+          <option :value="4">April</option>
+          <option :value="5">May</option>
+          <option :value="6">June</option>
+          <option :value="7">July</option>
+          <option :value="8">August</option>
+          <option :value="9">September</option>
+          <option :value="10">October</option>
+          <option :value="11">November</option>
+          <option :value="12">December</option>
+        </select>
+        <input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="cron" type="text" class="input font-mono" />
+    </div>
+</template>