starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

tasks logic

Browse Source
This commit is contained in:
marshennikovaolga
2024-10-02 13:07:01 +03:00
parent 315f7bf38e
commit 0b904f4e86
6 changed files with 18 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/custom/sidebar/partial/task-section.tsx
View File

@@ -71,11 +71,6 @@ export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
count={upcomingTasks.length}
isActive={pathname === "/tasks/upcoming"}
/>
{isFetching ? (
<div className="py-2 text-center text-gray-500">Fetching tasks...</div>
) : (
<List tasks={me.root.tasks as ListOfTasks} />
)}
</div>
)
}
@@ -105,13 +100,3 @@ const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ title, href, coun
</Link>
</div>
)
interface ListProps {
tasks: (Task | null)[] | undefined
}
const List: React.FC<ListProps> = ({ tasks }) => {
return (
<div>{tasks?.filter((task): task is Task => task !== null).map(task => <div key={task.id}>{task.title}</div>)}</div>
)
}

127
web/components/routes/task/TaskForm.tsx
View File

@@ -1,126 +1,3 @@
// 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"
@@ -145,7 +22,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (title.trim() && (filter === "today" || (filter === "upcoming" && dueDate))) {
if (title.trim() && (filter !== "upcoming" || dueDate)) {
if (me?.root?.tasks === undefined) {
if (!me) return
me.root.tasks = ListOfTasks.create([], { owner: me })
@@ -158,7 +35,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
status: "todo",
createdAt: new Date(),
updatedAt: new Date(),
dueDate: dueDate || (filter === "today" ? new Date() : null)
dueDate: filter === "upcoming" ? dueDate : filter === "today" ? new Date() : null
},
{ owner: me._owner }
)

3
web/components/routes/task/TaskItem.tsx
View File

@@ -2,7 +2,6 @@ import { Task } from "@/lib/schema/tasks"
import { Checkbox } from "@/components/ui/checkbox"
import { format } from "date-fns"
import { useState, useRef, useEffect } from "react"
import { Input } from "@/components/ui/input"
interface TaskItemProps {
task: Task
@@ -50,7 +49,7 @@ export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask, onDelete
}
}
const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
const formattedDate = task.dueDate ? format(new Date(task.dueDate), "EEE, MMMM do, yyyy") : "No due date"
return (
<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">

5
web/components/routes/task/TaskRoute.tsx
View File

@@ -46,7 +46,10 @@ export const TaskRoute: React.FC<TaskRouteProps> = ({ filter }) => {
return (
<div className="flex flex-col space-y-4 p-4">
<div className="flex flex-row items-center gap-1">
<LaIcon name="ListTodo" className="size-6" />
<LaIcon
name={filter === "today" ? "BookOpenCheck" : filter === "upcoming" ? "History" : "ListTodo"}
className="size-6"
/>
<h1 className="text-xl font-bold">
{filter === "today" ? "Today's Tasks" : filter === "upcoming" ? "Upcoming Tasks" : "All Tasks"}
</h1>

5
web/components/routes/task/new-task-actions.ts
View File

@@ -48,9 +48,8 @@ export const useTaskActions = () => {
try {
me.root.tasks.splice(index, 1)
toast.success("Task deleted", {
position: "bottom-right",
description: `${task.title} has been deleted.`
toast.success("Task completed", {
position: "bottom-right"
})
} catch (error) {
console.error("Failed to delete task", error)

11
web/components/ui/date-picker.tsx
View File

@@ -13,8 +13,15 @@ interface DatePickerProps {
}
export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
const [open, setOpen] = React.useState(false)
const selectDate = (selectedDate: Date | undefined) => {
onDateChange(selectedDate)
setOpen(false) // Закрываем Popover после выбора даты
}
return (
<Popover>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant={"outline"}
@@ -25,7 +32,7 @@ export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar mode="single" selected={date} onSelect={onDateChange} initialFocus />
<Calendar mode="single" selected={date} onSelect={selectDate} initialFocus />
</PopoverContent>
</Popover>
)