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

feat: Implement EditMenuGroupPage with form and mock data

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Your Name 2025-07-18 07:00:07 +00:00
parent 72c57b7f93
commit f02b252185
2 changed files with 216 additions and 0 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

@ -0,0 +1,151 @@
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;

65
react-bootstrap-migration/task_list.md
View File

@ -0,0 +1,65 @@
# Task List: Angular to React Migration
This document tracks the tasks for migrating the Angular Clarity application to React with Bootstrap.
## Phase 1: Project Setup & Core Infrastructure
- [x] **Task 1: Initialize React Project**
- [x] Use `create-react-app` or Vite to set up the project structure.
- [x] Create initial `package.json`.
- [x] Create placeholder `index.html` and `App.js`.
- [ ] **Task 2: Install Dependencies**
- [ ] `npm install bootstrap react-bootstrap`
- [ ] `npm install react-router-dom`
- [ ] `npm install axios`
- [x] **Task 3: Setup Project Folder Structure**
- [x] Create directories for `components`, `pages`, `hooks`, `services`, `contexts`, `utils`.
- [x] **Task 4: Implement Routing**
- [x] Set up `BrowserRouter` in `index.js`.
- [x] Create a main routing component (`AppRoutes.js`) to define public and private routes.
- [ ] **Task 5: Authentication & State Management**
- [ ] Create `AuthContext` to manage user session and info, replacing `UserInfoService`.
- [ ] Implement `useAuth` hook.
- [ ] **Task 6: API Service Layer**
- [ ] Create a generic `useApi` hook or an API client singleton (e.g., `api.js` using `axios`) to handle requests, replacing `ApiRequestService`.
## Phase 2: Feature Migration (Module by Module)
### Admin Module
- [ ] **Task 7: User Registration (`user-registration.component.ts`)**
- [ ] Create `UserRegistration.js` page/component.
- [ ] Build the form using `react-bootstrap` components.
- [ ] Implement form state and validation (e.g., with `useState` or `react-hook-form`).
- [ ] Connect to the backend API using the API service layer.
- [ ] **Task 8: Password Reset (`password-reset.component.ts`)**
- [ ] Create `PasswordReset.js` page/component.
- [ ] ... (similar sub-tasks as above)
- [x] **Task 9: Menu Group (`edit-menu-group.component.ts`)**
- [x] Create `EditMenuGroupPage.js` component.
- [x] Translate Angular template to React with react-bootstrap.
- [x] Replicate component state and handlers.
- [x] Create corresponding CSS and import it.
- [x] Handle inconsistency in source HTML by matching table to headers.
- ... *More admin components to be listed here* ...
### Builder Module
- [ ] **Task 10: Dashboard (`dashboardnew.component.ts`)**
- [ ] Create `Dashboard.js` page.
- [ ] Migrate `line-chart.component` to a React chart component (using a library like `Chart.js` or `Recharts`).
- ... *More builder components to be listed here* ...
### FND Module
- ... *FND module components to be listed here* ...
## Phase 3: Finalization
- [ ] **Task 99: Final Review & Cleanup**
- [ ] Code review all migrated components.
- [ ] Remove dead code.
- [ ] **Task 100: Documentation**
- [x] Create `analysis_report.md`.
- [x] Create `task_list.md`.
- [ ] Write final `instruction.md` with setup and usage instructions.