panel entity update design type template through fetcher template and…

… api

app/models/design-type/design-type.update.template.server.ts

@@ -0,0 +1,81 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import {
+	EditDesignTemplateStyleSchema,
+	type DesignTemplateUpdateSchemaType,
+} from '#app/schema/template'
+import { ValidateDesignParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+import { findFirstTemplateInstance } from '#app/utils/prisma-extensions-template'
+import { type IDesign } from '../design.server'
+import { type ITemplate } from '../template.server'
+
+export interface IDesignTypeTemplateUpdatedResponse {
+	success: boolean
+	message?: string
+	updatedTemplate?: ITemplate
+}
+
+const validateUpdateSubmission = async ({
+	userId,
+	formData,
+	schema,
+}: IntentActionArgs & {
+	schema: DesignTemplateUpdateSchemaType
+}) => {
+	const strategy = new ValidateDesignParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema,
+		strategy,
+	})
+}
+
+export async function validateDesignTypeUpdateTemplateStyleSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignTemplateStyleSchema,
+	})
+}
+
+const getTemplateInstance = async ({ id }: { id: ITemplate['id'] }) => {
+	return await findFirstTemplateInstance({
+		where: { id },
+	})
+}
+
+// updating instance instead of regular prism update
+// this may not be easier, but it's more explicit
+export const updateDesignTypeTemplateStyle = async ({
+	id,
+	designId,
+	style,
+}: {
+	id: ITemplate['id']
+	designId: IDesign['id']
+	style: string
+}): Promise<IDesignTypeTemplateUpdatedResponse> => {
+	const template = await getTemplateInstance({ id })
+	if (!template) return { success: false }
+
+	try {
+		const data = EditDesignTemplateStyleSchema.parse({ id, designId, style })
+		template.style = data.style
+		template.updatedAt = new Date()
+		await template.save()
+
+		return { success: true, updatedTemplate: template }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeTemplateStyle error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}

app/routes/resources+/api.v1+/design.type.template.update.style.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeTemplateStyle,
+	validateDesignTypeUpdateTemplateStyleSubmission,
+} from '#app/models/design-type/design-type.update.template.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { requireUserId } from '#app/utils/auth.server'
+
+// https://www.epicweb.dev/full-stack-components
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	await requireUserId(request)
+	return json({})
+}
+
+export async function action({ request }: DataFunctionArgs) {
+	const userId = await requireUserId(request)
+	const formData = await request.formData()
+	const noJS = validateNoJS({ formData })
+
+	let updateSuccess = false
+	const { status, submission } =
+		await validateDesignTypeUpdateTemplateStyleSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeTemplateStyle({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/sidebars.panel.artboard-version.designs.tsx

@@ -21,9 +21,6 @@ export const PanelArtboardVersionDesigns = ({
 	const designTypePanels = designsByTypeToPanelArray({
 		designs: orderedDesigns,
 	})
-	// remove trim after testing actions work for one design type
-	const designsTrimmed = designTypePanels.slice(0, 7)
-	// const designsTrimmed = designTypePanels
 
 	const strategyEntityNew =
 		new DashboardPanelCreateArtboardVersionDesignTypeStrategy()
@@ -36,24 +33,23 @@ export const PanelArtboardVersionDesigns = ({
 
 	return (
 		<div>
-			{designsTrimmed.length > 0 &&
-				designsTrimmed.map((designPanel, index) => {
-					const { type, designs, strategyEntityValues } = designPanel
-					return (
-						<DashboardEntityPanel
-							key={type}
-							type={type}
-							parentTypeId={DesignParentTypeIdEnum.ARTBOARD_VERSION_ID}
-							parent={version}
-							entities={designs}
-							strategyEntityNew={strategyEntityNew}
-							strategyReorder={strategyReorder}
-							strategyEntityValues={strategyEntityValues}
-							strategyToggleVisible={strategyToggleVisible}
-							strategyEntityDelete={strategyEntityDelete}
-						/>
-					)
-				})}
+			{designTypePanels.map((designPanel, index) => {
+				const { type, designs, strategyEntityValues } = designPanel
+				return (
+					<DashboardEntityPanel
+						key={type}
+						type={type}
+						parentTypeId={DesignParentTypeIdEnum.ARTBOARD_VERSION_ID}
+						parent={version}
+						entities={designs}
+						strategyEntityNew={strategyEntityNew}
+						strategyReorder={strategyReorder}
+						strategyEntityValues={strategyEntityValues}
+						strategyToggleVisible={strategyToggleVisible}
+						strategyEntityDelete={strategyEntityDelete}
+					/>
+				)
+			})}
 		</div>
 	)
 }

app/schema/template.ts

@@ -1,12 +1,23 @@
 import { z } from 'zod'
+import { type ObjectValues } from '#app/utils/typescript-helpers'
+
+export const TemplateStyleTypeEnum = {
+	TRIANGLE: 'triangle', // my only shape so far
+	// add more styles here
+} as const
+export type templateStyleTypeEnum = ObjectValues<typeof TemplateStyleTypeEnum>
+const TemplateStyleSchema = z.nativeEnum(TemplateStyleTypeEnum)
 
 export const TemplateDataSchema = z.object({
 	designId: z.string(),
-	style: z.enum(['triangle']).optional(),
+	style: TemplateStyleSchema.optional(),
 })
 
+export type DesignTemplateUpdateSchemaType =
+	typeof EditDesignTemplateStyleSchema
+
 export const EditDesignTemplateStyleSchema = z.object({
 	id: z.string(),
 	designId: z.string(),
-	style: z.enum(['triangle']),
+	style: TemplateStyleSchema,
 })

app/services/design-type/update-template.service.ts

@@ -0,0 +1,99 @@
+import { type User } from '@sentry/remix'
+import {
+	type IDesignTypeFillUpdatedResponse,
+	updateDesignTypeFillBasis,
+	updateDesignTypeFillValue,
+	updateDesignTypeFillStyle,
+} from '#app/models/design-type/design-type.update.fill.server'
+import { type IDesign } from '#app/models/design.server'
+import { type IFill } from '#app/models/fill.server'
+
+export const updateDesignTypeFillValueService = async ({
+	userId,
+	id,
+	designId,
+	value,
+}: {
+	userId: User['id']
+	id: IFill['id']
+	designId: IDesign['id']
+	value: number
+}): Promise<IDesignTypeFillUpdatedResponse> => {
+	try {
+		return await updateDesignTypeFillValue({
+			id,
+			designId,
+			value,
+		})
+		// later will be adding Activity class
+		// i.e, edit history so you can undo changes and/or see who made them
+	} catch (error) {
+		console.log('updateDesignTypeFillValueService error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeFillBasisService = async ({
+	userId,
+	id,
+	designId,
+	basis,
+}: {
+	userId: User['id']
+	id: IFill['id']
+	designId: IDesign['id']
+	basis: string
+}): Promise<IDesignTypeFillUpdatedResponse> => {
+	try {
+		return await updateDesignTypeFillBasis({
+			id,
+			designId,
+			basis,
+		})
+		// later will be adding Activity class
+		// i.e, edit history so you can undo changes and/or see who made them
+	} catch (error) {
+		console.log('updateDesignTypeFillBasisService error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeFillStyleService = async ({
+	userId,
+	id,
+	designId,
+	style,
+}: {
+	userId: User['id']
+	id: IFill['id']
+	designId: IDesign['id']
+	style: string
+}): Promise<IDesignTypeFillUpdatedResponse> => {
+	try {
+		return await updateDesignTypeFillStyle({
+			id,
+			designId,
+			style,
+		})
+		// later will be adding Activity class
+		// i.e, edit history so you can undo changes and/or see who made them
+	} catch (error) {
+		console.log('updateDesignTypeFillStyleService error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}