feat(issue19/UI): Displays box to load custom conf + verification format

This commit is contained in:
sovanna 2020-04-14 17:51:33 +09:00
parent 413703fd96
commit fdded2702b
2 changed files with 173 additions and 2 deletions

View File

@ -155,6 +155,13 @@ button {
padding-bottom: .5rem; padding-bottom: .5rem;
} }
.btn-outline-primary,
.btn-outline-primary:hover {
color: $btn-primary-2;
border-color: $btn-primary-2;
background-color: inherit;
}
.control { .control {
display: flex; display: flex;
font-size: .8rem; font-size: .8rem;

View File

@ -144,6 +144,7 @@ class Layout extends React.PureComponent {
onClickCloseRFQFeedback: PropTypes.func, onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string, RFQBodyType: PropTypes.string,
RFQBodyOrder: PropTypes.string, RFQBodyOrder: PropTypes.string,
onClickLoadCustomConf: PropTypes.func,
}; };
} }
@ -153,6 +154,117 @@ class Layout extends React.PureComponent {
}; };
} }
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);
}
handleCustomConfig(e) {
const value = e.target.value;
this.checkValidation(value);
}
checkValidation(conf) {
let conf_obj;
if (!conf) {
conf = this.state.customconf;
}
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,
};
});
this.setState({
...this.state,
customconf: conf,
error: null,
customconf_ready: conf_obj,
});
}
handleClickLoad() {
this.checkValidation();
if (this.props.onClickLoadCustomConf) {
this.props.onClickLoadCustomConf(this.state.customconf_ready);
}
}
render() { render() {
const { const {
aside, aside,
@ -190,7 +302,7 @@ class Layout extends React.PureComponent {
<div class="modal-content"> <div class="modal-content">
<div class="modal-body rfqFeedback"> <div class="modal-body rfqFeedback">
<div className="d-flex"> <div className="d-flex w-100">
{RFQBodyType === 'email' ? ( {RFQBodyType === 'email' ? (
<div className="d-flex"> <div className="d-flex">
@ -212,6 +324,29 @@ class Layout extends React.PureComponent {
</p> </p>
) : null} ) : null}
{RFQBodyType === 'import' ? (
<div className="w-100">
<form className="form w-100">
<div className="form-group w-100">
<textarea
onChange={this.handleCustomConfig}
value={this.state.customconf}
className="form-control w-100"
rows="5"
placeholder="Add your custom configuration here. e.g " />
</div>
{this.state.error ? (
<div className="form-group">
<p className="text-danger">{this.state.error}</p>
</div>
) : null}
</form>
<a type="button" onClick={this.handleClickLoad} class="btn btn-sm btn-primary">Load configuration</a>
</div>
) : null}
<div> <div>
<button onClick={onClickCloseRFQFeedback}> <button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" /> <img src="/images/shop/icon-close.svg" alt="close" />
@ -221,6 +356,7 @@ class Layout extends React.PureComponent {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -808,6 +944,7 @@ class OrderPanel extends React.PureComponent {
form: PropTypes.element, form: PropTypes.element,
isMobile: PropTypes.bool, isMobile: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func, onClickToggleMobileSideMenu: PropTypes.func,
onClickOpenImport: PropTypes.func,
}; };
} }
@ -820,7 +957,8 @@ class OrderPanel extends React.PureComponent {
summaryPrice, summaryPrice,
form, form,
isMobile, isMobile,
onClickToggleMobileSideMenu onClickToggleMobileSideMenu,
onClickOpenImport,
} = this.props; } = this.props;
return ( return (
@ -834,6 +972,14 @@ class OrderPanel extends React.PureComponent {
{crateMode} {crateMode}
</div> </div>
<div>
<input
className="btn btn-sm btn-outline-primary m-0 mb-2"
style={{'cursor': 'pointer'}}
value="Import configurations"
onClick={onClickOpenImport} />
</div>
{isMobile ? ( {isMobile ? (
<div className="mobileBtnDisplaySideMenu"> <div className="mobileBtnDisplaySideMenu">
<button onClick={onClickToggleMobileSideMenu}> <button onClick={onClickToggleMobileSideMenu}>
@ -1395,6 +1541,8 @@ class Shop extends React.PureComponent {
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this); this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this); this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.handleClickShowOrder = this.handleClickShowOrder.bind(this); this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
this.timer = null; this.timer = null;
} }
@ -1617,6 +1765,20 @@ class Shop extends React.PureComponent {
}); });
} }
handleClickOpenImport() {
this.setState({
isProcessing: false,
shouldShowRFQFeedback: true,
RFQBodyType: 'import',
});
}
handleLoadCustomConf(customconf) {
if (customconf) {
console.log('custom conf: ', customconf);
}
}
handleClickSubmit(note, email) { handleClickSubmit(note, email) {
const crate = { const crate = {
items: [], items: [],
@ -2095,6 +2257,7 @@ class Shop extends React.PureComponent {
newCardJustAdded={newCardJustAdded} newCardJustAdded={newCardJustAdded}
onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu} onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
onClickCloseRFQFeedback={this.handleClickCloseRFQFeedback} onClickCloseRFQFeedback={this.handleClickCloseRFQFeedback}
onClickLoadCustomConf={this.handleLoadCustomConf}
aside={ aside={
<Backlog <Backlog
currency={currency} currency={currency}
@ -2108,6 +2271,7 @@ class Shop extends React.PureComponent {
main={( main={(
<OrderPanel <OrderPanel
onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu} onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
onClickOpenImport={this.handleClickOpenImport}
isMobile={isMobile} isMobile={isMobile}
title="Order hardware" title="Order hardware"
description=" description="