Skip to content

I
inventory-promotion-react
Commit 7803e712 authored by Khai Yuan ​Liew's avatar Khai Yuan ​Liew
Browse files
Options

Merge branch 'dev' of https://gitlab.mynisum.com/ascend/inventory-promotion-react into AFP-15 

Need to update AFP-15 repo
parents b7a52d53 8279f394
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 40112 additions and 119 deletions
package-lock.json 0 → 100644
View file @ 7803e712
This diff is collapsed.
package.json
View file @ 7803e712
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.5.2", "react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-hook-form": "^7.4.1",
"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",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
......
src/component/Main.jsx
View file @ 7803e712
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { Redirect, Switch } from "react-router"; import { Redirect, Switch } from "react-router";
import AuthRoute from "./AuthRoute"; import AuthRoute from "./AuthRoute";
import ProductForm from "./ProductForm"; import ProductForm from "./ProductForm";
import ProductGrid from "./ProductGrid"; import ProductGrid from "./ProductGrid";
import {getAllProducts} from "../actions/apiRequests.js" import { getAllProducts } from "../actions/apiRequests.js";
import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
export default function Main() { export default function Main() {
const [productData, setproductData] = useState([]); const [productData, setproductData] = useState([]);
...@@ -15,23 +16,30 @@ export default function Main() { ...@@ -15,23 +16,30 @@ export default function Main() {
const loadProducts = async (event) => { const loadProducts = async (event) => {
const data = await getAllProducts(); const data = await getAllProducts();
setproductData(data); setproductData(data);
} };
return ( return (
<div> <div>
<Switch> <Switch>
<AuthRoute exact path="/products/new"> <AuthRoute exact path="/products/new">
<ProductForm /> <ProductForm method="POST" />
</AuthRoute> </AuthRoute>
<AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute> <AuthRoute exact path="/products/edit/:productId">
<AuthRoute exact path="/products"> <ProductForm method="PUT" />
<ProductGrid productData={productData} />
</AuthRoute> </AuthRoute>
<AuthRoute
exact
path="/promos/new"
component={PromotionNewFormComponent}
></AuthRoute>
<AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute> <AuthRoute path="/promos">PROMOS</AuthRoute>
<AuthRoute exact path="/"> <AuthRoute exact path="/">
<Redirect to="/products" /> <Redirect to="/products" />
</AuthRoute> </AuthRoute>
<AuthRoute >404 PAGE</AuthRoute> <AuthRoute>
<h1>404 Page Not Found</h1>
</AuthRoute>
</Switch> </Switch>
</div> </div>
); );
......
src/component/Product.jsx
View file @ 7803e712
import React from 'react' import React, { useState } from "react";
import './../styles/Product.css' import "./../styles/Product.css";
import { Modal, Button, Alert } from "react-bootstrap";
export default function Product({product}) { export default function Product({ product }) {
const [show, setShow] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const handleClose = () => {
setShow(false);
handleCloseConfirm();
};
const handleShow = () => setShow(true);
const handleShowConfirm = () => setShowConfirm(true);
const handleCloseConfirm = () => setShowConfirm(false);
return ( return (
<div> <div>
<div className="img-container"> <div className="img-container" onClick={handleShow}>
<img src={product.productImageUrl} alt={product.productName}/> <img
</div> className="grid-img"
<div className="prod-info"> src={product.productImageUrl}
<h5>{product.productName}</h5> alt={product.productName}
{product.sku}<br/> />
${product.price}<br/> </div>
In Stock: {product.stock} <div className="prod-info">
</div> <h5>{product.productName}</h5>
{product.sku}
<br />${product.price}
<br />
In Stock: {product.stock}
</div>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{product.productName}</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="modal-img">
<img src={product.productImageUrl} alt={product.productName} />
</div>
<h5>{product.sku}</h5>${product.price}
<br />
{product.productDescription}
<br />
In Stock: {product.stock}
</Modal.Body>
<Modal.Footer>
<Button
variant="danger"
className="float-left"
onClick={handleShowConfirm}
>
Delete product
</Button>
<Button variant="primary" href={`/products/edit/${product.sku}`}>
Edit Product
</Button>
<Alert show={showConfirm} variant="danger">
<h5> Are you sure?</h5>
<Button variant="secondary" onClick={handleCloseConfirm}>
Cancel
</Button>
&nbsp;&nbsp;
<Button variant="danger">Yes, delete</Button>
</Alert>
</Modal.Footer>
</Modal>
</div> </div>
) );
} }
src/component/ProductForm.jsx
View file @ 7803e712
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router"; import { useHistory, useParams } from "react-router";
import emptyProduct from "../emptProduct";
import Config from '../config';
const emptyForm = { const emptyForm = {
sku: "", ...emptyProduct,
upc: "", imageFile: "",
productName: "",
brand: "",
category: "",
price: 0.0,
availableStock: 0,
productDescription: "",
productImageUrl: "",
productImage: ""
}; };
ProductForm.defaultProps = { ProductForm.defaultProps = {
...@@ -19,15 +13,34 @@ ProductForm.defaultProps = { ...@@ -19,15 +13,34 @@ ProductForm.defaultProps = {
}; };
export default function ProductForm(props) { export default function ProductForm(props) {
const { product } = props; const { method } = props;
const [form, setForm] = useState(product); const [form, setForm] = useState({ ...emptyForm });
const [imageMode, setImageMode] = useState("url");
const [errors, setErrors] = useState([]); const [errors, setErrors] = useState([]);
const history = useHistory(); const history = useHistory();
const { productId } = useParams("productId");
useEffect(() => {
fetch(`http://localhost:8080/api/products/${productId}/`).then((res) => {
if (res.ok) {
console.log(res);
res.json().then((data) => {
Object.keys(data).forEach((key) => {
if (data[key] === null) {
data[key] = "";
}
});
console.log(data);
setForm({ ...data, availableStock: data.stock });
});
}
});
}, [productId]);
const validate = () => { const validate = () => {
setErrors([]); setErrors([]);
const errs = []; const errs = [];
console.log(form)
if (form.sku.length < 3) { if (form.sku.length < 3) {
errs.push("SKU must be at least 3 characters"); errs.push("SKU must be at least 3 characters");
} }
...@@ -56,11 +69,20 @@ export default function ProductForm(props) { ...@@ -56,11 +69,20 @@ export default function ProductForm(props) {
const onSubmit = (e) => { const onSubmit = (e) => {
e.preventDefault(); e.preventDefault();
validate(); validate();
if (imageMode === "url") {
delete form.imageFile;
} else {
delete form.prodImgUrl;
}
if (errors.length === 0) { if (errors.length === 0) {
// console.log(form); // console.log(form);
fetch("http://localhost:8080/api/products", { const url =
method: "POST", method === "PUT"
? `${Config.inventoryUrl}/${productId}`
: `${Config.inventoryUrl}`;
fetch(url, {
method,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
...@@ -100,11 +122,13 @@ export default function ProductForm(props) { ...@@ -100,11 +122,13 @@ export default function ProductForm(props) {
SKU SKU
</label> </label>
<input <input
disabled={method === "PUT" ? true : false}
required required
name="sku" name="sku"
type="text" type="text"
className="form-control" className="form-control"
id="productSku" id="productSku"
disabled={method === "PUT" ? true : false}
value={form.sku} value={form.sku}
onChange={(e) => setForm({ ...form, sku: e.target.value })} onChange={(e) => setForm({ ...form, sku: e.target.value })}
/> />
...@@ -137,7 +161,9 @@ export default function ProductForm(props) { ...@@ -137,7 +161,9 @@ export default function ProductForm(props) {
className="form-control" className="form-control"
id="productName" id="productName"
value={form.productName} value={form.productName}
onChange={(e) => setForm({ ...form, productName: e.target.value })} onChange={(e) =>
setForm({ ...form, productName: e.target.value })
}
/> />
</div> </div>
<div> <div>
...@@ -170,17 +196,19 @@ export default function ProductForm(props) { ...@@ -170,17 +196,19 @@ export default function ProductForm(props) {
</div> </div>
</div> </div>
<div className="col-6"> <div className="col-6">
<label htmlFor="productDescription" className="form-label"> <label htmlFor="productDesc" className="form-label">
Description Description
</label> </label>
<textarea <textarea
name="productDescription" name="productDesciption"
id="productDescription" id="productDesc"
cols="40" cols="40"
rows="7" rows="7"
className="form-control" className="form-control"
value={form.productDescription} value={form.productDescription}
onChange={(e) => setForm({ ...form, productDescription: e.target.value })} onChange={(e) =>
setForm({ ...form, productDescription: e.target.value })
}
></textarea> ></textarea>
</div> </div>
</div> </div>
...@@ -204,8 +232,9 @@ export default function ProductForm(props) { ...@@ -204,8 +232,9 @@ export default function ProductForm(props) {
Stock Stock
</label> </label>
<input <input
disabled={method === "PUT" ? true : false}
required required
name="stock" name="availableStock"
type="number" type="number"
className="form-control" className="form-control"
id="stock" id="stock"
...@@ -214,28 +243,61 @@ export default function ProductForm(props) { ...@@ -214,28 +243,61 @@ export default function ProductForm(props) {
/> />
</div> </div>
</div> </div>
<div className="row mt-3"> {imageMode === "upload" ? (
<label htmlFor="productImage" className="form-label"> <div className="row mt-3">
Product Image <div>
</label> <label htmlFor="productImage" className="form-label">
<input Image File
id="productImageUrl" </label>
name="productImageUrl" <input
className="form-control form-control-lg" id="productImage"
type="url" name="imageFile"
placeholder="Enter image URL here or upload image below..." className="form-control form-control-lg"
value={form.productImageUrl} type="file"
onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})} value={form.imageFile}
></input> onChange={(e) =>
<input setForm({ ...form, imageFile: e.target.value })
id="productImage" }
name="productImage" ></input>
className="form-control form-control-lg" <button
type="file" type="button"
value={form.productImage} className="btn btn-outline-primary mt-3"
onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })} onClick={() => {
></input> setForm({ ...form, imageFile: "" });
</div> setImageMode("url");
}}
>
Specify Image URL
</button>
</div>
</div>
) : null}
{imageMode === "url" ? (
<div className="row mt-3">
<div>
<label htmlFor="prodImgUrl" className="form-label">
Image URL
</label>
<input
name="productImageUrl"
type="text"
className="form-control"
id="prodImgUrl"
value={form.productImageUrl}
onChange={(e) =>
setForm({ ...form, productImageUrl: e.target.value })
}
/>
<button
type="button"
className="btn btn-outline-primary mt-3"
onClick={() => setImageMode("upload")}
>
Upload Image
</button>
</div>
</div>
) : null}
<div className="row mt-3"> <div className="row mt-3">
<div className="col-12"> <div className="col-12">
......
src/component/ProductGrid.jsx
View file @ 7803e712
import React from "react"; import React, { useEffect, useState } from "react";
import Product from "./Product.jsx"; import Product from "./Product.jsx";
import { Col, Container, Row } from "react-bootstrap"; import { Col, Container, Row } from "react-bootstrap";
import "./../styles/ProductGrid.css"; import "./../styles/ProductGrid.css";
import Config from "../config.js";
import { Link } from "react-router-dom";
export default function ProductGrid({ productData }) { export default function ProductGrid({ productData }) {
const [products, setProducts] = useState([]);
const fetchProducts = async () => {
const res = await fetch(`${Config.inventoryUrl}`);
if (res.ok) {
const data = await res.json();
setProducts([...data]);
}
};
useEffect(() => fetchProducts(), []);
return ( return (
<div> <div class="container flex-column d-flex justify-content-center">
<h1 id="title" className="text-center" >Inventory</h1> <div className="container mt-3 d-flex justify-content-between align-items-center">
<Container id="prod-grid" className="mt-3"> <h1 id="title" className="text-center">
Inventory
</h1>
<Link type="link" className="btn btn-success" to="/products/new">
+ New Product
</Link>
</div>
<Container id="prod-grid" className="mt-3 mx-auto">
<Row xs={1} sm={2} md={3} lg={4}> <Row xs={1} sm={2} md={3} lg={4}>
{productData.map((product) => { {products.map((product) => {
return ( return (
<Col key={product.sku}> <Col key={product.sku}>
<Product product={product} /> <Product product={product} />
......
src/component/promotionforms/PromotionNewFormComponent.jsx 0 → 100644
View file @ 7803e712
import { useState } 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'
export default function PromotionNewFormComponent () {
const { register, handleSubmit, formState: { errors } } = useForm();
const history = useHistory();
const [serverErrors, setErrors] = useState([]);
const onSubmit = (data) => {
console.log(data)
fetch(`${Config.promotionsUrl}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(res => res.ok ? history.push("/promos") : setErrors(["There is already an existing Promotion Id"]))
.catch(err => setErrors([err.message]))
};
return (
<div>
<div className="promo-container">
<div className="promo-form-container">
<h1 className="promo-form-title">Add 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", {
required: "promotion id is required",
maxLength: { value: 10, message: "You exceeded the maximum value" }
})}
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>
<input
{...register("productSku", {
required: "product sku required",
maxLength: { value: 10, message: "You exceeded the maximum value" }
})}
id="productSku"
className="form-control"
placeholder="eg. SKU-39SD"
/>
{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,
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="20"
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,
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="1"
/>
{errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
</div>
<input className="promo-submit" type="submit" value="Save Promotion" />
<NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
</form>
</div>
</div>
</div>
);
}
src/component/promotionforms/promoStyle.css 0 → 100644
View file @ 7803e712
.promo-container {
margin: 0px auto;
padding: 50px;
border-radius: 3px;
}
.promo-form-title {
text-align: center;
background-color: #212529;
color: white;
padding: 8px;
}
.promo-form-container {
border: 1px solid #212529;
}
.promo-form {
padding: 50px;
}
.form-group {
padding: 5px;
}
.promo-submit {
background-color: #212529;
border: 1px solid black;
border-radius: 4px;
color: white;
min-width: 180px;
height: 45px;
text-align: center;
margin-left: 5px;
margin-top: 15px;
}
.promo-submit:hover {
background-color: #212529;
filter: brightness(90%);
}
.promo-cancel {
margin-left: 15px;
}
.form-error {
color: red;
}
\ No newline at end of file
src/config.js
View file @ 7803e712
...@@ -3,4 +3,4 @@ class Config { ...@@ -3,4 +3,4 @@ class Config {
static promotionsUrl = "http://localhost:8081/api/promos"; static promotionsUrl = "http://localhost:8081/api/promos";
} }
export default Config; export default Config;
\ No newline at end of file
src/emptProduct.js 0 → 100644
View file @ 7803e712
const emptyProduct = {
sku: "",
upc: "",
productName: "",
brand: "",
category: "",
price: 0.0,
availableStock: 0,
productDesciption: "",
productImageUrl: "",
};
export default emptyProduct;
src/styles/Product.css
View file @ 7803e712
img {
max-width: 100%;
max-height: 250px;
}
.img-container{ .img-container{
position:relative; position:relative;
overflow:hidden; overflow:hidden;
padding-bottom:100%; padding-bottom:100%;
} }
img { .grid-img {
position: absolute; position: absolute;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.modal-img {
display: flex;
justify-content: center;
}
.alert{
width: 100%;
} }
\ No newline at end of file
yarn.lock
View file @ 7803e712
This source diff could not be displayed because it is too large. You can view the blob instead.
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