feat: recreate form collection (layout + create)

inertia/mantine/components/form/mantine_form_collection.tsx

@@ -0,0 +1,101 @@
+import { Visibility } from '#enums/visibility';
+import { Box, Group, SegmentedControl, Text, TextInput } from '@mantine/core';
+import { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+import { MantineFormLayout } from '~/mantine/layouts/mantine_form_layout';
+import { Collection } from '~/types/app';
+
+export type FormCollectionData = {
+	name: string;
+	description: string | null;
+	visibility: Visibility;
+	nextId?: Collection['id'];
+};
+
+interface FormCollectionProps {
+	title: string;
+	canSubmit: boolean;
+	disableHomeLink?: boolean;
+	data: FormCollectionData;
+	errors?: Record<string, Array<string>>;
+	disableInputs?: boolean;
+	submitBtnDanger?: boolean;
+
+	setData: (name: string, value: any) => void;
+	handleSubmit: () => void;
+}
+
+export default function MantineFormCollection({
+	title,
+	canSubmit,
+	disableHomeLink,
+	data,
+	errors,
+	disableInputs = false,
+	submitBtnDanger = false,
+
+	setData,
+	handleSubmit,
+}: FormCollectionProps) {
+	const { t } = useTranslation('common');
+
+	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		handleSubmit();
+	};
+
+	return (
+		<MantineFormLayout
+			title={title}
+			handleSubmit={onSubmit}
+			canSubmit={canSubmit}
+			disableHomeLink={disableHomeLink}
+			submitBtnDanger={submitBtnDanger}
+		>
+			<BackToDashboard>
+				<TextInput
+					label={t('form.name')}
+					placeholder={t('form.name')}
+					onChange={({ target }) => setData('name', target.value)}
+					value={data.name}
+					disabled={disableInputs}
+					error={errors?.name}
+					mt="md"
+					autoFocus
+					required
+				/>
+				<TextInput
+					label={t('form.description')}
+					placeholder={t('form.description')}
+					onChange={({ target }) => setData('description', target.value)}
+					value={data.description ?? undefined}
+					disabled={disableInputs}
+					error={errors?.description}
+					mt="md"
+				/>
+				<Box mt="md">
+					<Text size="sm" fw={500} mb={3}>
+						{t('form.visibility')}
+					</Text>
+					<Group wrap="nowrap">
+						<SegmentedControl
+							data={[
+								{ label: t('visibility.private'), value: Visibility.PRIVATE },
+								{ label: t('visibility.public'), value: Visibility.PUBLIC },
+							]}
+							onChange={(value) => setData('visibility', value as Visibility)}
+							value={data.visibility}
+							style={{ minWidth: 'fit-content' }}
+						/>
+						{data.visibility === Visibility.PUBLIC && (
+							<Text c="dimmed" size="sm">
+								{t('form.visibility-warning')}
+							</Text>
+						)}
+					</Group>
+				</Box>
+			</BackToDashboard>
+		</MantineFormLayout>
+	);
+}

inertia/mantine/layouts/mantine_form_layout.tsx

@@ -0,0 +1,103 @@
+import { Head, Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Button, Container, Group, rem, Title } from '@mantine/core';
+import { FormEvent, PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MantineFooter } from '~/components/footer/mantine_footer';
+import i18n from '~/i18n';
+import { appendCollectionId } from '~/lib/navigation';
+import BaseLayout from '~/mantine/layouts/_mantine_base_layout';
+
+interface FormLayoutProps extends PropsWithChildren {
+	title: string;
+
+	canSubmit: boolean;
+	handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	textSubmitButton?: string;
+
+	disableHomeLink?: boolean;
+	submitBtnDanger?: boolean;
+	collectionId?: number;
+}
+
+function MantineFormLayout({
+	title,
+	children,
+
+	canSubmit,
+	handleSubmit,
+	textSubmitButton = i18n.t('common:form.create'),
+
+	disableHomeLink = false,
+	submitBtnDanger = false,
+	collectionId,
+}: FormLayoutProps) {
+	const { t } = useTranslation('common');
+	return (
+		<Container
+			style={{
+				minHeight: '100%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			pt={80}
+		>
+			<main
+				style={{
+					display: 'flex',
+					flex: 1,
+					alignItems: 'center',
+					flexDirection: 'column',
+				}}
+			>
+				<Head title={title} />
+				<form
+					onSubmit={handleSubmit}
+					style={{
+						maxWidth: '100%',
+						width: rem(600),
+					}}
+				>
+					<Title order={1} size="h2">
+						{title}
+					</Title>
+					{children}
+
+					<Group
+						justify={disableHomeLink ? 'flex-end' : 'space-between'}
+						align="center"
+						mt="md"
+					>
+						{!disableHomeLink && (
+							<Anchor
+								component={Link}
+								href={appendCollectionId(route('dashboard').url, collectionId)}
+								disabled={disableHomeLink}
+							>
+								{t('back-home')}
+							</Anchor>
+						)}
+						<Button
+							type="submit"
+							variant="filled"
+							disabled={!canSubmit}
+							color={submitBtnDanger ? 'red' : 'blue'}
+							style={{ transition: 'background-color 0.15s' }}
+						>
+							{textSubmitButton}
+						</Button>
+					</Group>
+					<MantineFooter />
+				</form>
+			</main>
+		</Container>
+	);
+}
+
+const LayoutWrapper = (props: FormLayoutProps) => (
+	<BaseLayout>
+		<MantineFormLayout {...props} />
+	</BaseLayout>
+);
+
+export { LayoutWrapper as MantineFormLayout };