forked from M-Labs/web2019
104 lines
3.6 KiB
JavaScript
104 lines
3.6 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";
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
const JSONExample = JSON.stringify({
|
|
"crates": [
|
|
{
|
|
"items": [
|
|
{
|
|
"pn": "1124",
|
|
"options": null
|
|
},
|
|
{
|
|
"pn": "2128",
|
|
"options": null
|
|
},
|
|
{
|
|
"pn": "2128",
|
|
"options": null
|
|
},
|
|
{
|
|
"pn": "2128",
|
|
"options": null
|
|
}
|
|
],
|
|
"type": "rack",
|
|
"options": {}
|
|
},
|
|
{
|
|
"items": [],
|
|
"type": "no_crate",
|
|
"options": {}
|
|
}
|
|
],
|
|
"options": {}
|
|
});
|
|
|
|
export function ImportJSON() {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
|
|
const shouldShow = useShopStore((state) => state.importShouldOpen);
|
|
const data = useShopStore((state) => state.importValue);
|
|
const loadDescription = useShopStore((state) => state.loadDescription);
|
|
const updateImportDescription = useShopStore((state) => state.updateImportDescription);
|
|
const closeImport = useShopStore((state) => state.closeImport);
|
|
const showImport = useShopStore((state) => state.openImport);
|
|
|
|
// #!render_count
|
|
console.log("ImportJSON renders: ", renderCount)
|
|
|
|
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 className="rfqFeedback">
|
|
<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 mt-2 mb-sm-0 me-sm-2">Close</a>
|
|
<a type="button" onClick={loadDescription}
|
|
className={`btn btn-sm btn-primary m-0 ms-sm-2 mt-2 ${data.error ? 'disabled' : ''}`}>Load
|
|
configuration</a>
|
|
</div>
|
|
</Modal.Body>
|
|
</Modal>
|
|
</>)
|
|
} |