karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Purchase Order Deliver Address added new Form

This commit is contained in:
Srinath 2026-01-29 14:43:47 +05:30
parent ffeb7fed51
commit d01da1bfc6
1 changed files with 316 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

418
src/Pages/PurchaseOrder/PurchaseOrder.jsx
View File

@ -51,6 +51,7 @@ import { getPrintSelectionComponentData } from '../../Features/ThemeChange/Theme
import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js'; import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js';
import { PurchaseOrderMobilePrint } from './PurchsasePrintStyle/PurchaseOrderMobilePrint.js'; import { PurchaseOrderMobilePrint } from './PurchsasePrintStyle/PurchaseOrderMobilePrint.js';
import { isMobile } from 'react-device-detect'; import { isMobile } from 'react-device-detect';
import { CiEdit } from 'react-icons/ci';
const subDirectory = import.meta.env.BASE_URL; const subDirectory = import.meta.env.BASE_URL;
const stylesMap = { const stylesMap = {
@ -79,6 +80,7 @@ const PurchaseOrder = () => {
const location = useLocation(); const location = useLocation();
const formProductRef = useRef(null); const formProductRef = useRef(null);
const formSupplierRef = useRef(null); const formSupplierRef = useRef(null);
const deliveryAddressRef = useRef(null);
const dispatch = useDispatch(); const dispatch = useDispatch();
const CompId = getSession('CompId'); const CompId = getSession('CompId');
const BranchId = getSession('BranchId'); const BranchId = getSession('BranchId');
@ -107,6 +109,8 @@ const PurchaseOrder = () => {
const [submittedOrderData, setSubmittedOrderData] = useState(null); const [submittedOrderData, setSubmittedOrderData] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isLowStockModel, setisLowStockModel] = useState(false); const [isLowStockModel, setisLowStockModel] = useState(false);
const [addressModel, setAddressModel] = useState(false);
const [deliveryAddress, setDeliveryAddress] = useState('');
const [searchedText, setSearchedText] = useState(''); const [searchedText, setSearchedText] = useState('');
const [iSEmail, setiSEmail] = useState(false); const [iSEmail, setiSEmail] = useState(false);
const [enteredEmail, setEnteredEmail] = useState(''); const [enteredEmail, setEnteredEmail] = useState('');
@ -219,6 +223,7 @@ const PurchaseOrder = () => {
console.error('Error fetching stock details:', err); console.error('Error fetching stock details:', err);
} }
}; };
console.log('hi');
const debouncedFetchStock = useMemo(() => debounce(ProductStockFun, 600), []); const debouncedFetchStock = useMemo(() => debounce(ProductStockFun, 600), []);
const handleMinQtyChange = (e) => { const handleMinQtyChange = (e) => {
@ -965,7 +970,7 @@ const PurchaseOrder = () => {
PostData['LocationType'] = Supplierdata?.find( PostData['LocationType'] = Supplierdata?.find(
(find) => find.SuppId === selecPurSupplier (find) => find.SuppId === selecPurSupplier
)?.Type; )?.Type;
PostData['DeliveryAddressDetails'] = deliveryAddress;
let PostPurOrder = await dispatch(postPurcOrderData(PostData)).unwrap(); let PostPurOrder = await dispatch(postPurcOrderData(PostData)).unwrap();
if (PostPurOrder?.data?.statusCode === 1) { if (PostPurOrder?.data?.statusCode === 1) {
setMessage({ type: 'success', data: PostPurOrder?.data?.response }); setMessage({ type: 'success', data: PostPurOrder?.data?.response });
@ -989,6 +994,8 @@ const PurchaseOrder = () => {
// Reset form fields // Reset form fields
formProductRef?.current?.resetFields(); formProductRef?.current?.resetFields();
formRef?.current?.resetFields(); formRef?.current?.resetFields();
deliveryAddressRef?.current?.resetFields();
setDeliveryAddress('');
setselecPurSupplier(null); setselecPurSupplier(null);
getProductDatas(null); getProductDatas(null);
setselecSuppDetails(null); setselecSuppDetails(null);
@ -1030,6 +1037,11 @@ const PurchaseOrder = () => {
Dist: response[0]['PostOffice'][0]['District'], Dist: response[0]['PostOffice'][0]['District'],
State: response[0]['PostOffice'][0]['State'], State: response[0]['PostOffice'][0]['State'],
}); });
deliveryAddressRef.current?.setFieldsValue({
City: response[0]['PostOffice'][0]['Block'],
Dist: response[0]['PostOffice'][0]['District'],
State: response[0]['PostOffice'][0]['State'],
});
} else { } else {
setZipCodeData(false); setZipCodeData(false);
} }
@ -1250,6 +1262,29 @@ const PurchaseOrder = () => {
} }
}; };
const handleAddressSubmit = async () => {
try {
const values = await deliveryAddressRef.current?.validateFields();
const formattedAddress = {
Address1: values.Address1,
Address2: values.Address2,
Zip: Number(values.Zip),
City: values.City,
Dist: values.Dist,
State: values.State,
Latitude: values.Latitude ?? 0,
Longitude: values.Longitude ?? 0,
CreatedBy: UserId
};
setDeliveryAddress(formattedAddress);
setAddressModel(false);
} catch (err) {
console.log('Validation error:', err);
}
};
return ( return (
<div className="pageOverAll"> <div className="pageOverAll">
<div className="userPage"> <div className="userPage">
@ -1344,6 +1379,84 @@ const PurchaseOrder = () => {
<PlusCircleOutlined onClick={addPurSupplier} /> <PlusCircleOutlined onClick={addPurSupplier} />
</Tooltip> </Tooltip>
</Form.Item> </Form.Item>
<div className='deliveryaddress'>
{selecSuppDetails !== null &&
(() => {
const fields = [];
if (selecSuppDetails?.SuppName) {
fields.push(
<p>
<strong>Name:</strong> {selecSuppDetails.SuppName}
</p>
);
}
if (selecSuppDetails?.Address1) {
fields.push(
<p>
<strong>Address:</strong>{' '}
{selecSuppDetails.Address1}
</p>
);
}
if (selecSuppDetails?.SuppMobile) {
fields.push(
<p>
<strong>Mobile Number:</strong>{' '}
{selecSuppDetails.SuppMobile}
</p>
);
}
if (selecSuppDetails?.DiscountLevel) {
fields.push(
<p>
<strong>Discount Level:</strong>{' '}
{selecSuppDetails.DiscountLevel}
</p>
);
}
if (selecSuppDetails?.QualityofSupp) {
fields.push(
<p>
<strong>Quality of Supplier:</strong>{' '}
{selecSuppDetails.QualityofSupp}
</p>
);
}
if (selecSuppDetails?.OtherInfo) {
fields.push(
<p>
<strong>Other Info:</strong>{' '}
{selecSuppDetails.OtherInfo}
</p>
);
}
const firstColumn = fields.slice(0, 3);
const secondColumn = fields.slice(3);
return (
<div
style={{
display: 'flex',
columnGap: '2rem',
flexWrap: 'wrap',
}}
>
<div>
<h3>{`${selecSuppDetails?.Type} Details:`}</h3>
{firstColumn}
</div>
{secondColumn.length > 0 && (
<div>
<p>
<br />
</p>
{secondColumn}
</div>
)}
</div>
);
})()}
</div>
<div <div
className="lowStock-button" className="lowStock-button"
onClick={() => setisLowStockModel(true)} onClick={() => setisLowStockModel(true)}
@ -1351,82 +1464,33 @@ const PurchaseOrder = () => {
<IoWarningOutline size={18} /> <IoWarningOutline size={18} />
<span>Low Stock</span> <span>Low Stock</span>
</div> </div>
{console.log(selecSuppDetails, 'selecSuppDetails')} {!deliveryAddress && <div
{selecSuppDetails !== null && className="Address-button"
(() => { onClick={() => setAddressModel(true)}
const fields = []; >
if (selecSuppDetails?.SuppName) { <span>Delivery Address</span>
fields.push( </div>}
<p> {deliveryAddress && (
<strong>Name:</strong> {selecSuppDetails.SuppName} <div className="deliveryaddress">
</p> <strong className='deliveryaddress_edit' onClick={() => setAddressModel(true)}>Delivery Address Details: <CiEdit size={18} /></strong>
); {deliveryAddress?.Address1 && <p>
} <strong>Address:</strong>{' '}
if (selecSuppDetails?.Address1) { {deliveryAddress?.Address1}
fields.push( </p>}
<p> {deliveryAddress?.City && <p>
<strong>Address:</strong>{' '} <strong>City:</strong> {deliveryAddress?.City}
{selecSuppDetails.Address1} </p>}
</p> {deliveryAddress?.Dist && <p>
); <strong>district:</strong> {deliveryAddress?.Dist}
} </p>}
if (selecSuppDetails?.SuppMobile) { {deliveryAddress?.State && <p>
fields.push( <strong>State:</strong> {deliveryAddress?.State}
<p> </p>}
<strong>Mobile Number:</strong>{' '} {deliveryAddress?.Zip && <p>
{selecSuppDetails.SuppMobile} <strong>Zip:</strong> {deliveryAddress?.Zip}
</p> </p>}
); </div>
} )}
if (selecSuppDetails?.DiscountLevel) {
fields.push(
<p>
<strong>Discount Level:</strong>{' '}
{selecSuppDetails.DiscountLevel}
</p>
);
}
if (selecSuppDetails?.QualityofSupp) {
fields.push(
<p>
<strong>Quality of Supplier:</strong>{' '}
{selecSuppDetails.QualityofSupp}
</p>
);
}
if (selecSuppDetails?.OtherInfo) {
fields.push(
<p>
<strong>Other Info:</strong>{' '}
{selecSuppDetails.OtherInfo}
</p>
);
}
const firstColumn = fields.slice(0, 3);
const secondColumn = fields.slice(3);
return (
<div
style={{
display: 'flex',
columnGap: '2rem',
flexWrap: 'wrap',
}}
>
<div>
<h3>{`${selecSuppDetails?.Type} Details:`}</h3>
{firstColumn}
</div>
{secondColumn.length > 0 && (
<div>
<p>
<br />
</p>
{secondColumn}
</div>
)}
</div>
);
})()}
</div> </div>
{(() => { {(() => {
@ -1457,12 +1521,12 @@ const PurchaseOrder = () => {
<div className="inputForm" style={{ marginTop: '2rem' }}> <div className="inputForm" style={{ marginTop: '2rem' }}>
<Form.Item <Form.Item
name="ProdId" name="ProdId"
// rules={[ // rules={[
// { // {
// required: true, // required: true,
// message: "Please Select Product Name", // message: "Please Select Product Name",
// }, // },
// ]} // ]}
> >
{/* <DropDowns {/* <DropDowns
// options={PurProductdata?.map((option) => ({ // options={PurProductdata?.map((option) => ({
@ -1527,9 +1591,9 @@ const PurchaseOrder = () => {
options={ options={
!scanner !scanner
? PurProductdata?.map((option) => ({ ? PurProductdata?.map((option) => ({
value: option.ProdId, value: option.ProdId,
label: `${option.ProdName} (${option.Size} ${option.UomName})${option?.BrandName ? ` - ${option?.BrandName}` : ''}`, label: `${option.ProdName} (${option.Size} ${option.UomName})${option?.BrandName ? ` - ${option?.BrandName}` : ''}`,
})) }))
: [] : []
} }
onSelect={PurcProductDropDownChange} onSelect={PurcProductDropDownChange}
@ -1605,7 +1669,7 @@ const PurchaseOrder = () => {
ProductVariantDropDownChange(e) ProductVariantDropDownChange(e)
} }
valueData={SelProductVariant} valueData={SelProductVariant}
// disabled={Edit ? true : false} // disabled={Edit ? true : false}
/> />
</Form.Item> </Form.Item>
)} )}
@ -1643,10 +1707,10 @@ const PurchaseOrder = () => {
} }
inputMode="numeric" inputMode="numeric"
onInput={(e) => onInput={(e) =>
(e.target.value = e.target.value.replace( (e.target.value = e.target.value.replace(
/[^0-9]/g, /[^0-9]/g,
'' ''
)) ))
} }
/> />
</Form.Item> </Form.Item>
@ -1829,7 +1893,7 @@ const PurchaseOrder = () => {
autoComplete="off" autoComplete="off"
label="GST No" label="GST No"
autocapitalize="on" autocapitalize="on"
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
/> />
</Form.Item> </Form.Item>
@ -1851,10 +1915,10 @@ const PurchaseOrder = () => {
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
inputMode="numeric" inputMode="numeric"
onInput={(e) => onInput={(e) =>
(e.target.value = e.target.value.replace( (e.target.value = e.target.value.replace(
/[^0-9]/g, /[^0-9]/g,
'' ''
)) ))
} }
/> />
</Form.Item> </Form.Item>
@ -1866,7 +1930,7 @@ const PurchaseOrder = () => {
<InputField <InputField
label={<label>MailId</label>} label={<label>MailId</label>}
autocomplete="off" autocomplete="off"
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
/> />
</Form.Item> </Form.Item>
@ -1893,7 +1957,7 @@ const PurchaseOrder = () => {
<InputField <InputField
label={<label class="">Point of Contact</label>} label={<label class="">Point of Contact</label>}
autocomplete="off" autocomplete="off"
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
/> />
</Form.Item> </Form.Item>
@ -1915,7 +1979,7 @@ const PurchaseOrder = () => {
label={<label class="">POC Mobile Number</label>} label={<label class="">POC Mobile Number</label>}
autocomplete="off" autocomplete="off"
maxLength="10" maxLength="10"
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
/> />
</Form.Item> </Form.Item>
@ -1926,7 +1990,7 @@ const PurchaseOrder = () => {
<InputField <InputField
label={<label class="">POC MailId</label>} label={<label class="">POC MailId</label>}
autocomplete="off" autocomplete="off"
// isOnChange={formType == 'edit' ? true : false} // isOnChange={formType == 'edit' ? true : false}
/> />
</Form.Item> </Form.Item>
@ -2276,9 +2340,159 @@ const PurchaseOrder = () => {
</div> </div>
} }
/> />
{/* Address model */}
<DefaultModal
width={600}
open={addressModel}
title="Delivery Address"
handleSubmit={handleAddressSubmit}
buttonText="Submit"
handleCancel={() => setAddressModel(false)}
footer={true}
children={
<div>
<Form ref={deliveryAddressRef} className="formDivAnt">
<div className="subRowFlex">
<Form.Item
name="Address1"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Address1',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label={<label class="required">Address</label>}
/>
</Form.Item>
<Form.Item
name="Address2"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Address2',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label={<label class="required">Address</label>}
/>
</Form.Item>
<Form.Item
name="Zip"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Zipcode',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label={<label class="required">Zipcode</label>}
maxLength="6"
onChange={pinCodeChange}
/>
</Form.Item>
{zipCodeData ? (
<>
<Form.Item
name="City"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="City"
/>
</Form.Item>
<Form.Item
name="Dist"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="District"
/>
</Form.Item>
<Form.Item
name="State"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="State"
/>
</Form.Item>
</>
) : (
''
)}
</div>
</Form>
</div>
}
/>
</div> </div>
</div> </div >
</div> </div >
); );
}; };