diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx')
| -rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx | 79 |
1 files changed, 40 insertions, 39 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index 515b36895..97d5afee5 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -19,19 +19,19 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; +import emptyImage from "../../../../assets/empty.png"; import { - FormProvider, FormErrors, + FormProvider, } from "../../../../components/form/FormProvider.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import emptyImage from "../../../../assets/empty.png"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; -import { Amounts } from "@gnu-taler/taler-util"; type Entity = MerchantBackend.Products.ProductDetail & WithId; @@ -57,7 +57,7 @@ export function CardTable({ const [rowSelection, rowSelectionHandler] = useState<string | undefined>( undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="card has-table"> <header class="card-header"> @@ -65,12 +65,12 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-shopping" /> </span> - <Translate>Products</Translate> + <i18n.Translate>Products</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options"> <span class="has-tooltip-left" - data-tooltip={i18n`add product to inventory`} + data-tooltip={i18n.str`add product to inventory`} > <button class="button is-info" type="button" onClick={onCreate}> <span class="icon is-small"> @@ -121,32 +121,32 @@ function Table({ onUpdate, onDelete, }: TableProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Image</Translate> + <i18n.Translate>Image</i18n.Translate> </th> <th> - <Translate>Description</Translate> + <i18n.Translate>Description</i18n.Translate> </th> <th> - <Translate>Sell</Translate> + <i18n.Translate>Sell</i18n.Translate> </th> <th> - <Translate>Taxes</Translate> + <i18n.Translate>Taxes</i18n.Translate> </th> <th> - <Translate>Profit</Translate> + <i18n.Translate>Profit</i18n.Translate> </th> <th> - <Translate>Stock</Translate> + <i18n.Translate>Stock</i18n.Translate> </th> <th> - <Translate>Sold</Translate> + <i18n.Translate>Sold</i18n.Translate> </th> <th /> </tr> @@ -207,7 +207,7 @@ function Table({ } style={{ cursor: "pointer" }} > - {isFree ? i18n`free` : `${i.price} / ${i.unit}`} + {isFree ? i18n.str`free` : `${i.price} / ${i.unit}`} </td> <td onClick={() => @@ -245,26 +245,26 @@ function Table({ <div class="buttons is-right"> <span class="has-tooltip-bottom" - data-tooltip={i18n`go to product update page`} + data-tooltip={i18n.str`go to product update page`} > <button class="button is-small is-success " type="button" onClick={(): void => onSelect(i)} > - <Translate>Update</Translate> + <i18n.Translate>Update</i18n.Translate> </button> </span> <span class="has-tooltip-left" - data-tooltip={i18n`remove this product from the database`} + data-tooltip={i18n.str`remove this product from the database`} > <button class="button is-small is-danger" type="button" onClick={(): void => onDelete(i)} > - <Translate>Delete</Translate> + <i18n.Translate>Delete</i18n.Translate> </button> </span> </div> @@ -316,7 +316,7 @@ function FastProductWithInfiniteStockUpdateForm({ onCancel, }: FastProductUpdateFormProps) { const [value, valueHandler] = useState<UpdatePrice>({ price: product.price }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -327,18 +327,18 @@ function FastProductWithInfiniteStockUpdateForm({ > <InputCurrency<FastProductUpdate> name="price" - label={i18n`Price`} - tooltip={i18n`update the product with new price`} + label={i18n.str`Price`} + tooltip={i18n.str`update the product with new price`} /> </FormProvider> <div class="buttons is-right mt-5"> <button class="button" onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <span class="has-tooltip-left" - data-tooltip={i18n`update product with new price`} + data-tooltip={i18n.str`update product with new price`} > <button class="button is-info" @@ -349,7 +349,7 @@ function FastProductWithInfiniteStockUpdateForm({ }) } > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </span> </div> @@ -383,7 +383,7 @@ function FastProductWithManagedStockUpdateForm({ const hasErrors = Object.keys(errors).some( (k) => (errors as any)[k] !== undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -395,31 +395,31 @@ function FastProductWithManagedStockUpdateForm({ > <InputNumber<FastProductUpdate> name="incoming" - label={i18n`Incoming`} - tooltip={i18n`add more elements to the inventory`} + label={i18n.str`Incoming`} + tooltip={i18n.str`add more elements to the inventory`} /> <InputNumber<FastProductUpdate> name="lost" - label={i18n`Lost`} - tooltip={i18n`report elements lost in the inventory`} + label={i18n.str`Lost`} + tooltip={i18n.str`report elements lost in the inventory`} /> <InputCurrency<FastProductUpdate> name="price" - label={i18n`Price`} - tooltip={i18n`new price for the product`} + label={i18n.str`Price`} + tooltip={i18n.str`new price for the product`} /> </FormProvider> <div class="buttons is-right mt-5"> <button class="button" onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <span class="has-tooltip-left" data-tooltip={ hasErrors - ? i18n`the are value with errors` - : i18n`update product with new stock and price` + ? i18n.str`the are value with errors` + : i18n.str`update product with new stock and price` } > <button @@ -434,7 +434,7 @@ function FastProductWithManagedStockUpdateForm({ }) } > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </span> </div> @@ -451,6 +451,7 @@ function FastProductUpdateForm(props: FastProductUpdateFormProps) { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -459,9 +460,9 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate> + <i18n.Translate> There is no products yet, add more pressing the + sign - </Translate> + </i18n.Translate> </p> </div> ); |