Bhosseini/orders page #56
Conversation
…ng on putting them all together
src/components/dashboard/Orders.tsx
Outdated
|
|
||
|
|
||
| //! Dynamic Header | ||
| // const range = XLSX.utils.decode_range(ws["!ref"] || "A1"); |
There was a problem hiding this comment.
Remove commented out code
src/components/dashboard/Orders.tsx
Outdated
| padding:"1px 5px" , | ||
|
|
||
| backgroundColor:"#E3EECB" }:{padding:"1px 5px" , | ||
| backgroundColor:"#FFD0CA"}}> |
There was a problem hiding this comment.
Colors shouldn't be hardcoded. Please use the site theme
src/components/dashboard/Orders.tsx
Outdated
| width: 150, | ||
| align:"center", | ||
| renderCell: (params) => ( | ||
| <span style={params.value==="Yes" || params.value==="yes"?{ |
There was a problem hiding this comment.
This ternary operator formatting is a bit awkward. Please use
condition
?
{ true case }
:
{ false case }
src/components/dashboard/Orders.tsx
Outdated
| width: 150, | ||
| align:"center", | ||
| renderCell: (params) => ( | ||
| <span style={params.value==="Yes" || params.value==="yes"?{ |
There was a problem hiding this comment.
Prefer https://mui.com/material-ui/customization/typography/ for text. This also gives access to the sx property which you should use for styling
src/components/dashboard/Orders.tsx
Outdated
|
|
||
|
|
||
|
|
||
| //! Helper function for custom Pagination |
There was a problem hiding this comment.
Don't need this comment
src/components/dashboard/Orders.tsx
Outdated
|
|
||
| //! Helper function for custom Pagination | ||
| function CustomPagination() { | ||
| const apiRef = useGridApiContext(); |
There was a problem hiding this comment.
Why are you building custom pagination? MUI Data Grid has built in pagination
There was a problem hiding this comment.
In order to make pagination style like what is required, I've built custom pagination.
src/components/dashboard/Orders.tsx
Outdated
| // headerClassName: "super-app-theme--header", | ||
| // })); | ||
|
|
||
| //static Header |
src/components/dashboard/Orders.tsx
Outdated
| }}> | ||
| {isFilePicked ? <div style={{ height: 570, width: "100%" }}><DataGrid getRowId={(row) => row.id} rows={searchResults.length > 0 ? searchResults : rows} columns={columns} pageSize={9} rowsPerPageOptions={[9]} components={{ | ||
| Pagination: CustomPagination, | ||
| //! Toolbar: GridToolbar, //It's not required in our ptojec(I think It would be better if we add this feature) |
There was a problem hiding this comment.
What is this referring to?
Iasaolu/admin dasboard
src/components/dashboard/Orders.tsx
Outdated
| amount: number, | ||
| ) { | ||
| return { id, date, name, shipTo, paymentMethod, amount }; | ||
| import React, { useState, useEffect, ChangeEvent,useContext } from "react"; |
There was a problem hiding this comment.
There is some inconsistent spacing on this file. Please use VS Code Format Document on all the files you worked on.
src/components/dashboard/Orders.tsx
Outdated
|
|
||
| const [isFilePicked, setIsFilePicked] = useState(false); | ||
|
|
||
| //* steps of add new order stepper |
There was a problem hiding this comment.
Remove this and the similar comments below please
src/components/dashboard/Orders.tsx
Outdated
|
|
||
|
|
||
| const columns: GridColDef[] = [ | ||
| { field: "id", headerName: "No.", width: 50 , align:"center",headerAlign:"center"}, |
There was a problem hiding this comment.
this object should be wrapped like all of the fields below it
| import React from "react"; | ||
| import Box from "@mui/material/Box"; | ||
| import { Typography } from "@mui/material"; | ||
|
|
There was a problem hiding this comment.
A lot of unnecessary vertical whitespace (new lines) on this file and others. One new line between sections is enough.
src/components/stepper/StepOne.tsx
Outdated
| import Box from "@mui/material/Box"; | ||
| import {FormControl,TextField } from "@mui/material"; | ||
|
|
||
|
|
| </FormControl> | ||
| </Box> | ||
| </Box> | ||
|
|
There was a problem hiding this comment.
Unnecessary newlines
src/providers/SteperProvider.tsx
Outdated
| ); | ||
| } | ||
| StepperProvider.propTypes = { | ||
| children: PropTypes.node.isRequired, |
There was a problem hiding this comment.
Don't use prop types. We are using typescript so use the typescript types instead. The type of children is React.ReactNode
src/components/stepper/Steps.tsx
Outdated
|
|
||
| "& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel": | ||
| { | ||
| color: "black", // Just text label (COMPLETED) |
There was a problem hiding this comment.
Remove this and below inline comments
src/components/stepper/Steps.tsx
Outdated
| }; | ||
|
|
||
| Steps.propTypes = { | ||
| setOpen: PropTypes.func.isRequired |
There was a problem hiding this comment.
Use typescript types instead of prop types
src/components/stepper/Steps.tsx
Outdated
| import Step from "@mui/material/Step"; | ||
| import StepLabel from "@mui/material/StepLabel"; | ||
| import StepConnector, { stepConnectorClasses } from "@mui/material/StepConnector"; | ||
| import PropTypes from "prop-types"; |
There was a problem hiding this comment.
Delete proptypes dependencies
src/components/stepper/Steps.tsx
Outdated
|
|
||
| ]; | ||
|
|
||
| const QontoConnector = styled(StepConnector)(() => ({ |
There was a problem hiding this comment.
What is this name supposed to mean? What is Qonto? Please rename
src/components/stepper/StepTwo.tsx
Outdated
| <Box sx={{borderBottom: "solid", borderTop: "solid",borderWidth: 2, borderColor: "primary.main", p:2}} > | ||
| <FormControl > | ||
| <RadioGroup > | ||
| <FormControlLabel value="marketingEmail" control={<Radio />} label="Marketing Email" /> |
There was a problem hiding this comment.
You should map a list of these values and labels instead of hardcoding all of the <FormControlLabel>s
| import RadioGroup from "@mui/material/RadioGroup"; | ||
| import FormControlLabel from "@mui/material/FormControlLabel"; | ||
| import Radio from "@mui/material/Radio"; | ||
|
|
There was a problem hiding this comment.
Unnecessary whitespace
| <ButtonGroup sx ={{px:2}}> | ||
| <Button onClick={() => setAFAC(AFAC + 1)}>+</Button> | ||
| <Button >{AFAC}</Button> | ||
| <Button onClick={() => setAFAC(AFAC - 1)} >-</Button> |
There was a problem hiding this comment.
What if this gets set below 0? This should never be negative
…s-ctc into bhosseini/orders_page
Create import CSV for admin Orders page (#20 )
Description
Task :
Create a file upload that reads in a CSV file with client data that renders a table with all read client info as seen in screenshots below.
Acceptance Criteria:
Information is displayed accurately
Search bar filters items in the table when a name is inputted
Renders a set amount of rows, some sort of button on the bottom to navigate the table
List any dependencies that are required for this change. (gems, js libraries, etc.)
Warnings:
getRowIdrow identifier. I'm going to fix this after adding backend.Orders.tsxfile. We have to create some directories like utils and interfaces/types to move them there.Type of change
How Has This Been Tested?
This feature has been tested by this Excel file.