From 4b5f08ccc2399449a158a74164dbd7b77dff7b1e Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 19 Mar 2025 09:27:30 +0800 Subject: [PATCH] chore: add delete action in table fetch hook --- src/hooks/use-table-fetch.ts | 38 +++++++++++- src/pages/api-keys/index.tsx | 37 +++--------- src/pages/resources/components/workers.tsx | 70 +++++++--------------- src/pages/users/config/types.ts | 1 + src/pages/users/index.tsx | 39 +++--------- 5 files changed, 75 insertions(+), 110 deletions(-) diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index d1fbdfdc..fd331a7c 100644 --- a/src/hooks/use-table-fetch.ts +++ b/src/hooks/use-table-fetch.ts @@ -1,12 +1,16 @@ import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; +import { handleBatchRequest } from '@/utils'; import _ from 'lodash'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; export default function useTableFetch(options: { fetchAPI: (params: any) => Promise>; + deleteAPI?: (id: number) => Promise; + contentForDelete?: string; }) { - const { fetchAPI } = options; + const { fetchAPI, deleteAPI, contentForDelete } = options; + const modalRef = useRef(null); const rowSelection = useTableRowSelection(); const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' @@ -91,6 +95,33 @@ export default function useTableFetch(options: { }); }; + const handleDelete = (row: ListItem & { name: string; id: number }) => { + modalRef.current.show({ + content: contentForDelete, + operation: 'common.delete.single.confirm', + name: row.name, + async onOk() { + console.log('OK'); + await deleteAPI?.(row.id); + fetchData(); + } + }); + }; + + const handleDeleteBatch = () => { + modalRef.current.show({ + content: contentForDelete, + operation: 'common.delete.confirm', + selection: true, + async onOk() { + if (!deleteAPI) return; + await handleBatchRequest(rowSelection.selectedRowKeys, deleteAPI); + rowSelection.clearSelections(); + fetchData(); + } + }); + }; + useEffect(() => { fetchData(); }, []); @@ -100,6 +131,9 @@ export default function useTableFetch(options: { rowSelection, sortOrder, queryParams, + modalRef, + handleDelete, + handleDeleteBatch, fetchData, handlePageChange, handleTableChange, diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index 6668f8fd..d251a5d0 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -5,7 +5,6 @@ import { PageAction } from '@/config'; import HotKeys from '@/config/hotkeys'; import type { PageActionType } from '@/config/types'; import useTableFetch from '@/hooks/use-table-fetch'; -import { handleBatchRequest } from '@/utils'; import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-components'; import { useIntl } from '@umijs/max'; @@ -19,7 +18,7 @@ import { Tooltip } from 'antd'; import dayjs from 'dayjs'; -import { useRef, useState } from 'react'; +import { useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { deleteApisKey, queryApisKeysList } from './apis'; import AddAPIKeyModal from './components/add-apikey'; @@ -33,17 +32,21 @@ const APIKeys: React.FC = () => { rowSelection, queryParams, sortOrder, + modalRef, + handleDelete, + handleDeleteBatch, fetchData, handlePageChange, handleTableChange, handleSearch, handleNameChange } = useTableFetch({ - fetchAPI: queryApisKeysList + fetchAPI: queryApisKeysList, + deleteAPI: deleteApisKey, + contentForDelete: 'apikeys.table.apikeys' }); const intl = useIntl(); - const modalRef = useRef(null); const [openAddModal, setOpenAddModal] = useState(false); const [action, setAction] = useState(PageAction.CREATE); @@ -67,32 +70,6 @@ const APIKeys: React.FC = () => { setOpenAddModal(false); }; - const handleDelete = (row: ListItem) => { - modalRef.current.show({ - content: 'apikeys.table.apikeys', - operation: 'common.delete.single.confirm', - name: row.name, - async onOk() { - console.log('OK'); - await deleteApisKey(row.id); - fetchData(); - } - }); - }; - - const handleDeleteBatch = () => { - modalRef.current.show({ - content: 'apikeys.table.apikeys', - operation: 'common.delete.confirm', - selection: true, - async onOk() { - await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey); - rowSelection.clearSelections(); - fetchData(); - } - }); - }; - const renderEmpty = (type?: string) => { if (type !== 'Table') return; if ( diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 9199930a..4d43b137 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -7,7 +7,7 @@ import InfoColumn from '@/components/simple-table/info-column'; import StatusTag from '@/components/status-tag'; import Hotkeys from '@/config/hotkeys'; import useTableFetch from '@/hooks/use-table-fetch'; -import { convertFileSize, handleBatchRequest } from '@/utils'; +import { convertFileSize } from '@/utils'; import { DeleteOutlined, EditOutlined, @@ -27,7 +27,7 @@ import { message } from 'antd'; import _ from 'lodash'; -import { useCallback, useRef, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { deleteWorker, queryWorkersList, updateWorker } from '../apis'; import { WorkerStatusMapValue, status } from '../config'; @@ -80,25 +80,42 @@ const ActionList = [ } ]; +const formateUtilazation = (val1: number, val2: number): number => { + if (!val2 || !val1) { + return 0; + } + return _.round((val1 / val2) * 100, 0); +}; + +const calcStorage = (files: Filesystem[]) => { + const mountRoot = _.find( + files, + (item: Filesystem) => item.mount_point === '/' + ); + return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0; +}; + const Workers: React.FC = () => { const { dataSource, rowSelection, queryParams, - sortOrder, + modalRef, + handleDelete, + handleDeleteBatch, fetchData, handlePageChange, handleTableChange, handleSearch, handleNameChange } = useTableFetch({ - fetchAPI: queryWorkersList + fetchAPI: queryWorkersList, + deleteAPI: deleteWorker, + contentForDelete: 'worker' }); - const modalRef = useRef(null); const intl = useIntl(); const [open, setOpen] = useState(false); - const [updateLabelsData, setUpdateLabelsData] = useState<{ open: boolean; data: ListItem; @@ -107,51 +124,10 @@ const Workers: React.FC = () => { data: {} as ListItem }); - const formateUtilazation = (val1: number, val2: number): number => { - if (!val2 || !val1) { - return 0; - } - return _.round((val1 / val2) * 100, 0); - }; - - const calcStorage = (files: Filesystem[]) => { - const mountRoot = _.find( - files, - (item: Filesystem) => item.mount_point === '/' - ); - return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0; - }; - const handleAddWorker = () => { setOpen(true); }; - const handleDelete = (row: ListItem) => { - modalRef.current.show({ - content: 'worker', - operation: 'common.delete.single.confirm', - name: row.name, - async onOk() { - console.log('OK'); - await deleteWorker(row.id); - fetchData(); - } - }); - }; - - const handleDeleteBatch = () => { - modalRef.current.show({ - content: 'wokers', - operation: 'common.delete.confirm', - selection: true, - async onOk() { - await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker); - rowSelection.clearSelections(); - fetchData(); - } - }); - }; - const handleUpdateLabelsOk = useCallback( async (values: Record) => { try { diff --git a/src/pages/users/config/types.ts b/src/pages/users/config/types.ts index 63ea11a7..22d83a6b 100644 --- a/src/pages/users/config/types.ts +++ b/src/pages/users/config/types.ts @@ -3,6 +3,7 @@ export interface ListItem { is_admin: boolean; full_name: string; id: number; + username: string; created_at: string; updated_at: string; } diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index 8d38060c..ffb14b54 100644 --- a/src/pages/users/index.tsx +++ b/src/pages/users/index.tsx @@ -6,7 +6,6 @@ import { PageAction } from '@/config'; import HotKeys from '@/config/hotkeys'; import type { PageActionType } from '@/config/types'; import useTableFetch from '@/hooks/use-table-fetch'; -import { handleBatchRequest } from '@/utils'; import { DeleteOutlined, EditOutlined, @@ -27,7 +26,7 @@ import { message } from 'antd'; import dayjs from 'dayjs'; -import { useRef, useState } from 'react'; +import { useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { createUser, deleteUser, queryUsersList, updateUser } from './apis'; import AddModal from './components/add-modal'; @@ -56,17 +55,21 @@ const Users: React.FC = () => { rowSelection, queryParams, sortOrder, + modalRef, + handleDelete, + handleDeleteBatch, fetchData, handlePageChange, handleTableChange, handleSearch, handleNameChange } = useTableFetch({ - fetchAPI: queryUsersList + fetchAPI: queryUsersList, + deleteAPI: deleteUser, + contentForDelete: 'users.table.user' }); const intl = useIntl(); - const modalRef = useRef(null); const [openAddModal, setOpenAddModal] = useState(false); const [action, setAction] = useState(PageAction.CREATE); @@ -110,32 +113,6 @@ const Users: React.FC = () => { setOpenAddModal(false); }; - const handleDelete = (row: ListItem) => { - modalRef.current.show({ - content: 'users.table.user', - operation: 'common.delete.single.confirm', - name: row.name, - async onOk() { - console.log('OK'); - await deleteUser(row.id); - fetchData(); - } - }); - }; - - const handleDeleteBatch = () => { - modalRef.current.show({ - content: 'users.table.user', - operation: 'common.delete.confirm', - selection: true, - async onOk() { - await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser); - rowSelection.clearSelections(); - fetchData(); - } - }); - }; - const handleEditUser = (row: ListItem) => { setCurrentData(row); setOpenAddModal(true); @@ -147,7 +124,7 @@ const Users: React.FC = () => { if (val === 'edit') { handleEditUser(row); } else if (val === 'delete') { - handleDelete(row); + handleDelete({ ...row, name: row.username }); } };