Create a document as a glose of multiple documents (see#404): dev main fonctionnalities

Author: panchotf

frontend/src/components/DocumentsCards.jsx

@@ -1,17 +1,23 @@
 import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
+import Form from 'react-bootstrap/Form';
 import Metadata from './Metadata';
 import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import { TypeBadge } from './Type';
 
-function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend, user}) {
+function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend, user, selectedDocs, setSelectedDocs}) {
   return (
     <Row className="gy-4">
       {docs.map(x => x?._id && x?.dc_title &&
         <Col key={x._id} md={ byRow && (12 / byRow) }>
-          <DocumentCard doc={x} expandable={expandable} />
+          <DocumentCard
+            doc={x}
+            expandable={expandable}
+            selectedDocs={selectedDocs}
+            setSelectedDocs={setSelectedDocs}
+          />
         </Col>
       )}
       {createOn &&
@@ -27,16 +33,36 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
   );
 }
 
-function DocumentCard({doc, expandable}) {
+function DocumentCard({doc, expandable, selectedDocs, setSelectedDocs}) {
+  const handleCheck = (e) => {
+    if (e.target.checked) {
+      setSelectedDocs(prev => [...prev, doc._id]);
+    } else {
+      setSelectedDocs(prev => prev.filter(id => id !== doc._id));
+    }
+  };
+
   return (
-    <Card className="h-100">
+    <Card className="h-100 position-relative">
       <Card.Body>
-        <BrowseTools id={doc._id} openable={expandable} />
+        <div className="d-flex align-items-start gap-2 mb-2">
+          <Form.Check
+            type="checkbox"
+            id={`check-${doc._id}`}
+            className="me-1"
+            style={{ cursor: 'pointer' }}
+            checked={selectedDocs?.includes(doc._id) || false}
+            onChange={handleCheck}
+          />
+          <div className="flex-grow-1">
+            <BrowseTools id={doc._id} openable={expandable} />
+          </div>
+        </div>
         <Metadata metadata={doc} />
         <TypeBadge type={doc?.type}/>
       </Card.Body>
     </Card>
   );
 }
 
-export default DocumentsCards;
+export default DocumentsCards;

frontend/src/routes/Bookshelf.jsx

@@ -1,25 +1,31 @@
 import '../styles/Bookshelf.css';
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router';
 import Container from 'react-bootstrap/Container';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import ToggleButton from 'react-bootstrap/ToggleButton';
+import Button from 'react-bootstrap/Button';
 import FutureDocument from '../components/FutureDocument.jsx';
 import DocumentsCards from '../components/DocumentsCards.jsx';
 import Graph from '../components/Graph.jsx';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
+import { v4 as uuid } from 'uuid';
 
 function Bookshelf({ backend, user }) {
   const [documents, setDocuments] = useState([]);
   const [lastUpdate, setLastUpdate] = useState();
   const [displayMode, setDisplayMode] = useState(localStorage.getItem('displayMode') || 'graph');
+  const [selectedDocs, setSelectedDocs] = useState([]);
 
+  const navigate = useNavigate();
   const displayModesList = ['graph', 'list'];
 
   useEffect(() => {
     backend.getAllDocuments(user)
       .then(setDocuments);
   }, [lastUpdate, user, backend]);
+
   const docs = [
     ...new Map(
       documents?.filter(x => !!x)
@@ -28,6 +34,34 @@ function Bookshelf({ backend, user }) {
   ];
   const displayedDocs = docs?.flatMap(d => d[0]);
 
+  const handleCreateQuotation = async () => {
+    const _id = uuid().replace(/-/g, '');
+    const doc = {
+      _id,
+      editors: [user],
+      dc_creator: '…',
+      dc_title: '…',
+      dc_issued: new Date(),
+      dc_isPartOf: null,
+      dc_license: null,
+      dc_translator: null,
+      dc_language: null,
+      dc_publisher: null,
+      dc_spatial: null,
+      text: '…',
+      links: selectedDocs.map((object) => ({ verb: 'includes', object }))
+    };
+
+    try {
+      await backend.putDocument(doc);
+      setLastUpdate(_id);
+      setSelectedDocs([]);
+      navigate(`/${_id}#${_id}`);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   function DisplayDocuments() {
     switch (displayMode) {
       case 'graph':
@@ -42,9 +76,28 @@ function Bookshelf({ backend, user }) {
           </Row>
         );
       case 'list':
-        return <DocumentsCards docs={documents} byRow={4} createOn={[]}
-          {...{setLastUpdate, backend, user}}
-        />;
+        return (
+          <>
+            {selectedDocs.length > 0 && (
+              <div className="card p-3 mb-4 justify-content-between align-items-center flex-direction-row">
+                <div>Create a new quotation with the <strong>{selectedDocs.length}</strong> selected document(s)</div>
+                <Button variant="danger" onClick={handleCreateQuotation}>
+                  Create Quotation
+                </Button>
+              </div>
+            )}
+            <DocumentsCards
+              docs={documents}
+              byRow={4}
+              createOn={[]}
+              selectedDocs={selectedDocs}
+              setSelectedDocs={setSelectedDocs}
+              {...{setLastUpdate, backend, user}}
+            />
+          </>
+        );
+      default:
+        return null;
     }
   }
 
@@ -75,5 +128,4 @@ function Bookshelf({ backend, user }) {
   );
 }
 
-export default Bookshelf;
-
+export default Bookshelf;