Delete react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.js
This commit is contained in:
parent
6e5f99fa4f
commit
00e9026ee1
@ -1,151 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useParams, useNavigate } from 'react-router-dom';
|
|
||||||
import { Form, Button, Container, Row, Col, Table, FloatingLabel } from 'react-bootstrap';
|
|
||||||
import './EditMenuGroupPage.css';
|
|
||||||
|
|
||||||
const EditMenuGroupPage = () => {
|
|
||||||
const { id } = useParams();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
// Mock data based on Angular component analysis
|
|
||||||
const [header, setHeader] = useState({
|
|
||||||
menu_name: '',
|
|
||||||
description: '',
|
|
||||||
active: true,
|
|
||||||
start_date: '',
|
|
||||||
end_date: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [lines, setLines] = useState([]);
|
|
||||||
const types = ['user', 'admin', 'mis report', 'bi report'];
|
|
||||||
const [menuDropDown, setMenuDropDown] = useState([]); // Mocked menu items for dropdown
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Mock fetching data since services are commented out in Angular component
|
|
||||||
console.log("Fetching data for menu group with id:", id);
|
|
||||||
setHeader({
|
|
||||||
menu_name: 'Admin Menu Group',
|
|
||||||
description: 'Main administrative menu group.',
|
|
||||||
active: true,
|
|
||||||
start_date: '2025-01-01',
|
|
||||||
end_date: '2025-12-31',
|
|
||||||
});
|
|
||||||
setLines([
|
|
||||||
{ id: 1, name: 'User Management', type: 'admin', menu_id: '101', active: true, start_date: '2025-01-01', end_date: '2025-12-31', seq: 10 },
|
|
||||||
{ id: 2, name: 'System Reports', type: 'mis report', menu_id: '102', active: false, start_date: '2025-01-01', end_date: '2025-06-30', seq: 20 },
|
|
||||||
]);
|
|
||||||
setMenuDropDown([
|
|
||||||
{ id: '101', name: 'User Admin Menu' },
|
|
||||||
{ id: '102', name: 'Reporting Menu' },
|
|
||||||
]);
|
|
||||||
}, [id]);
|
|
||||||
|
|
||||||
const handleHeaderChange = (e) => {
|
|
||||||
const { name, value, type, checked } = e.target;
|
|
||||||
setHeader(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLineChange = (index, e) => {
|
|
||||||
const { name, value, type, checked } = e.target;
|
|
||||||
const newLines = [...lines];
|
|
||||||
newLines[index] = { ...newLines[index], [name]: type === 'checkbox' ? checked : value };
|
|
||||||
setLines(newLines);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("Submitting data:", { id, header, lines });
|
|
||||||
// Mock navigation on successful update
|
|
||||||
navigate('/admin/menu-group/all'); // A hypothetical route
|
|
||||||
};
|
|
||||||
|
|
||||||
const back = () => {
|
|
||||||
navigate(-1); // Go back to the previous page
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
<h3 className="center"><b>Menu Group Edit Form</b></h3>
|
|
||||||
<p>ID: {id}</p>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<Form onSubmit={handleSubmit}>
|
|
||||||
<div className="section">
|
|
||||||
<p>Menu Group Header</p>
|
|
||||||
</div>
|
|
||||||
<Row className="mb-3">
|
|
||||||
<Form.Group as={Col} md="4">
|
|
||||||
<FloatingLabel label="Menu Name">
|
|
||||||
<Form.Control type="text" name="menu_name" value={header.menu_name} onChange={handleHeaderChange} placeholder="Enter Menu Name" />
|
|
||||||
</FloatingLabel>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group as={Col} md="4">
|
|
||||||
<FloatingLabel label="Menu Description">
|
|
||||||
<Form.Control type="text" name="description" value={header.description} onChange={handleHeaderChange} placeholder="Enter Menu Description" />
|
|
||||||
</FloatingLabel>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group as={Col} md="4" className="d-flex align-items-center">
|
|
||||||
<Form.Check type="switch" id="header-active" name="active" label="Active" checked={header.active} onChange={handleHeaderChange} />
|
|
||||||
</Form.Group>
|
|
||||||
</Row>
|
|
||||||
<Row className="mb-3">
|
|
||||||
<Form.Group as={Col} md="4">
|
|
||||||
<FloatingLabel label="Start Date">
|
|
||||||
<Form.Control type="date" name="start_date" value={header.start_date} onChange={handleHeaderChange} />
|
|
||||||
</FloatingLabel>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group as={Col} md="4">
|
|
||||||
<FloatingLabel label="End Date">
|
|
||||||
<Form.Control type="date" name="end_date" value={header.end_date} onChange={handleHeaderChange} />
|
|
||||||
</FloatingLabel>
|
|
||||||
</Form.Group>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<div className="section">
|
|
||||||
<p>Menu Group Lines Details</p>
|
|
||||||
</div>
|
|
||||||
<Table striped bordered hover responsive id="lines">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Menu Name</th>
|
|
||||||
<th>Active</th>
|
|
||||||
<th>Start Date</th>
|
|
||||||
<th>End Date</th>
|
|
||||||
<th>Order</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{lines.map((line, index) => (
|
|
||||||
<tr key={line.id}>
|
|
||||||
<td><Form.Control type="text" name="name" value={line.name} onChange={(e) => handleLineChange(index, e)} /></td>
|
|
||||||
<td>
|
|
||||||
<Form.Select name="type" value={line.type} onChange={(e) => handleLineChange(index, e)}>
|
|
||||||
<option>Choose Type</option>
|
|
||||||
{types.map(t => <option key={t} value={t}>{t}</option>)}
|
|
||||||
</Form.Select>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Form.Select name="menu_id" value={line.menu_id} onChange={(e) => handleLineChange(index, e)}>
|
|
||||||
<option>Choose Menu</option>
|
|
||||||
{menuDropDown.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
|
|
||||||
</Form.Select>
|
|
||||||
</td>
|
|
||||||
<td className="text-center align-middle"><Form.Check type="switch" name="active" checked={line.active} onChange={(e) => handleLineChange(index, e)} /></td>
|
|
||||||
<td><Form.Control type="date" name="start_date" value={line.start_date} onChange={(e) => handleLineChange(index, e)} /></td>
|
|
||||||
<td><Form.Control type="date" name="end_date" value={line.end_date} onChange={(e) => handleLineChange(index, e)} /></td>
|
|
||||||
<td><Form.Control type="number" name="seq" value={line.seq} onChange={(e) => handleLineChange(index, e)} /></td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
|
|
||||||
<Button variant="secondary" onClick={back} className="me-2">Back</Button>
|
|
||||||
<Button type="submit" variant="primary">UPDATE</Button>
|
|
||||||
</Form>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EditMenuGroupPage;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user