Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
cd5d4ac331
commit
abea52eab4
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
|
||||
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
|
||||
import { dateFormatChange1 } from "../../../Services/Others";
|
||||
|
||||
const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }) => {
|
||||
|
|
@ -19,7 +19,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
} = invoiceData;
|
||||
console.log(invoiceData, "invoiceData")
|
||||
|
||||
const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
|
||||
const signature = fieldDetails?.["signature"];
|
||||
const termsAndConditions = fieldDetails?.["terms&conditions"];
|
||||
const termsAndConditionsData = printDatas?.TermsandConditions;
|
||||
|
|
@ -48,6 +48,33 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
|
||||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
|
||||
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,
|
||||
}
|
||||
|
||||
const getPageStyle = (isFinalFooterPage) => ({
|
||||
display: "flex",
|
||||
|
|
@ -67,6 +94,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
CustMobile={CustMobile}
|
||||
CustName={CustName}
|
||||
VehicleNo={VehicleNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
@ -86,7 +114,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
<hr />
|
||||
</div>}
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<div className="termsAndConditions" style={{...footerColorStyle}}>
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
<ol className="termsAndConditionsList">
|
||||
{termsAndConditionsData.map((item, idx) => (
|
||||
|
|
@ -131,8 +159,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
>
|
||||
<div>
|
||||
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
|
||||
<ProductTable data={dataChunk} />
|
||||
{isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />}
|
||||
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
|
||||
{isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>}
|
||||
{!formatTheme && isFinalFooterPage && renderFooter()}
|
||||
</div>
|
||||
{formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
|
||||
|
|
@ -142,8 +170,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
|
|||
) : (
|
||||
<div className="container">
|
||||
<HeaderSection />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
|
||||
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
|
||||
<Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
|
||||
{renderFooter()}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -155,9 +183,9 @@ export default PrintStyleDCToInvoiceA4Standard;
|
|||
|
||||
// -------------------- COMPONENTS --------------------
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
const Header = ({ logo, branch,headerStyle }) => (
|
||||
<>
|
||||
<div className="header">
|
||||
<div className="header" style={{...headerStyle}}>
|
||||
{/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -227,7 +255,7 @@ const InvoiceAmountWords = ({ amount }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
|
||||
const columns = [
|
||||
{ label: "S.No", key: "sno", width: "5%" },
|
||||
{ label: "Product", key: "ProdName", width: "20%" },
|
||||
|
|
@ -241,7 +269,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{...tableHeaderStyle}}>
|
||||
{columns.map(col => (
|
||||
<th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
|
||||
))}
|
||||
|
|
@ -249,7 +277,18 @@ const ProductTable = ({ data }) => {
|
|||
</thead>
|
||||
<tbody>
|
||||
{data.map((prod, index) => (
|
||||
<tr key={prod.UniqueId}>
|
||||
<tr key={prod.UniqueId}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
<td>{index + 1}</td>
|
||||
<td>{prod.ProdName}</td>
|
||||
<td>{prod.ProdVariantName}</td>
|
||||
|
|
@ -264,9 +303,9 @@ const ProductTable = ({ data }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal }) => (
|
||||
const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
|
||||
<>
|
||||
<div className="summary">
|
||||
<div className="summary" style={{...netAmountStyle}}>
|
||||
<div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
|
||||
<div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
|
||||
<div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue