Purchase Order Deliver Address added new Form
This commit is contained in:
Srinath
parent
ffeb7fed51
commit
d01da1bfc6
|
|
@ -51,6 +51,7 @@ import { getPrintSelectionComponentData } from '../../Features/ThemeChange/Theme
|
|||
import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js';
|
||||
import { PurchaseOrderMobilePrint } from './PurchsasePrintStyle/PurchaseOrderMobilePrint.js';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { CiEdit } from 'react-icons/ci';
|
||||
|
||||
const subDirectory = import.meta.env.BASE_URL;
|
||||
const stylesMap = {
|
||||
|
|
@ -79,6 +80,7 @@ const PurchaseOrder = () => {
|
|||
const location = useLocation();
|
||||
const formProductRef = useRef(null);
|
||||
const formSupplierRef = useRef(null);
|
||||
const deliveryAddressRef = useRef(null);
|
||||
const dispatch = useDispatch();
|
||||
const CompId = getSession('CompId');
|
||||
const BranchId = getSession('BranchId');
|
||||
|
|
@ -107,6 +109,8 @@ const PurchaseOrder = () => {
|
|||
const [submittedOrderData, setSubmittedOrderData] = useState(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isLowStockModel, setisLowStockModel] = useState(false);
|
||||
const [addressModel, setAddressModel] = useState(false);
|
||||
const [deliveryAddress, setDeliveryAddress] = useState('');
|
||||
const [searchedText, setSearchedText] = useState('');
|
||||
const [iSEmail, setiSEmail] = useState(false);
|
||||
const [enteredEmail, setEnteredEmail] = useState('');
|
||||
|
|
@ -219,6 +223,7 @@ const PurchaseOrder = () => {
|
|||
console.error('Error fetching stock details:', err);
|
||||
}
|
||||
};
|
||||
console.log('hi');
|
||||
|
||||
const debouncedFetchStock = useMemo(() => debounce(ProductStockFun, 600), []);
|
||||
const handleMinQtyChange = (e) => {
|
||||
|
|
@ -965,7 +970,7 @@ const PurchaseOrder = () => {
|
|||
PostData['LocationType'] = Supplierdata?.find(
|
||||
(find) => find.SuppId === selecPurSupplier
|
||||
)?.Type;
|
||||
|
||||
PostData['DeliveryAddressDetails'] = deliveryAddress;
|
||||
let PostPurOrder = await dispatch(postPurcOrderData(PostData)).unwrap();
|
||||
if (PostPurOrder?.data?.statusCode === 1) {
|
||||
setMessage({ type: 'success', data: PostPurOrder?.data?.response });
|
||||
|
|
@ -989,6 +994,8 @@ const PurchaseOrder = () => {
|
|||
// Reset form fields
|
||||
formProductRef?.current?.resetFields();
|
||||
formRef?.current?.resetFields();
|
||||
deliveryAddressRef?.current?.resetFields();
|
||||
setDeliveryAddress('');
|
||||
setselecPurSupplier(null);
|
||||
getProductDatas(null);
|
||||
setselecSuppDetails(null);
|
||||
|
|
@ -1030,6 +1037,11 @@ const PurchaseOrder = () => {
|
|||
Dist: response[0]['PostOffice'][0]['District'],
|
||||
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 {
|
||||
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 (
|
||||
<div className="pageOverAll">
|
||||
<div className="userPage">
|
||||
|
|
@ -1344,6 +1379,84 @@ const PurchaseOrder = () => {
|
|||
<PlusCircleOutlined onClick={addPurSupplier} />
|
||||
</Tooltip>
|
||||
</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
|
||||
className="lowStock-button"
|
||||
onClick={() => setisLowStockModel(true)}
|
||||
|
|
@ -1351,82 +1464,33 @@ const PurchaseOrder = () => {
|
|||
<IoWarningOutline size={18} />
|
||||
<span>Low Stock</span>
|
||||
</div>
|
||||
{console.log(selecSuppDetails, 'selecSuppDetails')}
|
||||
{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>
|
||||
);
|
||||
})()}
|
||||
{!deliveryAddress && <div
|
||||
className="Address-button"
|
||||
onClick={() => setAddressModel(true)}
|
||||
>
|
||||
<span>Delivery Address</span>
|
||||
</div>}
|
||||
{deliveryAddress && (
|
||||
<div className="deliveryaddress">
|
||||
<strong className='deliveryaddress_edit' onClick={() => setAddressModel(true)}>Delivery Address Details: <CiEdit size={18} /></strong>
|
||||
{deliveryAddress?.Address1 && <p>
|
||||
<strong>Address:</strong>{' '}
|
||||
{deliveryAddress?.Address1}
|
||||
</p>}
|
||||
{deliveryAddress?.City && <p>
|
||||
<strong>City:</strong> {deliveryAddress?.City}
|
||||
</p>}
|
||||
{deliveryAddress?.Dist && <p>
|
||||
<strong>district:</strong> {deliveryAddress?.Dist}
|
||||
</p>}
|
||||
{deliveryAddress?.State && <p>
|
||||
<strong>State:</strong> {deliveryAddress?.State}
|
||||
</p>}
|
||||
{deliveryAddress?.Zip && <p>
|
||||
<strong>Zip:</strong> {deliveryAddress?.Zip}
|
||||
</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
|
|
@ -1457,12 +1521,12 @@ const PurchaseOrder = () => {
|
|||
<div className="inputForm" style={{ marginTop: '2rem' }}>
|
||||
<Form.Item
|
||||
name="ProdId"
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// message: "Please Select Product Name",
|
||||
// },
|
||||
// ]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// message: "Please Select Product Name",
|
||||
// },
|
||||
// ]}
|
||||
>
|
||||
{/* <DropDowns
|
||||
// options={PurProductdata?.map((option) => ({
|
||||
|
|
@ -1527,9 +1591,9 @@ const PurchaseOrder = () => {
|
|||
options={
|
||||
!scanner
|
||||
? PurProductdata?.map((option) => ({
|
||||
value: option.ProdId,
|
||||
label: `${option.ProdName} (${option.Size} ${option.UomName})${option?.BrandName ? ` - ${option?.BrandName}` : ''}`,
|
||||
}))
|
||||
value: option.ProdId,
|
||||
label: `${option.ProdName} (${option.Size} ${option.UomName})${option?.BrandName ? ` - ${option?.BrandName}` : ''}`,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onSelect={PurcProductDropDownChange}
|
||||
|
|
@ -1605,7 +1669,7 @@ const PurchaseOrder = () => {
|
|||
ProductVariantDropDownChange(e)
|
||||
}
|
||||
valueData={SelProductVariant}
|
||||
// disabled={Edit ? true : false}
|
||||
// disabled={Edit ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
|
@ -1643,10 +1707,10 @@ const PurchaseOrder = () => {
|
|||
}
|
||||
inputMode="numeric"
|
||||
onInput={(e) =>
|
||||
(e.target.value = e.target.value.replace(
|
||||
/[^0-9]/g,
|
||||
''
|
||||
))
|
||||
(e.target.value = e.target.value.replace(
|
||||
/[^0-9]/g,
|
||||
''
|
||||
))
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
|
@ -1829,7 +1893,7 @@ const PurchaseOrder = () => {
|
|||
autoComplete="off"
|
||||
label="GST No"
|
||||
autocapitalize="on"
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -1851,10 +1915,10 @@ const PurchaseOrder = () => {
|
|||
// isOnChange={formType == 'edit' ? true : false}
|
||||
inputMode="numeric"
|
||||
onInput={(e) =>
|
||||
(e.target.value = e.target.value.replace(
|
||||
/[^0-9]/g,
|
||||
''
|
||||
))
|
||||
(e.target.value = e.target.value.replace(
|
||||
/[^0-9]/g,
|
||||
''
|
||||
))
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
|
@ -1866,7 +1930,7 @@ const PurchaseOrder = () => {
|
|||
<InputField
|
||||
label={<label>MailId</label>}
|
||||
autocomplete="off"
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -1893,7 +1957,7 @@ const PurchaseOrder = () => {
|
|||
<InputField
|
||||
label={<label class="">Point of Contact</label>}
|
||||
autocomplete="off"
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -1915,7 +1979,7 @@ const PurchaseOrder = () => {
|
|||
label={<label class="">POC Mobile Number</label>}
|
||||
autocomplete="off"
|
||||
maxLength="10"
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -1926,7 +1990,7 @@ const PurchaseOrder = () => {
|
|||
<InputField
|
||||
label={<label class="">POC MailId</label>}
|
||||
autocomplete="off"
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
// isOnChange={formType == 'edit' ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -2276,9 +2340,159 @@ const PurchaseOrder = () => {
|
|||
</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 >
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue