risadmin_prod/angular_migration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.js

Browse Source
This commit is contained in:
risadmin_prod 2025-07-18 08:49:32 +00:00
parent 6e5f99fa4f
commit 00e9026ee1
1 changed files with 0 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.js vendored
View File

@ -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;