feat: add contributor search

Signed-off-by: laixingyou <[email protected]>

apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/ContributorDropdown.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+// import { AiOutlineSearch } from 'react-icons/ai';
+import { Button, Input } from 'antd';
+import { useTranslation } from 'next-i18next';
+
+const ContributorDropdown = ({ selectedKeys, setSelectedKeys, confirm }) => {
+  const { t } = useTranslation();
+  const [contributor, setContributor] = useState(selectedKeys);
+
+  const handleSearch = () => {
+    setSelectedKeys(contributor);
+    confirm();
+  };
+  const handleReset = () => {
+    setContributor([]);
+  };
+  return (
+    <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
+      <Input
+        placeholder={t('analyze:metric_detail:search_contributor')}
+        value={contributor[0]}
+        onChange={(e) => setContributor([e.target.value])}
+        onPressEnter={() => handleSearch()}
+        style={{ marginBottom: 8, display: 'block' }}
+      />
+      <div className="flex justify-between">
+        <Button
+          type="link"
+          disabled={contributor[0] ? false : true}
+          onClick={() => handleReset()}
+          size="small"
+        >
+          {t('analyze:metric_detail:reset')}
+        </Button>
+        <Button
+          type="primary"
+          className="flex items-center"
+          onClick={() => handleSearch()}
+          size="small"
+        >
+          {t('analyze:metric_detail:search')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ContributorDropdown;

apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx

@@ -17,17 +17,19 @@ import { getMaxDomain } from '../utils';
 import { getContributorPolling, getContributorExport } from './tableDownload';
 import DomainPersona from './DomainPersona';
 import ContributorName from './ContributorName';
+import ContributorDropdown from './ContributorDropdown';
 import { useTranslation } from 'next-i18next';
 import Download from '@common/components/Table/Download';
 import { useRouter } from 'next/router';
 import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParams';
 import Dialog from '@common/components/Dialog';
 import Tooltip from '@common/components/Tooltip';
-import { FiEdit } from 'react-icons/fi';
-import { GrClose } from 'react-icons/gr';
 import ManageOrgEdit from '@common/components/OrgEdit/ManageOrgEdit';
 import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
 import { useIsCurrentUser } from '@modules/analyze/hooks/useIsCurrentUser';
+import { FiEdit } from 'react-icons/fi';
+import { GrClose } from 'react-icons/gr';
+import { AiOutlineSearch } from 'react-icons/ai';
 
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
@@ -90,13 +92,12 @@ const MetricTable: React.FC<{
         return `${t('analyze:total_people', { total })} `;
       },
     },
-    filterOpts: filterOpts,
     sortOpts: defaultSortOpts,
   });
   const query = {
     page: tableParams.pagination.current,
     per: tableParams.pagination.pageSize,
-    filterOpts: [...tableParams.filterOpts, mileageFilter],
+    filterOpts: [...filterOpts, mileageFilter],
     sortOpts: tableParams.sortOpts,
     label,
     level,
@@ -113,7 +114,7 @@ const MetricTable: React.FC<{
     {
       onSuccess: (data) => {
         const items = data.contributorsDetailList.items;
-        const hasTypeFilter = tableParams.filterOpts.find(
+        const hasTypeFilter = filterOpts.find(
           (i) => i.type === 'contribution_type'
         );
         if (hasTypeFilter) {
@@ -149,7 +150,7 @@ const MetricTable: React.FC<{
     for (const key in filters) {
       if (filters.hasOwnProperty(key)) {
         const transformedObj = {
-          type: filterMap[key],
+          type: filterMap[key] || key,
           values: filters[key] as string[],
         };
         filters[key] && filterOpts.push(transformedObj);
@@ -180,7 +181,6 @@ const MetricTable: React.FC<{
         ...pagination,
       },
       sortOpts,
-      filterOpts,
     });
   };
 
@@ -190,11 +190,27 @@ const MetricTable: React.FC<{
       dataIndex: 'contributor',
       align: 'left',
       width: '200px',
-      sorter: true,
       fixed: 'left',
       render: (name) => {
         return <ContributorName name={name} origin={origin} />;
       },
+      filterIcon: (filtered: boolean) => (
+        <AiOutlineSearch
+          className="text-lg"
+          style={{ color: filtered ? '#1677ff' : undefined }}
+        />
+      ),
+      defaultFilteredValue:
+        defaultFilterOpts.find((i) => i.type === 'contributor')?.values || null,
+      filterDropdown: ({ selectedKeys, setSelectedKeys, confirm }) => {
+        return (
+          <ContributorDropdown
+            selectedKeys={selectedKeys}
+            setSelectedKeys={setSelectedKeys}
+            confirm={confirm}
+          />
+        );
+      },
     },
     {
       title: t('analyze:metric_detail:role_persona'),

apps/web/src/styles/antd.scss

@@ -1,6 +1,9 @@
-.ant-table-filter-dropdown-btns {
+.ant-table-filter-dropdown {
   .ant-btn-primary {
     background-color: #1677ff !important;
+    // :hover {
+    //   background-color: #4096ff !important;
+    // }
   }
 }
 .ant-progress-bg {