From a774d7f55755703faa316401dd8724dd82a9ee98 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 3 Feb 2021 12:08:27 -0500
Subject: added linkRelationship to linkEditor.  fixed warnings.

---
 src/client/views/linking/LinkEditor.tsx | 84 +++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 26 deletions(-)

(limited to 'src/client/views/linking/LinkEditor.tsx')

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 435b9d904..f74b422d3 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -4,7 +4,6 @@ import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
 import { DateCast, StrCast } from "../../../fields/Types";
-import { Utils } from "../../../Utils";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
 import './LinkEditor.scss';
@@ -21,31 +20,41 @@ interface LinkEditorProps {
 export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @observable description = StrCast(LinkManager.currentLink?.description);
+    @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
     @observable openDropdown: boolean = false;
     @observable showInfo: boolean = false;
     @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
     @observable private buttonColor: string = "";
-
+    @observable private relationshipButtonColor: string = "";
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
-    @undoBatch @action
+    @undoBatch
     deleteLink = (): void => {
         LinkManager.Instance.deleteLink(this.props.linkDoc);
         this.props.showLinks();
     }
 
-    @undoBatch @action
-    setDescripValue = (value: string) => {
+    @undoBatch
+    setRelationshipValue = action((value: string) => {
+        if (LinkManager.currentLink) {
+            LinkManager.currentLink.linkRelationship = value;
+            this.relationshipButtonColor = "rgb(62, 133, 55)";
+            setTimeout(action(() => this.relationshipButtonColor = ""), 750);
+            return true;
+        }
+    });
+
+    @undoBatch
+    setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.description = value;
             this.buttonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.buttonColor = ""), 750);
             return true;
         }
-    }
+    });
 
-    @action
     onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter") {
             this.setDescripValue(this.description);
@@ -53,22 +62,48 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     }
 
-    @action
-    onDown = () => {
-        this.setDescripValue(this.description);
+    onRelationshipKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setRelationshipValue(this.relationship);
+            document.getElementById('input')?.blur();
+        }
     }
 
+    onDown = () => this.setDescripValue(this.description);
+    onRelationshipDown = () => this.setRelationshipValue(this.description);
+
     @action
-    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.description = e.target.value;
-    }
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    @action
+    handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.relationship = e.target.value; }
 
+    @computed
+    get editRelationship() {
+        return <div className="linkEditor-description">
+            <div className="linkEditor-description-label">Link Relationship:</div>
+            <div className="linkEditor-description-input">
+                <div className="linkEditor-description-editing">
+                    <input
+                        style={{ width: "100%" }}
+                        id="input"
+                        value={this.relationship}
+                        placeholder={"enter link label"}
+                        // color={"rgb(88, 88, 88)"}
+                        onKeyDown={this.onRelationshipKey}
+                        onChange={this.handleRelationshipChange}
+                    ></input>
+                </div>
+                <div className="linkEditor-description-add-button"
+                    style={{ background: this.relationshipButtonColor }}
+                    onPointerDown={this.onRelationshipDown}>Set</div>
+            </div>
+        </div>;
+    }
 
     @computed
     get editDescription() {
         return <div className="linkEditor-description">
-            <div className="linkEditor-description-label">
-                Link Label:</div>
+            <div className="linkEditor-description-label">Link Description:</div>
             <div className="linkEditor-description-input">
                 <div className="linkEditor-description-editing">
                     <input
@@ -84,13 +119,12 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <div className="linkEditor-description-add-button"
                     style={{ background: this.buttonColor }}
                     onPointerDown={this.onDown}>Set</div>
-            </div></div>;
+            </div>
+        </div>;
     }
 
     @action
-    changeDropdown = () => {
-        this.openDropdown = !this.openDropdown;
-    }
+    changeDropdown = () => { this.openDropdown = !this.openDropdown; }
 
     @undoBatch
     changeFollowBehavior = action((follow: string) => {
@@ -101,8 +135,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @computed
     get followingDropdown() {
         return <div className="linkEditor-followingDropdown">
-            <div className="linkEditor-followingDropdown-label">
-                Follow Behavior:</div>
+            <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
             <div className="linkEditor-followingDropdown-dropdown">
                 <div className="linkEditor-followingDropdown-header"
                     onPointerDown={this.changeDropdown}>
@@ -157,9 +190,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     }
 
     @action
-    changeInfo = () => {
-        this.showInfo = !this.showInfo;
-    }
+    changeInfo = () => { this.showInfo = !this.showInfo; }
 
     render() {
         const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
@@ -186,8 +217,9 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         {DateCast(this.props.linkDoc.creationDate).toString()}</div> : null}</div>
                 </div> : null}
 
-                <div>{this.editDescription}</div>
-                <div>{this.followingDropdown}</div>
+                {this.editDescription}
+                {this.editRelationship}
+                {this.followingDropdown}
             </div>
 
         );
-- 
cgit v1.2.3-70-g09d2