Oreintation fixing

This commit is contained in:
vignesh 2026-03-26 15:04:15 +05:30
parent 286fefede5
commit 03517b950b
11 changed files with 163 additions and 104 deletions

View File

@ -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={{

View File

@ -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 */}

View File

@ -1223,7 +1223,7 @@ const BSNavbar1 = (props, BookingNavbar) => {
pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
}}
>
<BSNavBarFavItems />
<BSNavBarFavItems setNavmenu={setNavmenu} />
</div>
)}
{/* DragItem */}

View File

@ -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,10 +379,9 @@ const BookingSelectionPage = (props) => {
>
<HiSquaresPlus size={16} /> Customized Theme
</div>
</div>
{activeTheme === 'default' &&
{activeTheme === 'default' && (
<div className="Default-SubmitButton">
<Buttons
buttonText="Save"
@ -351,16 +391,12 @@ const BookingSelectionPage = (props) => {
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;

View File

@ -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);

View File

@ -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;
}

View File

@ -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`);
}
}}

View File

@ -4,6 +4,7 @@
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
.BST1-Payment-onlypay {

View File

@ -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 {

View File

@ -85,7 +85,7 @@
}
.AddFavItemListCont {
height: 34vh;
height: 30vh;
padding-bottom: 4rem;
}
}