Merge pull request #30 from goodeats/28-polymorphic-designs-on-artboa…

…rd-pt-2

polymorphic designs on artboard pt 2

app/models/artboard.server.ts

@@ -12,11 +12,10 @@ export const findFirstArtboard = async ({
 	where,
 	select,
 }: findArtboardArgsType): Promise<Artboard | null> => {
-	const artbord = await prisma.artboard.findFirst({
+	return await prisma.artboard.findFirst({
 		where,
 		select,
 	})
-	return artbord
 }
 
 export const findArtboardByIdAndOwner = async ({

app/models/design.server.ts

@@ -0,0 +1,64 @@
+import { type Design } from '@prisma/client'
+import {
+	type selectArgsType,
+	type findDesignArgsType,
+	type whereArgsType,
+} from '#app/schema/design'
+import { prisma } from '#app/utils/db.server'
+import { type IPalette } from './palette.server'
+
+export interface IDesignWithType {
+	id: string
+	type: string
+	visible: boolean
+	createdAt: Date | string
+	nextId: string | null
+	prevId: string | null
+	ownerId: string
+	artboardId: string | null
+	palette: IPalette | null
+}
+
+export interface IDesignWithPalette extends IDesignWithType {
+	palette: IPalette
+}
+
+export const findManyDesignsWithType = async ({
+	where,
+}: {
+	where: whereArgsType
+}) => {
+	const designs = await prisma.design.findMany({
+		where,
+		include: {
+			palette: true,
+		},
+		orderBy: {
+			type: 'asc',
+		},
+	})
+	return designs
+}
+
+export const findFirstDesign = async ({
+	where,
+	select,
+}: findDesignArgsType): Promise<Design | null> => {
+	return await prisma.design.findFirst({
+		where,
+		select,
+	})
+}
+
+export const findDesignByIdAndOwner = async ({
+	id,
+	ownerId,
+	select,
+}: {
+	id: whereArgsType['id']
+	ownerId: whereArgsType['ownerId']
+	select?: selectArgsType
+}): Promise<Design | null> => {
+	const where = { id, ownerId }
+	return await findFirstDesign({ where, select })
+}

app/models/palette.server.ts

@@ -0,0 +1,9 @@
+export interface IPalette {
+	id: string
+	format: string
+	value: string
+	opacity: number
+	createdAt: Date | string
+	updatedAt: Date | string
+	designId: string
+}

app/routes/editor+/__property-panel-new-form.tsx

@@ -12,9 +12,10 @@ import {
 	TooltipProvider,
 } from '#app/components/ui/tooltip'
 import { type action } from '#app/root'
+import { NewArtboardDesignSchema } from '#app/schema/design'
 import { type AppearanceType } from '#app/utils/appearances'
 import { useIsPending } from '#app/utils/misc'
-import { INTENT, NewArtboardAppearanceSchema } from './actions'
+import { INTENT } from './actions'
 
 export const NewAppearancePanelForm = ({
 	artboardId,
@@ -30,7 +31,7 @@ export const NewAppearancePanelForm = ({
 
 	const [form] = useForm({
 		id: 'panel-create-artboard-appearance',
-		constraint: getFieldsetConstraint(NewArtboardAppearanceSchema),
+		constraint: getFieldsetConstraint(NewArtboardDesignSchema),
 	})
 
 	return (

app/routes/sketch+/artboards+/$slug_+/actions/artboard-design-palette.ts

@@ -0,0 +1,113 @@
+import { json } from '@remix-run/node'
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import { NewArtboardDesignSchema, designSchema } from '#app/schema/design'
+import { EditArtboardPaletteSchema } from '#app/schema/palette'
+import {
+	notSubmissionResponse,
+	submissionErrorResponse,
+} from '#app/utils/conform-utils'
+import { prisma } from '#app/utils/db.server'
+import { findFirstPaletteInstance } from '#app/utils/prisma-extensions-palette'
+import { parseArtboardDesignSubmission } from './utils'
+
+export async function artboardDesignNewPaletteAction({
+	userId,
+	formData,
+}: IntentActionArgs) {
+	// validation
+	const submission = await parseArtboardDesignSubmission({
+		userId,
+		formData,
+		schema: NewArtboardDesignSchema,
+	})
+	if (submission.intent !== 'submit') {
+		return notSubmissionResponse(submission)
+	}
+	if (!submission.value) {
+		return submissionErrorResponse(submission)
+	}
+
+	// changes
+	const { artboardId } = submission.value
+
+	// start transaction so we can create design and palette together
+	// palette is 1:1 with design which belongs to an artboard
+	try {
+		await prisma.$transaction(async prisma => {
+			// new designs are appended to the end of the list
+			// find the last design in the list by type
+			// we know the artboard already exists for the user by this point
+			const lastArtboardDesignPalette = await prisma.design.findFirst({
+				where: { type: 'palette', artboardId, nextId: null },
+			})
+
+			// create design before palette
+			const designData = designSchema.parse({
+				type: 'palette',
+				ownerId: userId,
+				artboardId,
+			})
+			const design = await prisma.design.create({
+				data: designData,
+			})
+
+			// then create palette after design
+			await prisma.palette.create({
+				data: {
+					designId: design.id,
+				},
+			})
+
+			// if the artboard already has a palette
+			// link the new palette to the last one
+			// and the last one to the new one
+			if (lastArtboardDesignPalette) {
+				await prisma.design.update({
+					where: { id: design.id },
+					data: { prevId: lastArtboardDesignPalette.id },
+				})
+
+				await prisma.design.update({
+					where: { id: lastArtboardDesignPalette.id },
+					data: { nextId: design.id },
+				})
+			}
+		})
+	} catch (error) {
+		console.log(error)
+		return submissionErrorResponse(submission)
+	}
+
+	return json({ status: 'success', submission } as const)
+}
+
+export async function artboardDesignEditPaletteAction({
+	userId,
+	formData,
+}: IntentActionArgs) {
+	// validation
+	const submission = await parseArtboardDesignSubmission({
+		userId,
+		formData,
+		schema: EditArtboardPaletteSchema,
+	})
+	if (submission.intent !== 'submit') {
+		return notSubmissionResponse(submission)
+	}
+	if (!submission.value) {
+		return submissionErrorResponse(submission)
+	}
+
+	// changes
+	const { id, value } = submission.value
+	const palette = await findFirstPaletteInstance({
+		where: { id },
+	})
+	if (!palette) return submissionErrorResponse(submission)
+
+	palette.value = value
+	palette.updatedAt = new Date()
+	await palette.save()
+
+	return json({ status: 'success', submission } as const)
+}