Untitled
Anis
plain_text
a year ago
6.6 kB
3
Indexable
'use client'; import { useGetLiveMatchesQuery } from '@/features/super-admin/live-match/liveMatchApi'; import { ColorScheme, MantineProvider, useMantineTheme } from '@mantine/core'; import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'; import moment from 'moment'; import { useTheme } from 'next-themes'; import Image from 'next/image'; import { useEffect, useMemo, useState } from 'react'; import LiveMatchActions from './LiveMatchActions'; export default function LiveMatchIndex() { const { theme } = useTheme(); const globalTheme = useMantineTheme(); const [finalData, setFinalData] = useState([]); const [finalDataLoading, setFinalDataLoading] = useState(true); const { data: liveMatches, isLoading, isError, isFetching, } = useGetLiveMatchesQuery(undefined); useEffect(() => { if (!isLoading && !isError) { setFinalData(liveMatches?.data || []); setFinalDataLoading(false); } }, [isError, isLoading, liveMatches]); const columns = useMemo( () => [ { accessorKey: 'team_one_name', header: 'Team One', id: 'team_one_image', Cell: ({ row }) => ( <div className="flex items-center"> {row?.original?.team_one_image ? ( <Image className="h-10 w-10 rounded-full" src={row?.original?.team_one_image} width={0} height={0} sizes="100vw" alt={row?.original?.team_one_name} /> ) : ( <Image src="/default-placeholder.png" width={0} height={0} sizes="100vw" className="h-10 w-10 rounded-full" alt={row?.original?.team_one_name} /> )} <span className="ml-2">{row?.original?.team_one_name}</span> </div> ), }, { accessorKey: 'team_two_name', header: 'Team Two', id: 'team_two_image', Cell: ({ row }) => ( <div className="flex items-center"> {row?.original?.team_two_image ? ( <Image className="h-10 w-10 rounded-full" src={row?.original?.team_two_image} width={0} height={0} sizes="100vw" alt={row?.original?.team_two_name} /> ) : ( <Image src="/default-placeholder.png" width={0} height={0} sizes="100vw" className="h-10 w-10 rounded-full" alt={row?.original?.team_two_name} /> )} <span className="ml-2">{row?.original?.team_two_name}</span> </div> ), }, { accessorKey: 'match_title', header: 'Title & Time', mantineTableHeadCellProps: { align: 'center', }, mantineTableBodyCellProps: { align: 'center', }, Cell: ({ row }) => ( <div> <p className="mb-1 text-center text-sm font-medium"> {row.original.match_title} </p> <p className="text-center"> {moment(row.original.time).format('MMMM Do YYYY / h:mm')} </p> </div> ), }, { accessorKey: 'status', header: 'Status', columnDefType: 'display', mantineTableHeadCellProps: { align: 'center', }, mantineTableBodyCellProps: { align: 'center', }, Cell: ({ row }) => { return row.original.status == '1' ? ( <span className="badge rounded-full bg-success">Active</span> ) : ( <span className="bg-danger badge rounded-full">Inactive</span> ); }, }, { id: 'edit', header: 'Action', columnDefType: 'display', enableColumnOrdering: false, Cell: ({ row }) => ( <div> <LiveMatchActions id={row.original.id} title={`Delete Confirmation`} description={`Are you sure you want to delete this "${row.original.match_title}" match?`} /> </div> ), mantineTableHeadCellProps: { align: 'center', }, mantineTableBodyCellProps: { align: 'center', }, }, ], [] ); const table = useMantineReactTable({ columns, data: finalData, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.) paginationDisplayMode: 'pages', mantinePaginationProps: { rowsPerPageOptions: ['5', '10', '20', '50', '100'], color: 'rgb(56, 114, 250)', withEdges: true, }, rowCount: finalData.length as number, initialState: { density: 'xs', pagination: { pageSize: 10, pageIndex: 0, }, }, enableDensityToggle: false, // enableFilters: false, // enableFullScreenToggle: false, // enableColumnVirtualization: false, // enableRowNumbers: true, // enablePinning: true, state: { isLoading: finalDataLoading, showProgressBars: isFetching }, enableRowDragging: true, enableRowOrdering: true, enableSorting: false, autoResetPageIndex: false, mantineRowDragHandleProps: ({ table }) => ({ onDragEnd: () => { const { draggingRow, hoveredRow } = table.getState(); // console.log('draggingRow: ', draggingRow); // console.log('hoveredRow: ', hoveredRow); let copiedArray = [...finalData]; const elementToMove = copiedArray.splice(draggingRow.index, 1)[0]; copiedArray.splice(hoveredRow.index, 0, elementToMove); const updatedArray = copiedArray.map((obj, index) => ({ ...obj, position: index + 1, })); // console.log('updatedArray: ', updatedArray); setFinalData(updatedArray); }, }), }); return ( <MantineProvider theme={{ ...globalTheme, primaryShade: 5, colorScheme: (theme as ColorScheme) || 'light', }} > <MantineReactTable table={table} /> </MantineProvider> ); }
Editor is loading...
Leave a Comment