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

Compare commits

base: rodolfo_ruiz:c33de6ada500c4e56dd93014af1a48286ffd2e3d
Branches Tags
rodolfo_ruiz:main
...
compare: rodolfo_ruiz:01a19b9144fbfd14f636b8f0f8f4ae091f6f35cc
Branches Tags
rodolfo_ruiz:main

2 Commits
c33de6ada5 ... 01a19b9144

Author SHA1 Message Date
Rodolfo Ruiz
01a19b9144 chore: improve the ui for Products 2025-09-06 19:53:10 -06:00
Rodolfo Ruiz
74d6a8b269 chore: fix the edit popup 2025-09-06 19:48:21 -06:00
3 changed files with 158 additions and 174 deletions
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

105
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,17 @@ 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)} /> <TextField
</Grid> label="Name"
<Grid item xs={12} md={6}> fullWidth
<TextField label="Name" fullWidth value={form.name} onChange={(e) => setVal('name', e.target.value)} /> value={form.name}
</Grid> onChange={(e) => setVal('name', e.target.value)}
sx={{ mt: 1 }}
/>
{/* Clasificación */} {/* Category / Provider */}
<Grid item xs={12} md={6}>
<TextField <TextField
select select
label="Category" label="Category"
@@ -220,9 +221,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 +233,10 @@ 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 */} <Box display="flex" gap={2}>
<Grid item xs={12} md={4}> {/* Color */}
<Box flex={1}>
<TextField <TextField
select select
label="Color" label="Color"
@@ -251,9 +249,9 @@ 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> </Box>
{/* Line */}
<Grid item xs={12} md={4}> <Box flex={1}>
<TextField <TextField
select select
label="Line" label="Line"
@@ -266,25 +264,9 @@ 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> </Box>
{/* Material */}
<Grid item xs={12} md={4}> <Box flex={1}>
<TextField
select
label="Currency"
fullWidth
value={form.currency}
onChange={(e) => setVal('currency', e.target.value)}
>
{loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
{!loadingTags && options.currencies.filter(t => t.status !== 'Inactive').map(tag => (
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))}
</TextField>
</Grid>
{/* Atributos como catálogos */}
<Grid item xs={12} md={4}>
<TextField <TextField
select select
label="Material" label="Material"
@@ -297,9 +279,36 @@ 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> </Box>
</Box>
<Grid item xs={12} md={4}> <Box display="flex" gap={2}>
{/* Price */}
<Box flex={1}>
<TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} />
</Box>
{/* Stock */}
<Box flex={1}>
<TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
</Box>
{/* Currency */}
<Box flex={1}>
<TextField
select
label="Currency"
fullWidth
value={form.currency}
onChange={(e) => setVal('currency', e.target.value)}
>
{loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
{!loadingTags && options.currencies.filter(t => t.status !== 'Inactive').map(tag => (
<MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
))}
</TextField>
</Box>
</Box>
{/* Attributes */}
<TextField <TextField
select select
label="Legs" label="Legs"
@@ -312,9 +321,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 +333,13 @@ 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 */}
<Grid item xs={12} md={4}>
<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)} />
</Grid>
{/* Status */} {/* Status */}
<Grid item xs={12} md={4}>
<TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}> <TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
<MenuItem value="Active">Active</MenuItem> <MenuItem value="Active">Active</MenuItem>
<MenuItem value="Inactive">Inactive</MenuItem> <MenuItem value="Inactive">Inactive</MenuItem>
</TextField> </TextField>
</Grid> </Box>
</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>
); );
} }