luoyangwei
518 lines
22 KiB
TypeScript
518 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import {
|
|
ImageIcon,
|
|
Loader2Icon,
|
|
PencilIcon,
|
|
PlusIcon,
|
|
RefreshCwIcon,
|
|
SaveIcon,
|
|
Trash2Icon,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import type {
|
|
CollectionPhoto,
|
|
PhotoCollection,
|
|
} from "@/types/admin/collection";
|
|
|
|
type CollectionForm = {
|
|
id: string | null;
|
|
title: string;
|
|
slug: string;
|
|
description: string;
|
|
coverPhotoId: string | null;
|
|
isPublished: boolean;
|
|
photoIds: string[];
|
|
};
|
|
|
|
type ApiResponse<T> = {
|
|
ok: boolean;
|
|
data: T;
|
|
error?: string;
|
|
};
|
|
|
|
const emptyForm: CollectionForm = {
|
|
id: null,
|
|
title: "",
|
|
slug: "",
|
|
description: "",
|
|
coverPhotoId: null,
|
|
isPublished: false,
|
|
photoIds: [],
|
|
};
|
|
|
|
function getPhotoUrl(photo: CollectionPhoto) {
|
|
const urls = photo.urls as Record<string, string> | undefined;
|
|
return photo.oss_url ?? urls?.small ?? urls?.thumb ?? urls?.regular ?? "";
|
|
}
|
|
|
|
function getPhotoLabel(photo: CollectionPhoto) {
|
|
return (
|
|
photo.alt_description ||
|
|
photo.description ||
|
|
photo.unsplash_id ||
|
|
"Picked photo"
|
|
);
|
|
}
|
|
|
|
function getFormFromCollection(collection: PhotoCollection): CollectionForm {
|
|
return {
|
|
id: collection.id,
|
|
title: collection.title,
|
|
slug: collection.slug,
|
|
description: collection.description ?? "",
|
|
coverPhotoId: collection.cover_photo_id,
|
|
isPublished: collection.is_published,
|
|
photoIds: collection.photos.map((photo) => photo.id),
|
|
};
|
|
}
|
|
|
|
export function CollectionsManager({
|
|
initialCollections,
|
|
initialPickedPhotos,
|
|
}: {
|
|
initialCollections: PhotoCollection[];
|
|
initialPickedPhotos: CollectionPhoto[];
|
|
}) {
|
|
const [collections, setCollections] =
|
|
useState<PhotoCollection[]>(initialCollections);
|
|
const [pickedPhotos, setPickedPhotos] =
|
|
useState<CollectionPhoto[]>(initialPickedPhotos);
|
|
const [form, setForm] = useState<CollectionForm>(emptyForm);
|
|
const [saving, setSaving] = useState(false);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const selectedPhotoIds = useMemo(
|
|
() => new Set(form.photoIds),
|
|
[form.photoIds],
|
|
);
|
|
|
|
const selectedPhotos = useMemo(
|
|
() =>
|
|
form.photoIds
|
|
.map((photoId) =>
|
|
pickedPhotos.find((photo) => photo.id === photoId),
|
|
)
|
|
.filter((photo): photo is CollectionPhoto => Boolean(photo)),
|
|
[form.photoIds, pickedPhotos],
|
|
);
|
|
|
|
const updateForm = (patch: Partial<CollectionForm>) => {
|
|
setForm((current) => ({ ...current, ...patch }));
|
|
};
|
|
|
|
const startNew = () => {
|
|
setError(null);
|
|
setForm(emptyForm);
|
|
};
|
|
|
|
const togglePhoto = (photoId: string) => {
|
|
setForm((current) => {
|
|
const exists = current.photoIds.includes(photoId);
|
|
const photoIds = exists
|
|
? current.photoIds.filter((id) => id !== photoId)
|
|
: [...current.photoIds, photoId];
|
|
const coverPhotoId =
|
|
current.coverPhotoId && photoIds.includes(current.coverPhotoId)
|
|
? current.coverPhotoId
|
|
: (photoIds[0] ?? null);
|
|
|
|
return {
|
|
...current,
|
|
photoIds,
|
|
coverPhotoId,
|
|
};
|
|
});
|
|
};
|
|
|
|
const saveCollection = async () => {
|
|
setSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
form.id
|
|
? `/api/admin/photo-collections/${form.id}`
|
|
: "/api/admin/photo-collections",
|
|
{
|
|
method: form.id ? "PATCH" : "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
title: form.title,
|
|
slug: form.slug || null,
|
|
description: form.description || null,
|
|
coverPhotoId: form.coverPhotoId,
|
|
isPublished: form.isPublished,
|
|
photoIds: form.photoIds,
|
|
}),
|
|
},
|
|
);
|
|
const json = (await res.json()) as ApiResponse<PhotoCollection>;
|
|
|
|
if (!json.ok) {
|
|
throw new Error(json.error || "Failed to save collection.");
|
|
}
|
|
|
|
setCollections((current) => {
|
|
const exists = current.some(
|
|
(collection) => collection.id === json.data.id,
|
|
);
|
|
|
|
if (exists) {
|
|
return current.map((collection) =>
|
|
collection.id === json.data.id ? json.data : collection,
|
|
);
|
|
}
|
|
|
|
return [json.data, ...current];
|
|
});
|
|
setForm(getFormFromCollection(json.data));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Unknown error.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const deleteCollection = async (collection: PhotoCollection) => {
|
|
if (!confirm(`Delete "${collection.title}"?`)) {
|
|
return;
|
|
}
|
|
|
|
setDeletingId(collection.id);
|
|
setError(null);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
`/api/admin/photo-collections/${collection.id}`,
|
|
{
|
|
method: "DELETE",
|
|
},
|
|
);
|
|
const json = (await res.json()) as ApiResponse<unknown>;
|
|
|
|
if (!json.ok) {
|
|
throw new Error(json.error || "Failed to delete collection.");
|
|
}
|
|
|
|
setCollections((current) =>
|
|
current.filter((item) => item.id !== collection.id),
|
|
);
|
|
|
|
if (form.id === collection.id) {
|
|
setForm(emptyForm);
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Unknown error.");
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
};
|
|
|
|
const refreshPickedPhotos = async () => {
|
|
setRefreshing(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
"/api/admin/gallery-photos?picked=true&per_page=100",
|
|
);
|
|
const json = (await res.json()) as ApiResponse<CollectionPhoto[]>;
|
|
|
|
if (!json.ok) {
|
|
throw new Error(json.error || "Failed to refresh photos.");
|
|
}
|
|
|
|
setPickedPhotos(json.data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Unknown error.");
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="grid flex-1 gap-4 p-4 lg:grid-cols-[minmax(0,1fr)_420px] lg:p-6">
|
|
<section className="flex min-w-0 flex-col gap-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-lg font-semibold">Collections</h2>
|
|
<Button onClick={startNew}>
|
|
<PlusIcon />
|
|
New
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="overflow-hidden rounded-lg border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Title</TableHead>
|
|
<TableHead>Photos</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="w-28">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{collections.map((collection) => (
|
|
<TableRow key={collection.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-muted relative size-12 shrink-0 overflow-hidden rounded-md">
|
|
{collection.cover_photo ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={getPhotoUrl(
|
|
collection.cover_photo,
|
|
)}
|
|
alt={collection.title}
|
|
className="size-full object-cover"
|
|
/>
|
|
) : (
|
|
<ImageIcon className="text-muted-foreground absolute top-1/2 left-1/2 size-4 -translate-x-1/2 -translate-y-1/2" />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate font-medium">
|
|
{collection.title}
|
|
</div>
|
|
<div className="text-muted-foreground truncate font-mono text-xs">
|
|
{collection.slug}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{collection.photos.length}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={
|
|
collection.is_published
|
|
? "default"
|
|
: "secondary"
|
|
}
|
|
>
|
|
{collection.is_published
|
|
? "Published"
|
|
: "Draft"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
size="icon-sm"
|
|
variant="ghost"
|
|
onClick={() =>
|
|
setForm(
|
|
getFormFromCollection(
|
|
collection,
|
|
),
|
|
)
|
|
}
|
|
>
|
|
<PencilIcon />
|
|
</Button>
|
|
<Button
|
|
size="icon-sm"
|
|
variant="ghost"
|
|
disabled={
|
|
deletingId === collection.id
|
|
}
|
|
onClick={() =>
|
|
void deleteCollection(
|
|
collection,
|
|
)
|
|
}
|
|
>
|
|
{deletingId ===
|
|
collection.id ? (
|
|
<Loader2Icon className="animate-spin" />
|
|
) : (
|
|
<Trash2Icon />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{collections.length === 0 && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={4}
|
|
className="text-muted-foreground h-32 text-center text-sm"
|
|
>
|
|
No collections yet.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</section>
|
|
|
|
<aside className="flex min-w-0 flex-col gap-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{form.id ? "Edit collection" : "New collection"}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-3">
|
|
<label className="grid gap-1.5 text-sm">
|
|
<span className="font-medium">Title</span>
|
|
<Input
|
|
value={form.title}
|
|
onChange={(event) =>
|
|
updateForm({ title: event.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label className="grid gap-1.5 text-sm">
|
|
<span className="font-medium">Slug</span>
|
|
<Input
|
|
value={form.slug}
|
|
onChange={(event) =>
|
|
updateForm({ slug: event.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label className="grid gap-1.5 text-sm">
|
|
<span className="font-medium">Description</span>
|
|
<textarea
|
|
value={form.description}
|
|
onChange={(event) =>
|
|
updateForm({
|
|
description: event.target.value,
|
|
})
|
|
}
|
|
className="border-input focus-visible:border-ring focus-visible:ring-ring/50 min-h-20 resize-none rounded-lg border bg-transparent px-2.5 py-2 text-sm transition-colors outline-none focus-visible:ring-3"
|
|
/>
|
|
</label>
|
|
<label className="grid gap-1.5 text-sm">
|
|
<span className="font-medium">Cover</span>
|
|
<select
|
|
value={form.coverPhotoId ?? ""}
|
|
onChange={(event) =>
|
|
updateForm({
|
|
coverPhotoId:
|
|
event.target.value || null,
|
|
})
|
|
}
|
|
className="border-input focus-visible:border-ring focus-visible:ring-ring/50 bg-background h-8 rounded-lg border px-2.5 text-sm transition-colors outline-none focus-visible:ring-3"
|
|
>
|
|
<option value="">Auto</option>
|
|
{selectedPhotos.map((photo, index) => (
|
|
<option key={photo.id} value={photo.id}>
|
|
{index + 1}. {getPhotoLabel(photo)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<Checkbox
|
|
checked={form.isPublished}
|
|
onCheckedChange={(value) =>
|
|
updateForm({ isPublished: Boolean(value) })
|
|
}
|
|
/>
|
|
<span className="font-medium">Published</span>
|
|
</label>
|
|
{error && (
|
|
<p className="text-destructive text-sm">{error}</p>
|
|
)}
|
|
<Button
|
|
disabled={saving || !form.title.trim()}
|
|
onClick={() => void saveCollection()}
|
|
>
|
|
{saving ? (
|
|
<Loader2Icon className="animate-spin" />
|
|
) : (
|
|
<SaveIcon />
|
|
)}
|
|
Save
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex-row items-center justify-between">
|
|
<CardTitle>Picked photos</CardTitle>
|
|
<Button
|
|
size="icon-sm"
|
|
variant="ghost"
|
|
disabled={refreshing}
|
|
onClick={() => void refreshPickedPhotos()}
|
|
>
|
|
{refreshing ? (
|
|
<Loader2Icon className="animate-spin" />
|
|
) : (
|
|
<RefreshCwIcon />
|
|
)}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid max-h-130 grid-cols-3 gap-2 overflow-y-auto pr-1">
|
|
{pickedPhotos.map((photo) => {
|
|
const selected = selectedPhotoIds.has(photo.id);
|
|
|
|
return (
|
|
<button
|
|
key={photo.id}
|
|
type="button"
|
|
className="group bg-muted hover:border-primary focus-visible:border-ring focus-visible:ring-ring/50 relative overflow-hidden rounded-md border text-left transition-colors outline-none focus-visible:ring-3"
|
|
onClick={() => togglePhoto(photo.id)}
|
|
>
|
|
<span className="block aspect-3/4">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={getPhotoUrl(photo)}
|
|
alt={getPhotoLabel(photo)}
|
|
className="size-full object-cover transition-transform group-hover:scale-[1.03]"
|
|
/>
|
|
</span>
|
|
<span className="absolute top-1.5 left-1.5">
|
|
<Checkbox
|
|
checked={selected}
|
|
aria-label="Select photo"
|
|
tabIndex={-1}
|
|
/>
|
|
</span>
|
|
{form.coverPhotoId === photo.id && (
|
|
<Badge className="absolute right-1.5 bottom-1.5">
|
|
Cover
|
|
</Badge>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
{pickedPhotos.length === 0 && (
|
|
<div className="text-muted-foreground col-span-3 flex h-32 items-center justify-center text-sm">
|
|
No picked photos.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</aside>
|
|
</main>
|
|
);
|
|
}
|