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
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 124 deletions
src/components/Nav.tsx
View file @ 2d20a470
import React, { useMemo} from 'react'
import { Link } from 'react-router-dom'
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 { isSignedIn, signOut, signIn } = useGoogleAuth();
......@@ -8,16 +13,21 @@ const Nav = () => {
const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
const userIcon = <FontAwesomeIcon icon={faUser} />
return (
<header className="nav-bar" role="navigation">
<div className="order-management">Order Management Console PRO</div>
<ul className="nav-list">
<li><Link className="nav-link" to="/orders">All orders</Link></li>
<li><Link className="nav-link" to="/account">(account logo here)</Link></li>
<li><button onClick={handleAuth}>{authLinkText}</button></li>
</ul>
</header>
<Flex>
<Box>
<Link to="/"><img src={Logo}/></Link>
</Box>
<Spacer />
<Box>
<Link className="nav-link" to="/account">{userIcon}</Link>
<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 { 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 orderNumber = props.orderNumber
......@@ -7,9 +21,9 @@ const OrderDetails = (props: any) => {
const status = props.status
return (
<>
<td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></td>
<td>{date}</td>
<td>{status}</td>
<Td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></Td>
<Td>{date}</Td>
<Td>{status}</Td>
</>
)
}
......
src/components/OrderShowDetails.tsx
View file @ 2d20a470
import React, { useState, useEffect } from 'react';
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 [items, setItems] = useState<Item[]>()
......@@ -11,10 +24,10 @@ const OrderShowDetails = (props: any) => {
return items.map((item: Item, idx: number) => {
return (
<tr key={idx}>
<td>{item.itemId}</td>
<td>{item.itemPrice}</td>
<td>{item.itemQuantity}</td>
<td>{item.itemSku}</td>
<Td >{item.itemId}</Td >
<Td >{item.itemPrice}</Td >
<Td >{item.itemQuantity}</Td >
<Td >{item.itemSku}</Td >
</tr>
)
});
......@@ -24,17 +37,19 @@ const OrderShowDetails = (props: any) => {
return (
items ?
<table>
<tbody>
<tr>
<th>ID</th>
<th>Price</th>
<th>Quantity</th>
<th>SKU</th>
</tr>
{itemDetails}
</tbody>
</table>
<div className="table-div">
<Table variant="striped" colorScheme="messenger" size="lg">
<Tbody>
<Tr>
<Th>ID</Th>
<Th>Price</Th>
<Th>Quantity</Th>
<Th>SKU</Th>
</Tr>
{itemDetails}
</Tbody>
</Table>
</div>
:
<div className="Order without items">
This order didn't contain any items.
......
src/components/SearchOrder.tsx
View file @ 2d20a470
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Order } from 'Order';
// import { Link } from 'react-router-dom'
// 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 orders = props.orders;
const [searchInput, setSearchInput] = useState("");
const [searchResult, setSearchResult] = useState([]);
console.log("ORDERS", orders)
// console.log("props", props)
const handleSearchInput = (event: any) => {
setSearchInput(event.target.value);
}
const resetInputField = () => {
setSearchInput("");
}
useEffect(() => {
if (orders.length > 0) {
const res = orders.filter((order: any) =>
order.orderNumber.includes(searchInput) //|| order.date.includes(searchInput)
// console.log(orderNum)
);
// debugger
setSearchResult(res);
}
}, [searchInput]);
return (
<div>
<h1>Search</h1>
<input
type="text"
placeholder="Search"
value={searchInput}
onChange={handleSearchInput}
/>
<ul>
{searchResult.map((item: any, idx) => {
// debugger
return (
<li key={idx}>
<Link to={"/orders/" + item.orderNumber}>{item.orderNumber}</Link>
</li>
)
})}
</ul>
</div>
);
// const { orders } = props;
// const [searchInput, setSearchInput] = useState("");
// const [searchResult, setSearchResult] = useState<string[]>([]);
// console.log("ORDERS", orders)
// const searchIcon = <FontAwesomeIcon icon={faSearch} />
// const handleSearchInput = (event: any) => {
// setSearchInput(event.target.value);
// }
// useEffect(() => {
// const filtered = orders.filter((order: any) =>
// order.id.includes(searchInput) //|| order.date.includes(searchInput)
// );
// // debugger
// setSearchResult(filtered);
// }, [searchInput]);
// const searchResultArr = searchResult.map((item: any, idx) => {
// return <Tr key={idx}><OrderDetails
// date={item.orderCreatedAt}
// orderNumber={item.id}
// status={item.orderStatus}/>
// </Tr>
// })
// return (
// <div>
// <Wrap>
// {/* <WrapItem>
// <span>Search</span>
// </WrapItem> */}
// <WrapItem>
// {/* <input
// type="text"
// placeholder="Search"
// value={searchInput}
// onChange={handleSearchInput}
// /> */}
// <Input
// focusBorderColor="gray.400"
// type="text"
// placeholder="Search <%=searchIcon%>"
// value={searchInput}
// onChange={handleSearchInput}
// />
// </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
......
src/index.css
View file @ 2d20a470
......@@ -15,7 +15,9 @@ code {
monospace;
}
tbody, tr, th, span, td {
/* tbody, tr, th, span, td {
border: 2px solid orangered;
}
......@@ -72,4 +74,17 @@ li {
.nav-link:hover {
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'
import { OrderService } from 'services';
import { Order } from 'Order';
import { useAllOrders } from 'hooks'
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
TableCaption,
Input
} from "@chakra-ui/react"
const OrderIndexPage = () => {
// const { orders } = useAllOrders();
let [orders, setOrders] = useState([]);
const { orders } = useAllOrders();
const [searchInput, setSearchInput] = useState("")
const [allOrders, setAllOrders] = useState<any>([])
useEffect(() => {
OrderService.allOrders().then((data) => setOrders(data));
}, [])
setAllOrders(orders)
}, [orders])
const orderDetailsArr = orders.map((order: Order, idx: any) => {
return <tr key={idx}><OrderDetails
const handleChange = (e: any) => {
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}
orderNumber={order.id}
status={order.orderStatus}
/></tr>
/></Tr>
})
return (
<>
<table>
<tbody>
<tr>
<th>Order number</th>
<th>Created</th>
<th>Order Status</th>
</tr>
{orderDetailsArr}
</tbody>
</table>
<SearchOrder orders={orders}/>
</>
<div className="table-div">
<Input
type="text"
placeholder="Search by Order Number"
focusBorderColor="telegram.400"
value={searchInput}
onChange={handleChange}
onKeyDown={handleChange}
>
</Input>
{/* <button onClick={handleClick}>Submit</button> */}
<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';
import { Order, Item } from 'Order';
import { useOrder } from 'hooks'
import { OrderService } from 'services'
import {
Wrap,
WrapItem
} from "@chakra-ui/react"
......@@ -28,12 +32,12 @@ const OrderShowPage = (props: any) => {
}
return (
<div>
<span>
<h3>Order Date: {order.orderCreatedAt}</h3>
<h3>Order Number: {order.id}</h3>
<h3>Order Status: {order.orderStatus}</h3>
</span>
<div className="table-div">
<Wrap>
<WrapItem>Order Date: {order.orderCreatedAt}</WrapItem>
<WrapItem>Order Number: {order.id}</WrapItem>
<WrapItem>Order Status: {order.orderStatus}</WrapItem>
</Wrap>
<OrderShowDetails items={order.orderItems}/>
</div>
......
src/router/MainRouter.tsx
View file @ 2d20a470
......@@ -4,23 +4,27 @@ import { Nav } from 'components'
import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
import { GoogleAuthProvider } from 'hooks'
import { PublicRoute, PrivateRoute } from 'router'
import { StyleProvider } from 'styles'
const MainRouter: React.FC = () => {
return (
<BrowserRouter>
<GoogleAuthProvider>
<Nav />
<main>
<Switch>
<PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={AuthPage} />
<PrivateRoute path="/orders/:id" component={OrderShowPage} />
<PrivateRoute path="/orders" component={OrderIndexPage} />
{/* <Route component={NotFoundPage} /> */}
</Switch>
</main>
</GoogleAuthProvider>
</BrowserRouter>
<StyleProvider>
<BrowserRouter>
<GoogleAuthProvider>
<Nav />
<main>
<Switch>
<PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={AuthPage} />
<PrivateRoute path="/orders/:id" component={OrderShowPage} />
<PrivateRoute path="/orders" component={OrderIndexPage} />
{/* <Route component={NotFoundPage} /> */}
</Switch>
</main>
</GoogleAuthProvider>
</BrowserRouter>
</StyleProvider>
)
}
......
src/styles/StyleProvider.tsx
View file @ 2d20a470
import { ChakraProvider } from "@chakra-ui/react"
import {Nav} from 'components'
import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc
......@@ -9,12 +12,17 @@ const colors = {
700: "#2a69ac",
},
}
const theme = extendTheme({ colors })
const StyleProvider = () => {
const StyleProvider: React.FC = ({ children }) => {
return (
<ChakraProvider theme={theme}>
{ children }
</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 @@
minimatch "^3.0.4"
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":
version "2.1.4"
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