@@ -60,6 +73,7 @@ const Card = ({
checklists.length > 0 ||
hasDescription ||
comments.length > 0 ||
+ hasDueDate ||
hasAttachments ? (
@@ -77,6 +91,23 @@ const Card = ({
)}
+ {hasDueDate && dueDate && (
+
+
+
+ {format(dueDate, showYear ? "do MMM yyyy" : "do MMM", {
+ locale: dateLocale,
+ })}
+
+
+ )}
{comments.length > 0 && (
diff --git a/apps/web/src/views/board/components/Filters.tsx b/apps/web/src/views/board/components/Filters.tsx
index 3b281e8a..a76ee97d 100644
--- a/apps/web/src/views/board/components/Filters.tsx
+++ b/apps/web/src/views/board/components/Filters.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
import { t } from "@lingui/core/macro";
import {
HiMiniXMark,
+ HiOutlineClock,
HiOutlineSquare3Stack3D,
HiOutlineTag,
HiOutlineUserCircle,
@@ -60,7 +61,13 @@ const Filters = ({
try {
await router.push({
pathname: router.pathname,
- query: { ...router.query, members: [], labels: [], lists: [] },
+ query: {
+ ...router.query,
+ members: [],
+ labels: [],
+ lists: [],
+ dueDate: [],
+ },
});
} catch (error) {
console.error(error);
@@ -99,6 +106,39 @@ const Filters = ({
selected: !!router.query.lists?.includes(list.publicId),
}));
+ const dueDateItems = [
+ {
+ key: "overdue",
+ value: t`Overdue`,
+ selected: !!router.query.dueDate?.includes("overdue"),
+ },
+ {
+ key: "today",
+ value: t`Due today`,
+ selected: !!router.query.dueDate?.includes("today"),
+ },
+ {
+ key: "tomorrow",
+ value: t`Due tomorrow`,
+ selected: !!router.query.dueDate?.includes("tomorrow"),
+ },
+ {
+ key: "next-week",
+ value: t`Due next week`,
+ selected: !!router.query.dueDate?.includes("next-week"),
+ },
+ {
+ key: "next-month",
+ value: t`Due next month`,
+ selected: !!router.query.dueDate?.includes("next-month"),
+ },
+ {
+ key: "no-due-date",
+ value: t`No dates`,
+ selected: !!router.query.dueDate?.includes("no-due-date"),
+ },
+ ];
+
const groups = [
...(formattedMembers.length
? [
@@ -126,6 +166,12 @@ const Filters = ({
},
]
: []),
+ {
+ key: "dueDate",
+ label: t`Due date`,
+ icon: ,
+ items: dueDateItems,
+ },
];
const handleSelect = async (
@@ -156,6 +202,7 @@ const Filters = ({
...formatToArray(router.query.members),
...formatToArray(router.query.labels),
...formatToArray(router.query.lists),
+ ...formatToArray(router.query.dueDate),
].length;
return (
diff --git a/apps/web/src/views/board/components/NewCardForm.tsx b/apps/web/src/views/board/components/NewCardForm.tsx
index 52a7c62e..b5f37579 100644
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -1,6 +1,7 @@
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
-import { useEffect } from "react";
+import { format } from "date-fns";
+import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import {
HiOutlineBarsArrowDown,
@@ -15,6 +16,7 @@ import type { WorkspaceMember } from "~/components/Editor";
import Avatar from "~/components/Avatar";
import Button from "~/components/Button";
import CheckboxDropdown from "~/components/CheckboxDropdown";
+import DateSelector from "~/components/DateSelector";
import Editor from "~/components/Editor";
import Input from "~/components/Input";
import LabelIcon from "~/components/LabelIcon";
@@ -27,6 +29,7 @@ import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
type NewCardFormInput = NewCardInput & {
isCreateAnotherEnabled: boolean;
+ dueDate?: Date | null;
};
interface QueryParams {
@@ -65,6 +68,7 @@ export function NewCardForm({
memberPublicIds: [],
isCreateAnotherEnabled: false,
position: "start",
+ dueDate: null,
},
resetOnClose: true,
});
@@ -80,6 +84,8 @@ export function NewCardForm({
const position = watch("position");
const title = watch("title");
const description = watch("description");
+ const dueDate = watch("dueDate");
+ const [isDateSelectorOpen, setIsDateSelectorOpen] = useState(false);
// saving form state whenever form values change
useEffect(() => {
@@ -137,6 +143,7 @@ export function NewCardForm({
title: args.title,
listId: 2,
description: "",
+ dueDate: args.dueDate ?? null,
labels: oldBoard.labels.filter((label) =>
args.labelPublicIds.includes(label.publicId),
),
@@ -193,6 +200,7 @@ export function NewCardForm({
memberPublicIds: [],
isCreateAnotherEnabled,
position,
+ dueDate: null,
};
reset(newFormState);
saveFormState(newFormState);
@@ -242,7 +250,7 @@ export function NewCardForm({
),
})) ?? [];
- const onSubmit = (data: NewCardInput) => {
+ const onSubmit = (data: NewCardFormInput) => {
createCard.mutate({
title: data.title,
description: data.description,
@@ -250,6 +258,7 @@ export function NewCardForm({
labelPublicIds: data.labelPublicIds,
memberPublicIds: data.memberPublicIds,
position: data.position,
+ dueDate: data.dueDate ?? null,
});
};
@@ -448,6 +457,44 @@ export function NewCardForm({