Skip to content

O
order-management-react
Commit 2d20a470 authored by Shanelle Valencia's avatar Shanelle Valencia
Browse files
Options

Merge branch 'order-search' into 'dev' 

Order search

See merge request !6
parents e16c32b0 91b5320b
Show whitespace changes
Inline Side-by-side
Showing with 309 additions and 124 deletions
package.json
View file @ 2d20a470
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
"@chakra-ui/react": "^1.6.0", "@chakra-ui/react": "^1.6.0",
"@emotion/react": "^11", "@emotion/react": "^11",
"@emotion/styled": "^11", "@emotion/styled": "^11",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@hookform/resolvers": "^2.4.0", "@hookform/resolvers": "^2.4.0",
"@reduxjs/toolkit": "^1.5.1", "@reduxjs/toolkit": "^1.5.1",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
......
src/components/Nav.tsx
View file @ 2d20a470
import React, { useMemo} from 'react' import React, { useMemo} from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import {useGoogleAuth} from 'hooks' import {useGoogleAuth} from 'hooks'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { Box, Heading, Flex, Spacer, Button } from "@chakra-ui/react"
import Logo from '../img/logo.png'
const Nav = () => { const Nav = () => {
const { isSignedIn, signOut, signIn } = useGoogleAuth(); const { isSignedIn, signOut, signIn } = useGoogleAuth();
...@@ -8,16 +13,21 @@ const Nav = () => { ...@@ -8,16 +13,21 @@ const Nav = () => {
const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]); const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
const userIcon = <FontAwesomeIcon icon={faUser} />
return ( return (
<header className="nav-bar" role="navigation"> <Flex>
<div className="order-management">Order Management Console PRO</div> <Box>
<ul className="nav-list"> <Link to="/"><img src={Logo}/></Link>
<li><Link className="nav-link" to="/orders">All orders</Link></li> </Box>
<li><Link className="nav-link" to="/account">(account logo here)</Link></li> <Spacer />
<li><button onClick={handleAuth}>{authLinkText}</button></li> <Box>
</ul> <Link className="nav-link" to="/account">{userIcon}</Link>
</header> <Button><Link className="nav-link" to="/orders">All orders</Link></Button>
<Button onClick={handleAuth}>{authLinkText}</Button>
</Box>
</Flex>
) )
} }
......
src/components/OrderDetails.tsx
View file @ 2d20a470
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
TableCaption,
Input,
Wrap,
WrapItem
} from "@chakra-ui/react"
const OrderDetails = (props: any) => { const OrderDetails = (props: any) => {
const orderNumber = props.orderNumber const orderNumber = props.orderNumber
...@@ -7,9 +21,9 @@ const OrderDetails = (props: any) => { ...@@ -7,9 +21,9 @@ const OrderDetails = (props: any) => {
const status = props.status const status = props.status
return ( return (
<> <>
<td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></td> <Td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></Td>
<td>{date}</td> <Td>{date}</Td>
<td>{status}</td> <Td>{status}</Td>
</> </>
) )
} }
......
src/components/OrderShowDetails.tsx
View file @ 2d20a470
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Item } from 'Order'; import { Item } from 'Order';
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
TableCaption,
Input,
Wrap,
WrapItem
} from "@chakra-ui/react"
const OrderShowDetails = (props: any) => { const OrderShowDetails = (props: any) => {
const [items, setItems] = useState<Item[]>() const [items, setItems] = useState<Item[]>()
...@@ -11,10 +24,10 @@ const OrderShowDetails = (props: any) => { ...@@ -11,10 +24,10 @@ const OrderShowDetails = (props: any) => {
return items.map((item: Item, idx: number) => { return items.map((item: Item, idx: number) => {
return ( return (
<tr key={idx}> <tr key={idx}>
<td>{item.itemId}</td> <Td >{item.itemId}</Td >
<td>{item.itemPrice}</td> <Td >{item.itemPrice}</Td >
<td>{item.itemQuantity}</td> <Td >{item.itemQuantity}</Td >
<td>{item.itemSku}</td> <Td >{item.itemSku}</Td >
</tr> </tr>
) )
}); });
...@@ -24,17 +37,19 @@ const OrderShowDetails = (props: any) => { ...@@ -24,17 +37,19 @@ const OrderShowDetails = (props: any) => {
return ( return (
items ? items ?
<table> <div className="table-div">
<tbody> <Table variant="striped" colorScheme="messenger" size="lg">
<tr> <Tbody>
<th>ID</th> <Tr>
<th>Price</th> <Th>ID</Th>
<th>Quantity</th> <Th>Price</Th>
<th>SKU</th> <Th>Quantity</Th>
</tr> <Th>SKU</Th>
</Tr>
{itemDetails} {itemDetails}
</tbody> </Tbody>
</table> </Table>
</div>
: :
<div className="Order without items"> <div className="Order without items">
This order didn't contain any items. This order didn't contain any items.
......
src/components/SearchOrder.tsx
View file @ 2d20a470
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom' // import { Link } from 'react-router-dom'
import { Order } from 'Order'; // import { OrderDetails } from 'components'
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// import { faSearch } from '@fortawesome/free-solid-svg-icons'
// import {
// Table,
// Thead,
// Tbody,
// Tfoot,
// Tr,
// Th,
// Td,
// TableCaption,
// Input,
// Wrap,
// WrapItem
// } from "@chakra-ui/react"
const SearchOrder = (props: any) => { const SearchOrder = (props: any) => {
const orders = props.orders; // const { orders } = props;
const [searchInput, setSearchInput] = useState(""); // const [searchInput, setSearchInput] = useState("");
const [searchResult, setSearchResult] = useState([]); // const [searchResult, setSearchResult] = useState<string[]>([]);
console.log("ORDERS", orders) // console.log("ORDERS", orders)
// console.log("props", props) // const searchIcon = <FontAwesomeIcon icon={faSearch} />
const handleSearchInput = (event: any) => { // const handleSearchInput = (event: any) => {
setSearchInput(event.target.value); // setSearchInput(event.target.value);
} // }
const resetInputField = () => {
setSearchInput(""); // useEffect(() => {
} // const filtered = orders.filter((order: any) =>
// order.id.includes(searchInput) //|| order.date.includes(searchInput)
useEffect(() => { // );
if (orders.length > 0) { // // debugger
const res = orders.filter((order: any) => // setSearchResult(filtered);
order.orderNumber.includes(searchInput) //|| order.date.includes(searchInput) // }, [searchInput]);
// console.log(orderNum)
// const searchResultArr = searchResult.map((item: any, idx) => {
); // return <Tr key={idx}><OrderDetails
// debugger // date={item.orderCreatedAt}
setSearchResult(res); // orderNumber={item.id}
} // status={item.orderStatus}/>
}, [searchInput]); // </Tr>
// })
return (
<div> // return (
<h1>Search</h1> // <div>
<input // <Wrap>
type="text" // {/* <WrapItem>
placeholder="Search" // <span>Search</span>
value={searchInput} // </WrapItem> */}
onChange={handleSearchInput} // <WrapItem>
/> // {/* <input
<ul> // type="text"
// placeholder="Search"
{searchResult.map((item: any, idx) => { // value={searchInput}
// debugger // onChange={handleSearchInput}
return ( // /> */}
<li key={idx}> // <Input
<Link to={"/orders/" + item.orderNumber}>{item.orderNumber}</Link> // focusBorderColor="gray.400"
</li> // type="text"
) // placeholder="Search <%=searchIcon%>"
})} // value={searchInput}
</ul> // onChange={handleSearchInput}
</div> // />
); // </WrapItem>
// </Wrap>
// <Table variant="striped" colorScheme="messenger" size="md">
// <Thead>
// <Tr>
// <Th>Order number</Th>
// <Th>Created</Th>
// <Th>Order Status</Th>
// </Tr>
// </Thead>
// <Tbody>
// {searchResultArr}
// </Tbody>
// </Table>
// </div>
// );
} }
export default SearchOrder export default SearchOrder
......
src/index.css
View file @ 2d20a470
...@@ -15,7 +15,9 @@ code { ...@@ -15,7 +15,9 @@ code {
monospace; monospace;
} }
tbody, tr, th, span, td {
/* tbody, tr, th, span, td {
border: 2px solid orangered; border: 2px solid orangered;
} }
...@@ -72,4 +74,17 @@ li { ...@@ -72,4 +74,17 @@ li {
.nav-link:hover { .nav-link:hover {
background-color: black; background-color: black;
} */
.table-div {
padding: 150px;
padding-top: 80px;
}
.index-table {
border: 1px solid rgb(110, 106, 106);
padding: 0 10px 15px 10px;
border-radius: 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
\ No newline at end of file
src/pages/OrderIndexPage.tsx
View file @ 2d20a470
...@@ -3,37 +3,91 @@ import {OrderDetails, SearchOrder} from 'components' ...@@ -3,37 +3,91 @@ import {OrderDetails, SearchOrder} from 'components'
import { OrderService } from 'services'; import { OrderService } from 'services';
import { Order } from 'Order'; import { Order } from 'Order';
import { useAllOrders } from 'hooks' import { useAllOrders } from 'hooks'
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
TableCaption,
Input
} from "@chakra-ui/react"
const OrderIndexPage = () => { const OrderIndexPage = () => {
// const { orders } = useAllOrders(); const { orders } = useAllOrders();
let [orders, setOrders] = useState([]); const [searchInput, setSearchInput] = useState("")
const [allOrders, setAllOrders] = useState<any>([])
useEffect(() => { useEffect(() => {
OrderService.allOrders().then((data) => setOrders(data)); setAllOrders(orders)
}, []) }, [orders])
const orderDetailsArr = orders.map((order: Order, idx: any) => { const handleChange = (e: any) => {
return <tr key={idx}><OrderDetails console.log("e.key", e.key)
if (e.key === "Enter") {
handleClick()
}
const value = e.target.value
setSearchInput(value)
}
const handleClick = () => {
console.log(searchInput)
console.log(allOrders)
const searchLength = searchInput.length
const newArray = []
for (const ele of allOrders) {
// const snippet = ele.id.slice(0, searchLength).toString()
if (ele.id.includes(searchInput)) {
newArray.push(ele)
}
}
console.log("newarray", newArray)
if (searchLength !== 0) {
setAllOrders(newArray)
} else {
setAllOrders(orders)
}
}
const orderDetailsArr = allOrders.map((order: Order, idx: any) => {
return <Tr key={idx}><OrderDetails
date={order.orderCreatedAt} date={order.orderCreatedAt}
orderNumber={order.id} orderNumber={order.id}
status={order.orderStatus} status={order.orderStatus}
/></tr> /></Tr>
}) })
return ( return (
<> <div className="table-div">
<table> <Input
<tbody> type="text"
<tr> placeholder="Search by Order Number"
<th>Order number</th> focusBorderColor="telegram.400"
<th>Created</th> value={searchInput}
<th>Order Status</th> onChange={handleChange}
</tr> onKeyDown={handleChange}
{orderDetailsArr} >
</tbody> </Input>
</table> {/* <button onClick={handleClick}>Submit</button> */}
<SearchOrder orders={orders}/> <br/>
</> <div className="index-table">
<Table variant="striped" colorScheme="messenger" size="md">
<Thead>
<Tr>
<Th>Order number</Th>
<Th>Created</Th>
<Th>Order Status</Th>
</Tr>
</Thead>
<Tbody>
{ orderDetailsArr }
</Tbody>
</Table>
</div>
</div>
) )
} }
......
src/pages/OrderShowPage.tsx
View file @ 2d20a470
...@@ -4,6 +4,10 @@ import {OrderShowDetails} from 'components'; ...@@ -4,6 +4,10 @@ import {OrderShowDetails} from 'components';
import { Order, Item } from 'Order'; import { Order, Item } from 'Order';
import { useOrder } from 'hooks' import { useOrder } from 'hooks'
import { OrderService } from 'services' import { OrderService } from 'services'
import {
Wrap,
WrapItem
} from "@chakra-ui/react"
...@@ -28,12 +32,12 @@ const OrderShowPage = (props: any) => { ...@@ -28,12 +32,12 @@ const OrderShowPage = (props: any) => {
} }
return ( return (
<div> <div className="table-div">
<span> <Wrap>
<h3>Order Date: {order.orderCreatedAt}</h3> <WrapItem>Order Date: {order.orderCreatedAt}</WrapItem>
<h3>Order Number: {order.id}</h3> <WrapItem>Order Number: {order.id}</WrapItem>
<h3>Order Status: {order.orderStatus}</h3> <WrapItem>Order Status: {order.orderStatus}</WrapItem>
</span> </Wrap>
<OrderShowDetails items={order.orderItems}/> <OrderShowDetails items={order.orderItems}/>
</div> </div>
......
src/router/MainRouter.tsx
View file @ 2d20a470
...@@ -4,9 +4,11 @@ import { Nav } from 'components' ...@@ -4,9 +4,11 @@ import { Nav } from 'components'
import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages'; import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
import { GoogleAuthProvider } from 'hooks' import { GoogleAuthProvider } from 'hooks'
import { PublicRoute, PrivateRoute } from 'router' import { PublicRoute, PrivateRoute } from 'router'
import { StyleProvider } from 'styles'
const MainRouter: React.FC = () => { const MainRouter: React.FC = () => {
return ( return (
<StyleProvider>
<BrowserRouter> <BrowserRouter>
<GoogleAuthProvider> <GoogleAuthProvider>
<Nav /> <Nav />
...@@ -21,6 +23,8 @@ const MainRouter: React.FC = () => { ...@@ -21,6 +23,8 @@ const MainRouter: React.FC = () => {
</main> </main>
</GoogleAuthProvider> </GoogleAuthProvider>
</BrowserRouter> </BrowserRouter>
</StyleProvider>
) )
} }
......
src/styles/StyleProvider.tsx
View file @ 2d20a470
import { ChakraProvider } from "@chakra-ui/react" import { ChakraProvider } from "@chakra-ui/react"
import {Nav} from 'components'
import { extendTheme } from "@chakra-ui/react" import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc // 2. Extend the theme to include custom colors, fonts, etc
...@@ -9,12 +12,17 @@ const colors = { ...@@ -9,12 +12,17 @@ const colors = {
700: "#2a69ac", 700: "#2a69ac",
}, },
} }
const theme = extendTheme({ colors }) const theme = extendTheme({ colors })
const StyleProvider = () => { const StyleProvider: React.FC = ({ children }) => {
return ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
{ children }
</ChakraProvider> </ChakraProvider>
) )
} }
......
src/styles/index.tsx 0 → 100644
View file @ 2d20a470
export {default as StyleProvider} from './StyleProvider'
\ No newline at end of file
yarn.lock
View file @ 2d20a470
...@@ -1817,6 +1817,32 @@ ...@@ -1817,6 +1817,32 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@^0.2.35":
version "0.2.35"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
"@fortawesome/fontawesome-svg-core@^1.2.35":
version "1.2.35"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@fortawesome/free-solid-svg-icons@^5.15.3":
version "5.15.3"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@fortawesome/react-fontawesome@^0.1.14":
version "0.1.14"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
dependencies:
prop-types "^15.7.2"
"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment