71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
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) => {
|
|
console.log(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>
|
|
</>)
|
|
} |