Skip to content

B 24 - Button added #51

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

Open
MichaelAngeloTheFirst wants to merge 2 commits into
base: b_master
Choose a base branch
from
Open

B 24 - Button added #51

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
eb38bdd
Button added
MichaelAngeloTheFirst Dec 17, 2022
6ab7e0e
xDDDDD
MichaelAngeloTheFirst Dec 17, 2022
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
22 changes: 16 additions & 6 deletions src/components/PackagingStatus/PackagingStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import Box from "@mui/system/Box";
import { useEffect, useState } from "react";
import {DeliveryStatus} from './types';
import { DeliveryStatus } from "./types";

const PackagingStatus = ({status}: {status:string}) => {
const PackagingStatus = ({ status }: { status: string }) => {
return (
<Box> {status}
<Box
border={1}
marginX={"auto"}
width={40}
alignContent={"center"}
borderRadius={"50px"}
textAlign="center"
justifyItems={"center"}
justifyContent={"center"}
>
{status}
</Box>
)
}
);
};

export default PackagingStatus;
export default PackagingStatus;
219 changes: 130 additions & 89 deletions src/components/SendPresents/SendPresents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,140 @@
import React from "react";
import { Box, Button, Card, CardContent, Grid, makeStyles, Modal, Paper, styled, Typography } from "@mui/material";
import StarIcon from '@mui/icons-material/Star';
import CloseIcon from '@mui/icons-material/Close';
import {
Box,
Button,
Card,
CardContent,
Grid,
makeStyles,
Modal,
Paper,
styled,
Typography,
} from "@mui/material";
import StarIcon from "@mui/icons-material/Star";
import CloseIcon from "@mui/icons-material/Close";
import ListModal from "../ListModal";
import PackButton from "../TablePackages/PackButton";

const SendPresents = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

const SendPresents = () =>{
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 650,
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 4,
display: "flex",
padding: "0",
flexDirection: "column",
};

const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 650,
bgcolor: 'background.paper',
borderRadius: '12px',
boxShadow: 24,
p: 4,
display: 'flex',
padding: '0',
flexDirection: 'column',
};


return (<>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="verify-letter-modal"
aria-describedby="verify-letter-modal"
>
<Box sx={style}>
<Grid container spacing={0}>
<Grid item xs={4}>
<Box sx={{ bgcolor: "#F3F7F9", borderTopLeftRadius: 12, borderBottomLeftRadius: 12 }}>
<img style={{ borderTopLeftRadius: 12 }} src="https://s3-alpha-sig.figma.com/img/66c9/766b/c207d69c2b105689d11455c446de3096?Expires=1672012800&Signature=G-bz4llIrnYsmX7~YJnA3JZA8k8Q7iLhFUYmZbQwzpQfof4hejgLIAabKy1d4ranhvKZbrTKCbacGmz179yYdJ2Yp6y25tjYLSyyaiDCfGXDkS8cGjQCgzKDJJy78nHQjBTwfEtXKi7~MX1GY2mH09fltna7UIMFQsMWym7RyG5SUTnOHkfiSCRVMo1qvs0BgXWiBcj7TRu0CQ7xgjdYTI-hcMUSfuqWu7HbmtwPh0hGmtME23Io1ehvQTp99J9GfrJPPB9xsjPNerJKApJG68LmHQEae3iXBXvmfnwgKA8GbMkQy8o0vNcRQ5Q~4Ctd5RhyVwGCUSDIUy1u9O0L3w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" width="100%" />
<Typography sx={{ padding: 3 }}>
<b>Imię:</b><br />
x<br />
<b>Nazwisko:</b><br />
xxx xxxxxxxx<br />
<b>Wiek:</b><br />
x lat<br />
<b>Grzeczność:</b><br />
x<br />
<b>Kraj:</b><br />
x<br />
<b>Miasto:</b><br />
x<br />
<b>Ulica:</b><br />
x<br />
</Typography>
</Box>
return (
<>
<PackButton onClick={handleOpen} />
<Modal
open={open}
onClose={handleClose}
aria-labelledby="verify-letter-modal"
aria-describedby="verify-letter-modal"
>
<Box sx={style}>
<Grid container spacing={0}>
<Grid item xs={4}>
<Box
sx={{
bgcolor: "#F3F7F9",
borderTopLeftRadius: 12,
borderBottomLeftRadius: 12,
}}
>
<img
style={{ borderTopLeftRadius: 12 }}
src="https://s3-alpha-sig.figma.com/img/66c9/766b/c207d69c2b105689d11455c446de3096?Expires=1672012800&Signature=G-bz4llIrnYsmX7~YJnA3JZA8k8Q7iLhFUYmZbQwzpQfof4hejgLIAabKy1d4ranhvKZbrTKCbacGmz179yYdJ2Yp6y25tjYLSyyaiDCfGXDkS8cGjQCgzKDJJy78nHQjBTwfEtXKi7~MX1GY2mH09fltna7UIMFQsMWym7RyG5SUTnOHkfiSCRVMo1qvs0BgXWiBcj7TRu0CQ7xgjdYTI-hcMUSfuqWu7HbmtwPh0hGmtME23Io1ehvQTp99J9GfrJPPB9xsjPNerJKApJG68LmHQEae3iXBXvmfnwgKA8GbMkQy8o0vNcRQ5Q~4Ctd5RhyVwGCUSDIUy1u9O0L3w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
width="100%"
/>
<Typography sx={{ padding: 3 }}>
<b>Imię:</b>
<br />
x<br />
<b>Nazwisko:</b>
<br />
xxx xxxxxxxx
<br />
<b>Wiek:</b>
<br />
x lat
<br />
<b>Grzeczność:</b>
<br />
x<br />
<b>Kraj:</b>
<br />
x<br />
<b>Miasto:</b>
<br />
x<br />
<b>Ulica:</b>
<br />
x<br />
</Typography>
</Box>
</Grid>
<Grid item xs={8}>
<Box sx={{ borderTopRightRadius: 12, padding: 3 }}>
<Box>
<Grid container spacing={0}>
<Grid item xs={6}>
<Typography sx={{ color: "#A9A9A9", width: "50%" }}>
ID x<br />
calendar xx.xx.xxxx
<br />
</Typography>
</Grid>
<Grid item xs={8}>
<Box sx={{ borderTopRightRadius: 12, padding: 3 }}>
<Box>
<Grid container spacing={0}>
<Grid item xs={6}>
<Typography sx={{ color: "#A9A9A9", width: "50%" }}>
ID x<br />
calendar xx.xx.xxxx<br />
</Typography>
</Grid>

<Grid item xs={5}>
<Typography sx={{ borderRadius: 12, border: "solid", width: 100, textAlign: "center" }}>
category
</Typography>
</Grid>

<Grid item xs={1}>
<Button variant="text" sx={{ color: "black" }} onClick={handleClose}>
<CloseIcon />
</Button>
</Grid>
</Grid>
</Box>
<Box sx={{ margin: 3 }}>
<Typography sx={{ fontSize: 25 }}>
<ListModal></ListModal>
</Typography>
</Box>
<Grid item xs={5}>
<Typography
sx={{
borderRadius: 12,
border: "solid",
width: 100,
textAlign: "center",
}}
>
category
</Typography>
</Grid>

</Box>
<Grid item xs={1}>
<Button
variant="text"
sx={{ color: "black" }}
onClick={handleClose}
>
<CloseIcon />
</Button>
</Grid>
</Grid>
</Box>
</Modal>
</>)
}
</Grid>
</Box>
<Box sx={{ margin: 3 }}>
<Typography sx={{ fontSize: 25 }}>
<ListModal></ListModal>
</Typography>
</Box>
</Box>
</Grid>
</Grid>
</Box>
</Modal>
</>
);
};

export default SendPresents
export default SendPresents;
25 changes: 25 additions & 0 deletions src/components/TablePackages/PackButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Button } from "@mui/material";
import { PackButtonProps } from "./types";

const PackButton = ({ onClick }: PackButtonProps) => {
return (
<Button
onClick={onClick}
sx={{
"&:hover": {
background: "white",
color: "#294C89",
},
background: "#294C89",
boxShadow:
"0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)",
borderRadius: "16px",
color: "white",
}}
>
PAKUJ
</Button>
);
};

export default PackButton;
20 changes: 20 additions & 0 deletions src/components/TablePackages/PackModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Modal, Typography } from "@mui/material";
import { useState } from "react";
import PackButton from "./PackButton";

const PackModal = ({ id }: { id: number }) => {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

return (
<>
<PackButton onClick={handleOpen} />
<Modal open={open} onClose={handleClose}>
<Typography>{id}</Typography>
</Modal>
</>
);
};

export default PackModal;
31 changes: 16 additions & 15 deletions src/components/TablePackages/PackageTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,38 @@ import { TableCell, TableRow } from "@mui/material";
import PackagingStatus from "../PackagingStatus";
import { Packages } from "./types";
import CreationDate from "../CreationDate";
import Name from "../../components/Name/Name"
import Country from '../../components/Name/Country';
import Name from "../../components/Name/Name";
import Country from "../../components/Name/Country";
import { SendPresents } from "../SendPresents";

const PackageTableRow = ({ id, kindness, createdAt, status, ...rest }: Packages) => {
const PackageTableRow = ({
id,
kindness,
createdAt,
status,
...rest
}: Packages) => {
return (
<TableRow>
<TableCell>
<CheckBoxOutlineBlankOutlined />
</TableCell>

<TableCell>{id}</TableCell>
<TableCell>
{id}
<Name fullName={rest.name} />
</TableCell>
<TableCell>
<Name fullName={rest.name}/>
<PackagingStatus status={status} />
</TableCell>
<TableCell>
<PackagingStatus status={status}/>
<Country country={rest.country} />
</TableCell>
<TableCell>{rest.city}</TableCell>
<CreationDate date={createdAt} />
<TableCell>
<Country country={rest.country}/>
<SendPresents />
</TableCell>
<TableCell>
{rest.city}
</TableCell>
<CreationDate date={createdAt}/>
<TableCell>
<SendPresents/>
</TableCell>

</TableRow>
);
};
Expand Down
21 changes: 12 additions & 9 deletions src/components/TablePackages/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@ export interface Packages {
createdAt: string;
}

export interface DeliveryStatus {
id: number;
wish_list_id: number;
name: string;
kindness: number;
status: string;
country: string;
city: string;
created_at: string;
}

export interface DeliveryStatus{
id: number
wish_list_id: number
name: string
kindness: number
status: string
country: string
city: string
created_at: string
export interface PackButtonProps {
onClick: () => void;
}