auto-bid-admin/src/components/bid/delete-row-action.tsx

@@ -1,22 +1,38 @@
-import { ActionIcon } from "@mantine/core";
+import { Button } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useChoosesStore } from "../../lib/zustand/use-chooses-store";
-import { IBid } from "../../system/type";
+import { useConfirmStore } from "../../lib/zustand/use-confirm";
+import { deletesBid } from "../../apis/bid";
 
-export interface IDeleteRowActionProps {
-  onClick?: () => void;
-  data: IBid
-}
+export default function DeleteRowAction({
+  onDeleted,
+}: {
+  onDeleted?: () => void;
+}) {
+  const { chooses } = useChoosesStore();
 
-export default function DeleteRowAction({ data,onClick }: IDeleteRowActionProps) {
-
-
-    const {chooses} = useChoosesStore()
+  const { setConfirm } = useConfirmStore();
 
+  const handleDelete = () => {
+    setConfirm({
+      handleOk: async () => {
+        const result = await deletesBid(chooses);
+        if (!result) return;
+        onDeleted?.();
+      },
+      title: 'Delete',
+      message: `This action will remove ${chooses.length} products.`
+    });
+  };
 
   return (
-    <ActionIcon disabled={!chooses.some(item => item.id === data.id)} onClick={onClick} size={"sm"} color="red">
-      <IconTrash size={14} />
-    </ActionIcon>
+    <Button
+      onClick={handleDelete}
+      disabled={chooses.length <= 0}
+      size={"xs"}
+      color="red"
+    >
+      <IconTrash size={16} />
+    </Button>
   );
 }

auto-bid-admin/src/lib/table/action.tsx

@@ -35,6 +35,7 @@ export interface ITableActionsProps<R extends Record<string, string | number>> {
     props?: TextInputProps;
     render?: () => ReactNode;
   };
+  showMainAction?: boolean;
   refAction?: TRefTableActionFn;
   selectProps?: SelectProps;
   leftActionSession?: ReactNode;
@@ -55,9 +56,10 @@ export default function TableActions<
   actions,
   chooses,
   refAction,
+  leftActionSession,
+  showMainAction = true,
   onSearch,
   renderComfirm,
-  leftActionSession,
   onCloseComfirm,
 }: ITableActionsProps<R>) {
   const [opened, { toggle, close }] = useDisclosure(false);
@@ -259,6 +261,7 @@ export default function TableActions<
         <Box className="flex items-end gap-4">
           {leftActionSession}
 
+          {showMainAction && (
             <Select
               size="xs"
               value={selectValue}
@@ -269,6 +272,7 @@ export default function TableActions<
               data={actionDataMemo}
               {...selectProps}
             />
+          )}
         </Box>
       )}
 

auto-bid-admin/src/pages/bids.tsx

@@ -16,7 +16,8 @@ import {
   IconHammer,
   IconHistory,
   IconMenu,
-  IconPlus
+  IconPlus,
+  IconTrash,
 } from "@tabler/icons-react";
 import _ from "lodash";
 import { useMemo, useRef, useState } from "react";
@@ -27,25 +28,25 @@ import {
   ShowHistoriesBidPicklesApiModal,
   ShowHistoriesModal,
 } from "../components/bid";
-import DeleteRowAction from "../components/bid/delete-row-action";
 import constants, { haveHistories } from "../constant";
 import Table from "../lib/table/table";
 import { IColumn, TRefTableFn } from "../lib/table/type";
-import { useChoosesStore } from "../lib/zustand/use-chooses-store";
 import { useConfirmStore } from "../lib/zustand/use-confirm";
 import { mappingStatusColors } from "../system/constants";
 import { IBid } from "../system/type";
 import { extractDomainSmart, formatTime } from "../utils";
+import DeleteRowAction from "../components/bid/delete-row-action";
+import { useChoosesStore } from "../lib/zustand/use-chooses-store";
 
 export default function Bids() {
   const refTableFn: TRefTableFn<IBid> = useRef({});
 
   const [clickData, setClickData] = useState<IBid | null>(null);
 
-  const {setChooses} = useChoosesStore()
-
   const { setConfirm } = useConfirmStore();
 
+  const { setChooses } = useChoosesStore();
+
   const [openedHistories, historiesModel] = useDisclosure(false);
   const [openedHistoriesGraysApi, historiesGraysApiModel] =
     useDisclosure(false);
@@ -67,6 +68,7 @@ export default function Bids() {
       renderRow(row) {
         return (
           <Anchor
+            target="_blank"
             className="text-[14px]"
             href={row.url}
             size="sm"
@@ -80,7 +82,7 @@ export default function Bids() {
     {
       key: "web_bid",
       title: "Web",
-      typeFilter: "text",
+      typeFilter: "none",
       renderRow(row) {
         return <span>{extractDomainSmart(row.web_bid.origin_url)}</span>;
       },
@@ -88,7 +90,7 @@ export default function Bids() {
     {
       key: "lot_id",
       title: "Lot ID",
-      typeFilter: "text",
+      typeFilter: "none",
     },
     {
       key: "model",
@@ -99,22 +101,22 @@ export default function Bids() {
     {
       key: "plus_price",
       title: "Plus price",
-      typeFilter: "number",
+      typeFilter: "none",
     },
     {
       key: "max_price",
       title: "Max price",
-      typeFilter: "number",
+      typeFilter: "none",
     },
     {
       key: "current_price",
       title: "Current price",
-      typeFilter: "number",
+      typeFilter: "none",
     },
     {
       key: "reserve_price",
       title: "Reserve price",
-      typeFilter: "number",
+      typeFilter: "none",
     },
     {
       key: "histories",
@@ -129,7 +131,7 @@ export default function Bids() {
     {
       key: "start_bid_time",
       title: "Start bid",
-      typeFilter: "text",
+      typeFilter: "none",
       renderRow(row) {
         return (
           <Tooltip hidden={!row.start_bid_time} label={row.start_bid_time}>
@@ -145,7 +147,7 @@ export default function Bids() {
     {
       key: "close_time",
       title: "Close time",
-      typeFilter: "text",
+      typeFilter: "date",
       renderRow(row) {
         return (
           <Tooltip hidden={!row.close_time} label={row.close_time}>
@@ -161,7 +163,23 @@ export default function Bids() {
     {
       key: "status",
       title: "Status",
-      typeFilter: "text",
+      typeFilter: {
+        type: "select",
+        data: [
+          {
+            label: "Biding",
+            value: "biding",
+          },
+          {
+            label: "Win bid",
+            value: "win-bid",
+          },
+          {
+            label: "Out bid",
+            value: "out-bid",
+          },
+        ],
+      },
       renderRow(row) {
         return (
           <Box className="flex items-center justify-center">
@@ -219,14 +237,8 @@ export default function Bids() {
           },
         }}
         actionsOptions={{
+          showMainAction: false,
           actions: [
-            // {
-            //   key: "add",
-            //   title: "Add",
-            //   callback: () => {
-            //     bidModal.open();
-            //   },
-            // },
             {
               key: "delete",
               title: "Delete",
@@ -249,8 +261,18 @@ export default function Bids() {
             },
           ],
           leftActionSession: (
-            <Button onClick={bidModal.open} size="xs" rightSection={<IconPlus size={14}/>}>Add</Button>
-          )
+            <Box className="flex items-end gap-2">
+              <Button
+                onClick={bidModal.open}
+                size="xs"
+                rightSection={<IconPlus size={14} />}
+              >
+                Add
+              </Button>
+
+              <DeleteRowAction onDeleted={refTableFn.current?.fetchData} />
+            </Box>
+          ),
         }}
         refTableFn={refTableFn}
         striped
@@ -360,7 +382,13 @@ export default function Bids() {
                   </Menu.Dropdown>
                 </Menu>
 
-                <DeleteRowAction data={row} onClick={() => handleDelete(row)} />
+                <ActionIcon
+                  onClick={() => handleDelete(row)}
+                  size={"sm"}
+                  color="red"
+                >
+                  <IconTrash size={14} />
+                </ActionIcon>
               </Box>
             );
           },

auto-bid-server/src/modules/bids/services/bids.service.ts

@@ -53,10 +53,11 @@ export class BidsService {
         | true;
     } = {
       id: true,
-      model: true,
+      model: [FilterOperator.ILIKE],
       lot_id: true,
       close_time: true,
-      name: true,
+      name: [FilterOperator.ILIKE],
+      status: true
     };
 
     query.filter = AppResponse.processFilters(query.filter, filterableColumns);