From d784ff45113517d9c3ebcfa6ef50cd01efdfc3f6 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 00:32:17 -0400
Subject: DONE

---
 src/client/views/nodes/LinkBox.tsx     | 35 ++++++++++---------
 src/client/views/nodes/LinkEditor.scss | 15 +++++---
 src/client/views/nodes/LinkEditor.tsx  | 35 ++++++++++++++-----
 src/client/views/nodes/LinkMenu.tsx    | 64 ++++++++++++++++++++--------------
 4 files changed, 94 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 25dc049b4..c7911f554 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -16,6 +16,7 @@ interface Props {
     linkName: String;
     pairedDoc: Document;
     type: String;
+    showEditor: () => void
 }
 
 @observer
@@ -33,6 +34,8 @@ export class LinkBox extends React.Component<Props> {
     onEditButtonPressed = (e: React.PointerEvent): void => {
         console.log("edit down");
         e.stopPropagation();
+
+        this.props.showEditor();
     }
 
     onDeleteButtonPressed = (e: React.PointerEvent): void => {
@@ -61,23 +64,23 @@ export class LinkBox extends React.Component<Props> {
     render() {
 
         return (
-            <LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
-            // <div className="link-container">
-            //     <div className="info-container">
-            //         <div className="link-name">
-            //             <p>{this.props.linkName}</p>
-            //         </div>
-            //         <div className="doc-name">
-            //             <p>{this.props.type}{this.props.pairedDoc.Title}</p>
-            //         </div>
-            //     </div>
+            //<LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
+            <div className="link-container">
+                <div className="info-container">
+                    <div className="link-name">
+                        <p>{this.props.linkName}</p>
+                    </div>
+                    <div className="doc-name">
+                        <p>{this.props.type}{this.props.pairedDoc.Title}</p>
+                    </div>
+                </div>
 
-            //     <div className="button-container">
-            //         <div className="button" onPointerDown={this.onViewButtonPressed}></div>
-            //         <div className="button" onPointerDown={this.onEditButtonPressed}></div>
-            //         <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
-            //     </div>
-            // </div>
+                <div className="button-container">
+                    <div className="button" onPointerDown={this.onViewButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onEditButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
+                </div>
+            </div>
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index 27446b2f2..cb191dc8c 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -7,16 +7,23 @@
 
 .name-input {
     margin-bottom: 10px;
+    padding: 5px;
     font-size: 12px;
 }
 
 .description-input {
-    height: 100px;
-    font-size: 10px;
+    font-size: 12px;
+    padding: 5px;
+    margin-bottom: 10px;
 }
 
 .save-button {
-    width: 100px;
-    height: 30px;
+    width: 50px;
+    height: 20px;
     background-color: #2B6091;
+    margin: 0 auto;
+    color: white;
+    text-align: center;
+    line-height: 20px;
+    font-size: 12px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 405574598..3f7b4bf2d 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -2,38 +2,57 @@ import { observable, computed, action } from "mobx";
 import React = require("react");
 import { SelectionManager } from "../../util/SelectionManager";
 import { observer } from "mobx-react";
-import './LinkBox.scss'
+import './LinkEditor.scss'
 import { KeyStore } from '../../../fields/KeyStore'
 import { props } from "bluebird";
 import { DocumentView } from "./DocumentView";
 import { Document } from "../../../fields/Document";
-import { ListField } from "../../../fields/ListField";
-import { DocumentManager } from "../../util/DocumentManager";
-import { LinkBox } from "./LinkBox";
+import { TextField } from "../../../fields/TextField";
+import { link } from "fs";
 
 interface Props {
-    linkBox: LinkBox;
     linkDoc: Document;
+    showLinks: () => void;
 }
 
 @observer
 export class LinkEditor extends React.Component<Props> {
 
+    @observable private _nameInput: string = this.props.linkDoc.GetText(KeyStore.Title, "");
+    @observable private _descriptionInput: string = this.props.linkDoc.GetText(KeyStore.LinkDescription, "");
+
+
     onSaveButtonPressed = (e: React.PointerEvent): void => {
         console.log("view down");
         e.stopPropagation();
 
+        this.props.linkDoc.SetData(KeyStore.Title, this._nameInput, TextField);
+        this.props.linkDoc.SetData(KeyStore.LinkDescription, this._descriptionInput, TextField);
+
+        this.props.showLinks();
     }
 
+
+
     render() {
 
         return (
             <div className="edit-container">
-                <input className="name-input" type="text" placeholder="Name..."></input>
-                <input className="description-input" type="text" placeholder="Description"></input>
-                <div className="save-button"></div>
+                <input onChange={this.onNameChanged} className="name-input" type="text" value={this._nameInput} placeholder="Name . . ."></input>
+                <textarea onChange={this.onDescriptionChanged} className="description-input" value={this._descriptionInput} placeholder="Description . . ."></textarea>
+                <div className="save-button" onPointerDown={this.onSaveButtonPressed}>SAVE</div>
             </div>
 
         )
     }
+
+    @action
+    onNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._nameInput = e.target.value;
+    }
+
+    @action
+    onDescriptionChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this._descriptionInput = e.target.value;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 577aba398..9a95a4f09 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -11,6 +11,7 @@ import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
 import { FieldWaiting } from "../../../fields/Field";
+import { LinkEditor } from "./LinkEditor";
 
 interface Props {
     docView: DocumentView;
@@ -20,39 +21,48 @@ interface Props {
 @observer
 export class LinkMenu extends React.Component<Props> {
 
+    @observable private _editingLink?: Document;
+
     render() {
         //get list of links from document
         let linkFrom: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []);
         let linkTo: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []);
+        if (this._editingLink === undefined) {
+            return (
+
+                <div id="menu-container">
+                    <input id="search-bar" type="text" placeholder="Search..."></input>
+                    <div id="link-list">
+
+                        {linkTo.map(link => {
+                            let name = link.GetData(KeyStore.Title, TextField, new String);
+                            let doc = link.GetT(KeyStore.LinkedToDocs, Document);
+                            if (doc && doc != FieldWaiting) {
+                                return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={"Destination: "} />
+                            } else {
+                                return <div></div>
+                            }
+
+                        })}
+
+                        {linkFrom.map(link => {
+                            let name = link.GetData(KeyStore.Title, TextField, new String);
+                            let doc = link.GetT(KeyStore.LinkedFromDocs, Document);
+                            if (doc && doc != FieldWaiting) {
+                                return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={"Source: "} />
+                            } else {
+                                return <div></div>
+                            }
+                        })}
+                    </div>
 
-        return (
-            <div id="menu-container">
-                <input id="search-bar" type="text" placeholder="Search..."></input>
-                <div id="link-list">
-
-                    {linkTo.map(link => {
-                        let name = link.GetData(KeyStore.Title, TextField, new String);
-                        let doc = link.GetT(KeyStore.LinkedToDocs, Document);
-                        if (doc && doc != FieldWaiting) {
-                            return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Destination: "} />
-                        } else {
-                            return <div></div>
-                        }
-
-                    })}
-
-                    {linkFrom.map(link => {
-                        let name = link.GetData(KeyStore.Title, TextField, new String);
-                        let doc = link.GetT(KeyStore.LinkedFromDocs, Document);
-                        if (doc && doc != FieldWaiting) {
-                            return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Source: "} />
-                        } else {
-                            return <div></div>
-                        }
-                    })}
                 </div>
+            )
+        } else {
+            return (
+                <LinkEditor linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
+            )
+        }
 
-            </div>
-        )
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2