links can be expanded in menu to view metadata

1 files changed, 38 insertions, 13 deletions

diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 1a7cce4a3..9fbe83126 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEdit, faEye, faTimes, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observer } from "mobx-react";
 import { DocumentManager } from "../../util/DocumentManager";
@@ -7,15 +7,14 @@ import { undoBatch } from "../../util/UndoManager";
 import './LinkBox.scss';
 import React = require("react");
 import { Doc } from '../../../new_fields/Doc';
-import { StrCast } from '../../../new_fields/Types';
+import { StrCast, Cast } from '../../../new_fields/Types';
+import { observable, action } from 'mobx';
+import { LinkManager } from '../../util/LinkManager';
+library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);
 
 
-library.add(faEye);
-library.add(faEdit);
-library.add(faTimes);
-library.add(faArrowRight);
-
 interface Props {
+    groupType: string;
     linkDoc: Doc;
     sourceDoc: Doc;
     destinationDoc: Doc;
@@ -24,6 +23,8 @@ interface Props {
 
 @observer
 export class LinkBox extends React.Component<Props> {
+    @observable private _showMore: boolean = false;
+    @action toggleShowMore() { this._showMore = !this._showMore; }
 
     @undoBatch
     onFollowLink = async (e: React.PointerEvent): Promise<void> => {
@@ -36,19 +37,43 @@ export class LinkBox extends React.Component<Props> {
         this.props.showEditor();
     }
 
+    renderMetadata = (): JSX.Element => {
+        let groups = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc);
+        let index = groups.findIndex(groupDoc => StrCast(groupDoc.type).toUpperCase() === this.props.groupType.toUpperCase());
+        let groupDoc = index > -1 ? groups[index] : undefined;
+
+        let mdRows: Array<JSX.Element> = [];
+        if (groupDoc) {
+            let mdDoc = Cast(groupDoc.metadata, Doc, new Doc);
+            let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
+            mdRows = keys!.map(key => {
+                return (<div key={key} className="link-metadata-row"><b>{key}</b>: {StrCast(mdDoc[key])}</div>);
+            });
+        }
+
+        return (<div className="link-metadata">{mdRows}</div>);
+    }
+
     render() {
+
+        let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
+        let canExpand = keys ? keys.length > 0 : false;
+
         return (
-            <div className="link-menu-item">
-                <div className="link-menu-item-content">
+            <div className="linkMenu-item">
+                <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
                     <div className="link-name">
                         <p>{StrCast(this.props.destinationDoc.title)}</p>
+                        <div className="linkMenu-item-buttons">
+                            {canExpand ? <div title="Show more" className="button" onPointerDown={() => this.toggleShowMore()}>
+                                <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
+                            <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
+                            <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
+                        </div>
                     </div>
+                    {this._showMore ? this.renderMetadata() : <></>}
                 </div>
 
-                <div className="link-menu-item-buttons">
-                    <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
-                    <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
-                </div>
             </div>
         );
     }