Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: landing page #1

Merged
merged 2 commits into from
Sep 22, 2024
Merged

fix: landing page #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05f09a5
fix(frontend-workflow): landing page
Apoorva64 Sep 22, 2024
ba88550
Merge branch 'master' into fix-landing-page
Apoorva64 Sep 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/frontend-bff/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import * as ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import App from './app/app';
import {CssBaseline} from "@mui/material";

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<StrictMode>
<BrowserRouter>
<CssBaseline />
<App />
</BrowserRouter>
</StrictMode>
Expand Down
1 change: 1 addition & 0 deletions libs/ui/common/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export * from './lib/ui-common';
export * from './lib/tables/landingPage';
export * from './lib/tables/tableSquare';
export * from './lib/offers/offers';
export * from './lib/orders/orders';
export * from './lib/summary/summary';
Expand Down
23 changes: 0 additions & 23 deletions libs/ui/common/src/lib/tables/landingPage.css
View file
Open in desktop

This file was deleted.

78 changes: 34 additions & 44 deletions libs/ui/common/src/lib/tables/landingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,41 @@
import { CenterFocusStrong } from '@mui/icons-material';
import './landingPage.css';
import { useNavigate } from "react-router-dom";
import {useNavigate} from "react-router-dom";
import TableSquare from './tableSquare';
import { Button, Typography, Grid2, Box } from "@mui/material";
import {Button, Typography, Box, Grid2 as Grid} from "@mui/material";
import * as React from 'react';
import { useState } from 'react';
import { Router } from 'react-router-dom';
import {useState} from 'react';

export function LandingPage() {
const [totalPeople, setTotalPeople] = useState(0);
const navigate = useNavigate();
const [totalPeople, setTotalPeople] = useState(0);
const navigate = useNavigate();

const validateTables = () => {
console.log({totalPeople})
navigate("/offers")
}
const validateTables = () => {
console.log({totalPeople})
navigate("/offers")
}

return (
<Box margin='170px' marginTop='20vw'>
<Typography align='center' variant="h1" component="h2" fontSize="8vw" fontWeight="bold" >
Tables
</Typography>
<Grid2 container spacing={4} justifyContent="center" marginTop="60px">
{Array.from(Array(9)).map((_, index) => (
<Grid2 key={index} size='auto' >
<TableSquare tableNumber={index} totalPeople={totalPeople} setTotalPeople={setTotalPeople}></TableSquare>
</Grid2>
))}
</Grid2>
<Box textAlign='center' marginTop="60px">
{ totalPeople>0 ?
<Button
onClick={validateTables}
variant="contained"
color="success"
style={{
padding: '20px 50px', // Plus grand bouton
borderRadius: '50px', // Coins arrondis
fontSize: '4vw', // Texte plus grand
}}
>
Validate
</Button>
: null
}
</Box>
</Box>
);
return (
<Box width={"100%"} height={"100vh"} display={"flex"} alignItems={"center"} flexDirection={"column"} justifyContent={"center"}>
<Typography align='center' variant="h1" component="h2" fontSize="10vh" fontWeight="bold">
Tables
</Typography>
<Grid container spacing={4} justifyContent={"center"} alignItems={"center"} marginTop="60px" maxHeight='60vh' overflow='auto' maxWidth={800} >
{Array.from(Array(15)).map((_, index) => (
<Grid key={index} >
<TableSquare tableNumber={index} totalPeople={totalPeople} setTotalPeople={setTotalPeople}></TableSquare>
</Grid>
))}
</Grid>
<Box textAlign='center' marginTop="60px">
<Button
onClick={validateTables}
variant="contained"
color="success"
>
<Typography variant={"h4"}>Create</Typography>
</Button>
</Box>
</Box>
);
}
export default LandingPage;

export default LandingPage;
160 changes: 144 additions & 16 deletions libs/ui/common/src/lib/tables/nbPeopleSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,149 @@
import './landingPage.css';

import {ReactNode, useState} from 'react';
import * as React from 'react';
import {
Unstable_NumberInput as BaseNumberInput,
NumberInputProps,
} from '@mui/base/Unstable_NumberInput';
import { styled } from '@mui/system';
import RemoveIcon from '@mui/icons-material/Remove';
import AddIcon from '@mui/icons-material/Add';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';

import { IconButton, Typography, Box } from "@mui/material";
import { useState } from 'react';
const NumberInput = React.forwardRef(function CustomNumberInput(
props: NumberInputProps,
ref: React.ForwardedRef<HTMLDivElement>,
) {
return (
<BaseNumberInput
slots={{
root: StyledInputRoot,
input: StyledInput,
incrementButton: StyledButton,
decrementButton: StyledButton
} as any}
slotProps={{
incrementButton: {
children: <AddIcon fontSize="small" />,
className: 'increment',
},
decrementButton: {
children: <RemoveIcon fontSize="small" />,
},
}}
{...props }
ref={ref}
/>
);
});

const blue = {
100: '#daecff',
200: '#b6daff',
300: '#66b2ff',
400: '#3399ff',
500: '#007fff',
600: '#0072e5',
700: '#0059B2',
800: '#004c99',
};

const grey = {
50: '#F3F6F9',
100: '#E5EAF2',
200: '#DAE2ED',
300: '#C7D0DD',
400: '#B0B8C4',
500: '#9DA8B7',
600: '#6B7A90',
700: '#434D5B',
800: '#303740',
900: '#1C2025',
};

const StyledInputRoot = styled('div')(
({ theme }) => `
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
`,
);

const StyledInput = styled('input')(
({ theme }) => `
font-size: 0.875rem;
font-family: inherit;
font-weight: 400;
line-height: 1.375;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
border-radius: 8px;
margin: 0 8px;
padding: 10px 12px;
outline: 0;
min-width: 0;
width: 4rem;
text-align: center;

&:hover {
border-color: ${blue[400]};
}

&:focus {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:focus-visible {
outline: 0;
}
`,
);

const StyledButton = styled('button')(
({ theme }) => `
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
line-height: 1.5;
border: 1px solid;
border-radius: 999px;
border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
width: 32px;
height: 32px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;

&:hover {
cursor: pointer;
background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
border-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[400]};
color: ${grey[50]};
}

&:focus-visible {
outline: 0;
}

&.increment {
order: 1;
}
`,
);
export function NbPeopleSelector({totalPeople, setTotalPeople}) {
const [nbPeople, setNbPeople] = useState(0)

Expand All @@ -24,18 +162,8 @@ export function NbPeopleSelector({totalPeople, setTotalPeople}) {
};

return (
<Box className="horizontal-container">
<IconButton onClick={addPerson} style={{maxWidth: "33%", minWidth: "33%"}}>
<AddIcon sx={{ fontSize: "4vw" }} style={{ color: 'black' }}/>
</IconButton>
<Typography align="center" variant="h3" component="h4" fontSize="4vw" fontWeight="bold" style={{maxWidth: "33%", minWidth: "33%"}}>
{nbPeople}
</Typography>
<IconButton onClick={removePerson} style={{maxWidth: "33%", minWidth: "33%"}} >
<RemoveRoundedIcon sx={{ fontSize: "4vw" }} style={{ color: 'black' }}/>
</IconButton>
</Box>
<NumberInput aria-label="Table Input" min={1} max={99} defaultValue={1} />
);
}

export default NbPeopleSelector;
export default NbPeopleSelector;
29 changes: 21 additions & 8 deletions libs/ui/common/src/lib/tables/tableSquare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import './landingPage.css';
import NbPeopleSelector from './nbPeopleSelector';
import { purple, red } from '@mui/material/colors';

import { Button, Typography, Box } from "@mui/material";
import {useState} from 'react';
import {styled} from "@mui/system";

export function TableSquare({tableNumber, totalPeople, setTotalPeople}) {
const [showPeopleSelector, setShowPeopleSelector] = useState(false)
Expand All @@ -12,18 +12,31 @@ export function TableSquare({tableNumber, totalPeople, setTotalPeople}) {
}

return (
<Box className="table-box">
<Button onClick={showHidePeopleSelector} variant="contained" fullWidth={true} className="table-button" color={showPeopleSelector? 'success':'primary' }>
<Typography variant="h1" component="h2" fontWeight="bold">
{tableNumber+1}
<Box width="fit-content">
<Button onClick={showHidePeopleSelector}
variant="contained"
sx={{aspectRatio: 1,

}}
color={showPeopleSelector? 'success':'primary' }>
<Box
display="flex"
alignItems="center"
justifyContent="center"
width={120} // width of the square box
height={100} // height of the square box
>
<Typography variant="h1" component="h2" fontWeight="bold" >
{tableNumber}
</Typography>
</Box>
</Button>
<Box margin="5%"></Box>
{ showPeopleSelector ? <NbPeopleSelector totalPeople={totalPeople} setTotalPeople={setTotalPeople}/> : null }
{ showPeopleSelector ? <NbPeopleSelector totalPeople={totalPeople} setTotalPeople={setTotalPeople}/> : <></> }
<Box margin="2%"></Box>

</Box>
);
}

export default TableSquare;
export default TableSquare;
Loading
Loading