110 lines
3.5 KiB
TypeScript
110 lines
3.5 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 } 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 } from "drizzle-orm";
|
|
|
|
export default function EditableHour({
|
|
hour: initialHour,
|
|
i,
|
|
className,
|
|
}: {
|
|
hour: ZHour,
|
|
i: number,
|
|
className?: string;
|
|
}) {
|
|
const router = useRouter();
|
|
const currentPath = usePathname();
|
|
const [hour, setHour] = useState(initialHour);
|
|
const { mutate: updateHour, isPending } = useUpdateHour({
|
|
onSuccess: (res, req, meta) => {
|
|
const { categoryCode: oldCode, comment: oldComment } = hour;
|
|
const newHour = {
|
|
categoryCode: req.code,
|
|
comment: oldComment,
|
|
...res,
|
|
};
|
|
console.log(res);
|
|
setHour(newHour);
|
|
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();
|
|
return (hour.date == format(now, "yyyy-MM-dd")) && (((now.getHours()) + (now.getTimezoneOffset() / 60) - (parseInt(hour.time))) == 0)
|
|
}
|
|
return (
|
|
<div
|
|
hourid={hour.id}
|
|
className={cn(
|
|
"p-4 grid justify-between",
|
|
)}
|
|
style={{
|
|
background: hour.background, color: hour.foreground, fontFamily: "inherit",
|
|
gridTemplateColumns: "100px 100px 1fr 200px"
|
|
}}
|
|
>
|
|
<span className="text-right">
|
|
{isActiveHour(hour) && "--> "}
|
|
{hour.datetime}
|
|
</span>
|
|
<div className="flex justify-center">
|
|
<EditableHourCode
|
|
originalText={hour.categoryCode}
|
|
hour={hour}
|
|
onSubmit={updateHour}
|
|
i={i}
|
|
/>
|
|
</div>
|
|
<span>
|
|
<EditableHourComment
|
|
originalText={hour.categoryDesc}
|
|
hour={hour}
|
|
onSubmit={updateHour}
|
|
i={i}
|
|
/>
|
|
</span>
|
|
<div className="text-right">
|
|
<ButtonWithTooltip
|
|
delayDuration={500}
|
|
tooltip="Add Comment"
|
|
size="none"
|
|
variant="ghost"
|
|
className="align-middle text-gray-400"
|
|
onClick={() => {
|
|
console.log("Pushed edit")
|
|
}}
|
|
>
|
|
<MessageCircle className="size-4" />
|
|
</ButtonWithTooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |