create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

package/templates/default/src/components/ui/data-table-view-options.tsx

@@ -1,50 +1,50 @@
-'use client'
-
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
-import { Table } from '@tanstack/react-table'
-import { Settings2 } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu'
-
-interface DataTableViewOptionsProps<TData> {
-  table: Table<TData>
-}
-
-export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
-          <Settings2 />
-          View
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[150px]">
-        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
-          .map(column => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className="capitalize"
-                checked={column.getIsVisible()}
-                onCheckedChange={value => column.toggleVisibility(!!value)}
-              >
-                {column.id}
-              </DropdownMenuCheckboxItem>
-            )
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+'use client'
+
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
+import { Table } from '@tanstack/react-table'
+import { Settings2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+          <Settings2 />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+          .map(column => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={value => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/default/src/components/ui/data-table.tsx

@@ -1,261 +1,261 @@
-'use client'
-
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  SortingState,
-  getSortedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  ColumnFiltersState,
-  PaginationState,
-} from '@tanstack/react-table'
-
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Input } from '@/components/ui/input'
-import { useState } from 'react'
-import { DataTablePagination } from './data-table-pagination'
-import { DataTableViewOptions } from './data-table-view-options'
-import { Eye, Pencil, PlusCircle, Search } from 'lucide-react'
-import { Button } from './button'
-import Link from 'next/link'
-import { toast } from '@/hooks/use-toast'
-import { ActionResponse } from '@/types/form/actionHandler'
-import DeletePrompt from '../user-prompt/delete-prompt'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from './dropdown-menu'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  filterColumn: string
-  filterPlaceholder: string
-  createLink?: string
-  modifyLink?: string
-  deleteAction?: (id: string[]) => Promise<ActionResponse>
-  multiOptionCreateButton?: boolean
-  createButtonOptions?: {
-    label: string
-    link: string
-    icon?: React.ReactNode
-  }[]
-  viewLink?: string
-  showSelectedRows?: boolean
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  filterColumn,
-  filterPlaceholder,
-  createLink,
-  multiOptionCreateButton,
-  createButtonOptions,
-  modifyLink,
-  viewLink,
-  deleteAction,
-  showSelectedRows = true,
-}: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [rowSelection, setRowSelection] = useState({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-
-  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      rowSelection,
-      pagination,
-    },
-    getRowId: (row, index) => {
-      // getRowId receives the raw data object directly, not a row object with .original
-      // Handle case where row might be undefined or null
-      if (!row || typeof row !== 'object') {
-        console.error('DataTable: getRowId received invalid row data', { row, index })
-        return `row-${index}` // Fallback using index
-      }
-      const id = (row as unknown as { id: string }).id
-      if (!id) {
-        console.error('DataTable: row data missing id property', { row, index })
-        return `row-${index}` // Fallback using index
-      }
-      return id
-    },
-  })
-
-  const deleteHandler = async () => {
-    const selectedIds = table.getSelectedRowModel().rows.map(row => (row.original as { id: string }).id)
-    if (deleteAction) {
-      const res = await deleteAction(selectedIds)
-      if (res.status === 200) {
-        toast({
-          title: 'Item(s) deleted successfully',
-        })
-      } else {
-        toast({
-          title: 'Error deleting item(s)',
-          description: res.message,
-        })
-      }
-    }
-  }
-
-  return (
-    <div className="mb-10">
-      <div className="flex justify-end">
-        <div className="mb-4 flex gap-2">
-          {createLink && (
-            <Button variant="default" size="icon" asChild>
-              <Link href={createLink}>
-                <PlusCircle className="h-4 w-4" />
-              </Link>
-            </Button>
-          )}
-          {multiOptionCreateButton && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="default" size="icon">
-                  <PlusCircle className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuLabel>Create Test Case</DropdownMenuLabel>
-                {createButtonOptions?.map(option => (
-                  <DropdownMenuItem key={option.label} asChild>
-                    <Link href={option.link}>
-                      {option.icon}
-                      {option.label}
-                    </Link>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {modifyLink && (
-            (() => {
-              const disabled =
-                table.getSelectedRowModel().rows.length === 0 || table.getSelectedRowModel().rows.length > 1
-              const href = `${modifyLink}/${disabled ? '' : (table.getSelectedRowModel().rows[0].original as { id: string }).id}`
-              return disabled ? (
-                <Button variant="outline" size="icon" disabled>
-                  <Pencil className="h-4 w-4" />
-                </Button>
-              ) : (
-                <Button variant="outline" size="icon" asChild>
-                  <Link href={href}>
-                    <Pencil className="h-4 w-4" />
-                  </Link>
-                </Button>
-              )
-            })()
-          )}
-          {viewLink && (
-            (() => {
-              const disabled =
-                table.getSelectedRowModel().rows.length === 0 || table.getSelectedRowModel().rows.length > 1
-              const href = `${viewLink}/${disabled ? '' : (table.getSelectedRowModel().rows[0].original as { id: string }).id}`
-              return disabled ? (
-                <Button variant="outline" size="icon" disabled>
-                  <Eye className="h-4 w-4" />
-                </Button>
-              ) : (
-                <Button variant="outline" size="icon" asChild>
-                  <Link href={href}>
-                    <Eye className="h-4 w-4" />
-                  </Link>
-                </Button>
-              )
-            })()
-          )}
-          {deleteAction && (
-            <DeletePrompt
-              isDisabled={table.getSelectedRowModel().rows.length === 0}
-              dialogTitle="Delete Item"
-              dialogDescription="Please confirm your action"
-              confirmationText="Are you sure you want to delete the selected item(s)?"
-              deleteHandler={deleteHandler}
-            />
-          )}
-        </div>
-      </div>
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center">
-          <Search className="mr-2 h-6 w-6" />
-          <Input
-            placeholder={filterPlaceholder}
-            value={(table.getColumn(filterColumn)?.getFilterValue() as string) ?? ''}
-            onChange={event => table.getColumn(filterColumn)?.setFilterValue(event.target.value)}
-            className="max-w-sm"
-          />
-        </div>
-        <DataTableViewOptions table={table} />
-      </div>
-      <div className="mb-4">
-        <Table>
-          <TableHeader className="bg-white dark:bg-muted">
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id} className="font-bold dark:text-white">
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => {
-                const rowData = row.original as TData & { conflicts?: unknown[] }
-                const hasConflicts =
-                  rowData.conflicts && Array.isArray(rowData.conflicts) && rowData.conflicts.length > 0
-                return (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && 'selected'}
-                    className={hasConflicts ? 'bg-destructive/10' : ''}
-                  >
-                    {row.getVisibleCells().map(cell => (
-                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                    ))}
-                  </TableRow>
-                )
-              })
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <DataTablePagination table={table} showSelectedRows={showSelectedRows} />
-    </div>
-  )
-}
+'use client'
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  SortingState,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  ColumnFiltersState,
+  PaginationState,
+} from '@tanstack/react-table'
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
+import { useState } from 'react'
+import { DataTablePagination } from './data-table-pagination'
+import { DataTableViewOptions } from './data-table-view-options'
+import { Eye, Pencil, PlusCircle, Search } from 'lucide-react'
+import { Button } from './button'
+import Link from 'next/link'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import DeletePrompt from '../user-prompt/delete-prompt'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  filterColumn: string
+  filterPlaceholder: string
+  createLink?: string
+  modifyLink?: string
+  deleteAction?: (id: string[]) => Promise<ActionResponse>
+  multiOptionCreateButton?: boolean
+  createButtonOptions?: {
+    label: string
+    link: string
+    icon?: React.ReactNode
+  }[]
+  viewLink?: string
+  showSelectedRows?: boolean
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  filterColumn,
+  filterPlaceholder,
+  createLink,
+  multiOptionCreateButton,
+  createButtonOptions,
+  modifyLink,
+  viewLink,
+  deleteAction,
+  showSelectedRows = true,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [rowSelection, setRowSelection] = useState({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      pagination,
+    },
+    getRowId: (row, index) => {
+      // getRowId receives the raw data object directly, not a row object with .original
+      // Handle case where row might be undefined or null
+      if (!row || typeof row !== 'object') {
+        console.error('DataTable: getRowId received invalid row data', { row, index })
+        return `row-${index}` // Fallback using index
+      }
+      const id = (row as unknown as { id: string }).id
+      if (!id) {
+        console.error('DataTable: row data missing id property', { row, index })
+        return `row-${index}` // Fallback using index
+      }
+      return id
+    },
+  })
+
+  const deleteHandler = async () => {
+    const selectedIds = table.getSelectedRowModel().rows.map(row => (row.original as { id: string }).id)
+    if (deleteAction) {
+      const res = await deleteAction(selectedIds)
+      if (res.status === 200) {
+        toast({
+          title: 'Item(s) deleted successfully',
+        })
+      } else {
+        toast({
+          title: 'Error deleting item(s)',
+          description: res.message,
+        })
+      }
+    }
+  }
+
+  return (
+    <div className="mb-10">
+      <div className="flex justify-end">
+        <div className="mb-4 flex gap-2">
+          {createLink && (
+            <Button variant="default" size="icon" asChild>
+              <Link href={createLink}>
+                <PlusCircle className="h-4 w-4" />
+              </Link>
+            </Button>
+          )}
+          {multiOptionCreateButton && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="default" size="icon">
+                  <PlusCircle className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>Create Test Case</DropdownMenuLabel>
+                {createButtonOptions?.map(option => (
+                  <DropdownMenuItem key={option.label} asChild>
+                    <Link href={option.link}>
+                      {option.icon}
+                      {option.label}
+                    </Link>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {modifyLink && (
+            (() => {
+              const disabled =
+                table.getSelectedRowModel().rows.length === 0 || table.getSelectedRowModel().rows.length > 1
+              const href = `${modifyLink}/${disabled ? '' : (table.getSelectedRowModel().rows[0].original as { id: string }).id}`
+              return disabled ? (
+                <Button variant="outline" size="icon" disabled>
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              ) : (
+                <Button variant="outline" size="icon" asChild>
+                  <Link href={href}>
+                    <Pencil className="h-4 w-4" />
+                  </Link>
+                </Button>
+              )
+            })()
+          )}
+          {viewLink && (
+            (() => {
+              const disabled =
+                table.getSelectedRowModel().rows.length === 0 || table.getSelectedRowModel().rows.length > 1
+              const href = `${viewLink}/${disabled ? '' : (table.getSelectedRowModel().rows[0].original as { id: string }).id}`
+              return disabled ? (
+                <Button variant="outline" size="icon" disabled>
+                  <Eye className="h-4 w-4" />
+                </Button>
+              ) : (
+                <Button variant="outline" size="icon" asChild>
+                  <Link href={href}>
+                    <Eye className="h-4 w-4" />
+                  </Link>
+                </Button>
+              )
+            })()
+          )}
+          {deleteAction && (
+            <DeletePrompt
+              isDisabled={table.getSelectedRowModel().rows.length === 0}
+              dialogTitle="Delete Item"
+              dialogDescription="Please confirm your action"
+              confirmationText="Are you sure you want to delete the selected item(s)?"
+              deleteHandler={deleteHandler}
+            />
+          )}
+        </div>
+      </div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center">
+          <Search className="mr-2 h-6 w-6" />
+          <Input
+            placeholder={filterPlaceholder}
+            value={(table.getColumn(filterColumn)?.getFilterValue() as string) ?? ''}
+            onChange={event => table.getColumn(filterColumn)?.setFilterValue(event.target.value)}
+            className="max-w-sm"
+          />
+        </div>
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="mb-4">
+        <Table>
+          <TableHeader className="bg-white dark:bg-muted">
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead key={header.id} className="font-bold dark:text-white">
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => {
+                const rowData = row.original as TData & { conflicts?: unknown[] }
+                const hasConflicts =
+                  rowData.conflicts && Array.isArray(rowData.conflicts) && rowData.conflicts.length > 0
+                return (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                    className={hasConflicts ? 'bg-destructive/10' : ''}
+                  >
+                    {row.getVisibleCells().map(cell => (
+                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                    ))}
+                  </TableRow>
+                )
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} showSelectedRows={showSelectedRows} />
+    </div>
+  )
+}