can now view selected file in view more tab

calblueprint · May 14, 2020 · 391f761 · 391f761
1 parent 32f56d2
commit 391f761
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/app/javascript/components/ActionItemCreationPage/index.js b/app/javascript/components/ActionItemCreationPage/index.js
@@ -141,7 +141,6 @@ class ActionItemCreationPage extends React.Component {
         hasFile: true,
       }));
     }
-    console.log(this.state.files);
   }
 
   handleFileEdit(event, actionItem) {
@@ -601,6 +600,8 @@ class ActionItemCreationPage extends React.Component {
             description={this.state.modalActionItem.description}
             category={this.state.modalActionItem.category}
             dueDate={this.state.modalActionItem.dueDate}
+            files={this.state.files}
+            fileIndex={this.state.modalActionItem.fileIndex}
           />
         ) : null}
         {this.state.editModalOpen ? (

diff --git a/app/javascript/components/ViewMoreModal/index.js b/app/javascript/components/ViewMoreModal/index.js
@@ -11,6 +11,7 @@ import {
   Input,
   Fab,
   Typography,
+  Button,
 } from '@material-ui/core/';
 import styles from './styles';
 
@@ -23,6 +24,8 @@ function ViewMoreModal({
   isCaseNote,
   open,
   handleClose,
+  files,
+  fileIndex,
 }) {
   const renderRichText = desc => (
     <MUIRichTextEditor value={desc} readOnly toolbar={false} />
@@ -60,6 +63,36 @@ function ViewMoreModal({
     return null;
   };
 
+  const renderFileName = fileIndex => {
+    if (fileIndex != null) {
+      return (
+        <Grid item>
+          <Fab
+            className={classes.iconStyle}
+            component="span"
+            variant="extended"
+            size="small"
+            aria-label="category"
+          >
+            <Typography
+              className={classes.categoryButtonStyle}
+              color="primary"
+              align="center"
+              onClick={showFile}
+            >
+              View File
+        </Typography>
+          </Fab>
+        </Grid >);
+    }
+  }
+
+  const showFile = url => {
+    const file = files[fileIndex];
+    const objectURL = window.URL.createObjectURL(file);
+    window.open(objectURL, '_blank');
+  }
+
   return (
     <>
       <Dialog
@@ -82,6 +115,7 @@ function ViewMoreModal({
                 <Grid item>
                   <h3 className={classes.titleStyle}>{title}</h3>
                 </Grid>
+                {renderFileName(fileIndex)}
                 {isCaseNote ? null : renderCategory(category)}
               </Grid>
               {isCaseNote ? null : renderDueDate(dueDate)}