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/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>