panel entity update design type line through fetcher template and api

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

@@ -0,0 +1,163 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import {
+	EditDesignLineWidthSchema,
+	type DesignLineUpdateSchemaType,
+	EditDesignLineBasisSchema,
+	EditDesignLineFormatSchema,
+} from '#app/schema/line'
+import { ValidateDesignParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+import { findFirstLineInstance } from '#app/utils/prisma-extensions-line'
+import { type IDesign } from '../design.server'
+import { type ILine } from '../line.server'
+
+export interface IDesignTypeLineUpdatedResponse {
+	success: boolean
+	message?: string
+	updatedLine?: ILine
+}
+
+const validateUpdateSubmission = async ({
+	userId,
+	formData,
+	schema,
+}: IntentActionArgs & {
+	schema: DesignLineUpdateSchemaType
+}) => {
+	const strategy = new ValidateDesignParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema,
+		strategy,
+	})
+}
+
+export async function validateDesignTypeUpdateLineWidthSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignLineWidthSchema,
+	})
+}
+
+export async function validateDesignTypeUpdateLineBasisSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignLineBasisSchema,
+	})
+}
+
+export async function validateDesignTypeUpdateLineFormatSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignLineFormatSchema,
+	})
+}
+
+const getLineInstance = async ({ id }: { id: ILine['id'] }) => {
+	return await findFirstLineInstance({
+		where: { id },
+	})
+}
+
+// updating instance instead of regular prism update
+// this may not be easier, but it's more explicit
+export const updateDesignTypeLineWidth = async ({
+	id,
+	designId,
+	width,
+}: {
+	id: ILine['id']
+	designId: IDesign['id']
+	width: number
+}): Promise<IDesignTypeLineUpdatedResponse> => {
+	const line = await getLineInstance({ id })
+	if (!line) return { success: false }
+
+	try {
+		const data = EditDesignLineWidthSchema.parse({ id, designId, width })
+		line.width = data.width
+		line.updatedAt = new Date()
+		await line.save()
+
+		return { success: true, updatedLine: line }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeLineWidth error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeLineBasis = async ({
+	id,
+	designId,
+	basis,
+}: {
+	id: ILine['id']
+	designId: IDesign['id']
+	basis: string
+}): Promise<IDesignTypeLineUpdatedResponse> => {
+	const line = await getLineInstance({ id })
+	if (!line) return { success: false }
+
+	try {
+		const data = EditDesignLineBasisSchema.parse({ id, designId, basis })
+		line.basis = data.basis
+		line.updatedAt = new Date()
+		await line.save()
+
+		return { success: true, updatedLine: line }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeLineBasis error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeLineFormat = async ({
+	id,
+	designId,
+	format,
+}: {
+	id: ILine['id']
+	designId: IDesign['id']
+	format: string
+}): Promise<IDesignTypeLineUpdatedResponse> => {
+	const line = await getLineInstance({ id })
+	if (!line) return { success: false }
+
+	try {
+		const data = EditDesignLineFormatSchema.parse({ id, designId, format })
+		line.format = data.format
+		line.updatedAt = new Date()
+		await line.save()
+
+		return { success: true, updatedLine: line }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeLineStyle 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.line.update.basis.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeLineBasis,
+	validateDesignTypeUpdateLineBasisSubmission,
+} from '#app/models/design-type/design-type.update.line.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 validateDesignTypeUpdateLineBasisSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeLineBasis({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/resources+/api.v1+/design.type.line.update.format.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeLineFormat,
+	validateDesignTypeUpdateLineFormatSubmission,
+} from '#app/models/design-type/design-type.update.line.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 validateDesignTypeUpdateLineFormatSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeLineFormat({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/resources+/api.v1+/design.type.line.update.width.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeLineWidth,
+	validateDesignTypeUpdateLineWidthSubmission,
+} from '#app/models/design-type/design-type.update.line.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 validateDesignTypeUpdateLineWidthSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeLineWidth({
+			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

@@ -22,7 +22,7 @@ export const PanelArtboardVersionDesigns = ({
 		designs: orderedDesigns,
 	})
 	// remove trim after testing actions work for one design type
-	const designsTrimmed = designTypePanels.slice(0, 5)
+	const designsTrimmed = designTypePanels.slice(0, 6)
 	// const designsTrimmed = designTypePanels
 
 	const strategyEntityNew =

app/schema/line.ts

@@ -26,6 +26,11 @@ export const LineDataSchema = z.object({
 	width: LineWidthSchema.optional(),
 })
 
+export type DesignLineUpdateSchemaType =
+	| typeof EditDesignLineWidthSchema
+	| typeof EditDesignLineBasisSchema
+	| typeof EditDesignLineFormatSchema
+
 export const EditDesignLineWidthSchema = z.object({
 	id: z.string(),
 	designId: z.string(),