From 768073ddac486af5d4072cdccbaf13abe5382d3e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 5 Dec 2024 17:34:29 +0800
Subject: [PATCH] feat: batch action ui

---
 .../detail/completed/batch-action.tsx         | 21 ++++++++++++++-----
 .../components/datasets/documents/list.tsx    | 20 ++++++++++++++++++
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
index 7a55784e70..b464334c14 100644
--- a/web/app/components/datasets/documents/detail/completed/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
@@ -1,14 +1,15 @@
 import React, { type FC } from 'react'
-import { RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine } from '@remixicon/react'
+import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 import classNames from '@/utils/classnames'
 
 type IBatchActionProps = {
   className?: string
   selectedIds: string[]
-  onBatchEnable: () => Promise<void>
-  onBatchDisable: () => Promise<void>
-  onBatchDelete: () => Promise<void>
+  onBatchEnable: () => void
+  onBatchDisable: () => void
+  onBatchDelete: () => void
+  onArchive?: () => void
   onCancel: () => void
 }
 
@@ -17,6 +18,7 @@ const BatchAction: FC<IBatchActionProps> = ({
   selectedIds,
   onBatchEnable,
   onBatchDisable,
+  onArchive,
   onBatchDelete,
   onCancel,
 }) => {
@@ -42,15 +44,24 @@ const BatchAction: FC<IBatchActionProps> = ({
             Disable
           </button>
         </div>
+        {onArchive && (
+          <div className='flex items-center gap-x-0.5 px-3 py-2'>
+            <RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
+            <button className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
+              Archive
+            </button>
+          </div>
+        )}
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
           <RiDeleteBinLine className='w-4 h-4 text-components-button-destructive-ghost-text' />
           <button className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDelete}>
             Delete
           </button>
         </div>
+
         <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
         <button className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
-            Cancel
+          Cancel
         </button>
       </div>
     </div>
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index cd7162603b..a30ec339e4 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -21,6 +21,7 @@ import { Globe01 } from '../../base/icons/src/vender/line/mapsAndTravel'
 import ChunkingModeLabel from '../common/chunking-mode-label'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
+import BatchAction from './detail/completed/batch-action'
 import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
@@ -576,6 +577,25 @@ const DocumentList: FC<IDocumentListProps> = ({
           })}
         </tbody>
       </table>
+      {(selectedIds.length > 0) && (
+        <BatchAction
+          className='absolute left-0 bottom-16 z-20'
+          selectedIds={selectedIds}
+          onArchive={() => { }}
+          onBatchEnable={() => {
+
+          }}
+          onBatchDisable={() => {
+
+          }}
+          onBatchDelete={() => {
+
+          }}
+          onCancel={() => {
+            onSelectedIdChange([])
+          }}
+        />
+      )}
       {/* Show Pagination only if the total is more than the limit */}
       {pagination.total && pagination.total > (pagination.limit || 10) && (
         <Pagination