mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
today and upcoming tasks
This commit is contained in:
marshennikovaolga
@@ -1,4 +1,126 @@
|
||||
"use client"
|
||||
// import { useState, useEffect, useRef } from "react"
|
||||
// import { motion, AnimatePresence } from "framer-motion"
|
||||
// import { ListOfTasks, Task } from "@/lib/schema/tasks"
|
||||
// import { Input } from "@/components/ui/input"
|
||||
// import { Button } from "@/components/ui/button"
|
||||
// import { useAccount } from "@/lib/providers/jazz-provider"
|
||||
// import { LaIcon } from "@/components/custom/la-icon"
|
||||
// import { Checkbox } from "@/components/ui/checkbox"
|
||||
// import { format } from "date-fns"
|
||||
// import { DatePicker } from "@/components/ui/date-picker"
|
||||
|
||||
// interface TaskFormProps {
|
||||
// filter?: "today" | "upcoming"
|
||||
// }
|
||||
|
||||
// export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
|
||||
// const [title, setTitle] = useState("")
|
||||
// const [dueDate, setDueDate] = useState<Date | undefined>(filter === "today" ? new Date() : undefined)
|
||||
// const [inputVisible, setInputVisible] = useState(false)
|
||||
// const { me } = useAccount({ root: {} })
|
||||
// const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// const handleSubmit = (e: React.FormEvent) => {
|
||||
// e.preventDefault()
|
||||
// if (title.trim() && (filter !== "upcoming" || dueDate)) {
|
||||
// if (me?.root?.tasks === undefined) {
|
||||
// if (!me) return
|
||||
// me.root.tasks = ListOfTasks.create([], { owner: me })
|
||||
// }
|
||||
|
||||
// const newTask = Task.create(
|
||||
// {
|
||||
// title,
|
||||
// description: "",
|
||||
// status: "todo",
|
||||
// createdAt: new Date(),
|
||||
// updatedAt: new Date(),
|
||||
// dueDate: dueDate || null
|
||||
// },
|
||||
// { owner: me._owner }
|
||||
// )
|
||||
// me.root.tasks?.push(newTask)
|
||||
// resetForm()
|
||||
// }
|
||||
// }
|
||||
|
||||
// const resetForm = () => {
|
||||
// setTitle("")
|
||||
// setDueDate(filter === "today" ? new Date() : undefined)
|
||||
// setInputVisible(false)
|
||||
// }
|
||||
|
||||
// const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
// if (e.key === "Escape") {
|
||||
// resetForm()
|
||||
// } else if (e.key === "Backspace" && title.trim() === "") {
|
||||
// resetForm()
|
||||
// }
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// if (inputVisible && inputRef.current) {
|
||||
// inputRef.current.focus()
|
||||
// }
|
||||
// }, [inputVisible])
|
||||
|
||||
// const formattedDate = dueDate ? format(dueDate, "EEE, MMMM do, yyyy") : "Select a date"
|
||||
|
||||
// return (
|
||||
// <div className="flex items-center space-x-2">
|
||||
// <AnimatePresence mode="wait">
|
||||
// {!inputVisible ? (
|
||||
// <motion.div
|
||||
// key="add-button"
|
||||
// initial={{ opacity: 0, width: 0 }}
|
||||
// animate={{ opacity: 1, width: "auto" }}
|
||||
// exit={{ opacity: 0, width: 0 }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// >
|
||||
// <Button
|
||||
// className="flex flex-row items-center gap-1"
|
||||
// onClick={() => setInputVisible(true)}
|
||||
// variant="outline"
|
||||
// >
|
||||
// <LaIcon name="Plus" />
|
||||
// Add task
|
||||
// </Button>
|
||||
// </motion.div>
|
||||
// ) : (
|
||||
// <motion.form
|
||||
// key="input-form"
|
||||
// initial={{ width: 0, opacity: 0 }}
|
||||
// animate={{ width: "100%", opacity: 1 }}
|
||||
// exit={{ width: 0, opacity: 0 }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// onSubmit={handleSubmit}
|
||||
// className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
|
||||
// >
|
||||
// <div className="flex flex-row items-center gap-3">
|
||||
// <Checkbox checked={false} onCheckedChange={() => {}} />
|
||||
// <Input
|
||||
// autoFocus
|
||||
// ref={inputRef}
|
||||
// value={title}
|
||||
// className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
|
||||
// onChange={e => setTitle(e.target.value)}
|
||||
// onKeyDown={handleKeyDown}
|
||||
// placeholder="Task title"
|
||||
// />
|
||||
// </div>
|
||||
// <div className="flex items-center space-x-2">
|
||||
// {filter === "upcoming" && (
|
||||
// <DatePicker date={dueDate} onDateChange={(date: Date | undefined) => setDueDate(date)} />
|
||||
// )}
|
||||
// <span className="text-muted-foreground text-xs">{formattedDate}</span>
|
||||
// </div>
|
||||
// </motion.form>
|
||||
// )}
|
||||
// </AnimatePresence>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { ListOfTasks, Task } from "@/lib/schema/tasks"
|
||||
@@ -8,18 +130,22 @@ import { useAccount } from "@/lib/providers/jazz-provider"
|
||||
import { LaIcon } from "@/components/custom/la-icon"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { format } from "date-fns"
|
||||
import { DatePicker } from "@/components/ui/date-picker"
|
||||
|
||||
interface TaskFormProps {}
|
||||
interface TaskFormProps {
|
||||
filter?: "today" | "upcoming" | undefined
|
||||
}
|
||||
|
||||
export const TaskForm: React.FC<TaskFormProps> = ({}) => {
|
||||
export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
|
||||
const [title, setTitle] = useState("")
|
||||
const [dueDate, setDueDate] = useState<Date | undefined>(filter === "today" ? new Date() : undefined)
|
||||
const [inputVisible, setInputVisible] = useState(false)
|
||||
const { me } = useAccount({ root: {} })
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (title.trim()) {
|
||||
if (title.trim() && (filter === "today" || (filter === "upcoming" && dueDate))) {
|
||||
if (me?.root?.tasks === undefined) {
|
||||
if (!me) return
|
||||
me.root.tasks = ListOfTasks.create([], { owner: me })
|
||||
@@ -31,7 +157,8 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
|
||||
description: "",
|
||||
status: "todo",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date()
|
||||
updatedAt: new Date(),
|
||||
dueDate: dueDate || (filter === "today" ? new Date() : null)
|
||||
},
|
||||
{ owner: me._owner }
|
||||
)
|
||||
@@ -42,6 +169,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
|
||||
|
||||
const resetForm = () => {
|
||||
setTitle("")
|
||||
setDueDate(filter === "today" ? new Date() : undefined)
|
||||
setInputVisible(false)
|
||||
}
|
||||
|
||||
@@ -59,55 +187,60 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
|
||||
}
|
||||
}, [inputVisible])
|
||||
|
||||
const formattedDate = format(new Date(), "EEE, MMMM do, yyyy")
|
||||
const formattedDate = dueDate ? format(dueDate, "EEE, MMMM do, yyyy") : "Select a date"
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<AnimatePresence mode="wait">
|
||||
{!inputVisible ? (
|
||||
<motion.div
|
||||
key="add-button"
|
||||
initial={{ opacity: 0, width: 0 }}
|
||||
animate={{ opacity: 1, width: "auto" }}
|
||||
exit={{ opacity: 0, width: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Button
|
||||
className="flex flex-row items-center gap-1"
|
||||
onClick={() => setInputVisible(true)}
|
||||
variant="outline"
|
||||
{filter ? (
|
||||
!inputVisible ? (
|
||||
<motion.div
|
||||
key="add-button"
|
||||
initial={{ opacity: 0, width: 0 }}
|
||||
animate={{ opacity: 1, width: "auto" }}
|
||||
exit={{ opacity: 0, width: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<LaIcon name="Plus" />
|
||||
Add task
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.form
|
||||
key="input-form"
|
||||
initial={{ width: 0, opacity: 0 }}
|
||||
animate={{ width: "100%", opacity: 1 }}
|
||||
exit={{ width: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
|
||||
>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<Checkbox checked={false} onCheckedChange={() => {}} />
|
||||
<Input
|
||||
autoFocus
|
||||
ref={inputRef}
|
||||
value={title}
|
||||
className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
// placeholder="Task title"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-muted-foreground text-xs">{formattedDate}</span>
|
||||
</div>
|
||||
</motion.form>
|
||||
)}
|
||||
<Button
|
||||
className="flex flex-row items-center gap-1"
|
||||
onClick={() => setInputVisible(true)}
|
||||
variant="outline"
|
||||
>
|
||||
<LaIcon name="Plus" />
|
||||
Add task
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.form
|
||||
key="input-form"
|
||||
initial={{ width: 0, opacity: 0 }}
|
||||
animate={{ width: "100%", opacity: 1 }}
|
||||
exit={{ width: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
|
||||
>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<Checkbox checked={false} onCheckedChange={() => {}} />
|
||||
<Input
|
||||
autoFocus
|
||||
ref={inputRef}
|
||||
value={title}
|
||||
className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Task title"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{filter === "upcoming" && (
|
||||
<DatePicker date={dueDate} onDateChange={(date: Date | undefined) => setDueDate(date)} />
|
||||
)}
|
||||
<span className="text-muted-foreground text-xs">{formattedDate}</span>
|
||||
</div>
|
||||
</motion.form>
|
||||
)
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user