feat: refactor Potenziali context to use editingItem and improve item management

apps/infoalloggi/src/components/area-riservata/potenziali.tsx

@@ -16,8 +16,10 @@ import type { PotenzialeData } from "~/server/services/potenziali.service";
 import {
 	Credenza,
 	CredenzaBody,
+	CredenzaClose,
 	CredenzaContent,
 	CredenzaDescription,
+	CredenzaFooter,
 	CredenzaHeader,
 	CredenzaTitle,
 	CredenzaTrigger,
@@ -29,7 +31,7 @@ import { Label } from "../ui/label";
 import { UserAvatar } from "../user_avatar";
 
 export const Potenziali = () => {
-	const { data, columns, setData, updateCall, setEditingId, editingId } =
+	const { data, columns, setData, updateCall, setEditing, editingItem } =
 		usePotenziali();
 	return (
 		<>
@@ -63,7 +65,7 @@ export const Potenziali = () => {
 							{(data: PotenzialeData) => (
 								<KanbanCard
 									cardOnClick={() => {
-										setEditingId(data.id);
+										setEditing(data.id);
 									}}
 									column={column.id}
 									id={data.id}
@@ -99,10 +101,10 @@ export const Potenziali = () => {
 			<Credenza
 				onOpenChange={(v) => {
 					if (!v) {
-						setEditingId(null);
+						setEditing(null);
 					}
 				}}
-				open={!!editingId}
+				open={!!editingItem}
 			>
 				<EditingContent />
 			</Credenza>
@@ -153,8 +155,19 @@ export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => {
 	const [newItemName, setNewItemName] = useState("");
 	const [newItemDescrizione, setNewItemDescrizione] = useState("");
 	const { addItem } = usePotenziali();
+	const [open, setOpen] = useState(false);
+	const handleAddItem = () => {
+		addItem({
+			name: newItemName,
+			descrizione: newItemDescrizione,
+			potenziali_group_id: columnId,
+		});
+		setNewItemName("");
+		setNewItemDescrizione("");
+		setOpen(false);
+	};
 	return (
-		<Credenza>
+		<Credenza onOpenChange={setOpen} open={open}>
 			<CredenzaTrigger asChild>
 				<Button className="ml-auto" size="sm">
 					<Plus className="size-4" />
@@ -171,57 +184,84 @@ export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => {
 					<Label htmlFor="titolo">Titolo</Label>
 
 					<Input
-						defaultValue={newItemName}
 						id="titolo"
 						onChange={(e) => setNewItemName(e.target.value)}
 						type="string"
+						value={newItemName}
 					/>
 					<Label htmlFor="descrizione">Descrizione</Label>
 					<Textarea
 						className="min-h-64"
-						defaultValue={newItemDescrizione}
 						id="descrizione"
 						onChange={(e) => setNewItemDescrizione(e.target.value)}
 						placeholder=""
+						value={newItemDescrizione}
 					/>
-
-					<Button
-						disabled={!newItemName.length}
-						onClick={() => {
-							addItem({
-								name: newItemName,
-								descrizione: newItemDescrizione,
-								potenziali_group_id: columnId,
-							});
-							setNewItemName("");
-							setNewItemDescrizione("");
-						}}
-					>
+				</CredenzaBody>
+				<CredenzaFooter>
+					<Button disabled={!newItemName.length} onClick={handleAddItem}>
 						Aggiungi
 					</Button>
-				</CredenzaBody>
+					<CredenzaClose>Chiudi</CredenzaClose>
+				</CredenzaFooter>
 			</CredenzaContent>
 		</Credenza>
 	);
 };
 
 const EditingContent = () => {
-	const { getEditingItem } = usePotenziali();
-	const item = getEditingItem();
-	if (!item) return null;
+	const { editingItem, updateItem } = usePotenziali();
+
+	const [state, setState] = useState<PotenzialeData | null>(editingItem);
+	const [hasChanges, setHasChanges] = useState(false);
+	if (!state) return null;
+
 	return (
 		<CredenzaContent className="max-h-[90vh]">
 			<CredenzaHeader>
 				<CredenzaTitle className="text-center font-semibold text-2xl">
-					Modifica {item.name}
+					Modifica {state.name}
 				</CredenzaTitle>
 				<CredenzaDescription className="sr-only">desc</CredenzaDescription>
 			</CredenzaHeader>
-			<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto pb-5">
-				<p>Descrizione: {item.descrizione}</p>
-				<p>Creato il: {format(item.created_at, "dd/MM/yyyy HH:mm")}</p>
-				<p>Utente Assegnato: {item.userid ? item.username : "Nessuno"}</p>
+			<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
+				<Label htmlFor="titolo">Titolo</Label>
+
+				<Input
+					id="titolo"
+					onChange={(e) => {
+						setState((prev) => prev && { ...prev, name: e.target.value });
+						setHasChanges(true);
+					}}
+					type="string"
+					value={state.name}
+				/>
+				<Label htmlFor="descrizione">Descrizione</Label>
+				<Textarea
+					className="min-h-64"
+					id="descrizione"
+					onChange={(e) => {
+						setState(
+							(prev) => prev && { ...prev, descrizione: e.target.value },
+						);
+						setHasChanges(true);
+					}}
+					placeholder=""
+					value={state.descrizione || undefined}
+				/>
 			</CredenzaBody>
+			<CredenzaFooter>
+				<Button
+					disabled={!hasChanges || !state}
+					onClick={() => {
+						updateItem(state);
+					}}
+					type="button"
+				>
+					Salva
+				</Button>
+				<CredenzaClose>Chiudi</CredenzaClose>
+			</CredenzaFooter>
 		</CredenzaContent>
 	);
 };

apps/infoalloggi/src/providers/PotenzialiProvider.tsx

@@ -8,14 +8,14 @@ import { api } from "~/utils/api";
 type PotenzialiContextType = {
 	data: PotenzialeData[];
 	columns: PotenzialiGroups[];
-	editingId: PotenzialiId | null;
+	editingItem: PotenzialeData | null;
 	setData: (data: PotenzialeData[]) => void;
 	updateCall: () => void;
-	setEditingId: (id: PotenzialiId | null) => void;
-	getEditingItem: () => PotenzialeData | null;
+	setEditing: (id: PotenzialiId | null) => void;
 	addItem: (item: NewPotenziali) => void;
 	removeItem: (id: PotenzialiId) => void;
 	addColumn: (name: string) => void;
+	updateItem: (item: PotenzialeData) => void;
 };
 
 const PotenzialiContext = createContext<PotenzialiContextType | null>(null);
@@ -28,11 +28,13 @@ export const PotenzialiProvider = ({ children }: PotenzialiProviderProps) => {
 
 	const { data: columns } = api.potenziali.getPotenzialiGroups.useQuery();
 
-	const [editingId, setEditingId] = useState<PotenzialiId | null>(null);
+	const [editingItem, setEditingItem] = useState<PotenzialeData | null>(null);
 
-	const getEditingItem = () => {
-		return data?.find((item) => item.id === editingId) || null;
+	const setEditing = (id: PotenzialiId | null) => {
+		const item = data?.find((item) => item.id === id) || null;
+		setEditingItem(item);
 	};
+
 	const utils = api.useUtils();
 	const { mutate: addItemMutation } = api.potenziali.addPotenziale.useMutation({
 		onSuccess: async () => {
@@ -90,20 +92,33 @@ export const PotenzialiProvider = ({ children }: PotenzialiProviderProps) => {
 			name,
 		});
 	};
+	const { mutate: updateItemMutation } =
+		api.potenziali.updatePotenziale.useMutation({
+			onSuccess: async () => {
+				toast.success("Elemento aggiornato con successo");
+				await utils.potenziali.getPotenziali.invalidate();
+			},
+		});
+	const updateItem = (item: PotenzialeData) => {
+		updateItemMutation({
+			potenzialiId: item.id,
+			data: item,
+		});
+	};
 
 	return (
 		<PotenzialiContext.Provider
 			value={{
 				data: data || [],
 				columns: columns || [],
-				editingId,
+				editingItem,
 				setData,
 				updateCall,
-				setEditingId,
-				getEditingItem,
+				setEditing,
 				addItem,
 				removeItem,
 				addColumn,
+				updateItem,
 			}}
 		>
 			{children}