FEATURE: Comment or adapt a document with an existing document (closes …

…#219).

frontend/src/components/BrowseTools.js

@@ -10,7 +10,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
         </Link>
       }
       {closable &&
-        <Link to="#" className="icon">
+        <Link to="#" className="icon close">
           <ChevronBarDown title="Close this document" />
         </Link>
       }

frontend/src/components/DocumentList.js

@@ -0,0 +1,44 @@
+import { Card } from 'react-bootstrap';
+import { useState, useEffect } from 'react';
+import ExistingDocument from './ExistingDocument';
+
+function DocumentList({ relatedTo, setSelectedDocument, setShowDocumentList, setLastUpdate, backend, user }) {
+  const [userDocuments, setUserDocuments] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const filteredDocuments = userDocuments.filter(({dc_title}) =>
+    dc_title?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  useEffect(() => {
+    backend.refreshDocuments(setUserDocuments);
+  }, [user]);
+
+  return (
+    <>
+      <Card className="h-100">
+        <Card.Body>
+          <input
+            type="text"
+            placeholder="Search documents"
+            value={searchQuery}
+            onChange={handleSearchChange}
+            className="form-control"
+          />
+        </Card.Body>
+      </Card>
+      {filteredDocuments.map(document => (
+        <ExistingDocument key={document._id}
+          {...{document, relatedTo, setSelectedDocument, setShowDocumentList,
+            setLastUpdate, backend}}
+        />
+      ))}
+    </>
+  );
+}
+
+export default DocumentList;

frontend/src/components/DocumentsCards.js

@@ -8,7 +8,7 @@ import FutureDocument from './FutureDocument';
 import { TypeBadge } from './Type';
 
 // asSource is a flag that indicates whether to create a parent (left) or a glose (right)
-function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend, asSource = false}) {
+function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend, user, asSource = false}) {
   return (
     <Row className="gy-4">
       {docs.map(x => x._id &&
@@ -20,7 +20,7 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
         <Col>
           <Row>
             <Col>
-              <FutureDocument relatedTo={createOn} {...{setLastUpdate, backend, asSource}} />
+              <FutureDocument relatedTo={createOn} {...{setLastUpdate, backend, user, asSource}} />
             </Col>
             {(!asSource && createOn.length > 0) &&
               <Col>

frontend/src/components/ExistingDocument.js

@@ -0,0 +1,41 @@
+import Card from 'react-bootstrap/Card';
+import { useNavigate } from 'react-router-dom';
+
+function ExistingDocument({ document, relatedTo, setLastUpdate, backend, setShowDocumentList }) {
+  const navigate = useNavigate();
+  const title = extractSubstring(document.dc_title || 'Untitled Document');
+
+  const handleClick = async () => {
+    backend.putDocument({
+      ...document,
+      links: [...document.links || [], { verb: 'refersTo', object: relatedTo[0] }]
+    }).then(() => {
+      setLastUpdate(document._id);
+      navigate('#' + document._id);
+    }).catch(console.error);
+
+    setShowDocumentList(false);
+  };
+
+  return (
+    <Card onClick={handleClick} className="existingDocument documentList">
+      <Card.Body>
+        <span>{title}</span>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function extractSubstring(str) {
+  if (str.includes('–')) {
+    str = str.split('–')[0];
+  }
+
+  if (str.length > 25) {
+    str = str.substring(0, 25) + '...';
+  }
+
+  return str;
+}
+
+export default ExistingDocument;

frontend/src/components/FutureDocument.js

@@ -1,13 +1,16 @@
 import '../styles/FutureDocument.css';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Card, Form} from 'react-bootstrap';
-import { PlusLg, FolderPlus } from 'react-bootstrap-icons';
+import { PlusLg, Link, FolderPlus } from 'react-bootstrap-icons';
 import { v4 as uuid } from 'uuid';
+import DocumentList from './DocumentList';
 
-function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, asSource = false}) {
+function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, user, asSource = false}) {
   const [selectedVerb, setSelectedVerb] = useState(verb);
+  const [showDocumentList, setShowDocumentList] = useState(false);
+  const [selectedDocument, setSelectedDocument] = useState(null);
   const fixedType = relatedTo.length === 0 || verb === 'includes' || asSource;
 
   const handleSelectChange = (event) => {
@@ -23,8 +26,25 @@ function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, a
             <option value="isTranslationOf">Adaptation</option>
           </Form.Select>
         )}
-        <FutureDocumentIcon {...{relatedTo, verb: selectedVerb, setLastUpdate, backend, asSource}} />
+        <FutureDocumentIcon
+          relatedTo={selectedDocument ? [selectedDocument._id] : relatedTo}
+          {...{verb: selectedVerb, setLastUpdate, backend, asSource}}
+        />
+        {!fixedType && (
+          <Link
+            title="Use an existing document as a glose..."
+            className="icon select-document ms-2 link-icon"
+            onClick={() => setShowDocumentList(!showDocumentList)}
+          />
+        )}
       </Card.Body>
+      {showDocumentList && (
+        <Card.Body>
+          <DocumentList {...{ relatedTo, setSelectedDocument,
+            setShowDocumentList, setLastUpdate, backend, user }}
+          />
+        </Card.Body>
+      )}
     </Card>
   );
 }

frontend/src/index.js

@@ -39,7 +39,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Bookshelf {...{backend, user}} />} />
             <Route path="/blank" element={<LecternBlank {...{backend}}/>} />
-            <Route path="/:id" element={<Lectern {...{backend}} />} />
+            <Route path="/:id" element={<Lectern {...{backend, user}} />} />
           </Routes>
         </TypesContext.Provider>
       </BrowserRouter>

frontend/src/routes/Lectern.js

@@ -8,7 +8,7 @@ import { useParams, useLocation } from 'react-router-dom';
 import OpenedDocuments from '../components/OpenedDocuments';
 import DocumentsCards from '../components/DocumentsCards';
 
-function Lectern({backend}) {
+function Lectern({backend, user}) {
 
   const [lectern, setLectern] = useState([]);
   const [metadata, setMetadata] = useState([]);
@@ -90,7 +90,7 @@ function Lectern({backend}) {
     <Container className="screen">
       <Row>
         <Col md={2} className="sources">
-          <DocumentsCards docs={sourcesOfSourceMetadata} createOn={[id]} asSource={true} byRow={1} {...{setLastUpdate, backend}} />
+          <DocumentsCards docs={sourcesOfSourceMetadata} createOn={[id]} asSource={true} byRow={1} {...{setLastUpdate, backend, user}} />
         </Col>
         <OpenedDocuments
           hasSources={sourcesOfSourceMetadata.length > 0}

frontend/src/styles/FutureDocument.css

@@ -1,3 +1,7 @@
-.icon {
+.icon, .existingDocument {
   cursor: pointer;
 }
+
+.link-icon {
+  font-size: 28px;
+}

samples/perrault_bintizulkiflee.json

@@ -10,5 +10,6 @@
       "verb": "isTranslationOf",
       "object": "420ab198674f11eda3b7a3fdd5ea984f"
     }],
+    "editors": ["alice"],
     "text": "{1} Once upon a time were a widow and her two daughters."
 }