ci4sManagement-cloud/react-ui/src/pages/Pipeline/components/CodeSelectorModal/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-11 16:31:18
 * @Description: 选择代码
 */

import KFModal from '@/components/KFModal';
import { type CodeConfigData } from '@/pages/CodeConfig/List';
import { getCodeConfigListReq } from '@/services/codeConfig';
import { to } from '@/utils/promise';
import { Icon } from '@umijs/max';
import type { ModalProps, PaginationProps } from 'antd';
import { Empty, Input, Pagination } from 'antd';
import { useEffect, useState } from 'react';
import CodeConfigItem from '../CodeConfigItem';
import styles from './index.less';

export { type CodeConfigData };

export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
  onOk?: (params: CodeConfigData | undefined) => void;
}

function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
  const [dataList, setDataList] = useState<CodeConfigData[]>([]);
  const [total, setTotal] = useState(0);
  const [pagination, setPagination] = useState<PaginationProps>({
    current: 1,
    pageSize: 20,
  });
  const [searchText, setSearchText] = useState<string | undefined>(undefined);
  const [inputText, setInputText] = useState<string | undefined>(undefined);

  useEffect(() => {
    getDataList();
  }, [pagination, searchText]);

  // 获取数据请求
  const getDataList = async () => {
    const params = {
      page: pagination.current! - 1,
      size: pagination.pageSize,
      code_repo_name: searchText !== '' ? searchText : undefined,
    };
    const [res] = await to(getCodeConfigListReq(params));
    if (res && res.data && res.data.content) {
      setDataList(res.data.content);
      setTotal(res.data.totalElements);
    }
  };

  // 搜索
  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const handleClick = (item: CodeConfigData) => {
    onOk?.(item);
  };

  // 分页切换
  const handlePageChange: PaginationProps['onChange'] = (page, pageSize) => {
    setPagination({
      current: page,
      pageSize: pageSize,
    });
  };

  return (
    <KFModal
      {...rest}
      title="选择代码配置"
      image={require('@/assets/img/modal-code-config.png')}
      width={920}
      footer={null}
      destroyOnClose
    >
      <div className={styles['code-selector']}>
        <Input.Search
          className={styles['code-selector__search']}
          placeholder="按代码仓库名称筛选"
          allowClear
          onSearch={handleSearch}
          size="large"
          onChange={(e) => setInputText(e.target.value)}
          suffix={null}
          value={inputText}
          prefix={
            <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
          }
        />
        {dataList?.length !== 0 ? (
          <>
            <div className={styles['code-selector__content']}>
              {dataList?.map((item) => (
                <CodeConfigItem item={item} key={item.id} onClick={handleClick} />
              ))}
            </div>
            <Pagination
              align="center"
              total={total}
              showSizeChanger
              defaultPageSize={20}
              pageSizeOptions={[20, 40, 60, 80, 100]}
              showQuickJumper
              onChange={handlePageChange}
              {...pagination}
            />
          </>
        ) : (
          <div className={styles['code-selector__empty']}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
          </div>
        )}
      </div>
    </KFModal>
  );
}

export default CodeSelectorModal;