From d138c15dcd4272cd2358d28867ef35d1550b39cd Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Mon, 15 May 2023 20:35:39 -0600
Subject: Mejora renderizado de formularios

---
 src/components/forms/address_form.tsx | 78 +++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/components/forms/address_form.tsx

(limited to 'src/components/forms/address_form.tsx')

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
-- 
cgit v1.2.3