Mejora renderizado de formularios

6 files changed, 150 insertions, 2 deletions

diff --git a/src/components/address.tsx b/src/components/address.tsx
index 1701fd1..281b838 100644
--- a/src/components/address.tsx
+++ b/src/components/address.tsx
@@ -1,6 +1,8 @@
 import countryList from "react-select-country-list";
 
 export default function Address({ address }) {
+  const edit_address_route = `/account/addresses/${address.id}/edit`;
+
   return(
     <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
       <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
@@ -19,9 +21,10 @@ export default function Address({ address }) {
         {countryList().getLabel(address.attributes.country)}
       </td>
       <td className="px-6 py-4">
-      <button type="button" className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
+      <a type="button" className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+         href={edit_address_route}>
         Editar
-      </button>
+      </a>
       </td>
     </tr>
   );
diff --git a/src/components/forms/account_form.tsx b/src/components/forms/account_form.tsx
new file mode 100644
index 0000000..b0f0fc5
--- /dev/null
+++ b/src/components/forms/account_form.tsx
@@ -0,0 +1,25 @@
+import { Form } from "react-router-dom";
+
+export default function AccountForm({ account }) {
+  return(
+    <Form method="post" id="account-form">
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">Correo electrónico</label>
+        <input type="email" id="email" name="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.email}/>
+      </div>
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">Nombre</label>
+        <input type="text" id="first_name" name="first_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.first_name}/>
+      </div>
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">Apellido</label>
+        <input type="text" id="last_name" name="last_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.last_name}/>
+      </div>
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">Contraseña</label>
+        <input type="password" id="password" name="password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
+      </div>
+      <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
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
diff --git a/src/components/forms/fields/field.tsx b/src/components/forms/fields/field.tsx
new file mode 100644
index 0000000..d7aa342
--- /dev/null
+++ b/src/components/forms/fields/field.tsx
@@ -0,0 +1,23 @@
+export default function Field({ properties }) {
+  let field_component;
+
+  if(properties.error_message) {
+    field_component = (
+      <div className="mb-6">
+        <label className="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">{ properties.label }</label>
+        <input type={properties.type} id={properties.id} name={properties.name} className="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" placeholder={properties.placeholder}/>
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500"> {properties.error_message }</p>
+      </div>
+    );
+  }
+  else {
+    field_component = (
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
+        <input type={properties.type} id={properties.id} name={properties.name} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={properties.placeholder}/>
+      </div>
+    );
+  }
+
+  return field_component;
+}
\ No newline at end of file
diff --git a/src/components/forms/fields/field_properties.ts b/src/components/forms/fields/field_properties.ts
new file mode 100644
index 0000000..d4e8066
--- /dev/null
+++ b/src/components/forms/fields/field_properties.ts
@@ -0,0 +1,9 @@
+export default interface FieldProperties {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder?: string;
+  error_message?: string;
+}
+
diff --git a/src/components/forms/fields/select_field.tsx b/src/components/forms/fields/select_field.tsx
new file mode 100644
index 0000000..75859d9
--- /dev/null
+++ b/src/components/forms/fields/select_field.tsx
@@ -0,0 +1,10 @@
+export default function SelectField({ properties, options }) {
+  return(
+    <div className="mb-6">
+      <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
+      <select id={properties.id} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+        {options}
+      </select>
+    </div>
+  );
+}
\ No newline at end of file