From 9ab2cacfea1489d2f78c704fca8cb7b47706ed7b Mon Sep 17 00:00:00 2001 From: mehedi-hasan Date: Wed, 17 Apr 2024 20:24:18 +0600 Subject: [PATCH] feat: evaluation table --- src/app/(dashboard)/dashboard/page.tsx | 22 ++- src/app/(dashboard)/page.tsx | 9 ++ .../evaluation-start-table/cell-action.tsx | 68 ++++++++ .../evaluation-start-table/columns.tsx | 88 +++++++++++ .../data-table-column-header.tsx | 72 +++++++++ .../data-table-faceted-filter.tsx | 147 ++++++++++++++++++ .../data-table-pagination.tsx | 97 ++++++++++++ .../data-table-toolbar.tsx | 77 +++++++++ .../data-table-view-options.tsx | 59 +++++++ .../evaluation-start-table/data-table.tsx | 132 ++++++++++++++++ .../evaluation-start-table/tools-table.tsx | 39 +++++ src/config.ts | 0 src/config/nav.ts | 8 +- src/constants/data.ts | 16 ++ src/types/evaluation-start.ts | 6 + 15 files changed, 833 insertions(+), 7 deletions(-) create mode 100644 src/app/(dashboard)/page.tsx create mode 100644 src/components/evaluation-start-table/cell-action.tsx create mode 100644 src/components/evaluation-start-table/columns.tsx create mode 100644 src/components/evaluation-start-table/data-table-column-header.tsx create mode 100644 src/components/evaluation-start-table/data-table-faceted-filter.tsx create mode 100644 src/components/evaluation-start-table/data-table-pagination.tsx create mode 100644 src/components/evaluation-start-table/data-table-toolbar.tsx create mode 100644 src/components/evaluation-start-table/data-table-view-options.tsx create mode 100644 src/components/evaluation-start-table/data-table.tsx create mode 100644 src/components/evaluation-start-table/tools-table.tsx delete mode 100644 src/config.ts create mode 100644 src/types/evaluation-start.ts diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index eced8d3..9dcc0fa 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -1,9 +1,21 @@ -import Image from "next/image"; +import Breadcrumb from "@/components/breadcrumb"; +import ToolsTable from "@/components/evaluation-start-table/tools-table"; +import { dummyCourseAdmin, dummyEvaluation } from "@/constants/data"; +import { CourseAdmin } from "@/types/course-admin"; +import { Evaluation } from "@/types/evaluation-start"; +import React from "react"; -export default function Home() { +const breadcrumbItems = [ + { title: "Dashboard", link: "#" }, + { title: "Evaluation" }, +]; +const Page = () => { return ( -
- hello +
+ +
); -} +}; + +export default Page; diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx new file mode 100644 index 0000000..0310611 --- /dev/null +++ b/src/app/(dashboard)/page.tsx @@ -0,0 +1,9 @@ +import { redirect } from "next/navigation"; +import React from "react"; + +const Page = () => { + redirect("/dashboard"); + return
; +}; + +export default Page; diff --git a/src/components/evaluation-start-table/cell-action.tsx b/src/components/evaluation-start-table/cell-action.tsx new file mode 100644 index 0000000..6790902 --- /dev/null +++ b/src/components/evaluation-start-table/cell-action.tsx @@ -0,0 +1,68 @@ +"use client"; +import { AlertModal } from "@/components/alert-modal"; +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { useToast } from "@/components/ui/use-toast"; +import { EvaluationStart } from "@/types/evaluation-start"; + +import { GitCommit, MoreHorizontal, Trash } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +interface CellActionProps { + data: EvaluationStart; +} + +export const CellAction: React.FC = ({ data }) => { + const [loading, setLoading] = useState(false); + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const router = useRouter(); + const { toast } = useToast(); + + const onDeleteConfirm = async () => {}; + + const handleUpdateStatus = async () => {}; + + return ( + <> + setIsDeleteModalOpen(false)} + onConfirm={onDeleteConfirm} + loading={loading} + /> + + + + + + Actions + + + // router.push(`#`) + // } + > + Commits + + setIsDeleteModalOpen(true)} + > + Delete + + + + + ); +}; diff --git a/src/components/evaluation-start-table/columns.tsx b/src/components/evaluation-start-table/columns.tsx new file mode 100644 index 0000000..928042a --- /dev/null +++ b/src/components/evaluation-start-table/columns.tsx @@ -0,0 +1,88 @@ +"use client"; +import { DataTableColumnHeader } from "./data-table-column-header"; +import { CellAction } from "./cell-action"; +import { ColumnDef } from "@tanstack/react-table"; +import { Checkbox } from "@/components/ui/checkbox"; +// import { formatDate } from "@/lib/format-date"; +import { EvaluationStart } from "@/types/evaluation-start"; + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-[2px]" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-[2px]" + /> + ), + enableSorting: false, + enableHiding: false, + }, + + { + accessorKey: "fullName", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return

{row.getValue("fullName")}

; + }, + }, + + { + accessorKey: "email", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return

{row.getValue("email")}

; + }, + }, + + { + accessorKey: "status", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return

{row.getValue("status")}

; + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, + + // { + // accessorKey: "created_at", + // header: ({ column }) => ( + // + // ), + // cell: ({ row }) => { + // return

{formatDate(row.getValue("created_at"))}

; + // }, + // filterFn: (row, id, value) => { + // return value.includes(row.getValue(id)); + // }, + // }, + + { + id: "actions", + header: ({ column }) => ( + + ), + cell: ({ row }) => , + }, +]; diff --git a/src/components/evaluation-start-table/data-table-column-header.tsx b/src/components/evaluation-start-table/data-table-column-header.tsx new file mode 100644 index 0000000..85df45e --- /dev/null +++ b/src/components/evaluation-start-table/data-table-column-header.tsx @@ -0,0 +1,72 @@ +import { + ArrowDownIcon, + ArrowUpIcon, + CaretSortIcon, + EyeNoneIcon, + } from "@radix-ui/react-icons" + import { Column } from "@tanstack/react-table" + + import { cn } from "@/lib/utils" + import { Button } from "@/components/ui/button" + import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, + } from "@/components/ui/dropdown-menu" + + interface DataTableColumnHeaderProps + extends React.HTMLAttributes { + column: Column + title: string + } + + export function DataTableColumnHeader({ + column, + title, + className, + }: DataTableColumnHeaderProps) { + if (!column.getCanSort()) { + return
{title}
+ } + + + return ( +
+ + + + + + column.toggleSorting(false)}> + + Asc + + column.toggleSorting(true)}> + + Desc + + + column.toggleVisibility(false)}> + + Hide + + + +
+ ) + } \ No newline at end of file diff --git a/src/components/evaluation-start-table/data-table-faceted-filter.tsx b/src/components/evaluation-start-table/data-table-faceted-filter.tsx new file mode 100644 index 0000000..a5efee2 --- /dev/null +++ b/src/components/evaluation-start-table/data-table-faceted-filter.tsx @@ -0,0 +1,147 @@ +import * as React from "react" +import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons" +import { Column } from "@tanstack/react-table" + +import { cn } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, +} from "@/components/ui/command" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" +import { Separator } from "@/components/ui/separator" + +interface DataTableFacetedFilterProps { + column?: Column + title?: string + options: { + label: string + value: string + icon?: React.ComponentType<{ className?: string }> + }[] +} + +export function DataTableFacetedFilter({ + column, + title, + options, +}: DataTableFacetedFilterProps) { + const facets = column?.getFacetedUniqueValues() + const selectedValues = new Set(column?.getFilterValue() as string[]) + + return ( + + + + + + + + + No results found. + + {options.map((option) => { + const isSelected = selectedValues.has(option.value) + return ( + { + if (isSelected) { + selectedValues.delete(option.value) + } else { + selectedValues.add(option.value) + } + const filterValues = Array.from(selectedValues) + column?.setFilterValue( + filterValues.length ? filterValues : undefined + ) + }} + > +
+ +
+ {option.icon && ( + + )} + {option.label} + {facets?.get(option.value) && ( + + {facets.get(option.value)} + + )} + + ) + })} + + {selectedValues.size > 0 && ( + <> + + + column?.setFilterValue(undefined)} + className="justify-center text-center" + > + Clear filters + + + + )} + + + + + ) +} \ No newline at end of file diff --git a/src/components/evaluation-start-table/data-table-pagination.tsx b/src/components/evaluation-start-table/data-table-pagination.tsx new file mode 100644 index 0000000..3c5a1d9 --- /dev/null +++ b/src/components/evaluation-start-table/data-table-pagination.tsx @@ -0,0 +1,97 @@ +import { + ChevronLeftIcon, + ChevronRightIcon, + DoubleArrowLeftIcon, + DoubleArrowRightIcon, +} from "@radix-ui/react-icons"; +import { Table } from "@tanstack/react-table"; + +import { Button } from "@/components/ui/button"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +interface DataTablePaginationProps { + table: Table; +} + +export function DataTablePagination({ + table, +}: DataTablePaginationProps) { + return ( +
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+

Rows per page

+ +
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "} + {table.getPageCount()} +
+
+ + + + +
+
+
+ ); +} diff --git a/src/components/evaluation-start-table/data-table-toolbar.tsx b/src/components/evaluation-start-table/data-table-toolbar.tsx new file mode 100644 index 0000000..f977581 --- /dev/null +++ b/src/components/evaluation-start-table/data-table-toolbar.tsx @@ -0,0 +1,77 @@ +"use client"; + +import { Cross2Icon } from "@radix-ui/react-icons"; +import { Table } from "@tanstack/react-table"; + +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +// import { DataTableViewOptions } from "./components/data-table-view-options" + +import { DataTableFacetedFilter } from "./data-table-faceted-filter"; +import { DataTableViewOptions } from "./data-table-view-options"; +import { userFilterLabels } from "@/constants/data"; +import { EvaluationStart } from "@/types/evaluation-start"; + +interface DataTableToolbarProps { + table: Table; + data: EvaluationStart[]; +} + +export function DataTableToolbar({ + table, + data, +}: DataTableToolbarProps) { + const isFiltered = table.getState().columnFilters.length > 0; + + const statusFilterOptions = Array.from( + new Set(data.map((d) => d.status)) + ).map((v) => ({ + label: v, + value: v, + })); + + return ( +
+
+ + table.getColumn("fullName")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> + + table.getColumn("email")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> + + {table.getColumn("status") && ( + + )} + + {isFiltered && ( + + )} +
+ +
+ ); +} diff --git a/src/components/evaluation-start-table/data-table-view-options.tsx b/src/components/evaluation-start-table/data-table-view-options.tsx new file mode 100644 index 0000000..6d56347 --- /dev/null +++ b/src/components/evaluation-start-table/data-table-view-options.tsx @@ -0,0 +1,59 @@ +"use client" + +import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu" +import { MixerHorizontalIcon } from "@radix-ui/react-icons" +import { Table } from "@tanstack/react-table" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuLabel, + DropdownMenuSeparator, +} from "@/components/ui/dropdown-menu" + +interface DataTableViewOptionsProps { + table: Table +} + +export function DataTableViewOptions({ + table, +}: DataTableViewOptionsProps) { + return ( + + + + + + Toggle columns + + {table + .getAllColumns() + .filter( + (column) => + typeof column.accessorFn !== "undefined" && column.getCanHide() + ) + .map((column) => { + return ( + column.toggleVisibility(!!value)} + > + {column.id} + + ) + })} + + + ) +} \ No newline at end of file diff --git a/src/components/evaluation-start-table/data-table.tsx b/src/components/evaluation-start-table/data-table.tsx new file mode 100644 index 0000000..e0706db --- /dev/null +++ b/src/components/evaluation-start-table/data-table.tsx @@ -0,0 +1,132 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFacetedRowModel, + getFacetedUniqueValues, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; + +import { DataTablePagination } from "./data-table-pagination"; +import { DataTableToolbar } from "./data-table-toolbar"; +import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; +import { Organization } from "@/types/organization"; +import { EvaluationStart } from "@/types/evaluation-start"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; +} + +export function DataTable({ + columns, + data, +}: DataTableProps) { + const [rowSelection, setRowSelection] = React.useState({}); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [sorting, setSorting] = React.useState([]); + + const table = useReactTable({ + data, + columns, + state: { + sorting, + columnVisibility, + rowSelection, + columnFilters, + }, + enableRowSelection: true, + onRowSelectionChange: setRowSelection, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFacetedRowModel: getFacetedRowModel(), + getFacetedUniqueValues: getFacetedUniqueValues(), + }); + + return ( +
+ + {/*
*/} + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ + + {/*
*/} + +
+ ); +} diff --git a/src/components/evaluation-start-table/tools-table.tsx b/src/components/evaluation-start-table/tools-table.tsx new file mode 100644 index 0000000..8e0595b --- /dev/null +++ b/src/components/evaluation-start-table/tools-table.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { Heading } from "@/components/ui/heading"; +import { Separator } from "@/components/ui/separator"; +import React from "react"; +import { DataTable } from "./data-table"; +import { columns } from "./columns"; +import Link from "next/link"; +import { Plus } from "lucide-react"; +import { buttonVariants } from "@/components/ui/button"; +import { EvaluationStart } from "@/types/evaluation-start"; + +const ToolsTable = ({ evaluationData }: { evaluationData: EvaluationStart[] }) => { + return ( + <> +
+ + router.push(`/admin-dashboard/tools/add`)} + > + New Evaluation + +
+ + + + ); +}; + +export default ToolsTable; diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/config/nav.ts b/src/config/nav.ts index 7d2ad2a..dec64ac 100644 --- a/src/config/nav.ts +++ b/src/config/nav.ts @@ -12,6 +12,7 @@ import { GitCommitHorizontal, Key, LucideIcon, + Rocket, Ruler, Sparkles, Users, @@ -34,6 +35,11 @@ export const sideNavItems: GroupedNavItems[] = [ { group: "EVALUATION", items: [ + { + href: "/dashboard", + title: "Evaluation Start", + icon: Rocket, + }, { href: "/dashboard/new-analysis", title: "Create New Analysis", @@ -133,5 +139,3 @@ export const sideNavItems: GroupedNavItems[] = [ ], }, ]; - - diff --git a/src/constants/data.ts b/src/constants/data.ts index 5bc2ef3..fcca85f 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -1,6 +1,7 @@ import { Account } from "@/types/account"; import { ApiCommunication } from "@/types/api-communication"; import { Configuration } from "@/types/configuration"; +import { Evaluation } from "@/types/evaluation-start"; import { Organization } from "@/types/organization"; import { User } from "@/types/user"; import { UserRound, UserRoundCheck } from "lucide-react"; @@ -178,3 +179,18 @@ export const dummyCourseAdmin = [ created_at: new Date().toISOString(), }, ]; + +export const dummyEvaluation: Evaluation[] = [ + { + id: 1, + fullName: "John Doe", + email: "johndoe@gmail.com", + status: "finished", + }, + { + id: 2, + fullName: "Don Abramov", + email: "don@gmail.com", + status: "unfinished", + }, +]; diff --git a/src/types/evaluation-start.ts b/src/types/evaluation-start.ts new file mode 100644 index 0000000..7d42da6 --- /dev/null +++ b/src/types/evaluation-start.ts @@ -0,0 +1,6 @@ +export interface EvaluationStart { + id: number; + fullName: string; + email: string; + status: string; +}