Initial commit - restaurant dashboard
هذا الالتزام موجود في:
RaghadMAlkous
186
src/components/Home/ResList/RestaurantSelection.js
Normal file
186
src/components/Home/ResList/RestaurantSelection.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
Skeleton
|
||||
} from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import { useRestaurant } from '../../../contexts/RestaurantContext';
|
||||
import RestaurantDetailsModal from './RestaurantDetailsModal';
|
||||
import authService from '../../../services/authService';
|
||||
const RestaurantSelection = ({ restaurants = [], loading = false }) => {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const navigate = useNavigate(); // استخدم navigate للتوجيه
|
||||
const { setRestaurantId } = useRestaurant();
|
||||
|
||||
const [selectedRestaurant, setSelectedRestaurant] = useState(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const handleSelectRestaurant = (id) => {
|
||||
setRestaurantId(id);
|
||||
navigate('/dashboard');
|
||||
};
|
||||
|
||||
const fetchRestaurantDetails = async (id) => {
|
||||
try {
|
||||
const result = await authService.getRestaurantById(id);
|
||||
if (result.success) {
|
||||
setSelectedRestaurant(result.data);
|
||||
setModalOpen(true);
|
||||
} else {
|
||||
alert(result.message || 'Failed to fetch restaurant details');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching restaurant details:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ دالة التوجيه عند الضغط على زر الإنشاء
|
||||
const handleCreateClick = () => {
|
||||
navigate('/create-restaurant'); // توجه مباشرة إلى صفحة الإنشاء
|
||||
};
|
||||
return (
|
||||
<Box sx={{ py: 8, backgroundColor: '#FAFAFA', minHeight: '100vh' }}>
|
||||
{/* زر إنشاء مطعم */}
|
||||
<Grid container spacing={1} justifyContent={isSmall ? 'center' : 'flex-start'} pl={isSmall ? 0 : 2}>
|
||||
<Box
|
||||
onClick={handleCreateClick}
|
||||
sx={{
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
borderRadius: 3,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
maxWidth: 250,
|
||||
maxHeight: 186,
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.3s',
|
||||
backgroundColor: '#fff',
|
||||
ml: { xs: 0, sm: 8, md: 28 },
|
||||
'&:hover': { transform: 'translateY(-5px)' },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 52, height: 52, borderRadius: '50%', backgroundColor: '#F6F6F6', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1 }}>
|
||||
<AddToPhotosIcon sx={{ fontSize: 30, color: theme.palette.primary.main }} />
|
||||
</Box>
|
||||
|
||||
<Typography fontWeight="600" variant="subtitle1" fontSize="1.25rem">
|
||||
Create New Restaurant
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Start from scratch and build your restaurant profile
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* قائمة المطاعم */}
|
||||
<Box sx={{ mt: 5, ml: { xs: 0, sm: 10, md: 30 } }}>
|
||||
<Typography variant="h6" fontWeight="bold" mb={3} textAlign={isSmall ? 'center' : 'flex-start'}>
|
||||
Existing Restaurants
|
||||
</Typography>
|
||||
|
||||
{restaurants.length === 0 && !loading ? (
|
||||
<Typography textAlign={isSmall ? 'center' : 'flex-start'} color="text.secondary" fontSize="1rem">
|
||||
No restaurants found. Create one to get started.
|
||||
</Typography>
|
||||
) : (
|
||||
<Grid container spacing={4} justifyContent={isSmall ? 'center' : 'flex-start'}>
|
||||
{(loading ? Array.from(new Array(3)) : restaurants).map((restaurant, index) => (
|
||||
<Grid key={restaurant?.id || index}>
|
||||
{loading ? (
|
||||
<Skeleton variant="rectangular" width={230} height={162} sx={{ borderRadius: 3 }} />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
borderRadius: 3,
|
||||
p: 3,
|
||||
width: '230px',
|
||||
height: '90%',
|
||||
maxHeight: '162px',
|
||||
transition: 'transform 0.2s',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
cursor: 'pointer',
|
||||
'&:hover': { transform: 'translateY(-3px)' },
|
||||
mx: 'auto',
|
||||
}}
|
||||
onClick={() => handleSelectRestaurant(restaurant.id)}
|
||||
>
|
||||
{/* أيقونة فتح المودال */}
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
fetchRestaurantDetails(restaurant.id);
|
||||
}}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
backgroundColor: 'rgba(255,255,255,0.8)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255,255,255,1)',
|
||||
transform: 'scale(1.1)',
|
||||
transition: 'transform 0.2s'
|
||||
},
|
||||
zIndex: 2,
|
||||
padding: 0.5
|
||||
}}
|
||||
size="small"
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
{/* صورة المطعم */}
|
||||
<Box
|
||||
sx={{ width: 110, height: 100, overflow: 'hidden', border: '2px solid #e0e0e0', mb: 1.5, mx: 'auto' }}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={restaurant.image || '/images/default-restaurant.png'}
|
||||
alt={restaurant.name}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* باقي الكارت */}
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Typography fontWeight="600" textAlign="center" fontSize="1.25rem" mb={0.5}>
|
||||
{restaurant.name}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" fontSize="0.9rem" textAlign="center" mb={1}>
|
||||
{restaurant.location || ' '}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* مودال المطعم */}
|
||||
<RestaurantDetailsModal
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
restaurant={selectedRestaurant}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RestaurantSelection;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم