Citali/old.cms.fellies.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): add grouping visibility and ordering controls

Browse Source
This commit is contained in:
Citali
2026-02-12 22:46:04 +01:00
parent b9424c8a8b
commit 984511f166
7 changed files with 263 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
TODO.md
View File

@@ -141,7 +141,7 @@ This file is the single source of truth for roadmap and delivery progress.
- [~] [P1] Navigation management (menus, nested items, order, visibility)
- [~] [P1] Media library (upload, browse, replace, delete) with media-type classification (artwork, banner, promo, generic, video/gif)
- [x] [P1] Media enrichment metadata (alt text, copyright, author, source, tags, licensing, usage context)
- [ ] [P1] Portfolio grouping primitives (galleries, albums, categories, tags) with ordering/visibility controls
- [x] [P1] Portfolio grouping primitives (galleries, albums, categories, tags) with ordering/visibility controls
- [ ] [P1] Artwork refinement fields (medium, dimensions, year, framing, availability, price visibility)
- [ ] [P1] Artwork rendition management (thumbnail, card, full, retina/custom sizes)
- [ ] [P1] Type-specific processing presets (artwork/banner/promo/video/gif) with validation rules
@@ -361,6 +361,7 @@ This file is the single source of truth for roadmap and delivery progress.
- [2026-02-12] Page editor now supports locale translations in `/pages/:id`; public page rendering uses locale-aware page lookup with base-content fallback.
- [2026-02-12] Public rendering integration advanced with locale-aware navigation/news translations and a new public commission request entry route (`/[locale]/commissions`) that creates/reuses customer records and opens a `new` commission.
- [2026-02-12] Public portfolio baseline added with `/{locale}/portfolio` and `/{locale}/portfolio/{slug}`, including published-artwork filters (gallery/album/category/tag), rendition image streaming via web `/api/media/file/:id`, and media-aware artwork detail rendering.
- [2026-02-12] Portfolio grouping controls completed in admin `/portfolio`: galleries/albums/categories/tags now support visibility and sort-order management (create/update/delete), and public tag filters now respect visibility.
- [2026-02-12] Public UX pass: commission request flow now reports explicit invalid budget range errors, and header navigation now falls back to localized defaults (`home`, `portfolio`, `news`, `commissions`) when no CMS menu exists; seed data now creates those default menu entries.
- [2026-02-12] Added `e2e/public-rendering.pw.ts` web coverage for fallback navigation visibility, portfolio routes, and commission submission validation (invalid budget range + successful submission path).
- [2026-02-12] Testing execution is temporarily paused for delivery velocity: root test scripts are stubbed and CI test steps are disabled; all testing backlog is consolidated under `MVP 3: Testing and Quality`.

164
apps/admin/src/app/portfolio/page.tsx
View File

@@ -5,10 +5,12 @@ import {
createCategory,
createGallery,
createTag,
deleteGrouping,
linkArtworkToGrouping,
listArtworks,
listMediaAssets,
listMediaFoundationGroups,
updateGrouping,
} from "@cms/db"
import { Button } from "@cms/ui/button"
import { revalidatePath } from "next/cache"
@@ -32,6 +34,21 @@ function readOptionalField(formData: FormData, key: string): string | undefined
return value.length > 0 ? value : undefined
}
function readOptionalNullableField(formData: FormData, key: string): string | null {
const value = readField(formData, key)
return value.length > 0 ? value : null
}
function readNonNegativeInt(formData: FormData, key: string): number {
const raw = readField(formData, key)
const value = Number(raw)
return Number.isFinite(value) && value >= 0 ? Math.floor(value) : 0
}
function readBooleanField(formData: FormData, key: string): boolean {
return formData.get(key) === "on" || readField(formData, key) === "true"
}
function readFirstValue(value: string | string[] | undefined): string | null {
if (Array.isArray(value)) {
return value[0] ?? null
@@ -117,23 +134,32 @@ async function createGroupAction(formData: FormData) {
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else if (type === "album") {
await createAlbum({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else if (type === "category") {
await createCategory({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else {
await createTag({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
}
} catch {
@@ -144,6 +170,47 @@ async function createGroupAction(formData: FormData) {
redirectWithState({ notice: `${type} created.` })
}
async function updateGroupAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await updateGrouping({
groupType: readField(formData, "groupType"),
groupId: readField(formData, "groupId"),
name: readField(formData, "name"),
slug: slugify(readField(formData, "slug")),
description: readOptionalNullableField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} catch {
redirectWithState({ error: "Failed to update grouping entity." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Grouping entity updated." })
}
async function deleteGroupAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await deleteGrouping({
groupType: readField(formData, "groupType"),
groupId: readField(formData, "groupId"),
})
} catch {
redirectWithState({ error: "Failed to delete grouping entity." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Grouping entity deleted." })
}
async function linkArtworkGroupAction(formData: FormData) {
"use server"
@@ -297,7 +364,7 @@ export default async function PortfolioPage({
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Create Group Entity</h2>
<form action={createGroupAction} className="mt-4 space-y-3">
<div className="grid gap-3 md:grid-cols-3">
<div className="grid gap-3 md:grid-cols-5">
<select
name="groupType"
defaultValue="gallery"
@@ -319,6 +386,18 @@ export default async function PortfolioPage({
placeholder="Slug (optional)"
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="sortOrder"
type="number"
min={0}
defaultValue={0}
placeholder="Sort order"
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<label className="flex items-center gap-2 rounded border border-neutral-300 px-3 py-2 text-sm">
<input type="checkbox" name="isVisible" defaultChecked />
Visible
</label>
</div>
<textarea
name="description"
@@ -330,6 +409,89 @@ export default async function PortfolioPage({
</form>
</section>
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Manage Group Entities</h2>
<div className="mt-4 grid gap-4">
{(
[
{ type: "gallery" as const, label: "Gallery", items: groups.galleries },
{ type: "album" as const, label: "Album", items: groups.albums },
{ type: "category" as const, label: "Category", items: groups.categories },
{ type: "tag" as const, label: "Tag", items: groups.tags },
] as const
).map((groupConfig) => (
<section
key={`manage-${groupConfig.type}`}
className="rounded border border-neutral-200 p-4"
>
<h3 className="text-sm font-semibold">{groupConfig.label} Entities</h3>
<div className="mt-3 space-y-3">
{groupConfig.items.length === 0 ? (
<p className="text-xs text-neutral-500">No entities created yet.</p>
) : (
groupConfig.items.map((group) => (
<form
key={`manage-${groupConfig.type}-${group.id}`}
action={updateGroupAction}
className="space-y-3 rounded border border-neutral-200 p-3"
>
<input type="hidden" name="groupType" value={groupConfig.type} />
<input type="hidden" name="groupId" value={group.id} />
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
<input
name="name"
required
defaultValue={group.name}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="slug"
required
defaultValue={group.slug}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="sortOrder"
type="number"
min={0}
defaultValue={group.sortOrder}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<label className="flex items-center gap-2 rounded border border-neutral-300 px-3 py-2 text-sm">
<input
type="checkbox"
name="isVisible"
defaultChecked={group.isVisible}
/>
Visible
</label>
</div>
<textarea
name="description"
rows={2}
defaultValue={group.description ?? ""}
placeholder="Description"
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<div className="flex flex-wrap gap-2">
<Button type="submit">Save group</Button>
<button
type="submit"
formAction={deleteGroupAction}
className="rounded border border-red-300 px-3 py-2 text-sm text-red-700 hover:bg-red-50"
>
Delete group
</button>
</div>
</form>
))
)}
</div>
</section>
))}
</div>
</section>
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Link Artwork To Group</h2>
<div className="mt-4 grid gap-4 lg:grid-cols-2">

17
packages/content/src/media.ts
View File

@@ -75,6 +75,21 @@ export const createGroupingInputSchema = z.object({
isVisible: z.boolean().default(true),
})
export const updateGroupingInputSchema = z.object({
groupType: z.enum(["gallery", "album", "category", "tag"]),
groupId: z.string().uuid(),
name: z.string().min(1).max(180),
slug: z.string().min(1).max(180),
description: z.string().max(5000).nullable().optional(),
sortOrder: z.number().int().min(0),
isVisible: z.boolean(),
})
export const deleteGroupingInputSchema = z.object({
groupType: z.enum(["gallery", "album", "category", "tag"]),
groupId: z.string().uuid(),
})
export const linkArtworkGroupingInputSchema = z.object({
artworkId: z.string().uuid(),
groupType: z.enum(["gallery", "album", "category", "tag"]),
@@ -96,5 +111,7 @@ export type CreateMediaAssetInput = z.infer<typeof createMediaAssetInputSchema>
export type UpdateMediaAssetInput = z.infer<typeof updateMediaAssetInputSchema>
export type CreateArtworkInput = z.infer<typeof createArtworkInputSchema>
export type CreateGroupingInput = z.infer<typeof createGroupingInputSchema>
export type UpdateGroupingInput = z.infer<typeof updateGroupingInputSchema>
export type DeleteGroupingInput = z.infer<typeof deleteGroupingInputSchema>
export type LinkArtworkGroupingInput = z.infer<typeof linkArtworkGroupingInputSchema>
export type AttachArtworkRenditionInput = z.infer<typeof attachArtworkRenditionInputSchema>

4
packages/db/prisma/migrations/20260213003000_tag_group_controls/migration.sql Normal file
View File

@@ -0,0 +1,4 @@
ALTER TABLE "Tag"
ADD COLUMN "description" TEXT,
ADD COLUMN "sortOrder" INTEGER NOT NULL DEFAULT 0,
ADD COLUMN "isVisible" BOOLEAN NOT NULL DEFAULT true;

3
packages/db/prisma/schema.prisma
View File

@@ -222,6 +222,9 @@ model Tag {
id String @id @default(uuid())
name String
slug String @unique
description String?
sortOrder Int @default(0)
isVisible Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
artworkLinks ArtworkTag[]

2
packages/db/src/index.ts
View File

@@ -24,6 +24,7 @@ export {
createGallery,
createMediaAsset,
createTag,
deleteGrouping,
deleteMediaAsset,
getMediaAssetById,
getMediaFoundationSummary,
@@ -34,6 +35,7 @@ export {
listMediaFoundationGroups,
listPublishedArtworks,
listPublishedPortfolioGroups,
updateGrouping,
updateMediaAsset,
} from "./media-foundation"
export type { PublicNavigationItem } from "./pages-navigation"

80
packages/db/src/media-foundation.ts
View File

@@ -3,7 +3,9 @@ import {
createArtworkInputSchema,
createGroupingInputSchema,
createMediaAssetInputSchema,
deleteGroupingInputSchema,
linkArtworkGroupingInputSchema,
updateGroupingInputSchema,
updateMediaAssetInputSchema,
} from "@cms/content"
@@ -96,7 +98,7 @@ export async function listMediaFoundationGroups() {
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
}),
db.tag.findMany({
orderBy: { name: "asc" },
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
}),
])
@@ -171,18 +173,76 @@ export async function createCategory(input: unknown) {
}
export async function createTag(input: unknown) {
const payload = createGroupingInputSchema
.pick({
name: true,
slug: true,
})
.parse(input)
const payload = createGroupingInputSchema.parse(input)
return db.tag.create({
data: payload,
})
}
export async function updateGrouping(input: unknown) {
const payload = updateGroupingInputSchema.parse(input)
const data = {
name: payload.name,
slug: payload.slug,
description: payload.description ?? null,
sortOrder: payload.sortOrder,
isVisible: payload.isVisible,
}
if (payload.groupType === "gallery") {
return db.gallery.update({
where: { id: payload.groupId },
data,
})
}
if (payload.groupType === "album") {
return db.album.update({
where: { id: payload.groupId },
data,
})
}
if (payload.groupType === "category") {
return db.category.update({
where: { id: payload.groupId },
data,
})
}
return db.tag.update({
where: { id: payload.groupId },
data,
})
}
export async function deleteGrouping(input: unknown) {
const payload = deleteGroupingInputSchema.parse(input)
if (payload.groupType === "gallery") {
return db.gallery.delete({
where: { id: payload.groupId },
})
}
if (payload.groupType === "album") {
return db.album.delete({
where: { id: payload.groupId },
})
}
if (payload.groupType === "category") {
return db.category.delete({
where: { id: payload.groupId },
})
}
return db.tag.delete({
where: { id: payload.groupId },
})
}
export async function linkArtworkToGrouping(input: unknown) {
const payload = linkArtworkGroupingInputSchema.parse(input)
@@ -325,7 +385,10 @@ export async function listPublishedPortfolioGroups() {
},
}),
db.tag.findMany({
orderBy: [{ name: "asc" }],
where: {
isVisible: true,
},
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
select: {
id: true,
name: true,
@@ -381,6 +444,7 @@ export async function listPublishedArtworks(input: ListPublishedArtworksInput =
some: {
tag: {
slug: input.groupSlug,
isVisible: true,
},
},
}