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

chore: add the logic to see in view mode the categories as well

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-09-06 20:08:39 -06:00
parent 6b8d5acc0d
commit efdb48919f
2 changed files with 57 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/private/catalogs/categories/AddOrEditCategoryForm.jsx
View File

@@ -43,7 +43,7 @@ function formatDateSafe(value) {
}).format(d);
}
export default function AddOrEditCategoryForm({ onAdd, initialData, onCancel, materials: materialsProp = [], initialMaterialNames = [] }) {
export default function AddOrEditCategoryForm({ onAdd, initialData, onCancel, materials: materialsProp = [], initialMaterialNames = [], viewOnly = false }) {
const { user } = useAuth();
const token = user?.thalosToken || localStorage.getItem('thalosToken');
const api = useMemo(() => new CategoriesApi(token), [token]);
@@ -248,6 +248,7 @@ const tagLabelById = useMemo(() => {
fullWidth
sx={{ mb: 2 }}
InputProps={{ readOnly: true }}
disabled={viewOnly}
/>
)}
@@ -259,6 +260,7 @@ const tagLabelById = useMemo(() => {
fullWidth
sx={{ mb: 2 }}
required
disabled={viewOnly}
/>
<TextField
@@ -270,6 +272,7 @@ const tagLabelById = useMemo(() => {
fullWidth
sx={{ mb: 2 }}
required
disabled={viewOnly}
>
{types.map((t) => {
const value = t._id;
@@ -304,6 +307,7 @@ const tagLabelById = useMemo(() => {
}}
fullWidth
sx={{ mb: 2 }}
disabled={viewOnly}
>
{allTags.map((t) => {
const value = t._id;
@@ -323,6 +327,7 @@ const tagLabelById = useMemo(() => {
onChange={handleChange}
fullWidth
sx={{ mb: 2 }}
disabled={viewOnly}
/>
<TextField
@@ -333,6 +338,7 @@ const tagLabelById = useMemo(() => {
onChange={handleChange}
fullWidth
sx={{ mb: 2 }}
disabled={viewOnly}
/>
<TextField
@@ -343,6 +349,7 @@ const tagLabelById = useMemo(() => {
fullWidth
sx={{ mb: 2 }}
required
disabled={viewOnly}
/>
<TextField
@@ -353,6 +360,7 @@ const tagLabelById = useMemo(() => {
select
fullWidth
sx={{ mb: 2 }}
disabled={viewOnly}
>
<MenuItem value="Active">Active</MenuItem>
<MenuItem value="Inactive">Inactive</MenuItem>
@@ -368,12 +376,14 @@ const tagLabelById = useMemo(() => {
) : null}
<Box display="flex" justifyContent="space-between" gap={1} mt={3}>
{form._id ? (
{form._id && !viewOnly ? (
<Button color="error" onClick={handleDelete}>Delete</Button>
) : <span />}
<Box sx={{ display: 'flex', gap: 1 }}>
<Button onClick={onCancel} className="button-transparent">Cancel</Button>
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
<Button onClick={onCancel} className="button-transparent">{viewOnly ? 'Close' : 'Cancel'}</Button>
{!viewOnly && (
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
)}
</Box>
</Box>
</Paper>

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

@@ -6,6 +6,7 @@ import {
import { DataGrid } from '@mui/x-data-grid';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
import AddOrEditCategoryForm from './AddOrEditCategoryForm';
import CategoriesApi from '../../../api/CategoriesApi';
import { useAuth } from '../../../context/AuthContext';
@@ -22,6 +23,7 @@ export default function Categories() {
const [editingCategory, setEditingCategory] = useState(null);
const [confirmOpen, setConfirmOpen] = useState(false);
const [rowToDelete, setRowToDelete] = useState(null);
const [viewOnly, setViewOnly] = useState(false);
const hasLoaded = useRef(false);
const pageSize = 100; // Número de filas por página
@@ -68,11 +70,13 @@ export default function Categories() {
};
const handleAddClick = () => {
setViewOnly(false);
setEditingCategory(null);
setOpen(true);
};
const handleEditClick = (params) => {
setViewOnly(false);
const r = params?.row;
if (!r) return;
setEditingCategory({
@@ -164,6 +168,44 @@ export default function Categories() {
>
<EditRoundedIcon fontSize="small" />
</IconButton>
<IconButton
size="small"
sx={{
backgroundColor: '#E3F2FD',
color: '#1565C0',
'&:hover': { backgroundColor: '#BBDEFB' },
borderRadius: 2,
p: 1,
}}
onClick={() => {
const r = params?.row;
if (!r) return;
setEditingCategory({
_id: String(r._id || ''),
id: String(r.id || ''),
tagName: r.tagName || r.name || '',
typeId: r.typeId || '',
parentTagId: Array.isArray(r.parentTagId) ? r.parentTagId : [],
slug: r.slug || '',
displayOrder: Number(r.displayOrder ?? 0),
icon: r.icon || '',
status: r.status ?? 'Active',
materialNames: Array.isArray(r.materialNames)
? r.materialNames
: (typeof r.material === 'string'
? r.material.split(',').map(s => s.trim()).filter(Boolean)
: []),
createdAt: r.createdAt ?? null,
createdBy: r.createdBy ?? null,
updatedAt: r.updatedAt ?? null,
updatedBy: r.updatedBy ?? null,
});
setViewOnly(true);
setOpen(true);
}}
>
<VisibilityRoundedIcon fontSize="small" />
</IconButton>
<IconButton
size="small"
sx={{
@@ -319,6 +361,7 @@ export default function Categories() {
initialMaterialNames={editingCategory?.materialNames || []}
onAdd={handleFormDone}
onCancel={() => { setOpen(false); setEditingCategory(null); }}
viewOnly={viewOnly}
/>
</DialogContent>
</Dialog>