shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add due date filters

Browse Source
This commit is contained in:
Henry
2025-12-05 20:17:05 +00:00
parent 3d5f4f63a2
commit 7e3d64a4ff
6 changed files with 209 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/web/src/utils/dueDateFilters.ts Normal file
View File

@@ -0,0 +1,63 @@
import { addDays, endOfDay, startOfDay } from "date-fns";
type DueDateFilterKey =
| "overdue"
| "today"
| "tomorrow"
| "next-week"
| "next-month"
| "no-due-date";
export interface DueDateFilter {
startDate?: string;
endDate?: string;
hasNoDueDate?: boolean;
}
export const convertDueDateFiltersToRanges = (
filters: DueDateFilterKey[],
): DueDateFilter[] => {
if (!filters.length) return [];
const today = startOfDay(new Date());
const tomorrow = addDays(today, 1);
const nextWeekEnd = addDays(today, 8); // 7 days ahead
const nextMonthEnd = addDays(today, 31); // 30 days ahead
return filters.map((filter) => {
switch (filter) {
case "overdue":
return {
endDate: today.toISOString(),
};
case "today":
return {
startDate: today.toISOString(),
endDate: endOfDay(today).toISOString(),
};
case "tomorrow":
return {
startDate: tomorrow.toISOString(),
endDate: endOfDay(tomorrow).toISOString(),
};
case "next-week": {
return {
startDate: today.toISOString(),
endDate: nextWeekEnd.toISOString(),
};
}
case "next-month": {
return {
startDate: nextWeekEnd.toISOString(),
endDate: nextMonthEnd.toISOString(),
};
}
case "no-due-date":
return {
hasNoDueDate: true,
};
default:
return {};
}
});
};

49
apps/web/src/views/board/components/Filters.tsx
View File

@@ -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: <HiOutlineClock size={16} />,
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 (

12
apps/web/src/views/board/index.tsx
View File

@@ -29,6 +29,7 @@ import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
import { convertDueDateFiltersToRanges } from "~/utils/dueDateFilters";
import { formatToArray } from "~/utils/helpers";
import BoardDropdown from "./components/BoardDropdown";
import Card from "./components/Card";
@@ -87,17 +88,28 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
});
};
const semanticFilters = formatToArray(router.query.dueDate) as (
| "overdue"
| "today"
| "tomorrow"
| "next-week"
| "next-month"
| "no-due-date"
)[];
const queryParams: {
boardPublicId: string;
members: string[];
labels: string[];
lists: string[];
dueDate: ReturnType<typeof convertDueDateFiltersToRanges>;
type: "regular" | "template";
} = {
boardPublicId: boardId ?? "",
members: formatToArray(router.query.members),
labels: formatToArray(router.query.labels),
lists: formatToArray(router.query.lists),
dueDate: convertDueDateFiltersToRanges(semanticFilters),
type: isTemplate ? "template" : "regular",
};

13
apps/web/src/views/public/board/index.tsx
View File

@@ -15,6 +15,7 @@ import ThemeToggle from "~/components/ThemeToggle";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
import { convertDueDateFiltersToRanges } from "~/utils/dueDateFilters";
import { formatToArray } from "~/utils/helpers";
import Card from "~/views/board/components/Card";
import Filters from "~/views/board/components/Filters";
@@ -38,6 +39,15 @@ export default function PublicBoardView() {
? router.query.workspaceSlug[0]
: router.query.workspaceSlug;
const dueDateFilters = formatToArray(router.query.dueDate) as (
| "overdue"
| "today"
| "tomorrow"
| "next-week"
| "next-month"
| "no-due-date"
)[];
const { data, isLoading } = api.board.bySlug.useQuery(
{
boardSlug: boardSlug ?? "",
@@ -45,6 +55,7 @@ export default function PublicBoardView() {
members: formatToArray(router.query.members),
labels: formatToArray(router.query.labels),
lists: formatToArray(router.query.lists),
dueDate: convertDueDateFiltersToRanges(dueDateFilters),
},
{
enabled: router.isReady && !!boardSlug,
@@ -77,7 +88,7 @@ export default function PublicBoardView() {
};
const pathWithoutQuery = router.asPath.split("?")[0];
const splitPath = pathWithoutQuery.split("/");
const splitPath = pathWithoutQuery?.split("/") ?? [];
const cardPublicId = splitPath.length > 3 ? splitPath[3] : null;
useEffect(() => {

25
packages/api/src/routers/board.ts
View File

@@ -13,6 +13,12 @@ import { generateSlug, generateUID } from "@kan/shared/utils";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
import { assertUserInWorkspace } from "../utils/auth";
const dueDateFilterSchema = z.object({
startDate: z.string().datetime().optional(),
endDate: z.string().datetime().optional(),
hasNoDueDate: z.boolean().optional(),
});
export const boardRouter = createTRPCRouter({
all: protectedProcedure
.meta({
@@ -79,6 +85,7 @@ export const boardRouter = createTRPCRouter({
members: z.array(z.string().min(12)).optional(),
labels: z.array(z.string().min(12)).optional(),
lists: z.array(z.string().min(12)).optional(),
dueDate: z.array(dueDateFilterSchema).optional(),
type: z.enum(["regular", "template"]).optional(),
}),
)
@@ -112,6 +119,14 @@ export const boardRouter = createTRPCRouter({
members: input.members ?? [],
labels: input.labels ?? [],
lists: input.lists ?? [],
dueDate:
input.dueDate?.map((filter) => ({
startDate: filter.startDate
? new Date(filter.startDate)
: undefined,
endDate: filter.endDate ? new Date(filter.endDate) : undefined,
hasNoDueDate: filter.hasNoDueDate,
})) ?? [],
type: input.type,
},
);
@@ -145,6 +160,7 @@ export const boardRouter = createTRPCRouter({
members: z.array(z.string().min(12)).optional(),
labels: z.array(z.string().min(12)).optional(),
lists: z.array(z.string().min(12)).optional(),
dueDate: z.array(dueDateFilterSchema).optional(),
}),
)
.output(z.custom<Awaited<ReturnType<typeof boardRepo.getBySlug>>>())
@@ -168,6 +184,14 @@ export const boardRouter = createTRPCRouter({
members: input.members ?? [],
labels: input.labels ?? [],
lists: input.lists ?? [],
dueDate:
input.dueDate?.map((filter) => ({
startDate: filter.startDate
? new Date(filter.startDate)
: undefined,
endDate: filter.endDate ? new Date(filter.endDate) : undefined,
hasNoDueDate: filter.hasNoDueDate,
})) ?? [],
},
);
@@ -239,6 +263,7 @@ export const boardRouter = createTRPCRouter({
members: [],
labels: [],
lists: [],
dueDate: [],
type: sourceBoardInfo.type,
},
);

50
packages/db/src/repository/board.repo.ts
View File

@@ -1,4 +1,15 @@
import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";
import {
and,
asc,
desc,
eq,
gte,
inArray,
isNotNull,
isNull,
lt,
or,
} from "drizzle-orm";
import type { dbClient } from "@kan/db/client";
import type { BoardVisibilityStatus } from "@kan/db/schema";
@@ -65,6 +76,39 @@ export const getIdByPublicId = async (db: dbClient, boardPublicId: string) => {
return board;
};
interface DueDateFilter {
startDate?: Date;
endDate?: Date;
hasNoDueDate?: boolean;
}
const buildDueDateWhere = (filters: DueDateFilter[]) => {
if (!filters.length) return undefined;
const clauses = filters
.map((filter) => {
const conditions: ReturnType<typeof and>[] = [];
if (filter.hasNoDueDate) {
conditions.push(isNull(cards.dueDate));
} else {
conditions.push(isNotNull(cards.dueDate));
if (filter.startDate)
conditions.push(gte(cards.dueDate, filter.startDate));
if (filter.endDate) conditions.push(lt(cards.dueDate, filter.endDate));
}
return conditions.length > 0 ? and(...conditions) : undefined;
})
.filter((clause): clause is NonNullable<typeof clause> => !!clause);
if (!clauses.length) return undefined;
return or(...clauses);
};
export const getByPublicId = async (
db: dbClient,
boardPublicId: string,
@@ -72,6 +116,7 @@ export const getByPublicId = async (
members: string[];
labels: string[];
lists: string[];
dueDate: DueDateFilter[];
type: "regular" | "template" | undefined;
},
) => {
@@ -237,6 +282,7 @@ export const getByPublicId = async (
where: and(
cardIds.length > 0 ? inArray(cards.publicId, cardIds) : undefined,
isNull(cards.deletedAt),
buildDueDateWhere(filters.dueDate),
),
orderBy: [asc(cards.index)],
},
@@ -292,6 +338,7 @@ export const getBySlug = async (
members: string[];
labels: string[];
lists: string[];
dueDate: DueDateFilter[];
},
) => {
let cardIds: string[] = [];
@@ -407,6 +454,7 @@ export const getBySlug = async (
where: and(
cardIds.length > 0 ? inArray(cards.publicId, cardIds) : undefined,
isNull(cards.deletedAt),
buildDueDateWhere(filters.dueDate),
),
orderBy: [asc(cards.index)],
},