frontend: possibilita edição manual do endereço do cliente

Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo@martinsevieira.adv.br>
This commit is contained in:
Rodrigo B. de Sousa Martins committed 2025-05-26 13:32:38 -03:00
1 parent 59ea762227
commit db7446f19a
1 file changed
+29 -20
+29 -20
View File
@@ -212,25 +212,24 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
); );
if (response.data && !response.data.erro) { if (response.data && !response.data.erro) {
// Usar estado local para garantir re-renderização imediata
const endereco = response.data.logradouro || ""; const endereco = response.data.logradouro || "";
const bairro = response.data.bairro || ""; const bairro = response.data.bairro || "";
const cidade = response.data.localidade || ""; const cidade = response.data.localidade || "";
const estado = response.data.uf || ""; const estado = response.data.uf || "";
// Atualizar valores no formulário // Só preencher endereço/bairro se vier valor da API
setValue("endereco", endereco, { shouldValidate: true }); if (endereco) setValue("endereco", endereco, { shouldValidate: true });
setValue("bairro", bairro, { shouldValidate: true }); if (bairro) setValue("bairro", bairro, { shouldValidate: true });
setValue("cidade", cidade, { shouldValidate: true }); setValue("cidade", cidade, { shouldValidate: true });
setValue("estado", estado, { shouldValidate: true }); setValue("estado", estado, { shouldValidate: true });
// Atualizar o estado para re-renderização do componente // Atualizar estado apenas para cidade/estado (não controlar endereço/bairro)
setEnderecoState({ setEnderecoState({
endereco, endereco: endereco,
bairro, bairro: bairro,
cidade, cidade: cidade,
estado, estado: estado,
preenchido: true, preenchido: false, // Não usar mais para travar campos
}); });
// Focar no próximo campo apenas se o usuário não estiver digitando ativamente // Focar no próximo campo apenas se o usuário não estiver digitando ativamente
@@ -251,6 +250,18 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
}, 100); }, 100);
} }
} else { } else {
// Se CEP não encontrado, limpar campos e permitir edição manual
setEnderecoState({
endereco: "",
bairro: "",
cidade: "",
estado: "",
preenchido: false,
});
setValue("endereco", "");
setValue("bairro", "");
setValue("cidade", "");
setValue("estado", "");
console.error("CEP não encontrado"); console.error("CEP não encontrado");
alert("CEP não encontrado. Por favor, verifique o CEP informado."); alert("CEP não encontrado. Por favor, verifique o CEP informado.");
} }
@@ -622,10 +633,9 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
required: "Endereço é obrigatório", required: "Endereço é obrigatório",
})} })}
error={errors.endereco?.message} error={errors.endereco?.message}
value={enderecoState.preenchido ? enderecoState.endereco : undefined} // Remover value/controlado por enderecoState, deixar react-hook-form controlar
onChange={(e) => { onChange={(e) => {
setValue("endereco", e.target.value); setValue("endereco", e.target.value, { shouldValidate: true });
setEnderecoState(prev => ({...prev, endereco: e.target.value}));
}} }}
/> />
<FormInput <FormInput
@@ -645,10 +655,9 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
required: "Bairro é obrigatório", required: "Bairro é obrigatório",
})} })}
error={errors.bairro?.message} error={errors.bairro?.message}
value={enderecoState.preenchido ? enderecoState.bairro : undefined} // Remover value/controlado por enderecoState, deixar react-hook-form controlar
onChange={(e) => { onChange={(e) => {
setValue("bairro", e.target.value); setValue("bairro", e.target.value, { shouldValidate: true });
setEnderecoState(prev => ({...prev, bairro: e.target.value}));
}} }}
/> />
<FormInput <FormInput
@@ -657,9 +666,9 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
required: "Cidade é obrigatória", required: "Cidade é obrigatória",
})} })}
error={errors.cidade?.message} error={errors.cidade?.message}
value={enderecoState.preenchido ? enderecoState.cidade : undefined} value={typeof watch("cidade") === "string" ? watch("cidade") : enderecoState.cidade}
onChange={(e) => { onChange={(e) => {
setValue("cidade", e.target.value); setValue("cidade", e.target.value, { shouldValidate: true });
setEnderecoState(prev => ({...prev, cidade: e.target.value})); setEnderecoState(prev => ({...prev, cidade: e.target.value}));
}} }}
/> />
@@ -670,9 +679,9 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
})} })}
options={estadosOptions} options={estadosOptions}
error={errors.estado?.message} error={errors.estado?.message}
value={enderecoState.preenchido ? enderecoState.estado : undefined} value={typeof watch("estado") === "string" ? watch("estado") : enderecoState.estado}
onChange={(e) => { onChange={(e) => {
setValue("estado", e.target.value); setValue("estado", e.target.value, { shouldValidate: true });
setEnderecoState(prev => ({...prev, estado: e.target.value})); setEnderecoState(prev => ({...prev, estado: e.target.value}));
}} }}
/> />