From 6d568b133f0299f57f547c304b051f72dbe4b7e7 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Fri, 1 Nov 2024 18:50:24 +0100
Subject: [PATCH] feat: use new form layout for collection/delete

---
 app/controllers/collections_controller.ts     |  2 +-
 .../form/mantine_form_collection.tsx          | 30 +++++--------
 .../mantine/layouts/mantine_form_layout.tsx   |  4 +-
 inertia/pages/mantine/collections/create.tsx  |  1 +
 inertia/pages/mantine/collections/delete.tsx  | 42 +++++++++++++++++++
 inertia/pages/mantine/collections/edit.tsx    |  1 +
 6 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 inertia/pages/mantine/collections/delete.tsx

diff --git a/app/controllers/collections_controller.ts b/app/controllers/collections_controller.ts
index e0cc39a..dfe6705 100644
--- a/app/controllers/collections_controller.ts
+++ b/app/controllers/collections_controller.ts
@@ -96,7 +96,7 @@ export default class CollectionsController {
 			collectionId,
 			auth.user!.id
 		);
-		return inertia.render('collections/delete', {
+		return inertia.render('mantine/collections/delete', {
 			collection,
 		});
 	}
diff --git a/inertia/mantine/components/form/mantine_form_collection.tsx b/inertia/mantine/components/form/mantine_form_collection.tsx
index ee9a6d5..13a65e4 100644
--- a/inertia/mantine/components/form/mantine_form_collection.tsx
+++ b/inertia/mantine/components/form/mantine_form_collection.tsx
@@ -3,7 +3,10 @@ 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 {
+	FormLayoutProps,
+	MantineFormLayout,
+} from '~/mantine/layouts/mantine_form_layout';
 import { Collection } from '~/types/app';
 
 export type FormCollectionData = {
@@ -13,30 +16,22 @@ export type FormCollectionData = {
 	nextId?: Collection['id'];
 };
 
-interface FormCollectionProps {
-	title: string;
-	canSubmit: boolean;
-	disableHomeLink?: boolean;
+interface FormCollectionProps extends FormLayoutProps {
 	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,
+	...props
 }: FormCollectionProps) {
 	const { t } = useTranslation('common');
 
@@ -46,20 +41,14 @@ export default function MantineFormCollection({
 	};
 
 	return (
-		<MantineFormLayout
-			title={title}
-			handleSubmit={onSubmit}
-			canSubmit={canSubmit}
-			disableHomeLink={disableHomeLink}
-			submitBtnDanger={submitBtnDanger}
-		>
+		<MantineFormLayout handleSubmit={onSubmit} {...props}>
 			<BackToDashboard>
 				<TextInput
 					label={t('form.name')}
 					placeholder={t('form.name')}
 					onChange={({ target }) => setData('name', target.value)}
 					value={data.name}
-					disabled={disableInputs}
+					readOnly={disableInputs}
 					error={errors?.name}
 					mt="md"
 					autoFocus
@@ -70,7 +59,7 @@ export default function MantineFormCollection({
 					placeholder={t('form.description')}
 					onChange={({ target }) => setData('description', target.value)}
 					value={data.description ?? undefined}
-					disabled={disableInputs}
+					readOnly={disableInputs}
 					error={errors?.description}
 					mt="md"
 				/>
@@ -87,6 +76,7 @@ export default function MantineFormCollection({
 							onChange={(value) => setData('visibility', value as Visibility)}
 							value={data.visibility}
 							style={{ minWidth: 'fit-content' }}
+							readOnly={disableInputs}
 						/>
 						{data.visibility === Visibility.PUBLIC && (
 							<Text c="dimmed" size="sm">
diff --git a/inertia/mantine/layouts/mantine_form_layout.tsx b/inertia/mantine/layouts/mantine_form_layout.tsx
index ecc6f80..656aeb3 100644
--- a/inertia/mantine/layouts/mantine_form_layout.tsx
+++ b/inertia/mantine/layouts/mantine_form_layout.tsx
@@ -8,7 +8,7 @@ import i18n from '~/i18n';
 import { appendCollectionId } from '~/lib/navigation';
 import BaseLayout from '~/mantine/layouts/_mantine_base_layout';
 
-interface FormLayoutProps extends PropsWithChildren {
+export interface FormLayoutProps extends PropsWithChildren {
 	title: string;
 
 	canSubmit: boolean;
@@ -26,7 +26,7 @@ function MantineFormLayout({
 
 	canSubmit,
 	handleSubmit,
-	textSubmitButton = i18n.t('common:form.create'),
+	textSubmitButton = i18n.t('common:form.confirm'),
 
 	disableHomeLink = false,
 	submitBtnDanger = false,
diff --git a/inertia/pages/mantine/collections/create.tsx b/inertia/pages/mantine/collections/create.tsx
index dd0e6a5..77318fe 100644
--- a/inertia/pages/mantine/collections/create.tsx
+++ b/inertia/pages/mantine/collections/create.tsx
@@ -31,6 +31,7 @@ export default function CreateCollectionPage({
 	return (
 		<MantineFormCollection
 			title={t('collection.create')}
+			textSubmitButton={t('form.create')}
 			canSubmit={!isFormDisabled}
 			disableHomeLink={disableHomeLink}
 			data={data}
diff --git a/inertia/pages/mantine/collections/delete.tsx b/inertia/pages/mantine/collections/delete.tsx
new file mode 100644
index 0000000..3a375cf
--- /dev/null
+++ b/inertia/pages/mantine/collections/delete.tsx
@@ -0,0 +1,42 @@
+import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
+import MantineFormCollection, {
+	FormCollectionData,
+} from '~/mantine/components/form/mantine_form_collection';
+import { Collection } from '~/types/app';
+
+export default function DeleteCollectionPage({
+	collection,
+}: {
+	collection: Collection;
+}) {
+	const { t } = useTranslation('common');
+	const { data, setData, submit, processing, errors } =
+		useForm<FormCollectionData>({
+			name: collection.name,
+			description: collection.description,
+			visibility: collection.visibility,
+		});
+
+	const handleSubmit = () => {
+		const { method, url } = route('collection.delete', {
+			params: { id: collection.id.toString() },
+		});
+		submit(method, url);
+	};
+
+	return (
+		<MantineFormCollection
+			title={t('collection.delete')}
+			textSubmitButton={t('form.delete')}
+			canSubmit={!processing}
+			data={data}
+			setData={setData}
+			handleSubmit={handleSubmit}
+			errors={errors as any}
+			disableInputs
+			submitBtnDanger
+		/>
+	);
+}
diff --git a/inertia/pages/mantine/collections/edit.tsx b/inertia/pages/mantine/collections/edit.tsx
index 6c38a6b..46ccc25 100644
--- a/inertia/pages/mantine/collections/edit.tsx
+++ b/inertia/pages/mantine/collections/edit.tsx
@@ -39,6 +39,7 @@ export default function EditCollectionPage({
 	return (
 		<MantineFormCollection
 			title={t('collection.edit')}
+			textSubmitButton={t('form.update')}
 			canSubmit={canSubmit}
 			data={data}
 			setData={setData}