124 lines
4.6 KiB
TypeScript
124 lines
4.6 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import product from '@/routes/product';
|
|
import { BreadcrumbItem } from '@/types';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import { useState } from 'react';
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Add Product',
|
|
href: product.add().url,
|
|
},
|
|
];
|
|
|
|
export default function Add() {
|
|
const [values, setValues] = useState({
|
|
name: '',
|
|
url: '',
|
|
display_status: '',
|
|
});
|
|
function handleChange(e: { target: { id: any; value: any } }) {
|
|
const key = e.target.id;
|
|
const value = e.target.value;
|
|
setValues((values) => ({
|
|
...values,
|
|
[key]: value,
|
|
}));
|
|
}
|
|
|
|
function handleSubmit(e: { preventDefault: () => void }) {
|
|
e.preventDefault();
|
|
router.post(product.store().url, values);
|
|
}
|
|
return (
|
|
<>
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Add Product" />
|
|
<div className="flex flex-col gap-4 px-8 py-8">
|
|
<h1 className="font-bold">Add Products</h1>
|
|
<form
|
|
className="flex flex-col gap-2"
|
|
method="POST"
|
|
action={product.store().url}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div>
|
|
<Label htmlFor="name">
|
|
Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
className="w-full"
|
|
name="name"
|
|
id="name"
|
|
value={values.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="url">
|
|
URL <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
className="w-full"
|
|
name="url"
|
|
id="url"
|
|
value={values.url}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Display State</Label>
|
|
<Select
|
|
defaultValue={values.display_status}
|
|
onValueChange={(val) =>
|
|
setValues((v) => ({
|
|
...v,
|
|
display_status: val,
|
|
}))
|
|
}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select Display State" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="draft">Draft</SelectItem>
|
|
<SelectItem value="active">
|
|
Active
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button type="submit" className="cursor-pointer">
|
|
Submit
|
|
</Button>
|
|
<Link href={product.index()}>
|
|
<Button
|
|
type="button"
|
|
className="cursor-pointer"
|
|
variant={'secondary'}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</AppLayout>
|
|
</>
|
|
);
|
|
}
|