-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove commented out code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/components/dashboard/Orders.tsx
Outdated
padding:"1px 5px" , | ||
|
||
backgroundColor:"#E3EECB" }:{padding:"1px 5px" , | ||
backgroundColor:"#FFD0CA"}}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Colors shouldn't be hardcoded. Please use the site theme
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prefer https://mui.com/material-ui/customization/typography/ for text. This also gives access to the sx
property which you should use for styling
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/components/dashboard/Orders.tsx
Outdated
|
||
|
||
|
||
//! Helper function for custom Pagination |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't need this comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/components/dashboard/Orders.tsx
Outdated
|
||
//! Helper function for custom Pagination | ||
function CustomPagination() { | ||
const apiRef = useGridApiContext(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are you building custom pagination? MUI Data Grid has built in pagination
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is some inconsistent spacing on this file. Please use VS Code Format Document on all the files you worked on.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/components/dashboard/Orders.tsx
Outdated
|
||
const [isFilePicked, setIsFilePicked] = useState(false); | ||
|
||
//* steps of add new order stepper |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove this and the similar comments below please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A lot of unnecessary vertical whitespace (new lines) on this file and others. One new line between sections is enough.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/components/stepper/StepOne.tsx
Outdated
import Box from "@mui/material/Box"; | ||
import {FormControl,TextField } from "@mui/material"; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Too many newlines
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
</FormControl> | ||
</Box> | ||
</Box> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unnecessary newlines
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
src/providers/SteperProvider.tsx
Outdated
); | ||
} | ||
StepperProvider.propTypes = { | ||
children: PropTypes.node.isRequired, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Delete proptypes dependencies
src/components/stepper/Steps.tsx
Outdated
|
||
]; | ||
|
||
const QontoConnector = styled(StepConnector)(() => ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
getRowId
row identifier. I'm going to fix this after adding backend.Orders.tsx
file. 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.