Skip to content

Update index.jsx #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gpizatto wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.jsx #68

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 53 additions & 57 deletions mapcon/pages/mapcon/usuario/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,61 @@
// 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) {
router.push("/login");
} 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', {
Expand All @@ -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?',
Expand All @@ -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) {
Expand All @@ -87,30 +98,33 @@ 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) {
childRef.current.updateDatatable()
}
}

// Abre modal de atualização de senha
async function openSenhaDialog(row) {
setshowSenhaForm({
visible: true,
num: row.num_seq_usuario
})
}

// 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 (
<React.Fragment>
Expand All @@ -120,6 +134,7 @@ export default function UsuarioPage(props) {
);
}

// Renderização principal
return (loading ? <Loading></Loading> :
<div>
<ToolbarMapCon/>
Expand All @@ -134,10 +149,8 @@ export default function UsuarioPage(props) {
onEditButtonClicked={editButtonClicked}
onDeleteButtonClicked={deleteButtonClicked}
url='/api/mapcon/usuario'>

<Column field="num_seq_usuario" header="Código" sortable={true} />
<Column field="usu_login" header="Username" sortable={true} />

<Column header="Ações" body={actionBodyTemplate}></Column>
</TableCrud>
</div>
Expand All @@ -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 => {
Expand All @@ -169,20 +180,16 @@ function UsuarioSenhaForm(props) {
},
num_seq_usuario: props.showForm.num
})

props.closeForm(true)

}

return (
<Dialog header="Atualizar Senha" className="p-fluid" modal visible={props.showForm.visible} onHide={() => props.closeForm(false)}>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="p-fluid p-formgrid p-grid p-mt-lg-4 p-mt-4">

<div className="p-field p-col-12 p-md-12">
<div className="p-field p-col-12 p-md-12">
<label htmlFor="usu_senha">Senha*</label>
<Controller name="usu_senha" rules={{ required: true }} control={control} render={({field: { onChange, value = '' }}) =>
// <InputText disabled={props.view} className={errors.usu_senha ? "p-invalid" : ""} value={value} onChange={onChange}></InputText>
<Password id="usu_senha" disabled={props.view} promptLabel={'Digite uma senha'} weakLabel={'Fraca'} mediumLabel={'Média'} strongLabel={'Forte'} className={props.usu_senha ? "p-invalid" : ""} value={value} onChange={onChange}></Password>
} />
</div>
Expand All @@ -192,7 +199,6 @@ function UsuarioSenhaForm(props) {
<InputText id="usu_senha_repetir" disabled={props.view} type="password" className={props.usu_senha_repetir ? "p-invalid" : ""} value={value} onChange={onChange}></InputText>
} />
</div>

<div className="p-field p-col-12 p-md-offset-6 p-md-6">
<Button label={"Atualizar"} icon="pi pi-check"/>
</div>
Expand All @@ -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: {
Expand All @@ -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,
Expand All @@ -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 (
Expand All @@ -259,23 +255,23 @@ function UsuarioForm(props) {
<InputText id="usu_login" disabled={props.view} className={props.usu_login ? "p-invalid" : ""} value={value} onChange={onChange}></InputText>
} />
</div>
{/* Campos de senha só são exibidos no modo criação */}
{props.showForm.data == undefined ?
<React.Fragment>
<div className="p-field p-col-12 p-md-12">
<label htmlFor="usu_senha">Senha*</label>
<Controller name="usu_senha" rules={{ required: true }} control={control} render={({field: { onChange, value = '' }}) =>
<Password id="usu_senha" disabled={props.view} promptLabel={'Digite uma senha'} weakLabel={'Fraca'} mediumLabel={'Média'} strongLabel={'Forte'} className={props.usu_senha ? "p-invalid" : ""} value={value} onChange={onChange}></Password>
} />
</div>
<div className="p-field p-col-12 p-md-12">
<label htmlFor="usu_senha_repetir">Repetir Senha*</label>
<Controller name="usu_senha_repetir" rules={{ validate: value => value === watchSenha }} control={control} render={({field: { onChange, value = '' }}) =>
<InputText id="usu_senha_repetir" disabled={props.view} type="password" className={props.usu_senha_repetir ? "p-invalid" : ""} value={value} onChange={onChange}></InputText>
} />
</div>

<div className="p-field p-col-12 p-md-12">
<label htmlFor="usu_senha">Senha*</label>
<Controller name="usu_senha" rules={{ required: true }} control={control} render={({field: { onChange, value = '' }}) =>
<Password id="usu_senha" disabled={props.view} promptLabel={'Digite uma senha'} weakLabel={'Fraca'} mediumLabel={'Média'} strongLabel={'Forte'} className={props.usu_senha ? "p-invalid" : ""} value={value} onChange={onChange}></Password>
} />
</div>
<div className="p-field p-col-12 p-md-12">
<label htmlFor="usu_senha_repetir">Repetir Senha*</label>
<Controller name="usu_senha_repetir" rules={{ validate: value => value === watchSenha }} control={control} render={({field: { onChange, value = '' }}) =>
<InputText id="usu_senha_repetir" disabled={props.view} type="password" className={props.usu_senha_repetir ? "p-invalid" : ""} value={value} onChange={onChange}></InputText>
} />
</div>
</React.Fragment>
:null}
: null}
<div className="p-field p-col-12 p-md-12">
<label htmlFor="perfil_usuario_num_seq_perfil_usuario">Perfil*</label>
<Controller name="perfil_usuario_num_seq_perfil_usuario" rules={{ required: true }} control={control} render={({field: { onChange, value = '' }}) =>
Expand All @@ -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"
/>
/>
} />
</div>
<div className="p-field p-col-12 p-md-12">
Expand Down