added working relationship search + set

need to debug visibility toggle and refactor handlers

1 files changed, 51 insertions, 10 deletions

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 7d6f4caf2..4e104549d 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -10,6 +10,7 @@ import './LinkEditor.scss';
 import React = require("react");
 import { listSpec } from "../../../fields/Schema";
 import { List } from "../../../fields/List";
+import { LinkRelationshipSearch } from "./LinkRelationshipSearch";
 
 
 interface LinkEditorProps {
@@ -28,6 +29,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
     @observable private buttonColor: string = "";
     @observable private relationshipButtonColor: string = "";
+    @observable private relationshipSearchVisibility: string = "none";
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
@@ -48,8 +50,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 linkRelationshipList.push(value);
                 const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
                 linkColorList.push(randColor)
-                console.log(randColor)
-                console.log("linkRelList size: " + linkRelationshipList.length);
             }
             this.relationshipButtonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.relationshipButtonColor = ""), 750);
@@ -57,6 +57,26 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     });
 
+    /**
+     * returns list of strings with possible existing relationships that contain what is currently in the input field
+     */
+    @action
+    getRelationshipResults = () => {
+        const query = this.relationship; //current content in input box
+        const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList)
+        if (linkRelationshipList) {
+            return linkRelationshipList.filter(rel => rel.includes(query));
+        }
+    }
+
+    /**
+     * toggles visibility of the relationship search results when the input field is focused on
+     */
+    @action
+    toggleRelationshipResults = () => {
+        this.relationshipSearchVisibility = this.relationshipSearchVisibility == "none" ? "block" : "none";
+    }
+
     @undoBatch
     setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
@@ -67,7 +87,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     });
 
-    onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter") {
             this.setDescripValue(this.description);
             document.getElementById('input')?.blur();
@@ -81,14 +101,27 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     }
 
-    onDown = () => this.setDescripValue(this.description);
+    onDescriptionDown = () => this.setDescripValue(this.description);
     onRelationshipDown = () => this.setRelationshipValue(this.relationship);
 
+    onBlur = () => {
+        // this.toggleRelationshipResults();
+    }
+    onFocus = () => {
+        this.toggleRelationshipResults();
+    }
+
     @action
-    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
     @action
-    handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.relationship = e.target.value; }
+    handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 
+        this.relationship = e.target.value;
+    }
+    @action
+    handleRelationshipSearchChange = (result: string) => {
+        this.relationship = result;
+    }
     @computed
     get editRelationship() {
         return <div className="linkEditor-description">
@@ -103,8 +136,16 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         // color={"rgb(88, 88, 88)"}
                         onKeyDown={this.onRelationshipKey}
                         onChange={this.handleRelationshipChange}
-                        onBlur={this.onRelationshipDown}
+                        onClick={this.toggleRelationshipResults}
+                        onBlur={this.onBlur}
                     ></input>
+                    <LinkRelationshipSearch
+                        results={this.getRelationshipResults()}
+                        display={this.relationshipSearchVisibility}
+                        setRelationshipValue={this.setRelationshipValue}
+                        toggleRelationshipResults={this.toggleRelationshipResults}
+                        handleRelationshipSearchChange={this.handleRelationshipSearchChange}
+                    />
                 </div>
                 <div className="linkEditor-description-add-button"
                     style={{ background: this.relationshipButtonColor }}
@@ -125,13 +166,13 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         value={this.description}
                         placeholder={"Enter link description"}
                         // color={"rgb(88, 88, 88)"}
-                        onKeyDown={this.onKey}
-                        onChange={this.handleChange}
+                        onKeyDown={this.onDescriptionKey}
+                        onChange={this.handleDescriptionChange}
                     ></input>
                 </div>
                 <div className="linkEditor-description-add-button"
                     style={{ background: this.buttonColor }}
-                    onPointerDown={this.onDown}>Set</div>
+                    onPointerDown={this.onDescriptionDown}>Set</div>
             </div>
         </div>;
     }