fix: list add paging

web/app/components/base/pagination/index.tsx

@@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import cn from '@/utils/classnames'
 
-type Props = {
+export type Props = {
   className?: string
   current: number
   onChange: (cur: number) => void

web/app/components/datasets/documents/index.tsx

@@ -13,7 +13,6 @@ import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import Pagination from '@/app/components/base/pagination'
 import { get } from '@/service/base'
 import { createDocument, fetchDocuments } from '@/service/datasets'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
@@ -22,8 +21,6 @@ import type { NotionPage } from '@/models/common'
 import type { CreateDocumentReq } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
 import RetryButton from '@/app/components/base/retry-button'
-// Custom page count is not currently supported.
-const limit = 15
 
 const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
   return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
@@ -75,12 +72,14 @@ type IDocumentsProps = {
 }
 
 export const fetcher = (url: string) => get(url, {}, {})
+const DEFAULT_LIMIT = 15
 
 const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const { t } = useTranslation()
   const [inputValue, setInputValue] = useState<string>('') // the input value
   const [searchValue, setSearchValue] = useState<string>('')
   const [currPage, setCurrPage] = React.useState<number>(0)
+  const [limit, setLimit] = useState<number>(DEFAULT_LIMIT)
   const router = useRouter()
   const { dataset } = useDatasetDetailContext()
   const [notionPageSelectorModalVisible, setNotionPageSelectorModalVisible] = useState(false)
@@ -94,7 +93,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
 
   const query = useMemo(() => {
     return { page: currPage + 1, limit, keyword: debouncedSearchValue, fetch: isDataSourceNotion ? true : '' }
-  }, [currPage, debouncedSearchValue, isDataSourceNotion])
+  }, [currPage, debouncedSearchValue, isDataSourceNotion, limit])
 
   const { data: documentsRes, error, mutate } = useSWR(
     {
@@ -246,13 +245,20 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
         {isLoading
           ? <Loading type='app' />
           : total > 0
-            ? <List embeddingAvailable={embeddingAvailable} documents={documentsList || []} datasetId={datasetId} onUpdate={mutate} />
+            ? <List
+              embeddingAvailable={embeddingAvailable}
+              documents={documentsList || []}
+              datasetId={datasetId} onUpdate={mutate}
+              pagination={{
+                total,
+                limit,
+                onLimitChange: setLimit,
+                current: currPage,
+                onChange: setCurrPage,
+              }}
+            />
             : <EmptyElement canAdd={embeddingAvailable} onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
         }
-        {/* Show Pagination only if the total is more than the limit */}
-        {(total && total > limit)
-          ? <Pagination current={currPage} onChange={setCurrPage} total={total} limit={limit} />
-          : null}
         <NotionPageSelectorModal
           isShow={notionPageSelectorModalVisible}
           onClose={() => setNotionPageSelectorModalVisible(false)}

web/app/components/datasets/documents/list.tsx

@@ -39,6 +39,8 @@ import { ChuckingMode, DataSourceType, type DocumentDisplayStatus, type SimpleDo
 import type { CommonResponse } from '@/models/common'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
+import type { Props as PaginationProps } from '@/app/components/base/pagination'
+import Pagination from '@/app/components/base/pagination'
 
 export const useIndexStatus = () => {
   const { t } = useTranslation()
@@ -381,13 +383,20 @@ type IDocumentListProps = {
   embeddingAvailable: boolean
   documents: LocalDoc[]
   datasetId: string
+  pagination: PaginationProps
   onUpdate: () => void
 }
 
 /**
  * Document list component including basic information
  */
-const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents = [], datasetId, onUpdate }) => {
+const DocumentList: FC<IDocumentListProps> = ({
+  embeddingAvailable,
+  documents = [],
+  datasetId,
+  pagination,
+  onUpdate,
+}) => {
   const { t } = useTranslation()
   const { formatTime } = useTimestamp()
   const router = useRouter()
@@ -427,7 +436,7 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
   }, [onUpdate])
 
   return (
-    <div className='w-full h-full overflow-x-auto'>
+    <div className='relative w-full h-full overflow-x-auto'>
       <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
         <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-medium text-xs uppercase">
           <tr>
@@ -520,6 +529,13 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
           })}
         </tbody>
       </table>
+      {/* Show Pagination only if the total is more than the limit */}
+      {pagination.total && pagination.total > (pagination.limit || 10) && (
+        <Pagination
+          {...pagination}
+          className='absolute bottom-0 left-0 w-full px-0 pb-0'
+        />
+      )}
 
       {isShowRenameModal && currDocument && (
         <RenameModal