106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
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";
|
|
|
|
const editMode = ref<boolean>(false);
|
|
|
|
const task = defineModel<Task>({ required: true });
|
|
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;
|
|
}
|
|
});
|
|
|
|
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;
|
|
setInterval(() => {
|
|
refreshKey.value++;
|
|
}, 60000);
|
|
});
|
|
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 :id="refreshKey.toFixed(0)" type="checkbox" class="checkbox" :checked="checked" @click.prevent="check" />
|
|
</div>
|
|
<div
|
|
v-if="!editMode"
|
|
class="cursor-pointer text-lg select-none"
|
|
@click.prevent="editMode = true"
|
|
>
|
|
{{ task.name }}
|
|
</div>
|
|
<template v-else>
|
|
<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">
|
|
<Save />
|
|
</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>
|
|
</template>
|