Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
ec26930ac7
commit
1c5da0e201
|
|
@ -29,6 +29,16 @@ import {
|
|||
GlobalprintCredit,
|
||||
GlobalprintTax,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GlobalUpiIDprint,
|
||||
|
|
@ -102,6 +112,16 @@ const PrintStyle5 = ({
|
|||
const SettingData = useSelector(PreferenceData);
|
||||
const GlobalCashierName = useSelector(GlobalprintCashierName);
|
||||
const GlobalLogo = useSelector(GlobalprintLogo);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
const GlobalCredit = useSelector(GlobalprintCredit);
|
||||
const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter(
|
||||
(i) => i.SettingIdName === 'PrintUom'
|
||||
|
|
@ -134,8 +154,12 @@ const PrintStyle5 = ({
|
|||
);
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
|
||||
console.log(GlobalDiscount, Discount, 'Discount');
|
||||
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;
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions;
|
||||
let SignatureImg = printDatas?.Signature;
|
||||
|
|
@ -319,7 +343,51 @@ const PrintStyle5 = ({
|
|||
? paginatedChunks[paginatedChunks.length - 1].length
|
||||
: 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 2 : 7);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ? (
|
||||
|
|
@ -377,7 +445,7 @@ const PrintStyle5 = ({
|
|||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
''
|
||||
) : (
|
||||
<div className="PrintStyle5-Head">
|
||||
<div className="PrintStyle5-Head" style={{ ...headerStyle }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
|
|
@ -405,7 +473,6 @@ const PrintStyle5 = ({
|
|||
style={{
|
||||
fontSize: 'clamp(2rem, 2.5vw, 2rem)',
|
||||
fontWeight: '600',
|
||||
color: SelectedHeaderColor,
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
|
||||
|
|
@ -532,6 +599,7 @@ const PrintStyle5 = ({
|
|||
fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...tableHeaderStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -652,6 +720,11 @@ const PrintStyle5 = ({
|
|||
fontWeight: '600',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...(index % 2 === 0 && rowtypeStyle === "even"
|
||||
? tableBodyStyle
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? tableBodyStyle
|
||||
: {})
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -940,6 +1013,7 @@ const PrintStyle5 = ({
|
|||
fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...tableHeaderStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -1060,6 +1134,11 @@ const PrintStyle5 = ({
|
|||
fontWeight: '600',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...(index % 2 === 0 && rowtypeStyle === "even"
|
||||
? tableBodyStyle
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? tableBodyStyle
|
||||
: {})
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -1444,7 +1523,7 @@ const PrintStyle5 = ({
|
|||
|
||||
<div
|
||||
className="align-style"
|
||||
style={{ fontWeight: '600', fontSize: '19px' }}
|
||||
style={{ fontWeight: '600', fontSize: '19px',...netAmountStyle, }}
|
||||
>
|
||||
{' '}
|
||||
<div>Amount </div> <div> : </div>{' '}
|
||||
|
|
@ -1777,6 +1856,7 @@ const PrintStyle5 = ({
|
|||
pageBreakBefore: 'avoid',
|
||||
pageBreakInside: 'avoid',
|
||||
minHeight: 'auto',
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
|
|
@ -2191,7 +2271,7 @@ const PrintStyle5 = ({
|
|||
|
||||
<div
|
||||
className="align-style"
|
||||
style={{ fontWeight: '600', fontSize: '19px' }}
|
||||
style={{ fontWeight: '600', fontSize: '19px',...netAmountStyle, }}
|
||||
>
|
||||
{' '}
|
||||
<div>Amount </div> <div> : </div>{' '}
|
||||
|
|
@ -2505,6 +2585,7 @@ const PrintStyle5 = ({
|
|||
pageBreakBefore: 'avoid',
|
||||
pageBreakInside: 'avoid',
|
||||
minHeight: 'auto',
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
|
|
@ -2711,7 +2792,7 @@ const PrintStyle5 = ({
|
|||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
''
|
||||
) : (
|
||||
<div className="PrintStyle5-Head">
|
||||
<div className="PrintStyle5-Head" style={{ ...headerStyle }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -2739,7 +2820,6 @@ const PrintStyle5 = ({
|
|||
style={{
|
||||
fontSize: 'clamp(2rem, 2.5vw, 2rem)',
|
||||
fontWeight: '600',
|
||||
color: SelectedHeaderColor,
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
|
||||
|
|
@ -2857,6 +2937,7 @@ const PrintStyle5 = ({
|
|||
fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...tableHeaderStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -2976,6 +3057,11 @@ const PrintStyle5 = ({
|
|||
fontWeight: '600',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...(index % 2 === 0 && rowtypeStyle === "even"
|
||||
? tableBodyStyle
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? tableBodyStyle
|
||||
: {})
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -3087,19 +3173,19 @@ const PrintStyle5 = ({
|
|||
<div>
|
||||
{/* 📏 Size + UOM */}
|
||||
<div>
|
||||
|
||||
{UomPrint?.SettingValue === 'Y' && (
|
||||
<>
|
||||
{item?.Size || "1"}{" "}
|
||||
{item?.SinglePc === "Y"
|
||||
? "PCS"
|
||||
: item?.Type !== "C"
|
||||
? item?.UomName
|
||||
: "COMBO"}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{UomPrint?.SettingValue === 'Y' && (
|
||||
<>
|
||||
{item?.Size || "1"}{" "}
|
||||
{item?.SinglePc === "Y"
|
||||
? "PCS"
|
||||
: item?.Type !== "C"
|
||||
? item?.UomName
|
||||
: "COMBO"}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* 🏷 Brand */}
|
||||
{item?.BrandName && <div>{item.BrandName}</div>}
|
||||
|
|
@ -3241,6 +3327,7 @@ const PrintStyle5 = ({
|
|||
fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...tableHeaderStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -3360,6 +3447,11 @@ const PrintStyle5 = ({
|
|||
fontWeight: '600',
|
||||
width: '100%',
|
||||
gap: '0.5rem',
|
||||
...(index % 2 === 0 && rowtypeStyle === "even"
|
||||
? tableBodyStyle
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? tableBodyStyle
|
||||
: {})
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData
|
||||
|
|
@ -3683,7 +3775,7 @@ const PrintStyle5 = ({
|
|||
|
||||
<div
|
||||
className="align-style"
|
||||
style={{ fontWeight: '600', fontSize: '19px' }}
|
||||
style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}
|
||||
>
|
||||
{' '}
|
||||
<div>Amount </div> <div> : </div>{' '}
|
||||
|
|
@ -3992,6 +4084,7 @@ const PrintStyle5 = ({
|
|||
pageBreakBefore: 'avoid',
|
||||
pageBreakInside: 'avoid',
|
||||
minHeight: 'auto',
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
|
|
|
|||
Loading…
Reference in New Issue