rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix the edit popup

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-09-06 19:48:21 -06:00
parent c33de6ada5
commit 74d6a8b269
3 changed files with 136 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/private/catalogs/categories/Categories.jsx
View File

@@ -254,7 +254,7 @@ export default function Categories() {
}} }}
> >
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
<Typography variant="h6">Categories</Typography> <Typography color='text.primary' variant="h6">Categories</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<ToggleButtonGroup <ToggleButtonGroup

58
src/private/catalogs/products/AddOrEditProductCollectionForm.jsx
View File

@@ -1,6 +1,6 @@
// src/private/furniture/AddOrEditFurnitureVariantForm.jsx // src/private/furniture/AddOrEditFurnitureVariantForm.jsx
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { Box, Button, TextField, MenuItem, Grid, CircularProgress } from '@mui/material'; import { Box, Button, TextField, MenuItem, CircularProgress } from '@mui/material';
import FurnitureVariantApi from '../../../api/ProductsApi'; import FurnitureVariantApi from '../../../api/ProductsApi';
import CategoriesApi from '../../../api/CategoriesApi'; import CategoriesApi from '../../../api/CategoriesApi';
import TagTypeApi from '../../../api/TagTypeApi'; import TagTypeApi from '../../../api/TagTypeApi';
@@ -197,16 +197,16 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
return ( return (
<Box> <Box>
<Grid container spacing={2}> <Box display="flex" flexDirection="column" gap={2}>
<Grid item xs={12} md={6}> {/* Name */}
<TextField label="Model Id" fullWidth value={form.modelId} onChange={(e) => setVal('modelId', e.target.value)} />
</Grid>
<Grid item xs={12} md={6}>
<TextField label="Name" fullWidth value={form.name} onChange={(e) => setVal('name', e.target.value)} /> <TextField label="Name" fullWidth value={form.name} onChange={(e) => setVal('name', e.target.value)} />
</Grid> {/* Status */}
<TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
<MenuItem value="Active">Active</MenuItem>
<MenuItem value="Inactive">Inactive</MenuItem>
</TextField>
{/* Clasificación */} {/* Category / Provider */}
<Grid item xs={12} md={6}>
<TextField <TextField
select select
label="Category" label="Category"
@@ -220,9 +220,6 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12} md={6}>
<TextField <TextField
select select
label="Provider" label="Provider"
@@ -235,10 +232,8 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
{/* Específicos de variante */} {/* Color / Line / Currency */}
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Color" label="Color"
@@ -251,9 +246,6 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Line" label="Line"
@@ -266,9 +258,6 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Currency" label="Currency"
@@ -281,10 +270,8 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
{/* Atributos como catálogos */} {/* Attributes */}
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Material" label="Material"
@@ -297,9 +284,6 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Legs" label="Legs"
@@ -312,9 +296,6 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Origin" label="Origin"
@@ -327,24 +308,11 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem> <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
{/* Números */} {/* Stock / Price */}
<Grid item xs={12} md={4}>
<TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} /> <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
</Grid>
<Grid item xs={12} md={4}>
<TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} /> <TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} />
</Grid> </Box>
{/* Status */}
<Grid item xs={12} md={4}>
<TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
<MenuItem value="Active">Active</MenuItem>
<MenuItem value="Inactive">Inactive</MenuItem>
</TextField>
</Grid>
</Grid>
<Box display="flex" justifyContent="flex-end" mt={3} gap={1}> <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
<Button onClick={onCancel} className="button-transparent">Cancel</Button> <Button onClick={onCancel} className="button-transparent">Cancel</Button>

47
src/private/catalogs/products/ProductCollections.jsx
View File

@@ -81,15 +81,6 @@ export default function ProductCollections() {
}; };
}; };
const labelCategory = useMemo(() => buildLabelResolver(TYPE_NAMES.category), [byType]);
const labelProvider = useMemo(() => buildLabelResolver(TYPE_NAMES.provider), [byType]);
const labelColor = useMemo(() => buildLabelResolver(TYPE_NAMES.color), [byType]);
const labelLine = useMemo(() => buildLabelResolver(TYPE_NAMES.line), [byType]);
const labelCurrency = useMemo(() => buildLabelResolver(TYPE_NAMES.currency), [byType]);
const labelMaterial = useMemo(() => buildLabelResolver(TYPE_NAMES.material), [byType]);
const labelLegs = useMemo(() => buildLabelResolver(TYPE_NAMES.legs), [byType]);
const labelOrigin = useMemo(() => buildLabelResolver(TYPE_NAMES.origin), [byType]);
// Cargar TagTypes + Tags // Cargar TagTypes + Tags
useEffect(() => { useEffect(() => {
let mounted = true; let mounted = true;
@@ -273,10 +264,16 @@ export default function ProductCollections() {
]; ];
return ( return (
<Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}> <Box
<SectionContainer sx={{ px: 0, maxWidth: '100%!important', width: '100%' }}> sx={{
height: 'calc(100vh - 64px - 64px)',
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}> <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}>
<Typography variant="h6">Product Collection</Typography> <Typography color='text.primary' variant="h6">Product Collection</Typography>
<Box display="flex" alignItems="center" gap={2}> <Box display="flex" alignItems="center" gap={2}>
<ToggleButtonGroup <ToggleButtonGroup
value={statusFilter} value={statusFilter}
@@ -308,27 +305,20 @@ export default function ProductCollections() {
getRowHeight={() => 'auto'} getRowHeight={() => 'auto'}
columnBuffer={0} columnBuffer={0}
sx={{ sx={{
width: '100%', height: '100%',
'& .MuiDataGrid-cell': { '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
whiteSpace: 'normal',
wordBreak: 'break-word',
minHeight: '100%',
}, },
'& .MuiDataGrid-columnHeader': { '& .MuiDataGrid-filler': {
display: 'flex', display: 'none',
alignItems: 'center',
whiteSpace: 'normal',
wordBreak: 'break-word',
},
'& .MuiDataGrid-virtualScroller': {
overflowX: 'auto',
},
'& .MuiDataGrid-main': {
minWidth: '1000px',
}, },
}} }}
slots={{
noRowsOverlay: () => (
<Box sx={{ p: 2 }}>No product collection found. Try switching the status filter to "All".</Box>
),
}}
/> />
</Box> </Box>
@@ -349,7 +339,6 @@ export default function ProductCollections() {
/> />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</SectionContainer>
</Box> </Box>
); );
} }