Skip to content

I
inventory-promotion-react
Commit f8f20561 authored by Ben Anderson's avatar Ben Anderson
Browse files
Options

Resolved Merge conflicts AFp-110

parents b1d492ce 9c2fe6a4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 577 additions and 11596 deletions
package-lock.json
View file @ f8f20561
This diff is collapsed.
package.json
View file @ f8f20561
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
"react-router": "^5.2.0", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
......
public/index.html
View file @ f8f20561
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css" />
<script async src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"></script>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
......
src/App.js
View file @ f8f20561
...@@ -4,6 +4,7 @@ import Main from "./component/Main"; ...@@ -4,6 +4,7 @@ import Main from "./component/Main";
import AuthRoute from "./component/AuthRoute"; import AuthRoute from "./component/AuthRoute";
import { Switch } from "react-router"; import { Switch } from "react-router";
import Login from "./component/Login"; import Login from "./component/Login";
import 'semantic-ui-css/semantic.min.css'
function App() { function App() {
return ( return (
......
src/component/Main.jsx
View file @ f8f20561
...@@ -4,8 +4,9 @@ import AuthRoute from "./AuthRoute"; ...@@ -4,8 +4,9 @@ import AuthRoute from "./AuthRoute";
import ProductForm from "./ProductForm"; import ProductForm from "./ProductForm";
import ProductGrid from "./ProductGrid"; import ProductGrid from "./ProductGrid";
import SearchResults from "./SearchResults"; import SearchResults from "./SearchResults";
import {getAllProducts} from "../actions/apiRequests.js" import { getAllProducts } from "../actions/apiRequests.js";
import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent"; import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
import PromotionIndexComponent from "./promo_index/PromotionsIndexComponent";
export default function Main() { export default function Main() {
const [productData, setproductData] = useState([]); const [productData, setproductData] = useState([]);
...@@ -34,11 +35,13 @@ export default function Main() { ...@@ -34,11 +35,13 @@ export default function Main() {
component={PromotionNewFormComponent} component={PromotionNewFormComponent}
></AuthRoute> ></AuthRoute>
<AuthRoute exact path="/products" component={ProductGrid}></AuthRoute> <AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute> <AuthRoute path="/promos">
<PromotionIndexComponent />
</AuthRoute>
<AuthRoute exact path="/"> <AuthRoute exact path="/">
<Redirect to="/products" /> <Redirect to="/products" />
</AuthRoute> </AuthRoute>
<AuthRoute path="/searchResults" component={SearchResults}/> <AuthRoute path="/searchResults" component={SearchResults} />
<AuthRoute> <AuthRoute>
<h1>404 Page Not Found</h1> <h1>404 Page Not Found</h1>
</AuthRoute> </AuthRoute>
......
src/component/promo_index/PromotionsIndexComponent.jsx 0 → 100644
View file @ f8f20561
import {useState, useEffect} from 'react';
import Config from '../../config';
import "./promolistStyle.css";
import { NavLink } from 'react-router-dom';
export default function PromotionIndexComponent () {
const [promoData, setPromoData] = useState([]);
useEffect( () => {
loadPromotions();
}, [])
const loadPromotions = async () => {
const response = await fetch(`${Config.promotionsUrl}`);
const data = await response.json();
setPromoData(data);
}
const deletePromotion = (promoId) => {
fetch(`${Config.promotionsUrl}/${promoId}`, {
method: "DELETE",
})
.then(res => loadPromotions())
.catch(err => console.log("error"))
}
return (
<div>
<div className="promo-container">
<div className="promo-list-container">
<div className="promo-header">
<h1 className="promo-title"> Promotions</h1>
<NavLink className="add-navLink" to='/promos/new'><button className="btn-success">+ New Promotion</button></NavLink>
</div>
<table className="promo-index-list">
<thead className="promo-table-title">
<tr>
<th>
Promotion Id
</th>
<th>
Product SKU
</th>
<th>
Discount
</th>
<th>
Minimum Quanitity
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
{promoData.map((promo, key) => {
return (
<tr key={key}>
<td>
{promo.promotionId}
</td>
<td>
{promo.productSku}
</td>
<td>
{promo.discountPercentage}%
</td>
<td>
{promo.minimumQuantity}
</td>
<td>
<NavLink className="edit-navLink" to={{
pathname: `/promos/${promo.promotionId}/update`,
state: {promo}
}}>
<button className="btn-primary">Update</button>
</NavLink>
</td>
<td>
<button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
</td>
</tr>
)
}).reverse()
}
</tbody>
</table>
</div>
</div>
</div>
)
}
src/component/promo_index/promolistStyle.css 0 → 100644
View file @ f8f20561
.promo-container {
margin: 30px auto;
padding: 0 16px;
}
.promo-header {
background-color: #212529;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
}
.promo-title {
color: white;
padding: 8px;
}
.add-navLink {
align-self: center;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
text-align: left;
padding: 8px;
}
tr td {
height: 40px;
}
tr {
box-sizing: border-box;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead th {
background-color: #dddddd;
height: 35px;
}
tr:hover {
background-color: lightblue;
}
src/component/promotionforms/PromotionNewFormComponent.jsx
View file @ f8f20561
import { useState } from "react"; import { useState, useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import "./promoStyle.css"; import "./promoStyle.css";
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import Config from '../../config'; import Config from '../../config';
import { useHistory } from 'react-router' import { useHistory } from 'react-router'
import { Dropdown } from 'semantic-ui-react'
import {getAllProducts} from '../../actions/apiRequests'
export default function PromotionNewFormComponent () {
const { register, handleSubmit, formState: { errors } } = useForm(); export default function PromotionNewFormComponent (props) {
const { register, handleSubmit, setValue, formState: { errors } } = useForm();
const history = useHistory(); const history = useHistory();
const [serverErrors, setErrors] = useState([]); const [serverErrors, setErrors] = useState([]);
const [productData, setproductData] = useState([]);
const onSubmit = (data) => { const onSubmit = (data) => {
console.log(data) console.log(data)
...@@ -24,6 +29,27 @@ export default function PromotionNewFormComponent () { ...@@ -24,6 +29,27 @@ export default function PromotionNewFormComponent () {
.catch(err => setErrors([err.message])) .catch(err => setErrors([err.message]))
}; };
useEffect(() => {
loadProducts();
}, [])
const loadProducts = async (event) => {
const data = await getAllProducts();
setproductData(data);
}
const onChange = (e, data) => {
console.log(data)
setValue('productSku', data.value)
console.log(productSku)
}
const productSku = register('productSku', { required: true })
return ( return (
<div> <div>
<div className="promo-container"> <div className="promo-container">
...@@ -48,9 +74,10 @@ export default function PromotionNewFormComponent () { ...@@ -48,9 +74,10 @@ export default function PromotionNewFormComponent () {
{errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>} {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Product Sku</label> <label>Product Sku</label>
<input {/* <input
{...register("productSku", { {...register("productSku", {
required: "product sku required", required: "product sku required",
maxLength: { value: 10, message: "You exceeded the maximum value" } maxLength: { value: 10, message: "You exceeded the maximum value" }
...@@ -58,6 +85,21 @@ export default function PromotionNewFormComponent () { ...@@ -58,6 +85,21 @@ export default function PromotionNewFormComponent () {
id="productSku" id="productSku"
className="form-control" className="form-control"
placeholder="eg. SKU-39SD" placeholder="eg. SKU-39SD"
/> */}
<Dropdown
placeholder='Select Product'
fluid
search
selection
onChange={onChange}
onSearchChange={onChange}
options={productData.map(prod => {
return {
key: prod.sku,
text: prod.sku,
value: prod.sku,
}
})}
/> />
{errors.productSku && <p className="form-error">{errors.productSku.message}</p>} {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
<br></br> <br></br>
...@@ -111,4 +153,3 @@ export default function PromotionNewFormComponent () { ...@@ -111,4 +153,3 @@ export default function PromotionNewFormComponent () {
</div> </div>
); );
} }
src/component/promotionforms/UpdatePromotionForm.jsx
View file @ f8f20561
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import "./promoStyle.css";
import { NavLink } from 'react-router-dom';
import Config from '../../config';
import { useHistory } from 'react-router'
import { Dropdown } from 'semantic-ui-react'
import { getAllProducts } from '../../actions/apiRequests'
export default function PromotionUpdateFormComponent(props) {
const { register, handleSubmit, setValue, formState: { errors } } = useForm();
const history = useHistory();
const [serverErrors, setErrors] = useState([]);
const [productData, setproductData] = useState([]);
const onSubmit = (data) => {
console.log(data)
fetch(`${Config.promotionsUrl}/${data.promotionId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(res => res.ok ? history.push("/promos") : setErrors(["error"]))
.catch(err => setErrors([err.message]))
};
useEffect( () => {
loadProducts();
}, [])
const loadProducts = async (event) => {
const data = await getAllProducts();
setproductData(data);
}
const onChange = (e, data) => {
setValue('productSku', data.value)
}
const productSku = register('productSku', { required: true })
return (
<div>
<div className="promo-container">
<div className="promo-form-container">
<h1 className="promo-form-title">Update Promotion</h1>
<form className="promo-form" onSubmit={handleSubmit(onSubmit)}>
{serverErrors.length ? <p className="form-error">{serverErrors}</p> : ""}
<div className="form-group">
<label>Promotion Id</label>
<input
{...register("promotionId", {
value: props.location.state.promo.promotionId,
required: "promotion id is required",
maxLength: { value: 10, message: "You exceeded the maximum value" },
})}
readOnly
id="promotionId"
className="form-control"
placeholder="eg. PROMO-403"
/>
{errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
</div>
<div className="form-group">
<label>Product Sku</label>
<Dropdown
placeholder='Select Product'
fluid
search
selection
defaultValue={props.location.state.promo.productSku}
onChange={onChange}
onSearchChange={onChange}
options={productData.map(prod => {
return {
key: prod.sku,
text: prod.sku,
value: prod.sku,
}
})} />
{errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
<br></br>
</div>
<div className="form-group">
<label>Enter % off</label>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text">%</span></div>
<input
{...register("discountPercentage", {
valueAsNumber: true,
value: props.location.state.promo.discountPercentage,
required: "% off required",
min: { value: 0, message: "% must be greater than or equal to 0" },
max: { value: 100, message: "% must be less than or equal to 100" },
})}
id="discountPercentage"
className="form-control"
placeholder={props.location.state.promo.discountPercentage }
type="number"
/>
</div>
{errors.discountPercentage && <p className="form-error">{errors.discountPercentage.message}</p>}
</div>
<div className="form-group">
<label>Applies at Minimum Quantity</label>
<input
{...register("minimumQuantity", {
valueAsNumber: true,
value: props.location.state.promo.minimumQuantity,
required: "minimum quantity is required",
min: { value: 1, message: "discount percentage must be greater than 0" },
})}
id="minimumQuantity"
className="form-control"
type="number"
min="1"
placeholder={props.location.state.promo.minimumQuantity}
/>
{errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
</div>
<input className="promo-submit" type="submit" value="Update Promotion" />
<NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
</form>
</div>
</div>
</div>
);
}
yarn.lock deleted 100644 → 0
View file @ b1d492ce
This diff is collapsed.
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