Skip to content

Commit

Permalink
feat: ✨ improve address input sort
Browse files Browse the repository at this point in the history
  • Loading branch information
@willMoraes
willMoraes committed May 14, 2024
1 parent 69e5810 commit 4de312e
Showing 1 changed file with 84 additions and 75 deletions.
159 changes: 84 additions & 75 deletions src/app/shelter/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,57 +223,92 @@ function Shelter() {
<CardContent>
<h2 className="my-4 text-xl">Endereço</h2>
<div className="flex flex-col gap-3">
<div className="flex gap-5">
<div className="w-32 flex-none">
<FormField
control={form.control}
name="address.cep"
render={({ field, fieldState }) => (
<FormItem>
<FormLabel>CEP</FormLabel>
<FormControl>
<Input
placeholder="xxxxx-xxx"
{...field}
onChange={(e) => {
field.onChange(cepMask(e.target.value));
}}
onBlur={() => {
if (fieldState.invalid) return;
fetch(
`https://viacep.com.br/ws/${field.value}/json/`,
)
.then((response) => response.json())
.then(populateAddressWithViaCepData)
.catch((error) => {
console.log(error);
});
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex-1">
<FormField
control={form.control}
name="address.street"
render={({ field }) => (
<FormItem>
<FormLabel>Logradouro</FormLabel>
<FormControl>
<Input placeholder="Nome da rua" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-5">
<FormField
control={form.control}
name="address.neighborhood"
render={({ field }) => (
<FormItem>
<FormLabel>Bairro</FormLabel>
<FormControl>
<Input placeholder="Bairro" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="address.number"
render={({ field }) => (
<FormItem>
<FormLabel>Número</FormLabel>
<FormControl>
<Input placeholder="Número" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="address.cep"
render={({ field, fieldState }) => (
<FormItem>
<FormLabel>CEP</FormLabel>
<FormControl>
<Input
placeholder="XXXXX-XXX"
{...field}
onChange={(e) => {
field.onChange(cepMask(e.target.value));
}}
onBlur={() => {
if (fieldState.invalid) return;
fetch(
`https://viacep.com.br/ws/${field.value}/json/`,
)
.then((response) => response.json())
.then(populateAddressWithViaCepData)
.catch((error) => {
console.log(error);
});
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="address.street"
render={({ field }) => (
<FormItem>
<FormLabel>Rua</FormLabel>
<FormControl>
<Input placeholder="Nome da rua" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="address.neighborhood"
name="address.complement"
render={({ field }) => (
<FormItem>
<FormLabel>Bairro</FormLabel>
<FormLabel>Complemento (opcional)</FormLabel>
<FormControl>
<Input placeholder="Bairro" {...field} />
<Input placeholder="Complemento" {...field} />
</FormControl>
<FormMessage />
</FormItem>
Expand All @@ -282,12 +317,12 @@ function Shelter() {
<div className="grid grid-cols-2 gap-5">
<FormField
control={form.control}
name="address.number"
name="address.city"
render={({ field }) => (
<FormItem>
<FormLabel>Número</FormLabel>
<FormLabel>Cidade</FormLabel>
<FormControl>
<Input placeholder="Número" {...field} />
<Input placeholder="Cidade" {...field} />
</FormControl>
<FormMessage />
</FormItem>
Expand Down Expand Up @@ -315,32 +350,6 @@ function Shelter() {
)}
/>
</div>
<FormField
control={form.control}
name="address.city"
render={({ field }) => (
<FormItem>
<FormLabel>Cidade</FormLabel>
<FormControl>
<Input placeholder="Cidade" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="address.complement"
render={({ field }) => (
<FormItem>
<FormLabel>Complemento (opcional)</FormLabel>
<FormControl>
<Input placeholder="Complemento" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
</CardBase>
Expand Down

0 comments on commit 4de312e

Please sign in to comment.