I need to update my database using C# in the back-end and React in front-end.
Back-end
[HttpPost("update")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
[ProducesResponseType(StatusCodes.Status401Unauthorized)]
[ProducesResponseType(StatusCodes.Status404NotFound)]
public async Task<Resultado<Analise>> AnaliseAsync([FromBody] Analise analise)
{
_telemetria.AdicionarPropriedade("NomeUsuario", _login);
_telemetria.EscreverTelemetria(GetType().Name, "Atualizar análise", TipoSeveridade.Informacao);
if (analise == null)
{
return Resultado<Analise>.AdicionarErro(
null,
CreditOn.Dominio.Enums.StatusCode.Status400BadRequest,
"Dados inválidos."
);
}
var resultado = await _servicoAnalise.AtualizarAnalise(analise.AnaliseId, _login);
if (resultado.Erro)
{
return Resultado<Analise>.AdicionarErro(
null,
resultado.StatusCode,
resultado.Erros
);
}
_telemetria.EscreverTelemetria(
"AtualizarAnálise",
"Análise atualizada com sucesso.",
TipoSeveridade.Informacao,
propriedades: new Dictionary<string, object> { { "ID_Analise", analise.AnaliseId } }
);
return Resultado<Analise>.AdicionarSucesso(analise);
}```
**Front-end**
interface EditableTableProps {
resultado: Resultado[];
onUpdate: (updatedData: Resultado[]) => void;
}
const EditableTable = ({ resultado, onUpdate }: EditableTableProps) => {
const [data, setData] = useState<Resultado[]>(Array.isArray(resultado) ? resultado : []);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
console.log('Análise:', data)
const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement>,
field: string,
itemId: string
) => {
const updatedData = data.map((analise) => ({
...analise,
analiseDemonstrativo: analise.analiseDemonstrativo?.map((item) =>
item.analiseDemonstrativoId === itemId
? { ...item, [field]: e.target.value }
: item
) || [],
}));
setData(updatedData);
onUpdate(updatedData);
};
console.log('resultado:', resultado)
console.log('result:', result)
const handleSave = async () => {
setLoading(true);
setError(null);
try {
const payload = {
analiseId: analiseId, // Adicionar o analiseId aqui
analises: data.map((analise) => ({
analiseId: analise.analiseId,
analiseDemonstrativo: analise.analiseDemonstrativo?.map((item) => ({
analiseDemonstrativoId: item.analiseDemonstrativoId,
tipoParametro: item.tipoParametro,
valor: item.valor,
// Adicione outros campos necessários aqui
})) || [],
})),
};
console.log('payload:', JSON.stringify(payload, null, 2));
const response = await axios.post(
'https://localhost:7116/analise/update',
payload,
{ headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
} }
);
console.log('Dados enviados com sucesso:', response.data);
setResult(response.data.valor || []);
alert('Dados atualizados com sucesso!');
} catch (err) {
console.error('Erro ao atualizar dados:', err);
setError('Ocorreu um erro ao enviar os dados. Verifique os valores e tente novamente.');
} finally {
setLoading(false);
}
};
return (
<div>
<table style={{ width: '100%', border: '1px solid black', borderCollapse: 'collapse' }}>
<thead>
<tr>
<th style={{ border: '1px solid black', padding: '8px' }}>Tipo Parâmetro</th>
<th style={{ border: '1px solid black', padding: '8px' }}>Valor</th>
</tr>
</thead>
<tbody>
{data.map((analise) =>
analise.analiseDemonstrativo?.map((item: any) => (
<tr key={item.analiseDemonstrativoId}>
<td style={{ border: '1px solid black', padding: '8px' }}>
<input
type="number"
value={item.tipoParametro}
onChange={(e) => handleInputChange(e, 'tipoParametro', item.analiseDemonstrativoId)}
style={{ width: '100%' }} />
</td>
<td style={{ border: '1px solid black', padding: '8px' }}>
<input
type="number"
value={item.valor}
onChange={(e) => handleInputChange(e, 'valor', item.analiseDemonstrativoId)}
style={{ width: '100%' }} />
</td>
</tr>
)) || []
)}
</tbody>
</table>
{/* Botão de envio */}
<button
onClick={handleSave}
style={{
marginTop: '10px',
padding: '8px 16px',
backgroundColor: '#4CAF50',
color: 'white',
border: 'none',
cursor: 'pointer',
}}
disabled={loading}
>
{loading ? 'Salvando...' : 'Salvar Alterações'}
</button>
{/* Feedback de erro */}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
};
const TableAnalysis: React.FC<{ resultado: any[] }> = ({ resultado }) => {
if (!resultado || resultado.length === 0) {
return <p>Nenhum dado encontrado.</p>;
}
const handleUpdate = (updatedData: Resultado[]) => {
// Atualize o estado ou faça algo com os dados atualizados
console.log('Dados atualizados:', updatedData);
};
return <EditableTable resultado={resultado} onUpdate={handleUpdate} />;
};
const handleUpdate = (updatedData: Resultado[]) => {
setResult(updatedData);
};
if (!pdfUrl) {
return <p>Carregando ou URL do PDF não encontrada.</p>;
}
return (
<Container>
<main>
<div className="Container1">
<h1>Page</h1>
<div className="row">
<div className="col1">
<h1>Visualização do PDF</h1>
<VisualizationPage pdfUrl={pdfUrl} />
<PdfButton url="https://extratordev.blob.core.windows.net/95e6b155-8152-4c3c-8430-bef3333be2aa/07486111-c9fe-44ce-a5df-707985b7d2f7-Balanco_Patrimonial_2022-CostaSul.pdf" label="Abrir PDF 1" onClick={setPdfUrl} />
<PdfButton url="https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" label="Abrir PDF 2" onClick={setPdfUrl} />
<PdfButton url="./Costa_Sul.pdf" label="Abrir PDF 3" onClick={setPdfUrl} />
</div>
<div className="col2">
<h2>Indicadores</h2>
<div className="Indicators">
<h2>Análise Demonstrativa</h2>
<TableAnalysis
resultado={(result || [])}
/>
</div>
<MyButton />
</div>
</div>
</div>
</main>
</Container>
);
};
My payload in the console
payload: {
"analiseId": "30d972df-9f8f-491c-8e****",
"analises": [
{
"analiseId": "30d972df-9f8f-491***",
"analiseDemonstrativo": [
{
"analiseDemonstrativoId": "45b93269-e007-4f23-a04***",
"tipoParametro": "2",
"valor": 30000
}
]
}
]
}
I got data updated with success:
{statusCode: 200, erro: false, erros: Array(0), valor: {…}}
erro
:
false
erros
:
[]
statusCode
:
200
valor
:
{analiseId: ’30d972df-9f8f-491c-8e76-fdae76eeac2c’, cnpjOuCpf: null, statusId: ‘00000000-0000-0000-0000-000000000000’, tipoAnalise: 0, observacao: null, …}
[[Prototype]]
:
Object
An the empty result like this:
analiseCliente
:
[]
analiseCredito
:
[]
analiseCriterio
:
[]
analiseDemonstrativo
:
[]
analiseDocumentacao
:
[]
analiseEmpresa
:
[]
analiseId
:
“30d972df-9f8f-491c-8e76-fdae76eeac2c”
analiseIndicador
:
[]
analiseMensagem
:
[]
analiseMetadado
:
[]
analisePorte
:
[]
analiseSociedade
:
[]
classificacaoInterna
:
null
cnpjMatriz
:
null
cnpjOuCpf
:
null
dataEdicao
:
“0001-01-01T00:00:00”
dataInclusao
:
“0001-01-01T00:00:00”
nomeAssessor
:
null
observacao
:
null
parecer
:
null
parecerComercial
:
null
status
:
null
statusId
:
“00000000-0000-0000-0000-000000000000”
tipoAnalise
:
0
usuarioEdicao
:
null
usuarioInclusao
:
null
valorSolicitado
:
0
[[Prototype]]
:
Object
