diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx')
| -rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx | 92 |
1 files changed, 57 insertions, 35 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx index 54fef6003..841c0222f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -26,7 +26,7 @@ import { MerchantBackend, WithId } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; import { Translate, useTranslator } from "../../../../i18n/index.js"; -type Entity = MerchantBackend.Products.ProductDetail & { product_id: string } +type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }; interface Props { onUpdate: (d: Entity) => Promise<void>; @@ -35,43 +35,65 @@ interface Props { } export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { - const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => { - if (result) return onUpdate(result) - return Promise.resolve() - }) - - const i18n = useTranslator() + const [submitForm, addFormSubmitter] = useListener<Entity | undefined>( + (result) => { + if (result) return onUpdate(result); + return Promise.resolve(); + }, + ); - return <div> - <section class="section"> - <section class="hero is-hero-bar"> - <div class="hero-body"> + const i18n = useTranslator(); - <div class="level"> - <div class="level-left"> - <div class="level-item"> - <span class="is-size-4"><Translate>Product id:</Translate><b>{product.product_id}</b></span> + return ( + <div> + <section class="section"> + <section class="hero is-hero-bar"> + <div class="hero-body"> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <span class="is-size-4"> + <Translate>Product id:</Translate> + <b>{product.product_id}</b> + </span> + </div> </div> </div> </div> - </div> - </section> - <hr /> + </section> + <hr /> - <div class="columns"> - <div class="column" /> - <div class="column is-four-fifths"> - <ProductForm initial={product} onSubscribe={addFormSubmitter} alreadyExist /> + <div class="columns"> + <div class="column" /> + <div class="column is-four-fifths"> + <ProductForm + initial={product} + onSubscribe={addFormSubmitter} + alreadyExist + /> - <div class="buttons is-right mt-5"> - {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>} - <AsyncButton onClick={submitForm} data-tooltip={ - !submitForm ? i18n`Need to complete marked fields` : 'confirm operation' - } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton> + <div class="buttons is-right mt-5"> + {onBack && ( + <button class="button" onClick={onBack}> + <Translate>Cancel</Translate> + </button> + )} + <AsyncButton + onClick={submitForm} + data-tooltip={ + !submitForm + ? i18n`Need to complete marked fields` + : "confirm operation" + } + disabled={!submitForm} + > + <Translate>Confirm</Translate> + </AsyncButton> + </div> </div> + <div class="column" /> </div> - <div class="column" /> - </div> - </section> - </div> -}
\ No newline at end of file + </section> + </div> + ); +} |