layout + navbar
This commit is contained in:
parent
66cc9c6801
commit
135ab48886
1021
.vs/2024-DEV-BUT3/config/applicationhost.config
Normal file
1021
.vs/2024-DEV-BUT3/config/applicationhost.config
Normal file
File diff suppressed because it is too large
Load Diff
BIN
.vs/2024-DEV-BUT3/v17/.wsuo
Normal file
BIN
.vs/2024-DEV-BUT3/v17/.wsuo
Normal file
Binary file not shown.
23
.vs/2024-DEV-BUT3/v17/DocumentLayout.json
Normal file
23
.vs/2024-DEV-BUT3/v17/DocumentLayout.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"Version": 1,
|
||||||
|
"WorkspaceRootPath": "C:\\Users\\Admin\\source\\repos\\2024-DEV-BUT3\\",
|
||||||
|
"Documents": [],
|
||||||
|
"DocumentGroupContainers": [
|
||||||
|
{
|
||||||
|
"Orientation": 0,
|
||||||
|
"VerticalTabListWidth": 256,
|
||||||
|
"DocumentGroups": [
|
||||||
|
{
|
||||||
|
"DockedWidth": 200,
|
||||||
|
"SelectedChildIndex": -1,
|
||||||
|
"Children": [
|
||||||
|
{
|
||||||
|
"$type": "Bookmark",
|
||||||
|
"Name": "ST:1:0:{d212f56b-c48a-434c-a121-1c5d80b59b9f}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
3
.vs/ProjectSettings.json
Normal file
3
.vs/ProjectSettings.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"CurrentProjectSetting": null
|
||||||
|
}
|
7
.vs/VSWorkspaceState.json
Normal file
7
.vs/VSWorkspaceState.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"ExpandedNodes": [
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"SelectedNode": "\\C:\\Users\\Admin\\Source\\Repos\\2024-DEV-BUT3",
|
||||||
|
"PreviewInSolutionExplorer": false
|
||||||
|
}
|
BIN
.vs/slnx.sqlite
Normal file
BIN
.vs/slnx.sqlite
Normal file
Binary file not shown.
264
package-lock.json
generated
264
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,7 +15,7 @@
|
|||||||
"prepare": "husky install"
|
"prepare": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"antd": "^5.15.4",
|
"@ant-design/icons": "^5.3.7",
|
||||||
"axios": "^1.6.7",
|
"axios": "^1.6.7",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
@ -24,13 +24,13 @@
|
|||||||
"react-router-dom": "^6.21.3"
|
"react-router-dom": "^6.21.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"antd": "^5.15.4",
|
|
||||||
"@playwright/test": "^1.42.1",
|
"@playwright/test": "^1.42.1",
|
||||||
"@testing-library/react": "^14.1.2",
|
"@testing-library/react": "^14.1.2",
|
||||||
"@types/node": "^20.11.9",
|
"@types/node": "^20.11.9",
|
||||||
"@types/react": "^18.2.43",
|
"@types/react": "^18.3.1",
|
||||||
"@types/react-dom": "^18.2.17",
|
"@types/react-dom": "^18.3.0",
|
||||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||||
|
"antd": "^5.17.0",
|
||||||
"eslint": "^8.55.0",
|
"eslint": "^8.55.0",
|
||||||
"eslint-plugin-react": "^7.33.2",
|
"eslint-plugin-react": "^7.33.2",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
10
src/App.jsx
10
src/App.jsx
@ -4,11 +4,17 @@ import { Authenticated } from "./components";
|
|||||||
|
|
||||||
import { Router } from "./router";
|
import { Router } from "./router";
|
||||||
import Navbar from "./components/nav/Navbar";
|
import Navbar from "./components/nav/Navbar";
|
||||||
|
import AppLayout from "./components/app-layout";
|
||||||
|
import { PageTitleProvider } from "./hooks/page-title-context";
|
||||||
|
|
||||||
const App = () => (
|
const App = () => (
|
||||||
<Authenticated>
|
<Authenticated>
|
||||||
<Router />
|
<PageTitleProvider>
|
||||||
{/* <Navbar></Navbar> */}
|
<AppLayout>
|
||||||
|
|
||||||
|
</AppLayout>
|
||||||
|
</PageTitleProvider>
|
||||||
|
|
||||||
</Authenticated>
|
</Authenticated>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -1,10 +1,14 @@
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const getRoom = async () => {
|
export const getRoom = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get("/room", {});
|
const response = await axios.get("/room", {});
|
||||||
|
console.log(response.data)
|
||||||
return response.data;
|
return response.data;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.log("ERROR", error.response.data)
|
||||||
return error.response.data;
|
return error.response.data;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
49
src/components/app-layout.jsx
Normal file
49
src/components/app-layout.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Layout, Menu, theme, Button } from 'antd';
|
||||||
|
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
||||||
|
import { Router } from '../router';
|
||||||
|
import { usePageTitle } from '../hooks/page-title-context';
|
||||||
|
import Navbar from './nav/Navbar';
|
||||||
|
const { Header, Content, Footer, Sider } = Layout;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const AppLayout = ({ navbar, footer }) => {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const { pageTitle } = usePageTitle();
|
||||||
|
const {
|
||||||
|
token: { colorBgContainer, borderRadiusLG },
|
||||||
|
} = theme.useToken();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout >
|
||||||
|
<Sider breakpoint="lg" collapsible collapsed={collapsed}>
|
||||||
|
<div className="demo-logo-vertical" />
|
||||||
|
<Navbar/>
|
||||||
|
</Sider>
|
||||||
|
<Layout>
|
||||||
|
<Header style={{ padding: 0, background: colorBgContainer }}>
|
||||||
|
<Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{fontSize: '16px', width: 64, height: 64}}/>
|
||||||
|
{pageTitle}
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<Content style={{margin: '24px 16px 0'}}>
|
||||||
|
<div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
|
||||||
|
<Router />
|
||||||
|
</div>
|
||||||
|
</Content>
|
||||||
|
<Footer style={{ textAlign: 'center' }}>
|
||||||
|
{footer}
|
||||||
|
<br />
|
||||||
|
Ant Design ©{new Date().getFullYear()} Created by Ant UED
|
||||||
|
</Footer>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default AppLayout;
|
@ -1,23 +1,11 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Authenticated } from "..";
|
import { HomeOutlined } from '@ant-design/icons-svg';
|
||||||
import { Router } from "../../router";
|
import { Menu } from "antd";
|
||||||
|
|
||||||
import {
|
|
||||||
AppstoreOutlined,
|
|
||||||
ContainerOutlined,
|
|
||||||
DesktopOutlined,
|
|
||||||
MailOutlined,
|
|
||||||
MenuFoldOutlined,
|
|
||||||
MenuUnfoldOutlined,
|
|
||||||
PieChartOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import { Button, Menu } from "antd";
|
|
||||||
import { Home } from "../../pages";
|
import { Home } from "../../pages";
|
||||||
import { getRoom } from "../../api/room";
|
import { getRoom } from "../../api/room";
|
||||||
import { getAuth, useAuth } from "../../hooks";
|
function getItem(label, key, type, icon, children) {
|
||||||
function getItem(label, key, icon, children, type) {
|
|
||||||
return {
|
return {
|
||||||
key,
|
key: String(key),
|
||||||
icon,
|
icon,
|
||||||
children,
|
children,
|
||||||
label,
|
label,
|
||||||
@ -28,56 +16,40 @@ function getItem(label, key, icon, children, type) {
|
|||||||
// Component
|
// Component
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
//Hook calls
|
//Hook calls
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
|
||||||
const toggleCollapsed = () => {
|
|
||||||
setCollapsed(!collapsed);
|
|
||||||
};
|
|
||||||
const [rooms, setRooms] = useState([]);
|
const [rooms, setRooms] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user) {
|
if (true) {
|
||||||
getRoom().then((result) => {
|
getRoom().then((result) => {
|
||||||
setRooms(result);
|
setRooms(result);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const roomItems = rooms.map((room, index) => (
|
||||||
|
getItem(room.name, `sub${index}`, <Home />)
|
||||||
|
));
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
getItem("Menu principal", "1", <Home />),
|
getItem("Menu principal", "1", <Home />),
|
||||||
getItem("Vue d'ensemble", "2", <Home />),
|
getItem("Vue d'ensemble", "2", <Home />),
|
||||||
getItem("Chambres", "3", <Home />, [
|
{
|
||||||
rooms.forEach((room, i = 0) => {
|
key: "3",
|
||||||
i++;
|
label: "Chambres",
|
||||||
getItem(room.name, `sub${i}`, <Home />);
|
icon: "",
|
||||||
}),
|
children: roomItems, // Utilisation des éléments de menu des chambres
|
||||||
]),
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// Rendering
|
// Rendu du composant Navbar
|
||||||
return (
|
return (
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 256,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
onClick={toggleCollapsed}
|
|
||||||
style={{
|
|
||||||
marginBottom: 16,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
||||||
</Button>
|
|
||||||
<Menu
|
<Menu
|
||||||
defaultSelectedKeys={["1"]}
|
defaultSelectedKeys={["1"]}
|
||||||
defaultOpenKeys={["sub1"]}
|
defaultOpenKeys={["sub1"]}
|
||||||
mode="inline"
|
|
||||||
theme="dark"
|
theme="dark"
|
||||||
inlineCollapsed={collapsed}
|
mode="inline"
|
||||||
items={items}
|
items={items}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
@ -1,2 +1,3 @@
|
|||||||
export * from "./use-auth";
|
export * from "./use-auth";
|
||||||
export * from "./use-query";
|
export * from "./use-query";
|
||||||
|
export * from "./page-title-context";
|
||||||
|
23
src/hooks/page-title-context.jsx
Normal file
23
src/hooks/page-title-context.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { createContext, useContext, useState } from 'react';
|
||||||
|
|
||||||
|
const PageTitleContext = createContext();
|
||||||
|
|
||||||
|
// Composant de fournisseur de titre de page
|
||||||
|
export const PageTitleProvider = ({ children }) => {
|
||||||
|
const [pageTitle, setPageTitle] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageTitleContext.Provider value={{ pageTitle, setPageTitle }}>
|
||||||
|
{children}
|
||||||
|
</PageTitleContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Hook pour récupérer le titre de la page
|
||||||
|
export const usePageTitle = () => {
|
||||||
|
const context = useContext(PageTitleContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('usePageTitle must be used within a PageTitleProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
@ -6,6 +6,6 @@ export function useAuth() {
|
|||||||
return React.useContext(AuthenticationContext);
|
return React.useContext(AuthenticationContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getAuth() {
|
//export function getAuth() {
|
||||||
return React.useContext(AuthenticationContext).user;
|
// return React.useContext(AuthenticationContext).user;
|
||||||
}
|
//}
|
||||||
|
@ -1,14 +1,19 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
import { useAuth } from "../hooks";
|
import { useAuth } from "../hooks";
|
||||||
import { ItemPage } from "../components/item/ItemPage";
|
import { ItemPage } from "../components/item/ItemPage";
|
||||||
|
import { usePageTitle } from '../hooks/page-title-context';
|
||||||
|
|
||||||
export const Test = () => {
|
export const Test = () => {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
const { setPageTitle } = usePageTitle();
|
||||||
|
|
||||||
|
// Mettre à jour le titre de la page dans le contexte
|
||||||
|
useEffect(() => {
|
||||||
|
setPageTitle("Vive la macronie à bat montjoie saint dennis");
|
||||||
|
}, [setPageTitle]);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1>Vive la macronie à bat montjoie saint dennis</h1>
|
|
||||||
<ItemPage></ItemPage>
|
<ItemPage></ItemPage>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user