3 - Delete a reference

features/delete_reference.feature

@@ -0,0 +1,17 @@
+#language: fr
+
+Fonctionnalité: Supprimer les références existantes
+
+  Scénario: sans être connecté
+
+    Soit "Les fées : Conte" le document principal
+    Quand je vais supprimer les références
+    Alors je peux lire "Before editing this document, please log in first"
+
+  Scénario: être connecté
+
+    Soit "Les fées : Conte" le document principal
+    Et une session active avec mon compte
+    Quand je vais supprimer les références
+    Alors La référence "Les fées (Charles Perrault),Contes des fées, 1886, All rights reserved" n'existe pas dans le document principal
+

features/step_definitions/event.rb

@@ -33,4 +33,8 @@
 
 Quand("je navigue vers le document suivant") do
   click_on('->')
+end
+
+Quand("je vais supprimer les références") do
+  click_on_icon('delete_reference')
 end

features/step_definitions/outcome.rb

@@ -71,4 +71,8 @@
 
 Alors("{string} est le document affiché à l'écran") do |text|
   expect(find('.runningHead')).to have_content text
-end
+end
+
+Alors("La référence {string} n'existe pas dans le document principal") do |title|
+  expect(page).not_to have_content title
+end

frontend/src/DeleteReferenceButton.js

@@ -0,0 +1,21 @@
+import Button from 'react-bootstrap/Button';
+import {useNavigate} from 'react-router-dom';
+import {XCircle} from 'react-bootstrap-icons';
+
+function DeleteReferenceButton({doc, ref_id, setLastUpdate, backend}) {
+  const navigate = useNavigate();
+  let handleDelete = async () => {
+    let _id = doc._id;
+    doc.links = doc.links.filter(link => link.object.toString() !== ref_id.toString());
+    backend.putDocument(doc).then(() => {
+      setLastUpdate(_id);
+      navigate('/' + ref_id);
+    });
+  };
+
+  return (
+    <XCircle title="Delete this reference" className="icon delete_reference" onClick={handleDelete}/>
+  );
+}
+
+export default DeleteReferenceButton;

frontend/src/DocumentsCards.js

@@ -8,13 +8,14 @@ import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import FutureCollection from './FutureCollection';
 import { TypeBadge } from './Type';
+import DeleteReferenceButton from './DeleteReferenceButton';
 
-function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend}) {
+function DocumentsCards({docs, expandable, byRow, isDeletable, createOn, setLastUpdate, backend}) {
   return (
     <Row className="gy-4">
       {docs.map(x =>
         <Col key={x._id} md={ byRow && (12 / byRow) }>
-          <DocumentCard doc={x} expandable={expandable} />
+          <DocumentCard doc={x} expandable={expandable} isDeletable={isDeletable} ref_id={createOn} {...{setLastUpdate, backend}}/>
         </Col>
       )}
       {createOn &&
@@ -35,7 +36,7 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
   );
 }
 
-function DocumentCard({doc, expandable}) {
+function DocumentCard({doc, expandable, isDeletable, ref_id, setLastUpdate, backend}) {
   const collectionId = useMemo(() => {
     if (doc?.links?.length > 1) {
       return doc.links.every((item) => {
@@ -48,6 +49,11 @@ function DocumentCard({doc, expandable}) {
 
   return (
     <Card className="h-100">
+      {isDeletable && (
+        <Card.Header className="d-flex justify-content-end">
+          <DeleteReferenceButton doc={doc} ref_id={ref_id} setLastUpdate={setLastUpdate} backend={backend}/>
+        </Card.Header>
+      )}
       <Card.Body>
         <BrowseTools
           id={collectionId ? doc.links.length && windowWidth.current < 820 ? doc.links[0].object : doc._id : doc._id}

frontend/src/Page.js

@@ -220,7 +220,7 @@ function References({scholiaMetadata, active, createOn, setLastUpdate, backend})
   if (!active) return;
   return (
     <Col className="gloses" >
-      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1}
+      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1} isDeletable={true}
         {...{createOn, setLastUpdate, backend}}
       />
     </Col>