layout + navbar

This commit is contained in:
Simon CATANESE 2024-05-07 01:31:38 +02:00
parent 66cc9c6801
commit 135ab48886
16 changed files with 1358 additions and 186 deletions

File diff suppressed because it is too large Load Diff

BIN
.vs/2024-DEV-BUT3/v17/.wsuo Normal file

Binary file not shown.

View 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
View File

@ -0,0 +1,3 @@
{
"CurrentProjectSetting": null
}

View File

@ -0,0 +1,7 @@
{
"ExpandedNodes": [
""
],
"SelectedNode": "\\C:\\Users\\Admin\\Source\\Repos\\2024-DEV-BUT3",
"PreviewInSolutionExplorer": false
}

BIN
.vs/slnx.sqlite Normal file

Binary file not shown.

264
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

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

View File

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

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

View File

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

View File

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

View 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;
};

View File

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

View File

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