127 lines
4.0 KiB
React
127 lines
4.0 KiB
React
|
import React, { useEffect, useState } from "react";
|
||
|
|
import { getSession } from "../../../../Services/Others";
|
||
|
|
import { useDispatch } from "react-redux";
|
||
|
|
import { getmultipleSearch, PostProductSearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
|
||
|
|
import Buttons from "../../../../Components/Forms/Buttons";
|
||
|
|
|
||
|
|
|
||
|
|
const MultipleSearch = ({ close }) => {
|
||
|
|
const CompId = getSession("CompId");
|
||
|
|
const BranchId = getSession("BranchId");
|
||
|
|
const AppId = getSession("AppId");
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
|
||
|
|
const options = [
|
||
|
|
{ label: "Product Name", value: "ProdName" },
|
||
|
|
{ label: "Product Variant Name", value: "ProdVariantName" },
|
||
|
|
// { label: "Product ID", value: "ProdId" },
|
||
|
|
{ label: "One Piece QR", value: "OnePcQR" },
|
||
|
|
{ label: "QR Code", value: "QrCode" },
|
||
|
|
{ label: "Product Name Code", value: "ProdNameCode" },
|
||
|
|
{ label: "Category Name", value: "CategoryName" },
|
||
|
|
{ label: "Sub Category Name", value: "SubCategoryName" },
|
||
|
|
{ label: "Brand Name", value: "BrandName" },
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
const [selectedValues, setSelectedValues] = useState([]);
|
||
|
|
console.log(selectedValues, 'selectedValuesselectedValues');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
GetmultipleSearchData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
|
||
|
|
const postMultipleSearch = async () => {
|
||
|
|
if (selectedValues.length === 0) {
|
||
|
|
alert("Please select at least one option!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const data = {
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
SearchTerms: selectedValues,
|
||
|
|
};
|
||
|
|
try {
|
||
|
|
const response = await dispatch(PostProductSearch(data)).unwrap();
|
||
|
|
console.log("Search Response:", response);
|
||
|
|
if (response?.data?.statusCode == 1) {
|
||
|
|
setSelectedValues('')
|
||
|
|
close(false);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Search Error:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const GetmultipleSearchData = async () => {
|
||
|
|
const data = {
|
||
|
|
AppId,
|
||
|
|
CompId,
|
||
|
|
BranchId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await dispatch(getmultipleSearch(data)).unwrap();
|
||
|
|
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
const selected = response?.data?.data?.[0]?.SearchTermDtl?.map(
|
||
|
|
(item) => item?.SearchTerm
|
||
|
|
) || [];
|
||
|
|
|
||
|
|
setSelectedValues(selected);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Get Search Terms Error:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
{options.map((item) => (
|
||
|
|
<label
|
||
|
|
key={item.value}
|
||
|
|
style={{
|
||
|
|
display: "block",
|
||
|
|
marginBottom: "6px",
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "14px",
|
||
|
|
color: "#333",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={selectedValues.includes(item.value)}
|
||
|
|
onChange={() => {
|
||
|
|
setSelectedValues((prev) =>
|
||
|
|
prev.includes(item.value)
|
||
|
|
? prev.filter((i) => i !== item.value)
|
||
|
|
: [...prev, item.value]
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
style={{ marginRight: "8px" }}
|
||
|
|
/>
|
||
|
|
{item.label}
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Buttons
|
||
|
|
buttonText={'Submit'}
|
||
|
|
handleSubmit={postMultipleSearch}
|
||
|
|
color="901D77"
|
||
|
|
// icon={<PlusOutlined />}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MultipleSearch;
|