tout-doux/resources/ts/components/TaskItem.vue

<script setup lang="ts">
import { onBeforeMount, ref, watch, computed, defineAsyncComponent, nextTick } from "vue";
import type { Task } from "@/types";
import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
import { updateTask } from "@/api/tasks";
const CronInput = defineAsyncComponent(
    () => import("@/components/CronInput.vue"),
);
import { taskCompleted, taskNextReset } from "@/lib/tasks";
import { relativeTime } from "@/lib/dates";
import { useAlertStore } from "@/stores/alerts";
import { useI18n } from "vue-i18n";

const emit =
    defineEmits<(e: "clone" | "delete" | "updated", 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 editNameInput = ref<HTMLInputElement | null>(null);

const checked = computed<boolean>(() => taskCompleted(task.value));
const nextReset = computed<Date | null>(() => taskNextReset(task.value));

const i18n = useI18n();

const { alertSuccess, alertError } = useAlertStore();

async function onOpen() {
    editMode.value = true;
    await nextTick();
    editNameInput.value?.focus();
}

function onClose() {
    editName.value = task.value.name;
    editCron.value = task.value.reset_cron;
    editMode.value = false;
}

function onSave() {
    if (editName.value.trim()) {
        updateTask(task.value.id, {
            name: editName.value.trim(),
            reset_cron: editCron.value,
        })
            .then((newTask) => {
                task.value = newTask;
                emit("updated", newTask);
                alertSuccess(i18n.t("alerts.task_updated"));
            })
            .catch(() => {
                alertError(i18n.t("alerts.task_update_error"));
            });
        task.value.name = editName.value;
        task.value.reset_cron = editCron.value;
        editMode.value = false;
    }
}

function onCheck() {
    if (!checked.value) {
        updateTask(task.value.id, {
            check_date: new Date().toISOString(),
            previous_check_date: task.value.check_date?.toISOString(),
        })
            .then((newTask) => {
                task.value = newTask;
                emit("updated", newTask);
            })
            .catch(() => {
                alertError(i18n.t("alerts.task_update_error"));
            });
    } else {
        updateTask(task.value.id, {
            check_date: null,
            previous_check_date: task.value.check_date?.toISOString(),
        })
            .then((newTask) => {
                task.value = newTask;
                emit("updated", newTask);
            })
            .catch(() => {
                alertError(i18n.t("alerts.task_update_error"));
            });
    }
}

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">
        <template v-if="!editMode">
            <div class="content-center">
                <input
                    :id="refreshKey.toFixed(0)"
                    type="checkbox"
                    class="checkbox"
                    :checked="checked"
                    @click.prevent="onCheck"
                />
            </div>
            <div
                class="cursor-pointer text-lg select-none"
                @click.prevent="onOpen"
            >
                <div>{{ task.name }}</div>
                <div
                    v-if="showLastChecked && !checked && task.check_date"
                    class="font-light text-xs italic"
                >
                    {{ $t("checked") }}
                    {{ relativeTime(task.check_date, $i18n.locale) }}
                </div>
                <div
                    v-if="showNextReset && checked && nextReset"
                    class="font-light text-xs italic"
                >
                    {{ $t("resets") }}
                    {{ relativeTime(nextReset, $i18n.locale) }}
                </div>
            </div>
        </template>
        <template v-else>
            <div class="list-col-grow flex flex-col gap-2">
                <div class="flex justify-evenly">
                    <button class="btn btn-square me-1" @click="onClose">
                        <x-icon />
                    </button>
                    <button
                        class="btn btn-square me-1"
                        :class="
                            editName.trim().length === 0 ? 'btn-disabled' : ''
                        "
                        @click="onSave"
                    >
                        <save-icon />
                    </button>
                    <button class="btn btn-square me-1" @click="onClone">
                        <copy-icon />
                    </button>
                    <button class="btn btn-square" @click="onDelete">
                        <trash-icon />
                    </button>
                </div>
                <input
                    ref="editNameInput"
                    v-model="editName"
                    type="text"
                    class="input w-full"
                    @keyup.enter="onSave"
                />
                <cron-input v-model="editCron" :edit-mode="editMode" />
            </div>
        </template>
    </div>
</template>