aboutsummaryrefslogtreecommitdiff
path: root/packages/merchant-backoffice-ui/src/paths/admin/list
diff options
context:
space:
mode:
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/admin/list')
-rw-r--r--packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx29
-rw-r--r--packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx18
-rw-r--r--packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx12
3 files changed, 32 insertions, 27 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
index 546f34f3a..223db2fed 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
@@ -19,10 +19,10 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
import { h, VNode } from "preact";
import { StateUpdater, useEffect, useState } from "preact/hooks";
import { MerchantBackend } from "../../../declaration.js";
-import { Translate, useTranslator } from "../../../i18n/index.js";
interface Props {
instances: MerchantBackend.Instances.Instance[];
@@ -68,7 +68,7 @@ export function CardTable({
}
}, [actionQueue, selected, onUpdate]);
- const i18n = useTranslator();
+ const { i18n } = useTranslationContext();
return (
<div class="card has-table">
@@ -77,7 +77,7 @@ export function CardTable({
<span class="icon">
<i class="mdi mdi-desktop-mac" />
</span>
- <Translate>Instances</Translate>
+ <i18n.Translate>Instances</i18n.Translate>
</p>
<div class="card-header-icon" aria-label="more options">
@@ -90,11 +90,14 @@ export function CardTable({
)
}
>
- <Translate>Delete</Translate>
+ <i18n.Translate>Delete</i18n.Translate>
</button>
</div>
<div class="card-header-icon" aria-label="more options">
- <span class="has-tooltip-left" data-tooltip={i18n`add new instance`}>
+ <span
+ class="has-tooltip-left"
+ data-tooltip={i18n.str`add new instance`}
+ >
<button class="button is-info" type="button" onClick={onCreate}>
<span class="icon is-small">
<i class="mdi mdi-plus mdi-36px" />
@@ -149,6 +152,7 @@ function Table({
onDelete,
onPurge,
}: TableProps): VNode {
+ const { i18n } = useTranslationContext();
return (
<div class="table-container">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
@@ -171,10 +175,10 @@ function Table({
</label>
</th>
<th>
- <Translate>ID</Translate>
+ <i18n.Translate>ID</i18n.Translate>
</th>
<th>
- <Translate>Name</Translate>
+ <i18n.Translate>Name</i18n.Translate>
</th>
<th />
</tr>
@@ -213,7 +217,7 @@ function Table({
type="button"
onClick={(): void => onUpdate(i.id)}
>
- <Translate>Edit</Translate>
+ <i18n.Translate>Edit</i18n.Translate>
</button>
{!i.deleted && (
<button
@@ -221,7 +225,7 @@ function Table({
type="button"
onClick={(): void => onDelete(i)}
>
- <Translate>Delete</Translate>
+ <i18n.Translate>Delete</i18n.Translate>
</button>
)}
{i.deleted && (
@@ -230,7 +234,7 @@ function Table({
type="button"
onClick={(): void => onPurge(i)}
>
- <Translate>Purge</Translate>
+ <i18n.Translate>Purge</i18n.Translate>
</button>
)}
</div>
@@ -245,6 +249,7 @@ function Table({
}
function EmptyTable(): VNode {
+ const { i18n } = useTranslationContext();
return (
<div class="content has-text-grey has-text-centered">
<p>
@@ -253,9 +258,9 @@ function EmptyTable(): VNode {
</span>
</p>
<p>
- <Translate>
+ <i18n.Translate>
There is no instances yet, add more pressing the + sign
- </Translate>
+ </i18n.Translate>
</p>
</div>
);
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
index 5180c671c..7376a88cb 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
@@ -19,11 +19,11 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
import { MerchantBackend } from "../../../declaration.js";
import { CardTable as CardTableActive } from "./TableActive.js";
-import { useState } from "preact/hooks";
-import { Translate, useTranslator } from "../../../i18n/index.js";
interface Props {
instances: MerchantBackend.Instances.Instance[];
@@ -48,7 +48,7 @@ export function View({
const showIsActive = show === "active" ? "is-active" : "";
const showIsDeleted = show === "deleted" ? "is-active" : "";
const showAll = show === null ? "is-active" : "";
- const i18n = useTranslator();
+ const { i18n } = useTranslationContext();
const showingInstances = showIsDeleted
? instances.filter((i) => i.deleted)
@@ -66,30 +66,30 @@ export function View({
<li class={showIsActive}>
<div
class="has-tooltip-right"
- data-tooltip={i18n`Only show active instances`}
+ data-tooltip={i18n.str`Only show active instances`}
>
<a onClick={() => setShow("active")}>
- <Translate>Active</Translate>
+ <i18n.Translate>Active</i18n.Translate>
</a>
</div>
</li>
<li class={showIsDeleted}>
<div
class="has-tooltip-right"
- data-tooltip={i18n`Only show deleted instances`}
+ data-tooltip={i18n.str`Only show deleted instances`}
>
<a onClick={() => setShow("deleted")}>
- <Translate>Deleted</Translate>
+ <i18n.Translate>Deleted</i18n.Translate>
</a>
</div>
</li>
<li class={showAll}>
<div
class="has-tooltip-right"
- data-tooltip={i18n`Show all instances`}
+ data-tooltip={i18n.str`Show all instances`}
>
<a onClick={() => setShow(null)}>
- <Translate>All</Translate>
+ <i18n.Translate>All</i18n.Translate>
</a>
</div>
</li>
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx
index 36d58dd41..9a81b72d4 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx
@@ -19,6 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
import { Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import { Loading } from "../../../components/exception/loading.js";
@@ -27,7 +28,6 @@ import { DeleteModal, PurgeModal } from "../../../components/modal/index.js";
import { MerchantBackend } from "../../../declaration.js";
import { HttpError } from "../../../hooks/backend.js";
import { useAdminAPI, useBackendInstances } from "../../../hooks/instance.js";
-import { useTranslator } from "../../../i18n/index.js";
import { Notification } from "../../../utils/types.js";
import { View } from "./View.js";
@@ -56,7 +56,7 @@ export default function Instances({
useState<MerchantBackend.Instances.Instance | null>(null);
const { deleteInstance, purgeInstance } = useAdminAPI();
const [notif, setNotif] = useState<Notification | undefined>(undefined);
- const i18n = useTranslator();
+ const { i18n } = useTranslationContext();
if (result.clientError && result.isUnauthorized) return onUnauthorized();
if (result.clientError && result.isNotfound) return onNotFound();
@@ -84,12 +84,12 @@ export default function Instances({
await deleteInstance(deleting.id);
// pushNotification({ message: 'delete_success', type: 'SUCCESS' })
setNotif({
- message: i18n`Instance "${deleting.name}" (ID: ${deleting.id}) has been deleted`,
+ message: i18n.str`Instance "${deleting.name}" (ID: ${deleting.id}) has been deleted`,
type: "SUCCESS",
});
} catch (error) {
setNotif({
- message: i18n`Failed to delete instance`,
+ message: i18n.str`Failed to delete instance`,
type: "ERROR",
description: error instanceof Error ? error.message : undefined,
});
@@ -107,12 +107,12 @@ export default function Instances({
try {
await purgeInstance(purging.id);
setNotif({
- message: i18n`Instance "${purging.name}" (ID: ${purging.id}) has been disabled`,
+ message: i18n.str`Instance "${purging.name}" (ID: ${purging.id}) has been disabled`,
type: "SUCCESS",
});
} catch (error) {
setNotif({
- message: i18n`Failed to purge instance`,
+ message: i18n.str`Failed to purge instance`,
type: "ERROR",
description: error instanceof Error ? error.message : undefined,
});