columns\n */\n build_columns(result) {\n let columns = []\n let searchterm = this.props.searchterm || \"\";\n for (let name of this.get_column_names()) {\n let value = result[name];\n let highlighted = this.highlight(value, searchterm);\n columns.push(\n
\n );\n }\n let uid = result.uid;\n let used = this.props.uids.indexOf(uid) > -1;\n columns.push(\n
{used && }
\n );\n return columns;\n }\n\n /*\n * Highlight any found match of the searchterm in the text\n *\n * @returns {String} highlighted text\n */\n highlight(text, searchterm) {\n if (searchterm.length == 0) return text;\n try {\n let rx = new RegExp(searchterm, \"gi\");\n text = text.replaceAll(rx, (m) => {\n return \"\"+m+\"\";\n });\n } catch (error) {\n // pass\n }\n return text\n }\n\n /*\n * Build pagination
...
items\n *\n * @returns {Array} Pagination JSX\n */\n build_pages() {\n let pages = [];\n for (let page=1; page <= this.props.pages; page++) {\n let cls = [\"page-item\"];\n if (this.props.page == page) cls.push(\"active\");\n pages.push(\n
\n \n
\n );\n }\n return pages;\n }\n\n /*\n * Build pagination next button\n *\n * @returns {Array} Next button JSX\n */\n build_next_button() {\n let cls = [\"page-item\"]\n if (!this.props.next_url) cls.push(\"disabled\")\n return (\n
\n );\n }\n}\n\nexport default References;\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\n\nimport ReferenceWidgetAPI from \"./api.js\"\nimport ReferenceField from \"./components/ReferenceField.js\"\nimport ReferenceResults from \"./components/ReferenceResults.js\"\nimport References from \"./components/References.js\"\n\n\nclass UIDReferenceWidgetController extends React.Component {\n\n constructor(props) {\n super(props);\n\n // Internal state\n this.state = {\n results: [], // `items` list of search results coming from `senaite.jsonapi`\n searchterm: \"\", // the search term that was entered by the user\n loading: false, // loading flag when searching for results\n count: 0, // count of results (coming from `senaite.jsonapi`)\n page: 1, // current page (coming from `senaite.jsonapi`)\n pages: 1, // number of pages (coming from `senaite.jsonapi`)\n next_url: null, // next page API URL (coming from `senaite.jsonapi`)\n prev_url: null, // previous page API URL (coming from `senaite.jsonapi`)\n b_start: 1, // batch start for pagination (see `senaite.jsonapi.batch`)\n focused: 0, // current result that has the focus\n }\n\n // Root input HTML element\n let el = props.root_el;\n\n // Data keys located at the root element\n // -> initial values are set from the widget class\n const data_keys = [\n \"id\",\n \"name\",\n \"uids\",\n \"api_url\",\n \"records\",\n \"catalog\",\n \"query\",\n \"columns\",\n \"display_template\",\n \"limit\",\n \"multi_valued\",\n \"disabled\",\n \"readonly\",\n ]\n\n // Query data keys and set state with parsed JSON value\n for (let key of data_keys) {\n let value = el.dataset[key];\n this.state[key] = this.parse_json(value);\n }\n\n // Initialize communication API with the API URL\n this.api = new ReferenceWidgetAPI({\n api_url: this.state.api_url,\n });\n\n // Bind callbacks to current context\n this.search = this.search.bind(this);\n this.goto_page = this.goto_page.bind(this);\n this.clear_results = this.clear_results.bind(this);\n this.select = this.select.bind(this);\n this.select_focused = this.select_focused.bind(this);\n this.deselect = this.deselect.bind(this);\n this.navigate_results = this.navigate_results.bind(this);\n this.on_keydown = this.on_keydown.bind(this);\n this.on_click = this.on_click.bind(this);\n\n // dev only\n window.widget = this;\n\n return this\n }\n\n componentDidMount() {\n // Bind event listeners of the document\n document.addEventListener(\"keydown\", this.on_keydown, false);\n document.addEventListener(\"click\", this.on_click, false)\n }\n\n componentWillUnmount() {\n // Remove event listeners of the document\n document.removeEventListener(\"keydown\", this.on_keydown, false);\n document.removeEventListener(\"click\", this.on_click, false);\n }\n\n /*\n * JSON parse the given value\n *\n * @param {String} value: The JSON value to parse\n */\n parse_json(value) {\n try {\n return JSON.parse(value)\n } catch (error) {\n console.error(`Could not parse \"${value}\" to JSON`);\n }\n }\n\n is_disabled() {\n if (this.state.disabled) {\n return true;\n }\n if (this.state.readonly) {\n return true;\n }\n if (!this.state.multi_valued && this.state.uids.length > 0) {\n return true;\n }\n return false;\n }\n\n /*\n * Create a query object for the API\n *\n * This method prepares a query from the current state variables,\n * which can be used to call the `api.search` method.\n *\n * @param {Object} options: Additional options to add to the query\n * @returns {Object} The query object\n */\n make_query(options) {\n options = options || {};\n return Object.assign({\n q: this.state.searchterm,\n limit: this.state.limit,\n complete: 1,\n }, options, this.state.query);\n }\n\n /*\n * Execute a search query and set the results to the state\n *\n * @param {Object} url_params: Additional search params for the API search URL\n * @returns {Promise}\n */\n fetch_results(url_params) {\n url_params = url_params || {};\n // prepare the server request\n let self = this;\n let query = this.make_query();\n this.toggle_loading(true);\n let promise = this.api.search(this.state.catalog, query, url_params);\n promise.then(function(data) {\n console.debug(\"ReferenceWidgetController::fetch_results:GOT DATA: \", data);\n self.set_results_data(data);\n self.toggle_loading(false);\n });\n return promise;\n }\n\n /*\n * Execute a search for the given searchterm\n *\n * @param {String} searchterm: The value entered into the search field\n * @returns {Promise}\n */\n search(searchterm) {\n if (!searchterm && this.state.results.length > 0) {\n this.state.searchterm = \"\";\n return;\n }\n console.debug(\"ReferenceWidgetController::search:searchterm:\", searchterm);\n // set the searchterm directly to avoid re-rendering\n this.state.searchterm = searchterm || \"\";\n return this.fetch_results();\n }\n\n /*\n * Fetch results of a page\n *\n * @param {Integer} page: The page to fetch\n * @returns {Promise}\n */\n goto_page(page) {\n page = parseInt(page);\n let limit = parseInt(this.state.limit)\n // calculate the beginning of the page\n // Note: this is the count of previous items that are excluded\n let b_start = page * limit - limit;\n return this.fetch_results({b_start: b_start});\n }\n\n /*\n * Add the UID of a search result to the state\n *\n * @param {String} uid: The selected UID\n * @returns {Array} uids: current selected UIDs\n */\n select(uid) {\n console.debug(\"ReferenceWidgetController::select:uid:\", uid);\n // create a copy of the selected UIDs\n let uids = [].concat(this.state.uids);\n // Add the new UID if it is not selected yet\n if (uids.indexOf(uid) == -1) {\n uids.push(uid);\n }\n this.setState({uids: uids});\n if (uids.length > 0 && !this.state.multi_valued) {\n this.clear_results();\n }\n return uids;\n }\n\n /*\n * Add/remove the focused result\n *\n */\n select_focused() {\n console.debug(\"ReferenceWidgetController::select_focused\");\n let focused = this.state.focused;\n let result = this.state.results.at(focused);\n if (result) {\n let uid = result.uid;\n if (this.state.uids.indexOf(uid) == -1) {\n this.select(uid);\n } else {\n this.deselect(uid);\n }\n }\n }\n\n /*\n * Remove the UID of a reference from the state\n *\n * @param {String} uid: The selected UID\n * @returns {Array} uids: current selected UIDs\n */\n deselect(uid) {\n console.debug(\"ReferenceWidgetController::deselect:uid:\", uid);\n let uids = [].concat(this.state.uids);\n let pos = uids.indexOf(uid);\n if (pos > -1) {\n uids.splice(pos, 1);\n }\n this.setState({uids: uids});\n return uids;\n }\n\n /*\n * Navigate the results either up or down\n *\n * @param {String} direction: either up or down\n */\n navigate_results(direction) {\n let page = this.state.page;\n let pages = this.state.pages;\n let results = this.state.results;\n let focused = this.state.focused;\n let searchterm = this.state.searchterm;\n\n console.debug(\"ReferenceWidgetController::navigate_results:focused:\", focused);\n\n if (direction == \"up\") {\n if (focused > 0) {\n this.setState({focused: focused - 1});\n } else {\n this.setState({focused: 0});\n if (page > 1) {\n this.goto_page(page - 1);\n }\n }\n }\n\n else if (direction == \"down\") {\n if (this.state.results.length == 0) {\n this.search(searchterm);\n }\n if (focused < results.length - 1) {\n this.setState({focused: focused + 1});\n } else {\n this.setState({focused: 0});\n if (page < pages) {\n this.goto_page(page + 1);\n }\n }\n }\n\n else if (direction == \"left\") {\n this.setState({focused: 0});\n if (page > 0) {\n this.goto_page(page - 1);\n }\n }\n\n else if (direction == \"right\") {\n this.setState({focused: 0});\n if (page < pages) {\n this.goto_page(page + 1);\n }\n }\n }\n\n /*\n * Toggle loading state\n *\n * @param {Boolean} toggle: The loading state to set\n * @returns {Boolean} toggle: The current loading state\n */\n toggle_loading(toggle) {\n if (toggle == null) {\n toggle = false;\n }\n this.setState({\n loading: toggle\n });\n return toggle;\n }\n\n /*\n * Set results data coming from `senaite.jsonapi`\n *\n * @param {Object} data: JSON search result object returned from `senaite.jsonapi`\n */\n set_results_data(data) {\n data = data || {};\n let items = data.items || [];\n\n let records = Object.assign(this.state.records, {})\n // update state records\n for (let item of items) {\n let uid = item.uid;\n records[uid] = item;\n }\n\n this.setState({\n records: records,\n results: items,\n count: data.count || 0,\n page: data.page || 1,\n pages: data.pages || 1,\n next_url: data.next || null,\n prev_url: data.previous || null,\n });\n }\n\n /*\n * Clear results from the state\n */\n clear_results() {\n this.setState({\n results: [],\n count: 0,\n page: 1,\n pages: 1,\n next_url: null,\n prev_url: null,\n });\n }\n\n /*\n * ReactJS event handler for keydown event\n */\n on_keydown(event){\n // clear results when ESC key is pressed\n if(event.keyCode === 27) {\n this.clear_results();\n }\n }\n\n /*\n * ReactJS event handler for click events\n */\n on_click(event) {\n // clear results when clicked outside of the widget\n let widget = this.props.root_el;\n let target = event.target;\n if (!widget.contains(target)) {\n this.clear_results();\n }\n }\n\n render() {\n return (\n