452 lines
12 KiB
TypeScript
452 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { format } from "date-fns";
|
|
import { Plus, Trash2 } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
KanbanBoard,
|
|
KanbanCard,
|
|
KanbanCards,
|
|
KanbanHeader,
|
|
KanbanProvider,
|
|
} 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,
|
|
CredenzaClose,
|
|
CredenzaContent,
|
|
CredenzaDescription,
|
|
CredenzaFooter,
|
|
CredenzaHeader,
|
|
CredenzaTitle,
|
|
CredenzaTrigger,
|
|
} from "../custom_ui/credenza";
|
|
import { Textarea } from "../custom_ui/textarea";
|
|
import { Button } from "../ui/button";
|
|
import Input from "../ui/input";
|
|
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, removeColumn } = usePotenziali();
|
|
return (
|
|
<>
|
|
<KanbanProvider
|
|
className="w-max"
|
|
columns={columns}
|
|
data={data}
|
|
onDataChange={setData}
|
|
onDragEnd={() => {
|
|
updateCall();
|
|
}}
|
|
>
|
|
{(column) => (
|
|
<KanbanBoard
|
|
className="w-fit overflow-auto"
|
|
id={column.id}
|
|
key={column.id}
|
|
>
|
|
<KanbanHeader>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="h-2 w-2 rounded-full"
|
|
style={{ backgroundColor: column.color }}
|
|
/>
|
|
<span>{column.name}</span>
|
|
|
|
<NewCard columnId={column.id} />
|
|
<Confirm
|
|
description="Sei sicuro di voler eliminare?"
|
|
onConfirm={() => {
|
|
removeColumn(column.id);
|
|
}}
|
|
title="Elimina"
|
|
>
|
|
<Button aria-label="Delete" variant="destructive">
|
|
<Trash2 />
|
|
</Button>
|
|
</Confirm>
|
|
</div>
|
|
</KanbanHeader>
|
|
<KanbanCards className="w-68" id={column.id}>
|
|
{(data: PotenzialeData) => (
|
|
<PotenzialeCardItem
|
|
columnId={column.id}
|
|
data={data}
|
|
key={data.id}
|
|
/>
|
|
)}
|
|
</KanbanCards>
|
|
</KanbanBoard>
|
|
)}
|
|
</KanbanProvider>
|
|
</>
|
|
);
|
|
};
|
|
// 1. Extract the card logic into a separate component
|
|
const PotenzialeCardItem = ({
|
|
data,
|
|
columnId,
|
|
}: {
|
|
data: PotenzialeData;
|
|
columnId: string;
|
|
}) => {
|
|
const [isEditingOpen, setIsEditingOpen] = useState(false);
|
|
return (
|
|
<KanbanCard
|
|
cardOnClick={() => {
|
|
setIsEditingOpen(true);
|
|
}}
|
|
column={columnId}
|
|
id={data.id}
|
|
key={data.id}
|
|
name={data.name}
|
|
>
|
|
<>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="m-0 flex-1 font-medium text-sm">{data.name}</p>
|
|
<p className="m-0 text-muted-foreground text-xs">
|
|
{data.descrizione}
|
|
</p>
|
|
</div>
|
|
{data.userid && (
|
|
<UserAvatar
|
|
className="size-6 shrink-0 text-sm"
|
|
userId={data.userid}
|
|
username={data.username || "Utente"}
|
|
/>
|
|
)}
|
|
</div>
|
|
<p className="mt-2 text-muted-foreground text-xs">
|
|
{format(data.created_at, "dd/MM/yyyy HH:mm")}
|
|
</p>
|
|
{/** biome-ignore lint/a11y/noNoninteractiveElementInteractions: <ok> */}
|
|
{/** biome-ignore lint/a11y/noStaticElementInteractions: <ok> */}
|
|
{/** biome-ignore lint/a11y/useKeyWithClickEvents: <ok> */}
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|
<EditingItem
|
|
data={data}
|
|
open={isEditingOpen}
|
|
setOpen={setIsEditingOpen}
|
|
/>
|
|
</div>
|
|
</>
|
|
</KanbanCard>
|
|
);
|
|
};
|
|
|
|
export const NewColumn = () => {
|
|
const [newColumnName, setNewColumnName] = useState("");
|
|
const { addColumn } = usePotenziali();
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<Credenza onOpenChange={setOpen} open={open}>
|
|
<CredenzaTrigger asChild>
|
|
<Button>Nuova colonna</Button>
|
|
</CredenzaTrigger>
|
|
<CredenzaContent className="max-h-[90vh]">
|
|
<CredenzaHeader>
|
|
<CredenzaTitle className="text-center font-semibold text-2xl">
|
|
Nuova colonna
|
|
</CredenzaTitle>
|
|
<CredenzaDescription className="sr-only">desc</CredenzaDescription>
|
|
</CredenzaHeader>
|
|
<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
|
|
<Label htmlFor="titolo">Titolo</Label>
|
|
|
|
<Input
|
|
defaultValue={newColumnName}
|
|
id="titolo"
|
|
onChange={(e) => setNewColumnName(e.target.value)}
|
|
type="string"
|
|
/>
|
|
<Button
|
|
disabled={!newColumnName.length}
|
|
onClick={() => {
|
|
addColumn(newColumnName);
|
|
setNewColumnName("");
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
Aggiungi
|
|
</Button>
|
|
</CredenzaBody>
|
|
</CredenzaContent>
|
|
</Credenza>
|
|
);
|
|
};
|
|
|
|
const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => {
|
|
const [newItemName, setNewItemName] = useState("");
|
|
const [newItemDescrizione, setNewItemDescrizione] = useState("");
|
|
const [newItemUserid, setNewItemUserid] = useState<UsersId | null>(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,
|
|
});
|
|
resetState();
|
|
setOpen(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
resetState();
|
|
}
|
|
}, [open]);
|
|
const { data: admins, isLoading } = api.users.getAdmins.useQuery();
|
|
return (
|
|
<Credenza onOpenChange={setOpen} open={open}>
|
|
<CredenzaTrigger asChild>
|
|
<Button className="ml-auto" size="sm">
|
|
<Plus className="size-4" />
|
|
</Button>
|
|
</CredenzaTrigger>
|
|
<CredenzaContent className="max-h-[90vh]">
|
|
<CredenzaHeader>
|
|
<CredenzaTitle className="text-center font-semibold text-2xl">
|
|
Nuova colonna
|
|
</CredenzaTitle>
|
|
<CredenzaDescription className="sr-only">desc</CredenzaDescription>
|
|
</CredenzaHeader>
|
|
<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
|
|
<Label htmlFor="titolo">Titolo</Label>
|
|
|
|
<Input
|
|
id="titolo"
|
|
onChange={(e) => setNewItemName(e.target.value)}
|
|
type="string"
|
|
value={newItemName}
|
|
/>
|
|
<Label htmlFor="descrizione">Descrizione</Label>
|
|
<Textarea
|
|
className="min-h-64"
|
|
id="descrizione"
|
|
onChange={(e) => setNewItemDescrizione(e.target.value)}
|
|
placeholder=""
|
|
value={newItemDescrizione}
|
|
/>
|
|
<Label htmlFor="utente">Utente Assegnato</Label>
|
|
{isLoading ? (
|
|
<p>Loading...</p>
|
|
) : (
|
|
<Select
|
|
onValueChange={(v) => {
|
|
setNewItemUserid(v === "empty" ? null : (v as UsersId));
|
|
}}
|
|
value={newItemUserid || "empty"}
|
|
>
|
|
<SelectTrigger
|
|
className="w-full data-[size=default]:h-10"
|
|
id="utente"
|
|
>
|
|
<SelectValue placeholder="Assegna un Utente" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Utente Assegnato</SelectLabel>
|
|
|
|
<SelectItem className="h-10" key="empty" value="empty">
|
|
nessuno
|
|
</SelectItem>
|
|
{admins?.map((admin) => (
|
|
<SelectItem key={admin.id} value={admin.id.toString()}>
|
|
<span className="flex items-center gap-2">
|
|
<UserAvatar
|
|
className="size-8"
|
|
userId={admin.id}
|
|
username={admin.username}
|
|
/>
|
|
|
|
<span>
|
|
<span className="block font-medium">
|
|
{admin.username}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</CredenzaBody>
|
|
<CredenzaFooter>
|
|
<Button disabled={!newItemName.length} onClick={handleAddItem}>
|
|
Aggiungi
|
|
</Button>
|
|
<CredenzaClose asChild>
|
|
<Button>Chiudi</Button>
|
|
</CredenzaClose>
|
|
</CredenzaFooter>
|
|
</CredenzaContent>
|
|
</Credenza>
|
|
);
|
|
};
|
|
|
|
const EditingItem = ({
|
|
open,
|
|
setOpen,
|
|
data,
|
|
}: {
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
data: PotenzialeData;
|
|
}) => {
|
|
const { updateItem, removeItem } = usePotenziali();
|
|
|
|
const [state, setState] = useState<PotenzialeData>(data);
|
|
const [hasChanges, setHasChanges] = useState(false);
|
|
const { data: admins, isLoading } = api.users.getAdmins.useQuery();
|
|
useEffect(() => {
|
|
if (open) {
|
|
setState(data);
|
|
setHasChanges(false);
|
|
}
|
|
}, [open]);
|
|
return (
|
|
<Credenza onOpenChange={setOpen} open={open}>
|
|
<CredenzaContent className="max-h-[90vh]">
|
|
<CredenzaHeader>
|
|
<CredenzaTitle className="text-center font-semibold text-2xl">
|
|
Modifica {state.name}
|
|
</CredenzaTitle>
|
|
<CredenzaDescription className="sr-only">desc</CredenzaDescription>
|
|
</CredenzaHeader>
|
|
<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}
|
|
/>
|
|
<Label htmlFor="utente">Utente Assegnato</Label>
|
|
{isLoading ? (
|
|
<p>Loading...</p>
|
|
) : (
|
|
<Select
|
|
onValueChange={(v) => {
|
|
setState(
|
|
(prev) =>
|
|
prev && {
|
|
...prev,
|
|
userid: v === "empty" ? null : (v as UsersId),
|
|
},
|
|
);
|
|
setHasChanges(true);
|
|
}}
|
|
value={state.userid?.toString() || "empty"}
|
|
>
|
|
<SelectTrigger
|
|
className="w-full data-[size=default]:h-10"
|
|
id="utente"
|
|
>
|
|
<SelectValue placeholder="Assegna un Utente" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Utente Assegnato</SelectLabel>
|
|
|
|
<SelectItem className="h-10" key="empty" value="empty">
|
|
nessuno
|
|
</SelectItem>
|
|
{admins?.map((admin) => (
|
|
<SelectItem key={admin.id} value={admin.id.toString()}>
|
|
<span className="flex items-center gap-2">
|
|
<UserAvatar
|
|
className="size-8"
|
|
userId={admin.id}
|
|
username={admin.username}
|
|
/>
|
|
|
|
<span>
|
|
<span className="block font-medium">
|
|
{admin.username}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</CredenzaBody>
|
|
<CredenzaFooter>
|
|
<Button
|
|
disabled={!hasChanges || !state}
|
|
onClick={() => {
|
|
updateItem(state);
|
|
setHasChanges(false);
|
|
}}
|
|
type="button"
|
|
>
|
|
Salva
|
|
</Button>
|
|
<Confirm
|
|
description="Sei sicuro di voler eliminare?"
|
|
onConfirm={() => {
|
|
if (state) {
|
|
setOpen(false);
|
|
removeItem(state.id);
|
|
}
|
|
}}
|
|
title="Elimina"
|
|
>
|
|
<Button aria-label="Delete" variant="destructive">
|
|
<Trash2 />
|
|
<span>Elimina</span>
|
|
</Button>
|
|
</Confirm>
|
|
<CredenzaClose asChild>
|
|
<Button>Chiudi</Button>
|
|
</CredenzaClose>
|
|
</CredenzaFooter>
|
|
</CredenzaContent>
|
|
</Credenza>
|
|
);
|
|
};
|