Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
0f223636c5
commit
807a5c2606
|
|
@ -23,6 +23,17 @@ import {
|
|||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalBillName,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss";
|
||||
import QRCode from "react-qr-code";
|
||||
|
|
@ -63,6 +74,12 @@ const PurPrintA4Standard = ({ index,
|
|||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
const Qrcodet = FieldDetails?.["Qrcode"];
|
||||
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 GlobalSlNo = useSelector(GlobalprintSlNo);
|
||||
const GlobalItem = useSelector(GlobalprintItem);
|
||||
const GlobalMRP = useSelector(GlobalprintMRP);
|
||||
|
|
@ -79,6 +96,17 @@ const PurPrintA4Standard = ({ index,
|
|||
const GlobalIsnotes = useSelector(Globalnotes);
|
||||
const GlobalthemeFormatr = useSelector(GlobalthemeFormat)
|
||||
const GlobalBilltext = useSelector(GlobalBillName)
|
||||
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);
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
console.log(GlobalDiscount, Discount, "Discount");
|
||||
|
||||
|
|
@ -118,10 +146,6 @@ const PurPrintA4Standard = ({ index,
|
|||
|
||||
const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
|
||||
|
||||
const TakeawayData = table2Data?.productDetails?.filter(
|
||||
(item) => item.BookingTypeName?.toLowerCase() === "takeaway"
|
||||
|
||||
);
|
||||
const productsData = table2Data?.[0]?.ProductDetails || [];
|
||||
const offers = table2Data?.OrderOfferDetails || [];
|
||||
|
||||
|
|
@ -209,7 +233,51 @@ const PurPrintA4Standard = ({ index,
|
|||
);
|
||||
};
|
||||
|
||||
;
|
||||
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 (
|
||||
|
|
@ -565,18 +633,17 @@ const PurPrintA4Standard = ({ index,
|
|||
<div className={`invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "auto" : "275mm") : "", pageBreakInside: "avoid", }} key={chunkIndex}>
|
||||
|
||||
{/* <div className="invoice-wrapper"> */}
|
||||
{/* Header */}
|
||||
|
||||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: "relative", width: "100%" }}>
|
||||
<div className="header-section">
|
||||
<div className="header" style={{ position: "relative", width: "100%", }}>
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<h1 className="company-name">{companyName}</h1>
|
||||
<p>{ table2Data?.customerAddress}</p>
|
||||
<div>Phone: {table2Data?.customerMobile}</div>
|
||||
<div>Email: {companyEmail}</div>
|
||||
{(companyGSTIN) && <div style={{ fontSize: "16px", fontWeight: "600" }}>GSTIN: {companyGSTIN}</div>}
|
||||
</div>
|
||||
|
||||
{/* Invoice Title */}
|
||||
<div className="invoice-title">
|
||||
|
||||
|
|
@ -594,9 +661,6 @@ const PurPrintA4Standard = ({ index,
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{table2Data?.CustomerDetails?.length > 0 && <div className="billing-grid">
|
||||
<div className="billing-left">
|
||||
<h3 className="section-title">Details of Receiver | Billed to</h3>
|
||||
|
|
@ -631,31 +695,39 @@ const PurPrintA4Standard = ({ index,
|
|||
<thead>
|
||||
<tr className="table-header">
|
||||
{
|
||||
SLNO == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
|
||||
|
||||
SLNO == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
|
||||
{
|
||||
Item == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>Item</th>}
|
||||
|
||||
|
||||
Item == true && <th className="table-header-cell" style={{...tableHeaderStyle, fontFamily: "sans-serif" }}>Item</th>}
|
||||
{
|
||||
HsnCode == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>HSN </th>}
|
||||
HsnCode == true && <th className="table-header-cell" style={{ ...tableHeaderStyle,fontFamily: "sans-serif" }}>HSN </th>}
|
||||
|
||||
{ Quantity == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
|
||||
{ Quantity == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
|
||||
|
||||
{ MRP == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
|
||||
{ MRP == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
|
||||
|
||||
{ Rate == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
|
||||
{ Rate == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
|
||||
|
||||
{ Discount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
|
||||
{ Discount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
|
||||
|
||||
{ Amount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
|
||||
{ Amount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{(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
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>
|
||||
{chunkIndex * chunkSize + idx + 1}
|
||||
|
|
@ -1223,7 +1295,7 @@ const PurPrintA4Standard = ({ index,
|
|||
<div id={`SQA4Standard`} className="invoice-container">
|
||||
<div className="invoice-wrapper">
|
||||
{/* Header */}
|
||||
<div className="header-section">
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<h1 className="company-name">{GlobaldummyData ? "Company Name" : companyName}</h1>
|
||||
<p>{companyAddress}</p>
|
||||
<div>Phone: {GlobaldummyData ? "999999XXXX" : companyPhone}</div>
|
||||
|
|
@ -1340,62 +1412,52 @@ const PurPrintA4Standard = ({ index,
|
|||
<tr className="table-header">
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && <th className="table-header-cell">S.No</th> :
|
||||
SLNO == true && <th className="table-header-cell">S.No</th>}
|
||||
SLNO == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">S.No</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalItem && <th className="table-header-cell">Item</th> :
|
||||
Item == true && <th className="table-header-cell">Item</th>}
|
||||
|
||||
|
||||
Item == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">Item</th>}
|
||||
{GlobaldummyData
|
||||
? GlobalHsnCode && <th className="table-header-cell">HSN </th> :
|
||||
HsnCode == true && <th className="table-header-cell">HSN </th>}
|
||||
|
||||
HsnCode == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">HSN </th>}
|
||||
{GlobaldummyData
|
||||
? GlobalQuantity && <th className="table-header-cell">Qty</th>
|
||||
: Quantity == true && <th className="table-header-cell">Qty</th>}
|
||||
: Quantity == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Qty</th>}
|
||||
|
||||
{/* <th className="table-header-cell">UOM</th>
|
||||
<th className="table-header-cell">UOM</th> */}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalMRP && <th className="table-header-cell">MRP</th>
|
||||
: MRP == true && <th className="table-header-cell">MRP</th>}
|
||||
: MRP == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">MRP</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalRate && <th className="table-header-cell">Rate</th>
|
||||
: Rate == true && <th className="table-header-cell">Rate</th>}
|
||||
: Rate == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Rate</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalDiscount && <th className="table-header-cell">Dis</th>
|
||||
: Discount == true && <th className="table-header-cell">Dis</th>}
|
||||
: Discount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Dis</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalAmount && <th className="table-header-cell">Amount</th>
|
||||
: Amount == true && <th className="table-header-cell">Amount</th>}
|
||||
|
||||
{/* <th className="table-header-cell">Taxable</th>
|
||||
<th className="table-header-cell-center" colSpan="2">IGST</th>
|
||||
<th className="table-header-cell-last">Total</th> */}
|
||||
: Amount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Amount</th>}
|
||||
</tr>
|
||||
{/* <tr className="table-header">
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell-center">Rate</th>
|
||||
<th className="table-header-cell-center">Amount</th>
|
||||
<th className="table-header-cell-last"></th>
|
||||
</tr> */}
|
||||
|
||||
</thead>
|
||||
<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 className="table-header-cell" style={{ textAlign: "center" }}>
|
||||
|
|
@ -1513,6 +1575,7 @@ const PurPrintA4Standard = ({ index,
|
|||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1537,20 +1600,13 @@ const PurPrintA4Standard = ({ index,
|
|||
{" "}
|
||||
Qty:{GlobaldummyData ? "9" : totalQuantity}
|
||||
</div>
|
||||
{/* {ExtraChargeTotal > 0 && <p style={{ margin: 0, padding: 0, fontSize: "12px" }}> Extra Charges:{ExtraChargeTotal}</p>} */}
|
||||
|
||||
|
||||
{/* {(TotalOfferAmount > 0 || table2Data?.OverallDisc > 0) && (
|
||||
<p style={{ margin: 0, padding: 0, fontSize: "10px", fontWeight: "600" }}>
|
||||
Off :{(Number(TotalOfferAmount || 0) + Number(table2Data?.OverallDisc || 0)).toFixed(2)}
|
||||
</p>
|
||||
)} */}
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: "10px",
|
||||
fontWeight: "600",
|
||||
|
||||
}}
|
||||
>
|
||||
Amount :₹
|
||||
|
|
|
|||
Loading…
Reference in New Issue