added tons of features

2025-02-05 08:01:14 +02:00
parent 4ae0d8c545
commit 8138da6b1d
195 changed files with 12619 additions and 415 deletions
--- a/components/(protected)/admin/product/create-form.tsx.back
+++ b/components/(protected)/admin/product/create-form.tsx.back
@@ -0,0 +1,169 @@
+'use client'
+
+import {zodResolver} from '@hookform/resolvers/zod'
+import fs from 'node:fs'
+import path from 'node:path'
+import {useCallback, useState} from 'react'
+import Dropzone from 'react-dropzone'
+import {useFieldArray, useForm} from 'react-hook-form'
+import {z} from 'zod'
+
+import {onProductCreateAction} from '@/actions/admin/product'
+import {createCategoryFormSchema} from '@/lib/schemas/admin/category'
+import {createProductFormSchema} from '@/lib/schemas/admin/product'
+import {cn, dump} from '@/lib/utils'
+import {ResourceMessages} from '@/types'
+import {Button} from '@/ui/button'
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage
+} from '@/ui/form'
+import {Input} from '@/ui/input'
+
+export default function CreateForm() {
+	const [loading, setLoading] = useState(false)
+	const [error, setError] = useState('')
+	const [success, setSuccess] = useState('')
+
+	const form = useForm<z.infer<typeof createProductFormSchema>>({
+		resolver: zodResolver(createProductFormSchema),
+		mode: 'onBlur',
+		defaultValues: {
+			files: []
+		}
+	})
+
+	const {fields, append} = useFieldArray({
+		name: 'files',
+		control: form.control
+	})
+
+	console.log(form.formState.errors)
+
+	const onSubmit = async (values: z.infer<typeof createProductFormSchema>) => {
+		setLoading(true)
+		onProductCreateAction(values).then((res: any) => {
+			if (res?.error) {
+				setError(res?.error)
+				setSuccess('')
+				setLoading(false)
+			} else {
+				setSuccess(res?.success as string)
+				setError('')
+				setLoading(false)
+			}
+		})
+	}
+
+	return (
+		<div className='flex h-screen items-center justify-center'>
+			<Form {...form}>
+				<form
+					action=''
+					onSubmit={form.handleSubmit(onSubmit)}
+					className='max-w-md flex-1 space-y-5'
+				>
+					<div className='products_name_price_desc relative'>
+						{fields.map((_, index) => {
+							return (
+								<div key={index}>
+									<div className='mb-2 mt-7 text-xl font-bold'>
+										{/*{form.getValues(`files.${index}.file.name`)}*/}
+										{dump(form.getValues(`files.${index}`))}
+									</div>
+									<div className='flex gap-x-3'>
+										<FormField
+											control={form.control}
+											key={index}
+											name={`files.${index}.alt`}
+											render={({field}) => (
+												<FormItem>
+													<FormLabel>Файл Альт Ім'я</FormLabel>
+													<FormControl>
+														<Input {...field} />
+													</FormControl>
+													<FormMessage className='capitalize text-red-500' />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											key={index + 1}
+											name={`files.${index}.title`}
+											render={({field}) => (
+												<FormItem>
+													<FormLabel>Назва файлу</FormLabel>
+													<FormControl>
+														<Input {...field} />
+													</FormControl>
+													<FormMessage className='capitalize text-red-500' />
+												</FormItem>
+											)}
+										/>
+									</div>
+								</div>
+							)
+						})}
+					</div>
+					<div className='products relative'>
+						<FormField
+							control={form.control}
+							name='files'
+							render={() => (
+								<Dropzone
+									accept={{
+										'image/*': ['.jpg', '.jpeg', '.png']
+									}}
+									onDropAccepted={acceptedFiles => {
+										acceptedFiles.map(acceptedFile => {
+											console.log('acceptedFile', acceptedFile)
+
+											return append({
+												file: acceptedFile,
+												alt: '',
+												title: ''
+											})
+										})
+									}}
+									multiple={true}
+									maxSize={5000000}
+								>
+									{({getRootProps, getInputProps}) => (
+										<section>
+											<div {...getRootProps()}>
+												<input {...getInputProps()} />
+												<p>
+													Перетягніть тут, киньте кілька файлів або натисніть,
+													щоб вибрати файли
+												</p>
+											</div>
+										</section>
+									)}
+								</Dropzone>
+							)}
+						/>
+					</div>
+					<Button type='submit' className='!mt-0 w-full'>
+						Створити
+					</Button>
+				</form>
+			</Form>
+		</div>
+	)
+
+	// return (
+	// 	<div className='flex flex-col bg-zinc-200 py-10'>
+	// 		<h1 className='text-center text-3xl font-bold capitalize'>
+	// 			Створити галерею
+	// 		</h1>
+	// 		<div className='mx-auto mb-10 mt-6 flex min-h-[320px] w-[80%] flex-wrap gap-1 rounded-md bg-white p-5 shadow-sm'></div>
+	// 		<div className='flex justify-center'>
+	// 			<Button>Завантажити зображення</Button>
+	// 		</div>
+	// 	</div>
+	// )
+}