148 lines
4.2 KiB
TypeScript
148 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import * as React from 'react';
|
|
import { useForm, useFieldArray, useWatch, Control } from 'react-hook-form';
|
|
import { fetcher } from '@/app/api/tools';
|
|
import useSWR from 'swr';
|
|
|
|
type FormValues = {
|
|
data: {
|
|
item: string;
|
|
additional_info: string;
|
|
finished: boolean;
|
|
}[];
|
|
};
|
|
|
|
export default function App() {
|
|
const { data, error, isLoading } = useSWR('/api/meals', fetcher);
|
|
|
|
const { id } = useParams();
|
|
const router = useRouter();
|
|
const {
|
|
register,
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormValues>({
|
|
defaultValues: {
|
|
data: [{ item: '', additional_info: '', finished: false }],
|
|
},
|
|
mode: 'onBlur',
|
|
});
|
|
const { fields, append, remove } = useFieldArray({
|
|
name: 'data',
|
|
control,
|
|
});
|
|
const onSubmit = (data: FormValues) => {
|
|
console.log(data);
|
|
fetch('/api/orders', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ waiter: id, ...data }),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(({ status }) => console.log(status))
|
|
.then((_) => router.push(`/waiter/${id}`));
|
|
};
|
|
|
|
if (error) return <div>Błąd przy ładowaniu danych</div>;
|
|
if (isLoading) return <div>Ładowanie</div>;
|
|
|
|
return (
|
|
<>
|
|
<form
|
|
id="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col max-w-screen-md w-full my-4"
|
|
>
|
|
<p className="text-2xl text-center">Nowe zamówienie</p>
|
|
{fields.map((field, index) => {
|
|
return (
|
|
<div
|
|
key={field.id}
|
|
className="border-2 m-2 p-2 gap-4 flex flex-col items-stretch justify-around content-center"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="hidden"
|
|
{...register(`data.${index}.finished` as const, {
|
|
required: false,
|
|
})}
|
|
/>
|
|
<p className="basis-1/3">
|
|
<label htmlFor={`data.${index}.item`}>Danie</label>
|
|
<select
|
|
{...register(`data.${index}.item` as const, {
|
|
required: true,
|
|
})}
|
|
className={errors?.data?.[index]?.item ? 'error' : ''}
|
|
>
|
|
<option value="Inne">Inne</option>
|
|
{data?.map((data: { id: number; name: string }) => (
|
|
<option key={data.name} value={data.name}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</p>
|
|
<p className="basis-1/3">
|
|
<label htmlFor={`data.${index}.additional_info`}>
|
|
Dodatkowe informacje
|
|
</label>
|
|
<textarea
|
|
placeholder="Dodatkowe informacje"
|
|
{...register(`data.${index}.additional_info` as const, {
|
|
required: false,
|
|
})}
|
|
className={
|
|
errors?.data?.[index]?.additional_info ? 'error' : ''
|
|
}
|
|
/>
|
|
</p>
|
|
{fields.length > 1 ? (
|
|
<p className="basis-1/3 flex items-center justify-center">
|
|
<button type="button" onClick={() => remove(index)}>
|
|
Usuń
|
|
</button>
|
|
</p>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
type="button"
|
|
className="mx-auto"
|
|
onClick={() =>
|
|
append({
|
|
item: '',
|
|
additional_info: '',
|
|
finished: false,
|
|
})
|
|
}
|
|
>
|
|
Dodaj kolejne danie
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className={
|
|
'mt-10 mx-auto p-2 border-2 text-black hover:text-black ' +
|
|
(!!errors.data
|
|
? 'bg-red-300 border-red-500'
|
|
: 'bg-green-300 border-green-500')
|
|
}
|
|
disabled={!!errors.data}
|
|
>
|
|
Złóż zamówienie
|
|
</button>
|
|
</form>
|
|
<Link href={`/waiter/${id}`} className='mt-10'><button>Powrót</button></Link>
|
|
</>
|
|
);
|
|
}
|