Skip to content

Commit

Permalink
fix:fix transfer billing (#4837)
Browse files Browse the repository at this point in the history
  • Loading branch information
@xudaotutou
xudaotutou authored Jul 9, 2024
1 parent 9ef2a3e commit 02a7510
Show file tree
Hide file tree
Showing 16 changed files with 195 additions and 94 deletions.
10 changes: 10 additions & 0 deletions frontend/providers/costcenter/public/locales/en/applist.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"TERMINAL": "TERMINAL",
"JOB":"JOB",
"OTHER": "OTHER",
"OBJECT-STORAGE": "OBJECT-STORAGE",
"CLOUD-VM":"CLOUD-VM",
"DB": "DATABASE",
"APP": "APP",
"All APP": "ALL"
}
6 changes: 4 additions & 2 deletions frontend/providers/costcenter/public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,11 @@
"Remaining Quota": "remaining",
"Receipts And Disbursements": "Receipts And Disbursements",
"APP Name": "App name",
"All APP": "all",
"APP Type": "App type",
"Details": "Details",
"Transfer Type":"Transfer Type",
"Handle": "Handle",
"currencyUnit": "Currency Unit"
"currencyUnit": "Currency Unit",
"Trader ID":"Trader"

}
10 changes: 10 additions & 0 deletions frontend/providers/costcenter/public/locales/zh/applist.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"TERMINAL": "终端",
"JOB":"任务",
"OTHER": "其他",
"OBJECT-STORAGE": "对象存储",
"CLOUD-VM":"云主机",
"DB": "数据库",
"APP": "应用",
"All APP": "所有应用"
}
6 changes: 4 additions & 2 deletions frontend/providers/costcenter/public/locales/zh/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,11 @@
"Remaining Quota": "剩余",
"Receipts And Disbursements": "收支",
"APP Name": "应用名称",
"All APP": "所有应用",

"APP Type": "应用类型",
"Transfer Type": "转账类型",
"Details": "详情",
"Handle": "操作",
"currencyUnit": "金额单位"
"currencyUnit": "金额单位",
"Trader ID": "交易用户"
}
6 changes: 2 additions & 4 deletions frontend/providers/costcenter/src/components/billing/AppMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export default function AppMenu({
const { setAppType } = useBillingStore();
const { isOpen, onClose, onOpen } = useDisclosure();
const { t } = useTranslation();
const appList: string[] = [t('All APP'), ...(data?.data?.appList || [])];
const { t: appT } = useTranslation('applist');
const appList: string[] = ['All APP', ...(data?.data?.appList || [])].map((v) => appT(v));
return (
<Flex align={'center'} ml="28px" {...props}>
<Popover onClose={onClose} onOpen={onOpen} isOpen={isOpen}>
Expand Down Expand Up @@ -91,9 +92,6 @@ export default function AppMenu({
setAppType(idx === 0 ? '' : appList[idx]);
onClose();
}}
// _hover={{
// bg: ''
// }}
>
{v}
</Button>
Expand Down
4 changes: 3 additions & 1 deletion frontend/providers/costcenter/src/components/billing/SwitchPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ export default function SwitchPage({
return (
<Flex minW="370px" h="32px" align={'center'} mt={'20px'} {...props}>
<Text>{t('Total')}:</Text>
<Flex w="40px">{totalItem}</Flex>
<Flex minW="40px" mr="5px">
{totalItem}
</Flex>
<Flex gap={'8px'}>
<Button
{...switchStyle}
Expand Down
41 changes: 19 additions & 22 deletions frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import useOverviewStore from '@/stores/overview';
import { useContext, useEffect, useState } from 'react';
import { BillingData, BillingSpec, BillingType } from '@/types';
import {
ApiResp,
BillingData,
BillingSpec,
BillingType,
TransferBilling,
TransferBillingData,
TransferType
} from '@/types';
import { useQuery } from '@tanstack/react-query';
import { formatISO } from 'date-fns';
import request from '@/service/request';
Expand All @@ -17,7 +25,7 @@ import useBillingStore from '@/stores/billing';
export default function TransferTabPanel() {
const startTime = useOverviewStore((state) => state.startTime);
const endTime = useOverviewStore((state) => state.endTime);
const [selectType, setType] = useState<BillingType>(BillingType.ALL);
const [selectType, setType] = useState<TransferType>(TransferType.ALL);
const [orderID, setOrderID] = useState('');
const [totalPage, setTotalPage] = useState(1);
const [currentPage, setcurrentPage] = useState(1);
Expand All @@ -28,7 +36,7 @@ export default function TransferTabPanel() {
setcurrentPage(1);
}, [startTime, endTime, selectType, namespace]);
const { data, isFetching, isSuccess } = useQuery(
['billing', { currentPage, startTime, endTime, orderID, selectType, namespace }],
['billing', { currentPage, startTime, endTime, orderID, selectType, namespace, pageSize }],
() => {
const spec = {
page: currentPage,
Expand All @@ -38,25 +46,23 @@ export default function TransferTabPanel() {
// startTime,
endTime: formatISO(endTime, { representation: 'complete' }),
// endTime,
namespace,
// orderID
orderID
};
return request<any, { data: BillingData }, { spec: BillingSpec }>('/api/billing', {
return request<any, ApiResp<TransferBillingData>>('/api/billing/transfer', {
method: 'POST',
data: {
spec
}
data: spec
});
},
{
onSuccess(data) {
const totalPage = data.data.status.pageLength;
const totalPage = data.data?.totalPage || 0;
if (totalPage === 0) {
// 搜索时的bug
setTotalPage(1);
setTotalItem(1);
} else {
setTotalItem(data.data.status.totalCount);
setTotalItem(data.data?.total || 0);
setTotalPage(totalPage);
}
if (totalPage < currentPage) setcurrentPage(1);
Expand All @@ -65,7 +71,7 @@ export default function TransferTabPanel() {
}
);
const { t } = useTranslation();
const tableResult = data?.data?.status?.item || [];
const tableResult = data?.data?.transfers || [];
return (
<TabPanel p="0" flex={1} display={'flex'} flexDirection={'column'}>
<Flex alignItems={'center'} flexWrap={'wrap'}>
Expand All @@ -79,22 +85,13 @@ export default function TransferTabPanel() {
<Text fontSize={'12px'} mr={'12px'} width={['60px', '60px', 'auto', 'auto']}>
{t('Type')}
</Text>
<TypeMenu
selectType={selectType}
setType={setType}
isDisabled={isFetching}
optional={[BillingType.ALL, BillingType.RECEIVE, BillingType.TRANSFER]}
/>
<TypeMenu selectType={selectType} setType={setType} isDisabled={isFetching} />
</Flex>
<SearchBox isDisabled={isFetching} setOrderID={setOrderID} />
</Flex>
{isSuccess && tableResult.length > 0 ? (
<>
<TransferBillingTable
data={tableResult.filter((x) =>
[BillingType.RECEIVE, BillingType.TRANSFER].includes(x.type)
)}
/>
<TransferBillingTable data={tableResult} />
<Flex justifyContent={'flex-end'}>
<SwitchPage
totalPage={totalPage}
Expand Down
16 changes: 7 additions & 9 deletions frontend/providers/costcenter/src/components/billing/TypeMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { LIST_TYPE } from '@/constants/billing';
import { BillingType } from '@/types';
import { TRANSFER_LIST_TYPE } from '@/constants/billing';
import { TransferType } from '@/types';
import { Button, Popover, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { Dispatch, SetStateAction } from 'react';

export default function TypeMenu({
isDisabled,
selectType,
setType,
optional
setType
}: {
optional: BillingType[];
isDisabled: boolean;
selectType: BillingType;
setType: Dispatch<SetStateAction<BillingType>>;
selectType: TransferType;
setType: Dispatch<SetStateAction<TransferType>>;
}) {
const { isOpen, onClose, onOpen } = useDisclosure();
const { t } = useTranslation();
Expand Down Expand Up @@ -41,7 +39,7 @@ export default function TypeMenu({
}}
borderRadius={'2px'}
>
{t(LIST_TYPE[selectType + 1].title)}
{t(TRANSFER_LIST_TYPE[selectType].title)}
</Button>
</PopoverTrigger>
<PopoverContent
Expand All @@ -51,7 +49,7 @@ export default function TypeMenu({
shadow={'0px 0px 1px 0px #798D9F40, 0px 2px 4px 0px #A1A7B340'}
border={'none'}
>
{LIST_TYPE.filter((x) => optional.includes(x.value)).map((v) => (
{TRANSFER_LIST_TYPE.map((v) => (
<Button
variant={'white-bg-icon'}
key={v.value}
Expand Down
72 changes: 35 additions & 37 deletions frontend/providers/costcenter/src/components/billing/billingTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { TableHeaderID } from '@/constants/billing';
import { BillingItem, BillingType, RechargeBillingItem } from '@/types/billing';
import lineDown from '@/assert/lineDown.svg';
import lineUp from '@/assert/lineUp.svg';
import { BillingItem, BillingType, RechargeBillingItem, TransferBilling } from '@/types/billing';
import {
Box,
Flex,
Expand Down Expand Up @@ -32,7 +30,9 @@ import {
} from '@tanstack/react-table';
import { useMemo } from 'react';
import Amount from '@/components/billing/AmountTableHeader';

import useSessionStore from '@/stores/session';
import lineUp from '@/assert/lineUp.svg';
import lineDown from '@/assert/lineDown.svg';
export function CommonBillingTable({
data,
isOverview = false,
Expand Down Expand Up @@ -172,13 +172,16 @@ export function CommonBillingTable({
return <BaseTable table={table} {...styles} />;
}

export function TransferBillingTable({ data }: { data: BillingItem[] }) {
export function TransferBillingTable({ data }: { data: TransferBilling[] }) {
const { t } = useTranslation();
const currency = useEnvStore((s) => s.currency);
const { session } = useSessionStore();
const user = session.user;

const columns = useMemo(() => {
const columnHelper = createColumnHelper<BillingItem>();
const columnHelper = createColumnHelper<TransferBilling>();
const customTh = (needCurrency?: boolean) =>
function CustomTh({ header }: HeaderContext<BillingItem, unknown>) {
function CustomTh({ header }: HeaderContext<TransferBilling, unknown>) {
return (
<Flex display={'flex'} alignItems={'center'}>
<Text mr="4px">{t(header.id)}</Text>
Expand All @@ -191,44 +194,51 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
);
};
return [
columnHelper.accessor((row) => row.order_id, {
columnHelper.accessor((row) => row.ID, {
header: customTh(),
id: TableHeaderID.OrderNumber,
enablePinning: true,
cell(props) {
const item = props.row.original;
return (
<Box>
<Text color={'#24282C'} fontSize={'12px'}>
{item.order_id}
</Text>
<Text fontSize={'10px'} color={'#5A646E'}>
{item.namespace}
{item.ID}
</Text>
</Box>
);
}
}),
columnHelper.accessor((row) => row.time, {
columnHelper.accessor((row) => row.CreatedAt, {
header: customTh(),
id: TableHeaderID.TransactionTime,
enablePinning: true,
cell(props) {
return format(parseISO(props.cell.getValue()), 'MM-dd HH:mm');
}
}),
columnHelper.accessor((row) => row.appType, {
id: TableHeaderID.APPType,
columnHelper.accessor((row) => [row.FromUserID, row.ToUserID], {
header: customTh(),
id: TableHeaderID.TraderID,
cell(props) {
const item = props.row.original;
const traderId = item.ToUserID === user.id ? item.FromUserID : item.ToUserID;
return traderId;
}
}),
columnHelper.accessor((row) => [row.ToUserID, row.FromUserID], {
id: TableHeaderID.TransferType,
header: customTh(),
cell(props) {
const item = props.row.original;
const billingType =
item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
return (
<Flex align={'center'} width={'full'} height={'full'}>
<Flex
px={'12px'}
py={'4px'}
minW={'max-content'}
{...(item.type === BillingType.RECEIVE
{...(billingType === BillingType.RECEIVE
? {
bg: '#E6F6F6',
color: '#00A9A6'
Expand All @@ -242,43 +252,31 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
justify={'space-evenly'}
>
<Img
src={item.type === BillingType.TRANSFER ? lineDown.src : lineUp.src}
src={billingType === BillingType.TRANSFER ? lineDown.src : lineUp.src}
w="13.14px"
mr={'6px'}
></Img>
<Text>{item.type === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
<Text>{billingType === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
</Flex>
</Flex>
);
}
}),
columnHelper.accessor((row) => row.amount, {
columnHelper.accessor((row) => row.Amount, {
header: customTh(true),
id: TableHeaderID.TotalAmount,
cell(props) {
const original = props.row.original;
return <Amount total={true} type={original.type} amount={props.cell.getValue()} />;
}
}),
columnHelper.accessor((row) => row.namespace, {
id: TableHeaderID.Namespace,
header: customTh(),
cell(props) {
const item = props.cell.getValue();
return <span>{item}</span>;
const item = props.row.original;
const billingType =
item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
return <Amount total={true} type={billingType} amount={props.cell.getValue()} />;
}
})
];
}, [useEnvStore.getState().gpuEnabled, t, currency]);
}, [useEnvStore.getState().gpuEnabled, t, currency, user]);

const table = useReactTable({
data,
state: {
columnPinning: {
left: [TableHeaderID.OrderNumber],
right: [TableHeaderID.Namespace]
}
},
columns,
getCoreRowModel: getCoreRowModel()
});
Expand Down
Loading

0 comments on commit 02a7510

Please sign in to comment.