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

table settings Full functionality

This commit is contained in:
karthikalakshmi 2026-02-02 15:50:08 +05:30
parent 4972cc4846
commit fbcfadfcde
4 changed files with 316 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,19 @@
import { useState } from "react";
import { IoMdAdd, IoMdSettings } from "react-icons/io";
import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
import TooltipWrapper from "../../../../Components/Tooltip/Tooltip";
import "./AllSalesPageSettings.scss"
import TableHeadersetting from "./TableHeadersetting";
import PaymentOptions from "../../../Payment/PaymentOptions/PaymentOptions";
import { useState } from 'react';
import { IoMdAdd, IoMdSettings } from 'react-icons/io';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import './AllSalesPageSettings.scss';
import TableHeadersetting from './TableHeadersetting';
import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions';
const AllSalesPageSettings = () => {
const [settingModal, setsettingModal] = useState(false)
const [selectedComponent, setselectedComponent] = useState('Payment')
const [settingModal, setsettingModal] = useState(false);
const [selectedComponent, setselectedComponent] = useState('Payment');
const onclose = () => {
setsettingModal(false)
}
setsettingModal(false);
};
const ComponentSelect = (value) => {
setselectedComponent(value);
};
@ -33,9 +30,10 @@ const AllSalesPageSettings = () => {
padding: '5px 10px',
borderRadius: '4px',
fontSize: '14px',
backgroundColor: '#f0f0f0',
}}
>
<IoMdSettings />
<IoMdSettings size={16} />
</div>
</TooltipWrapper>
@ -43,14 +41,11 @@ const AllSalesPageSettings = () => {
open={settingModal}
footer={false}
handleCancel={onclose}
title={"Settings"}
width={700}
>
<div>
<div
className="SettingsListSwitchBTN"
title={'Settings'}
width={850}
>
<div className="AllSalesPageSettingsMainDiv">
<div className="SettingsListSwitchBTN">
<div
className={selectedComponent === 'Payment' ? 'selected' : ''}
onClick={() => ComponentSelect('Payment')}
@ -64,21 +59,19 @@ const AllSalesPageSettings = () => {
Table
</div>
</div>
{selectedComponent == "Payment" &&
<div className="SettingsComponentDiv">
{selectedComponent == 'Payment' && (
<div>
<PaymentOptions />
</div>
}
{
selectedComponent === "Table" &&
<TableHeadersetting />
}
)}
{selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />}
</div>
</div>
</DefaultModal>
</>
)
}
);
};
export default AllSalesPageSettings;

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

@ -1,58 +1,141 @@
/// Another swtich button style code
// /// Another swtich button style code
// .SettingsListSwitchBTN {
// display: inline-flex;
// gap: 16px;
// font-family: "Poppins";
// margin-bottom: 12px;
// border-bottom: 1px solid #d1d5db;
// }
// .SettingsListSwitchBTN > div {
// font-size: 22px;
// font-weight: 600;
// cursor: pointer;
// color: #6b7280;
// display: flex;
// align-items: center;
// gap: 6px;
// position: relative;
// border: none;
// background: transparent;
// font-family: "Gilroy";
// transition: color 0.2s ease;
// @media (max-width: 600px) {
// font-size: 18px;
// }
// }
// .SettingsListSwitchBTN > div:hover {
// color: #0f172a;
// }
// .SettingsSwitchBTN > div.selected {
// color: #0f172a;
// }
// .SettingsListSwitchBTN > div.selected::after {
// content: "";
// position: absolute;
// left: 0;
// bottom: -1px;
// width: 100%;
// height: 2px;
// background: #2c88ee;
// border-radius: 2px;
// }
// .SettingsListSwitchBTN > div.selected svg {
// color: #4765db !important;
// }
// // End
// .settingsales-DropDown-Selection {
// width: 150px !important;
// }
// .settingaddNewSalesFiledBTN {
// background-color: #2563eb;
// // background-color: #1292ee;
// color: #fff !important;
// width: max-content;
// height: max-content;
// padding: 4px 8px;
// font-size: 13px;
// font-weight: 400;
// display: flex;
// align-items: center;
// gap: 4px;
// cursor: pointer;
// border-radius: 6px;
// svg {
// color: #fff !important;
// font-weight: 500;
// display: flex;
// font-size: 16px;
// }
// }
.AllSalesPageSettingsMainDiv {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
gap: 1rem;
font-family: "Poppins", sans-serif;
justify-content: flex-start;
}
.SettingsComponentDiv {
height: max-content;
max-height: 80vh;
width: 100%;
scrollbar-width: thin;
padding-right: 10px;
overflow: auto;
.option-maindiv{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
}
.SettingsListSwitchBTN {
display: inline-flex;
gap: 16px;
font-family: "Poppins";
margin-bottom: 12px;
border-bottom: 1px solid #d1d5db;
}
.SettingsListSwitchBTN > div {
font-size: 22px;
font-weight: 600;
cursor: pointer;
color: #6b7280;
display: flex;
align-items: center;
align-items: flex-start;
flex-direction: column;
gap: 6px;
position: relative;
border: none;
background: transparent;
font-family: "Gilroy";
transition: color 0.2s ease;
@media (max-width: 600px) {
font-size: 18px;
}
}
.SettingsListSwitchBTN > div:hover {
color: #0f172a;
}
.SettingsSwitchBTN > div.selected {
color: #0f172a;
}
.SettingsListSwitchBTN > div.selected::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 210px;
height: 100%;
overflow: auto;
background-color: #d8e5ff;
padding: 5px;
border-radius: 4px;
height: 80vh;
div {
width: 100%;
height: 2px;
background: #2c88ee;
border-radius: 2px;
background-color: #fff;
outline: none;
border: none;
font-family: "Poppins", sans-serif;
padding: 8px 6px;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease-in-out;
font-size: 14px;
font-weight: 400;
&:hover {
background-color: #d1d8ec;
}
&.selected {
background-color: #ffffff;
color: #2563eb;
font-weight: 500;
border-right: 3px solid #2563eb;
}
}
}
.SettingsListSwitchBTN > div.selected svg {
color: #4765db !important;
}
// End
.settingsales-DropDown-Selection {
width: 150px !important;
}
.settingaddNewSalesFiledBTN {
background-color: #2563eb;
// background-color: #1292ee;

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

@ -11,6 +11,7 @@ import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup';
import { useSelector } from 'react-redux';
import {
getSalesTemplate,
getTemplate,
postColorData,
postTableFontData,
putSelectionComponentData,
@ -20,7 +21,7 @@ import { useDispatch } from 'react-redux';
import Buttons from '../../../../Components/Forms/Buttons';
import { Messages } from '../../../../Components/Notifications/Messages';
const TableHeadersetting = () => {
const TableHeadersetting = ({setModalOpen}) => {
const dispatch = useDispatch();
const SessionData = useSelector(StoredSessionData);
const AppId = SessionData?.AppId;
@ -61,6 +62,10 @@ const TableHeadersetting = () => {
const hasOverallBackground = SelectedBillTableCheckValues?.includes(
OverallbackgroundOptionId
);
// Hold and addcustomer OptionsDetails
const [HoldButton, setHoldButton] = useState(false);
const [AddCustomerButton, setAddCustomerButton] = useState(false);
const [DineInChecked,setDineInChecked] = useState(false)
console.log(billingSettings, 'billingSettingsbillingSettings');
const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
{
@ -109,71 +114,7 @@ const TableHeadersetting = () => {
ActiveStatus: 'A',
},
]);
const [BillingOverallColorsList, setBillingOverallColorsList] = useState([
{
ColorId: 9,
SessionId: 57,
OptionId: 204,
FontColor: '#000000',
BackgroundColor: '#bbdefb',
ThemeName: 'Theme 9',
ActiveStatus: 'A',
},
{
ColorId: 19,
SessionId: 57,
OptionId: 204,
FontColor: '#000000',
BackgroundColor: '#d7ccc8',
ThemeName: 'Theme 19',
ActiveStatus: 'A',
},
{
ColorId: 20,
SessionId: 57,
OptionId: 209,
FontColor: '#000000',
BackgroundColor: '#c5cae9',
ThemeName: 'Theme 20',
ActiveStatus: 'A',
},
{
ColorId: 22,
SessionId: 57,
OptionId: 204,
FontColor: '#000000',
BackgroundColor: '#ffffff',
ThemeName: 'Theme 22',
ActiveStatus: 'A',
},
{
ColorId: 30,
SessionId: 57,
OptionId: 209,
FontColor: '#000000',
BackgroundColor: '#3f51b5',
ThemeName: 'Theme 30',
ActiveStatus: 'A',
},
{
ColorId: 66,
SessionId: 57,
OptionId: 205,
FontColor: '#000000',
BackgroundColor: '#d1c4e9',
ThemeName: 'Theme 65',
ActiveStatus: 'A',
},
{
ColorId: 67,
SessionId: 57,
OptionId: 205,
FontColor: '#000000',
BackgroundColor: '#8bc34a',
ThemeName: 'Theme 66',
ActiveStatus: 'A',
},
]);
const [BillingOverallColorsList, setBillingOverallColorsList] = useState();
const [BillUploadColor, setBillUploadColor] = useState(false);
const [TableColorType, setTableColorType] = useState('Y');
const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00');
@ -211,21 +152,55 @@ const TableHeadersetting = () => {
let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
(item) => item?.SessionName === 'BookingBilling'
);
let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find(
(item) => item?.SessionName === 'BookingNavbar'
);
let AllBillingdetails = AllDetails?.Components?.find(
(item) => item?.ComponentName === selectedBilling?.ComponentName
);
console.log(AllDetails, AllDetails?.Templates, 'templateresponse');
console.log(AllDetails, selectedNavbar, 'templateresponse');
setBillingSettings(AllBillingdetails);
const optionIds = selectedBilling?.FieldDetails?.map(
(item) => item?.OptionId
);
setSelectedBillTableCheckValues(optionIds);
let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId)
let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId)
setTableFontData(Allfontdata)
let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(item=>item?.SessionId === selectedBilling?.SessionId)
setSelectedTableFont(selectedFont?.FontId)
const hasHold = selectedNavbar?.FieldDetails?.some(
item => item.OptionName === "Hold"
);
const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
item => item.OptionName === "AddCustomer"
);
const hasDinein = selectedNavbar?.FieldDetails?.some(
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")
setTableBackgroundColorData(allBackcolordata)
let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(item=>item?.SessionName === 'BookingBilling')
console.log(selectedcolors, 'selectedOverallBackgroudcolor')
selectedcolors?.forEach((item) => {
if (item?.['BackgroundColor']) {
setSelectedTableColor(item?.['ColorId']);
} else if (item?.['OverallBackgroundColor']) {
setdropdownBillingOverallColor(item?.['ColorId']);
}
});
// await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
// formRef.current?.setFieldsValue({ BillingOverallColor: value });
// setTableBackgroundColorData
console.log(Allfontdata, 'All table colors');
// BookingBilling templateData?.['BookingBilling']?.[0]
@ -251,7 +226,7 @@ const TableHeadersetting = () => {
};
const selectTableColor = async (value) => {
await setSelectedTableColor(value);
formRef.current?.setFieldsValue({ TableColor: value });
// formRef.current?.setFieldsValue({ TableColor: value });
};
const BillhandleUploadColor = () => {
setBillUploadColor(true);
@ -299,7 +274,8 @@ const TableHeadersetting = () => {
setMessageData(response?.data?.response);
// BillsetUploadColor(false);
}
GetTemplatedetails()
setBillUploadColor(false)
} else {
setMessageData(response?.data?.response);
setMessageType('error');
@ -342,53 +318,46 @@ const TableHeadersetting = () => {
const handleBillingOverallColorSubmit = async () => {
let response;
// try {
// let postData = {
// BackgroundColor: BillingOverallColor,
// FontColor: '#000000',
// CreatedBy: getSession('UserId'),
// SessionId: BillingTableData[0]?.SessionId,
// OptionId: BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
// (item) => item.OptionName == 'OverallBackground'
// )?.[0]?.OptionId,
// };
// response = await dispatch(postColorData(postData)).unwrap();
// } catch (err) {
// if (err['message'] == 'Request failed with status code 422') {
// response = {
// data: {
// statusCode: 0,
// response: 'Color Not Added',
// data: [],
// },
// };
// }
// }
// if (response?.data?.statusCode == 1) {
// if (response?.data?.response == 'Color Already Exists') {
// setMessageType('warning');
// setMessageData(response?.data?.response);
// } else {
// setMessageType('success');
// setMessageData(response?.data?.response);
// setBillingUploadOverallColor(false);
// }
// let OverallBillingdata = {
// SessionID: BillingTableData[0]?.SessionId,
// OptionName: 'OverallBackground',
// };
// dispatch(getBillingOverallBackgroundColors(OverallBillingdata)).unwrap;
// } else {
// setMessageData(response?.data?.response);
// setMessageType('error');
// }
try {
let postData = {
BackgroundColor: BillingOverallColor,
FontColor: '#000000',
CreatedBy:UserId,
SessionId: billingSettings?.SessionId,
OptionId: OverallbackgroundOptionId,
};
response = await dispatch(postColorData(postData)).unwrap();
} catch (err) {
if (err['message'] == 'Request failed with status code 422') {
response = {
data: {
statusCode: 0,
response: 'Color Not Added',
data: [],
},
};
}
}
if (response?.data?.statusCode == 1) {
if (response?.data?.response == 'Color Already Exists') {
setMessageType('warning');
setMessageData(response?.data?.response);
} else {
setMessageType('success');
setMessageData(response?.data?.response);
setBillingUploadOverallColor(false);
}
GetTemplatedetails()
BillingUploadOverallColor(false)
} else {
setMessageData(response?.data?.response);
setMessageType('error');
}
};
const selectBillingOverallColor = async (value) => {
await setdropdownBillingOverallColor(value);
formRef.current?.setFieldsValue({ BillingOverallColor: value });
let billOverallColorVal = BillingOverallColorsList?.filter(
(data) => data?.ColorId === value
);
// formRef.current?.setFieldsValue({ BillingOverallColor: value });
};
const openColour4 = (value) => {
setTableColorType(value);
@ -440,6 +409,7 @@ const TableHeadersetting = () => {
}
dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
GetTemplatedetails()
Tableform.resetFields();
} else {
setMessageData(response?.data?.response);
@ -469,7 +439,14 @@ const TableHeadersetting = () => {
CompId: CompId,
UserId: UserId,
BranchId: BranchId,
ColorId: TemplateDetails?.[0]?.ColorDetail?.map((c) => c.ColorId),
ColorId: [
...(TemplateDetails?.[0]?.ColorDetail
?.filter(c => c.SessionName !== "BookingBilling")
?.map(c => c.ColorId) || []),
SelectedTableColor,
dropdownBillingOverallColor,
],
FontId: TemplateDetails?.[0]?.FontDetail?.map(f =>
f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId
),
@ -496,8 +473,8 @@ const TableHeadersetting = () => {
setMessageData('Template Details Added Successfully');
setFirstOnClick(false);
}
dispatch(changeScanTemplate({}))
await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
setModalOpen(false)
} else {
setMessageType('error');
setMessageData(response?.data?.response);
@ -538,7 +515,19 @@ const TableHeadersetting = () => {
value={value?.OptionId}
// onClick={() => Navholdoption(value.OptionName)}
key={value?.OptionId}
disabled={value.OptionName === 'Item' ? true : false}
disabled={
value.OptionName === 'Hold' && HoldButton
? true
: value.OptionName === 'AddCustomer' &&
AddCustomerButton
? true
: value.OptionName === 'Item'
? true
: value.OptionName === 'UnpaidBill' &&
!DineInChecked
? true
: false
}
>
{value.OptionName}
</Checkbox>
@ -682,8 +671,8 @@ const TableHeadersetting = () => {
label="Color"
className="field-DropDown-Selection"
onChangeFunction={selectTableColor}
// isOnchanges={SelectedTableColor ? true : false}
// valueData={SelectedTableColor}
isOnchanges={SelectedTableColor ? true : false}
valueData={SelectedTableColor}
/>
</Form.Item>
</div>

2
src/Pages/BookingScreen/Template/SalesCountForStandard.jsx
View File

@ -60,6 +60,7 @@ import { GoPackageDependencies } from 'react-icons/go';
import { Messages } from '../../../../ownLib/my-ui-lib.js';
import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx';
import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx';
const SalesCountForStandard = ({
DineInAccess,
@ -830,6 +831,7 @@ const SalesCountForStandard = ({
</button>
)}
{preferenceshortcutkey && <ShortcutKeyHelper />}
<AllSalesPageSettings />
<div style={{ display: 'flex', alignItems: 'center' }}>
{Customisebillno && <CustomisedInvoiceChange />}
{SessionData?.FeatureAddonData?.FeatureDtls?.find(