diff --git a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx index 6ef38e2..79ce36b 100644 --- a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx +++ b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx @@ -184,9 +184,10 @@ const SelectionComponent = forwardRef((props, ref) => { const [Notes, setNote] = useState(''); const [BillName, setBillName] = useState(''); const [openColorModal, setOpenColorModal] = useState(false); - const [bgColor, setBgColor] = useState("#ffffff"); - const [fontColor, setFontColor] = useState("#000000"); - const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff"); + const [bgColor, setBgColor] = useState('#ffffff'); + const [fontColor, setFontColor] = useState('#000000'); + const [selectedHeaderFontColor, setSelectedHeaderFontColor] = + useState('#ffffff'); const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer' const rowType = useSelector(GlobalRowType); @@ -202,7 +203,6 @@ const SelectionComponent = forwardRef((props, ref) => { const netAmountColor = useSelector(GlobalSelectedNetAmountColor); const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); - const items = [ { name: 'Home', @@ -440,30 +440,40 @@ const SelectionComponent = forwardRef((props, ref) => { dispatch(changeSelectedHeaderColour(true)); } else { dispatch(changeSelectedHeaderColour(false)); - dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + dispatch( + changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }) + ); } - const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + const tblHdr2 = sizeCheckList.find( + (item) => item.ConfigName === 'Table Header Colour' + )?.ConfigId; if (checkedList?.includes(tblHdr2)) { dispatch(changeSelectedTableHeaderColour(true)); } else { dispatch(changeSelectedTableHeaderColour(false)); dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); } - const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + const tblBody2 = sizeCheckList.find( + (item) => item.ConfigName === 'Table Body Colour' + )?.ConfigId; if (checkedList?.includes(tblBody2)) { dispatch(changeSelectedTableBodyColour(true)); } else { dispatch(changeSelectedTableBodyColour(false)); dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); } - const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + const ftr2 = sizeCheckList.find( + (item) => item.ConfigName === 'Footer Colour' + )?.ConfigId; if (checkedList?.includes(ftr2)) { dispatch(changeSelectedFooterColour(true)); } else { dispatch(changeSelectedFooterColour(false)); dispatch(changeSelectedFooterColor({ background: '', font: '' })); } - const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + const net2 = sizeCheckList.find( + (item) => item.ConfigName === 'Net Amount Colour' + )?.ConfigId; if (checkedList?.includes(net2)) { dispatch(changeSelectedNetAmountColour(true)); } else { @@ -536,27 +546,39 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrName: item.PrintHdrName, // legacy fields are filled from the array so older code still works PrintHdrColor: - item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background, + item.PrintHdrColor || + getColor(item.PrintColors, 'headerColor')?.background, PrintHdrFontColor: - item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font, + item.PrintHdrFontColor || + getColor(item.PrintColors, 'headerColor')?.font, TableHeaderColor: - item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background, + item.TableHeaderColor || + getColor(item.PrintColors, 'tableHeaderColor')?.background, TableHeaderFontColor: - item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font, + item.TableHeaderFontColor || + getColor(item.PrintColors, 'tableHeaderColor')?.font, TableBodyColor: - item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background, + item.TableBodyColor || + getColor(item.PrintColors, 'tableBodyColor')?.background, TableBodyFontColor: - item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font, + item.TableBodyFontColor || + getColor(item.PrintColors, 'tableBodyColor')?.font, footerColor: - item.footerColor || getColor(item.PrintColors, 'footerColor')?.background, + item.footerColor || + getColor(item.PrintColors, 'footerColor')?.background, footerFontColor: - item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font, + item.footerFontColor || + getColor(item.PrintColors, 'footerColor')?.font, netAmountColor: - item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background, + item.netAmountColor || + getColor(item.PrintColors, 'netAmtColor')?.background, netAmountFontColor: - item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font, + item.netAmountFontColor || + getColor(item.PrintColors, 'netAmtColor')?.font, rowType: - item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd', + item.rowType || + getColor(item.PrintColors, 'tableBodyColor')?.rowType || + 'odd', PrintColors: item.PrintColors, Notes: item?.Notes, PageSize: item?.PageSize?.trim() || '3inch', @@ -609,7 +631,7 @@ const SelectionComponent = forwardRef((props, ref) => { OptionDetails, PrintTypeId, PrintHdrColor, - PrintColors + PrintColors, } = row; if (index >= 4) setShowMore(true); if (index <= 4) setShowMore(false); @@ -625,7 +647,9 @@ const SelectionComponent = forwardRef((props, ref) => { setEdit(true); // load existing header color, falling back to array setSelectedColour( - PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000' + PrintHdrColor || + getColor(PrintColors, 'headerColor')?.background || + '#000000' ); // setSelectedHeaderFontColor(PrintHdrFontColor); setSelectedStyleId(StyleId); @@ -913,36 +937,48 @@ const SelectionComponent = forwardRef((props, ref) => { ) ? dispatch(changeNotes(true)) : dispatch(changeNotes(false)); - const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId; + const hdrId = sizeCheckList.find( + (item) => item.ConfigName === 'Header Colour' + )?.ConfigId; if (checkedValues?.includes(hdrId)) { dispatch(changeSelectedHeaderColour(true)); } else { dispatch(changeSelectedHeaderColour(false)); // reset colours when option disabled - dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + dispatch( + changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }) + ); } - const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + const tblHdrId = sizeCheckList.find( + (item) => item.ConfigName === 'Table Header Colour' + )?.ConfigId; if (checkedValues?.includes(tblHdrId)) { dispatch(changeSelectedTableHeaderColour(true)); } else { dispatch(changeSelectedTableHeaderColour(false)); dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); } - const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + const tblBodyId = sizeCheckList.find( + (item) => item.ConfigName === 'Table Body Colour' + )?.ConfigId; if (checkedValues?.includes(tblBodyId)) { dispatch(changeSelectedTableBodyColour(true)); } else { dispatch(changeSelectedTableBodyColour(false)); dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); } - const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + const ftrId = sizeCheckList.find( + (item) => item.ConfigName === 'Footer Colour' + )?.ConfigId; if (checkedValues?.includes(ftrId)) { dispatch(changeSelectedFooterColour(true)); } else { dispatch(changeSelectedFooterColour(false)); dispatch(changeSelectedFooterColor({ background: '', font: '' })); } - const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + const netId = sizeCheckList.find( + (item) => item.ConfigName === 'Net Amount Colour' + )?.ConfigId; if (checkedValues?.includes(netId)) { dispatch(changeSelectedNetAmountColour(true)); } else { @@ -1003,12 +1039,12 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? (headerColor || selectedColour) + ? headerColor || selectedColour : null, PrintHdrFontColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? (headerFontColor || selectedHeaderFontColor) + ? headerFontColor || selectedHeaderFontColor : null, // Table header / body / footer / net amount colors TableHeaderColor: tableHeaderColor || null, @@ -1303,27 +1339,57 @@ const SelectionComponent = forwardRef((props, ref) => { const handleColorSave = (colors) => { // common handler called when ColorsSelected modal returns values - console.log("Received from modal:", colors); + console.log('Received from modal:', colors); switch (colorModalTarget) { case 'header': - dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedHeaderColor({ + background: colors.background, + font: colors.font, + }) + ); setSelectedColour(colors.background); setSelectedHeaderFontColor(colors.font); break; case 'tableHeader': - dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedTableHeaderColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'tableBody': - dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedTableBodyColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'footer': - dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedFooterColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'netAmount': - dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedNetAmountColor({ + background: colors.background, + font: colors.font, + }) + ); break; default: - dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedHeaderColor({ + background: colors.background, + font: colors.font, + }) + ); break; } // update local previews as well (not strictly necessary if UI reads from store) @@ -1588,329 +1654,68 @@ const SelectionComponent = forwardRef((props, ref) => {