init
This commit is contained in:
Chief-spartan-117
123
resources/js/pages/dashboard/product/add.tsx
Normal file
123
resources/js/pages/dashboard/product/add.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
128
resources/js/pages/dashboard/product/edit.tsx
Normal file
128
resources/js/pages/dashboard/product/edit.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
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 Edit({
|
||||
products,
|
||||
}: {
|
||||
products: { id: number; name: string; url: string; display_status: string };
|
||||
}) {
|
||||
console.log(products);
|
||||
const [values, setValues] = useState({
|
||||
name: products.name,
|
||||
url: products.url,
|
||||
display_status: products.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();
|
||||
console.log(values);
|
||||
router.post(product.update(products.id).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">Update Products</h1>
|
||||
<form
|
||||
className="flex flex-col gap-2"
|
||||
method="POST"
|
||||
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">
|
||||
Update
|
||||
</Button>
|
||||
<Link href={product.index()}>
|
||||
<Button
|
||||
type="button"
|
||||
className="cursor-pointer"
|
||||
variant={'secondary'}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
84
resources/js/pages/dashboard/product/index.tsx
Normal file
84
resources/js/pages/dashboard/product/index.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import product from '@/routes/product';
|
||||
import { BreadcrumbItem } from '@/types';
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import { PackagePlus, Pencil, Trash2 } from 'lucide-react';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Products',
|
||||
href: product.index().url,
|
||||
},
|
||||
];
|
||||
|
||||
export default function index({
|
||||
products,
|
||||
}: {
|
||||
products: [{ id: number; name: string; display_status: string }];
|
||||
}) {
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Products" />
|
||||
|
||||
<div className="flex flex-col gap-8 px-12 py-8">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h1 className="font-bold">Products</h1>
|
||||
<Link href={product.add()}>
|
||||
<Button className="cursor-pointer">
|
||||
<PackagePlus /> Add Product
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<Table>
|
||||
{/* <TableCaption>A list of your recent invoices.</TableCaption> */}
|
||||
<TableHeader>
|
||||
<TableRow className="w-full">
|
||||
<TableHead className="!w-24">S.N.</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{products.map((prod, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">
|
||||
{index + 1}
|
||||
</TableCell>
|
||||
<TableCell>{prod.name}</TableCell>
|
||||
<TableCell>{prod.display_status}</TableCell>
|
||||
<TableCell className="flex items-end justify-end gap-1 text-right">
|
||||
<Button
|
||||
variant={'ghost'}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Pencil />
|
||||
</Button>
|
||||
<Button
|
||||
className="cursor-pointer bg-red-800 hover:bg-red-900"
|
||||
onClick={() => {
|
||||
router.delete(
|
||||
product.delete(prod.id).url,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user