refactor: reduce responsability of individual parts

resources/ts/api/tasks.ts

@@ -1,16 +1,6 @@
-import type { RawTask, Task, TaskCreateData, TaskUpdateData } from "@/types";
+import { parseTask } from "@/lib/tasks";
+import type { Task, TaskCreateData, TaskUpdateData } from "@/types";
 
-function parseTask(task: RawTask): Task {
-    return {
-        id: task.id,
-        name: task.name,
-        reset_cron: task.reset_cron,
-        check_date: task.check_date ? new Date(task.check_date) : null,
-        previous_check_date: task.previous_check_date
-            ? new Date(task.previous_check_date)
-            : null,
-    };
-}
 
 export async function getTasks(list: string): Promise<Task[]> {
     const response = await fetch(`/api/lists/${list}/tasks`);

resources/ts/components/CronInput.vue

@@ -1,120 +1,79 @@
 <script setup lang="ts">
 import { ref, onBeforeMount, watch } from "vue";
-import { CronExpressionParser } from 'cron-parser'
+import { getCron, parseCron, validCron } from "@/lib/cron";
+import { CronType } from "@/enums";
+import { DEFAULT_CRON } from "@/constants";
 
 const cron = defineModel<string|null>({ required: true });
-const rawCron = ref<string>('0 0 * * *');
+const rawCron = ref<string>(DEFAULT_CRON);
 const valid = ref<boolean>(true);
 const props = defineProps<{editMode: boolean}>();
 
-enum CRON_OPTION {
+const cronType = ref<CronType>(CronType.ONE_TIME);
-    ONE_TIME = 1,
+const cronValue = ref<number>(0);
-    EVERY_DAY = 2,
-    EVERY_WEEK = 3,
-    EVERY_MONTH = 4,
-    EVERY_YEAR = 5,
-    SPECIFIC = 6,
-}
 
-const cronOption = ref<CRON_OPTION>(CRON_OPTION.ONE_TIME);
+function onCronChanged() {
-const cronValue = ref<number>(1);
+    const data = parseCron(cron.value);
-
+    rawCron.value = cron.value ?? DEFAULT_CRON;
-function updateFromValue() {
+    cronType.value = data.type;
-    let value: RegExpMatchArray | null;
+    cronValue.value = data.value;
-    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;
-    }
-    rawCron.value = cron.value ?? '0 0 * * *';
 }
 
 function updateCron() {
-    switch(cronOption.value) {
+    cron.value = getCron(cronType.value, cronValue.value, rawCron.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:
-            rawCron.value = cron.value ?? '0 0 * * *';
-            break;
-    }
 }
 
-function changecronOption() {
+function onChangeCronType() {
-    switch(cronOption.value) {
+    switch(cronType.value) {
-        case CRON_OPTION.EVERY_DAY:
+        case CronType.EVERY_DAY:
             cronValue.value = 0;
             break;
-        case CRON_OPTION.EVERY_WEEK:
+        case CronType.EVERY_WEEK:
-        case CRON_OPTION.EVERY_MONTH:
+        case CronType.EVERY_MONTH:
-        case CRON_OPTION.EVERY_YEAR:
+        case CronType.EVERY_YEAR:
             cronValue.value = 1;
             break;
-        case CRON_OPTION.SPECIFIC:
+        case CronType.SPECIFIC:
-            cron.value ??= '0 0 * * *';
+            cron.value ??= DEFAULT_CRON;
             break;
     }
     updateCron();
 }
 
-onBeforeMount(updateFromValue);
+function onChangeCronValue() {
+    updateCron();
+}
+
+function onInputRawCron() {
+    valid.value = validCron(rawCron.value);
+    if (valid.value) {
+        updateCron();
+    }
+}
+
+onBeforeMount(onCronChanged);
+
 watch(cron, () => {
     if (!props.editMode) {
-        updateFromValue();
+        onCronChanged();
-    }
-});
-
-watch(cronValue, updateCron);
-
-watch(rawCron, () => {
-    try {
-        CronExpressionParser.parse(rawCron.value);
-        valid.value = true;
-        cron.value = rawCron.value;
-    } catch {
-        valid.value = false;
     }
 });
 </script>
 
 <template>
     <div class="flex gap-2">
-        <select v-model="cronOption" class="select" @change="changecronOption">
+        <select v-model="cronType" class="select" @change="onChangeCronType">
-          <option :value="CRON_OPTION.ONE_TIME">One time (do not repeat)</option>
+          <option :value="CronType.ONE_TIME">One time (do not repeat)</option>
-          <option :value="CRON_OPTION.EVERY_DAY">Every day at</option>
+          <option :value="CronType.EVERY_DAY">Every day at</option>
-          <option :value="CRON_OPTION.EVERY_WEEK">Every week on</option>
+          <option :value="CronType.EVERY_WEEK">Every week on</option>
-          <option :value="CRON_OPTION.EVERY_MONTH">Every month on the</option>
+          <option :value="CronType.EVERY_MONTH">Every month on the</option>
-          <option :value="CRON_OPTION.EVERY_YEAR">Every year on</option>
+          <option :value="CronType.EVERY_YEAR">Every year on</option>
-          <option :value="CRON_OPTION.SPECIFIC">Specific</option>
+          <option :value="CronType.SPECIFIC">Specific</option>
         </select>
-        <select v-if="cronOption === CRON_OPTION.EVERY_DAY" v-model="cronValue" class="select">
+        <select v-if="cronType === CronType.EVERY_DAY" v-model="cronValue" class="select" @change="onChangeCronValue">
           <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">
+        <select v-if="cronType === CronType.EVERY_WEEK" v-model="cronValue" class="select" @change="onChangeCronValue">
           <option :value="1">Monday</option>
           <option :value="2">Tuesday</option>
           <option :value="3">Wednesday</option>
@@ -123,10 +82,10 @@ watch(rawCron, () => {
           <option :value="6">Saturday</option>
           <option :value="7">Sunday</option>
         </select>
-        <select v-if="cronOption === CRON_OPTION.EVERY_MONTH" v-model="cronValue" class="select">
+        <select v-if="cronType === CronType.EVERY_MONTH" v-model="cronValue" class="select" @change="onChangeCronValue">
           <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">
+        <select v-if="cronType === CronType.EVERY_YEAR" v-model="cronValue" class="select" @change="onChangeCronValue">
           <option :value="1">January</option>
           <option :value="2">February</option>
           <option :value="3">March</option>
@@ -140,6 +99,6 @@ watch(rawCron, () => {
           <option :value="11">November</option>
           <option :value="12">December</option>
         </select>
-        <input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" />
+        <input v-if="cronType === CronType.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" @input="onInputRawCron" />
     </div>
 </template>

resources/ts/components/TaskItem.vue

@@ -3,13 +3,10 @@ import { onBeforeMount, ref, watch, computed } from "vue";
 import type { Task } from "@/types";
 import { Copy, Trash, Save, X } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
-import { CronExpressionParser } from 'cron-parser'
 import CronInput from "@/components/CronInput.vue";
+import { taskCompleted } from "@/lib/tasks";
 
-const emit = defineEmits<{
+const emit = defineEmits<(e: 'clone' | 'delete', task: Task) => void>();
-    (e: 'clone', task: Task): void
-    (e: 'delete', task: Task): void
-}>();
 
 const task = defineModel<Task>({ required: true });
 
@@ -18,21 +15,7 @@ const editName = ref<string>('');
 const editCron = ref<string|null>(null);
 const refreshKey = ref<number>(0);
 
-const checked = computed<boolean>(() => {
+const checked = computed<boolean>(() => taskCompleted(task.value));
-    if (task.value.check_date === null) {
-        return false;
-    }
-    if (task.value.reset_cron === null) {
-        return true;
-    }
-    try {
-        const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
-        const nextDate = interval.next();
-        return nextDate.getTime() > (new Date()).getTime();
-    } catch {
-        return false;
-    }
-});
 
 function onClose() {
     editMode.value = false;

resources/ts/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_CRON = '0 0 * * *';

resources/ts/enums.ts

@@ -0,0 +1,8 @@
+export enum CronType {
+    ONE_TIME = 1,
+    EVERY_DAY = 2,
+    EVERY_WEEK = 3,
+    EVERY_MONTH = 4,
+    EVERY_YEAR = 5,
+    SPECIFIC = 6,
+}

resources/ts/lib/cron.ts

@@ -0,0 +1,66 @@
+
+import { CronType } from "@/enums";
+import CronExpressionParser from "cron-parser";
+
+export function parseCron(cron: string | null): { type: CronType, value: number } {
+    let value: RegExpMatchArray | null;
+    if (cron === null) {
+        return {
+            type: CronType.ONE_TIME,
+            value: 0
+        }
+    } else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_DAY,
+            value: parseInt(value[1] ?? '')
+        }
+    } else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_WEEK,
+            value: parseInt(value[1] ?? '')
+        }
+    } else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_MONTH,
+            value: parseInt(value[1] ?? '')
+        }
+    } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron)) !== null) {
+        return {
+            type: CronType.EVERY_YEAR,
+            value: parseInt(value[1] ?? '')
+        }
+    } else {
+        return {
+            type: CronType.SPECIFIC,
+            value: 0
+        }
+    }
+}
+
+export function getCron(type: CronType, value: number, fallback: string): string | null {
+    switch(type) {
+        case CronType.EVERY_DAY:
+            return `0 ${value.toFixed(0)} * * *`;
+        case CronType.EVERY_WEEK:
+            return `0 0 * * ${value.toFixed(0)}`
+        case CronType.EVERY_MONTH:
+            return `0 0 ${value.toFixed(0)} * *`;
+        case CronType.EVERY_YEAR:
+            return `0 0 1 ${value.toFixed(0)} *`;
+        case CronType.SPECIFIC:
+            if (validCron(fallback)) {
+                return fallback;
+            }
+    }
+
+    return null;
+}
+
+export function validCron(cron: string): boolean {
+    try {
+        CronExpressionParser.parse(cron);
+        return true;
+    } catch {
+        return false;
+    }
+}

resources/ts/lib/tasks.ts

@@ -0,0 +1,30 @@
+import type { RawTask, Task } from "@/types";
+import CronExpressionParser from "cron-parser";
+
+export function parseTask(task: RawTask): Task {
+    return {
+        id: task.id,
+        name: task.name,
+        reset_cron: task.reset_cron,
+        check_date: task.check_date ? new Date(task.check_date) : null,
+        previous_check_date: task.previous_check_date
+            ? new Date(task.previous_check_date)
+            : null,
+    };
+}
+
+export function taskCompleted(task: Task): boolean {
+    if (task.check_date === null) {
+        return false;
+    }
+    if (task.reset_cron === null) {
+        return true;
+    }
+    try {
+        const interval = CronExpressionParser.parse(task.reset_cron, {currentDate: task.check_date});
+        const nextDate = interval.next();
+        return nextDate.getTime() > (new Date()).getTime();
+    } catch {
+        return false;
+    }
+}