Oreintation fixing
This commit is contained in:
parent
286fefede5
commit
03517b950b
|
|
@ -139,6 +139,18 @@ const SideMenuPozo = ({ items = [] }) => {
|
|||
const DineinDefault = useSelector(GlobalDineinDefault);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
|
||||
const [isLandscape, setIsLandscape] = useState(
|
||||
window.matchMedia('(orientation: landscape)').matches
|
||||
);
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsLandscape(window.matchMedia('(orientation: landscape)').matches);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setCollapse(window.innerWidth < 768);
|
||||
|
|
@ -368,7 +380,10 @@ const SideMenuPozo = ({ items = [] }) => {
|
|||
<div
|
||||
className={`SideMenuPozo-Master${collapse ? ' collapsed' : ''}`}
|
||||
ref={menuRef}
|
||||
style={{ height: isMobile ? '88%' : '' }}
|
||||
// style={{ height: isMobile ? '88%' : '' }}
|
||||
style={{
|
||||
height: isMobile ? (isLandscape ? '100%' : '100%') : '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -21,6 +21,18 @@ const BSBillingTable3overall = () => {
|
|||
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);
|
||||
const [isCartOpen, setIsCartOpen] = useState(window.innerWidth > 768);
|
||||
|
||||
const [isLandscape, setIsLandscape] = useState(
|
||||
window.matchMedia('(orientation: landscape)').matches
|
||||
);
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsLandscape(window.matchMedia('(orientation: landscape)').matches);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// ✅ Handle resize properly
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
|
|
@ -106,7 +118,7 @@ const BSBillingTable3overall = () => {
|
|||
}
|
||||
// style={{ height: containerHeight }}
|
||||
style={{
|
||||
height: isMobile ? '75vh' : '85vh',
|
||||
height: isMobile ? (isLandscape ? '75vh' : '83vh') : '85vh',
|
||||
}}
|
||||
>
|
||||
{/* ✅ Cart/Table */}
|
||||
|
|
|
|||
|
|
@ -1223,7 +1223,7 @@ const BSNavbar1 = (props, BookingNavbar) => {
|
|||
pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<BSNavBarFavItems />
|
||||
<BSNavBarFavItems setNavmenu={setNavmenu} />
|
||||
</div>
|
||||
)}
|
||||
{/* DragItem */}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { Button, Carousel, Skeleton } from 'antd';
|
||||
import { ArrowRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
ArrowRightOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import SelectionComponent from './SelectionComponent';
|
||||
import PreviewLayout1 from '../PreviewLayouts/PreviewLayout1';
|
||||
import PreviewLayout2 from '../PreviewLayouts/PreviewLayout2';
|
||||
|
|
@ -10,17 +14,28 @@ import PreViewLayout4 from '../PreviewLayouts/PreViewLayout4';
|
|||
import PreviewLayout5 from '../PreviewLayouts/PreviewLayout5';
|
||||
import PreViewLayout6 from '../PreviewLayouts/PreViewLayout6';
|
||||
import ComboLayout1 from '../PreviewLayouts/ComboLayout1';
|
||||
import { changeActiveTheme, changeOthersTheme, changeSelectedTheme, changeThemeCreation, getOthersTemplate, getPreviewData, getTemplate, GlobalActiveTheme, GlobalDefaultTheme, GlobalOthersTheme, GlobalSelectedTheme } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
changeActiveTheme,
|
||||
changeOthersTheme,
|
||||
changeSelectedTheme,
|
||||
changeThemeCreation,
|
||||
getOthersTemplate,
|
||||
getPreviewData,
|
||||
getTemplate,
|
||||
GlobalActiveTheme,
|
||||
GlobalDefaultTheme,
|
||||
GlobalOthersTheme,
|
||||
GlobalSelectedTheme,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import '../../../../Styles/BookingScreen/Components/SelectionComponent/MainPage.scss';
|
||||
import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2';
|
||||
import { getSession } from '../../../../Services/Others';
|
||||
import Buttons from '../../../../Components/Forms/Buttons';
|
||||
import { BiSkipNext, BiSkipPrevious } from 'react-icons/bi';
|
||||
import { MdOutlineDisplaySettings } from "react-icons/md";
|
||||
import { MdOutlineDisplaySettings } from 'react-icons/md';
|
||||
import { useAuth } from '../../../../AuthContext';
|
||||
import { getEmpAccess } from '../../../../Features/AppPage/CenterPage';
|
||||
|
||||
|
||||
const BookingSelectionPage = (props) => {
|
||||
const { SadminuserAccess } = useAuth();
|
||||
let SAAccessCommonMaster = SadminuserAccess?.find(
|
||||
|
|
@ -39,12 +54,12 @@ const BookingSelectionPage = (props) => {
|
|||
// const [activeTheme, setActiveTheme] = useState(
|
||||
// 'default'
|
||||
// );
|
||||
const activeTheme = useSelector(GlobalActiveTheme)
|
||||
const SelectedTheme = useSelector(GlobalSelectedTheme)
|
||||
const activeTheme = useSelector(GlobalActiveTheme);
|
||||
const SelectedTheme = useSelector(GlobalSelectedTheme);
|
||||
|
||||
const mergedThemes = DefaultThemes.concat(OthersTheme)
|
||||
const mergedThemes = DefaultThemes.concat(OthersTheme);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
console.log(SelectedTheme, "currentSlide")
|
||||
console.log(SelectedTheme, 'currentSlide');
|
||||
const [OthersCount, setOthersCount] = useState(1);
|
||||
const [isNext, isSetNext] = useState(true);
|
||||
const [empData, setEmpData] = useState();
|
||||
|
|
@ -68,9 +83,9 @@ const BookingSelectionPage = (props) => {
|
|||
: useSelector(getPreviewData);
|
||||
console.log(previewData, 'previewDatapreviewData');
|
||||
useEffect(() => {
|
||||
GetOthersTemplate()
|
||||
GetOthersTemplate();
|
||||
// gettemplatedetail()
|
||||
}, [])
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (UserType === 'Employee') {
|
||||
fetchApi();
|
||||
|
|
@ -111,7 +126,7 @@ const BookingSelectionPage = (props) => {
|
|||
).unwrap();
|
||||
|
||||
if (tempdetail?.data?.statusCode == 1) {
|
||||
dispatch(changeActiveTheme("customised"));
|
||||
dispatch(changeActiveTheme('customised'));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -149,7 +164,12 @@ const BookingSelectionPage = (props) => {
|
|||
setCurrentSlide(pendingSlide);
|
||||
let seltheme = updatedThemes[pendingSlide];
|
||||
dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
|
||||
dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
|
||||
dispatch(
|
||||
changeSelectedTheme({
|
||||
ThemeId: seltheme?.TemplatePreferenceId,
|
||||
ThemeName: seltheme?.ThemeName,
|
||||
})
|
||||
);
|
||||
}
|
||||
setPendingSlide(null); // Reset
|
||||
}
|
||||
|
|
@ -205,7 +225,12 @@ const BookingSelectionPage = (props) => {
|
|||
setCurrentSlide(newIndex);
|
||||
let seltheme = mergedThemes[newIndex];
|
||||
dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
|
||||
dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
|
||||
dispatch(
|
||||
changeSelectedTheme({
|
||||
ThemeId: seltheme?.TemplatePreferenceId,
|
||||
ThemeName: seltheme?.ThemeName,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -214,12 +239,18 @@ const BookingSelectionPage = (props) => {
|
|||
await GetLessTemplate();
|
||||
setPendingSlide(DefaultThemes.concat(OthersTheme).length - 1); // Ask to jump to last slide after fetch
|
||||
} else {
|
||||
const newIndex = (currentSlide - 1 + mergedThemes.length) % mergedThemes.length;
|
||||
const newIndex =
|
||||
(currentSlide - 1 + mergedThemes.length) % mergedThemes.length;
|
||||
carouselRef.current.goTo(newIndex);
|
||||
setCurrentSlide(newIndex);
|
||||
let seltheme = mergedThemes[newIndex];
|
||||
dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
|
||||
dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
|
||||
dispatch(
|
||||
changeSelectedTheme({
|
||||
ThemeId: seltheme?.TemplatePreferenceId,
|
||||
ThemeName: seltheme?.ThemeName,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
const CustomisedthemeSelection = async (seltheme) => {
|
||||
|
|
@ -236,16 +267,25 @@ const BookingSelectionPage = (props) => {
|
|||
}
|
||||
} else {
|
||||
if (Object.keys(DefaultThemes)?.length > 0) {
|
||||
dispatch(changeSelectedTheme({ ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, ThemeName: DefaultThemes?.[0]?.ThemeName }));
|
||||
dispatch(
|
||||
changeSelectedTheme({
|
||||
ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId,
|
||||
ThemeName: DefaultThemes?.[0]?.ThemeName,
|
||||
})
|
||||
);
|
||||
// settemplateData(DefaultThemes?.[0]);
|
||||
dispatch(changeThemeCreation({ formtype: 'edit', editdata: DefaultThemes?.[0] }));
|
||||
dispatch(
|
||||
changeThemeCreation({
|
||||
formtype: 'edit',
|
||||
editdata: DefaultThemes?.[0],
|
||||
})
|
||||
);
|
||||
} else {
|
||||
dispatch(changeSelectedTheme({}));
|
||||
dispatch(changeThemeCreation({ formtype: 'new' }));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handlesubmit = () => {
|
||||
const PostData = {};
|
||||
|
|
@ -256,7 +296,7 @@ const BookingSelectionPage = (props) => {
|
|||
PostData['ColorId'] = colorFilteredArray;
|
||||
PostData['FontId'] = fontFilteredArray;
|
||||
PostData['CreatedBy'] = UserId;
|
||||
}
|
||||
};
|
||||
const GetOthersTemplate = async () => {
|
||||
let OtherTemp = await dispatch(
|
||||
getOthersTemplate({ pagenumber: OthersCount })
|
||||
|
|
@ -266,7 +306,7 @@ const BookingSelectionPage = (props) => {
|
|||
...temp,
|
||||
ThemeName: `Theme ${index + 1 + OthersCount * 10 - 10}`,
|
||||
}));
|
||||
dispatch(changeOthersTheme(withname))
|
||||
dispatch(changeOthersTheme(withname));
|
||||
} else {
|
||||
}
|
||||
};
|
||||
|
|
@ -288,8 +328,7 @@ const BookingSelectionPage = (props) => {
|
|||
...temp,
|
||||
ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`,
|
||||
}));
|
||||
dispatch(changeOthersTheme(withname))
|
||||
|
||||
dispatch(changeOthersTheme(withname));
|
||||
} else {
|
||||
setMessageType('warning');
|
||||
setMessageData('No more templates');
|
||||
|
|
@ -306,22 +345,24 @@ const BookingSelectionPage = (props) => {
|
|||
...temp,
|
||||
ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`,
|
||||
}));
|
||||
dispatch(changeOthersTheme(withname))
|
||||
dispatch(changeOthersTheme(withname));
|
||||
|
||||
isSetNext(true);
|
||||
} else {
|
||||
}
|
||||
};
|
||||
const clearOtherTemplate = async () => {
|
||||
dispatch(changeOthersTheme([]))
|
||||
dispatch(changeOthersTheme([]));
|
||||
setOthersCount(1);
|
||||
};
|
||||
return (
|
||||
<div className='SalesSetupMaster'>
|
||||
|
||||
<div className="SalesSetupMaster">
|
||||
<div className="Salessetup-header">
|
||||
<h1 className="formHeader">
|
||||
<p> <MdOutlineDisplaySettings size={30} color='#2563eb' /> Sales Setup</p>
|
||||
<p>
|
||||
{' '}
|
||||
<MdOutlineDisplaySettings size={30} color="#2563eb" /> Sales Setup
|
||||
</p>
|
||||
<div>Customize your sales screen here </div>
|
||||
</h1>
|
||||
<div className="defaultandCustomisedThemeSales">
|
||||
|
|
@ -338,29 +379,24 @@ const BookingSelectionPage = (props) => {
|
|||
>
|
||||
<HiSquaresPlus size={16} /> Customized Theme
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{activeTheme === 'default' &&
|
||||
{activeTheme === 'default' && (
|
||||
<div className="Default-SubmitButton">
|
||||
<Buttons
|
||||
buttonText="Save"
|
||||
color="901D77"
|
||||
disabled = {addnewAccess}
|
||||
disabled={addnewAccess}
|
||||
handleSubmit={handleMainSubmit}
|
||||
icon={<ArrowRightOutlined />}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className='salesScreenView'
|
||||
>
|
||||
{activeTheme === 'default' ?
|
||||
<div className="salesScreenView">
|
||||
{activeTheme === 'default' ? (
|
||||
<>
|
||||
<div
|
||||
className="default-Sales-dotted-box"
|
||||
>
|
||||
|
||||
<div className="default-Sales-dotted-box">
|
||||
<Button
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => leftOnclick()}
|
||||
|
|
@ -406,20 +442,18 @@ const BookingSelectionPage = (props) => {
|
|||
</div>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'none' }}>
|
||||
<SelectionComponent ref={childRef} />
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="Sales-dotted-box"
|
||||
style={{ width: '55%', height: '85%', position: 'relative' }}
|
||||
>
|
||||
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
dots={false}
|
||||
|
|
@ -436,16 +470,14 @@ const BookingSelectionPage = (props) => {
|
|||
)}
|
||||
</Carousel>
|
||||
</div>
|
||||
<div className='SelectionComponentImport'>
|
||||
<div className="SelectionComponentImport">
|
||||
<SelectionComponent ref={childRef} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default BookingSelectionPage;
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const PreviewLayout1 = (props) => {
|
|||
)}
|
||||
/>{' '}
|
||||
</div>
|
||||
<div style={{ backgroundColor: '#fff'}}>
|
||||
<div style={{ backgroundColor: '#fff' }}>
|
||||
{Preview1Data?.BookingLayout?.[1] &&
|
||||
Preview1Data?.BookingBilling?.[0] != 'Billing1' &&
|
||||
Preview1Data?.BookingBilling?.[0] != 'Billing2' &&
|
||||
|
|
|
|||
|
|
@ -26,9 +26,14 @@ import { SlArrowDown } from 'react-icons/sl';
|
|||
import { IoCloseSharp } from 'react-icons/io5';
|
||||
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import "./BSNavBarFavItems.scss"
|
||||
import './BSNavBarFavItems.scss';
|
||||
|
||||
const BSNavBarFavItems = ({ type, fill, drawerOpen = false }) => {
|
||||
const BSNavBarFavItems = ({
|
||||
type,
|
||||
fill,
|
||||
drawerOpen = false,
|
||||
setNavmenu = () => {},
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [favopen, setFavopen] = useState(false);
|
||||
const globalAllItemdata = useSelector(GlobalAllItemData);
|
||||
|
|
|
|||
|
|
@ -85,13 +85,13 @@
|
|||
.AddFavList {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 17rem;
|
||||
top: 15rem;
|
||||
width: 100vw !important;
|
||||
padding: 1rem 1rem !important;
|
||||
}
|
||||
|
||||
.AddFavItemListCont {
|
||||
height: 34vh;
|
||||
height: 30vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
.AddFavList {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 17rem;
|
||||
top: 15rem;
|
||||
width: 100vw !important;
|
||||
padding: 1rem 1rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1775,11 +1775,6 @@ const RetailDashboard = () => {
|
|||
UserType === 'Super Admin' ||
|
||||
UserType === 'Super Admin User'
|
||||
) {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen().catch((err) => {
|
||||
console.error('Error attempting to enable fullscreen:', err);
|
||||
});
|
||||
}
|
||||
navigate(`${subDirectory}sales`);
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.BST1-Payment-onlypay {
|
||||
|
|
|
|||
|
|
@ -635,11 +635,10 @@
|
|||
//
|
||||
|
||||
.resNavbarMain {
|
||||
width: 100vw;
|
||||
width: max-content;
|
||||
max-width: 250px;
|
||||
height: 100vh;
|
||||
background-color: #00000056;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -648,7 +647,7 @@
|
|||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
overflow: visible;
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
animation: fadeInRes 0.3s ease;
|
||||
|
||||
&.closing {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
.AddFavItemListCont {
|
||||
height: 34vh;
|
||||
height: 30vh;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue