diff options
Diffstat (limited to 'src/components/forms/address_form.tsx')
-rw-r--r-- | src/components/forms/address_form.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx new file mode 100644 index 0000000..d002c4e --- /dev/null +++ b/src/components/forms/address_form.tsx @@ -0,0 +1,78 @@ +import { Form } from "react-router-dom"; +import { formHasErrors } from "../../lib/form_utils"; +import countryList from "react-select-country-list"; +import FieldProperties from "./fields/field_properties"; +import Field from "./fields/field"; +import SelectField from "./fields/select_field"; + +function getFieldProperties(address: any) { + const fields: Array<FieldProperties> = [ + { + id: "street-field", + type: "text", + name: "street", + label: "Calle", + placeholder: address.street + }, + { + id: "number-field", + type: "number", + name: "number", + label: "Número", + placeholder: address.number + }, + { + id: "zip-code-field", + type: "number", + name: "zip_code", + label: "Código postal", + placeholder: address.zip_code + }, + { + id: "city-field", + type: "text", + name: "city", + label: "Ciudad", + placeholder: address.city + } + ]; + + for(const field of fields) { + if(sessionStorage.getItem(field.name)) + field.error_message = sessionStorage.getItem(field.name); + } + + return fields; +} + +function getCountrySelectOptions(address: any, country_code: string) { + if(country_code == address.country) + return (<option value={ country_code } selected>{ countryList().getLabel(country_code) }</option>); + else + return (<option value={ country_code }>{ countryList().getLabel(country_code) }</option>); +} + +export default function AddressForm({ address }) { + const select_field_properties: FieldProperties = { + id: "country-field", + type: "select", + name: "city", + label: "Ciudad" + } + + const options = countryList().getValues().map(country_code => + getCountrySelectOptions(address, country_code) + ); + + const fields = getFieldProperties(address).map(field_properties => + <Field properties={field_properties}/> + ); + + return( + <Form method="post" id="address-form"> + {fields} + <SelectField properties={select_field_properties} options={options}/> + <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button> + </Form> + ); +}
\ No newline at end of file |