Skip to content

I
inventory-promotion-react
Commit ba219fde authored by Julius Wu's avatar Julius Wu
Browse files
Options

Merge branch 'uniform-styling' of... 

Merge branch 'uniform-styling' of https://gitlab.mynisum.com/ascend/inventory-promotion-react into uniform-styling
parents 4fad1209 4df0ef07
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 52 deletions
package-lock.json
View file @ ba219fde
......@@ -16,6 +16,7 @@
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-hook-form": "^7.4.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
......@@ -14626,6 +14627,19 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"node_modules/react-google-login": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
"integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
"dependencies": {
"@types/react": "*",
"prop-types": "^15.6.0"
},
"peerDependencies": {
"react": "^16 || ^17",
"react-dom": "^16 || ^17"
}
},
"node_modules/react-hook-form": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
......@@ -31867,6 +31881,15 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-google-login": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
"integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
"requires": {
"@types/react": "*",
"prop-types": "^15.6.0"
}
},
"react-hook-form": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
package.json
View file @ ba219fde
......@@ -11,6 +11,7 @@
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-hook-form": "^7.4.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
......
public/index.html
View file @ ba219fde
......@@ -8,8 +8,7 @@
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
......
src/component/Header.jsx
View file @ ba219fde
......@@ -4,12 +4,12 @@ import Search from "./Search";
import ".././styles/Header.css"
import LogoutButton from "./session/LogoutButton";
const Header = ({login, setLogin}) => {
const Header = ({ login, setLogin }) => {
const [show, setShow] = useState(false);
return (
<nav className="navbar navbar-expand-lg navbar-dark">
<div className="container-fluid">
<div id="parent" className="container-fluid">
<Link className="navbar-brand" to="/">
Ascend
</Link>
......@@ -30,7 +30,7 @@ const Header = ({login, setLogin}) => {
id="navbarSupportedContent"
>
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item" style={{color: "red"}}>
<li className="nav-item">
<Link className="nav-link" to="/products">
Products
</Link>
......@@ -41,11 +41,8 @@ const Header = ({login, setLogin}) => {
</Link>
</li>
</ul>
<div id="page-title" className="nav-item mx-auto"> <h1>Inventory, Promotions, Pricing</h1>
</div>
<LogoutButton/>
<h1 id="page-title">Inventory, Promotions, Pricing</h1>
<LogoutButton />
</div>
</div>
</nav>
......
src/component/Main.jsx
View file @ ba219fde
......@@ -5,6 +5,7 @@ import ProductIndex from "./ProductIndex";
import SearchResults from "./SearchResults";
import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
import PromotionIndexComponent from "./promo_index/PromotionsIndexComponent";
import PromotionUpdateFormComponent from "./promotionforms/UpdatePromotionForm";
export default function Main() {
......@@ -22,6 +23,7 @@ export default function Main() {
path="/promos/new"
component={PromotionNewFormComponent}
></AuthRoute>
<AuthRoute exact path="/promos/:promoId/update" component={PromotionUpdateFormComponent}></AuthRoute>
<AuthRoute exact path="/products" component={ProductIndex}></AuthRoute>
<AuthRoute path="/promos">
<PromotionIndexComponent />
......
src/component/SearchResults.jsx
View file @ ba219fde
import React from "react";
import ProductRow from "./ProductRow.jsx";
import { Table } from "react-bootstrap";
import { Table, Container } from "react-bootstrap";
import { deleteProduct } from "../actions/apiRequests";
import { withRouter } from "react-router";
import Search from "./Search.jsx";
......@@ -27,11 +27,13 @@ class SearchResults extends React.Component {
render() {
return (
<div className="container flex-column d-flex justify-content-center">
<div className="container mt-3 d-flex justify-content-between align-items-center">
<h1 id="title" >Search Results</h1>
<Search />
<div><Search /></div>
</div>
{this.state.results.length > 0 ?
<Container id="prod-table" className="mt-3 mx-auto">
<Table>
<thead>
<tr>
......@@ -53,6 +55,7 @@ class SearchResults extends React.Component {
})}
</tbody>
</Table>
</Container>
:
<p>Unable to find any matching products.</p>
}
......
src/component/promo_index/PromotionsIndexComponent.jsx
View file @ ba219fde
......@@ -27,12 +27,11 @@ export default function PromotionIndexComponent () {
return (
<div>
<div className="promo-container">
<div className="promo-list-container">
<div className="promo-header">
<div className="container flex-column d-flex justify-content-center">
<div className="container mt-3 d-flex justify-content-between align-items-center">
<h1 className="promo-title"> Promotions</h1>
<NavLink className="add-navLink" to='/promos/new'><button className="btn-success">+ New Promotion</button></NavLink>
<NavLink className="add-navLink" to='/promos/new'><button className="btn btn-success">+ New Promotion</button></NavLink>
</div>
<table className="promo-index-list">
<thead className="promo-table-title">
......@@ -49,16 +48,16 @@ export default function PromotionIndexComponent () {
<th>
Minimum Quanitity
</th>
<th>
<th className="row-width">
</th>
<th>
<th className="row-width">
</th>
</th >
</tr>
</thead>
<tbody>
{promoData.map((promo, key) => {
{promoData.length > 0 ? promoData.map((promo, key) => {
return (
<tr key={key}>
<td>
......@@ -78,20 +77,19 @@ export default function PromotionIndexComponent () {
pathname: `/promos/${promo.promotionId}/update`,
state: {promo}
}}>
<button className="btn-primary">Update</button>
<button className="btn-color btn btn-primary btn-sm">Update</button>
</NavLink>
</td>
<td>
<button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
<button className="btn btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
</td>
</tr>
)
}).reverse()
}
}).reverse() : <p>no promotions found.</p>}
</tbody>
</table>
</div>
</div>
</div>
)
}
src/component/promo_index/promolistStyle.css
View file @ ba219fde
.promo-container {
/* .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;
} */
.promo-index-list {
margin-top: 7px;
}
.promo-table-title {
border-bottom: 1px solid black;
}
.add-navLink {
align-self: center;
}
......@@ -24,6 +27,14 @@ table {
width: 100%;
}
.row-width {
width: 7%;
}
.btn-color {
background-color: #00567D;
}
td,
th {
text-align: left;
......@@ -42,10 +53,11 @@ tr:nth-child(even) {
background-color: #dddddd;
}
thead th {
/* thead th {
background-color: #dddddd;
height: 35px;
}
/* border-bottom: 1px black; */
tr:hover {
background-color: lightblue;
......
src/component/promotionforms/PromotionNewFormComponent.jsx
View file @ ba219fde
......@@ -16,7 +16,6 @@ export default function PromotionNewFormComponent (props) {
const onSubmit = (data) => {
console.log(data)
fetch(`${Config.promotionsUrl}`, {
method: "POST",
......@@ -36,20 +35,14 @@ export default function PromotionNewFormComponent (props) {
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 (
<div>
<div className="promo-container">
......@@ -64,7 +57,7 @@ export default function PromotionNewFormComponent (props) {
<input
{...register("promotionId", {
required: "promotion id is required",
maxLength: { value: 10, message: "You exceeded the maximum value" }
maxLength: { value: 20, message: "You exceeded the maximum value" }
})}
id="promotionId"
className="form-control"
......@@ -102,6 +95,8 @@ export default function PromotionNewFormComponent (props) {
})}
/>
{errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
<br></br>
</div>
......@@ -134,7 +129,7 @@ export default function PromotionNewFormComponent (props) {
{...register("minimumQuantity", {
valueAsNumber: true,
required: "minimum quantity is required",
min: { value: 1, message: "discount percentage must be greater than 0" },
min: { value: 1, message: "minimum quantity must be greater than 0" },
})}
id="minimumQuantity"
......
src/component/promotionforms/UpdatePromotionForm.jsx
View file @ ba219fde
......@@ -16,8 +16,6 @@ export default function PromotionUpdateFormComponent(props) {
const [productData, setproductData] = useState([]);
const onSubmit = (data) => {
console.log(data)
fetch(`${Config.promotionsUrl}/${data.promotionId}`, {
method: "PUT",
headers: {
......@@ -42,7 +40,8 @@ export default function PromotionUpdateFormComponent(props) {
setValue('productSku', data.value)
}
const productSku = register('productSku', { required: true })
register('productSku', { required: true })
setValue('productSku', props.location.state.promo.productSku);
return (
<div>
<div className="promo-container">
......@@ -57,7 +56,7 @@ export default function PromotionUpdateFormComponent(props) {
{...register("promotionId", {
value: props.location.state.promo.promotionId,
required: "promotion id is required",
maxLength: { value: 10, message: "You exceeded the maximum value" },
maxLength: { value: 20, message: "You exceeded the maximum value" },
})}
readOnly
......@@ -87,6 +86,7 @@ export default function PromotionUpdateFormComponent(props) {
}
})} />
{errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
<br></br>
</div>
......@@ -121,12 +121,11 @@ export default function PromotionUpdateFormComponent(props) {
valueAsNumber: true,
value: props.location.state.promo.minimumQuantity,
required: "minimum quantity is required",
min: { value: 1, message: "discount percentage must be greater than 0" },
min: { value: 1, message: "minimum quantity 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>}
......
src/component/promotionforms/promoStyle.css
View file @ ba219fde
......@@ -3,7 +3,7 @@
margin: 0px auto;
padding: 50px;
border-radius: 3px;
max-width: 700px;
}
......
src/styles/Header.css
View file @ ba219fde
......@@ -3,5 +3,26 @@
}
#page-title{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
color: #EBEBEB;
pointer-events: none;
}
#navbarSupportedContent{
position: relative;
}
.nav-link{
color: #EBEBEB !important;
}
.nav-link:hover{
color: #CCCDCF !important;
}
\ No newline at end of file
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