Add "Nueva Solicitud" page and update navigation to support new view
Introduced the `NewRequestPage` component for creating and saving HTTP requests. Updated navigation and dynamic header title logic to include the new "create" view. Adjusted `App.js` to handle the new view state and display `NewRequestPage`.
This commit is contained in:
11
src/App.js
11
src/App.js
@@ -5,10 +5,11 @@ import { DashboardCards } from './components/Dashboard';
|
|||||||
import RequestTable from './components/Requests/RequestTable';
|
import RequestTable from './components/Requests/RequestTable';
|
||||||
import RequestForm from './components/Requests/RequestForm';
|
import RequestForm from './components/Requests/RequestForm';
|
||||||
import ScheduledPage from './components/Scheduled/ScheduledPage';
|
import ScheduledPage from './components/Scheduled/ScheduledPage';
|
||||||
|
import NewRequestPage from './components/Requests/NewRequestPage';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled'
|
const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled' | 'create'
|
||||||
|
|
||||||
const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
|
const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||||
const handleNavigate = (key) => {
|
const handleNavigate = (key) => {
|
||||||
@@ -16,7 +17,11 @@ function App() {
|
|||||||
setIsMobileMenuOpen(false);
|
setIsMobileMenuOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const headerTitle = activeView === 'scheduled' ? 'Solicitudes Programadas' : 'Dashboard';
|
const headerTitle = activeView === 'scheduled'
|
||||||
|
? 'Solicitudes Programadas'
|
||||||
|
: activeView === 'create'
|
||||||
|
? 'Nueva Solicitud'
|
||||||
|
: 'Dashboard';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
@@ -30,6 +35,8 @@ function App() {
|
|||||||
<Header title={headerTitle} />
|
<Header title={headerTitle} />
|
||||||
{activeView === 'scheduled' ? (
|
{activeView === 'scheduled' ? (
|
||||||
<ScheduledPage />
|
<ScheduledPage />
|
||||||
|
) : activeView === 'create' ? (
|
||||||
|
<NewRequestPage />
|
||||||
) : (
|
) : (
|
||||||
<section className="content-wrapper">
|
<section className="content-wrapper">
|
||||||
<DashboardCards />
|
<DashboardCards />
|
||||||
|
|||||||
27
src/components/Requests/NewRequestPage.js
Normal file
27
src/components/Requests/NewRequestPage.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import '../../styles/components.css';
|
||||||
|
import RequestForm from './RequestForm';
|
||||||
|
|
||||||
|
const NewRequestPage = () => {
|
||||||
|
return (
|
||||||
|
<section className="content-wrapper">
|
||||||
|
<div className="card" style={{ marginBottom: 24 }}>
|
||||||
|
<div className="form-header">
|
||||||
|
<h3>
|
||||||
|
<i className="fas fa-paper-plane"></i>
|
||||||
|
Nueva Solicitud
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p style={{ color: 'var(--gray)' }}>
|
||||||
|
Crea y guarda una nueva solicitud HTTP para ejecutar ahora o más tarde.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="content-grid">
|
||||||
|
<RequestForm />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewRequestPage;
|
||||||
Reference in New Issue
Block a user