sales page Setting modal Design
This commit is contained in:
Your Name
parent
441aab2d70
commit
7617a93431
|
|
@ -66,7 +66,9 @@ const AllSalesPageSettings = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />}
|
||||
{selectedComponent === 'Table' && (
|
||||
<TableHeadersetting setModalOpen={setsettingModal} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DefaultModal>
|
||||
|
|
|
|||
|
|
@ -92,11 +92,14 @@
|
|||
scrollbar-width: thin;
|
||||
padding-right: 10px;
|
||||
overflow: auto;
|
||||
.option-maindiv{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.option-maindiv {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ant-checkbox-wrapper {
|
||||
padding: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.SettingsListSwitchBTN {
|
||||
|
|
@ -157,3 +160,25 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@ import {
|
|||
import { useDispatch } from 'react-redux';
|
||||
import Buttons from '../../../../Components/Forms/Buttons';
|
||||
import { Messages } from '../../../../Components/Notifications/Messages';
|
||||
import './AllSalesPageSettings.scss';
|
||||
|
||||
const TableHeadersetting = ({setModalOpen}) => {
|
||||
const TableHeadersetting = ({ setModalOpen }) => {
|
||||
const dispatch = useDispatch();
|
||||
const SessionData = useSelector(StoredSessionData);
|
||||
const AppId = SessionData?.AppId;
|
||||
|
|
@ -45,7 +46,7 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
const [SelectedTableColor, setSelectedTableColor] = useState(null);
|
||||
const [Tableform] = Form.useForm();
|
||||
const [billingSettings, setBillingSettings] = useState();
|
||||
console.log(billingSettings,"billingSettingsbillingSettings")
|
||||
console.log(billingSettings, 'billingSettingsbillingSettings');
|
||||
const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
|
||||
useState([]);
|
||||
const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
|
||||
|
|
@ -63,9 +64,9 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
OverallbackgroundOptionId
|
||||
);
|
||||
// Hold and addcustomer OptionsDetails
|
||||
const [HoldButton, setHoldButton] = useState(false);
|
||||
const [AddCustomerButton, setAddCustomerButton] = useState(false);
|
||||
const [DineInChecked,setDineInChecked] = useState(false)
|
||||
const [HoldButton, setHoldButton] = useState(false);
|
||||
const [AddCustomerButton, setAddCustomerButton] = useState(false);
|
||||
const [DineInChecked, setDineInChecked] = useState(false);
|
||||
console.log(billingSettings, 'billingSettingsbillingSettings');
|
||||
const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
|
||||
{
|
||||
|
|
@ -152,7 +153,7 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
|
||||
(item) => item?.SessionName === 'BookingBilling'
|
||||
);
|
||||
let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find(
|
||||
let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
|
||||
(item) => item?.SessionName === 'BookingNavbar'
|
||||
);
|
||||
let AllBillingdetails = AllDetails?.Components?.find(
|
||||
|
|
@ -165,39 +166,51 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
);
|
||||
setSelectedBillTableCheckValues(optionIds);
|
||||
|
||||
let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId)
|
||||
setTableFontData(Allfontdata)
|
||||
let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(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)
|
||||
setSelectedTableFont(selectedFont?.FontId);
|
||||
const hasHold = selectedNavbar?.FieldDetails?.some(
|
||||
item => item.OptionName === "Hold"
|
||||
(item) => item.OptionName === 'Hold'
|
||||
);
|
||||
const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
|
||||
item => item.OptionName === "AddCustomer"
|
||||
const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
|
||||
(item) => item.OptionName === 'AddCustomer'
|
||||
);
|
||||
const hasDinein = selectedNavbar?.FieldDetails?.some(
|
||||
item => item.OptionName === "DineIn"
|
||||
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'
|
||||
);
|
||||
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']);
|
||||
|
||||
}
|
||||
});
|
||||
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 });
|
||||
|
||||
|
|
@ -242,48 +255,48 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleBackgroundColorSubmit= async () => {
|
||||
if (TablebackgroundColor !== TablefontColor) {
|
||||
let response;
|
||||
try {
|
||||
let postData = {
|
||||
BackgroundColor: TablebackgroundColor,
|
||||
FontColor: TablefontColor,
|
||||
CreatedBy: UserId,
|
||||
SessionId: billingSettings?.SessionId,
|
||||
OptionId: backgroundOptionId,
|
||||
const handleBackgroundColorSubmit = async () => {
|
||||
if (TablebackgroundColor !== TablefontColor) {
|
||||
let response;
|
||||
try {
|
||||
let postData = {
|
||||
BackgroundColor: TablebackgroundColor,
|
||||
FontColor: TablefontColor,
|
||||
CreatedBy: UserId,
|
||||
SessionId: billingSettings?.SessionId,
|
||||
OptionId: backgroundOptionId,
|
||||
};
|
||||
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: [],
|
||||
},
|
||||
};
|
||||
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);
|
||||
// BillsetUploadColor(false);
|
||||
}
|
||||
GetTemplatedetails()
|
||||
setBillUploadColor(false)
|
||||
} else {
|
||||
setMessageData(response?.data?.response);
|
||||
setMessageType('error');
|
||||
}
|
||||
} else {
|
||||
setMessageData('Please select different color for background and font');
|
||||
setMessageType('warning');
|
||||
}
|
||||
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);
|
||||
// BillsetUploadColor(false);
|
||||
}
|
||||
GetTemplatedetails();
|
||||
setBillUploadColor(false);
|
||||
} else {
|
||||
setMessageData(response?.data?.response);
|
||||
setMessageType('error');
|
||||
}
|
||||
} else {
|
||||
setMessageData('Please select different color for background and font');
|
||||
setMessageType('warning');
|
||||
}
|
||||
};
|
||||
const TableonCancel4 = () => {
|
||||
setBillUploadColor(false);
|
||||
|
|
@ -318,46 +331,45 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
const handleBillingOverallColorSubmit = async () => {
|
||||
let response;
|
||||
|
||||
try {
|
||||
let postData = {
|
||||
BackgroundColor: BillingOverallColor,
|
||||
FontColor: '#000000',
|
||||
CreatedBy:UserId,
|
||||
SessionId: billingSettings?.SessionId,
|
||||
OptionId: OverallbackgroundOptionId,
|
||||
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: [],
|
||||
},
|
||||
};
|
||||
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 {
|
||||
}
|
||||
if (response?.data?.statusCode == 1) {
|
||||
if (response?.data?.response == 'Color Already Exists') {
|
||||
setMessageType('warning');
|
||||
setMessageData(response?.data?.response);
|
||||
setMessageType('error');
|
||||
} 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 });
|
||||
|
||||
};
|
||||
const openColour4 = (value) => {
|
||||
setTableColorType(value);
|
||||
|
|
@ -371,7 +383,7 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
validateFontsTable(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`;
|
||||
fetch(apiUrl)
|
||||
.then((response) => response.json())
|
||||
|
|
@ -381,7 +393,6 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
if (fontNames.includes(formatFontName(values['TableFont']))) {
|
||||
let response;
|
||||
try {
|
||||
|
||||
let postData = {
|
||||
SessionFont: formatFontName(values['TableFont']),
|
||||
CreatedBy: UserId,
|
||||
|
|
@ -409,16 +420,15 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
}
|
||||
|
||||
dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
|
||||
GetTemplatedetails()
|
||||
GetTemplatedetails();
|
||||
Tableform.resetFields();
|
||||
} else {
|
||||
setMessageData(response?.data?.response);
|
||||
setMessageType('error');
|
||||
}
|
||||
} else {
|
||||
setMessageType('warning');
|
||||
setMessageType('warning');
|
||||
setMessageData('Please give the Correct google fonts Name!');
|
||||
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -439,17 +449,17 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
CompId: CompId,
|
||||
UserId: UserId,
|
||||
BranchId: BranchId,
|
||||
ColorId: [
|
||||
...(TemplateDetails?.[0]?.ColorDetail
|
||||
?.filter(c => c.SessionName !== "BookingBilling")
|
||||
?.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
|
||||
),
|
||||
SelectedTableColor,
|
||||
dropdownBillingOverallColor,
|
||||
],
|
||||
FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
|
||||
f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
|
||||
),
|
||||
CreatedBy: UserId,
|
||||
TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
|
||||
ComponentId: comp.ComponentId, // ✅ dynamic
|
||||
|
|
@ -457,42 +467,40 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
comp.SessionName === 'BookingBilling'
|
||||
? SelectedBillTableCheckValues?.map((id) => ({ OptionId: id })) // ✅ NEW checked list
|
||||
: comp.FieldDetails.map((field) => ({ OptionId: field.OptionId })), // existing
|
||||
})),
|
||||
})),
|
||||
};
|
||||
console.log(result, 'final result to submit');
|
||||
var response = await dispatch(putSelectionComponentData(result)).unwrap();
|
||||
if (response?.data?.statusCode == 1) {
|
||||
if (
|
||||
response?.data?.response === 'Application Template Already Exists'
|
||||
) {
|
||||
setMessageType('warning');
|
||||
setMessageData('Application Template Already Exists');
|
||||
setFirstOnClick(false);
|
||||
} else {
|
||||
setMessageType('success');
|
||||
setMessageData('Template Details Added Successfully');
|
||||
setFirstOnClick(false);
|
||||
}
|
||||
await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
|
||||
setModalOpen(false)
|
||||
} else {
|
||||
setMessageType('error');
|
||||
setMessageData(response?.data?.response);
|
||||
setFirstOnClick(false);
|
||||
}
|
||||
if (response?.data?.statusCode == 1) {
|
||||
if (response?.data?.response === 'Application Template Already Exists') {
|
||||
setMessageType('warning');
|
||||
setMessageData('Application Template Already Exists');
|
||||
setFirstOnClick(false);
|
||||
} else {
|
||||
setMessageType('success');
|
||||
setMessageData('Template Details Added Successfully');
|
||||
setFirstOnClick(false);
|
||||
}
|
||||
await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
|
||||
setModalOpen(false);
|
||||
} else {
|
||||
setMessageType('error');
|
||||
setMessageData(response?.data?.response);
|
||||
setFirstOnClick(false);
|
||||
}
|
||||
};
|
||||
const onComplete = useCallback(() => {
|
||||
setMessageData(null);
|
||||
setMessageType(null);
|
||||
}, []);
|
||||
const onComplete = useCallback(() => {
|
||||
setMessageData(null);
|
||||
setMessageType(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Messages
|
||||
messageType={messageType}
|
||||
messageData={messageData}
|
||||
onComplete={onComplete}
|
||||
/>
|
||||
<Messages
|
||||
messageType={messageType}
|
||||
messageData={messageData}
|
||||
onComplete={onComplete}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -516,18 +524,16 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
// onClick={() => Navholdoption(value.OptionName)}
|
||||
key={value?.OptionId}
|
||||
disabled={
|
||||
value.OptionName === 'Hold' && HoldButton
|
||||
? true
|
||||
: value.OptionName === 'AddCustomer' &&
|
||||
AddCustomerButton
|
||||
? true
|
||||
: value.OptionName === 'Item'
|
||||
? true
|
||||
: value.OptionName === 'UnpaidBill' &&
|
||||
!DineInChecked
|
||||
? true
|
||||
: false
|
||||
}
|
||||
value.OptionName === 'Hold' && HoldButton
|
||||
? true
|
||||
: value.OptionName === 'AddCustomer' && AddCustomerButton
|
||||
? true
|
||||
: value.OptionName === 'Item'
|
||||
? true
|
||||
: value.OptionName === 'UnpaidBill' && !DineInChecked
|
||||
? true
|
||||
: false
|
||||
}
|
||||
>
|
||||
{value.OptionName}
|
||||
</Checkbox>
|
||||
|
|
@ -545,28 +551,259 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
</div>
|
||||
))} */}
|
||||
</div>
|
||||
<div style={{ flex: '0 0 48%' }}>
|
||||
<p style={{ marginBottom: '8px', fontWeight: '500' }}>BillTable Font</p>
|
||||
<DropDowns
|
||||
options={TableFontData?.map((option) => ({
|
||||
value: option.FontId,
|
||||
label: option.SessionFont,
|
||||
}))}
|
||||
label="Font"
|
||||
onChangeFunction={selectFont3}
|
||||
className="settingsales-DropDown-Selection"
|
||||
isOnchanges={!!selectedTableFont}
|
||||
valueData={selectedTableFont}
|
||||
/>
|
||||
<div
|
||||
className="settingaddNewSalesFiledBTN"
|
||||
onClick={TablehandleUploadFonts}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd
|
||||
// className="plusOutlinedIcon"
|
||||
/>
|
||||
<div className="selctfontBackInputMain">
|
||||
<div className="selctfontBackInput">
|
||||
<p className="SelectionComponentSubHeading">BillTable Font</p>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '10px',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<DropDowns
|
||||
options={TableFontData?.map((option) => ({
|
||||
value: option.FontId,
|
||||
label: option.SessionFont,
|
||||
}))}
|
||||
label="Font"
|
||||
onChangeFunction={selectFont3}
|
||||
className="settingsales-DropDown-Selection"
|
||||
isOnchanges={!!selectedTableFont}
|
||||
valueData={selectedTableFont}
|
||||
/>
|
||||
<div
|
||||
className="settingaddNewSalesFiledBTN"
|
||||
onClick={TablehandleUploadFonts}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd
|
||||
// className="plusOutlinedIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasBackground ? (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="colorDropdown">
|
||||
<Form.Item
|
||||
name="TableColor"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select Color',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<p className="SelectionComponentSubHeading">
|
||||
BillTable Background Color
|
||||
</p>
|
||||
<DropDowns
|
||||
options={TableBackgroundColorData?.map((option) => ({
|
||||
value: option.ColorId,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '25.774192810058594px',
|
||||
backgroundColor: option.BackgroundColor,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '50px',
|
||||
marginLeft: '15px',
|
||||
backgroundColor: option.FontColor,
|
||||
}}
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div>{option.ThemeName}</div>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
labelChange={true}
|
||||
label="Color"
|
||||
className="field-DropDown-Selection"
|
||||
onChangeFunction={selectTableColor}
|
||||
isOnchanges={SelectedTableColor ? true : false}
|
||||
valueData={SelectedTableColor}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
className="addNewSalesFiledBTN"
|
||||
onClick={BillhandleUploadColor}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd className="plusOutlinedIcon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{hasOverallBackground ? (
|
||||
<div>
|
||||
<Modal
|
||||
open={BillingUploadOverallColor}
|
||||
title="BillTable Overall Background Color"
|
||||
closeIcon={
|
||||
<CloseOutlined
|
||||
onClick={() => {
|
||||
setBillingUploadOverallColor(false);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
width={400}
|
||||
footer={null}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
align: 'center',
|
||||
width: '60%',
|
||||
gap: '0.5rem',
|
||||
border: '1px solid black',
|
||||
borderRadius: '10px',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: '14px', fontWeight: 700 }}>
|
||||
Selected Color:{' '}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
width: '35px',
|
||||
height: '23px',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: BillingOverallColor
|
||||
? BillingOverallColor
|
||||
: null,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="hex-input">
|
||||
<InputField
|
||||
prefix="#"
|
||||
value={billingOverallHex}
|
||||
inputMode="numeric"
|
||||
maxLength={8}
|
||||
onChange={handleBillingOverallHexCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SwatchesPicker onChange={handleBillingOverallColorChange} />
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="colorBtn"
|
||||
onClick={handleBillingOverallColorSubmit}
|
||||
>
|
||||
SAVE
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="colorDropdown">
|
||||
<Form.Item
|
||||
name="BillingOverallColor"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select Color',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<p className="SelectionComponentSubHeading">
|
||||
BillTable Overall-Background
|
||||
</p>
|
||||
<DropDowns
|
||||
options={BillingOverallColorsList?.map((option) => ({
|
||||
value: option.ColorId,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '25.774192810058594px',
|
||||
backgroundColor: option.BackgroundColor,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '50px',
|
||||
marginLeft: '15px',
|
||||
backgroundColor: option.FontColor,
|
||||
}}
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div>{option.ThemeName}</div>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
labelChange={true}
|
||||
label={
|
||||
<p style={{ fontSize: '11px' }}>Overall Background</p>
|
||||
}
|
||||
className="field-DropDown-Selection"
|
||||
onChangeFunction={selectBillingOverallColor}
|
||||
isOnchanges={dropdownBillingOverallColor ? true : false}
|
||||
valueData={dropdownBillingOverallColor}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
className="addNewSalesFiledBTN"
|
||||
onClick={handleBillingUploadOverallColor}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd
|
||||
className="plusOutlinedIcon"
|
||||
onClick={handleBillingUploadOverallColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<DefaultModal
|
||||
open={TableFontModelopen}
|
||||
|
|
@ -610,222 +847,7 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
handleSubmit={TablehandleSubmit}
|
||||
buttonText="SAVE"
|
||||
/>
|
||||
{hasBackground ? (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="colorDropdown">
|
||||
<Form.Item
|
||||
name="TableColor"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select Color',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<p className="Selection-Component-SubHeading">
|
||||
BillTable Background Color
|
||||
</p>
|
||||
<DropDowns
|
||||
options={TableBackgroundColorData?.map((option) => ({
|
||||
value: option.ColorId,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '25.774192810058594px',
|
||||
backgroundColor: option.BackgroundColor,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '50px',
|
||||
marginLeft: '15px',
|
||||
backgroundColor: option.FontColor,
|
||||
}}
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div>{option.ThemeName}</div>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
labelChange={true}
|
||||
label="Color"
|
||||
className="field-DropDown-Selection"
|
||||
onChangeFunction={selectTableColor}
|
||||
isOnchanges={SelectedTableColor ? true : false}
|
||||
valueData={SelectedTableColor}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
className="addNewSalesFiledBTN"
|
||||
onClick={BillhandleUploadColor}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd className="plusOutlinedIcon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{hasOverallBackground ? (
|
||||
<div>
|
||||
<Modal
|
||||
open={BillingUploadOverallColor}
|
||||
title="BillTable Overall Background Color"
|
||||
closeIcon={
|
||||
<CloseOutlined
|
||||
onClick={() => {
|
||||
setBillingUploadOverallColor(false);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
width={400}
|
||||
footer={null}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
align: 'center',
|
||||
width: '60%',
|
||||
gap: '0.5rem',
|
||||
border: '1px solid black',
|
||||
borderRadius: '10px',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: '14px', fontWeight: 700 }}>
|
||||
Selected Color:{' '}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
width: '35px',
|
||||
height: '23px',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: BillingOverallColor
|
||||
? BillingOverallColor
|
||||
: null,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="hex-input">
|
||||
<InputField
|
||||
prefix="#"
|
||||
value={billingOverallHex}
|
||||
inputMode="numeric"
|
||||
maxLength={8}
|
||||
onChange={handleBillingOverallHexCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SwatchesPicker onChange={handleBillingOverallColorChange} />
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="colorBtn"
|
||||
onClick={handleBillingOverallColorSubmit}
|
||||
>
|
||||
SAVE
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="colorDropdown">
|
||||
<Form.Item
|
||||
name="BillingOverallColor"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select Color',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<p className="Selection-Component-SubHeading">
|
||||
BillTable Overall-Background
|
||||
</p>
|
||||
<DropDowns
|
||||
options={BillingOverallColorsList?.map((option) => ({
|
||||
value: option.ColorId,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '25.774192810058594px',
|
||||
backgroundColor: option.BackgroundColor,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: '27px',
|
||||
height: '27px',
|
||||
borderRadius: '50px',
|
||||
marginLeft: '15px',
|
||||
backgroundColor: option.FontColor,
|
||||
}}
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div>{option.ThemeName}</div>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
labelChange={true}
|
||||
label={<p style={{ fontSize: '11px' }}>Overall Background</p>}
|
||||
className="field-DropDown-Selection"
|
||||
onChangeFunction={selectBillingOverallColor}
|
||||
isOnchanges={dropdownBillingOverallColor ? true : false}
|
||||
valueData={dropdownBillingOverallColor}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
className="addNewSalesFiledBTN"
|
||||
onClick={handleBillingUploadOverallColor}
|
||||
>
|
||||
Add
|
||||
<IoMdAdd
|
||||
className="plusOutlinedIcon"
|
||||
onClick={handleBillingUploadOverallColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<Modal
|
||||
open={BillUploadColor}
|
||||
title="Colors"
|
||||
|
|
@ -935,7 +957,6 @@ const TableHeadersetting = ({setModalOpen}) => {
|
|||
icon={<ArrowRightOutlined />}
|
||||
htmlType={true}
|
||||
handleSubmit={HandleSubmit}
|
||||
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue