feat: add basic list+create+return UI for Assignment
This commit is contained in:
toanhoang
@@ -0,0 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { useApiList } from "@/hooks/use-api-list";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
// Shape returned by GET /api/assignments — snake_case per this repo's
|
||||
// API-boundary convention (see src/lib/assignments.ts's toRecord()).
|
||||
interface AssignmentRecord {
|
||||
id: string;
|
||||
employee_id: string;
|
||||
asset_item_id: string | null;
|
||||
license_id: string | null;
|
||||
assigned_at: string;
|
||||
returned_at: string | null;
|
||||
signed_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// Shape returned by GET /api/employees — only the field used to populate the
|
||||
// employeeId <Select> here (see src/app/employees/page.tsx's EmployeeRecord
|
||||
// for the full shape).
|
||||
interface EmployeeRecord {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// Shape returned by GET /api/assets — only the field used to populate the
|
||||
// assetItemId <Select> here (see src/app/assets/page.tsx's AssetItemRecord
|
||||
// for the full shape).
|
||||
interface AssetItemRecord {
|
||||
id: string;
|
||||
serial_number: string;
|
||||
}
|
||||
|
||||
// Shape returned by GET /api/licenses — only the field used to populate the
|
||||
// licenseId <Select> here (see src/app/licenses/page.tsx's LicenseRecord for
|
||||
// the full shape).
|
||||
interface LicenseRecord {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// The create form's XOR toggle — mirrors the server's own XOR rule in
|
||||
// src/lib/assignments.ts's createAssignmentSchema .refine() (exactly one of
|
||||
// assetItemId/licenseId must be set). This is purely a UI convenience to
|
||||
// decide which single <Select> to show/submit — the actual business rule is
|
||||
// still enforced server-side, this doesn't reimplement it.
|
||||
type TargetKind = "asset_item" | "license";
|
||||
|
||||
export default function AssignmentsPage() {
|
||||
const {
|
||||
data: assignments,
|
||||
loading,
|
||||
error,
|
||||
refetch,
|
||||
} = useApiList<AssignmentRecord>("/api/assignments");
|
||||
|
||||
const { data: employees } = useApiList<EmployeeRecord>("/api/employees");
|
||||
const { data: assetItems } = useApiList<AssetItemRecord>("/api/assets");
|
||||
const { data: licenses } = useApiList<LicenseRecord>("/api/licenses");
|
||||
|
||||
const [employeeId, setEmployeeId] = useState("");
|
||||
const [targetKind, setTargetKind] = useState<TargetKind>("asset_item");
|
||||
const [assetItemId, setAssetItemId] = useState("");
|
||||
const [licenseId, setLicenseId] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
|
||||
// Per-row error surfaced next to the "Return" button that was clicked, keyed
|
||||
// by assignment id — kept simple (no modal) per task scope.
|
||||
const [returnErrors, setReturnErrors] = useState<Record<string, string>>({});
|
||||
const [returningId, setReturningId] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setSubmitError(null);
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/assignments", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
employeeId,
|
||||
// Only the one FK relevant to the selected toggle is sent — mirrors
|
||||
// the server's XOR rule (see createAssignmentSchema's .refine()).
|
||||
...(targetKind === "asset_item" ? { assetItemId } : { licenseId }),
|
||||
}),
|
||||
});
|
||||
|
||||
let body: unknown;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
body = null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const message =
|
||||
body !== null &&
|
||||
typeof body === "object" &&
|
||||
"error" in body &&
|
||||
typeof (body as { error: unknown }).error === "string"
|
||||
? (body as { error: string }).error
|
||||
: "Request failed";
|
||||
setSubmitError(message);
|
||||
return;
|
||||
}
|
||||
|
||||
setEmployeeId("");
|
||||
setTargetKind("asset_item");
|
||||
setAssetItemId("");
|
||||
setLicenseId("");
|
||||
refetch();
|
||||
} catch {
|
||||
setSubmitError("Request failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReturn(id: string) {
|
||||
setReturningId(id);
|
||||
setReturnErrors((previous) => {
|
||||
const next = { ...previous };
|
||||
delete next[id];
|
||||
return next;
|
||||
});
|
||||
|
||||
try {
|
||||
// PATCH /api/assignments/[id]'s body is `{returnedAt?: string}` — see
|
||||
// src/lib/assignments.ts's validateReturnAssignmentInput(). returnedAt
|
||||
// is optional and defaults to "now" server-side (returnAssignment()),
|
||||
// so an empty body is sent here rather than guessing a timestamp
|
||||
// client-side.
|
||||
const response = await fetch(`/api/assignments/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
|
||||
let body: unknown;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
body = null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const message =
|
||||
body !== null &&
|
||||
typeof body === "object" &&
|
||||
"error" in body &&
|
||||
typeof (body as { error: unknown }).error === "string"
|
||||
? (body as { error: string }).error
|
||||
: "Request failed";
|
||||
setReturnErrors((previous) => ({ ...previous, [id]: message }));
|
||||
return;
|
||||
}
|
||||
|
||||
refetch();
|
||||
} catch {
|
||||
setReturnErrors((previous) => ({ ...previous, [id]: "Request failed" }));
|
||||
} finally {
|
||||
setReturningId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8 p-6">
|
||||
<h1 className="text-xl font-semibold">Assignments</h1>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : error ? (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Employee ID</TableHead>
|
||||
<TableHead>Asset Item ID</TableHead>
|
||||
<TableHead>License ID</TableHead>
|
||||
<TableHead>Assigned At</TableHead>
|
||||
<TableHead>Returned At</TableHead>
|
||||
<TableHead>Signed At</TableHead>
|
||||
<TableHead>Created At</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{assignments.map((assignment) => (
|
||||
<TableRow key={assignment.id}>
|
||||
<TableCell>{assignment.id}</TableCell>
|
||||
<TableCell>{assignment.employee_id}</TableCell>
|
||||
<TableCell>{assignment.asset_item_id ?? "-"}</TableCell>
|
||||
<TableCell>{assignment.license_id ?? "-"}</TableCell>
|
||||
<TableCell>{assignment.assigned_at}</TableCell>
|
||||
<TableCell>{assignment.returned_at ?? "-"}</TableCell>
|
||||
<TableCell>{assignment.signed_at ?? "-"}</TableCell>
|
||||
<TableCell>{assignment.created_at}</TableCell>
|
||||
<TableCell>
|
||||
{assignment.returned_at === null ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={returningId === assignment.id}
|
||||
onClick={() => handleReturn(assignment.id)}
|
||||
>
|
||||
{returningId === assignment.id ? "Returning..." : "Return"}
|
||||
</Button>
|
||||
{returnErrors[assignment.id] ? (
|
||||
<p className="text-xs text-destructive">
|
||||
{returnErrors[assignment.id]}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="flex max-w-sm flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold">New Assignment</h2>
|
||||
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="employeeId">Employee</Label>
|
||||
<Select value={employeeId} onValueChange={setEmployeeId} required>
|
||||
<SelectTrigger id="employeeId" className="w-full">
|
||||
<SelectValue placeholder="Select an employee" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{employees.map((employee) => (
|
||||
<SelectItem key={employee.id} value={employee.id}>
|
||||
{employee.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="targetKind">Assign</Label>
|
||||
<Select
|
||||
value={targetKind}
|
||||
onValueChange={(value) => setTargetKind(value as TargetKind)}
|
||||
>
|
||||
<SelectTrigger id="targetKind" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="asset_item">Asset Item</SelectItem>
|
||||
<SelectItem value="license">License</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{targetKind === "asset_item" ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="assetItemId">Asset Item</Label>
|
||||
<Select value={assetItemId} onValueChange={setAssetItemId} required>
|
||||
<SelectTrigger id="assetItemId" className="w-full">
|
||||
<SelectValue placeholder="Select an asset item" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{assetItems.map((assetItem) => (
|
||||
<SelectItem key={assetItem.id} value={assetItem.id}>
|
||||
{assetItem.serial_number}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="licenseId">License</Label>
|
||||
<Select value={licenseId} onValueChange={setLicenseId} required>
|
||||
<SelectTrigger id="licenseId" className="w-full">
|
||||
<SelectValue placeholder="Select a license" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{licenses.map((license) => (
|
||||
<SelectItem key={license.id} value={license.id}>
|
||||
{license.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}
|
||||
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Creating..." : "Create Assignment"}
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user