commit 767f04761decaae0b049782c65dc11e255d05079
parent 6c9df8fed4d015a5e0c075149f67f97f2dc41cd1
Author: Sebastian <sebasjm@taler-systems.com>
Date: Fri, 30 Jan 2026 12:13:41 -0300
fix #10872
Diffstat:
5 files changed, 101 insertions(+), 94 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx b/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx
@@ -66,7 +66,7 @@ export function JumpToElementById({
return (
<Fragment>
- <div class="level">
+ <div class="level" style={{margin:0}}>
<div class="level-left">
<div class="level-item">
<FormProvider>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -39,9 +39,6 @@ export interface ListPageProps {
onChangeSection: (s: OrderListSection) => void;
section: OrderListSection;
- jumpToDate?: AbsoluteTime;
- onSelectDate: (date?: AbsoluteTime) => void;
-
orders: (TalerMerchantApi.OrderHistoryEntry & WithId)[];
onLoadMoreBefore?: () => void;
onLoadMoreAfter?: () => void;
@@ -57,22 +54,17 @@ export function ListPage({
orders,
onSelectOrder,
onRefundOrder,
- jumpToDate,
onChangeSection,
- onSelectDate,
section,
onCreate,
}: ListPageProps): VNode {
const { i18n } = useTranslationContext();
- const dateTooltip = i18n.str`Select date to show nearby orders`;
- const [pickDate, setPickDate] = useState(false);
- const [preferences] = usePreference();
return (
<Fragment>
<div class="columns">
- <div class="column is-two-thirds">
- <div class="tabs" style={{ overflow: "inherit" }}>
+ <div class="column">
+ <div class="tabs" style={{ paddingTop: 10, paddingBottom: 10 }}>
<ul>
<li
class={
@@ -155,7 +147,7 @@ export function ListPage({
</li>
<li class={section === undefined ? "is-active" : undefined}>
<div
- class="has-tooltip-right"
+ class="has-tooltip-left"
data-tooltip={i18n.str`Remove all filters`}
>
<a onClick={() => onChangeSection(OrderListSection.ALL)}>
@@ -168,72 +160,11 @@ export function ListPage({
</div>
</div>
<div class="column ">
- <div class="buttons is-right">
- <div class="field has-addons">
- {jumpToDate && (
- <div class="control">
- <a
- class="button is-fullwidth"
- onClick={() => onSelectDate(undefined)}
- >
- <span
- class="icon"
- data-tooltip={i18n.str`Clear date filter`}
- >
- <i class="mdi mdi-close" />
- </span>
- </a>
- </div>
- )}
- <div class="control">
- <span class="has-tooltip-top" data-tooltip={dateTooltip}>
- <input
- class="input"
- type="text"
- readonly
- value={
- !jumpToDate || jumpToDate.t_ms === "never"
- ? ""
- : format(
- jumpToDate.t_ms,
- dateFormatForPreferences(preferences),
- )
- }
- placeholder={i18n.str`Jump to date (${dateFormatForPreferences(
- preferences,
- )})`}
- onClick={() => {
- setPickDate(true);
- }}
- />
- </span>
- </div>
- <div class="control">
- <span class="has-tooltip-left" data-tooltip={dateTooltip}>
- <a
- class="button is-fullwidth"
- onClick={() => {
- setPickDate(true);
- }}
- >
- <span class="icon">
- <i class="mdi mdi-calendar" />
- </span>
- </a>
- </span>
- </div>
- </div>
- </div>
+
</div>
+
</div>
- <DatePicker
- opened={pickDate}
- closeFunction={() => setPickDate(false)}
- dateReceiver={(d) => {
- onSelectDate(AbsoluteTime.fromMilliseconds(d.getTime()));
- }}
- />
<CardTable
orders={orders}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
@@ -47,6 +47,10 @@ import { LoginPage } from "../../../login/index.js";
import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js";
import { ListPage } from "./ListPage.js";
import { RefundModal } from "./Table.js";
+import { InputDate } from "../../../../components/form/InputDate.js";
+import { dateFormatForPreferences, usePreference } from "../../../../hooks/preference.js";
+import { format } from "date-fns";
+import { DatePicker } from "../../../../components/picker/DatePicker.js";
const TALER_SCREEN_ID = 46;
@@ -110,8 +114,8 @@ export default function OrderList({
const setNewDate = (date?: AbsoluteTime): void =>
setFilter((prev) => ({ ...prev, date }));
-
- const result = useInstanceOrders({ ...sectionToFilter(section), ...filter}, (d) =>
+
+ const result = useInstanceOrders({ ...sectionToFilter(section), ...filter }, (d) =>
setFilter({ ...filter, position: d }),
);
const [notification, safeFunctionHandler] = useLocalNotificationBetter();
@@ -165,16 +169,85 @@ export default function OrderList({
assertUnreachable(fail);
}
};
+ const [pickDate, setPickDate] = useState(false);
+ const dateTooltip = i18n.str`Select date to show nearby orders`;
+ const [preferences] = usePreference();
+
return (
<section class="section is-main-section">
<LocalNotificationBannerBulma notification={notification} />
- <JumpToElementById
- onSelect={onSelect}
- description={i18n.str`Jump to order with the given product ID`}
- placeholder={i18n.str`Order id`}
- />
+ <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+ <JumpToElementById
+ onSelect={onSelect}
+ description={i18n.str`Jump to order with the given product ID`}
+ placeholder={i18n.str`Order id`}
+ />
+ <div class="buttons is-right">
+ <div class="field has-addons">
+ {filter.date && (
+ <div class="control">
+ <a
+ class="button is-fullwidth"
+ onClick={() => setNewDate(undefined)}
+ >
+ <span
+ class="icon"
+ data-tooltip={i18n.str`Clear date filter`}
+ >
+ <i class="mdi mdi-close" />
+ </span>
+ </a>
+ </div>
+ )}
+ <div class="control">
+ <span class="has-tooltip-top" data-tooltip={dateTooltip}>
+ <input
+ class="input"
+ type="text"
+ readonly
+ value={
+ !filter.date || filter.date.t_ms === "never"
+ ? ""
+ : format(
+ filter.date.t_ms,
+ dateFormatForPreferences(preferences),
+ )
+ }
+ placeholder={i18n.str`Jump to date (${dateFormatForPreferences(
+ preferences,
+ )})`}
+ onClick={() => {
+ setPickDate(true);
+ }}
+ />
+ </span>
+ </div>
+ <div class="control">
+ <span class="has-tooltip-left" data-tooltip={dateTooltip}>
+ <a
+ class="button is-fullwidth"
+ onClick={() => {
+ setPickDate(true);
+ }}
+ >
+ <span class="icon">
+ <i class="mdi mdi-calendar" />
+ </span>
+ </a>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <DatePicker
+ opened={pickDate}
+ closeFunction={() => setPickDate(false)}
+ dateReceiver={(d) => {
+ setNewDate(AbsoluteTime.fromMilliseconds(d.getTime()));
+ }}
+ />
<ListPage
orders={result.body.map((o) => ({ ...o, id: o.order_id }))}
onLoadMoreBefore={result.loadFirst}
@@ -182,8 +255,6 @@ export default function OrderList({
onSelectOrder={(order) => onSelect(order.id)}
onRefundOrder={(value) => setOrderToBeRefunded(value)}
section={section}
- jumpToDate={filter.date}
- onSelectDate={setNewDate}
onCreate={onCreate}
onChangeSection={onChangeSection}
/>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -101,11 +101,14 @@ export default function ProductList({ onCreate, onSelect }: Props): VNode {
<section class="section is-main-section">
<LocalNotificationBannerBulma notification={notification} />
- <JumpToElementById
- onSelect={onSelect}
- description={i18n.str`Jump to product with the given product ID`}
- placeholder={i18n.str`Product id`}
- />
+ <div style={{ marginBottom: 10 }}>
+
+ <JumpToElementById
+ onSelect={onSelect}
+ description={i18n.str`Jump to product with the given product ID`}
+ placeholder={i18n.str`Product id`}
+ />
+ </div>
<CardTable
instances={result.body}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
@@ -107,11 +107,13 @@ export default function ListTemplates({
<section class="section is-main-section">
<LocalNotificationBannerBulma notification={notification} />
- <JumpToElementById
- onSelect={onSelect}
- description={i18n.str`Jump to template with the given template ID`}
- placeholder={i18n.str`Template identification`}
- />
+ <div style={{ marginBottom: 10 }}>
+ <JumpToElementById
+ onSelect={onSelect}
+ description={i18n.str`Jump to template with the given template ID`}
+ placeholder={i18n.str`Template identification`}
+ />
+ </div>
<CardTable
templates={result.body.templates.map((o) => ({
