feat: Attachments icon on front of cards

Closes #225
plankanban · Oct 22, 2024 · 2458709 · 2458709
1 parent e0d5d7f
commit 2458709
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
@@ -32,6 +32,7 @@ const Card = React.memo(
     listId,
     projectId,
     isPersisted,
+    attachmentsTotal,
     notificationsTotal,
     users,
     labels,
@@ -107,7 +108,11 @@ const Card = React.memo(
           )}
           <div className={styles.name}>{name}</div>
           {tasks.length > 0 && <Tasks items={tasks} />}
-          {(description || dueDate || stopwatch || notificationsTotal > 0) && (
+          {(description ||
+            dueDate ||
+            stopwatch ||
+            attachmentsTotal > 0 ||
+            notificationsTotal > 0) && (
             <span className={styles.attachments}>
               {notificationsTotal > 0 && (
                 <span
@@ -143,6 +148,14 @@ const Card = React.memo(
                   </span>
                 </span>
               )}
+              {attachmentsTotal > 0 && (
+                <span className={classNames(styles.attachment, styles.attachmentLeft)}>
+                  <span className={styles.attachmentContent}>
+                    <Icon name="attach" />
+                    {attachmentsTotal}
+                  </span>
+                </span>
+              )}
             </span>
           )}
           {users.length > 0 && (
@@ -238,6 +251,7 @@ Card.propTypes = {
   listId: PropTypes.string.isRequired,
   projectId: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  attachmentsTotal: PropTypes.number.isRequired,
   notificationsTotal: PropTypes.number.isRequired,
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,

diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
@@ -35,6 +35,7 @@ const makeMapStateToProps = () => {
     const users = selectUsersByCardId(state, id);
     const labels = selectLabelsByCardId(state, id);
     const tasks = selectTasksByCardId(state, id);
+    const attachmentsTotal = selectors.selectAttachmentsTotalByCardId(state, id);
     const notificationsTotal = selectNotificationsTotalByCardId(state, id);
 
     const isCurrentUserEditor =
@@ -53,6 +54,7 @@ const makeMapStateToProps = () => {
       listId,
       projectId,
       isPersisted,
+      attachmentsTotal,
       notificationsTotal,
       users,
       labels,

diff --git a/client/src/selectors/cards.js b/client/src/selectors/cards.js
@@ -115,6 +115,23 @@ export const makeSelectTasksByCardId = () =>
 
 export const selectTasksByCardId = makeSelectTasksByCardId();
 
+export const makeSelectAttachmentsTotalByCardId = () =>
+  createSelector(
+    orm,
+    (_, id) => id,
+    ({ Card }, id) => {
+      const cardModel = Card.withId(id);
+
+      if (!cardModel) {
+        return cardModel;
+      }
+
+      return cardModel.attachments.count();
+    },
+  );
+
+export const selectAttachmentsTotalByCardId = makeSelectAttachmentsTotalByCardId();
+
 export const makeSelectLastActivityIdByCardId = () =>
   createSelector(
     orm,
@@ -334,6 +351,8 @@ export default {
   selectTaskIdsByCardId,
   makeSelectTasksByCardId,
   selectTasksByCardId,
+  makeSelectAttachmentsTotalByCardId,
+  selectAttachmentsTotalByCardId,
   makeSelectLastActivityIdByCardId,
   selectLastActivityIdByCardId,
   makeSelectNotificationsByCardId,