122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
"use client"
|
|
import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
|
|
import { ArrowUpDown, BookText, CalendarMinus, CalendarPlus, MessageCircleReply, NotepadText } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { SubComplete } from "./page"
|
|
import { selectCol } from "app/ui/tables/selectColumn"
|
|
import TitleContainer from "app/ui/titleContainer"
|
|
import { CalendarArrowUp } from "lucide"
|
|
|
|
|
|
|
|
export const columns: ColumnDef<SubComplete>[] = [
|
|
selectCol,
|
|
{
|
|
accessorFn: row => {
|
|
if (row.story) {
|
|
return row.story.title
|
|
}
|
|
return "RECORD DELETED"
|
|
},
|
|
id: "story",
|
|
header: () => (
|
|
<>
|
|
<span className="hidden md:block">Story</span>
|
|
<NotepadText className="block md:hidden" />
|
|
</>
|
|
),
|
|
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
|
|
},
|
|
{
|
|
accessorFn: row => {
|
|
if (row.pub) {
|
|
return row.pub.title
|
|
}
|
|
return "RECORD DELETED"
|
|
},
|
|
id: "pub",
|
|
header: () => (
|
|
<>
|
|
<span className="hidden md:block">Publication</span>
|
|
<BookText className="block md:hidden" />
|
|
</>
|
|
),
|
|
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
|
|
},
|
|
{
|
|
accessorFn: row => new Date(row.submitted),
|
|
id: "submitted",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="p-0"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
<span className="hidden md:block"> Date Submitted </span>
|
|
<CalendarPlus className="block md:hidden" />
|
|
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
|
|
</Button>
|
|
)
|
|
},
|
|
enableColumnFilter: false,
|
|
sortingFn: "datetime",
|
|
cell: (props: CellContext<any, any>) => (
|
|
<p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
|
|
day: 'numeric',
|
|
month: 'numeric',
|
|
year: '2-digit'
|
|
})}</p>
|
|
)
|
|
},
|
|
{
|
|
accessorFn: row => row.responded ? new Date(row.responded) : null,
|
|
id: "responded",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="p-0"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
<span className="hidden md:block"> Date Responded </span>
|
|
<CalendarMinus className="block md:hidden" />
|
|
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
|
|
</Button>
|
|
)
|
|
},
|
|
enableColumnFilter: false,
|
|
sortingFn: "datetime",
|
|
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
|
|
day: 'numeric',
|
|
month: 'numeric',
|
|
year: '2-digit'
|
|
})}</p>)
|
|
},
|
|
{
|
|
accessorFn: row => {
|
|
if (row.response) {
|
|
return row.response.response
|
|
}
|
|
return "RECORD DELETED"
|
|
},
|
|
id: "response",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="p-0"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
<span className="hidden md:block"> Response </span>
|
|
<MessageCircleReply className="block md:hidden" />
|
|
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
|
|
</Button>
|
|
)
|
|
},
|
|
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
|
|
},
|
|
|
|
]
|
|
|