-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
18ade66
commit bb0fa5e
Showing
37 changed files
with
2,491 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
...cation-pages)/org/[organizationId]/(specific-organization-pages)/TeamsLoadingFallback.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Card } from '@/components/ui/card' | ||
| import { Skeleton } from '@/components/ui/skeleton' | ||
|
|
||
| type Props = { | ||
| quantity: number | ||
| } | ||
|
|
||
| const TeamsLoadingFallback = ({ quantity }: Props) => { | ||
| return ( | ||
| <div className='flex w-full gap-4 p-4 overflow-x-auto mt-6'> | ||
| {[...Array(quantity)].map((_, i) => ( | ||
| <Card className="flex flex-col items-start p-4 bg-card min-h-32 rounded-lg shadow w-72" key={`${i}skeleton`}> | ||
| <Skeleton className="h-6 w-24 mb-2" /> | ||
| <Skeleton className="h-6 w-36 mb-1" /> | ||
| <Skeleton className="h-4 w-16" /> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default TeamsLoadingFallback |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
...ages)/org/[organizationId]/(specific-organization-pages)/teams/OrganizationTeamsTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| "use client"; | ||
| import { T } from '@/components/ui/Typography'; | ||
| import { Card } from '@/components/ui/card'; | ||
| import { | ||
| Table, | ||
| TableBody, | ||
| TableCell, | ||
| TableHead, | ||
| TableHeader, | ||
| TableRow, | ||
| } from '@/components/ui/table'; | ||
| import type { Tables } from '@/lib/database.types'; | ||
| import { | ||
| flexRender, | ||
| getCoreRowModel, | ||
| getFilteredRowModel, | ||
| getPaginationRowModel, | ||
| getSortedRowModel, | ||
| useReactTable, | ||
| type ColumnDef, | ||
| type SortingState, | ||
| } from '@tanstack/react-table'; | ||
| import moment from 'moment'; | ||
| import Link from 'next/link'; | ||
| import { useState } from 'react'; | ||
|
|
||
| type Team = Tables<'teams'>; | ||
|
|
||
| type Props = { | ||
| teams: Team[]; | ||
| }; | ||
|
|
||
| export function OrganizationTeamsTable({ teams }: Props) { | ||
| const columns: ColumnDef<Team>[] = [ | ||
| { | ||
| accessorKey: 'name', | ||
| header: 'Name', | ||
| cell: ({ row }) => ( | ||
| <Link href={`/org/${row.original.organization_id}/team/${row.original.id}`} className='hover:underline'> | ||
| {row.getValue('name')} | ||
| </Link> | ||
| ), | ||
| }, | ||
| { | ||
| accessorKey: 'created_at', | ||
| header: 'Created At', | ||
| cell: ({ row }) => { | ||
| const date = moment(row.getValue('created_at') as string); | ||
| return date.format('MMM DD YYYY, HH:mm [hrs]'); | ||
| }, | ||
| }, | ||
| { | ||
| accessorKey: 'by', | ||
| header: 'By', | ||
| cell: ({ row }) => row.getValue('by') || 'unknown', | ||
| }, | ||
| ]; | ||
|
|
||
| const [sorting, setSorting] = useState<SortingState>([]); | ||
| const table = useReactTable({ | ||
| data: teams, | ||
| columns, | ||
| getCoreRowModel: getCoreRowModel(), | ||
| getSortedRowModel: getSortedRowModel(), | ||
| getPaginationRowModel: getPaginationRowModel(), | ||
| getFilteredRowModel: getFilteredRowModel(), | ||
| onSortingChange: setSorting, | ||
| state: { | ||
| sorting, | ||
| }, | ||
| }); | ||
|
|
||
| if (teams.length === 0) { | ||
| return ( | ||
| <Card> | ||
| <div className='flex justify-center w-full items-center h-[180px]'> | ||
| <T.Subtle>No teams found</T.Subtle> | ||
| </div> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="w-full"> | ||
| <Card className="p-4"> | ||
| <Table> | ||
| <TableHeader> | ||
| {table.getHeaderGroups().map(headerGroup => ( | ||
| <TableRow key={headerGroup.id}> | ||
| {headerGroup.headers.map(header => ( | ||
| <TableHead key={header.id} className="text-left font-normal text-sm text-muted-foreground"> | ||
| {header.isPlaceholder | ||
| ? null | ||
| : flexRender( | ||
| header.column.columnDef.header, | ||
| header.getContext() | ||
| )} | ||
| </TableHead> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableHeader> | ||
| <TableBody> | ||
| {table.getRowModel().rows.map(row => ( | ||
| <TableRow key={row.id} className="hover:bg-muted/50"> | ||
| {row.getVisibleCells().map(cell => ( | ||
| <TableCell key={cell.id} className="py-2"> | ||
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| } |
22 changes: 22 additions & 0 deletions
22
...es)/org/[organizationId]/(specific-organization-pages)/teams/TeamsTableWithPagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Pagination } from "@/components/Pagination"; | ||
| import { getTeams, getTeamsTotalCount } from "@/data/user/teams"; | ||
| import { projectsfilterSchema } from "@/utils/zod-schemas/params"; | ||
| import { OrganizationTeamsTable } from "./OrganizationTeamsTable"; | ||
|
|
||
| export async function TeamsTableWithPagination({ | ||
| organizationId, | ||
| searchParams, | ||
| }: { organizationId: string; searchParams: unknown }) { | ||
| const filters = projectsfilterSchema.parse(searchParams); | ||
| const [teams, totalPages] = await Promise.all([ | ||
| getTeams({ ...filters, organizationId }), | ||
| getTeamsTotalCount({ ...filters, organizationId }), | ||
| ]); | ||
|
|
||
| return ( | ||
| <> | ||
| <OrganizationTeamsTable teams={teams} /> | ||
| <Pagination totalPages={totalPages} /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.