feat(issue19/UI): Allows to load custom configuration

This commit is contained in:
sovanna 2020-04-14 18:54:31 +09:00
parent fdded2702b
commit bac4e37cc2
2 changed files with 69 additions and 4 deletions

View File

@ -40,6 +40,17 @@ button {
width: 15px; width: 15px;
} }
} }
.btn.btn-primary.disabled {
background-color: gray;
}
.btn-outline-primary,
.btn-outline-primary:hover {
color: $btn-primary-2;
border-color: $btn-primary-2;
background-color: inherit;
}
} }
display: flex; display: flex;

View File

@ -328,6 +328,14 @@ class Layout extends React.PureComponent {
<div className="w-100"> <div className="w-100">
<form className="form w-100"> <form className="form w-100">
<div className="form-group">
<p className="small">
Add your own configuration below. Should be something like:
<br />
{JSON.stringify({"items":[{"pn":"1123"},{"pn":"2118"},{"pn":"2118"},{"pn":"2128"}],"type":"desktop"})}
</p>
</div>
<div className="form-group w-100"> <div className="form-group w-100">
<textarea <textarea
onChange={this.handleCustomConfig} onChange={this.handleCustomConfig}
@ -343,7 +351,10 @@ class Layout extends React.PureComponent {
) : null} ) : null}
</form> </form>
<a type="button" onClick={this.handleClickLoad} class="btn btn-sm btn-primary">Load configuration</a> <div className="d-flex flex-column flex-sm-row justify-content-end">
<a type="button" onClick={onClickCloseRFQFeedback} class="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
<a type="button" onClick={this.handleClickLoad} class={`btn btn-sm btn-primary m-0 ml-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
</div>
</div> </div>
) : null} ) : null}
@ -1774,9 +1785,52 @@ class Shop extends React.PureComponent {
} }
handleLoadCustomConf(customconf) { handleLoadCustomConf(customconf) {
if (customconf) { if (!customconf) {return; }
console.log('custom conf: ', customconf);
} const items = this.props.data.items;
const self = this;
let new_items = [];
this.setState({
...this.state,
columns: {
...this.state.columns,
cart: {
...this.state.columns.cart,
items: [],
},
},
}, function () {
customconf.items.map(function (item) {
Object.keys(items).map(key => {
if (item.pn && item.pn === items[key].name_number) {
new_items.push(Object.assign({
...items[key],
}, {
id: uuidv4(),
}));
}
});
return item;
});
this.setState({
...this.state,
columns: {
...this.state.columns,
cart: {
...this.state.columns.cart,
items: new_items,
},
},
currentMode: customconf.type,
});
});
} }
handleClickSubmit(note, email) { handleClickSubmit(note, email) {