From 55dd272f2663edac74c30d64cb2a3fd2495f676a Mon Sep 17 00:00:00 2001 From: Pedro Cruz Date: Tue, 3 Sep 2024 22:28:09 -0300 Subject: [PATCH 1/3] =?UTF-8?q?Ordenacao=20funcioanando,=20fetch=20n=C3=A3?= =?UTF-8?q?o=20funcionando?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joa0V Co-authored-by: marcomarquesdc --- src/app/starting-points/page.tsx | 4 + .../tables/startingpoints.table.tsx | 141 +++++++++++------- src/lib/interfaces/startPoint.interface.ts | 1 + src/services/studioMaker.service.ts | 19 +++ 4 files changed, 113 insertions(+), 52 deletions(-) diff --git a/src/app/starting-points/page.tsx b/src/app/starting-points/page.tsx index af296b0..88181b0 100644 --- a/src/app/starting-points/page.tsx +++ b/src/app/starting-points/page.tsx @@ -31,6 +31,10 @@ const StartPointPage: React.FC = () => { const { data: session } = useSession(); const fetchStartPoints = async (): Promise => { const startPoints = await getStartPointsByUser(session?.user.id!); + + startPoints.sort((a, b) => a.order - b.order) + + setListStartPoints(startPoints); setFilteredStartPoints(startPoints); return startPoints; diff --git a/src/components/tables/startingpoints.table.tsx b/src/components/tables/startingpoints.table.tsx index dd39184..cd8bd5b 100644 --- a/src/components/tables/startingpoints.table.tsx +++ b/src/components/tables/startingpoints.table.tsx @@ -1,4 +1,10 @@ -import React from 'react'; +import React, { useMemo, useState, useEffect } from 'react'; +import { + useMaterialReactTable, + type MRT_ColumnDef, + MRT_TableContainer, + MRT_Row, +} from 'material-react-table'; import { Box, Table, @@ -15,6 +21,8 @@ import { 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[]; @@ -34,6 +42,7 @@ const StartpointTable: React.FC = ({ onMenuClose, onStartPointAction, }) => { + const [startPoint_, setStartPoint_] = useState(startPoints); const open = Boolean(anchorEl); const router = useRouter(); const [selectedStartPoint, setSelectedStartPoint] = @@ -49,58 +58,86 @@ 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: startPoint_, + enableRowOrdering: true, + muiRowDragHandleProps: ({ table }) => ({ + onDragEnd: async () => { + const { draggingRow, hoveredRow } = table.getState(); + if (hoveredRow && draggingRow) { + const newData = [...startPoint_]; + newData.splice( + (hoveredRow as MRT_Row).index, + 0, + newData.splice(draggingRow.index, 1)[0], + ); + setStartPoint_(newData); + await updateTrailOrder(newData); + } + }, + }), + }); + + const updateTrailOrder = async (updatedTrails: StartPoint[]) => { + updatedTrails.forEach((trail, index) => { + trail.order = index; + }); + + const response = await updatePointOrder(updatedTrails); + + if (response.error) { + toast.error('Error ao atualizar order da trilha'); + return; + } + toast.success('Order 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 => { From 8f7693fba4f17168bbf2598513cba5c9f54eefe3 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 4 Sep 2024 16:49:00 -0300 Subject: [PATCH 2/3] =?UTF-8?q?fix(#144):=20Ordena=C3=A7a=C3=B5=20Starting?= =?UTF-8?q?=20Points?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Arrumando a lógica de ordenação da home e start points Co-authored-by: Neoprot --- src/app/starting-points/page.tsx | 46 +++++++++++-------- src/components/home/homePage.tsx | 1 + .../tables/startingpoints.table.tsx | 26 ++++------- 3 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/app/starting-points/page.tsx b/src/app/starting-points/page.tsx index 88181b0..eb6ff72 100644 --- a/src/app/starting-points/page.tsx +++ b/src/app/starting-points/page.tsx @@ -29,12 +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[] = []; - startPoints.sort((a, b) => a.order - b.order) + 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; @@ -43,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); @@ -76,7 +78,7 @@ const StartPointPage: React.FC = () => { ); setFilteredStartPoints(filtered); } - }, [searchQuery, listStartPoints]); + }, [searchQuery, listStartPoints, setFilteredStartPoints]); const handleMenuOpen = ( event: React.MouseEvent, @@ -135,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 cd8bd5b..ff239ca 100644 --- a/src/components/tables/startingpoints.table.tsx +++ b/src/components/tables/startingpoints.table.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useEffect } from 'react'; +import React, { useMemo } from 'react'; import { useMaterialReactTable, type MRT_ColumnDef, @@ -7,18 +7,10 @@ import { } 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'; @@ -33,6 +25,7 @@ interface StartpointTableProps { ) => void; onMenuClose: () => void; onStartPointAction: (action: string) => void; + onUpdateStartPoints: OnUpdateStartPoints; } const StartpointTable: React.FC = ({ @@ -41,10 +34,9 @@ const StartpointTable: React.FC = ({ onMenuClick, onMenuClose, onStartPointAction, + onUpdateStartPoints, }) => { - const [startPoint_, setStartPoint_] = useState(startPoints); const open = Boolean(anchorEl); - const router = useRouter(); const [selectedStartPoint, setSelectedStartPoint] = React.useState(null); @@ -103,20 +95,22 @@ const StartpointTable: React.FC = ({ const table = useMaterialReactTable({ columns, - data: startPoint_, + data: startPoints, // Use diretamente `startPoints` aqui enableRowOrdering: true, + enablePagination: false, muiRowDragHandleProps: ({ table }) => ({ onDragEnd: async () => { const { draggingRow, hoveredRow } = table.getState(); if (hoveredRow && draggingRow) { - const newData = [...startPoint_]; + const newData = [...startPoints]; newData.splice( (hoveredRow as MRT_Row).index, 0, newData.splice(draggingRow.index, 1)[0], ); - setStartPoint_(newData); + await updateTrailOrder(newData); + onUpdateStartPoints(newData); } }, }), @@ -130,10 +124,10 @@ const StartpointTable: React.FC = ({ const response = await updatePointOrder(updatedTrails); if (response.error) { - toast.error('Error ao atualizar order da trilha'); + toast.error('Erro ao atualizar ordem da trilha'); return; } - toast.success('Order da trilha atualizada com sucesso'); + toast.success('Ordem da trilha atualizada com sucesso'); }; return ( From 81f706342d03687897516bed2240977087ae473e Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 4 Sep 2024 16:53:51 -0300 Subject: [PATCH 3/3] =?UTF-8?q?fix(#144):=20Estiliza=C3=A7=C3=A3o=20da=20s?= =?UTF-8?q?tartingPointsTable=20>>=20>>=20Arrumando=20estiliza=C3=A7=C3=A3?= =?UTF-8?q?o=20da=20startingPointsTable=20>>=20>>=20>>=20Co-authored-by:?= =?UTF-8?q?=20Neoprot=20=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tables/startingpoints.table.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/tables/startingpoints.table.tsx b/src/components/tables/startingpoints.table.tsx index ff239ca..31bbf91 100644 --- a/src/components/tables/startingpoints.table.tsx +++ b/src/components/tables/startingpoints.table.tsx @@ -95,7 +95,7 @@ const StartpointTable: React.FC = ({ const table = useMaterialReactTable({ columns, - data: startPoints, // Use diretamente `startPoints` aqui + data: startPoints, enableRowOrdering: true, enablePagination: false, muiRowDragHandleProps: ({ table }) => ({ @@ -131,7 +131,9 @@ const StartpointTable: React.FC = ({ }; return ( - + + + ); };