karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sales page Setting modal Design

This commit is contained in:
Your Name 2026-02-03 13:52:53 +05:30
parent 441aab2d70
commit 7617a93431
3 changed files with 458 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
View File

@ -66,7 +66,9 @@ const AllSalesPageSettings = () => {
</div> </div>
)} )}
{selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />} {selectedComponent === 'Table' && (
<TableHeadersetting setModalOpen={setsettingModal} />
)}
</div> </div>
</div> </div>
</DefaultModal> </DefaultModal>

25
src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
View File

@ -97,6 +97,9 @@
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
.ant-checkbox-wrapper {
padding: 8px !important;
}
} }
.SettingsListSwitchBTN { .SettingsListSwitchBTN {
@ -157,3 +160,25 @@
font-size: 16px; font-size: 16px;
} }
} }
// Table Header Setting CSS start here|||
.SelectionComponentSubHeading {
color: #333;
font-size: 12px;
font-weight: 500;
font-family: "Poppins", sans-serif;
}
.selctfontBackInputMain {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.selctfontBackInput {
display: flex;
flex-direction: column;
gap: 4px;
}

201
src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx
View File

@ -20,6 +20,7 @@ import {
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import Buttons from '../../../../Components/Forms/Buttons'; import Buttons from '../../../../Components/Forms/Buttons';
import { Messages } from '../../../../Components/Notifications/Messages'; import { Messages } from '../../../../Components/Notifications/Messages';
import './AllSalesPageSettings.scss';
const TableHeadersetting = ({ setModalOpen }) => { const TableHeadersetting = ({ setModalOpen }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -45,7 +46,7 @@ const TableHeadersetting = ({setModalOpen}) => {
const [SelectedTableColor, setSelectedTableColor] = useState(null); const [SelectedTableColor, setSelectedTableColor] = useState(null);
const [Tableform] = Form.useForm(); const [Tableform] = Form.useForm();
const [billingSettings, setBillingSettings] = useState(); const [billingSettings, setBillingSettings] = useState();
console.log(billingSettings,"billingSettingsbillingSettings") console.log(billingSettings, 'billingSettingsbillingSettings');
const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] = const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
useState([]); useState([]);
const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find( const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
@ -65,7 +66,7 @@ const TableHeadersetting = ({setModalOpen}) => {
// Hold and addcustomer OptionsDetails // Hold and addcustomer OptionsDetails
const [HoldButton, setHoldButton] = useState(false); const [HoldButton, setHoldButton] = useState(false);
const [AddCustomerButton, setAddCustomerButton] = useState(false); const [AddCustomerButton, setAddCustomerButton] = useState(false);
const [DineInChecked,setDineInChecked] = useState(false) const [DineInChecked, setDineInChecked] = useState(false);
console.log(billingSettings, 'billingSettingsbillingSettings'); console.log(billingSettings, 'billingSettingsbillingSettings');
const [TableBackgroundColorData, setTableBackgroundColorData] = useState([ const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
{ {
@ -165,37 +166,49 @@ const TableHeadersetting = ({setModalOpen}) => {
); );
setSelectedBillTableCheckValues(optionIds); setSelectedBillTableCheckValues(optionIds);
let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId) let Allfontdata = AllDetails?.Fonts?.filter(
setTableFontData(Allfontdata) (item) => item.SessionId === selectedBilling?.SessionId
let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(item=>item?.SessionId === selectedBilling?.SessionId) );
setTableFontData(Allfontdata);
let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(
(item) => item?.SessionId === selectedBilling?.SessionId
);
setSelectedTableFont(selectedFont?.FontId) setSelectedTableFont(selectedFont?.FontId);
const hasHold = selectedNavbar?.FieldDetails?.some( const hasHold = selectedNavbar?.FieldDetails?.some(
item => item.OptionName === "Hold" (item) => item.OptionName === 'Hold'
); );
const hasAddcustomer = selectedNavbar?.FieldDetails?.some( const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
item => item.OptionName === "AddCustomer" (item) => item.OptionName === 'AddCustomer'
); );
const hasDinein = selectedNavbar?.FieldDetails?.some( const hasDinein = selectedNavbar?.FieldDetails?.some(
item => item.OptionName === "DineIn" (item) => item.OptionName === 'DineIn'
);
setHoldButton(hasHold);
setAddCustomerButton(hasAddcustomer);
setDineInChecked(hasDinein);
let allcolordata = AllDetails?.Colors?.filter(
(item) =>
item.SessionId === selectedBilling?.SessionId &&
item.OptionName === 'OverallBackground'
);
setBillingOverallColorsList(allcolordata);
let allBackcolordata = AllDetails?.Colors?.filter(
(item) =>
item.SessionId === selectedBilling?.SessionId &&
item.OptionName === 'Background'
); );
setHoldButton(hasHold)
setAddCustomerButton(hasAddcustomer)
setDineInChecked(hasDinein)
let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "OverallBackground")
setBillingOverallColorsList(allcolordata)
let allBackcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "Background")
setTableBackgroundColorData(allBackcolordata) setTableBackgroundColorData(allBackcolordata);
let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(item=>item?.SessionName === 'BookingBilling') let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(
console.log(selectedcolors, 'selectedOverallBackgroudcolor') (item) => item?.SessionName === 'BookingBilling'
);
console.log(selectedcolors, 'selectedOverallBackgroudcolor');
selectedcolors?.forEach((item) => { selectedcolors?.forEach((item) => {
if (item?.['BackgroundColor']) { if (item?.['BackgroundColor']) {
setSelectedTableColor(item?.['ColorId']); setSelectedTableColor(item?.['ColorId']);
} else if (item?.['OverallBackgroundColor']) { } else if (item?.['OverallBackgroundColor']) {
setdropdownBillingOverallColor(item?.['ColorId']); setdropdownBillingOverallColor(item?.['ColorId']);
} }
}); });
// await setdropdownBillingOverallColor(selectedOverallBackgroudcolor); // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
@ -274,8 +287,8 @@ const TableHeadersetting = ({setModalOpen}) => {
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
// BillsetUploadColor(false); // BillsetUploadColor(false);
} }
GetTemplatedetails() GetTemplatedetails();
setBillUploadColor(false) setBillUploadColor(false);
} else { } else {
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
setMessageType('error'); setMessageType('error');
@ -347,8 +360,8 @@ const TableHeadersetting = ({setModalOpen}) => {
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
setBillingUploadOverallColor(false); setBillingUploadOverallColor(false);
} }
GetTemplatedetails() GetTemplatedetails();
BillingUploadOverallColor(false) BillingUploadOverallColor(false);
} else { } else {
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
setMessageType('error'); setMessageType('error');
@ -357,7 +370,6 @@ const TableHeadersetting = ({setModalOpen}) => {
const selectBillingOverallColor = async (value) => { const selectBillingOverallColor = async (value) => {
await setdropdownBillingOverallColor(value); await setdropdownBillingOverallColor(value);
// formRef.current?.setFieldsValue({ BillingOverallColor: value }); // formRef.current?.setFieldsValue({ BillingOverallColor: value });
}; };
const openColour4 = (value) => { const openColour4 = (value) => {
setTableColorType(value); setTableColorType(value);
@ -371,7 +383,7 @@ const TableHeadersetting = ({setModalOpen}) => {
validateFontsTable(values); validateFontsTable(values);
}; };
const validateFontsTable = async (values) => { const validateFontsTable = async (values) => {
console.log(values,"valuesvalues") console.log(values, 'valuesvalues');
const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`; const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
fetch(apiUrl) fetch(apiUrl)
.then((response) => response.json()) .then((response) => response.json())
@ -381,7 +393,6 @@ const TableHeadersetting = ({setModalOpen}) => {
if (fontNames.includes(formatFontName(values['TableFont']))) { if (fontNames.includes(formatFontName(values['TableFont']))) {
let response; let response;
try { try {
let postData = { let postData = {
SessionFont: formatFontName(values['TableFont']), SessionFont: formatFontName(values['TableFont']),
CreatedBy: UserId, CreatedBy: UserId,
@ -409,7 +420,7 @@ const TableHeadersetting = ({setModalOpen}) => {
} }
dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap; dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
GetTemplatedetails() GetTemplatedetails();
Tableform.resetFields(); Tableform.resetFields();
} else { } else {
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
@ -418,7 +429,6 @@ const TableHeadersetting = ({setModalOpen}) => {
} else { } else {
setMessageType('warning'); setMessageType('warning');
setMessageData('Please give the Correct google fonts Name!'); setMessageData('Please give the Correct google fonts Name!');
} }
}) })
.catch((error) => { .catch((error) => {
@ -440,15 +450,15 @@ const TableHeadersetting = ({setModalOpen}) => {
UserId: UserId, UserId: UserId,
BranchId: BranchId, BranchId: BranchId,
ColorId: [ ColorId: [
...(TemplateDetails?.[0]?.ColorDetail ...(TemplateDetails?.[0]?.ColorDetail?.filter(
?.filter(c => c.SessionName !== "BookingBilling") (c) => c.SessionName !== 'BookingBilling'
?.map(c => c.ColorId) || []), )?.map((c) => c.ColorId) || []),
SelectedTableColor, SelectedTableColor,
dropdownBillingOverallColor, dropdownBillingOverallColor,
], ],
FontId: TemplateDetails?.[0]?.FontDetail?.map(f => FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
), ),
CreatedBy: UserId, CreatedBy: UserId,
TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({ TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
@ -462,9 +472,7 @@ const TableHeadersetting = ({setModalOpen}) => {
console.log(result, 'final result to submit'); console.log(result, 'final result to submit');
var response = await dispatch(putSelectionComponentData(result)).unwrap(); var response = await dispatch(putSelectionComponentData(result)).unwrap();
if (response?.data?.statusCode == 1) { if (response?.data?.statusCode == 1) {
if ( if (response?.data?.response === 'Application Template Already Exists') {
response?.data?.response === 'Application Template Already Exists'
) {
setMessageType('warning'); setMessageType('warning');
setMessageData('Application Template Already Exists'); setMessageData('Application Template Already Exists');
setFirstOnClick(false); setFirstOnClick(false);
@ -474,7 +482,7 @@ const TableHeadersetting = ({setModalOpen}) => {
setFirstOnClick(false); setFirstOnClick(false);
} }
await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap(); await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
setModalOpen(false) setModalOpen(false);
} else { } else {
setMessageType('error'); setMessageType('error');
setMessageData(response?.data?.response); setMessageData(response?.data?.response);
@ -518,13 +526,11 @@ const TableHeadersetting = ({setModalOpen}) => {
disabled={ disabled={
value.OptionName === 'Hold' && HoldButton value.OptionName === 'Hold' && HoldButton
? true ? true
: value.OptionName === 'AddCustomer' && : value.OptionName === 'AddCustomer' && AddCustomerButton
AddCustomerButton
? true ? true
: value.OptionName === 'Item' : value.OptionName === 'Item'
? true ? true
: value.OptionName === 'UnpaidBill' && : value.OptionName === 'UnpaidBill' && !DineInChecked
!DineInChecked
? true ? true
: false : false
} }
@ -545,8 +551,17 @@ const TableHeadersetting = ({setModalOpen}) => {
</div> </div>
))} */} ))} */}
</div> </div>
<div style={{ flex: '0 0 48%' }}> <div className="selctfontBackInputMain">
<p style={{ marginBottom: '8px', fontWeight: '500' }}>BillTable Font</p> <div className="selctfontBackInput">
<p className="SelectionComponentSubHeading">BillTable Font</p>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '10px',
alignItems: 'center',
}}
>
<DropDowns <DropDowns
options={TableFontData?.map((option) => ({ options={TableFontData?.map((option) => ({
value: option.FontId, value: option.FontId,
@ -568,54 +583,14 @@ const TableHeadersetting = ({setModalOpen}) => {
/> />
</div> </div>
</div> </div>
<DefaultModal
open={TableFontModelopen}
title="Fonts"
footer={true}
children={
<Form form={Tableform}>
<div className="fontInputs">
<div>
<Form.Item
name="TableFont"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Font',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
field="TableFont"
label="Font"
className="Input"
fieldState={true}
fieldApi={true}
autoComplete="off"
/>
</Form.Item>
</div> </div>
</div>
<p style={{ color: 'red' }}>* Google Fonts Only</p>
</Form>
}
handleCancel={TablehandleCancel}
handleSubmit={TablehandleSubmit}
buttonText="SAVE"
/>
{hasBackground ? ( {hasBackground ? (
<div> <div>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
gap: '1rem', gap: '10px',
flexWrap: 'nowrap', flexWrap: 'nowrap',
alignItems: 'center', alignItems: 'center',
}} }}
@ -630,7 +605,7 @@ const TableHeadersetting = ({setModalOpen}) => {
}, },
]} ]}
> >
<p className="Selection-Component-SubHeading"> <p className="SelectionComponentSubHeading">
BillTable Background Color BillTable Background Color
</p> </p>
<DropDowns <DropDowns
@ -686,6 +661,7 @@ const TableHeadersetting = ({setModalOpen}) => {
</div> </div>
</div> </div>
) : null} ) : null}
{hasOverallBackground ? ( {hasOverallBackground ? (
<div> <div>
<Modal <Modal
@ -767,7 +743,7 @@ const TableHeadersetting = ({setModalOpen}) => {
}, },
]} ]}
> >
<p className="Selection-Component-SubHeading"> <p className="SelectionComponentSubHeading">
BillTable Overall-Background BillTable Overall-Background
</p> </p>
<DropDowns <DropDowns
@ -805,7 +781,9 @@ const TableHeadersetting = ({setModalOpen}) => {
), ),
}))} }))}
labelChange={true} labelChange={true}
label={<p style={{ fontSize: '11px' }}>Overall Background</p>} label={
<p style={{ fontSize: '11px' }}>Overall Background</p>
}
className="field-DropDown-Selection" className="field-DropDown-Selection"
onChangeFunction={selectBillingOverallColor} onChangeFunction={selectBillingOverallColor}
isOnchanges={dropdownBillingOverallColor ? true : false} isOnchanges={dropdownBillingOverallColor ? true : false}
@ -826,6 +804,50 @@ const TableHeadersetting = ({setModalOpen}) => {
</div> </div>
</div> </div>
) : null} ) : null}
</div>
<DefaultModal
open={TableFontModelopen}
title="Fonts"
footer={true}
children={
<Form form={Tableform}>
<div className="fontInputs">
<div>
<Form.Item
name="TableFont"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Font',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
field="TableFont"
label="Font"
className="Input"
fieldState={true}
fieldApi={true}
autoComplete="off"
/>
</Form.Item>
</div>
</div>
<p style={{ color: 'red' }}>* Google Fonts Only</p>
</Form>
}
handleCancel={TablehandleCancel}
handleSubmit={TablehandleSubmit}
buttonText="SAVE"
/>
<Modal <Modal
open={BillUploadColor} open={BillUploadColor}
title="Colors" title="Colors"
@ -935,7 +957,6 @@ const TableHeadersetting = ({setModalOpen}) => {
icon={<ArrowRightOutlined />} icon={<ArrowRightOutlined />}
htmlType={true} htmlType={true}
handleSubmit={HandleSubmit} handleSubmit={HandleSubmit}
/> />
</div> </div>
</> </>