layer design resource routes created and selecting a layer will displ…

…ay its designs which can be updated

app/models/design-layer/design-layer.create.server.ts

@@ -0,0 +1,18 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import { NewLayerDesignSchema } from '#app/schema/design-layer'
+import { ValidateLayerParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+
+export const validateLayerNewDesignSubmission = async ({
+	userId,
+	formData,
+}: IntentActionArgs) => {
+	const strategy = new ValidateLayerParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema: NewLayerDesignSchema,
+		strategy,
+	})
+}

app/models/design-layer/design-layer.delete.server.ts

@@ -0,0 +1,18 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import { DeleteLayerDesignSchema } from '#app/schema/design-layer'
+import { ValidateLayerParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+
+export const validateLayerDeleteDesignSubmission = async ({
+	userId,
+	formData,
+}: IntentActionArgs) => {
+	const strategy = new ValidateLayerParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema: DeleteLayerDesignSchema,
+		strategy,
+	})
+}

app/models/design-layer/design-layer.update.server.ts

@@ -0,0 +1,35 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import {
+	ReorderLayerDesignSchema,
+	ToggleVisibleLayerDesignSchema,
+} from '#app/schema/design-layer'
+import { ValidateLayerParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+
+export const validateLayerToggleVisibeDesignSubmission = async ({
+	userId,
+	formData,
+}: IntentActionArgs) => {
+	const strategy = new ValidateLayerParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema: ToggleVisibleLayerDesignSchema,
+		strategy,
+	})
+}
+
+export const validateLayerReorderDesignSubmission = async ({
+	userId,
+	formData,
+}: IntentActionArgs) => {
+	const strategy = new ValidateLayerParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema: ReorderLayerDesignSchema,
+		strategy,
+	})
+}

app/routes/resources+/api.v1+/artboard-version.design.update.visible.tsx

@@ -6,7 +6,7 @@ import {
 import { redirectBack } from 'remix-utils/redirect-back'
 import { validateArtboardVersionToggleVisibeDesignSubmission } from '#app/models/design-artboard-version/design-artboard-version.update.server'
 import { validateNoJS } from '#app/schema/form-data'
-import { artboardDesignToggleVisibleService } from '#app/services/artboard/design/toggle-visible.service'
+import { artboardVersionDesignToggleVisibleService } from '#app/services/artboard/version/design/toggle-visible.service'
 import { requireUserId } from '#app/utils/auth.server'
 
 // https://www.epicweb.dev/full-stack-components
@@ -29,7 +29,7 @@ export async function action({ request }: DataFunctionArgs) {
 		})
 
 	if (status === 'success') {
-		const { success } = await artboardDesignToggleVisibleService({
+		const { success } = await artboardVersionDesignToggleVisibleService({
 			userId,
 			...submission.value,
 		})

app/routes/resources+/api.v1+/layer.design.create.tsx

@@ -0,0 +1,50 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import { validateLayerNewDesignSubmission } from '#app/models/design-layer/design-layer.create.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { layerDesignCreateService } from '#app/services/layer/design/create.service'
+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 createSuccess = false
+	const { status, submission } = await validateLayerNewDesignSubmission({
+		userId,
+		formData,
+	})
+
+	if (status === 'success') {
+		const { success } = await layerDesignCreateService({
+			userId,
+			...submission.value,
+		})
+		createSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !createSuccess ? 422 : 201,
+		},
+	)
+}

app/routes/resources+/api.v1+/layer.design.delete.tsx

@@ -0,0 +1,50 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import { validateLayerDeleteDesignSubmission } from '#app/models/design-layer/design-layer.delete.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { layerDesignDeleteService } from '#app/services/layer/design/delete.service'
+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 deleteSuccess = false
+	const { status, submission } = await validateLayerDeleteDesignSubmission({
+		userId,
+		formData,
+	})
+
+	if (status === 'success') {
+		const { success } = await layerDesignDeleteService({
+			userId,
+			...submission.value,
+		})
+		deleteSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !deleteSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/resources+/api.v1+/layer.design.update.order.tsx

@@ -0,0 +1,58 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import { validateLayerReorderDesignSubmission } from '#app/models/design-layer/design-layer.update.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { layerDesignMoveDownService } from '#app/services/layer/design/move-down.service'
+import { layerDesignMoveUpService } from '#app/services/layer/design/move-up.service'
+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 validateLayerReorderDesignSubmission({
+		userId,
+		formData,
+	})
+
+	if (status === 'success') {
+		const { direction } = submission.value
+		const { success } =
+			direction === 'up'
+				? await layerDesignMoveUpService({
+						userId,
+						...submission.value,
+				  })
+				: await layerDesignMoveDownService({
+						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+/layer.design.update.visible.tsx

@@ -0,0 +1,51 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import { validateLayerToggleVisibeDesignSubmission } from '#app/models/design-layer/design-layer.update.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { layerDesignToggleVisibleService } from '#app/services/layer/design/toggle-visible.service'
+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 validateLayerToggleVisibeDesignSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await layerDesignToggleVisibleService({
+			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.tsx

@@ -1,7 +1,7 @@
 import { type IArtboardVersionWithDesignsAndLayers } from '#app/models/artboard-version/artboard-version.server'
 import { PanelArtboardVersionBackground } from './sidebars.panel.artboard-version.background'
-import { PanelArtboardVersionDesigns } from './sidebars.panel.artboard-version.designs'
 import { PanelArtboardVersionFrame } from './sidebars.panel.artboard-version.frame'
+import { PanelArtboardVersionDesigns } from './sidebars.panel.designs.artboard-version'
 
 export const PanelArtboardVersion = ({
 	version,

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

@@ -0,0 +1,20 @@
+import { type ILayerWithDesigns } from '#app/models/layer.server'
+import { DashboardPanelCreateLayerDesignTypeStrategy } from '#app/strategies/component/dashboard-panel/create-entity.strategy'
+import { DashboardPanelLayerDesignActionStrategy } from '#app/strategies/component/dashboard-panel/entity-action/entity-action'
+import { DashboardPanelUpdateLayerDesignTypeOrderStrategy } from '#app/strategies/component/dashboard-panel/update-entity-order.strategy'
+import { PanelDesigns } from './sidebars.panel.designs'
+
+export const PanelLayerDesigns = ({ layer }: { layer: ILayerWithDesigns }) => {
+	const strategyEntityNew = new DashboardPanelCreateLayerDesignTypeStrategy()
+	const strategyReorder = new DashboardPanelUpdateLayerDesignTypeOrderStrategy()
+	const strategyActions = new DashboardPanelLayerDesignActionStrategy()
+
+	return (
+		<PanelDesigns
+			parent={layer}
+			strategyEntityNew={strategyEntityNew}
+			strategyReorder={strategyReorder}
+			strategyActions={strategyActions}
+		/>
+	)
+}

app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/sidebars.panel.layer.tsx

@@ -0,0 +1,10 @@
+import { type ILayerWithDesigns } from '#app/models/layer.server'
+import { PanelLayerDesigns } from './sidebars.panel.designs.layer'
+
+export const PanelLayer = ({ layer }: { layer: ILayerWithDesigns }) => {
+	return (
+		<div>
+			<PanelLayerDesigns layer={layer} />
+		</div>
+	)
+}

app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/sidebars.tsx

@@ -4,6 +4,7 @@ import { type IArtboardVersionWithDesignsAndLayers } from '#app/models/artboard-
 import { type ILayerWithDesigns } from '#app/models/layer.server'
 import { PanelArtboardVersion } from './sidebars.panel.artboard-version'
 import { PanelArtboardVersionLayers } from './sidebars.panel.artboard-version.layers'
+import { PanelLayer } from './sidebars.panel.layer'
 
 export const SidebarLeft = ({
 	version,
@@ -35,8 +36,11 @@ export const SidebarRight = ({
 		<Sidebar id="sidebar-right">
 			<SidebarTabs tabs={['designs', 'actions']}>
 				<SidebarTabsContent value="designs">
-					{selectedLayer && <p>yo</p>}
-					<PanelArtboardVersion version={version} />
+					{selectedLayer ? (
+						<PanelLayer layer={selectedLayer} />
+					) : (
+						<PanelArtboardVersion version={version} />
+					)}
 				</SidebarTabsContent>
 				<SidebarTabsContent value="actions">Actions here</SidebarTabsContent>
 			</SidebarTabs>

app/schema/design-layer.ts

@@ -20,7 +20,7 @@ export const LayerDesignDataCreateSchema = z.object({
 export const NewLayerDesignSchema = z.object({
 	layerId: z.string(),
 	type: z.nativeEnum(DesignTypeEnum),
-	visibleDesignsCount: z.number(),
+	visibleDesignsCount: z.number().optional(),
 })
 
 export const DeleteLayerDesignSchema = z.object({

app/strategies/component/dashboard-panel/create-entity.strategy.ts

@@ -3,6 +3,7 @@ import {
 	type NewDesignSchemaType,
 } from '#app/schema/design'
 import { NewArtboardVersionDesignSchema } from '#app/schema/design-artboard-version'
+import { NewLayerDesignSchema } from '#app/schema/design-layer'
 import {
 	type entityParentIdTypeEnum,
 	type NewEntitySchemaType,
@@ -40,3 +41,13 @@ export class DashboardPanelCreateArtboardVersionLayerStrategy
 	schema: NewLayerSchemaType = NewArtboardVersionLayerSchema
 	iconText = 'Add New Layer'
 }
+
+export class DashboardPanelCreateLayerDesignTypeStrategy
+	implements IDashboardPanelCreateEntityStrategy
+{
+	route: RoutePath = Routes.RESOURCES.API.V1.LAYER.DESIGN.CREATE
+	parentTypeId: entityParentIdTypeEnum = DesignParentTypeIdEnum.LAYER_ID
+	formId: string = 'layer-design-create'
+	schema: NewDesignSchemaType = NewLayerDesignSchema
+	iconText = 'Add New Design'
+}