Merge pull request #71 from imperial/feat-filter-time

feat: allow filtering of time related columns

app/companies/CompanyTable.tsx

@@ -68,13 +68,13 @@ const CompanyTable = ({
         sortingFn: "text",
       },
       size: {
-        cell: info => info.getValue() || "N/A",
+        cell: info => info.getValue(),
         header: "Size",
         id: "size",
         sortingFn: "alphanumeric",
       },
       hq: {
-        cell: info => info.getValue() || "N/A",
+        cell: info => info.getValue(),
         header: "HQ",
         id: "hq",
         sortingFn: "text",
@@ -97,7 +97,7 @@ const CompanyTable = ({
           columnName,
           columnDefsMap[columnName] ?? {
             // default column definition, so that all company values are also accessible
-            cell: info => info.getValue() || "N/A",
+            cell: info => info.getValue(),
             header: columnName,
             sortingFn: "alphanumeric",
             id: columnName,

app/companies/[slug]/page.tsx

@@ -197,7 +197,7 @@ const CompanyPage = async ({ params }: { params: { slug: string } }) => {
             <Box p="8">
               <OpportunityTable
                 opportunities={companyProfile.opportunities}
-                columns={["position", "location", "type", "createdAt"]}
+                columns={["position", "location", "type", "createdAt", "deadline"]}
                 displayColumns={
                   !!session && (session.user.role === Role.ADMIN || (await checkCompany(companyProfile.id)(session)))
                     ? ["adminButtons"]

app/events/EventTable.tsx

@@ -2,7 +2,7 @@
 
 import { DeleteEvent } from "@/components/DeleteEvent"
 import Link from "@/components/Link"
-import TanstackTable from "@/components/TanstackTable"
+import TanstackTable, { dateFilterFn } from "@/components/TanstackTable"
 import { EditEvent } from "@/components/UpsertEvent"
 
 import styles from "./eventTable.module.scss"
@@ -73,7 +73,7 @@ const EventTable = ({
         header: "Start Date",
         sortingFn: "datetime",
         id: "dateStart",
-        enableColumnFilter: false,
+        filterFn: dateFilterFn,
       },
       shortDescription: {
         cell: info => info.getValue(),
@@ -112,7 +112,7 @@ const EventTable = ({
           columnName,
           columnDefsMap[columnName] ?? {
             // default column definition, so that all company values are also accessible
-            cell: info => info.getValue() || "N/A",
+            cell: info => info.getValue(),
             header: columnName,
             sortingFn: "alphanumeric",
             id: columnName,

app/opportunities/OpportunityTable.tsx

@@ -2,7 +2,7 @@
 
 import { DeleteOpportunity } from "@/components/DeleteOpportunity"
 import Link from "@/components/Link"
-import TanstackTable from "@/components/TanstackTable"
+import TanstackTable, { dateFilterFn } from "@/components/TanstackTable"
 import { EditOpportunity } from "@/components/UpsertOpportunity"
 
 import styles from "./opportunityTable.module.scss"
@@ -11,7 +11,7 @@ import { getCompanyLink } from "../companies/getCompanyLink"
 import type { CompanyProfile, Opportunity } from "@prisma/client"
 import { Flex } from "@radix-ui/themes"
 import { ColumnDef, DisplayColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { formatDistanceToNowStrict } from "date-fns"
+import { format, formatDistanceToNowStrict } from "date-fns"
 import Image from "next/image"
 import { useMemo } from "react"
 
@@ -87,7 +87,14 @@ const OpportunityTable = ({
         header: "Posted",
         sortingFn: "datetime",
         id: "posted",
-        enableColumnFilter: false,
+        filterFn: dateFilterFn,
+      },
+      deadline: {
+        cell: info => <time suppressHydrationWarning={true}>{format(info.getValue(), "EEEE do MMMM yyyy")}</time>,
+        header: "Application Deadline",
+        sortingFn: "datetime",
+        id: "deadline",
+        filterFn: dateFilterFn,
       },
     }
 

app/opportunities/page.tsx

@@ -19,7 +19,7 @@ const OpportunitiesPage = async () => {
         <Heading size="8">Opportunities</Heading>
         <OpportunityTable
           opportunities={opportunities}
-          columns={["company.name", "position", "location", "type", "createdAt"]}
+          columns={["company.name", "position", "location", "type", "createdAt", "deadline"]}
         />
       </Flex>
     </RestrictedArea>

app/students/StudentTable.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "@/components/Link"
-import TanstackTable from "@/components/TanstackTable"
+import TanstackTable, { dateFilterFn } from "@/components/TanstackTable"
 import UserAvatar from "@/components/UserAvatar"
 
 import { StudentProfile, User } from "@prisma/client"
@@ -45,7 +45,7 @@ const StudentTable = ({
         header: "Graduating",
         sortingFn: "datetime",
         id: "graduationDate",
-        enableColumnFilter: true,
+        filterFn: dateFilterFn,
       },
       course: {
         cell: info => info.getValue(),

components/DateTimePicker.tsx

@@ -13,20 +13,30 @@ const DateTimePicker = ({
   placeholder,
   required = false,
   defaultDate,
+  onChange,
+  showTime = true,
+  value,
 }: {
   name: string
   placeholder: string
   required?: boolean
   defaultDate?: Date | null
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  showTime?: boolean
+  value?: string
 }) => {
   return (
     <TextField.Root
       className={styles.inputBox}
-      type="datetime-local"
+      type={showTime ? "datetime-local" : "date"}
       name={name}
       placeholder={placeholder}
       required={required}
-      defaultValue={!!defaultDate ? format(toZonedTime(defaultDate, TIMEZONE), "yyyy-MM-dd'T'HH:mm") : ""}
+      defaultValue={
+        !!defaultDate ? format(toZonedTime(defaultDate, TIMEZONE), showTime ? "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd") : ""
+      }
+      onChange={onChange}
+      value={value}
     />
   )
 }