-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Jordan's requested changes to AdminTable branch.
- Loading branch information
1 parent
0dde260
commit 5022f13
Showing
28 changed files
with
683 additions
and
54 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
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
55 changes: 55 additions & 0 deletions
55
ui/src/components/table/admin-table/admin-table-skeleton.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,55 @@ | ||
| import { Skeleton } from '@/components/ui/skeleton'; | ||
| import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; | ||
| import AdminTableColumns from '@/components/table/admin-table/table-element/admin-table-columns'; | ||
|
|
||
| const AdminTableSkeleton = () => { | ||
| const pageSize = 7; // Average number of rows | ||
|
|
||
| return ( | ||
| <div className="mb-12"> | ||
| <div className="h-full flex flex-col md:flex-row md:justify-between pt-5 mb-4"> | ||
| <h1 className="text-[2rem] font-medium text-text-color text-center pt-3">Manage Admins</h1> | ||
| <div className="flex items-center space-x-2 md:w-60 lg:w-72"> | ||
| <Skeleton className="h-10 w-96 rounded-[0.25rem]" /> | ||
| <div className="hidden sm:block"> | ||
| <Skeleton className="h-10 w-10 rounded-[0.25rem]" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Table className="mb-4"> | ||
| <TableHeader> | ||
| <TableRow> | ||
| {AdminTableColumns.map((column) => ( | ||
| <TableHead | ||
| key={column.accessorKey} | ||
| className={`pl-[0.5rem]`} | ||
| > | ||
| <Skeleton className="h-5 w-36 rounded-[0.25rem]" /> | ||
| </TableHead> | ||
| ))} | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {Array.from(Array(pageSize), (_, index) => ( | ||
| <TableRow key={index}> | ||
| {AdminTableColumns.map((column) => ( | ||
| <TableCell | ||
| key={column.accessorKey} | ||
| className={/*`p-[0.5rem] | ||
| ${column.accessorKey !== 'name' ? 'hidden sm:table-cell' : ''}`*/ `p-[0.5rem]`} | ||
| > | ||
| <Skeleton className="h-5 w-72 rounded-[0.25rem]" /> | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| <div className="float-end"> | ||
| <Skeleton className="h-10 w-80 rounded-[0.25rem]" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminTableSkeleton; |
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,107 @@ | ||
| 'use client'; | ||
|
|
||
| import { | ||
| useReactTable, | ||
| flexRender, | ||
| getCoreRowModel, | ||
| getPaginationRowModel, | ||
| getFilteredRowModel, | ||
| getSortedRowModel | ||
| } from '@tanstack/react-table'; | ||
| import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table'; | ||
| import AdminTableColumns from '@/components/table/admin-table/table-element/admin-table-columns'; | ||
| import PaginationBar from '@/components/table/table-element/pagination-bar'; | ||
| import GlobalFilter from '@/components/table/table-element/global-filter'; | ||
| import SortArrow from '@/components/table/table-element/sort-arrow'; | ||
| import RemoveAdminsDialog from '@/components/table/admin-table/table-element/remove-admins-dialog'; | ||
| import {useState} from 'react'; | ||
| //import AddAdminsDialog from '@/components/table/adminTable/table-element/add-admins-dialog'; | ||
| import {MemberResult} from '@/lib/types'; | ||
| const pageSize = parseInt(process.env.NEXT_PUBLIC_PAGE_SIZE as string); | ||
|
|
||
| const AdminTable = ({ members } : { members: MemberResult[] }) => { | ||
| const [globalFilter, setGlobalFilter] = useState(''); | ||
| //const [adminInput, setAdminInput] = useState(''); | ||
| const [sorting, setSorting] = useState([]); | ||
|
|
||
| const table = useReactTable({ | ||
| columns: AdminTableColumns, | ||
| data: members, | ||
| getCoreRowModel: getCoreRowModel(), | ||
| getPaginationRowModel: getPaginationRowModel(), | ||
| getFilteredRowModel: getFilteredRowModel(), | ||
| getSortedRowModel: getSortedRowModel(), | ||
| state: { globalFilter, sorting }, | ||
| initialState: { pagination: { pageSize } }, | ||
| onGlobalFilterChange: setGlobalFilter, | ||
| onSortingChange: setSorting, | ||
| enableMultiSort: true | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex flex-col md:flex-row md:justify-between pt-5 mb-4"> | ||
| <h1 className="text-[2rem] font-medium text-text-color pt-3">Manage Admins</h1> | ||
| <div className="flex items-center space-x-2 md:w-60 lg:w-72"> | ||
| <GlobalFilter placeholder={'Filter Admins...'} filter={globalFilter} setFilter={setGlobalFilter}/> | ||
| </div> | ||
| </div> | ||
| <Table className = "relative overflow-x-auto"> | ||
| <TableHeader> | ||
| {table.getHeaderGroups().map((headerGroup) => ( | ||
| <TableRow key={headerGroup.id}> | ||
| {headerGroup.headers.map((header) => ( | ||
| <TableHead | ||
| key={header.id} | ||
| onClick={header.column.getToggleSortingHandler()} | ||
| className={`w-1/3`} | ||
| > | ||
| <div className="flex items-center"> | ||
| {flexRender(header.column.columnDef.header, header.getContext())} | ||
| <SortArrow direction={header.column.getIsSorted()} /> | ||
| </div> | ||
| </TableHead> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableHeader> | ||
| <TableBody> | ||
| {table.getRowModel().rows.map((row) => ( | ||
| <TableRow key={row.id}> | ||
| {row.getVisibleCells().map(cell => ( | ||
| <TableCell | ||
| key={cell.id} | ||
| width={cell.column.columnDef.size} | ||
| > | ||
| <div className="flex items-center px-2 overflow-hidden whitespace-nowrap"> | ||
| <div className="m-2"> | ||
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ||
| </div> | ||
| {cell.column.id === 'REMOVE' && ( | ||
| <RemoveAdminsDialog | ||
| uid={row.getValue('uid')} | ||
| name={row.getValue('name')} | ||
| uhUuid={row.getValue('uhUuid')} | ||
| /> | ||
| )} | ||
| </div> | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| <div className="grid grid-cols-2 items-center"> | ||
| <div> | ||
| {/*TODO: <AddAdmin input={adminInput} setInput={setAdminInput}/> | ||
| TODO: <AddAdminsDialog input={adminInput} setInput={setAdminInput}/>*/} | ||
| </div> | ||
| <div className="flex justify-end"> | ||
| <PaginationBar table={table}/> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminTable; |
50 changes: 50 additions & 0 deletions
50
ui/src/components/table/admin-table/table-element/add-admin.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,50 @@ | ||
| import {Input} from '@/components/ui/input' | ||
| import {Dispatch, SetStateAction} from 'react'; | ||
| import {Button} from '@/components/ui/button'; | ||
| import {addAdmin} from '@/actions/groupings-api'; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger | ||
| } from '@/components/ui/tooltip'; | ||
|
|
||
| interface InputProps { | ||
| input: string; | ||
| setInput: Dispatch<SetStateAction<string>>; | ||
| } | ||
|
|
||
| const handleClick = (input: string) => { | ||
| //TODO: create a condition where the admin list is checked for the uhid/uhUuid the user entered in. | ||
| //TODO: if it does not exist in the admin list, add the new admin to the UH Groupings admin list. | ||
| addAdmin(input); | ||
| }; | ||
| const AddAdmin = ({input, setInput}: InputProps) => ( | ||
| //Add tooltip | ||
| <div className="inline-flex" role="group"> | ||
| <Input | ||
| className="rounded-r-none" | ||
| placeholder={'UH Username or UH #'} | ||
| value={input || ''} | ||
|
|
||
| onChange={e => setInput(e.target.value)} | ||
| /> | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button | ||
| className="rounded-l-none" | ||
| onClick={() => handleClick(input)} | ||
| > | ||
| Add | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent> | ||
| <p>Add to admins</p> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </div> | ||
| ); | ||
|
|
||
| export default AddAdmin; |
Oops, something went wrong.