diff --git a/src/app/starting-points/page.tsx b/src/app/starting-points/page.tsx index af296b0..eb6ff72 100644 --- a/src/app/starting-points/page.tsx +++ b/src/app/starting-points/page.tsx @@ -29,8 +29,29 @@ import { UpdateStartPointForm } from '@/components/forms/editStartPoint.form'; const StartPointPage: React.FC = () => { const { data: session } = useSession(); + const [listStartPoints, setListStartPoints] = useState([]); + const [filteredStartPoints, setFilteredStartPoints] = useState([]); + const [searchQuery, setSearchQuery] = useState(''); + + const [selectedStartPoint, setSelectedStartPoint] = + useState(null); + const [anchorEl, setAnchorEl] = useState(null); + const [exclusionDialogOpen, setExclusionDialogOpen] = + useState(false); + const [editionDialogOpen, setEditionDialogOpen] = useState(false); + const [createDialogOpen, setCreateDialogOpen] = useState(false); + const fetchStartPoints = async (): Promise => { - const startPoints = await getStartPointsByUser(session?.user.id!); + let startPoints: StartPoint[] = []; + + if (session?.user.role === UserRole.ADMIN) { + startPoints = await getStartPoints(); + } else { + startPoints = await getStartPointsByUser(session?.user.id!); + } + + startPoints.sort((a, b) => a.order - b.order); + setListStartPoints(startPoints); setFilteredStartPoints(startPoints); return startPoints; @@ -39,27 +60,12 @@ const StartPointPage: React.FC = () => { const { data = [], isLoading, - error, } = useQuery({ queryKey: ['startpoints', session?.user.id], queryFn: fetchStartPoints, }); - const [listStartPoints, setListStartPoints] = useState([]); - const [filteredStartPoints, setFilteredStartPoints] = useState( - [], - ); - const [searchQuery, setSearchQuery] = useState(''); - - const [selectedStartPoint, setSelectedStartPoint] = - useState(null); - const [anchorEl, setAnchorEl] = useState(null); - const [exclusionDialogOpen, setExclusionDialogOpen] = - useState(false); - const [editionDialogOpen, setEditionDialogOpen] = useState(false); - const [createDialogOpen, setCreateDialogOpen] = useState(false); - useEffect(() => { if (searchQuery === '') { setFilteredStartPoints(listStartPoints); @@ -72,7 +78,7 @@ const StartPointPage: React.FC = () => { ); setFilteredStartPoints(filtered); } - }, [searchQuery, listStartPoints]); + }, [searchQuery, listStartPoints, setFilteredStartPoints]); const handleMenuOpen = ( event: React.MouseEvent, @@ -131,6 +137,11 @@ const StartPointPage: React.FC = () => { ); } + const updateStartPoints = (updatedStartPoints: StartPoint[]) => { + setListStartPoints(updatedStartPoints); + setFilteredStartPoints(updatedStartPoints); + }; + return ( { onMenuClick={handleMenuOpen} onMenuClose={handleMenuClose} onStartPointAction={handleStartPointAction} + onUpdateStartPoints={updateStartPoints} /> setCreateDialogOpen(true)}> diff --git a/src/components/home/homePage.tsx b/src/components/home/homePage.tsx index ff83004..bfd5f22 100644 --- a/src/components/home/homePage.tsx +++ b/src/components/home/homePage.tsx @@ -40,6 +40,7 @@ const HomePrincipalPage = () => { const { fetchPoints } = JourneyService(); const allPoints = await fetchPoints(); + allPoints.sort((a, b) => a.order - b.order); setAllPoints(allPoints); }; loadPoints(); diff --git a/src/components/tables/startingpoints.table.tsx b/src/components/tables/startingpoints.table.tsx index dd39184..31bbf91 100644 --- a/src/components/tables/startingpoints.table.tsx +++ b/src/components/tables/startingpoints.table.tsx @@ -1,20 +1,20 @@ -import React from 'react'; +import React, { useMemo } from 'react'; +import { + useMaterialReactTable, + type MRT_ColumnDef, + MRT_TableContainer, + MRT_Row, +} from 'material-react-table'; import { Box, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Paper, IconButton, Menu, MenuItem, } from '@mui/material'; -import { useRouter } from 'next/navigation'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import { StartPoint } from '@/lib/interfaces/startPoint.interface'; +import { updatePointOrder } from '@/services/studioMaker.service'; +import { toast } from 'sonner'; interface StartpointTableProps { startPoints: StartPoint[]; @@ -25,6 +25,7 @@ interface StartpointTableProps { ) => void; onMenuClose: () => void; onStartPointAction: (action: string) => void; + onUpdateStartPoints: OnUpdateStartPoints; } const StartpointTable: React.FC = ({ @@ -33,9 +34,9 @@ const StartpointTable: React.FC = ({ onMenuClick, onMenuClose, onStartPointAction, + onUpdateStartPoints, }) => { const open = Boolean(anchorEl); - const router = useRouter(); const [selectedStartPoint, setSelectedStartPoint] = React.useState(null); @@ -49,57 +50,89 @@ const StartpointTable: React.FC = ({ setSelectedStartPoint(startPoint); }; + const columns = useMemo[]>( + () => [ + { + accessorKey: 'name', + header: 'Nome', + }, + { + accessorKey: 'actions', + header: '', + enableColumnFilter: false, + Cell: ({ row }: { row: { original: StartPoint } }) => ( + <> + { + onMenuClick(e, row.original); + setSelectedStartPoint(row.original); + }} + color="primary" + > + + + + handleMenuItemClick('editar')}> + Editar Trilha + + handleMenuItemClick('gerenciar')}> + Gerenciar Trilha + + handleMenuItemClick('excluir')}> + Excluir + + + + ), + }, + ], + [anchorEl, onMenuClick, onMenuClose, handleMenuItemClick], + ); + + const table = useMaterialReactTable({ + columns, + data: startPoints, + enableRowOrdering: true, + enablePagination: false, + muiRowDragHandleProps: ({ table }) => ({ + onDragEnd: async () => { + const { draggingRow, hoveredRow } = table.getState(); + if (hoveredRow && draggingRow) { + const newData = [...startPoints]; + newData.splice( + (hoveredRow as MRT_Row).index, + 0, + newData.splice(draggingRow.index, 1)[0], + ); + + await updateTrailOrder(newData); + onUpdateStartPoints(newData); + } + }, + }), + }); + + const updateTrailOrder = async (updatedTrails: StartPoint[]) => { + updatedTrails.forEach((trail, index) => { + trail.order = index; + }); + + const response = await updatePointOrder(updatedTrails); + + if (response.error) { + toast.error('Erro ao atualizar ordem da trilha'); + return; + } + toast.success('Ordem da trilha atualizada com sucesso'); + }; + return ( - - - - - Nome - Descrição - - - - - {startPoints.map((startPoint) => ( - - {startPoint.name} - {startPoint.description} - - handleItem(e, startPoint)} - color="primary" - > - - - - handleMenuItemClick('editar')}> - Editar Ponto de partida - - - router.push(`/journey/${selectedStartPoint?._id}`) - } - > - Gerenciar Jornadas - - handleMenuItemClick('excluir')} - sx={{ color: 'crimson' }} - > - Excluir - - - - - ))} - -
-
+
); }; diff --git a/src/lib/interfaces/startPoint.interface.ts b/src/lib/interfaces/startPoint.interface.ts index 42db8e4..3c5f21e 100644 --- a/src/lib/interfaces/startPoint.interface.ts +++ b/src/lib/interfaces/startPoint.interface.ts @@ -5,4 +5,5 @@ export interface StartPoint { user: string; createdAt: string; updatedAt: string; + order: number; } diff --git a/src/services/studioMaker.service.ts b/src/services/studioMaker.service.ts index d24b6fc..ce5f5b5 100644 --- a/src/services/studioMaker.service.ts +++ b/src/services/studioMaker.service.ts @@ -325,6 +325,25 @@ export const updateTrailsOrder = async ( } }; + +export const updatePointOrder = async ( + updatedPoints: StartPoint[], +): Promise => { + try { + const response = await studioMakerApi.patch('/points/update-point-order', { + points: updatedPoints, + }); + console.log('Points updated:', response.data); + return { + data: response.data, + }; + } catch (error) { + console.error('Failed to update points', error); + return { error: error }; + } +}; + + export const updateJourneysOrder = async ( updatedTrails: Journey[], ): Promise => {