From d138c15dcd4272cd2358d28867ef35d1550b39cd Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Mon, 15 May 2023 20:35:39 -0600 Subject: Mejora renderizado de formularios --- src/clients/actions.ts | 30 ++++++++++ src/clients/api_client.ts | 6 +- src/clients/loaders.ts | 11 ++++ src/components/address.tsx | 7 ++- src/components/forms/account_form.tsx | 25 ++++++++ src/components/forms/address_form.tsx | 78 +++++++++++++++++++++++++ src/components/forms/fields/field.tsx | 23 ++++++++ src/components/forms/fields/field_properties.ts | 9 +++ src/components/forms/fields/select_field.tsx | 10 ++++ src/lib/form_utils.ts | 39 +++++++++++-- src/main.tsx | 13 ++++- src/routes/account/addresses/edit.tsx | 18 ++++++ src/routes/account/edit.tsx | 24 +------- 13 files changed, 260 insertions(+), 33 deletions(-) create mode 100644 src/components/forms/account_form.tsx create mode 100644 src/components/forms/address_form.tsx create mode 100644 src/components/forms/fields/field.tsx create mode 100644 src/components/forms/fields/field_properties.ts create mode 100644 src/components/forms/fields/select_field.tsx create mode 100644 src/routes/account/addresses/edit.tsx diff --git a/src/clients/actions.ts b/src/clients/actions.ts index 36935cb..ea3c332 100644 --- a/src/clients/actions.ts +++ b/src/clients/actions.ts @@ -1,6 +1,7 @@ import { redirect } from "react-router-dom"; import { ApiClient } from "./api_client"; import { deleteEmptyFields } from "../lib/form_utils"; +import Token from "../lib/token"; export async function editAccount({ request }) { const client = new ApiClient(); @@ -15,4 +16,33 @@ export async function editAccount({ request }) { client.token.setRefresh(response.data.refresh); return redirect("/account"); +} + +export async function editAddress({ params, request }) { + + const client = new ApiClient(); + let form_data = await request.formData(); + form_data = deleteEmptyFields(form_data); + + try { + const response = await client.put(`/account/addresses/${params.addressId}`, form_data); + + if(response.status == 401 || response.status == 404) + return redirect("/products"); + + return redirect("/account"); + } catch(error) { + if(error.response.status == 401) { + new Token().logout; + + return redirect("/products") + } + else { + for(const [key, value] of Object.entries(error.response.data.errors)) { + sessionStorage.setItem(key, value); + } + + return redirect(`/account/addresses/${params.addressId}/edit`); + } + } } \ No newline at end of file diff --git a/src/clients/api_client.ts b/src/clients/api_client.ts index 93d713a..4362c4d 100644 --- a/src/clients/api_client.ts +++ b/src/clients/api_client.ts @@ -39,9 +39,9 @@ export class ApiClient { async put(path: string, data: FormData) { const request_url = `${ this.url }${ path }`; const options = this.authorizationHeaders(); - const response = await axios.put(request_url, data, options); - return response; + const response = await axios.put(request_url, data, options); + return response } async getProduct(id: string) { @@ -67,7 +67,7 @@ export class ApiClient { private authorizationHeaders() { return { headers: { - Authorization: this.token.get() + Authorization: `Bearer ${this.token.get()}` } }; } diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts index 8d0f06f..618e593 100644 --- a/src/clients/loaders.ts +++ b/src/clients/loaders.ts @@ -9,6 +9,17 @@ export async function loader({ request }) { return response; } +export async function addressLoader({ params }) { + const client = new ApiClient(); + const path = `/account/addresses/${params.addressId}`; + const request = await client.authenticatedGet(path); + + if(request.response) + return redirect("/account"); + + return request; +} + export async function accountLoader() { const client = new ApiClient(); 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( @@ -19,9 +21,10 @@ export default function Address({ address }) { {countryList().getLabel(address.attributes.country)} - + ); 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( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ ); +} \ 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 = [ + { + 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 (); + else + return (); +} + +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 => + + ); + + return( +
+ {fields} + + + + ); +} \ 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 = ( +
+ + +

{properties.error_message }

+
+ ); + } + else { + field_component = ( +
+ + +
+ ); + } + + 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( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/lib/form_utils.ts b/src/lib/form_utils.ts index a4e7bff..73c5ba7 100644 --- a/src/lib/form_utils.ts +++ b/src/lib/form_utils.ts @@ -1,10 +1,41 @@ +export interface Error { + field_div_id: string; + field_input_id: string; + message: string; +} + export function deleteEmptyFields(form: FormData) { - const trimmed_form = form; + const trimmed_form = new FormData(); - for(const key of trimmed_form) { - if(trimmed_form.get(key[0]) == '') - trimmed_form.delete(key[0]); + for(const key of form.keys()) { + if(form.get(key) != '') + trimmed_form.append(key, form.get(key)); } return trimmed_form; +} + +export function setFormErrorsInSessionStorage(errors: Array) { + for(const [key, value] of Object.entries(errors)) { + sessionStorage.setItem(key, value); + } +} + +export function formHasErrors(fields: Array) { + for(const field_key of fields) { + if(sessionStorage.getItem(field_key)) + return true; + } + + return false; +} + +export function renderErrors(errors: Array) { + for(const error of errors) { + const field_div = document.getElementById(error.field_div_id); + const input_label = field_div?.querySelector("label"); + const input_field = field_div?.querySelector("input"); + input_label?.classList.add("text-red-700"); + input_field?.classList.add("bg-red-50 border border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500"); + } } \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index cd65146..6808475 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,14 +1,15 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { BrowserRouter, createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom' +import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom' import Products from "./routes/products/products"; import Product from "./routes/products/product"; import Companies from "./routes/companies/companies"; import Account from "./routes/account/account"; import { EditAccount } from './routes/account/edit'; -import { editAccount } from './clients/actions'; +import { Edit as EditAddress } from "./routes/account/addresses/edit"; +import { editAccount, editAddress } from './clients/actions'; import Layout from "./components/layout"; -import { accountLoader, loader, productLoader } from "./clients/loaders"; +import { accountLoader, loader, productLoader, addressLoader } from "./clients/loaders"; import './index.css'; const routes = [ @@ -38,6 +39,12 @@ const routes = [ loader: accountLoader, action: editAccount }, + { + path: "/account/addresses/:addressId/edit", + element: , + loader: addressLoader, + action: editAddress, + }, { path: '/', element: diff --git a/src/routes/account/addresses/edit.tsx b/src/routes/account/addresses/edit.tsx new file mode 100644 index 0000000..31bfaed --- /dev/null +++ b/src/routes/account/addresses/edit.tsx @@ -0,0 +1,18 @@ +import AddressForm from "../../../components/forms/address_form"; +import { useLoaderData } from "react-router-dom"; +import MainContentLayout from "../../../components/main_content_layout"; + +export function Edit() { + const address = useLoaderData().data.data.attributes; + + return( + +
+

+ Editar cuenta +

+ +
+ + ); +} \ No newline at end of file diff --git a/src/routes/account/edit.tsx b/src/routes/account/edit.tsx index c2dfcb5..a78d8a7 100644 --- a/src/routes/account/edit.tsx +++ b/src/routes/account/edit.tsx @@ -1,11 +1,11 @@ import MainContentLayout from "../../components/main_content_layout"; +import AccountForm from "../../components/forms/account_form"; import Token from "../../lib/token"; -import { Form, useLoaderData } from "react-router-dom"; +import { useLoaderData } from "react-router-dom"; import "../../components/stylesheets/shared.css"; export function EditAccount() { const account = useLoaderData()[0].data.data.attributes; - const token = new Token(); return( <> @@ -14,25 +14,7 @@ export function EditAccount() {

Editar cuenta

-
-
- - -
-
- - -
-
- - -
-
- - -
- -
+ -- cgit v1.2.3