Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
0103a3c77e
commit
1f28743676
|
|
@ -153,7 +153,34 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > 6;
|
||||
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const headerStyle = {
|
||||
backgroundColor: headerColor?.background,
|
||||
color: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: tableHeaderColor?.background,
|
||||
color: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: tableBodyColor?.background,
|
||||
color: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: footerColor?.background,
|
||||
color: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: netAmtColor?.background,
|
||||
color: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
|
|
@ -169,7 +196,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: FormatTheme ? (isMobile ? "297mm" : "257mm") : "", }} className="print-page" key={chunkIndex}>
|
||||
<div className="page-headerA4Style11" style={{ textAlign: "center" }}>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{...headerStyle, display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
|
|
@ -274,7 +301,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
<div className={FormatTheme ? "page" : ""} style={{ lineHeight: "1", fontSize: "13px" }}>
|
||||
<table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
|
||||
<thead>
|
||||
<tr style={{ background: '#373B44', color: '#fff', }}>
|
||||
<tr style={{ ...tableHeaderStyle}}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>
|
||||
: SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
|
||||
|
|
@ -321,7 +348,18 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<td style={{ textAlign: "center" }}>
|
||||
|
|
@ -594,19 +632,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
}
|
||||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
|
|
@ -768,19 +795,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
}
|
||||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
|
|
@ -932,19 +948,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
|
|||
}
|
||||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue