schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix auditlog cannot fetch more data problem

Browse Source
This commit is contained in:
moonrailgun 2024-07-03 00:02:24 +08:00
parent b7670da7db
commit 1b859e3176
2 changed files with 62 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/SimpleVirtualList.tsx
View File

@ -1,5 +1,6 @@
import { useWatch } from '@/hooks/useWatch'; import { useWatch } from '@/hooks/useWatch';
import { VirtualItem, useVirtualizer } from '@tanstack/react-virtual'; import { useTranslation } from '@i18next-toolkit/react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Empty } from 'antd'; import { Empty } from 'antd';
import { last } from 'lodash-es'; import { last } from 'lodash-es';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
@ -9,8 +10,9 @@ interface VirtualListProps<T = any> {
hasNextPage: boolean | undefined; hasNextPage: boolean | undefined;
isFetchingNextPage: boolean; isFetchingNextPage: boolean;
onFetchNextPage: () => void; onFetchNextPage: () => void;
estimateSize: (index: number) => number; estimateSize: number;
renderItem: (item: VirtualItem) => React.ReactElement; renderItem: (item: T) => React.ReactElement;
renderEmpty?: () => React.ReactElement;
} }
export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo( export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
(props) => { (props) => {
@ -21,14 +23,15 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
onFetchNextPage, onFetchNextPage,
estimateSize, estimateSize,
renderItem, renderItem,
renderEmpty,
} = props; } = props;
const parentRef = useRef<HTMLDivElement>(null); const parentRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation();
const rowVirtualizer = useVirtualizer({ const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allData.length + 1 : allData.length, count: hasNextPage ? allData.length + 1 : allData.length,
getScrollElement: () => parentRef.current, getScrollElement: () => parentRef.current,
estimateSize, estimateSize: () => estimateSize,
overscan: 5, overscan: 5,
}); });
@ -52,7 +55,7 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
return ( return (
<div ref={parentRef} className="h-full w-full overflow-auto"> <div ref={parentRef} className="h-full w-full overflow-auto">
{virtualItems.length === 0 && <Empty />} {virtualItems.length === 0 && (renderEmpty ? renderEmpty() : <Empty />)}
<div <div
className="relative w-full" className="relative w-full"
@ -60,7 +63,27 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
height: `${rowVirtualizer.getTotalSize()}px`, height: `${rowVirtualizer.getTotalSize()}px`,
}} }}
> >
{virtualItems.map((virtualItem) => renderItem(virtualItem))} {virtualItems.map((virtualItem) => {
const isLoaderRow = virtualItem.index > allData.length - 1;
const data = allData[virtualItem.index];
return (
<div
key={virtualItem.index}
className="absolute left-0 top-0 w-full"
style={{
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
>
{isLoaderRow
? hasNextPage
? t('Loading more...')
: t('Nothing more to load')
: renderItem(data)}
</div>
);
})}
</div> </div>
</div> </div>
); );

85
src/client/routes/settings/auditLog.tsx
View File

@ -26,9 +26,14 @@ function PageComponent() {
const parentRef = useRef<HTMLDivElement>(null); const parentRef = useRef<HTMLDivElement>(null);
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
trpc.auditLog.fetchByCursor.useInfiniteQuery({ trpc.auditLog.fetchByCursor.useInfiniteQuery(
workspaceId, {
}); workspaceId,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
const allData = useMemo(() => { const allData = useMemo(() => {
if (!data) { if (!data) {
@ -65,57 +70,31 @@ function PageComponent() {
return ( return (
<CommonWrapper header={<CommonHeader title={t('Audit Log')} />}> <CommonWrapper header={<CommonHeader title={t('Audit Log')} />}>
<ScrollArea className="h-full overflow-hidden p-4"> <div className="h-full overflow-hidden p-4">
<List> <SimpleVirtualList
<SimpleVirtualList allData={allData}
allData={allData} hasNextPage={hasNextPage}
hasNextPage={hasNextPage} isFetchingNextPage={isFetchingNextPage}
isFetchingNextPage={isFetchingNextPage} onFetchNextPage={fetchNextPage}
onFetchNextPage={fetchNextPage} estimateSize={48}
estimateSize={() => 48} renderItem={(item) => {
renderItem={(item) => { return (
const isLoaderRow = item.index > allData.length - 1; <div className="flex h-full w-full items-center overflow-hidden border-b border-white border-opacity-10 text-sm">
const data = allData[item.index]; {item.relatedType && <ColorTag label={item.relatedType} />}
<div
return ( className="mr-2 w-9 text-xs opacity-60"
<List.Item title={dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
key={item.index}
className="absolute left-0 top-0 w-full"
style={{
height: `${item.size}px`,
transform: `translateY(${item.start}px)`,
}}
> >
{isLoaderRow ? ( {dayjs(item.createdAt).format('MM-DD HH:mm')}
hasNextPage ? ( </div>
t('Loading more...') <div className="h-full flex-1 overflow-auto">
) : ( {item.content}
t('Nothing more to load') </div>
) </div>
) : ( );
<div className="flex h-7 items-center overflow-hidden"> }}
{data.relatedType && ( />
<ColorTag label={data.relatedType} /> </div>
)}
<div
className="mr-2 w-9 text-xs opacity-60"
title={dayjs(data.createdAt).format(
'YYYY-MM-DD HH:mm:ss'
)}
>
{dayjs(data.createdAt).format('MM-DD HH:mm')}
</div>
<div className="h-full flex-1 overflow-auto">
{data.content}
</div>
</div>
)}
</List.Item>
);
}}
/>
</List>
</ScrollArea>
</CommonWrapper> </CommonWrapper>
); );
} }