fix: Fix styles, refactoring

client/src/components/Card/Card.jsx

@@ -24,7 +24,7 @@ const Card = React.memo(
     index,
     name,
     dueDate,
-    dueCompleted,
+    isDueDateCompleted,
     stopwatch,
     coverUrl,
     boardId,
@@ -82,15 +82,6 @@ const Card = React.memo(
       [onUpdate],
     );
 
-    const handleDueDateCompletionUpdate = useCallback(
-      (dueDateCompleted) => {
-        onUpdate({
-          dueDateCompleted,
-        });
-      },
-      [onUpdate],
-    );
-
     const handleNameEdit = useCallback(() => {
       nameEdit.current.open();
     }, []);
@@ -130,12 +121,7 @@ const Card = React.memo(
               )}
               {dueDate && (
                 <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <DueDate
+                  <DueDate value={dueDate} isCompleted={isDueDateCompleted} size="tiny" />
-                    value={dueDate}
-                    completed={dueCompleted}
-                    size="tiny"
-                    onUpdateCompletion={handleDueDateCompletionUpdate}
-                  />
                 </span>
               )}
               {stopwatch && (
@@ -236,7 +222,7 @@ Card.propTypes = {
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   dueDate: PropTypes.instanceOf(Date),
-  dueCompleted: PropTypes.bool.isRequired,
+  isDueDateCompleted: PropTypes.bool,
   stopwatch: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   coverUrl: PropTypes.string,
   boardId: PropTypes.string.isRequired,
@@ -271,6 +257,7 @@ Card.propTypes = {
 
 Card.defaultProps = {
   dueDate: undefined,
+  isDueDateCompleted: undefined,
   stopwatch: undefined,
   coverUrl: undefined,
 };

client/src/components/CardModal/CardModal.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
+import { Button, Checkbox, Grid, Icon, Modal } from 'semantic-ui-react';
 import { usePopup } from '../../lib/popup';
 import { Markdown } from '../../lib/custom-ui';
 
@@ -32,7 +32,7 @@ const CardModal = React.memo(
     name,
     description,
     dueDate,
-    dueCompleted,
+    isDueDateCompleted,
     stopwatch,
     isSubscribed,
     isActivitiesFetching,
@@ -119,6 +119,12 @@ const CardModal = React.memo(
       [onUpdate],
     );
 
+    const handleDueDateCompletionChange = useCallback(() => {
+      onUpdate({
+        isDueDateCompleted: !isDueDateCompleted,
+      });
+    }, [isDueDateCompleted, onUpdate]);
+
     const handleStopwatchUpdate = useCallback(
       (newStopwatch) => {
         onUpdate({
@@ -172,15 +178,6 @@ const CardModal = React.memo(
       onClose();
     }, [onClose]);
 
-    const handleDueDateCompletion = useCallback(
-      (completion) => {
-        onUpdate({
-          dueCompleted: completion,
-        });
-      },
-      [onUpdate],
-    );
-
     const AttachmentAddPopup = usePopup(AttachmentAddStep);
     const BoardMembershipsPopup = usePopup(BoardMembershipsStep);
     const LabelsPopup = usePopup(LabelsStep);
@@ -310,17 +307,24 @@ const CardModal = React.memo(
                         context: 'title',
                       })}
                     </div>
-                    <span className={styles.attachment}>
+                    <span className={classNames(styles.attachment, styles.attachmentDueDate)}>
                       {canEdit ? (
+                        <>
+                          <Checkbox
+                            checked={isDueDateCompleted}
+                            disabled={!canEdit}
+                            onChange={handleDueDateCompletionChange}
+                          />
                           <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                             <DueDate
+                              withStatusIcon
                               value={dueDate}
-                            completed={dueCompleted}
+                              isCompleted={isDueDateCompleted}
-                            onUpdateCompletion={handleDueDateCompletion}
                             />
                           </DueDateEditPopup>
+                        </>
                       ) : (
-                        <DueDate value={dueDate} completed={dueCompleted} />
+                        <DueDate withStatusIcon value={dueDate} isCompleted={isDueDateCompleted} />
                       )}
                     </span>
                   </div>
@@ -576,7 +580,7 @@ CardModal.propTypes = {
   name: PropTypes.string.isRequired,
   description: PropTypes.string,
   dueDate: PropTypes.instanceOf(Date),
-  dueCompleted: PropTypes.bool,
+  isDueDateCompleted: PropTypes.bool,
   stopwatch: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isSubscribed: PropTypes.bool.isRequired,
   isActivitiesFetching: PropTypes.bool.isRequired,
@@ -631,7 +635,7 @@ CardModal.propTypes = {
 CardModal.defaultProps = {
   description: undefined,
   dueDate: undefined,
-  dueCompleted: false,
+  isDueDateCompleted: false,
   stopwatch: undefined,
 };
 

client/src/components/CardModal/CardModal.module.scss

@@ -58,6 +58,12 @@
     max-width: 100%;
   }
 
+  .attachmentDueDate {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  }
+
   .attachments {
     display: inline-block;
     margin: 0 8px 8px 0;

client/src/components/DueDate/DueDate.jsx

@@ -1,9 +1,10 @@
 import upperFirst from 'lodash/upperFirst';
-import React, { useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Checkbox } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import { useForceUpdate } from '../../lib/hooks';
 
 import getDateFormat from '../../utils/get-date-format';
 
@@ -15,6 +16,12 @@ const SIZES = {
   MEDIUM: 'medium',
 };
 
+const STATUSES = {
+  DUE_SOON: 'dueSoon',
+  OVERDUE: 'overdue',
+  COMPLETED: 'completed',
+};
+
 const LONG_DATE_FORMAT_BY_SIZE = {
   tiny: 'longDate',
   small: 'longDate',
@@ -27,18 +34,47 @@ const FULL_DATE_FORMAT_BY_SIZE = {
   medium: 'fullDateTime',
 };
 
-const getDueClass = (value) => {
+const STATUS_ICON_PROPS_BY_STATUS = {
-  const now = new Date();
+  [STATUSES.DUE_SOON]: {
-  const tomorrow = new Date(now).setDate(now.getDate() + 1);
+    name: 'hourglass half',
+    color: 'orange',
+  },
+  [STATUSES.OVERDUE]: {
+    name: 'hourglass end',
+    color: 'red',
+  },
+  [STATUSES.COMPLETED]: {
+    name: 'checkmark',
+    color: 'green',
+  },
+};
+
+const getStatus = (dateTime, isCompleted) => {
+  if (isCompleted) {
+    return STATUSES.COMPLETED;
+  }
+
+  const secondsLeft = Math.floor((dateTime.getTime() - new Date().getTime()) / 1000);
+
+  if (secondsLeft <= 0) {
+    return STATUSES.OVERDUE;
+  }
+
+  if (secondsLeft <= 24 * 60 * 60) {
+    return STATUSES.DUE_SOON;
+  }
 
-  if (now > value) return styles.overdue;
-  if (tomorrow > value) return styles.soon;
   return null;
 };
 
-const DueDate = React.memo(
+const DueDate = React.memo(({ value, size, isCompleted, isDisabled, withStatusIcon, onClick }) => {
-  ({ value, completed, size, isDisabled, onClick, onUpdateCompletion }) => {
   const [t] = useTranslation();
+  const forceUpdate = useForceUpdate();
+
+  const statusRef = useRef(null);
+  statusRef.current = getStatus(value, isCompleted);
+
+  const intervalRef = useRef(null);
 
   const dateFormat = getDateFormat(
     value,
@@ -46,77 +82,73 @@ const DueDate = React.memo(
     FULL_DATE_FORMAT_BY_SIZE[size],
   );
 
-    const classes = [
+  useEffect(() => {
+    if ([null, STATUSES.DUE_SOON].includes(statusRef.current)) {
+      intervalRef.current = setInterval(() => {
+        const status = getStatus(value, isCompleted);
+
+        if (status !== statusRef.current) {
+          forceUpdate();
+        }
+
+        if (status === STATUSES.OVERDUE) {
+          clearInterval(intervalRef.current);
+        }
+      }, 1000);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [value, isCompleted, forceUpdate]);
+
+  const contentNode = (
+    <span
+      className={classNames(
         styles.wrapper,
         styles[`wrapper${upperFirst(size)}`],
+        !withStatusIcon && statusRef.current && styles[`wrapper${upperFirst(statusRef.current)}`],
         onClick && styles.wrapperHoverable,
-      completed ? styles.completed : getDueClass(value),
+      )}
-    ];
+    >
-
+      {t(`format:${dateFormat}`, {
-    const handleToggleChange = useCallback(
+        value,
-      (event) => {
+        postProcess: 'formatDate',
-        event.preventDefault();
+      })}
-        event.stopPropagation();
+      {withStatusIcon && statusRef.current && (
-        if (!isDisabled) onUpdateCompletion(!completed);
+        // eslint-disable-next-line react/jsx-props-no-spreading
-      },
+        <Icon {...STATUS_ICON_PROPS_BY_STATUS[statusRef.current]} className={styles.statusIcon} />
-      [onUpdateCompletion, completed, isDisabled],
+      )}
+    </span>
   );
 
   return onClick ? (
-      <div className={styles.wrapperGroup}>
+    <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
-        <button
+      {contentNode}
-          type="button"
-          aria-label="Toggle completion"
-          className={classNames(...classes, styles.wrapperCheckbox)}
-          onClick={handleToggleChange}
-        >
-          <Checkbox
-            className={styles.checkbox}
-            checked={completed}
-            disabled={isDisabled}
-            onChange={handleToggleChange}
-          />
     </button>
-        <button
-          type="button"
-          disabled={isDisabled}
-          className={classNames(...classes, styles.wrapperButton)}
-          onClick={onClick}
-        >
-          <span>
-            {t(`format:${dateFormat}`, {
-              value,
-              postProcess: 'formatDate',
-            })}
-          </span>
-        </button>
-      </div>
   ) : (
-      <span className={classNames(...classes)}>
+    contentNode
-        {t(`format:${dateFormat}`, {
-          value,
-          postProcess: 'formatDate',
-        })}
-      </span>
-    );
-  },
   );
+});
 
 DueDate.propTypes = {
   value: PropTypes.instanceOf(Date).isRequired,
   size: PropTypes.oneOf(Object.values(SIZES)),
+  isCompleted: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool,
-  completed: PropTypes.bool,
+  withStatusIcon: PropTypes.bool,
   onClick: PropTypes.func,
-  onUpdateCompletion: PropTypes.func,
+  onCompletionToggle: PropTypes.func,
 };
 
 DueDate.defaultProps = {
   size: SIZES.MEDIUM,
   isDisabled: false,
-  completed: false,
+  withStatusIcon: false,
   onClick: undefined,
-  onUpdateCompletion: undefined,
+  onCompletionToggle: undefined,
 };
 
 export default DueDate;

client/src/components/DueDate/DueDate.module.scss

@@ -8,16 +8,17 @@
     padding: 0;
   }
 
+  .statusIcon {
+    line-height: 1;
+    margin: 0 0 0 8px;
+  }
+
   .wrapper {
     background: #dce0e4;
-    border: none;
     border-radius: 3px;
     color: #6a808b;
     display: inline-block;
-    outline: none;
-    text-align: left;
     transition: background 0.3s ease;
-    vertical-align: top;
   }
 
   .wrapperHoverable:hover {
@@ -25,57 +26,18 @@
     color: #17394d;
   }
 
-  .wrapperGroup {
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
-  }
-
-  .overdue {
-    background: #db2828;
-    color: #ffffff;
-    &.wrapperHoverable:hover {
-      background: #d01919;
-      color: #ffffff;
-    }
-  }
-
-  .soon {
-    background: #fbbd08;
-    color: #ffffff;
-    &.wrapperHoverable:hover {
-      background: #eaae00;
-      color: #ffffff;
-    }
-  }
-
-  .completed {
-    background: #21ba45;
-    color: #ffffff;
-    &.wrapperHoverable:hover {
-      background: #16ab39;
-      color: #ffffff;
-    }
-  }
-
   /* Sizes */
 
   .wrapperTiny {
     font-size: 12px;
     line-height: 20px;
     padding: 0px 6px;
-    &.wrapperCheckbox {
-      padding-right: 6px;
-    }
   }
 
   .wrapperSmall {
     font-size: 12px;
     line-height: 20px;
     padding: 2px 6px;
-    &.wrapperCheckbox {
-      padding-right: 6px;
-    }
   }
 
   .wrapperMedium {
@@ -83,17 +45,20 @@
     padding: 6px 12px;
   }
 
-  .wrapperCheckbox {
+  /* Statuses */
-    padding-right: 12px;
+
-    border-top-right-radius: 0;
+  .wrapperDueSoon {
-    border-bottom-right-radius: 0;
+    background: #f2711c;
-    cursor: pointer;
+    color: #fff;
   }
-  .checkbox {
+
-    display: block;
+  .wrapperOverdue {
+    background: #db2828;
+    color: #fff;
   }
-  .wrapperButton {
+
-    border-top-left-radius: 0;
+  .wrapperCompleted {
-    border-bottom-left-radius: 0;
+    background: #21ba45;
+    color: #fff;
   }
 }

client/src/components/Label/Label.jsx

@@ -17,7 +17,7 @@ const SIZES = {
 
 const Label = React.memo(({ name, color, size, isDisabled, onClick }) => {
   const contentNode = (
-    <div
+    <span
       title={name}
       className={classNames(
         styles.wrapper,
@@ -28,7 +28,7 @@ const Label = React.memo(({ name, color, size, isDisabled, onClick }) => {
       )}
     >
       {name || '\u00A0'}
-    </div>
+    </span>
   );
 
   return onClick ? (

client/src/components/Label/Label.module.scss

@@ -11,13 +11,13 @@
 
   .wrapper {
     border-radius: 3px;
-    box-sizing: border-box;
     color: #fff;
+    display: inline-block;
     font-weight: 400;
-    outline: none;
     overflow: hidden;
     text-overflow: ellipsis;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    vertical-align: top;
     white-space: nowrap;
   }
 

client/src/components/Stopwatch/Stopwatch.module.scss

@@ -10,13 +10,10 @@
 
   .wrapper {
     background: #dce0e4;
-    border: none;
     border-radius: 3px;
     color: #6a808b;
     display: inline-block;
     font-variant-numeric: tabular-nums;
-    outline: none;
-    text-align: left;
     transition: background 0.3s ease;
     vertical-align: top;
   }

client/src/components/User/User.module.scss

@@ -14,12 +14,10 @@
   }
 
   .wrapper {
-    border: none;
     border-radius: 50%;
     color: #fff;
     display: inline-block;
     line-height: 1;
-    outline: none;
     text-align: center;
     vertical-align: top;
   }

client/src/containers/CardContainer.js

@@ -20,7 +20,7 @@ const makeMapStateToProps = () => {
     const allLabels = selectors.selectLabelsForCurrentBoard(state);
     const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
-    const { name, dueDate, dueCompleted, stopwatch, coverUrl, boardId, listId, isPersisted } =
+    const { name, dueDate, isDueDateCompleted, stopwatch, coverUrl, boardId, listId, isPersisted } =
       selectCardById(state, id);
 
     const users = selectUsersByCardId(state, id);
@@ -36,7 +36,7 @@ const makeMapStateToProps = () => {
       index,
       name,
       dueDate,
-      dueCompleted,
+      isDueDateCompleted,
       stopwatch,
       coverUrl,
       boardId,

client/src/containers/CardModalContainer.js

@@ -21,7 +21,7 @@ const mapStateToProps = (state) => {
     name,
     description,
     dueDate,
-    dueCompleted,
+    isDueDateCompleted,
     stopwatch,
     isSubscribed,
     isActivitiesFetching,
@@ -50,7 +50,7 @@ const mapStateToProps = (state) => {
     name,
     description,
     dueDate,
-    dueCompleted,
+    isDueDateCompleted,
     stopwatch,
     isSubscribed,
     isActivitiesFetching,

client/src/models/Card.js

@@ -20,9 +20,7 @@ export default class extends BaseModel {
       relatedName: 'ownCards',
     }),
     dueDate: attr(),
-    dueCompleted: attr({
+    isDueDateCompleted: attr(),
-      getDefault: () => false,
-    }),
     stopwatch: attr(),
     isSubscribed: attr({
       getDefault: () => false,
@@ -211,7 +209,16 @@ export default class extends BaseModel {
         if (payload.data.boardId && payload.data.boardId !== cardModel.boardId) {
           cardModel.deleteWithRelated();
         } else {
-          cardModel.update(payload.data);
+          cardModel.update({
+            ...payload.data,
+            ...(payload.data.dueDate === null && {
+              isDueDateCompleted: null,
+            }),
+            ...(payload.data.dueDate &&
+              !cardModel.dueDate && {
+                isDueDateCompleted: false,
+              }),
+          });
         }
 
         break;
@@ -251,7 +258,7 @@ export default class extends BaseModel {
             'name',
             'description',
             'dueDate',
-            'dueCompleted',
+            'isDueDateCompleted',
             'stopwatch',
           ]),
           ...payload.card,

server/api/controllers/cards/create.js

@@ -56,9 +56,11 @@ module.exports = {
     dueDate: {
       type: 'string',
       custom: dueDateValidator,
+      allowNull: true,
     },
-    dueCompleted: {
+    isDueDateCompleted: {
       type: 'boolean',
+      allowNull: true,
     },
     stopwatch: {
       type: 'json',
@@ -103,7 +105,7 @@ module.exports = {
       'name',
       'description',
       'dueDate',
-      'dueCompleted',
+      'isDueDateCompleted',
       'stopwatch',
     ]);
 

server/api/controllers/cards/update.js

@@ -80,8 +80,9 @@ module.exports = {
       custom: dueDateValidator,
       allowNull: true,
     },
-    dueCompleted: {
+    isDueDateCompleted: {
       type: 'boolean',
+      allowNull: true,
     },
     stopwatch: {
       type: 'json',
@@ -176,7 +177,7 @@ module.exports = {
       'name',
       'description',
       'dueDate',
-      'dueCompleted',
+      'isDueDateCompleted',
       'stopwatch',
       'isSubscribed',
     ]);

server/api/helpers/cards/create-one.js

@@ -49,6 +49,14 @@ module.exports = {
       throw 'positionMustBeInValues';
     }
 
+    if (values.dueDate) {
+      if (_.isNil(values.isDueDateCompleted)) {
+        values.isDueDateCompleted = false;
+      }
+    } else {
+      delete values.isDueDateCompleted;
+    }
+
     const cards = await sails.helpers.lists.getCards(values.list.id);
 
     const { position, repositions } = sails.helpers.utils.insertToPositionables(

server/api/helpers/cards/duplicate-one.js

@@ -77,7 +77,7 @@ module.exports = {
         'name',
         'description',
         'dueDate',
-        'dueCompleted',
+        'isDueDateCompleted',
         'stopwatch',
       ]),
       ...values,

server/api/helpers/cards/update-one.js

@@ -135,6 +135,20 @@ module.exports = {
       });
     }
 
+    const dueDate = _.isUndefined(values.dueDate) ? inputs.record.dueDate : values.dueDate;
+
+    if (dueDate) {
+      const isDueDateCompleted = _.isUndefined(values.isDueDateCompleted)
+        ? inputs.record.isDueDateCompleted
+        : values.isDueDateCompleted;
+
+      if (_.isNull(isDueDateCompleted)) {
+        values.isDueDateCompleted = false;
+      }
+    } else {
+      values.isDueDateCompleted = null;
+    }
+
     let card;
     if (_.isEmpty(values)) {
       card = inputs.record;

server/api/models/Card.js

@@ -28,10 +28,10 @@ module.exports = {
       type: 'ref',
       columnName: 'due_date',
     },
-    dueCompleted: {
+    isDueDateCompleted: {
       type: 'boolean',
-      defaultsTo: false,
+      allowNull: true,
-      columnName: 'due_completed',
+      columnName: 'is_due_date_completed',
     },
     stopwatch: {
       type: 'json',

server/db/migrations/20240812065305_add_due_completion.js.js

@@ -1,12 +0,0 @@
-module.exports.up = async (knex) =>
-  knex.schema.table('card', (table) => {
-    /* Columns */
-
-    table.boolean('due_completed').notNullable().defaultTo(false);
-  });
-
-module.exports.down = async (knex) => {
-  await knex.schema.table('card', (table) => {
-    table.dropColumn('due_completed');
-  });
-};

server/db/migrations/20240812065305_make_due_date_toggleable.js

@@ -0,0 +1,18 @@
+module.exports.up = async (knex) => {
+  await knex.schema.table('card', (table) => {
+    /* Columns */
+
+    table.boolean('is_due_date_completed');
+  });
+
+  return knex('card')
+    .update({
+      isDueDateCompleted: false,
+    })
+    .whereNotNull('due_date');
+};
+
+module.exports.down = (knex) =>
+  knex.schema.table('card', (table) => {
+    table.dropColumn('is_due_date_completed');
+  });