feat: add action class to connect the api mongo - getAll
This commit is contained in:
Rodolfo Ruiz
parent
31600e5f1b
commit
03022206ae
@ -8,6 +8,7 @@ import Products from './private/products/Products';
|
||||
import Clients from './private/clients/Clients';
|
||||
import Providers from './private/providers/Providers';
|
||||
import Categories from './private/categories/Categories';
|
||||
import Admin from './private/mongo/Admin';
|
||||
|
||||
function App() {
|
||||
const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
|
||||
@ -34,6 +35,7 @@ function App() {
|
||||
{zone === 'public' && currentView === 'Clients' && <Clients />}
|
||||
{zone === 'public' && currentView === 'Providers' && <Providers />}
|
||||
{zone === 'public' && currentView === 'Categories' && <Categories />}
|
||||
{zone === 'public' && currentView === 'Admin' && <Admin />}
|
||||
</Box>
|
||||
<Footer zone={zone} />
|
||||
</Box>
|
||||
|
||||
13
src/api/actions.jsx
Normal file
13
src/api/actions.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
export async function getExternalData() {
|
||||
try {
|
||||
const response = await fetch('http://portainer.white-enciso.pro:4001/api/v1/MongoSample/GetAll');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch data:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@ -4,10 +4,13 @@ import PeopleIcon from '@mui/icons-material/People';
|
||||
import InventoryIcon from '@mui/icons-material/Inventory';
|
||||
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
|
||||
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
||||
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const menuOptions = {
|
||||
public: [
|
||||
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
|
||||
{ text: 'Categories', icon: <CategoryIcon /> },
|
||||
{ text: 'Clients', icon: <PeopleIcon /> },
|
||||
{ text: 'Products', icon: <InventoryIcon /> },
|
||||
@ -16,6 +19,7 @@ const menuOptions = {
|
||||
],
|
||||
restricted: [],
|
||||
private: [
|
||||
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
|
||||
{ text: 'Categories', icon: <CategoryIcon /> },
|
||||
{ text: 'Clients', icon: <PeopleIcon /> },
|
||||
{ text: 'Products', icon: <InventoryIcon /> },
|
||||
|
||||
93
src/private/mongo/AddOrEditAdminForm.jsx
Normal file
93
src/private/mongo/AddOrEditAdminForm.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
TextField,
|
||||
Typography,
|
||||
Paper,
|
||||
MenuItem
|
||||
} from '@mui/material';
|
||||
|
||||
export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
status: 'Active'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData(initialData);
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
status: 'Active'
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (onAdd) {
|
||||
onAdd(formData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ px: 2, py: 3 }}>
|
||||
<Paper elevation={0} sx={{ bgcolor: '#f9f9f9', p: 2, borderRadius: 2 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Item details
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
select
|
||||
fullWidth
|
||||
label="Status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value="Active">Active</MenuItem>
|
||||
<MenuItem value="Inactive">Inactive</MenuItem>
|
||||
</TextField>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
|
||||
<Button onClick={onCancel} className="button-transparent">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
143
src/private/mongo/Admin.jsx
Normal file
143
src/private/mongo/Admin.jsx
Normal file
@ -0,0 +1,143 @@
|
||||
import SectionContainer from '../../components/SectionContainer';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import AddOrEditAdminForm from './AddOrEditAdminForm';
|
||||
import { getExternalData } from '../../api/actions';
|
||||
|
||||
const columnsBase = [
|
||||
{ field: 'name', headerName: 'Name', flex: 2 },
|
||||
{ field: 'description', headerName: 'Description', flex: 2 },
|
||||
{ field: 'status', headerName: 'Status', width: 120 },
|
||||
{
|
||||
field: 'createdAt',
|
||||
headerName: 'Created At',
|
||||
width: 120,
|
||||
valueFormatter: (params) => {
|
||||
const date = params?.value;
|
||||
return date ? new Date(date).toLocaleString() : '—';
|
||||
}
|
||||
},
|
||||
{ field: 'createdBy', headerName: 'Created By', flex: 1 },
|
||||
{
|
||||
field: 'updatedAt',
|
||||
headerName: 'Updated At',
|
||||
width: 120,
|
||||
valueFormatter: (params) => {
|
||||
const date = params?.value;
|
||||
return date ? new Date(date).toLocaleString() : '—';
|
||||
}
|
||||
},
|
||||
{ field: 'updatedBy', headerName: 'Updated By', flex: 1 },
|
||||
];
|
||||
|
||||
export default function Admin() {
|
||||
const [rows, setRows] = useState([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingData, setEditingData] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getExternalData().then(data => {
|
||||
const safeData = Array.isArray(data) ? data : [];
|
||||
setRows(safeData);
|
||||
}).catch(error => {
|
||||
console.error('Error loading data:', error);
|
||||
setRows([]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingData(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" alignItems="center" justifyContent="flex-end" height="100%" gap={2}>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#DFCCBC',
|
||||
color: '#26201A',
|
||||
'&:hover': { backgroundColor: '#C2B2A4' },
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleEditClick(params)}
|
||||
>
|
||||
<EditRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#FBE9E7',
|
||||
color: '#C62828',
|
||||
'&:hover': { backgroundColor: '#EF9A9A' },
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleDeleteClick(params.row)}
|
||||
>
|
||||
<DeleteRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color='#26201AFF'>Admin</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingData ? 'Edit Item' : 'Add Item'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditAdminForm onAdd={() => { }} initialData={editingData} onCancel={() => { setOpen(false); setEditingData(null); }} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete <strong>{rowToDelete?.name}</strong>?
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
|
||||
<Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
|
||||
<Button variant="contained" onClick={() => { }} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({ top: 4, bottom: 4 })}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
|
||||
Add Item
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user