From 3b19cd7ed54965bc88b1ee0fd4478a4aa50b0717 Mon Sep 17 00:00:00 2001 From: GUSTAVO PIZATTO Date: Tue, 5 Aug 2025 08:02:54 -0300 Subject: [PATCH] Update index.jsx Comentado --- mapcon/pages/mapcon/usuario/index.jsx | 110 +++++++++++++------------- 1 file changed, 53 insertions(+), 57 deletions(-) diff --git a/mapcon/pages/mapcon/usuario/index.jsx b/mapcon/pages/mapcon/usuario/index.jsx index 0ca0004..490f754 100644 --- a/mapcon/pages/mapcon/usuario/index.jsx +++ b/mapcon/pages/mapcon/usuario/index.jsx @@ -1,30 +1,41 @@ +// Importações principais do React e hooks import React, { useEffect, useRef, useState } from 'react'; +// Importa o componente de CRUD da biblioteca customizada import TableCrud from '../../../lib/front/cruddatatable/datatable'; +// Importa o componente de coluna do PrimeReact DataTable import { Column } from 'primereact/column'; +// Hook de navegação do Next.js import { useRouter } from 'next/router' +// Cliente HTTP para chamadas à API import axios from 'axios'; +// Componente de toolbar reutilizável import ToolbarMapCon from '../../../components/toolbar_mapcon'; +// Componente de loading import Loading from '../../../components/loading/loading'; +// Hook para obter a sessão do usuário autenticado import { getSession } from 'next-auth/react'; +// Componentes de formulário e UI do PrimeReact import { Dialog } from 'primereact/dialog'; import { Dropdown } from 'primereact/dropdown'; import { useForm, Controller } from "react-hook-form"; import { Button } from 'primereact/button'; import { InputText } from 'primereact/inputtext'; import { confirmDialog, ConfirmDialog } from 'primereact/confirmdialog'; -import {Password} from 'primereact/password'; +import { Password } from 'primereact/password'; +// Componente principal da página de usuários export default function UsuarioPage(props) { - const router = useRouter() + // Estados de visibilidade dos modais const [showForm, setshowForm] = useState({ visible: false }) const [loading, setloading] = useState(true) const [showSenhaForm, setshowSenhaForm] = useState({ visible: false }) - // Para conseguir atualizar datatable + // Referência para acessar funções do filho (datatable) const childRef = useRef(); + // Função que valida a sessão const login = async () => { const session = await getSession(); if (!session) { @@ -32,17 +43,19 @@ export default function UsuarioPage(props) { } else { setloading(false); } - }; - - useEffect(() => { - login(); - }, []); + }; + // Verifica a sessão ao montar o componente + useEffect(() => { + login(); + }, []); + // Quando botão de adicionar é clicado async function addButtonClicked(e) { setshowForm({ visible: true }) } + // Quando botão de editar é clicado async function editButtonClicked(row) { const session = await getSession(); const r = await axios.get('/api/mapcon/usuario', { @@ -52,15 +65,13 @@ export default function UsuarioPage(props) { perfil: session.user.perfil } }) - setshowForm({ visible: true, data: r.data, }) - } - + // Confirmação para excluir dados async function deleteButtonClicked(e, search) { confirmDialog({ message: e.length > 1 ? 'Tem certeza que deseja remover os dados selecionados?' : 'Tem certeza que deseja remover o dado selecionado?', @@ -69,10 +80,10 @@ export default function UsuarioPage(props) { accept: () => removeRows(e), acceptLabel: 'Sim', rejectLabel: 'Não' - // reject: () => rejectFunc() }); } + // Exclui as linhas selecionadas async function removeRows(e) { const session = await getSession(); for (const item of e) { @@ -87,7 +98,7 @@ export default function UsuarioPage(props) { childRef.current.updateDatatable() } - // Essa function atualiza fecha o dialog e atualiza o datatable o form tiver atualizado + // Fecha o modal de formulário function closeFormDialog(update) { setshowForm(false) if (update) { @@ -95,6 +106,7 @@ export default function UsuarioPage(props) { } } + // Abre modal de atualização de senha async function openSenhaDialog(row) { setshowSenhaForm({ visible: true, @@ -102,15 +114,17 @@ export default function UsuarioPage(props) { }) } + // Fecha o modal de senha function closeSenhaDialog(update) { setshowSenhaForm(false) } - // Filtros + // Filtros da datatable const filters = [ { label: 'Username', value: 'usu_login', types: ['contain', 'equal'] }, ]; + // Coluna de ações (botão para atualizar senha) function actionBodyTemplate(rowData) { return ( @@ -120,6 +134,7 @@ export default function UsuarioPage(props) { ); } + // Renderização principal return (loading ? :
@@ -134,10 +149,8 @@ export default function UsuarioPage(props) { onEditButtonClicked={editButtonClicked} onDeleteButtonClicked={deleteButtonClicked} url='/api/mapcon/usuario'> - -
@@ -149,12 +162,10 @@ export default function UsuarioPage(props) { } /* - Dialog que permite atualizar a situação de um cadastro + Componente do dialog para atualizar a senha do usuário */ function UsuarioSenhaForm(props) { - // const { control, watch, handleSubmit, errors } = useForm({ defaultValues: props.showForm.values }); - const { watch, handleSubmit, control, formState, reset } = useForm({ defaultValues: props.showForm.values }); - + const { watch, handleSubmit, control } = useForm({ defaultValues: props.showForm.values }); const watchSenha = watch('usu_senha') const onSubmit = async data => { @@ -169,20 +180,16 @@ function UsuarioSenhaForm(props) { }, num_seq_usuario: props.showForm.num }) - props.closeForm(true) - } return ( props.closeForm(false)}>
- -
+
- // } />
@@ -192,7 +199,6 @@ function UsuarioSenhaForm(props) { } />
-
@@ -202,18 +208,14 @@ function UsuarioSenhaForm(props) { ) } - /* - Dialog para formulário de inclusão/edição do crud + Componente do dialog para criação/edição de usuário */ function UsuarioForm(props) { const { control, watch, handleSubmit, errors } = useForm({ defaultValues: props.showForm.data }); - const onSubmit = async data => { - console.debug('DATA: ', data); - console.debug('PROPS DATA: ', props); const session = await getSession(); - if(props.showForm.data) { + if (props.showForm.data) { await axios.put('/api/mapcon/usuario',{ num_seq_usuario: props.showForm.data.num_seq_usuario, user: { @@ -223,7 +225,6 @@ function UsuarioForm(props) { ...data }) } else { - console.debug('SESSION ON SUBMIT', await getSession()); delete data['usu_senha_repetir'] await axios.post('/api/mapcon/usuario',{ ...data, @@ -238,15 +239,10 @@ function UsuarioForm(props) { const watchSenha = watch('usu_senha') + // Lista de perfis possíveis const perfis = [ - { - id : 1, - value: 'Administrador' - }, - { - id : 2, - value: 'Usuário' - }, + { id: 1, value: 'Administrador' }, + { id: 2, value: 'Usuário' } ] return ( @@ -259,23 +255,23 @@ function UsuarioForm(props) { } />
+ {/* Campos de senha só são exibidos no modo criação */} {props.showForm.data == undefined ? -
- - - - } /> -
-
- - value === watchSenha }} control={control} render={({field: { onChange, value = '' }}) => - - } /> -
- +
+ + + + } /> +
+
+ + value === watchSenha }} control={control} render={({field: { onChange, value = '' }}) => + + } /> +
- :null} + : null}
@@ -284,12 +280,12 @@ function UsuarioForm(props) { className={props.perfil_usuario_num_seq_perfil_usuario && 'p-invalid'} value={value} options={perfis} - onChange={e => onChange(e.value)} // Adding a default no-op function + onChange={e => onChange(e.value)} optionLabel="value" optionValue="id" showClear placeholder="Selecione um Perfil" - /> + /> } />