Skip to content

W
warehouse-management
Commit bb36c8dd authored by Philippe Fonzin's avatar Philippe Fonzin
Browse files
Options

Merge branch 'feat/filtersearch' into 'master' 

split filter/search into diff components

See merge request !9
parents db3b5c9d 18c69132
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 133 deletions
frontend/public/stylesheets/filter.css
View file @ bb36c8dd
...@@ -107,4 +107,8 @@ ...@@ -107,4 +107,8 @@
.search-btn:hover { .search-btn:hover {
color:white; color:white;
background: gray; background: gray;
}
.error {
color: red;
} }
\ No newline at end of file
frontend/src/App.jsx
View file @ bb36c8dd
...@@ -11,10 +11,12 @@ const App = ({ orders, fetchOrders }) => { ...@@ -11,10 +11,12 @@ const App = ({ orders, fetchOrders }) => {
const [ordersToShow, setOrdersToShow] = useState(orders); const [ordersToShow, setOrdersToShow] = useState(orders);
const [fetchAttempted, setFetchAttempted] = useState(false); const [fetchAttempted, setFetchAttempted] = useState(false);
// debugger
useEffect(() => { useEffect(() => {
if (!fetchAttempted) { if (!fetchAttempted) {
setFetchAttempted(true);
fetchOrders(); fetchOrders();
setFetchAttempted(true);
} }
setOrdersToShow(orders); setOrdersToShow(orders);
}, [orders, fetchOrders, fetchAttempted]); }, [orders, fetchOrders, fetchAttempted]);
...@@ -22,11 +24,12 @@ const App = ({ orders, fetchOrders }) => { ...@@ -22,11 +24,12 @@ const App = ({ orders, fetchOrders }) => {
return ( return (
<div className="app"> <div className="app">
<Header /> <Header />
<FilterSearch orders={orders} setOrdersToShow={setOrdersToShow} /> <FilterSearch setOrdersToShow={setOrdersToShow} />
{ordersToShow.allIds.length ? {ordersToShow.allIds.length ? (
<OrderIndex orders={ordersToShow} /> : <OrderIndex orders={ordersToShow} />
) : (
<NoOrders /> <NoOrders />
} )}
</div> </div>
); );
} }
......
frontend/src/components/atoms/Error.jsx
View file @ bb36c8dd
const Error = ({ text }) => ( const Error = ({ text, className }) => (
<div> <div className={`error ${className || ""}`}>
{text} {text}
</div> </div>
) )
......
frontend/src/components/filter/Filter.jsx
View file @ bb36c8dd
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import Button from "../atoms/Button";
const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
const [all, setAll] = useState(false);
const [received, setReceived] = useState(false);
const [fulfilled, setFulfilled] = useState(false);
const [cancelled, setCancelled] = useState(false);
const RECEIVED = "RECEIVED";
const FULFILLED = "FULFILLED";
const CANCELLED = "CANCELLED";
const reset = () => {
setAll(true);
setReceived(false);
setFulfilled(false);
setCancelled(false);
};
const receive = () => {
setAll(false);
setReceived(!received);
if (received && !fulfilled && !cancelled) {
setAll(true);
}
};
const fulfill = () => {
setAll(false);
setFulfilled(!fulfilled);
if (!received && fulfilled && !cancelled) {
setAll(true);
}
};
const cancel = () => {
setAll(false);
setCancelled(!cancelled);
if (!received && !fulfilled && cancelled) {
setAll(true);
}
};
useEffect(() => {
if (all || (!all && !received && !fulfilled && !cancelled)) {
setOrdersToShow(orders);
} else {
const newOrders = { allIds: [], byId: {} };
orders.allIds.forEach((wareId) => {
const order = orders.byId[wareId];
switch (order.status) {
case RECEIVED:
if (all || received) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
case FULFILLED:
if (all || fulfilled) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
case CANCELLED:
if (all || cancelled) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
default:
break;
}
});
setOrdersToShow(newOrders);
}
}, [orders, setOrdersToShow, all, received, fulfilled, cancelled]);
if (!orders.allIds.length) return null;
return (
<div className="filter">
<div className="text">Filter:</div>
<div className="filter-btns">
<Button
className={`filter-all ${filtersOn && all ? "selected" : ""}`}
onClick={reset}
text="All"
/>
<Button
className={`filter-rec ${filtersOn && received ? "selected" : ""}`}
onClick={receive}
text="Received"
/>
<Button
className={`filter-ful ${filtersOn && fulfilled ? "selected" : ""}`}
onClick={fulfill}
text="Fulfilled"
/>
<Button
className={`filter-can ${filtersOn && cancelled ? "selected" : ""}`}
onClick={cancel}
text="Cancelled"
/>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
orders: state.entities.orders,
});
const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(Filter);
frontend/src/components/filter/FilterSearch.jsx
View file @ bb36c8dd
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Button from "../atoms/Button"; import Filter from "./Filter";
import Input from "../atoms/Input";
import Select from "../atoms/Select";
import Search from "./Search"; import Search from "./Search";
const FilterSearch = ({ orders, setOrdersToShow }) => { const FilterSearch = ({ orders, setOrdersToShow }) => {
const [all, setAll] = useState(false); const [filtersOn, setFiltersOn] = useState(true);
const [received, setReceived] = useState(false);
const [fulfilled, setFulfilled] = useState(false);
const [cancelled, setCancelled] = useState(false);
const RECEIVED = "RECEIVED";
const FULFILLED = "FULFILLED";
const CANCELLED = "CANCELLED";
const reset = () => {
setAll(true);
setReceived(false);
setFulfilled(false);
setCancelled(false);
};
const receive = () => {
setAll(false);
setReceived(!received);
if (received && !fulfilled && !cancelled) {
setAll(true);
}
};
const fulfill = () => {
setAll(false);
setFulfilled(!fulfilled);
if (!received && fulfilled && !cancelled) {
setAll(true);
}
};
const cancel = () => {
setAll(false);
setCancelled(!cancelled);
if (!received && !fulfilled && cancelled) {
setAll(true);
}
};
useEffect(() => {
if (all) {
setOrdersToShow(orders);
} else {
const newOrders = { allIds: [], byId: {} };
orders.allIds.forEach((wareId) => {
const order = orders.byId[wareId];
switch (order.status) {
case RECEIVED:
if (all || received) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
case FULFILLED:
if (all || fulfilled) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
case CANCELLED:
if (all || cancelled) {
newOrders.allIds.push(wareId);
newOrders.byId[wareId] = order;
}
break;
default:
break;
}
});
setOrdersToShow(newOrders);
}
}, [orders, setOrdersToShow, all, received, fulfilled, cancelled]);
if (!orders.allIds.length) return null;
return ( return (
<div className="filter-search"> <div className="filter-search">
<div className="filter"> <Filter filtersOn={filtersOn} setOrdersToShow={setOrdersToShow} />
<div className="text">Filter:</div> <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn}/>
<div className="filter-btns">
<Button
className={`filter-all ${all ? "selected" : ""}`}
onClick={reset}
text="All"
/>
<Button
className={`filter-rec ${received ? "selected" : ""}`}
onClick={receive}
text="Received"
/>
<Button
className={`filter-ful ${fulfilled ? "selected" : ""}`}
onClick={fulfill}
text="Fulfilled"
/>
<Button
className={`filter-can ${cancelled ? "selected" : ""}`}
onClick={cancel}
text="Cancelled"
/>
</div>
</div>
<Search setOrdersToShow={setOrdersToShow} />
</div> </div>
); );
};; };
export default FilterSearch; export default FilterSearch;
frontend/src/components/filter/Search.jsx
View file @ bb36c8dd
...@@ -3,31 +3,40 @@ import { connect } from "react-redux"; ...@@ -3,31 +3,40 @@ import { connect } from "react-redux";
import Select from "../atoms/Select"; import Select from "../atoms/Select";
import Input from "../atoms/Input"; import Input from "../atoms/Input";
import Button from "../atoms/Button"; import Button from "../atoms/Button";
import Error from "../atoms/Error";
const Search = ({ orders, setOrdersToShow }) => { const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
const [searchInput, setSearchInput] = useState(""); const [searchInput, setSearchInput] = useState("");
const [searchBy, setSearchBy] = useState(""); const [searchBy, setSearchBy] = useState("");
const [error, setError] = useState("");
const searchOptions = ["by Warehouse ID", "by Order ID"]; const searchOptions = ["by Warehouse ID", "by Order ID"];
const search = () => { const search = () => {
const searchResult = { allIds: [], byId: {} }; if (!searchInput.length) {
const searchedOrder = setError("Please enter a search parameter.");
searchBy === searchOptions[0] } else if (!searchBy.length) {
? orders.byId[searchInput] setError("Please enter search method.");
: searchBy === searchOptions[1] } else {
? orders.byOrderId[searchInput] const searchResult = { allIds: [], byId: {} };
: null; const searchedOrder =
searchBy === searchOptions[0]
? orders.byId[searchInput]
: searchBy === searchOptions[1]
? orders.byOrderId[searchInput]
: null;
if (searchedOrder) { if (searchedOrder) {
searchResult.allIds.push(searchedOrder.id); searchResult.allIds.push(searchedOrder.id);
searchResult.byId[searchedOrder.id] = searchedOrder; searchResult.byId[searchedOrder.id] = searchedOrder;
} }
if (searchBy.length) { if (searchBy.length) {
setOrdersToShow(searchResult); setOrdersToShow(searchResult);
} }
setError("");
setSearchInput(""); setSearchInput("");
setFiltersOn(false);
}
}; };
const handleSearchEnter = (e) => { const handleSearchEnter = (e) => {
...@@ -54,6 +63,7 @@ const Search = ({ orders, setOrdersToShow }) => { ...@@ -54,6 +63,7 @@ const Search = ({ orders, setOrdersToShow }) => {
onKeyPress={handleSearchEnter} onKeyPress={handleSearchEnter}
/> />
<Button className="search-btn" text="Search" onClick={search} /> <Button className="search-btn" text="Search" onClick={search} />
{error.length ? <Error text={error}/> : null}
</div> </div>
); );
}; };
......
frontend/src/components/order/OrderIndexItem.jsx
View file @ bb36c8dd
...@@ -26,7 +26,7 @@ const OrderIndexItem = ({ order }) => { ...@@ -26,7 +26,7 @@ const OrderIndexItem = ({ order }) => {
<div className="oii-container"> <div className="oii-container">
<div className="oii-left"> <div className="oii-left">
<FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/> <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
<div className="oii-num">{`Order #:${orderId}`}</div> <div className="oii-num">{`Order #: ${orderId}`}</div>
</div> </div>
{actions} {actions}
</div> </div>
......
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