web2019/static/js/shop/ImportJSON.jsx

70 lines
2.7 KiB
React
Raw Normal View History

import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import React from "react";
import {Validation} from "./validate";
const JSONExample = JSON.stringify({
"items": [{"pn": "1124"}, {"pn": "2118"}, {"pn": "2118"}, {"pn": "2128"}],
"type": "desktop"
});
export function ImportJSON() {
const {shouldShow, data, loadDescription, updateImportDescription, closeImport, showImport} = useShopStore(state => ({
shouldShow: state.importShouldOpen,
data: state.importValue,
loadDescription: state.loadDescription,
updateImportDescription: state.updateImportDescription,
closeImport: state.closeImport,
showImport: state.openImport,
}));
const ref = useClickAway((e) => {
if (e.type === "mousedown") // ignore touchstart
closeImport()
}
);
return (<>
<button
className="btn btn-sm btn-outline-primary m-0 mb-2"
style={{'cursor': 'pointer'}}
onClick={showImport}>Import JSON
</button>
<Modal show={shouldShow} animation={true} centered>
<Modal.Body ref={ref}>
<div className="form-group">
<p className="small">
Input the JSON description below. Should be something like:
<br/>
{JSONExample}
</p>
</div>
<div className="form-group w-100">
<textarea
onChange={(event) => {
updateImportDescription(event.target.value)
}}
value={data.value}
className="form-control w-100"
rows="5"
placeholder="Input JSON description here."/>
</div>
{data.error !== Validation.OK ? (
<div className="form-group">
<p className="text-danger">{data.error === Validation.Empty ? "Empty input" : "Invalid JSON"}</p>
</div>
) : null}
<div className="d-flex flex-column flex-sm-row justify-content-end">
<a type="button" onClick={closeImport}
className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
<a type="button" onClick={loadDescription}
className={`btn btn-sm btn-primary m-0 ml-sm-2 ${data.error ? 'disabled' : ''}`}>Load
configuration</a>
</div>
</Modal.Body>
</Modal>
</>)
}