144 lines
3.3 KiB
TypeScript
144 lines
3.3 KiB
TypeScript
import {
|
|
Alert,
|
|
Button,
|
|
Group,
|
|
MultiSelect,
|
|
Progress,
|
|
Stack,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { DatePickerInput } from "@mantine/dates";
|
|
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
LedgerEntryRow,
|
|
type OperationCategory,
|
|
operationCategories,
|
|
} from "@/entities/broker-operation";
|
|
import { StateView } from "@/shared/ui";
|
|
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
|
|
|
|
type AccountOperationsPageLoadedProps = Extract<
|
|
AccountOperationsPageViewModel,
|
|
{ state: "loaded" }
|
|
>;
|
|
|
|
const operationCategorySet = new Set<string>(operationCategories);
|
|
|
|
function fromMultiSelectValue(value: string[]) {
|
|
return value.filter((item): item is OperationCategory =>
|
|
operationCategorySet.has(item),
|
|
);
|
|
}
|
|
|
|
const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
|
|
props,
|
|
) => {
|
|
const {
|
|
canApply,
|
|
draftCategories,
|
|
draftFrom,
|
|
draftTo,
|
|
hasNext,
|
|
hasPrevious,
|
|
items,
|
|
onApply,
|
|
onDraftCategoriesChange,
|
|
onDraftFromChange,
|
|
onDraftToChange,
|
|
onNext,
|
|
onPrevious,
|
|
onReset,
|
|
} = props;
|
|
const { t } = useTranslation();
|
|
|
|
const categoryData = operationCategories.map((category) => ({
|
|
value: category,
|
|
label: t(`ledger.category.${category}`),
|
|
}));
|
|
|
|
return (
|
|
<Stack gap="lg">
|
|
<Title order={1}>{t("ledger.title")}</Title>
|
|
{props.refreshing ? (
|
|
<Progress value={100} animated aria-label={t("accounts.refreshing")} />
|
|
) : null}
|
|
{props.refreshError ? (
|
|
<Alert color="yellow">
|
|
{t("accounts.refreshError")}
|
|
<Button variant="subtle" onClick={props.retry}>
|
|
{t("accounts.retry")}
|
|
</Button>
|
|
</Alert>
|
|
) : null}
|
|
<Group align="end">
|
|
<DatePickerInput
|
|
type="range"
|
|
allowSingleDateInRange
|
|
clearable
|
|
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
|
label={t("ledger.period")}
|
|
value={[draftFrom, draftTo]}
|
|
onChange={([from, to]) => {
|
|
onDraftFromChange(from);
|
|
onDraftToChange(to);
|
|
}}
|
|
valueFormat="DD.MM.YYYY"
|
|
popoverProps={{
|
|
returnFocus: true,
|
|
middlewares: { shift: { crossAxis: true } },
|
|
}}
|
|
/>
|
|
</Group>
|
|
<MultiSelect
|
|
label={t("ledger.categories")}
|
|
placeholder={t("ledger.categoriesPlaceholder")}
|
|
data={categoryData}
|
|
value={draftCategories}
|
|
onChange={(value) =>
|
|
onDraftCategoriesChange(fromMultiSelectValue(value))
|
|
}
|
|
clearable
|
|
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
|
/>
|
|
<Group>
|
|
<Button onClick={onApply} disabled={!canApply}>
|
|
{t("ledger.apply")}
|
|
</Button>
|
|
<Button variant="default" onClick={onReset}>
|
|
{t("ledger.reset")}
|
|
</Button>
|
|
</Group>
|
|
{items.length ? (
|
|
items.map((operation) => (
|
|
<LedgerEntryRow
|
|
key={JSON.stringify([
|
|
operation.account?.id,
|
|
operation.id,
|
|
operation.logoName,
|
|
])}
|
|
operation={operation}
|
|
/>
|
|
))
|
|
) : (
|
|
<StateView
|
|
title={t("ledger.emptyTitle")}
|
|
text={t("ledger.emptyText")}
|
|
/>
|
|
)}
|
|
{hasNext || hasPrevious ? (
|
|
<Group justify="space-between">
|
|
<Button disabled={!hasPrevious} onClick={onPrevious}>
|
|
{t("ledger.previous")}
|
|
</Button>
|
|
<Button disabled={!hasNext} onClick={onNext}>
|
|
{t("ledger.next")}
|
|
</Button>
|
|
</Group>
|
|
) : null}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { AccountOperationsPageLoaded };
|