102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { set } from "date-fns";
|
|
import { MessageCircle } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
function selectHourCode(time: number) {
|
|
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
|
|
}
|
|
function selectHourComment(time: number) {
|
|
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
|
|
}
|
|
|
|
export function EditableHourComment({
|
|
originalText,
|
|
hour,
|
|
onSubmit,
|
|
i
|
|
}) {
|
|
|
|
// console.log(`Hello from ${hour.time}, where the categoryDesc is ${hour.categoryDesc}`);
|
|
|
|
const ref = useRef<HTMLInputElement>(null);
|
|
|
|
const [text, setText] = useState(originalText);
|
|
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
ref.current.value = text;
|
|
}
|
|
}, [ref]);
|
|
|
|
// Update the text when Hour changes
|
|
useEffect(() => {
|
|
setText(hour.comment ?? hour.categoryName);
|
|
}, [hour]);
|
|
|
|
// Update the ref element whenever the Text changes
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
ref.current.value = text;
|
|
}
|
|
}, [text]);
|
|
|
|
const submit = () => {
|
|
setText(ref.current?.value ?? originalText);
|
|
onSubmit({
|
|
date: hour.date,
|
|
hourTime: hour.time,
|
|
dayId: hour.dayId,
|
|
comment: ref.current?.value ?? "",
|
|
code: hour.categoryCode.toString(),
|
|
});
|
|
selectHourComment(i + 1);
|
|
};
|
|
return (
|
|
<div className="flex">
|
|
{hour.comment ?
|
|
<MessageCircle className="mr-4" />
|
|
: ""}
|
|
<input
|
|
className="w-full text-left edit-hour-comment hover:border-b hover:border-dashed"
|
|
style={{
|
|
background: hour.background ?? "inherit", color: hour.foreground ?? "inherit", fontFamily: "inherit",
|
|
borderColor: hour.foreground ?? "inherit"
|
|
}}
|
|
ref={ref}
|
|
defaultValue={text}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
submit();
|
|
}
|
|
if (e.key == "ArrowDown") {
|
|
e.preventDefault();
|
|
selectHourComment(i + 1);
|
|
}
|
|
if (e.key == "ArrowUp") {
|
|
e.preventDefault();
|
|
selectHourComment(i - 1);
|
|
}
|
|
if (e.key == "ArrowLeft") {
|
|
e.preventDefault();
|
|
selectHourCode(i);
|
|
}
|
|
}}
|
|
onClick={(e) => {
|
|
e.target.select();
|
|
}}
|
|
onFocus={(e) => {
|
|
e.target.select();
|
|
}}
|
|
onBlur={(e) => {
|
|
if (!e.target.value) {
|
|
e.target.value = originalText ?? "";
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|