forked from M-Labs/web2019
287 lines
10 KiB
JavaScript
287 lines
10 KiB
JavaScript
import React from 'react';
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
/**
|
|
* Component that provides a base layout (aside/main) for the page.
|
|
*/
|
|
|
|
/*
|
|
export function Layout({aside, main}) {
|
|
static get defaultProps() {
|
|
return {
|
|
mobileSideMenuShouldOpen: false,
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
customconf: '',
|
|
error: null,
|
|
};
|
|
|
|
this.handleCustomConfig = this.handleCustomConfig.bind(this);
|
|
this.handleClickLoad = this.handleClickLoad.bind(this);
|
|
this.checkValidation = this.checkValidation.bind(this);
|
|
|
|
// retrieve list of available pn
|
|
const items_keys = Object.keys(props.items);
|
|
this.list_pn = items_keys.map(function (key) {
|
|
return props.items[key].name_number;
|
|
});
|
|
}
|
|
|
|
handleCustomConfig(e) {
|
|
const value = e.target.value;
|
|
|
|
this.checkValidation(value);
|
|
}
|
|
|
|
checkValidation(conf) {
|
|
let conf_obj;
|
|
|
|
try {
|
|
conf_obj = JSON.parse(conf);
|
|
} catch (e) {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format',
|
|
});
|
|
}
|
|
|
|
if (!conf_obj) {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format',
|
|
});
|
|
}
|
|
|
|
if ((!conf_obj.items || !conf_obj.type) &&
|
|
(Object.prototype.toString.call(conf_obj.items) !== '[object Array]' ||
|
|
Object.prototype.toString.call(conf_obj.type) !== '[object String]')) {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format',
|
|
});
|
|
}
|
|
|
|
if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format',
|
|
});
|
|
}
|
|
|
|
conf_obj.items.map(function (item) {
|
|
try {
|
|
return JSON.parse(item);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
conf_obj.items = conf_obj.items.filter(function (item) {
|
|
return item;
|
|
});
|
|
|
|
if (conf_obj.items.filter(function (item) {
|
|
return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]';
|
|
}).length > 0) {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format',
|
|
});
|
|
}
|
|
|
|
conf_obj.items = conf_obj.items.map(function (item) {
|
|
return {
|
|
pn: item.pn,
|
|
options: item.options ? item.options : null,
|
|
};
|
|
});
|
|
|
|
const self = this;
|
|
const unknow_pn = conf_obj.items.filter(function (item_pn) {
|
|
return self.list_pn.includes(item_pn.pn) === false;
|
|
}).map(function (item_pn) {
|
|
return item_pn.pn;
|
|
});
|
|
|
|
if (unknow_pn.length > 0) {
|
|
return this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: `${unknow_pn.join(', ')} unknown${unknow_pn.length > 1 ? 's':''} pn number`,
|
|
});
|
|
}
|
|
|
|
this.setState({
|
|
...this.state,
|
|
customconf: conf,
|
|
error: null,
|
|
customconf_ready: conf_obj,
|
|
});
|
|
}
|
|
|
|
handleClickLoad() {
|
|
this.checkValidation(this.state.customconf);
|
|
|
|
if (this.props.onClickLoadCustomConf) {
|
|
this.props.onClickLoadCustomConf(this.state.customconf_ready);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
aside,
|
|
main,
|
|
mobileSideMenuShouldOpen,
|
|
isMobile,
|
|
newCardJustAdded,
|
|
onClickToggleMobileSideMenu,
|
|
onClickCloseRFQFeedback,
|
|
showRFQFeedback,
|
|
RFQBodyType,
|
|
RFQBodyOrder,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className="layout">
|
|
|
|
<aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>
|
|
|
|
{mobileSideMenuShouldOpen ? (
|
|
<section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
|
|
) : (
|
|
<section className="main">{main}</section>
|
|
)}
|
|
|
|
{isMobile && newCardJustAdded ? (
|
|
<div className="feedback-add-success">
|
|
✓ added
|
|
</div>
|
|
) : null}
|
|
|
|
|
|
<div className={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div className="modal-dialog" role="document">
|
|
<div className="modal-content">
|
|
<div className="modal-body rfqFeedback">
|
|
|
|
<div className="d-flex w-100">
|
|
|
|
{RFQBodyType === 'email' ? (
|
|
<div className="d-flex">
|
|
|
|
<div>
|
|
<img width="30px" src="/images/shop/icon-done.svg" alt="close" />
|
|
</div>
|
|
|
|
<div style={{'padding': '0 .5em'}}>
|
|
We've received your request and will be in contact soon.
|
|
</div>
|
|
|
|
</div>
|
|
) : null }
|
|
|
|
{RFQBodyType === 'show' ? (
|
|
<p>
|
|
{RFQBodyOrder}
|
|
</p>
|
|
) : null}
|
|
|
|
{RFQBodyType === 'import' ? (
|
|
<div className="w-100">
|
|
|
|
<form className="w-100">
|
|
<div className="mb-3">
|
|
<p className="small">
|
|
Input the JSON description below. Should be something like:
|
|
<br />
|
|
{JSON.stringify({"items":[{"pn":"1124"},{"pn":"2118"},{"pn":"2118"},{"pn":"2128"}],"type":"desktop"})}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-3 w-100">
|
|
<textarea
|
|
onChange={this.handleCustomConfig}
|
|
value={this.state.customconf}
|
|
className="form-control w-100"
|
|
rows="5"
|
|
placeholder="Input JSON description here." />
|
|
</div>
|
|
{this.state.error ? (
|
|
<div className="mb-3">
|
|
<p className="text-danger">{this.state.error}</p>
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
|
|
<div className="d-flex flex-column flex-sm-row justify-content-end">
|
|
<a type="button" onClick={onClickCloseRFQFeedback} className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
|
|
<a type="button" onClick={this.handleClickLoad} className={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div>
|
|
<button onClick={onClickCloseRFQFeedback}>
|
|
<img src="/images/shop/icon-close.svg" alt="close" />
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div onClick={onClickCloseRFQFeedback} className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
export function Layout({aside, main}) {
|
|
const mobileSideMenuShouldOpen = useShopStore((state) => state.sideMenuOpen);
|
|
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
|
|
const newCardJustAdded = useShopStore((state) => state.newCardJustAdded);
|
|
const isMobile = useShopStore((state) => state.isMobile);
|
|
|
|
return (
|
|
<div className="layout">
|
|
|
|
<aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>
|
|
|
|
{mobileSideMenuShouldOpen ? (
|
|
<section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
|
|
) : (
|
|
<section className="main">{main}</section>
|
|
)}
|
|
|
|
{isMobile && newCardJustAdded ? (
|
|
<div className="feedback-add-success">
|
|
✓ added
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|