[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated (61f845b -> 0399b8a)
|
From: |
gnunet |
|
Subject: |
[taler-merchant-backoffice] branch master updated (61f845b -> 0399b8a) |
|
Date: |
Thu, 24 Jun 2021 16:24:09 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a change to branch master
in repository merchant-backoffice.
from 61f845b duration picker
new 997bba5 small changes
new 0399b8a refactored order list page to split logic / view
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
packages/frontend/src/components/form/Input.tsx | 2 +-
.../frontend/src/components/form/InputArray.tsx | 2 +-
.../frontend/src/components/form/InputDate.tsx | 4 +-
.../frontend/src/components/form/InputDuration.tsx | 2 +-
.../frontend/src/components/form/InputGroup.tsx | 2 +-
.../frontend/src/components/form/InputImage.tsx | 6 +-
.../src/components/form/InputSearchProduct.tsx | 8 +-
.../frontend/src/components/form/InputSecured.tsx | 2 +-
.../frontend/src/components/form/InputSelector.tsx | 2 +-
.../frontend/src/components/form/InputStock.tsx | 4 +-
.../src/components/form/InputWithAddon.tsx | 2 +-
.../frontend/src/components/form/TextField.tsx | 2 +-
.../src/components/{form => picker}/DatePicker.tsx | 0
.../{form => picker}/DurationPicker.scss | 0
.../{form => picker}/DurationPicker.stories.tsx | 0
.../components/{form => picker}/DurationPicker.tsx | 0
.../components/product/InventoryProductForm.tsx | 4 +-
.../components/product/NonInventoryProductForm.tsx | 2 +-
.../paths/instance/orders/list/List.stories.tsx | 14 +-
.../src/paths/instance/orders/list/ListPage.tsx | 146 ++++++++++++++++++++
.../src/paths/instance/orders/list/Table.tsx | 1 -
.../src/paths/instance/orders/list/index.tsx | 151 ++++++---------------
packages/frontend/src/scss/main.scss | 4 +
23 files changed, 227 insertions(+), 133 deletions(-)
rename packages/frontend/src/components/{form => picker}/DatePicker.tsx (100%)
rename packages/frontend/src/components/{form => picker}/DurationPicker.scss
(100%)
rename packages/frontend/src/components/{form =>
picker}/DurationPicker.stories.tsx (100%)
rename packages/frontend/src/components/{form => picker}/DurationPicker.tsx
(100%)
create mode 100644
packages/frontend/src/paths/instance/orders/list/ListPage.tsx
diff --git a/packages/frontend/src/components/form/Input.tsx
b/packages/frontend/src/components/form/Input.tsx
index f7e0b5c..9a9691e 100644
--- a/packages/frontend/src/components/form/Input.tsx
+++ b/packages/frontend/src/components/form/Input.tsx
@@ -44,7 +44,7 @@ export function Input<T>({ name, readonly, placeholder,
tooltip, label, expand,
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputArray.tsx
b/packages/frontend/src/components/form/InputArray.tsx
index 13800c7..211d995 100644
--- a/packages/frontend/src/components/form/InputArray.tsx
+++ b/packages/frontend/src/components/form/InputArray.tsx
@@ -47,7 +47,7 @@ export function InputArray<T>({ name, readonly, placeholder,
tooltip, label, hel
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputDate.tsx
b/packages/frontend/src/components/form/InputDate.tsx
index 614e44a..75f955f 100644
--- a/packages/frontend/src/components/form/InputDate.tsx
+++ b/packages/frontend/src/components/form/InputDate.tsx
@@ -22,7 +22,7 @@ import { format } from "date-fns";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { Translate, useTranslator } from "../../i18n";
-import { DatePicker } from "./DatePicker";
+import { DatePicker } from "../picker/DatePicker";
import { InputProps, useField } from "./useField";
export interface Props<T> extends InputProps<T> {
@@ -53,7 +53,7 @@ export function InputDate<T>({ name, readonly, label,
placeholder, help, tooltip
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputDuration.tsx
b/packages/frontend/src/components/form/InputDuration.tsx
index 76e9022..258858b 100644
--- a/packages/frontend/src/components/form/InputDuration.tsx
+++ b/packages/frontend/src/components/form/InputDuration.tsx
@@ -23,7 +23,7 @@ import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { Translate, useTranslator } from "../../i18n";
import { SimpleModal } from "../modal";
-import { DurationPicker } from "./DurationPicker";
+import { DurationPicker } from "../picker/DurationPicker";
import { InputProps, useField } from "./useField";
export interface Props<T> extends InputProps<T> {
diff --git a/packages/frontend/src/components/form/InputGroup.tsx
b/packages/frontend/src/components/form/InputGroup.tsx
index 146b977..a4252f0 100644
--- a/packages/frontend/src/components/form/InputGroup.tsx
+++ b/packages/frontend/src/components/form/InputGroup.tsx
@@ -39,7 +39,7 @@ export function InputGroup<T>({ name, label, children,
tooltip, alternative, ini
<header class="card-header">
<p class="card-header-title">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
{group?.hasError && <span class="icon has-text-danger"
data-tooltip={tooltip}>
diff --git a/packages/frontend/src/components/form/InputImage.tsx
b/packages/frontend/src/components/form/InputImage.tsx
index 2f598b3..55a6b66 100644
--- a/packages/frontend/src/components/form/InputImage.tsx
+++ b/packages/frontend/src/components/form/InputImage.tsx
@@ -18,7 +18,7 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
import { useRef, useState } from "preact/hooks";
import emptyImage from "../../assets/empty.png";
import { Translate } from "../../i18n";
@@ -31,7 +31,7 @@ export interface Props<T> extends InputProps<T> {
children?: ComponentChildren;
}
-export function InputImage<T>({ name, readonly, placeholder, tooltip, label,
help, children, expand }: Props<keyof T>) {
+export function InputImage<T>({ name, readonly, placeholder, tooltip, label,
help, children, expand }: Props<keyof T>): VNode {
const { error, value, onChange } = useField<T>(name);
const image = useRef<HTMLInputElement>(null)
@@ -42,7 +42,7 @@ export function InputImage<T>({ name, readonly, placeholder,
tooltip, label, hel
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputSearchProduct.tsx
b/packages/frontend/src/components/form/InputSearchProduct.tsx
index f9f8f68..51f84fd 100644
--- a/packages/frontend/src/components/form/InputSearchProduct.tsx
+++ b/packages/frontend/src/components/form/InputSearchProduct.tsx
@@ -60,7 +60,7 @@ export function InputSearchProduct({ selected, onChange,
products }: Props): VNo
<p class="media-meta"><Translate>Product id</Translate>:
<b>{selected.id}</b></p>
<p><Translate>Description</Translate>: {selected.description}</p>
<div class="buttons is-right mt-5">
- <button class="button" onClick={() =>
onChange(undefined)}>clear</button>
+ <button class="button is-info" onClick={() =>
onChange(undefined)}>clear</button>
</div>
</div>
</div>
@@ -71,9 +71,9 @@ export function InputSearchProduct({ selected, onChange,
products }: Props): VNo
<InputWithAddon<ProductSearch>
name="name"
- label={i18n`Name`}
- tooltip={i18n`search products using description or id`}
- addonBefore={<span class="icon" ><i class="mdi mdi-magnify" /></span>}
+ label={i18n`Product`}
+ tooltip={i18n`search products by it's description or id`}
+ addonAfter={<span class="icon" ><i class="mdi mdi-magnify" /></span>}
>
<div>
<ProductList
diff --git a/packages/frontend/src/components/form/InputSecured.tsx
b/packages/frontend/src/components/form/InputSecured.tsx
index 7f871c7..c9b0f43 100644
--- a/packages/frontend/src/components/form/InputSecured.tsx
+++ b/packages/frontend/src/components/form/InputSecured.tsx
@@ -48,7 +48,7 @@ export function InputSecured<T>({ name, readonly,
placeholder, tooltip, label, h
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputSelector.tsx
b/packages/frontend/src/components/form/InputSelector.tsx
index d787495..3e155d2 100644
--- a/packages/frontend/src/components/form/InputSelector.tsx
+++ b/packages/frontend/src/components/form/InputSelector.tsx
@@ -39,7 +39,7 @@ export function InputSelector<T>({ name, readonly, expand,
placeholder, tooltip,
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputStock.tsx
b/packages/frontend/src/components/form/InputStock.tsx
index a9200cd..158f441 100644
--- a/packages/frontend/src/components/form/InputStock.tsx
+++ b/packages/frontend/src/components/form/InputStock.tsx
@@ -51,7 +51,7 @@ interface StockDelta {
}
-export function InputStock<T>({ name, readonly, placeholder, tooltip, label,
help, alreadyExist }: Props<keyof T>) {
+export function InputStock<T>({ name, tooltip, label, alreadyExist }:
Props<keyof T>) {
const { error, value, onChange } = useField<T>(name);
const [errors, setErrors] = useState<FormErrors<Entity>>({})
@@ -79,7 +79,7 @@ export function InputStock<T>({ name, readonly, placeholder,
tooltip, label, hel
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/InputWithAddon.tsx
b/packages/frontend/src/components/form/InputWithAddon.tsx
index d2905df..a16ebc2 100644
--- a/packages/frontend/src/components/form/InputWithAddon.tsx
+++ b/packages/frontend/src/components/form/InputWithAddon.tsx
@@ -43,7 +43,7 @@ export function InputWithAddon<T>({ name, readonly,
addonBefore, children, expan
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/TextField.tsx
b/packages/frontend/src/components/form/TextField.tsx
index 50ea26a..2579a27 100644
--- a/packages/frontend/src/components/form/TextField.tsx
+++ b/packages/frontend/src/components/form/TextField.tsx
@@ -34,7 +34,7 @@ export function TextField<T>({ name, tooltip, label, expand,
help, children, sid
<div class="field-label is-normal">
<label class="label">
{label}
- {tooltip && <span class="icon" data-tooltip={tooltip}>
+ {tooltip && <span class="icon has-tooltip-right"
data-tooltip={tooltip}>
<i class="mdi mdi-information" />
</span>}
</label>
diff --git a/packages/frontend/src/components/form/DatePicker.tsx
b/packages/frontend/src/components/picker/DatePicker.tsx
similarity index 100%
rename from packages/frontend/src/components/form/DatePicker.tsx
rename to packages/frontend/src/components/picker/DatePicker.tsx
diff --git a/packages/frontend/src/components/form/DurationPicker.scss
b/packages/frontend/src/components/picker/DurationPicker.scss
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.scss
rename to packages/frontend/src/components/picker/DurationPicker.scss
diff --git a/packages/frontend/src/components/form/DurationPicker.stories.tsx
b/packages/frontend/src/components/picker/DurationPicker.stories.tsx
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.stories.tsx
rename to packages/frontend/src/components/picker/DurationPicker.stories.tsx
diff --git a/packages/frontend/src/components/form/DurationPicker.tsx
b/packages/frontend/src/components/picker/DurationPicker.tsx
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.tsx
rename to packages/frontend/src/components/picker/DurationPicker.tsx
diff --git a/packages/frontend/src/components/product/InventoryProductForm.tsx
b/packages/frontend/src/components/product/InventoryProductForm.tsx
index 6f05f26..8f05c97 100644
--- a/packages/frontend/src/components/product/InventoryProductForm.tsx
+++ b/packages/frontend/src/components/product/InventoryProductForm.tsx
@@ -79,14 +79,14 @@ export function InventoryProductForm({ currentProducts,
onAddProduct, inventory
return <FormProvider<Form> errors={errors} object={state}
valueHandler={setState}>
<InputSearchProduct selected={state.product} onChange={(p) => setState(v
=> ({ ...v, product: p }))} products={inventory} />
{ state.product && <div class="columns mt-5">
- <div class="column is-four-fifths">
+ <div class="column is-two-thirds">
{!productWithInfiniteStock &&
<InputNumber<Form> name="quantity" label={i18n`Quantity`}
tooltip={i18n`how many products will be added`} />
}
</div>
<div class="column">
<div class="buttons is-right">
- <button class="button is-success"
onClick={submit}><Translate>Add</Translate></button>
+ <button class="button is-success" onClick={submit}><Translate>Add
from inventory</Translate></button>
</div>
</div>
</div> }
diff --git
a/packages/frontend/src/components/product/NonInventoryProductForm.tsx
b/packages/frontend/src/components/product/NonInventoryProductForm.tsx
index 3ba4764..8bb1489 100644
--- a/packages/frontend/src/components/product/NonInventoryProductForm.tsx
+++ b/packages/frontend/src/components/product/NonInventoryProductForm.tsx
@@ -64,7 +64,7 @@ export function NonInventoryProductFrom({ productToEdit,
onAddProduct }: Props):
return <Fragment>
<div class="buttons">
- <button class="button is-success" onClick={() =>
setShowCreateProduct(true)} ><Translate>add custom product</Translate></button>
+ <button class="button is-success" data-tooltip={i18n`describe and add a
product that is not in the inventory list`} onClick={() =>
setShowCreateProduct(true)} ><Translate>Add custom product</Translate></button>
</div>
{showCreateProduct && <div class="modal is-active">
<div class="modal-background " onClick={() =>
setShowCreateProduct(false)} />
diff --git a/packages/frontend/src/paths/instance/orders/list/List.stories.tsx
b/packages/frontend/src/paths/instance/orders/list/List.stories.tsx
index e791f20..996c0aa 100644
--- a/packages/frontend/src/paths/instance/orders/list/List.stories.tsx
+++ b/packages/frontend/src/paths/instance/orders/list/List.stories.tsx
@@ -20,15 +20,25 @@
*/
import { h, VNode, FunctionalComponent } from 'preact';
-import { CardTable as TestedComponent } from './Table';
+import { ListPage as TestedComponent } from './ListPage';
export default {
title: 'Pages/Order/List',
component: TestedComponent,
argTypes: {
+ onShowAll: { action: 'onShowAll' },
+ onShowPaid: { action: 'onShowPaid' },
+ onShowRefunded: { action: 'onShowRefunded' },
+ onShowNotWired: { action: 'onShowNotWired' },
+ onCopyURL: { action: 'onCopyURL' },
+ onSelectDate: { action: 'onSelectDate' },
+ onLoadMoreBefore: { action: 'onLoadMoreBefore' },
+ onLoadMoreAfter: { action: 'onLoadMoreAfter' },
+ onSelectOrder: { action: 'onSelectOrder' },
+ onRefundOrder: { action: 'onRefundOrder' },
+ onSearchOrderById: { action: 'onSearchOrderById' },
onCreate: { action: 'onCreate' },
- goBack: { action: 'goBack' },
},
};
diff --git a/packages/frontend/src/paths/instance/orders/list/ListPage.tsx
b/packages/frontend/src/paths/instance/orders/list/ListPage.tsx
new file mode 100644
index 0000000..032801b
--- /dev/null
+++ b/packages/frontend/src/paths/instance/orders/list/ListPage.tsx
@@ -0,0 +1,146 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { format } from 'date-fns';
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { DatePicker } from '../../../../components/picker/DatePicker';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { Translate, useTranslator } from '../../../../i18n';
+import { CardTable } from './Table';
+
+export interface ListPageProps {
+ errorOrderId: string | undefined,
+
+ onShowAll: () => void,
+ onShowPaid: () => void,
+ onShowRefunded: () => void,
+ onShowNotWired: () => void,
+ onCopyURL: (id: string) => void;
+ isAllActive: string,
+ isPaidActive: string,
+ isRefundedActive: string,
+ isNotWiredActive: string,
+
+ jumpToDate?: Date,
+ onSelectDate: (date?: Date) => void,
+
+ orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[];
+ onLoadMoreBefore?: () => void;
+ hasMoreBefore?: boolean;
+ hasMoreAfter?: boolean;
+ onLoadMoreAfter?: () => void;
+
+ onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) =>
void;
+ onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) =>
void;
+ onSearchOrderById: (id: string) => void;
+ onCreate: () => void;
+}
+
+export function ListPage({ orders, errorOrderId, isAllActive, onSelectOrder,
onRefundOrder, onSearchOrderById, jumpToDate, onCopyURL, onShowAll, onShowPaid,
onShowRefunded, onShowNotWired, onSelectDate, isPaidActive, isRefundedActive,
isNotWiredActive, onCreate }: ListPageProps): VNode {
+ const i18n = useTranslator();
+ const dateTooltip = i18n`select date to show nearby orders`;
+ const [pickDate, setPickDate] = useState(false);
+ const [orderId, setOrderId] = useState<string>('');
+
+ return <section class="section is-main-section">
+
+ <div class="level">
+ <div class="level-left">
+ <div class="level-item">
+ <div class="field has-addons">
+ <div class="control">
+ <input class={errorOrderId ? "input is-danger" : "input"}
type="text" value={orderId} onChange={e => setOrderId(e.currentTarget.value)}
placeholder={i18n`order id`} />
+ {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
+ </div>
+ <span class="has-tooltip-bottom" data-tooltip={i18n`jump to order
with the given order ID`}>
+ <button class="button" onClick={(e) =>
onSearchOrderById(orderId)}>
+ <span class="icon"><i class="mdi mdi-arrow-right" /></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="columns">
+ <div class="column is-two-thirds">
+ <div class="tabs" style={{overflow:'inherit'}}>
+ <ul>
+ <li class={isAllActive}>
+ <div class="has-tooltip-right" data-tooltip={i18n`remove all
filters`}>
+ <a onClick={onShowAll}><Translate>All</Translate></a>
+ </div>
+ </li>
+ <li class={isPaidActive}>
+ <div class="has-tooltip-right" data-tooltip={i18n`only show paid
orders`}>
+ <a onClick={onShowPaid}><Translate>Paid</Translate></a>
+ </div>
+ </li>
+ <li class={isRefundedActive}>
+ <div class="has-tooltip-right" data-tooltip={i18n`only show
orders with refunds`}>
+ <a onClick={onShowRefunded}><Translate>Refunded</Translate></a>
+ </div>
+ </li>
+ <li class={isNotWiredActive}>
+ <div class="has-tooltip-left" data-tooltip={i18n`only show
orders where customers paid, but wire payments from payment provider are still
pending`}>
+ <a onClick={onShowNotWired}><Translate>Not
wired</Translate></a>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="column ">
+ <div class="buttons is-right">
+ <div class="field has-addons">
+ {jumpToDate && <div class="control">
+ <a class="button" onClick={() => onSelectDate(undefined)}>
+ <span class="icon" data-tooltip={i18n`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 ?
'' : format(jumpToDate, 'yyyy/MM/dd')} placeholder={i18n`date (YYYY/MM/DD)`}
onClick={() => { setPickDate(true); }} />
+ </span>
+ </div>
+ <div class="control">
+ <span class="has-tooltip-left" data-tooltip={dateTooltip}>
+ <a class="button" 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={onSelectDate} />
+
+ <CardTable orders={orders}
+ onCreate={onCreate}
+ onCopyURL={onCopyURL}
+ onSelect={onSelectOrder}
+ onRefund={onRefundOrder} />
+ </section>;
+}
diff --git a/packages/frontend/src/paths/instance/orders/list/Table.tsx
b/packages/frontend/src/paths/instance/orders/list/Table.tsx
index 64a5d22..50da549 100644
--- a/packages/frontend/src/paths/instance/orders/list/Table.tsx
+++ b/packages/frontend/src/paths/instance/orders/list/Table.tsx
@@ -32,7 +32,6 @@ import { MerchantBackend, WithId } from
"../../../../declaration";
import { Translate, useTranslator } from "../../../../i18n";
import { RefundSchema } from "../../../../schemas";
import { mergeRefunds } from "../../../../utils/amount";
-import { AMOUNT_ZERO_REGEX } from "../../../../utils/constants";
import { Amounts } from "@gnu-taler/taler-util";
import { useConfigContext } from "../../../../context/config";
diff --git a/packages/frontend/src/paths/instance/orders/list/index.tsx
b/packages/frontend/src/paths/instance/orders/list/index.tsx
index 85ba58b..a4e8b15 100644
--- a/packages/frontend/src/paths/instance/orders/list/index.tsx
+++ b/packages/frontend/src/paths/instance/orders/list/index.tsx
@@ -19,18 +19,17 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { format } from 'date-fns';
-import { h, VNode } from 'preact';
+import { h, VNode, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import { Loading } from '../../../../components/exception/loading';
-import { DatePicker } from '../../../../components/form/DatePicker';
import { NotificationCard } from '../../../../components/menu';
-import { MerchantBackend } from '../../../../declaration';
+import { MerchantBackend, WithId } from '../../../../declaration';
import { HttpError } from '../../../../hooks/backend';
import { InstanceOrderFilter, useInstanceOrders, useOrderAPI, useOrderDetails
} from '../../../../hooks/order';
-import { Translate, useTranslator } from '../../../../i18n';
+import { useTranslator } from '../../../../i18n';
import { Notification } from '../../../../utils/types';
-import { CardTable, RefundModal } from './Table';
+import { RefundModal } from './Table';
+import { ListPage } from './ListPage';
interface Props {
onUnauthorized: () => VNode;
@@ -40,22 +39,17 @@ interface Props {
onCreate: () => void;
}
-
export default function ({ onUnauthorized, onLoadError, onCreate, onSelect,
onNotFound }: Props): VNode {
const [filter, setFilter] = useState<InstanceOrderFilter>({})
- const [pickDate, setPickDate] = useState(false)
const [orderToBeRefunded, setOrderToBeRefunded] =
useState<MerchantBackend.Orders.OrderHistoryEntry | undefined>(undefined)
- const setNewDate = (date: Date) => setFilter(prev => ({ ...prev, date }))
+ const setNewDate = (date?: Date) => setFilter(prev => ({ ...prev, date }))
const result = useInstanceOrders(filter, setNewDate)
const { refundOrder, getPaymentURL } = useOrderAPI()
const [notif, setNotif] = useState<Notification | undefined>(undefined)
- const [orderId, setOrderId] = useState<string | undefined>(undefined)
- const [errorOrderId, setErrorOrderId] = useState<string |
undefined>(undefined)
-
if (result.clientError && result.isUnauthorized) return onUnauthorized()
if (result.clientError && result.isNotfound) return onNotFound()
if (result.loading) return <Loading />
@@ -66,7 +60,10 @@ export default function ({ onUnauthorized, onLoadError,
onCreate, onSelect, onNo
const isNotWiredActive = filter.wired === 'no' ? "is-active" : ''
const isAllActive = filter.paid === undefined && filter.refunded ===
undefined && filter.wired === undefined ? 'is-active' : ''
- async function testIfOrderExistAndSelect() {
+ const i18n = useTranslator()
+ const [errorOrderId, setErrorOrderId] = useState<string |
undefined>(undefined)
+
+ async function testIfOrderExistAndSelect(orderId: string) {
if (!orderId) {
setErrorOrderId(i18n`Enter an order id`)
return;
@@ -80,95 +77,35 @@ export default function ({ onUnauthorized, onLoadError,
onCreate, onSelect, onNo
}
}
- const i18n = useTranslator()
- const dateTooltip = i18n`select date to show nearby orders`
-
- return <section class="section is-main-section">
+ return <Fragment>
<NotificationCard notification={notif} />
- <div class="level">
- <div class="level-left">
- <div class="level-item">
- <div class="field has-addons">
- <div class="control">
- <input class={errorOrderId ? "input is-danger" : "input"}
type="text" value={orderId} onChange={e => setOrderId(e.currentTarget.value)}
placeholder={i18n`order id`} />
- {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
- </div>
- <span class="has-tooltip-bottom" data-tooltip={i18n`jump to order
with the given order ID`}>
- <button class="button" onClick={testIfOrderExistAndSelect}>
- <span class="icon"><i class="mdi mdi-arrow-right" /></span>
- </button>
- </span>
- </div>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column">
- <div class="tabs">
- <ul>
- <li class={isAllActive}>
- <div class="has-tooltip-right" data-tooltip={i18n`remove all
filters`}>
- <a onClick={() => setFilter({})}><Translate>All</Translate></a>
- </div>
- </li>
- <li class={isPaidActive}>
- <div class="has-tooltip-right" data-tooltip={i18n`only show paid
orders`}>
- <a onClick={() => setFilter({ paid: 'yes'
})}><Translate>Paid</Translate></a>
- </div>
- </li>
- <li class={isRefundedActive}>
- <div class="has-tooltip-right" data-tooltip={i18n`only show
orders with refunds`}>
- <a onClick={() => setFilter({ refunded: 'yes'
})}><Translate>Refunded</Translate></a>
- </div>
- </li>
- <li class={isNotWiredActive}>
- <div class="has-tooltip-left" data-tooltip={i18n`only show
orders where customers paid, but wire payments from payment provider are still
pending`}>
- <a onClick={() => setFilter({ wired: 'no' })}><Translate>Not
wired</Translate></a>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="column ">
- <div class="buttons is-right">
- <div class="field has-addons">
- {filter.date && <div class="control">
- <a class="button" onClick={() => { setFilter(prev => ({ ...prev,
date: undefined })) }}>
- <span class="icon" data-tooltip={i18n`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
? '' : format(filter.date, 'yyyy/MM/dd')} placeholder={i18n`date (YYYY/MM/DD)`}
onClick={() => { setPickDate(true) }} />
- </span>
- </div>
- <div class="control">
- <span class="has-tooltip-left" data-tooltip={dateTooltip}>
- <a class="button" 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={setNewDate}
- />
-
- <CardTable orders={result.data.orders.map(o => ({ ...o, id: o.order_id }))}
- onCreate={onCreate}
- onSelect={(order) => onSelect(order.id)}
- onCopyURL={(id) => getPaymentURL(id).then((resp) =>
copyToClipboard(resp.data))}
- onRefund={(value) => setOrderToBeRefunded(value)}
+ <ListPage
+ orders={result.data.orders.map(o => ({ ...o, id: o.order_id }))}
onLoadMoreBefore={result.loadMorePrev}
hasMoreBefore={!result.isReachingStart}
onLoadMoreAfter={result.loadMore} hasMoreAfter={!result.isReachingEnd}
+
+ onSelectOrder={(order) => onSelect(order.id)}
+ onRefundOrder={(value) => setOrderToBeRefunded(value)}
+
+ errorOrderId={errorOrderId}
+ isAllActive={isAllActive}
+ isNotWiredActive={isNotWiredActive}
+ isPaidActive={isPaidActive}
+ isRefundedActive={isRefundedActive}
+ jumpToDate={filter.date}
+ onCopyURL={(id) => getPaymentURL(id).then((resp) =>
copyToClipboard(resp.data))}
+
+ onCreate={onCreate}
+ onSearchOrderById={testIfOrderExistAndSelect}
+ onSelectDate={setNewDate}
+ onShowAll={() => setFilter({})}
+ onShowNotWired={() => setFilter({ paid: 'yes' })}
+ onShowPaid={() => setFilter({ refunded: 'yes' })}
+ onShowRefunded={() => setFilter({ wired: 'no' })}
+
/>
+
{orderToBeRefunded && <RefundModalForTable
id={orderToBeRefunded.order_id}
onCancel={() => setOrderToBeRefunded(undefined)}
@@ -182,16 +119,15 @@ export default function ({ onUnauthorized, onLoadError,
onCreate, onSelect, onNo
type: "ERROR",
description: error.message
}))
- .then(() => setOrderToBeRefunded(undefined))
- }
+ .then(() => setOrderToBeRefunded(undefined))}
onLoadError={(error) => {
setNotif({
message: i18n`could not create the refund`,
type: "ERROR",
description: error.message
- })
- setOrderToBeRefunded(undefined)
- return <div />
+ });
+ setOrderToBeRefunded(undefined);
+ return <div />;
}}
onUnauthorized={onUnauthorized}
onNotFound={() => {
@@ -199,12 +135,11 @@ export default function ({ onUnauthorized, onLoadError,
onCreate, onSelect, onNo
message: i18n`could not get the order to refund`,
type: "ERROR",
// description: error.message
- })
- setOrderToBeRefunded(undefined)
- return <div />
- }}
- />}
- </section>
+ });
+ setOrderToBeRefunded(undefined);
+ return <div />;
+ }} />}
+ </Fragment>
}
interface RefundProps {
diff --git a/packages/frontend/src/scss/main.scss
b/packages/frontend/src/scss/main.scss
index 100cadc..d59a1db 100644
--- a/packages/frontend/src/scss/main.scss
+++ b/packages/frontend/src/scss/main.scss
@@ -175,3 +175,7 @@ input:read-only {
span[data-tooltip] {
border-bottom: none;
}
+
+div[data-tooltip]::before {
+ position: absolute;
+}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-merchant-backoffice] branch master updated (61f845b -> 0399b8a),
gnunet <=