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

chore: show all the columns from db

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-09-06 19:19:40 -06:00
parent 15107a48bd
commit c33de6ada5
1 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -192,7 +192,7 @@ export default function ProductCollections() {
borderRadius: 2, borderRadius: 2,
p: 1, p: 1,
}} }}
onClick={() => { setEditRow(p.row); setOpen(true); }} onClick={() => { setEditRow(params.row); setOpen(true); }}
> >
<EditRoundedIcon fontSize="small" /> <EditRoundedIcon fontSize="small" />
</IconButton> </IconButton>
@@ -212,31 +212,30 @@ export default function ProductCollections() {
</Box> </Box>
), ),
}, },
{ field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
{ field: 'categoryId', headerName: 'Category', flex: 1, minWidth: 160 },
{ field: 'name', headerName: 'Name', width: 200 }, { field: 'providerId', headerName: 'Provider', flex: 1, minWidth: 160 },
{ field: 'categoryId', headerName: 'Category', width: 170, valueGetter: (p) => labelCategory(p?.row?.categoryId) }, { field: 'color', headerName: 'Color', flex: 1, minWidth: 160 },
{ field: 'providerId', headerName: 'Provider', width: 170, valueGetter: (p) => labelProvider(p?.row?.providerId) }, { field: 'line', headerName: 'Line', flex: 1, minWidth: 160 },
{ field: 'color', headerName: 'Color', width: 130, valueGetter: (p) => labelColor(p?.row?.color) },
{ field: 'line', headerName: 'Line', width: 130, valueGetter: (p) => labelLine(p?.row?.line) },
{ {
field: 'price', field: 'price',
headerName: 'Price', headerName: 'Price',
width: 130, flex: 1,
minWidth: 160,
type: 'number', type: 'number',
valueGetter: (p) => parsePrice(p?.row?.price), valueGetter: (p) => parsePrice(p?.row?.price),
renderCell: (p) => { renderCell: (p) => {
const currency = labelCurrency(p?.row?.currency || 'USD');
const val = parsePrice(p?.row?.price); const val = parsePrice(p?.row?.price);
const currency = p?.row?.currency || 'USD';
try { try {
return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD' }).format(val); return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(val);
} catch { } catch {
return `${currency} ${val.toFixed(2)}`; return `${currency} ${val.toFixed(2)}`;
} }
} }
}, },
{ field: 'currency', headerName: 'Currency', width: 120, valueGetter: (p) => labelCurrency(p?.row?.currency) }, { field: 'currency', headerName: 'Currency', flex: 1, minWidth: 160 },
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number', valueGetter: (p) => Number(p?.row?.stock ?? 0) }, { field: 'stock', headerName: 'Stock', flex: 1, minWidth: 160 },
{ {
field: 'attributes', field: 'attributes',
headerName: 'Attributes', headerName: 'Attributes',
@@ -246,17 +245,12 @@ export default function ProductCollections() {
filterable: false, filterable: false,
renderCell: (params) => { renderCell: (params) => {
const a = params?.row?.attributes || {}; const a = params?.row?.attributes || {};
const chips = [ const chips = Object.entries(a).filter(([, v]) => !!v);
['Material', labelMaterial(a.material)],
['Legs', labelLegs(a.legs)],
['Origin', labelOrigin(a.origin)],
].filter(([, value]) => !!value);
return ( return (
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{chips.map(([label, value]) => ( {chips.map(([key, value]) => (
<Box <Box
key={label} key={key}
component="span" component="span"
sx={{ sx={{
px: 1.5, px: 1.5,
@@ -268,19 +262,19 @@ export default function ProductCollections() {
lineHeight: '18px', lineHeight: '18px',
}} }}
> >
{label}: {value} {key}: {value}
</Box> </Box>
))} ))}
</Box> </Box>
); );
} }
}, },
{ field: 'status', headerName: 'Status', width: 120 } { field: 'status', headerName: 'Status', flex: 1, minWidth: 160 }
]; ];
return ( return (
<Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}> <Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}>
<SectionContainer> <SectionContainer sx={{ px: 0, maxWidth: '100%!important', width: '100%' }}>
<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 variant="h6">Product Collection</Typography>
<Box display="flex" alignItems="center" gap={2}> <Box display="flex" alignItems="center" gap={2}>
@@ -312,10 +306,28 @@ export default function ProductCollections() {
columns: { columnVisibilityModel: { id: false, _Id: false } }, columns: { columnVisibilityModel: { id: false, _Id: false } },
}} }}
getRowHeight={() => 'auto'} getRowHeight={() => 'auto'}
columnBuffer={0}
sx={{ sx={{
'& .MuiDataGrid-cell': { display: 'flex', alignItems: 'center' }, width: '100%',
'& .MuiDataGrid-columnHeader': { display: 'flex', alignItems: 'center' }, '& .MuiDataGrid-cell': {
'& .MuiDataGrid-virtualScroller': { overflowX: 'hidden' }, display: 'flex',
alignItems: 'center',
whiteSpace: 'normal',
wordBreak: 'break-word',
minHeight: '100%',
},
'& .MuiDataGrid-columnHeader': {
display: 'flex',
alignItems: 'center',
whiteSpace: 'normal',
wordBreak: 'break-word',
},
'& .MuiDataGrid-virtualScroller': {
overflowX: 'auto',
},
'& .MuiDataGrid-main': {
minWidth: '1000px',
},
}} }}
/> />
</Box> </Box>