Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
122260c95b
commit
d5d23e837f
|
|
@ -27,7 +27,17 @@ import {
|
|||
GlobalprintCashierName,
|
||||
GlobalprintLogo,
|
||||
GlobalprintTax,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss';
|
||||
import QRCode from 'react-qr-code';
|
||||
|
|
@ -110,8 +120,23 @@ const InvoiceTemplate = ({
|
|||
)?.SettingValue === 'Y';
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
console.log(GlobalDiscount, Discount, 'Discount');
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
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);
|
||||
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 BankDetails = table2Data?.BankDetails;
|
||||
let TermsAndConditions = printDatas?.TermsandConditions;
|
||||
|
|
@ -491,6 +516,51 @@ const InvoiceTemplate = ({
|
|||
},
|
||||
];
|
||||
|
||||
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 (
|
||||
<>
|
||||
<style>
|
||||
|
|
@ -882,7 +952,7 @@ const InvoiceTemplate = ({
|
|||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
''
|
||||
) : (
|
||||
<div className="header-section">
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<div>
|
||||
<div
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
|
|
@ -1090,7 +1160,7 @@ const InvoiceTemplate = ({
|
|||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr className="table-header">
|
||||
<tr className="table-header" style={{...tableHeaderStyle}}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<th className="table-header-cell">S.No</th>
|
||||
|
|
@ -1238,7 +1308,18 @@ const InvoiceTemplate = ({
|
|||
<tbody>
|
||||
{((GlobaldummyData ? products : dataChunk) || []).map(
|
||||
(item, idx) => (
|
||||
<tr key={idx} className="table-row">
|
||||
<tr key={idx} className="table-row"
|
||||
style={
|
||||
idx % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: idx % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<td
|
||||
|
|
@ -1562,13 +1643,14 @@ const InvoiceTemplate = ({
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
width: '95%',
|
||||
width: '100%',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '10px',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'flex-end',
|
||||
gap: '2px',
|
||||
marginBottom: '0.5rem',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
|
|
@ -1906,7 +1988,7 @@ const InvoiceTemplate = ({
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="footer-grid">
|
||||
<div className="footer-grid" style={{...footerColorStyle}}>
|
||||
<div className="footer-left">
|
||||
{BankDetails?.length > 0 && (
|
||||
<>
|
||||
|
|
@ -2168,11 +2250,14 @@ const InvoiceTemplate = ({
|
|||
flexDirection: 'column',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-around',
|
||||
width: '95%',
|
||||
width: '100%',
|
||||
padding: '0 10px',
|
||||
padding: '0 10px',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '10px',
|
||||
flexWrap: 'wrap',
|
||||
gap: '2px',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
|
|
@ -2466,7 +2551,7 @@ const InvoiceTemplate = ({
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="footer-grid">
|
||||
<div className="footer-grid" style={{...footerColorStyle}}>
|
||||
<div className="footer-left">
|
||||
{BankDetails?.length > 0 && (
|
||||
<>
|
||||
|
|
@ -2688,7 +2773,7 @@ const InvoiceTemplate = ({
|
|||
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
|
||||
''
|
||||
) : (
|
||||
<div className="header-section">
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{GlobalLogo && GlobaldummyData && (
|
||||
|
|
@ -2719,14 +2804,11 @@ const InvoiceTemplate = ({
|
|||
) : null}
|
||||
<h1
|
||||
className="company-name"
|
||||
style={{
|
||||
color: SelectedHeaderColor,
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? 'Company Name' : companyName}
|
||||
</h1>
|
||||
</div>
|
||||
<p>{companyAddress}</p>
|
||||
<p>{GlobaldummyData ? 'Hosur Dharga tamil Nadu 653105' : companyAddress}</p>
|
||||
{(companyPhone || GlobaldummyData) && (
|
||||
<div>
|
||||
Phone: {GlobaldummyData ? '999999XXXX' : companyPhone}
|
||||
|
|
@ -2854,7 +2936,7 @@ const InvoiceTemplate = ({
|
|||
style={{ borderTop: '1px solid black' }}
|
||||
>
|
||||
<thead>
|
||||
<tr className="table-header">
|
||||
<tr className="table-header" style={{...tableHeaderStyle}}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<th className="table-header-cell">S.No</th>
|
||||
|
|
@ -2964,7 +3046,18 @@ const InvoiceTemplate = ({
|
|||
<tbody>
|
||||
{((GlobaldummyData ? products : productsData) || []).map(
|
||||
(item, idx) => (
|
||||
<tr key={idx} className="table-row">
|
||||
<tr key={idx} className="table-row"
|
||||
style={
|
||||
idx % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: idx % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<td
|
||||
|
|
@ -3185,11 +3278,13 @@ const InvoiceTemplate = ({
|
|||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-around',
|
||||
width: '95%',
|
||||
width: '100%',
|
||||
padding: '0 10px',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '10px',
|
||||
flexWrap: 'wrap',
|
||||
gap: '2px',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -3444,7 +3539,7 @@ const InvoiceTemplate = ({
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="footer-grid">
|
||||
<div className="footer-grid" style={{...footerColorStyle}}>
|
||||
<div className="footer-left">
|
||||
{(BankDetails?.length > 0 || GlobaldummyData) && (
|
||||
<>
|
||||
|
|
|
|||
Loading…
Reference in New Issue