feat: Version 2

Closes #627, closes #1047

client/src/components/cards/DueDateChip/DueDateChip.jsx

@@ -0,0 +1,150 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'semantic-ui-react';
+import { useForceUpdate } from '../../../lib/hooks';
+
+import getDateFormat from '../../../utils/get-date-format';
+
+import styles from './DueDateChip.module.scss';
+
+const Sizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+const Statuses = {
+  DUE_SOON: 'dueSoon',
+  OVERDUE: 'overdue',
+};
+
+const LONG_DATE_FORMAT_BY_SIZE = {
+  [Sizes.TINY]: 'longDate',
+  [Sizes.SMALL]: 'longDate',
+  [Sizes.MEDIUM]: 'longDateTime',
+};
+
+const FULL_DATE_FORMAT_BY_SIZE = {
+  [Sizes.TINY]: 'fullDate',
+  [Sizes.SMALL]: 'fullDate',
+  [Sizes.MEDIUM]: 'fullDateTime',
+};
+
+const STATUS_ICON_PROPS_BY_STATUS = {
+  [Statuses.DUE_SOON]: {
+    name: 'hourglass half',
+    color: 'orange',
+  },
+  [Statuses.OVERDUE]: {
+    name: 'hourglass end',
+    color: 'red',
+  },
+};
+
+const getStatus = (date) => {
+  const secondsLeft = Math.floor((date.getTime() - new Date().getTime()) / 1000);
+
+  if (secondsLeft <= 0) {
+    return Statuses.OVERDUE;
+  }
+
+  if (secondsLeft <= 24 * 60 * 60) {
+    return Statuses.DUE_SOON;
+  }
+
+  return null;
+};
+
+const DueDateChip = React.memo(
+  ({ value, size, isDisabled, withStatus, withStatusIcon, onClick }) => {
+    const [t] = useTranslation();
+    const forceUpdate = useForceUpdate();
+
+    const statusRef = useRef(null);
+    statusRef.current = withStatus ? getStatus(value) : null;
+
+    const intervalRef = useRef(null);
+
+    const dateFormat = getDateFormat(
+      value,
+      LONG_DATE_FORMAT_BY_SIZE[size],
+      FULL_DATE_FORMAT_BY_SIZE[size],
+    );
+
+    useEffect(() => {
+      if (withStatus && statusRef.current !== Statuses.OVERDUE) {
+        intervalRef.current = setInterval(() => {
+          const status = getStatus(value);
+
+          if (status !== statusRef.current) {
+            forceUpdate();
+          }
+
+          if (status === Statuses.OVERDUE) {
+            clearInterval(intervalRef.current);
+          }
+        }, 1000);
+      }
+
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+        }
+      };
+    }, [value, withStatus, forceUpdate]);
+
+    const contentNode = (
+      <span
+        className={classNames(
+          styles.wrapper,
+          styles[`wrapper${upperFirst(size)}`],
+          !withStatusIcon && statusRef.current && styles[`wrapper${upperFirst(statusRef.current)}`],
+          onClick && styles.wrapperHoverable,
+        )}
+      >
+        {t(`format:${dateFormat}`, {
+          value,
+          postProcess: 'formatDate',
+        })}
+        {withStatusIcon && statusRef.current && (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <Icon {...STATUS_ICON_PROPS_BY_STATUS[statusRef.current]} className={styles.statusIcon} />
+        )}
+      </span>
+    );
+
+    return onClick ? (
+      <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+        {contentNode}
+      </button>
+    ) : (
+      contentNode
+    );
+  },
+);
+
+DueDateChip.propTypes = {
+  value: PropTypes.instanceOf(Date).isRequired,
+  size: PropTypes.oneOf(Object.values(Sizes)),
+  isDisabled: PropTypes.bool,
+  withStatus: PropTypes.bool.isRequired,
+  withStatusIcon: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+DueDateChip.defaultProps = {
+  size: Sizes.MEDIUM,
+  isDisabled: false,
+  withStatusIcon: false,
+  onClick: undefined,
+};
+
+export default DueDateChip;

client/src/components/cards/DueDateChip/DueDateChip.module.scss

@@ -0,0 +1,65 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    padding: 0;
+  }
+
+  .statusIcon {
+    line-height: 1;
+    margin: 0 0 0 8px;
+  }
+
+  .wrapper {
+    background: #dce0e4;
+    border-radius: 3px;
+    color: #6a808b;
+    display: inline-block;
+    transition: background 0.3s ease;
+    white-space: nowrap;
+  }
+
+  .wrapperHoverable:hover {
+    background: #d2d8dc;
+    color: #17394d;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 0px 6px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 2px 8px;
+  }
+
+  .wrapperMedium {
+    line-height: 20px;
+    padding: 6px 12px;
+  }
+
+  /* Statuses */
+
+  .wrapperDueSoon {
+    background: #f2711c;
+    color: #fff;
+  }
+
+  .wrapperOverdue {
+    background: #db2828;
+    color: #fff;
+  }
+}

client/src/components/cards/DueDateChip/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import DueDateChip from './DueDateChip';
+
+export default DueDateChip;