klemek/tout-doux
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

feat: task edition in front end
TS Lint / ESLint (push) Successful in 50s
Details
Python Lint CI / ruff-format-check (push) Successful in 1m33s
Details
Python Lint CI / ty (push) Successful in 1m33s
Details
Python Lint CI / ruff (push) Successful in 1m35s
Details
TS Lint / Oxlint (push) Successful in 3m29s
Details
TS Lint / TypeScript (push) Successful in 3m7s
Details

Browse Source
This commit is contained in:
klemek
2026-07-09 18:16:32 +02:00
parent 2e5eb86848
commit 1b8e6ff8ae
6 changed files with 208 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/ts/components/CronInput.vue
+128
View File
@@ -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>
resources/ts/components/TaskItem.vue
+72 -17
View File
@@ -1,17 +1,70 @@
<script setup lang="ts">
import { ref } from "vue";
import { onBeforeMount, ref, watch, computed } from "vue";
import type { Task } from "@/types";
import { Copy, Trash, Check, X } from "@lucide/vue";
import { updateTask } from "@/api/tasks";
import { CronExpressionParser } from 'cron-parser'
import CronInput from "@/components/CronInput.vue";
const editMode = ref<boolean>(false);
const task = defineModel<Task>({ required: true });
const editName = ref<string>('');
const editCron = ref<string|null>(null);
const checked = computed<boolean>(() => {
if (task.value.check_date === null) {
return false;
}
if (task.value.reset_cron === null) {
return true;
}
const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
const nextDate = interval.next();
return nextDate.getTime() > (new Date()).getTime();
});
function save() {
void updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
.then((newTask) => {
task.value = newTask;
});
task.value.name = editName.value;
task.value.reset_cron = editCron.value;
editMode.value = false;
}
function check() {
if (!checked.value) {
void updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
.then((newTask) => {
task.value = newTask;
});
} else {
void updateTask(task.value.id, { check_date: null, previous_check_date: task.value.check_date?.toISOString() })
.then((newTask) => {
task.value = newTask;
});
}
}
onBeforeMount(() => {
editName.value = task.value.name;
editCron.value = task.value.reset_cron;
});
watch(task, () => {
if (!editMode.value && task.value.name !== editName.value) {
editName.value = task.value.name;
}
if (!editMode.value && task.value.reset_cron !== editCron.value) {
editCron.value = task.value.reset_cron;
}
});
</script>
<template>
<div class="list-row text-left">
<div class="content-center">
<input type="checkbox" class="checkbox" />
<input type="checkbox" class="checkbox" :checked="checked" @click.prevent="check" />
</div>
<div
v-if="!editMode"
@@ -21,21 +74,23 @@ const task = defineModel<Task>({ required: true });
{{ task.name }}
</div>
<template v-else>
<div>
<input v-model="task.name" type="text" class="input mb-1" />
<br />
<button class="btn btn-square me-1" @click="editMode = false">
<X />
</button>
<button class="btn btn-square me-1">
<Check />
</button>
<button class="btn btn-square me-1">
<Copy />
</button>
<button class="btn btn-square">
<Trash />
</button>
<div class="flex flex-col gap-2">
<div class="flex justify-evenly">
<button class="btn btn-square me-1" @click="editMode = false">
<X />
</button>
<button class="btn btn-square me-1" @click="save">
<Check />
</button>
<button class="btn btn-square me-1">
<Copy />
</button>
<button class="btn btn-square">
<Trash />
</button>
</div>
<input v-model="editName" type="text" class="input w-full" />
<CronInput v-model="editCron" :edit-mode="editMode" />
</div>
</template>
</div>