"use client";
import * as z from "zod";
import { Heading } from "@/components/common/heading";
import { ShoppingBag } from "lucide-react";
import React, { useEffect, useState } from "react";
import { set, useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import MultiSelect from "@/components/common/react-select";
import Select from "react-select";
interface SizeOptionsI {
value: string;
label: string;
}
const sizeOptions = [
{ value: "S", label: "Small" },
{ value: "M", label: "Medium" },
{ value: "L", label: "Large" },
{ value: "XL", label: "Xtra Large" },
];
const categoryOptions = [
{ value: "Tshirt", label: "Tshirt" },
{ value: "Men collection", label: "Men collection" },
];
const isReturnOptions = [
{ value: false, label: "No" },
{ value: true, label: "Yes" },
];
const isCancelableOptions = [
{ value: false, label: "No" },
{ value: true, label: "Yes" },
];
export interface ProductI {
images: string[];
size: any;
title: string;
price: string;
originalPrice: string;
description: string;
category: string;
discount: string;
staus: boolean;
madeIn: string;
manufacturer: string;
isReturnable: boolean;
isCancelable: boolean;
}
const ProductPage = () => {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
let isMulti: any;
const [selectedOption, setSelectedOption] = useState<any>(null);
const [isReturnable, setIsReturnable] = useState<any>(false);
const [isCancelable, setIsCancelable] = useState<any>(false);
const [selectedCategoryOption, setSelectedCategoryOption] =
useState<any>(null);
const transFormSize: any = selectedOption?.map((el: any) => {
return el.value;
});
// const transFormCategory: any = selectedCategoryOption?.map((el: any) => {
// return el.value;
// });
console.log("isReturnable", isReturnable);
const defaultValue: ProductI = {
images: [],
size: transFormSize,
title: "",
price: "",
originalPrice: "",
description: "",
category: "",
discount: "0",
staus: true,
madeIn: "",
manufacturer: "",
isReturnable: false,
isCancelable: isCancelable,
};
const [formData, setFormData] = useState<any>(defaultValue);
const [finalPrice, setFinalPrice] = useState<any>("");
const isLoading = form.formState.isSubmitting;
const handleOnChange = (e: any) => {
const { name, value } = e.target;
setFormData((pre: ProductI) => ({
...pre,
[name]: value,
}));
};
const calculateFinalPrice = (mrp: any, percentage: any) => {
return (mrp * percentage) / 100;
};
const discountPrice = calculateFinalPrice(
formData.originalPrice,
formData.discount
);
const onSubmitHandle = (e: any) => {
e.preventDefault();
if (defaultValue?.size === undefined) {
return alert("Please select size");
}
if (defaultValue?.category === undefined) {
return alert("Please select category");
}
formData.size = transFormSize;
formData.category = selectedCategoryOption?.value;
formData.price = finalPrice;
formData.isReturnable = isReturnable.value;
formData.isCancelable = isCancelable.value;
console.log("formData", formData);
};
useEffect(() => {
if (formData.originalPrice) {
setFinalPrice(formData.originalPrice - discountPrice);
}
}, [discountPrice]);
return (
<div>
<Heading
title="Product"
description="Our most all product listed here"
icon={ShoppingBag}
iconColor="text-violet-500"
bgColor="bg-violet-500/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={onSubmitHandle}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-6 gap-2"
>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
name="title"
value={formData.title}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter product name"
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<div>
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Enter product description
</label>
<textarea
id="description"
rows={4}
name="description"
value={formData.description}
onChange={handleOnChange}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Product description here..."
defaultValue={""}
/>
</div>
{/* <Input
type="texarea"
name="description"
value={formData.description}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter product description"
/> */}
</FormControl>
</FormItem>
<FormControl className="m-0 p-0">
<Input
type="number"
name="originalPrice"
value={formData.originalPrice}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="M.R.P."
/>
</FormControl>
<FormControl className="m-0 p-0">
<Input
name="discount"
value={`${formData.discount}`}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Enter discount %"
/>
</FormControl>
<FormControl className="m-0 p-0">
<Input
name="price"
value={finalPrice || 0}
onChange={() =>
setFinalPrice(formData.originalPrice - discountPrice)
}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={true}
placeholder="Final price"
/>
</FormControl>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<MultiSelect
// instanceId="long-value-select"
sizeOptions={sizeOptions}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Select
defaultValue={selectedCategoryOption}
onChange={setSelectedCategoryOption}
options={categoryOptions}
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<Input
name="manufacturer"
value={formData.manufacturer}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter manufacturer name"
/>
</FormItem>
<label>Is Returnable</label>
<FormItem className="col-span-12 lg:col-span-10">
<Select
defaultValue={isReturnable}
onChange={setIsReturnable}
options={isReturnOptions}
/>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<label
htmlFor="cancel"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Is Cancellable
</label>
<Select
defaultValue={isCancelable}
onChange={setIsCancelable}
options={isCancelableOptions}
/>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
name="madeIn"
value={formData.madeIn}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Enter made in name"
/>
</FormControl>
</FormItem>
{/* <FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
name="manufacturer"
value={formData.manufacturer}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Enter manufacturer/brand name"
/>
</FormControl>
</FormItem> */}
<Button
className="col-span-3 lg:col-span-1 w-full"
disabled={isLoading}
>
Add Product
</Button>
<Button
onClick={() => setFormData(defaultValue)}
className="col-span-3 lg:col-span-1 w-full bg-red-500"
disabled={isLoading}
>
Reset
</Button>
</form>
</Form>
{/* <ProductAddForm /> */}
</div>
<div className="space-y-4 mt-4">Message conent</div>
</div>
</div>
);
};
export default ProductPage;
2
"use client";
import * as z from "zod";
import { Heading } from "@/components/common/heading";
import { ShoppingBag } from "lucide-react";
import React, { useEffect, useState } from "react";
import { set, useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import MultiSelect from "@/components/common/react-select";
import Select from "react-select";
import { addProductAPI } from "@/utils";
interface SizeOptionsI {
value: string;
label: string;
}
const sizeOptions = [
{ value: "S", label: "Small" },
{ value: "M", label: "Medium" },
{ value: "L", label: "Large" },
{ value: "XL", label: "Xtra Large" },
{ value: "XXL", label: "Xtra Xtra Large" },
];
const categoryOptions = [
{ value: "Tshirt", label: "Tshirt" },
{ value: "Men collection", label: "Men collection" },
];
const isReturnOptions = [
{ value: false, label: "No" },
{ value: true, label: "Yes" },
];
const isCancelableOptions = [
{ value: false, label: "No" },
{ value: true, label: "Yes" },
];
export interface ProductI {
images: string[];
size: any;
stock: any;
color: any;
title: string;
price: string;
originalPrice: string;
description: string;
category: string;
discount: string;
staus: boolean;
madeIn: string;
manufacturer: string;
isReturnable: boolean;
isCancelable: boolean;
}
const ProductPage = () => {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
const [selectedOption, setSelectedOption] = useState<any>(null);
const [isReturnable, setIsReturnable] = useState<any>(false);
const [isCancelable, setIsCancelable] = useState<any>(false);
const [img, setImg] = useState<any>([]);
const [colors, setColors] = useState<any>([]);
const [stocks, setStocks] = useState<any>([]);
const [selectedCategoryOption, setSelectedCategoryOption] =
useState<any>(null);
const transFormSize: any = selectedOption?.map((el: any) => {
return el.value;
});
// const transFormCategory: any = selectedCategoryOption?.map((el: any) => {
// return el.value;
// });
const defaultValue: ProductI = {
images: [],
size: transFormSize,
stock: [],
color: [],
title: "",
price: "",
originalPrice: "",
description: "",
category: "",
discount: "0",
staus: true,
madeIn: "",
manufacturer: "",
isReturnable: false,
isCancelable: isCancelable,
};
const [formData, setFormData] = useState<any>(defaultValue);
const [finalPrice, setFinalPrice] = useState<any>("");
const isLoading = form.formState.isSubmitting;
const handleOnChange = (e: any) => {
const { name, value } = e.target;
setFormData((pre: ProductI) => ({
...pre,
[name]: value,
}));
};
const calculateFinalPrice = (mrp: any, percentage: any) => {
return (mrp * percentage) / 100;
};
const discountPrice = calculateFinalPrice(
formData.originalPrice,
formData.discount
);
const handleOnChangeIMG = (e: any) => {
const imgString = e.target.value;
setImg(imgString ? imgString.split(" ") : []);
};
const handleOnChangeClr = (e: any) => {
const clrString = e.target.value;
setColors(clrString ? clrString.split(" ") : []);
};
const ss: any = [];
// const handleOnChangeStock = (e: any) => {
// const v = e.target.value;
// const stC = stocks.map((stock: any) => {
// console.log("ss: ", stock);
// if (stock === stock) {
// return stock;
// }
// });
// console.log("stC", stC);
// setStocks((pre: any) => [...pre, v]);
// };
const handleOnChangeStock = (e: any) => {
const v = e.target.value;
selectedOption.map((size: SizeOptionsI) => {
if (size.value === "S") {
return stocks.push(v);
}
if (size.value === "M") {
return stocks.push(v);
}
if (size.value === "L") {
return stocks.push(v);
}
});
};
console.log("handleOnChangeStock", stocks);
const onSubmitHandle = async (e: any) => {
e.preventDefault();
if (defaultValue?.size === undefined) {
return alert("Please select size");
}
if (defaultValue?.category === undefined) {
return alert("Please select category");
}
formData.size = transFormSize;
formData.category = selectedCategoryOption?.value;
formData.price = finalPrice;
formData.isReturnable = isReturnable.value;
formData.isCancelable = isCancelable.value;
formData.images = img;
formData.color = colors && colors;
// formData.stock = stocks;
console.log("formData", formData);
return;
const result = await addProductAPI(formData);
if (result) {
alert(result.message);
} else {
alert("something went wrong!");
}
// console.log("formData", formData);
};
useEffect(() => {
if (formData.originalPrice) {
setFinalPrice(formData.originalPrice - discountPrice);
}
}, [discountPrice]);
return (
<div>
<Heading
title="Add Product"
description="Add product here"
icon={ShoppingBag}
iconColor="text-violet-500"
bgColor="bg-violet-500/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={onSubmitHandle}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-6 gap-2"
>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
name="title"
value={formData.title}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter product name"
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<div>
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Enter product description
</label>
<textarea
id="description"
rows={4}
name="description"
value={formData.description}
onChange={handleOnChange}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Product description here..."
defaultValue={""}
/>
</div>
{/* <Input
type="texarea"
name="description"
value={formData.description}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter product description"
/> */}
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<div>
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Enter color by space: eg: white red blue
</label>
<textarea
id="clr"
rows={2}
name="color"
// value={formData.images}
onChange={handleOnChangeClr}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Color eg: white red blue"
defaultValue={""}
/>
</div>
</FormControl>
</FormItem>
<FormControl className="m-0 p-0">
<Input
type="number"
name="originalPrice"
value={formData.originalPrice}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="M.R.P."
maxLength={5}
/>
</FormControl>
<FormControl className="m-0 p-0">
<Input
name="discount"
value={`${formData.discount}`}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Enter discount %"
maxLength={2}
/>
</FormControl>
<FormControl className="m-0 p-0">
<Input
name="price"
value={finalPrice || 0}
onChange={() =>
setFinalPrice(formData.originalPrice - discountPrice)
}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={true}
placeholder="Final price"
/>
</FormControl>
<FormItem className="col-span-12 lg:col-span-10">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Select size
</label>
<FormControl className="m-0 p-0">
<MultiSelect
// instanceId="long-value-select"
sizeOptions={sizeOptions}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
/>
</FormControl>
</FormItem>
{/* stock */}
{selectedOption?.map((sizeOption: SizeOptionsI) => {
if (sizeOption.value === "S") {
return (
<FormControl className="m-0 p-0">
<Input
name="stock"
// value={formData.stock}
onChange={handleOnChangeStock}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Small stock eg: 1"
maxLength={2}
/>
</FormControl>
);
}
if (sizeOption.value === "M") {
return (
<FormControl className="m-0 p-0">
<Input
name="stock"
// value={formData.stock}
onChange={handleOnChangeStock}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Medium stock eg: 2"
maxLength={2}
/>
</FormControl>
);
}
if (sizeOption.value === "L") {
return (
<FormControl className="m-0 p-0">
<Input
name="stock"
// value={formData.stock}
onChange={handleOnChangeStock}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Large stock eg: 3"
maxLength={2}
/>
</FormControl>
);
}
if (sizeOption.value === "XL") {
return (
<FormControl className="m-0 p-0">
<Input
name="stock"
// value={formData.stock}
onChange={handleOnChangeStock}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Xtra Large stock eg: 4"
maxLength={2}
/>
</FormControl>
);
}
if (sizeOption.value === "XXL") {
return (
<FormControl className="m-0 p-0">
<Input
name="stock"
// value={formData.stock}
onChange={handleOnChangeStock}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Xtra Xtra Large stock eg: 5"
maxLength={2}
/>
</FormControl>
);
}
})}
<FormItem className="col-span-12 lg:col-span-10">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Select Category
</label>
<FormControl className="m-0 p-0">
<Select
defaultValue={selectedCategoryOption}
onChange={setSelectedCategoryOption}
options={categoryOptions}
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<Input
name="manufacturer"
value={formData.manufacturer}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="Enter manufacturer name"
/>
</FormItem>
<label>Is Returnable</label>
<FormItem className="col-span-12 lg:col-span-10">
<Select
defaultValue={isReturnable}
onChange={setIsReturnable}
options={isReturnOptions}
/>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<label
htmlFor="cancel"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Is Cancellable
</label>
<Select
defaultValue={isCancelable}
onChange={setIsCancelable}
options={isCancelableOptions}
/>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
name="madeIn"
value={formData.madeIn}
onChange={handleOnChange}
className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
placeholder="Enter made in name"
/>
</FormControl>
</FormItem>
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<div>
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Paste product image
</label>
<textarea
id="img"
rows={4}
name="images"
// value={formData.images}
onChange={handleOnChangeIMG}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Product description here..."
defaultValue={""}
/>
</div>
</FormControl>
</FormItem>
<Button
className="col-span-3 lg:col-span-1 w-full"
disabled={isLoading}
>
Add Product
</Button>
<Button
onClick={() => setFormData(defaultValue)}
className="col-span-3 lg:col-span-1 w-full bg-red-500"
disabled={isLoading}
>
Reset
</Button>
</form>
</Form>
{/* <ProductAddForm /> */}
</div>
<div className="space-y-4 mt-4">Message conent</div>
</div>
</div>
);
};
export default ProductPage;
3 apicall
export const addProductAPI = async (data: any) => {
const endPoint = "http://fashionneedles.in/api/product"
try {
const res = await fetch(endPoint, {
method: "POST",
mode: "cors",
cache: "no-cache",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data)
});
const result = await res.json();
console.log('utils', result);
return result;
} catch (err) {
console.log('error fetching products==>', err);
}
};
Top comments (0)