From 938f67f00411a6eb45be1da59cd482aac9877250 Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Wed, 22 Jun 2022 16:59:54 +0200
Subject: [PATCH] feat: Add pdf viewer to attachments gallery

---
 .../CardModal/Attachments/Attachments.jsx     | 37 ++++++++++++-------
 .../Attachments/Attachments.module.scss       | 22 ++++++++---
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/client/src/components/CardModal/Attachments/Attachments.jsx b/client/src/components/CardModal/Attachments/Attachments.jsx
index 4e0c85b1..b2eea422 100644
--- a/client/src/components/CardModal/Attachments/Attachments.jsx
+++ b/client/src/components/CardModal/Attachments/Attachments.jsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
-import { Button, Grid } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
 import { useToggle } from '../../../lib/hooks';
 
 import Item from './Item';
@@ -57,17 +58,27 @@ const Attachments = React.memo(
     }, [toggleAllVisible]);
 
     const galleryItemsNode = items.map((item, index) => {
-      const props = item.image
-        ? item.image
-        : {
-            content: (
-              <Grid verticalAlign="middle" className={styles.contentWrapper}>
-                <Grid.Column textAlign="center" className={styles.content}>
-                  {t('common.thereIsNoPreviewAvailableForThisAttachment')}
-                </Grid.Column>
-              </Grid>
-            ),
-          };
+      const isPdf = item.url.endsWith('.pdf');
+
+      let props;
+      if (item.image) {
+        props = item.image;
+      } else {
+        props = {
+          content: isPdf ? (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            <object
+              data={item.url}
+              type="application/pdf"
+              className={classNames(styles.content, styles.contentPdf)}
+            />
+          ) : (
+            <span className={classNames(styles.content, styles.contentError)}>
+              {t('common.thereIsNoPreviewAvailableForThisAttachment')}
+            </span>
+          ),
+        };
+      }
 
       const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
 
@@ -88,7 +99,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
-                onClick={item.image ? open : undefined}
+                onClick={item.image || isPdf ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
                 onUpdate={(data) => handleUpdate(item.id, data)}
diff --git a/client/src/components/CardModal/Attachments/Attachments.module.scss b/client/src/components/CardModal/Attachments/Attachments.module.scss
index 4d99003a..fbcbe095 100644
--- a/client/src/components/CardModal/Attachments/Attachments.module.scss
+++ b/client/src/components/CardModal/Attachments/Attachments.module.scss
@@ -1,12 +1,24 @@
 :global(#app) {
   .content {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .contentPdf {
+    height: 100%;
+    width: 1120px;
+  }
+
+  .contentError {
     color: #fff;
     font-size: 20px;
     font-weight: 700;
-  }
-
-  .contentWrapper {
-    height: 100%;
+    height: 20px;
+    width: 470px;
   }
 
   .toggleButton {
@@ -25,4 +37,4 @@
       color: #092d42;
     }
   }
-}
+}
\ No newline at end of file