Skip to content

Commit

Permalink
projects table responsive; list todo
Browse files Browse the repository at this point in the history
  • Loading branch information
@trueberryless
trueberryless committed Jul 5, 2024
1 parent d199ed0 commit db39c6e
Show file tree
Hide file tree
Showing 2 changed files with 345 additions and 4 deletions.
313 changes: 312 additions & 1 deletion src/components/projects/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Badge } from "../ui/badge";
import { format } from "date-fns";
import { DataTableRowActions } from "../ui/data-table-row-actions";

export const columns: ColumnDef<Project>[] = [
export const columnsXl: ColumnDef<Project>[] = [
{
accessorKey: "name",
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
Expand Down Expand Up @@ -146,3 +146,314 @@ export const columns: ColumnDef<Project>[] = [
cell: ({ row }) => <DataTableRowActions row={row} />,
},
];

export const columnsLg: ColumnDef<Project>[] = [
{
accessorKey: "name",
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("name")}
</span>
</div>
);
},
},
{
accessorKey: "description",
header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("description")}
</span>
</div>
);
},
},
{
accessorKey: "createdAt",
header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
cell: ({ row }) => {
const dateValue = row.getValue("createdAt");
const dateString = String(dateValue);
const parsedDate = Date.parse(dateString);
let formattedDate = "";

if (!isNaN(parsedDate)) {
formattedDate = format(parsedDate, "MMMM dd, yyyy");
} else {
formattedDate = "-";
}

return <div className="font-medium">{formattedDate}</div>;
},
},
{
accessorKey: "lastUpdatedAt",
header: ({ column }) => <DataTableColumnHeader column={column} title="Last Updated At" />,
cell: ({ row }) => {
const dateValue = row.getValue("lastUpdatedAt");
const dateString = String(dateValue);
const parsedDate = Date.parse(dateString);
let formattedDate = "";

if (!isNaN(parsedDate)) {
formattedDate = format(parsedDate, "MMMM dd, yyyy");
} else {
formattedDate = "-";
}

return <div className="font-medium">{formattedDate}</div>;
},
},
{
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!status) {
return null;
}

return (
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
cell: ({ row }) => {
const priority = priorities.find(
(priority) => priority.value === row.getValue("priority")
);

if (!priority) {
return null;
}

return (
<div className="flex items-center">
{priority.icon && (
<priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
id: "actions",
cell: ({ row }) => <DataTableRowActions row={row} />,
},
];

export const columnsMd: ColumnDef<Project>[] = [
{
accessorKey: "name",
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("name")}
</span>
</div>
);
},
},
{
accessorKey: "description",
header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("description")}
</span>
</div>
);
},
},
{
accessorKey: "createdAt",
header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
cell: ({ row }) => {
const dateValue = row.getValue("createdAt");
const dateString = String(dateValue);
const parsedDate = Date.parse(dateString);
let formattedDate = "";

if (!isNaN(parsedDate)) {
formattedDate = format(parsedDate, "MMMM dd, yyyy");
} else {
formattedDate = "-";
}

return <div className="font-medium">{formattedDate}</div>;
},
},
{
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!status) {
return null;
}

return (
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
cell: ({ row }) => {
const priority = priorities.find(
(priority) => priority.value === row.getValue("priority")
);

if (!priority) {
return null;
}

return (
<div className="flex items-center">
{priority.icon && (
<priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
id: "actions",
cell: ({ row }) => <DataTableRowActions row={row} />,
},
];

export const columnsSm: ColumnDef<Project>[] = [
{
accessorKey: "name",
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
// const label = labels.find((label) => label.value === row.original.label)

return (
<div className="flex space-x-2">
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
<span className="max-w-[500px] truncate font-medium">
{row.getValue("name")}
</span>
</div>
);
},
},
{
accessorKey: "createdAt",
header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
cell: ({ row }) => {
const dateValue = row.getValue("createdAt");
const dateString = String(dateValue);
const parsedDate = Date.parse(dateString);
let formattedDate = "";

if (!isNaN(parsedDate)) {
formattedDate = format(parsedDate, "MMMM dd, yyyy");
} else {
formattedDate = "-";
}

return <div className="font-medium">{formattedDate}</div>;
},
},
{
accessorKey: "status",
header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = statuses.find((status) => status.value === row.getValue("status"));

if (!status) {
return null;
}

return (
<div className="flex w-[100px] items-center">
{status.icon && <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
<span>{status.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
accessorKey: "priority",
header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
cell: ({ row }) => {
const priority = priorities.find(
(priority) => priority.value === row.getValue("priority")
);

if (!priority) {
return null;
}

return (
<div className="flex items-center">
{priority.icon && (
<priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
</div>
);
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
{
id: "actions",
cell: ({ row }) => <DataTableRowActions row={row} />,
},
];
36 changes: 33 additions & 3 deletions src/pages/projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {

import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";
import { columns } from "@/components/projects/columns";
import { columnsXl, columnsLg, columnsMd, columnsSm } from "@/components/projects/columns";

export default function Settings() {
const { user, setUser } = useUser();
Expand All @@ -62,14 +62,44 @@ export default function Settings() {
return (
<div className="flex w-full flex-col">
<main className="flex min-h-[calc(100vh-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 xl:flex">
<Card>
<CardHeader>Projects</CardHeader>
<CardContent>
<DataTable data={data} columns={columns} />
<DataTable data={data} columns={columnsXl} />
</CardContent>
</Card>
</div>
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 lg:flex xl:hidden">
<Card>
<CardHeader>Projects</CardHeader>
<CardContent>
<DataTable data={data} columns={columnsLg} />
</CardContent>
</Card>
</div>
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex lg:hidden">
<Card>
<CardHeader>Projects</CardHeader>
<CardContent>
<DataTable data={data} columns={columnsMd} />
</CardContent>
</Card>
</div>
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 sm:flex md:hidden">
<Card>
<CardHeader>Projects</CardHeader>
<CardContent>
<DataTable data={data} columns={columnsSm} />
</CardContent>
</Card>
</div>
<div className="flex h-full flex-1 flex-col space-y-8 p-8 sm:hidden">
<Card>
<CardHeader>Projects</CardHeader>
<CardContent></CardContent>
</Card>
</div>
</main>
</div>
);
Expand Down

0 comments on commit db39c6e

Please sign in to comment.