117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import Button from '@mui/material/Button';
|
|
import RadioGroup from '@mui/material/RadioGroup';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import Radio from '@mui/material/Radio';
|
|
import Typography from '@mui/material/Typography';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import Box from '@mui/material/Box';
|
|
|
|
const CartSyncDialog = ({ open, localCart = [], serverCart = [], onClose, onConfirm }) => {
|
|
const [option, setOption] = useState('merge');
|
|
|
|
// Helper function to determine if an item is selected in the result
|
|
const isItemSelected = (item, cart, isResultCart = false) => {
|
|
if (isResultCart) return true; // All items in result cart are selected
|
|
|
|
switch (option) {
|
|
case 'deleteServer':
|
|
return cart === localCart;
|
|
case 'useServer':
|
|
return cart === serverCart;
|
|
case 'merge':
|
|
return true; // Both carts contribute to merge
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
const renderCartItem = (item, cart, isResultCart = false) => {
|
|
const selected = isItemSelected(item, cart, isResultCart);
|
|
|
|
return (
|
|
<ListItem
|
|
key={item.id}
|
|
sx={{
|
|
opacity: selected ? 1 : 0.4,
|
|
backgroundColor: selected ? 'action.selected' : 'transparent',
|
|
borderRadius: 1,
|
|
mb: 0.5
|
|
}}
|
|
>
|
|
<Typography variant="body2">
|
|
{item.name} x {item.quantity}
|
|
</Typography>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
|
|
<DialogTitle>Warenkorb-Synchronisierung</DialogTitle>
|
|
<DialogContent>
|
|
<Typography paragraph>
|
|
Sie haben einen gespeicherten Warenkorb in ihrem Account. Bitte wählen Sie, wie Sie verfahren möchten:
|
|
</Typography>
|
|
<RadioGroup value={option} onChange={e => setOption(e.target.value)}>
|
|
{/*<FormControlLabel
|
|
value="useLocalArchive"
|
|
control={<Radio />}
|
|
label="Lokalen Warenkorb verwenden und Serverseitigen Warenkorb archivieren"
|
|
/>*/}
|
|
<FormControlLabel
|
|
value="deleteServer"
|
|
control={<Radio />}
|
|
label="Server-Warenkorb löschen"
|
|
/>
|
|
<FormControlLabel
|
|
value="useServer"
|
|
control={<Radio />}
|
|
label="Server-Warenkorb übernehmen"
|
|
/>
|
|
<FormControlLabel
|
|
value="merge"
|
|
control={<Radio />}
|
|
label="Warenkörbe zusammenführen"
|
|
/>
|
|
</RadioGroup>
|
|
|
|
<Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
|
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
|
<Typography variant="h6">Ihr aktueller Warenkorb</Typography>
|
|
<List sx={{ maxHeight: 300, overflow: 'auto' }}>
|
|
{localCart.length > 0
|
|
? localCart.map(item => renderCartItem(item, localCart))
|
|
: <Typography color="text.secondary" sx={{ p: 2 }}>leer</Typography>}
|
|
</List>
|
|
</Box>
|
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
|
<Typography variant="h6">In Ihrem Profil gespeicherter Warenkorb</Typography>
|
|
<List sx={{ maxHeight: 300, overflow: 'auto' }}>
|
|
{serverCart.length > 0
|
|
? serverCart.map(item => renderCartItem(item, serverCart))
|
|
: <Typography color="text.secondary" sx={{ p: 2 }}>leer</Typography>}
|
|
</List>
|
|
</Box>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>Abbrechen</Button>
|
|
<Button variant="contained" onClick={() => onConfirm(option)}>
|
|
Weiter
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default CartSyncDialog;
|