Question search implemented.

Author: marek-kozlovsky-ata

package-lock.json

@@ -19,7 +19,7 @@
     "chartjs-plugin-colorschemes": "^0.4.0",
     "chartjs-plugin-zoom": "^0.7.7",
     "inputmask-core": "^2.1.1",
-    "intelligent-dag-select": "^0.7.6",
+    "intelligent-tree-select": "^0.8.2",
     "jquery": "^3.4.1",
     "mdbreact": "^5.0.1",
     "moment": "^2.29.1",

package.json

@@ -0,0 +1,72 @@
+import React from 'react'
+
+import "intelligent-tree-select/lib/styles.css"
+import 'bootstrap/dist/css/bootstrap.css';
+import API from "../../api";
+import {IntelligentTreeSelect} from 'intelligent-tree-select';
+
+export class IntelligentQuestionSelector extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {
+            activeLabel: "",
+            activeQuestionOrigin: "",
+            activeQuestionOriginPath: ""
+        }
+        this.getAutocompleteValues = this.getAutocompleteValues.bind();
+        this.refSelector = React.createRef();
+    }
+
+    getAutocompleteValues = async () => {
+        return API.get("/rest/search/select/options", {
+            params: {
+                projectName: this.props.projectName
+            }
+        }).then((response) => {
+            return response.data;
+        }).catch((error) => {
+                console.log(error)
+            }
+        );
+    }
+
+    render() {
+        // TODO: remove "Create new option"
+
+        let dagSelectorComponent = <IntelligentTreeSelect
+            ref={this.refSelector}
+            fetchOptions={this.getAutocompleteValues}
+            valueKey={"questionOriginPath"}
+            labelKey={"label"}
+            childrenKey={"subTerm"}
+            simpleTreeData={true}
+            isMenuOpen={true}
+            multi={false}
+            renderAsTree={true}
+            onChange={opt => {
+                this.refSelector.current._addSelectedOption(opt);
+
+                this.setState({
+                    activeLabel: opt["label"],
+                    activeQuestionOrigin: opt["questionOrigin"],
+                    activeQuestionOriginPath: opt["questionOriginPath"]
+                })
+            }}
+        />;
+
+
+        return <div>
+            {dagSelectorComponent}
+            <div>
+                <br/>
+                <span>Label: <b>{this.state.activeLabel}</b></span>
+                <br/>
+                <span>Question origin: {this.state.activeQuestionOrigin}</span>
+                <br/>
+                <span>Question origin path: {this.state.activeQuestionOriginPath}</span>
+
+            </div>
+        </div>;
+    }
+}

src/components/search/AutocompleteTextField.js

@@ -6,7 +6,6 @@ import ListGroup from "react-bootstrap/ListGroup";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import {ExtensibleAutocompleteFields} from "./ExtensibleAutocompleteFields";
-import {DagDemo} from "./AutocompleteTextField";
 
 
 export class SearchOptionsPicker extends React.Component {
@@ -62,14 +61,14 @@ export class SearchOptionsPicker extends React.Component {
     render() {
 
         return <ListGroup>
-            <ListGroup.Item>
-                <Row>
-                    <Col xs={10}>
-                        <h5>Autocomplete</h5>
-                        <DagDemo/>
-                    </Col>
-                </Row>
-            </ListGroup.Item>
+            {/*<ListGroup.Item>*/}
+            {/*    <Row>*/}
+            {/*        <Col xs={10}>*/}
+            {/*            <h5>Autocomplete</h5>*/}
+            {/*            <IntelligentQuestionSelector projectName={this.props.projectName}/>*/}
+            {/*        </Col>*/}
+            {/*    </Row>*/}
+            {/*</ListGroup.Item>*/}
 
             <ListGroup.Item>
                 <Row>

src/components/search/IntelligentQuestionSelector.js

@@ -10,6 +10,7 @@ import {SearchResultList} from "./SearchResultList";
 import API from "../../api";
 import "@triply/yasgui/build/yasgui.min.css";
 import YasguiEditor from "./YasguiEditor";
+import {IntelligentQuestionSelector} from "./IntelligentQuestionSelector";
 
 const LEFT_DISPLAY_VERSIONS_LIST = "DISPLAY_VERSIONS_LIST";
 const LEFT_DISPLAY_FORMS_LIST = "DISPLAY_FORMS_LIST";
@@ -100,6 +101,8 @@ export class SearchOverview extends React.Component {
                     {/*        onClick={() => this.setState({leftComponent: LEFT_DISPLAY_FORMS_LIST})}>*/}
                     {/*    Search in forms*/}
                     {/*</Button>*/}
+                    <h5>Question smart search</h5>
+                    <IntelligentQuestionSelector projectName={this.props.match.params.projectName}/>
                     <br/><br/>
                 </Container>
                 <Row>