refactor: reduce responsability of individual parts
This commit is contained in:
@@ -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`);
|
||||
|
||||
@@ -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 {
|
||||
ONE_TIME = 1,
|
||||
EVERY_DAY = 2,
|
||||
EVERY_WEEK = 3,
|
||||
EVERY_MONTH = 4,
|
||||
EVERY_YEAR = 5,
|
||||
SPECIFIC = 6,
|
||||
}
|
||||
const cronType = ref<CronType>(CronType.ONE_TIME);
|
||||
const cronValue = ref<number>(0);
|
||||
|
||||
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;
|
||||
}
|
||||
rawCron.value = cron.value ?? '0 0 * * *';
|
||||
function onCronChanged() {
|
||||
const data = parseCron(cron.value);
|
||||
rawCron.value = cron.value ?? DEFAULT_CRON;
|
||||
cronType.value = data.type;
|
||||
cronValue.value = data.value;
|
||||
}
|
||||
|
||||
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:
|
||||
rawCron.value = cron.value ?? '0 0 * * *';
|
||||
break;
|
||||
}
|
||||
cron.value = getCron(cronType.value, cronValue.value, rawCron.value);
|
||||
}
|
||||
|
||||
function changecronOption() {
|
||||
switch(cronOption.value) {
|
||||
case CRON_OPTION.EVERY_DAY:
|
||||
function onChangeCronType() {
|
||||
switch(cronType.value) {
|
||||
case CronType.EVERY_DAY:
|
||||
cronValue.value = 0;
|
||||
break;
|
||||
case CRON_OPTION.EVERY_WEEK:
|
||||
case CRON_OPTION.EVERY_MONTH:
|
||||
case CRON_OPTION.EVERY_YEAR:
|
||||
case CronType.EVERY_WEEK:
|
||||
case CronType.EVERY_MONTH:
|
||||
case CronType.EVERY_YEAR:
|
||||
cronValue.value = 1;
|
||||
break;
|
||||
case CRON_OPTION.SPECIFIC:
|
||||
cron.value ??= '0 0 * * *';
|
||||
case CronType.SPECIFIC:
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
watch(cronValue, updateCron);
|
||||
|
||||
watch(rawCron, () => {
|
||||
try {
|
||||
CronExpressionParser.parse(rawCron.value);
|
||||
valid.value = true;
|
||||
cron.value = rawCron.value;
|
||||
} catch {
|
||||
valid.value = false;
|
||||
onCronChanged();
|
||||
}
|
||||
});
|
||||
</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 v-model="cronType" class="select" @change="onChangeCronType">
|
||||
<option :value="CronType.ONE_TIME">One time (do not repeat)</option>
|
||||
<option :value="CronType.EVERY_DAY">Every day at</option>
|
||||
<option :value="CronType.EVERY_WEEK">Every week on</option>
|
||||
<option :value="CronType.EVERY_MONTH">Every month on the</option>
|
||||
<option :value="CronType.EVERY_YEAR">Every year on</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>
|
||||
|
||||
@@ -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<{
|
||||
(e: 'clone', task: Task): void
|
||||
(e: 'delete', task: Task): void
|
||||
}>();
|
||||
const emit = defineEmits<(e: 'clone' | '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>(() => {
|
||||
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;
|
||||
}
|
||||
});
|
||||
const checked = computed<boolean>(() => taskCompleted(task.value));
|
||||
|
||||
function onClose() {
|
||||
editMode.value = false;
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export const DEFAULT_CRON = '0 0 * * *';
|
||||
@@ -0,0 +1,8 @@
|
||||
export enum CronType {
|
||||
ONE_TIME = 1,
|
||||
EVERY_DAY = 2,
|
||||
EVERY_WEEK = 3,
|
||||
EVERY_MONTH = 4,
|
||||
EVERY_YEAR = 5,
|
||||
SPECIFIC = 6,
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user