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"
},
"dependencies": {
"antd": "^5.15.4",
"@ant-design/icons": "^5.3.7",
"axios": "^1.6.7",
"bootstrap": "^5.3.3",
"react": "^18.2.0",
@ -24,13 +24,13 @@
"react-router-dom": "^6.21.3"
},
"devDependencies": {
"antd": "^5.15.4",
"@playwright/test": "^1.42.1",
"@testing-library/react": "^14.1.2",
"@types/node": "^20.11.9",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"antd": "^5.17.0",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",

View File

@ -4,12 +4,18 @@ import { Authenticated } from "./components";
import { Router } from "./router";
import Navbar from "./components/nav/Navbar";
import AppLayout from "./components/app-layout";
import { PageTitleProvider } from "./hooks/page-title-context";
const App = () => (
<Authenticated>
<Router />
{/* <Navbar></Navbar> */}
</Authenticated>
<Authenticated>
<PageTitleProvider>
<AppLayout>
</AppLayout>
</PageTitleProvider>
</Authenticated>
);
export default App;

View File

@ -1,10 +1,14 @@
import axios from "axios";
export const getRoom = async () => {
try {
const response = await axios.get("/room", {});
return response.data;
} catch (error) {
return error.response.data;
}
try {
const response = await axios.get("/room", {});
console.log(response.data)
return response.data;
} catch (error) {
console.log("ERROR", 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,83 +1,55 @@
import React, { useState } from "react";
import { Authenticated } from "..";
import { Router } from "../../router";
import {
AppstoreOutlined,
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from "@ant-design/icons";
import { Button, Menu } from "antd";
import React, { useState, useEffect } from "react";
import { HomeOutlined } from '@ant-design/icons-svg';
import { Menu } from "antd";
import { Home } from "../../pages";
import { getRoom } from "../../api/room";
import { getAuth, useAuth } from "../../hooks";
function getItem(label, key, icon, children, type) {
function getItem(label, key, type, icon, children) {
return {
key,
icon,
children,
label,
type,
key: String(key),
icon,
children,
label,
type,
};
}
// Component
const Navbar = () => {
//Hook calls
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
const [rooms, setRooms] = useState([]);
const [rooms, setRooms] = useState([]);
useEffect(() => {
if (user) {
getRoom().then((result) => {
if (true) {
getRoom().then((result) => {
setRooms(result);
});
}
}, []);
const items = [
getItem("Menu principal", "1", <Home />),
getItem("Vue d'ensemble", "2", <Home />),
getItem("Chambres", "3", <Home />, [
rooms.forEach((room, i = 0) => {
i++;
getItem(room.name, `sub${i}`, <Home />);
}),
]),
];
const roomItems = rooms.map((room, index) => (
getItem(room.name, `sub${index}`, <Home />)
));
// Rendering
return (
<div
style={{
width: 256,
}}
>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
/>
</div>
);
const items = [
getItem("Menu principal", "1", <Home />),
getItem("Vue d'ensemble", "2", <Home />),
{
key: "3",
label: "Chambres",
icon: "",
children: roomItems, // Utilisation des éléments de menu des chambres
},
];
// Rendu du composant Navbar
return (
<Menu
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
theme="dark"
mode="inline"
items={items}
/>
);
};
export default Navbar;

View File

@ -1,2 +1,3 @@
export * from "./use-auth";
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);
}
export function getAuth() {
return React.useContext(AuthenticationContext).user;
}
//export function getAuth() {
// 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 { ItemPage } from "../components/item/ItemPage";
import { usePageTitle } from '../hooks/page-title-context';
export const Test = () => {
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 (
<div>
<h1>Vive la macronie à bat montjoie saint dennis</h1>
<ItemPage></ItemPage>
</div>
);