122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { cn } from "@/lib/utils";
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
|
|
import { EditableText } from "@/components/dashboard/EditableText";
|
|
import { format } from "date-fns";
|
|
import { TZDate } from "@date-fns/tz";
|
|
import { ZHour } from "@lifetracker/shared/types/days";
|
|
import { MessageCircle, Pencil } from "lucide-react";
|
|
import { ButtonWithTooltip } from "@/components/ui/button";
|
|
import { EditableHourCode } from "./EditableHourCode";
|
|
import { EditableHourComment } from "./EditableHourComment";
|
|
import { api } from "@/lib/trpc";
|
|
import spacetime from 'spacetime';
|
|
import { eq, is } from "drizzle-orm";
|
|
|
|
export default function EditableHour({
|
|
hour: initialHour,
|
|
i,
|
|
className,
|
|
}: {
|
|
hour: ZHour,
|
|
i: number,
|
|
className?: string;
|
|
}) {
|
|
const [hour, setHour] = useState(initialHour);
|
|
const { mutate: updateHour, isPending } = useUpdateHour({
|
|
onSuccess: (res, req, meta) => {
|
|
const { categoryCode: oldCode, comment: oldComment } = hour;
|
|
const newHour = {
|
|
categoryCode: parseInt(req.code!),
|
|
comment: oldComment,
|
|
...res,
|
|
};
|
|
console.log(res);
|
|
setHour(newHour);
|
|
// Only show toast if client screen is larger than mobile
|
|
if (window.innerWidth > 640) {
|
|
toast({
|
|
description: "Hour updated!",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
const tzOffset = spacetime().offset() / 60;
|
|
const localDateTime = spacetime(hour.date).add(hour.time + tzOffset, "hour");
|
|
hour.datetime = `${localDateTime.format('{hour} {ampm}')}`;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
// console.log(hour.categoryDesc);
|
|
}, [hour]);
|
|
|
|
|
|
function isActiveHour(hour: ZHour) {
|
|
const now = new TZDate();
|
|
const isCurrentHour = ((now.getHours() - localDateTime.hour()) == 0);
|
|
const isToday = (localDateTime.format("iso-short") == format(now, "yyyy-MM-dd"));
|
|
return isToday && isCurrentHour;
|
|
}
|
|
return (
|
|
<div
|
|
data-hourid={hour.id}
|
|
className={cn(
|
|
"p-4 grid justify-between",
|
|
)}
|
|
style={{
|
|
background: hour.background!, color: hour.foreground!, fontFamily: "inherit",
|
|
gridTemplateColumns: window.innerWidth > 640 ? "50px 100px 1fr 50px" : "50px 100px 1fr", // Known issue: This won't work if the screen is resized, only on reload
|
|
}}
|
|
>
|
|
<span className="text-right">
|
|
{/* {isActiveHour(hour) && "--> "} */}
|
|
{hour.datetime}
|
|
</span>
|
|
<div className="flex justify-center">
|
|
<EditableHourCode
|
|
className={"w-8 border-b"}
|
|
originalText={hour.categoryCode}
|
|
hour={hour}
|
|
onSubmit={updateHour}
|
|
i={i}
|
|
/>
|
|
</div>
|
|
<span className="hidden sm:block">
|
|
<EditableHourComment
|
|
originalText={hour.categoryDesc}
|
|
hour={hour}
|
|
onSubmit={updateHour}
|
|
i={i}
|
|
/>
|
|
</span>
|
|
<span className="block sm:hidden">
|
|
<div className="w-full text-left edit-hour-comment"
|
|
style={{
|
|
background: hour.background ?? "inherit", color: hour.foreground ?? "inherit", fontFamily: "inherit",
|
|
}}>
|
|
{hour.categoryName}
|
|
</div>
|
|
</span>
|
|
<div className="text-right hidden sm:block">
|
|
<ButtonWithTooltip
|
|
delayDuration={500}
|
|
tooltip="Edit"
|
|
size="none"
|
|
variant="ghost"
|
|
className="align-middle text-gray-400 hover:bg-active"
|
|
onClick={() => {
|
|
console.log("Pushed edit")
|
|
}}
|
|
>
|
|
<Pencil className="size-4" />
|
|
</ButtonWithTooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |