116 lines
3.9 KiB
Vue
116 lines
3.9 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 CronInput from "@/components/CronInput.vue";
|
|
import { taskCompleted, taskNextReset } from "@/lib/tasks";
|
|
import { relativeTime } from "@/lib/dates";
|
|
|
|
const emit = defineEmits<(e: 'clone' | 'delete', task: Task) => void>();
|
|
|
|
const task = defineModel<Task>({ required: true });
|
|
defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
|
|
|
|
const editMode = ref<boolean>(false);
|
|
const editName = ref<string>('');
|
|
const editCron = ref<string|null>(null);
|
|
const refreshKey = ref<number>(0);
|
|
|
|
const checked = computed<boolean>(() => taskCompleted(task.value));
|
|
const nextReset = computed<Date | null>(() => taskNextReset(task.value));
|
|
|
|
function onClose() {
|
|
editMode.value = false;
|
|
}
|
|
|
|
function onSave() {
|
|
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 onCheck() {
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
|
|
function onClone() {
|
|
emit('clone', task.value);
|
|
}
|
|
|
|
function onDelete() {
|
|
emit('delete', task.value);
|
|
}
|
|
|
|
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="onCheck" />
|
|
</div>
|
|
<div
|
|
v-if="!editMode"
|
|
class="cursor-pointer text-lg select-none"
|
|
@click.prevent="editMode = true"
|
|
>
|
|
<div>{{ task.name }}</div>
|
|
<div v-if="showLastChecked && !checked && task.check_date" class="font-light text-xs italic">
|
|
Checked {{ relativeTime(task.check_date) }}
|
|
</div>
|
|
<div v-if="showNextReset && checked && nextReset" class="font-light text-xs italic">
|
|
Resets {{ relativeTime(nextReset) }}
|
|
</div>
|
|
</div>
|
|
<template v-else>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex justify-evenly">
|
|
<button class="btn btn-square me-1" @click="onClose">
|
|
<X />
|
|
</button>
|
|
<button class="btn btn-square me-1" @click="onSave">
|
|
<Save />
|
|
</button>
|
|
<button class="btn btn-square me-1" @click="onClone">
|
|
<Copy />
|
|
</button>
|
|
<button class="btn btn-square" @click="onDelete">
|
|
<Trash />
|
|
</button>
|
|
</div>
|
|
<input v-model="editName" type="text" class="input w-full" />
|
|
<CronInput v-model="editCron" :edit-mode="editMode" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|