diff --git a/apps/infoalloggi/src/components/area-riservata/potenziali.tsx b/apps/infoalloggi/src/components/area-riservata/potenziali.tsx index 121db99..db11d9e 100644 --- a/apps/infoalloggi/src/components/area-riservata/potenziali.tsx +++ b/apps/infoalloggi/src/components/area-riservata/potenziali.tsx @@ -1,8 +1,8 @@ "use client"; import { format } from "date-fns"; -import { Plus } from "lucide-react"; -import { useState } from "react"; +import { Plus, Trash2 } from "lucide-react"; +import { useEffect, useState } from "react"; import { KanbanBoard, KanbanCard, @@ -12,7 +12,10 @@ import { } from "~/components/ui/kanban"; import { usePotenziali } from "~/providers/PotenzialiProvider"; import type { PotenzialiGroupsId } from "~/schemas/public/PotenzialiGroups"; +import type { UsersId } from "~/schemas/public/Users"; import type { PotenzialeData } from "~/server/services/potenziali.service"; +import { api } from "~/utils/api"; +import { Confirm } from "../confirm"; import { Credenza, CredenzaBody, @@ -28,11 +31,19 @@ import Input from "../custom_ui/input"; import { Textarea } from "../custom_ui/textarea"; import { Button } from "../ui/button"; import { Label } from "../ui/label"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "../ui/select"; import { UserAvatar } from "../user_avatar"; export const Potenziali = () => { - const { data, columns, setData, updateCall, setEditing, editingItem } = - usePotenziali(); + const { data, columns, setData, updateCall, removeColumn } = usePotenziali(); return ( <> { {column.name} + { + removeColumn(column.id); + }} + title="Elimina" + > + + {(data: PotenzialeData) => ( - { - setEditing(data.id); - }} - column={column.id} - id={data.id} + -
-
-

- {data.name} -

-

- {data.descrizione} -

-
- {data.userid && ( - - )} -
-

- {format(data.created_at, "dd/MM/yyyy HH:mm")} -

-
+ /> )}
)}
- { - if (!v) { - setEditing(null); - } - }} - open={!!editingItem} - > - - ); }; +// 1. Extract the card logic into a separate component +const PotenzialeCardItem = ({ + data, + columnId, +}: { + data: PotenzialeData; + columnId: string; +}) => { + const [isEditingOpen, setIsEditingOpen] = useState(false); + return ( + { + setIsEditingOpen(true); + }} + column={columnId} + id={data.id} + key={data.id} + name={data.name} + > + <> +
+
+

{data.name}

+

+ {data.descrizione} +

+
+ {data.userid && ( + + )} +
+

+ {format(data.created_at, "dd/MM/yyyy HH:mm")} +

+ {/** biome-ignore lint/a11y/noNoninteractiveElementInteractions: */} + {/** biome-ignore lint/a11y/noStaticElementInteractions: */} + {/** biome-ignore lint/a11y/useKeyWithClickEvents: */} +
e.stopPropagation()}> + +
+ +
+ ); +}; export const NewColumn = () => { const [newColumnName, setNewColumnName] = useState(""); const { addColumn } = usePotenziali(); + const [open, setOpen] = useState(false); return ( - + @@ -141,6 +181,7 @@ export const NewColumn = () => { onClick={() => { addColumn(newColumnName); setNewColumnName(""); + setOpen(false); }} > Aggiungi @@ -154,18 +195,32 @@ export const NewColumn = () => { export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => { const [newItemName, setNewItemName] = useState(""); const [newItemDescrizione, setNewItemDescrizione] = useState(""); + const [newItemUserid, setNewItemUserid] = useState(null); const { addItem } = usePotenziali(); const [open, setOpen] = useState(false); + + const resetState = () => { + setNewItemName(""); + setNewItemDescrizione(""); + setNewItemUserid(null); + }; const handleAddItem = () => { addItem({ name: newItemName, descrizione: newItemDescrizione, potenziali_group_id: columnId, + userid: newItemUserid, }); - setNewItemName(""); - setNewItemDescrizione(""); + resetState(); setOpen(false); }; + + useEffect(() => { + if (open) { + resetState(); + } + }, [open]); + const { data: admins, isLoading } = api.users.getAdmins.useQuery(); return ( @@ -197,71 +252,201 @@ export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => { placeholder="" value={newItemDescrizione} /> + + {isLoading ? ( +

Loading...

+ ) : ( + + )} - Chiudi + + +
); }; -const EditingContent = () => { - const { editingItem, updateItem } = usePotenziali(); +const EditingItem = ({ + open, + setOpen, + data, +}: { + open: boolean; + setOpen: (open: boolean) => void; + data: PotenzialeData; +}) => { + const { updateItem, removeItem } = usePotenziali(); - const [state, setState] = useState(editingItem); + const [state, setState] = useState(data); const [hasChanges, setHasChanges] = useState(false); - if (!state) return null; - + const { data: admins, isLoading } = api.users.getAdmins.useQuery(); + useEffect(() => { + if (open) { + setState(data); + setHasChanges(false); + } + }, [open]); return ( - - - - Modifica {state.name} - - desc - - - + + + + + Modifica {state.name} + + desc + + + - { - setState((prev) => prev && { ...prev, name: e.target.value }); - setHasChanges(true); - }} - type="string" - value={state.name} - /> - -