Add covers for cards

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -3,7 +3,18 @@ import PropTypes from 'prop-types';
 
 import Item from './Item';
 
-const Attachments = React.memo(({ items, onUpdate, onDelete }) => {
+const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
+  const handleCoverSelect = useCallback(
+    (id) => {
+      onCoverUpdate(id);
+    },
+    [onCoverUpdate],
+  );
+
+  const handleCoverDeselect = useCallback(() => {
+    onCoverUpdate(null);
+  }, [onCoverUpdate]);
+
   const handleUpdate = useCallback(
     (id, data) => {
       onUpdate(id, data);
@@ -25,9 +36,12 @@ const Attachments = React.memo(({ items, onUpdate, onDelete }) => {
           key={item.id}
           name={item.name}
           url={item.url}
-          thumbnailUrl={item.thumbnailUrl}
+          coverUrl={item.coverUrl}
           createdAt={item.createdAt}
+          isCover={item.isCover}
           isPersisted={item.isPersisted}
+          onCoverSelect={() => handleCoverSelect(item.id)}
+          onCoverDeselect={handleCoverDeselect}
           onUpdate={(data) => handleUpdate(item.id, data)}
           onDelete={() => handleDelete(item.id)}
         />
@@ -40,6 +54,7 @@ Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
+  onCoverUpdate: PropTypes.func.isRequired,
 };
 
 export default Attachments;

client/src/components/CardModal/Attachments/Item.jsx

@@ -2,20 +2,44 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, Loader } from 'semantic-ui-react';
+import { Button, Icon, Label, Loader } from 'semantic-ui-react';
 
 import EditPopup from './EditPopup';
 
 import styles from './Item.module.css';
 
 const Item = React.memo(
-  ({ name, url, thumbnailUrl, createdAt, isPersisted, onUpdate, onDelete }) => {
+  ({
+    name,
+    url,
+    coverUrl,
+    createdAt,
+    isCover,
+    isPersisted,
+    onCoverSelect,
+    onCoverDeselect,
+    onUpdate,
+    onDelete,
+  }) => {
     const [t] = useTranslation();
 
     const handleClick = useCallback(() => {
       window.open(url, '_blank');
     }, [url]);
 
+    const handleToggleCoverClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+
+        if (isCover) {
+          onCoverDeselect();
+        } else {
+          onCoverSelect();
+        }
+      },
+      [isCover, onCoverSelect, onCoverDeselect],
+    );
+
     if (!isPersisted) {
       return (
         <div className={classNames(styles.wrapper, styles.wrapperSubmitting)}>
@@ -36,19 +60,46 @@ const Item = React.memo(
         <div
           className={styles.thumbnail}
           style={{
-            backgroundImage: thumbnailUrl && `url(${thumbnailUrl}`,
+            backgroundImage: coverUrl && `url(${coverUrl}`,
           }}
         >
-          {!thumbnailUrl && <span className={styles.extension}>{extension || '-'}</span>}
+          {coverUrl ? (
+            isCover && (
+              <Label corner="left" size="tiny" icon="star" className={styles.thumbnailLabel} />
+            )
+          ) : (
+            <span className={styles.extension}>{extension || '-'}</span>
+          )}
         </div>
         <div className={styles.details}>
           <span className={styles.name}>{name}</span>
-          <span className={styles.options}>
+          <span className={styles.date}>
             {t('format:longDateTime', {
               postProcess: 'formatDate',
               value: createdAt,
             })}
           </span>
+          {coverUrl && (
+            <span className={styles.options}>
+              <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
+                <Icon
+                  name="window maximize outline"
+                  flipped="vertically"
+                  size="small"
+                  className={styles.optionIcon}
+                />
+                <span className={styles.optionText}>
+                  {isCover
+                    ? t('action.removeCover', {
+                        context: 'title',
+                      })
+                    : t('action.makeCover', {
+                        context: 'title',
+                      })}
+                </span>
+              </button>
+            </span>
+          )}
         </div>
         <EditPopup
           defaultData={{
@@ -69,16 +120,19 @@ const Item = React.memo(
 Item.propTypes = {
   name: PropTypes.string.isRequired,
   url: PropTypes.string,
-  thumbnailUrl: PropTypes.string,
+  coverUrl: PropTypes.string,
   createdAt: PropTypes.instanceOf(Date),
+  isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  onCoverSelect: PropTypes.func.isRequired,
+  onCoverDeselect: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
 Item.defaultProps = {
   url: undefined,
-  thumbnailUrl: undefined,
+  coverUrl: undefined,
   createdAt: undefined,
 };
 

client/src/components/CardModal/Attachments/Item.module.css

@@ -16,9 +16,16 @@
   background-color: rgba(9, 30, 66, 0.08) !important;
 }
 
+.date {
+  display: block;
+  color: #6b808c;
+  line-height: 20px;
+  margin-bottom: 6px;
+}
+
 .details {
   box-sizing: border-box;
-  padding: 8px 32px 8px 128px;
+  padding: 6px 32px 6px 128px;
   margin: 0;
   min-height: 80px;
   z-index: 0;
@@ -45,11 +52,31 @@
   word-wrap: break-word;
 }
 
+.option {
+  background: none;
+  border: none;
+  color: #6b808c;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+}
+
+.option:hover {
+  color: #172b4d;
+}
+
+.optionIcon {
+  margin-right: 6px !important;
+}
+
+.optionText {
+  text-decoration: underline;
+}
+
 .options {
   display: block;
   color: #6b808c;
   line-height: 20px;
-  margin-bottom: 8px;
 }
 
 .thumbnail {
@@ -70,6 +97,10 @@
   z-index: 1;
 }
 
+.thumbnailLabel {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+}
+
 .wrapper {
   cursor: pointer;
   margin-bottom: 8px;

client/src/components/CardModal/CardModal.jsx

@@ -98,6 +98,15 @@ const CardModal = React.memo(
       [onUpdate],
     );
 
+    const handleCoverUpdate = useCallback(
+      (newCoverAttachmentId) => {
+        onUpdate({
+          coverAttachmentId: newCoverAttachmentId,
+        });
+      },
+      [onUpdate],
+    );
+
     const handleAttachmentFileSelect = useCallback(
       (file) => {
         onAttachmentCreate({
@@ -278,6 +287,7 @@ const CardModal = React.memo(
                       items={attachments}
                       onUpdate={onAttachmentUpdate}
                       onDelete={onAttachmentDelete}
+                      onCoverUpdate={handleCoverUpdate}
                     />
                   </div>
                 </div>