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:
1 parent
59ea762227
commit
db7446f19a
1 file changed
+29
-20
@@ -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}));
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in new issue
Block a user