2018: Add remove button for DocumentUpload (#2020)

openkfw · Oct 15, 2024 · 09fd1ee · 09fd1ee
1 parent 709ae3d
commit 09fd1ee
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 20 deletions.
diff --git a/frontend/src/pages/Documents/DocumentUpload.js b/frontend/src/pages/Documents/DocumentUpload.js
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from "react";
 import * as Yup from "yup";
 
 import AddLink from "@mui/icons-material/AddLink";
+import DeleteIcon from "@mui/icons-material/Delete";
 import PostAdd from "@mui/icons-material/PostAdd";
 import Publish from "@mui/icons-material/Publish";
 import { CircularProgress, Grid, Paper, TableHead, TextField, Tooltip } from "@mui/material";
@@ -39,7 +40,13 @@ const DocumentUpload = ({
   workflowDocuments,
   storageServiceAvailable,
   storeSnackbarMessage,
-  showErrorSnackbar
+  showErrorSnackbar,
+  deleteDocument,
+  deleteWorkflowDocument,
+  deleteWorkflowDocumentExternalLink,
+  projectId,
+  subprojectId,
+  workflowitemId
 }) => {
   const defaultDocumentUrl = "https://";
   const defaultDocumentName = "";
@@ -128,6 +135,16 @@ const DocumentUpload = ({
     setComment(event.target.value);
   };
 
+  const handleDeleteDocument = (id, base64, linkedFileHash) => {
+    if (id !== undefined) {
+      deleteDocument(projectId, subprojectId, workflowitemId, id);
+    } else if (base64 !== undefined) {
+      deleteWorkflowDocument(base64);
+    } else {
+      deleteWorkflowDocumentExternalLink(linkedFileHash);
+    }
+  };
+
   const body = (
     <TableBody>
       {workflowDocuments.length > 0 ? (
@@ -141,20 +158,30 @@ const DocumentUpload = ({
             <TableRow key={`${index}-${document.fileName}`}>
               <TableCell className="document-link-cell" data-test="workflowitemDocumentFileName">
                 <Typography variant="body1" component="div">
-                  {document.fileName}
-                  {document.link && (
-                    <Tooltip title={document.link}>
+                  <div className="document-link-wrapper">
+                    {document.fileName}
+                    <div>
+                      {document.link && (
+                        <Tooltip title={document.link}>
+                          <Button
+                            onClick={(event) => {
+                              event.preventDefault();
+                              window.open(document.link, "_blank");
+                            }}
+                            component="div"
+                          >
+                            <Publish />
+                          </Button>
+                        </Tooltip>
+                      )}
+
                       <Button
-                        onClick={(event) => {
-                          event.preventDefault();
-                          window.open(document.link, "_blank");
-                        }}
-                        component="div"
+                        onClick={() => handleDeleteDocument(document.id, document.base64, document.linkedFileHash)}
                       >
-                        <Publish />
+                        <DeleteIcon />
                       </Button>
-                    </Tooltip>
-                  )}
+                    </div>
+                  </div>
                 </Typography>
               </TableCell>
             </TableRow>

diff --git a/frontend/src/pages/Documents/DocumentUpload.scss b/frontend/src/pages/Documents/DocumentUpload.scss
@@ -25,6 +25,13 @@
   background-color: #f3f3f3;
 }
 
+.document-link-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+
 .document-upload-container {
   display: flex;
   flex-direction: row;

diff --git a/frontend/src/pages/Workflows/WorkflowDialog.js b/frontend/src/pages/Workflows/WorkflowDialog.js
@@ -181,7 +181,10 @@ const WorkflowDialog = (props) => {
     setStorageServiceAvailable,
     workflowTemplate,
     dialogTitle,
-    hideWorkflowDialog
+    hideWorkflowDialog,
+    deleteDocument,
+    deleteWorkflowDocument,
+    deleteWorkflowDocumentExternalLink
   } = props;
 
   useEffect(() => {
@@ -234,17 +237,26 @@ const WorkflowDialog = (props) => {
         handleSubmit: handleCreate,
         dialogShown: creationDialogShown
       };
-  const { displayName, amountType, amount } = workflowToAdd;
+  const { displayName, amountType, amount, id } = workflowToAdd;
+  const { location } = props;
   const exchangeRate = fromAmountString(workflowToAdd.exchangeRate);
   const changes = compareObjects(workflowItems, workflowToAdd);
   delete changes.assignee;
+  const projectId = location.pathname.split("/")[2];
+  const subprojectId = location.pathname.split("/")[3];
   const documentStep = {
     title: strings.workflow.workflow_documents,
     content: (
       <DocumentUpload
         storeWorkflowDocument={storeWorkflowDocument}
         storeWorkflowDocumentExternalLink={storeWorkflowDocumentExternalLink}
         workflowDocuments={workflowToAdd.documents}
+        deleteDocument={deleteDocument}
+        deleteWorkflowDocument={deleteWorkflowDocument}
+        deleteWorkflowDocumentExternalLink={deleteWorkflowDocumentExternalLink}
+        projectId={projectId}
+        subprojectId={subprojectId}
+        workflowitemId={id}
         {...props}
       />
     ),

diff --git a/frontend/src/pages/Workflows/WorkflowDialogContainer.js b/frontend/src/pages/Workflows/WorkflowDialogContainer.js
@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import { toJS } from "../../helper";
 import { withRouter } from "../../wrappers/withRouter";
+import { deleteDocument } from "../Documents/actions";
 import withInitialLoading from "../Loading/withInitialLoading";
 import { showSnackbar, storeSnackbarMessage } from "../Notifications/actions";
 import { fetchVersions, setStorageServiceAvailable } from "../Status/actions";
@@ -13,6 +14,8 @@ import {
   createWorkflowFromTemplateAction,
   createWorkflowItemAction,
   defaultWorkflowExchangeRate,
+  deleteWorkflowDocument,
+  deleteWorkflowDocumentExternalLink,
   editWorkflowItem,
   hideWorkflowDialog,
   removeWorkflowitemTag,
@@ -153,7 +156,10 @@ const mapStateToProps = (state) => {
     workflowItems: state.getIn(["workflow", "workflowItems"]),
     workflowTemplate: state.getIn(["workflow", "workflowTemplate"]),
     workflowTemplates: state.getIn(["workflow", "workflowTemplates"]),
-    workflowToAdd: state.getIn(["workflow", "workflowToAdd"])
+    workflowToAdd: state.getIn(["workflow", "workflowToAdd"]),
+    documentToDelete: state.getIn(["documents", "deleteDocument"]),
+    workflowDocumentToDelete: state.getIn(["workflow", "workflowToAdd"]),
+    workflowDocumentExternalLinkToDelete: state.getIn(["workflow", "workflowToAdd"])
   };
 };
 
@@ -206,7 +212,11 @@ const mapDispatchToProps = (dispatch) => {
     setStorageServiceAvailable: (isAvailable) => dispatch(setStorageServiceAvailable(isAvailable)),
     addWorkflowitemTag: (tag) => dispatch(addWorkflowitemTag(tag)),
     removeWorkflowitemTag: (tag) => dispatch(removeWorkflowitemTag(tag)),
-    showErrorSnackbar: () => dispatch(showSnackbar(true))
+    showErrorSnackbar: () => dispatch(showSnackbar(true)),
+    deleteDocument: (projectId, subprojectId, workflowitemId, documentId) =>
+      dispatch(deleteDocument(projectId, subprojectId, workflowitemId, documentId)),
+    deleteWorkflowDocument: (base64) => dispatch(deleteWorkflowDocument(base64)),
+    deleteWorkflowDocumentExternalLink: (linkedFileHash) => dispatch(deleteWorkflowDocumentExternalLink(linkedFileHash))
   };
 };
 

diff --git a/frontend/src/pages/Workflows/actions.js b/frontend/src/pages/Workflows/actions.js
@@ -35,6 +35,8 @@ export const WORKFLOW_DUEDATE = "WORKFLOW_DUEDATE";
 export const WORKFLOW_ASSIGNEE = "WORKFLOW_ASSIGNEE";
 export const WORKFLOW_DOCUMENT = "WORKFLOW_DOCUMENT";
 export const WORKFLOW_DOCUMENT_EXTERNAL_LINK = "WORKFLOW_DOCUMENT_EXTERNAL_LINK";
+export const DELETE_WORKFLOW_DOCUMENT_EXTERNAL_LINK = "DELETE_WORKFLOW_DOCUMENT_EXTERNAL_LINK";
+export const DELETE_WORKFLOW_DOCUMENT = "DELETE_WORKFLOW_DOCUMENT";
 export const WORKFLOWITEM_TYPE = "WORKFLOWITEM_TYPE";
 export const CREATE_WORKFLOW = "CREATE_WORKFLOW";
 export const CREATE_WORKFLOW_FROM_TEMPLATE = "CREATE_WORKFLOW_FROM_TEMPLATE";
@@ -553,6 +555,20 @@ export function storeWorkflowDocumentExternalLink(link, fileName, linkedFileHash
   };
 }
 
+export function deleteWorkflowDocumentExternalLink(linkedFileHash) {
+  return {
+    type: DELETE_WORKFLOW_DOCUMENT_EXTERNAL_LINK,
+    linkedFileHash
+  };
+}
+
+export function deleteWorkflowDocument(base64) {
+  return {
+    type: DELETE_WORKFLOW_DOCUMENT,
+    base64
+  };
+}
+
 export function storeWorkflowitemType(workflowitemType) {
   return {
     type: WORKFLOWITEM_TYPE,

diff --git a/frontend/src/pages/Workflows/reducer.js b/frontend/src/pages/Workflows/reducer.js
@@ -18,6 +18,8 @@ import {
   CLEAR_REJECT_REASON,
   CREATE_WORKFLOW_SUCCESS,
   DEFAULT_WORKFLOW_EXCHANGERATE,
+  DELETE_WORKFLOW_DOCUMENT,
+  DELETE_WORKFLOW_DOCUMENT_EXTERNAL_LINK,
   DISABLE_LIVE_UPDATES_SUBPROJECT,
   DISABLE_WORKFLOW_EDIT,
   EDIT_WORKFLOW_ITEM_SUCCESS,
@@ -368,6 +370,14 @@ export default function detailviewReducer(state = defaultState, action) {
           })
         ])
       );
+    case DELETE_WORKFLOW_DOCUMENT_EXTERNAL_LINK:
+      return state.updateIn(["workflowToAdd", "documents"], (documents) =>
+        documents.filter((item) => item.get("linkedFileHash") !== action.linkedFileHash)
+      );
+    case DELETE_WORKFLOW_DOCUMENT:
+      return state.updateIn(["workflowToAdd", "documents"], (documents) =>
+        documents.filter((item) => item.get("base64") !== action.base64)
+      );
     case WORKFLOWITEM_TYPE:
       return state.setIn(["workflowToAdd", "workflowitemType"], action.workflowitemType);
     case CREATE_WORKFLOW_SUCCESS:
@@ -579,10 +589,20 @@ export default function detailviewReducer(state = defaultState, action) {
     case SEARCH_TAGS_WORKFLOWITEM: {
       return state.set("searchOnlyTags", action.tagsOnly);
     }
-    case DELETE_DOCUMENT_SUCCESS:
-      return state.updateIn(["showDetailsItem", "data", "documents"], (documents) =>
-        Immutable.List([...documents.filter((doc) => doc.id !== action.payload.documentId)])
-      );
+    case DELETE_DOCUMENT_SUCCESS: {
+      const filteredShowDetailsDocuments = state
+        .getIn(["showDetailsItem", "data", "documents"], Immutable.List())
+        .filter((doc) => doc.id !== action.payload.documentId);
+
+      const filteredWorkflowToAddDocuments = state
+        .getIn(["workflowToAdd", "documents"])
+        .toJS()
+        .filter((doc) => doc.id !== action.payload.documentId);
+
+      return state
+        .setIn(["showDetailsItem", "data", "documents"], Immutable.List(filteredShowDetailsDocuments))
+        .setIn(["workflowToAdd", "documents"], Immutable.List(filteredWorkflowToAddDocuments));
+    }
     default:
       return state;
   }