antd#PaginationProps TypeScript Examples

ApiMarketList = () => {
  const [{ keyword, ...state }, updater, update] = useUpdate<IState>({
    keyword: '',
    visible: false,
    scope: 'asset',
    mode: 'add',
    assetDetail: {},
    showApplyModal: false,
    showExportModal: false,
  });
  const [assetList, assetListPaging] = apiMarketStore.useStore((s) => [s.assetList, s.assetListPaging]);
  const { scope } = routeInfoStore.useStore((s) => s.params) as { scope: API_MARKET.AssetScope };
  const { getAssetList } = apiMarketStore.effects;
  const { resetAssetList } = apiMarketStore.reducers;
  const [isFetchList] = useLoading(apiMarketStore, ['getAssetList']);
  useUnmount(() => {
    resetAssetList();
  });
  const getList = (params: Pick<API_MARKET.QueryAssets, 'keyword' | 'pageNo' | 'scope' | 'pageSize'>) => {
    getAssetList({
      ...commonQuery,
      ...params,
    });
  };
  useDebounce(
    () => {
      getList({ keyword, pageNo: 1, scope });
    },
    200,
    [keyword, scope],
  );

  const reload = () => {
    getList({ keyword, pageNo: 1, scope });
  };

  const filterConfig = React.useMemo(
    (): Field[] => [
      {
        label: '',
        type: 'input',
        outside: true,
        key: 'keyword',
        placeholder: i18n.t('default:Search by keyword'),
        customProps: {
          autoComplete: 'off',
        },
      },
    ],
    [],
  );

  const handleSearch = (query: Record<string, any>) => {
    updater.keyword(query.keyword);
  };

  const handleTableChange = ({ pageSize, current }: PaginationProps) => {
    getList({ keyword, pageNo: current, pageSize, scope });
  };

  const handleManage = ({ assetID }: API_MARKET.Asset) => {
    goTo(goTo.pages.apiManageAssetVersions, { scope, assetID });
  };

  const gotoVersion = ({ asset, latestVersion }: API_MARKET.AssetListItem) => {
    goTo(goTo.pages.apiManageAssetDetail, { assetID: asset.assetID, scope, versionID: latestVersion.id });
  };

  const handleApply = (record: API_MARKET.Asset) => {
    update({
      showApplyModal: true,
      assetDetail: record || {},
    });
  };

  const closeModal = () => {
    update({
      visible: false,
      showApplyModal: false,
      assetDetail: {},
    });
  };

  const showAssetModal = (assetScope: IScope, mode: IMode, record?: API_MARKET.Asset) => {
    update({
      scope: assetScope,
      mode,
      visible: true,
      assetDetail: record || {},
    });
  };

  const toggleExportModal = () => {
    updater.showExportModal((prev: boolean) => !prev);
  };

  const columns: Array<ColumnProps<API_MARKET.AssetListItem>> = [
    {
      title: i18n.t('API name'),
      dataIndex: ['asset', 'assetName'],
      width: 240,
    },
    {
      title: i18n.t('API description'),
      dataIndex: ['asset', 'desc'],
    },
    {
      title: 'API ID',
      dataIndex: ['asset', 'assetID'],
      width: 200,
    },
    {
      title: i18n.t('Update time'),
      dataIndex: ['asset', 'updatedAt'],
      width: 200,
      render: (date) => moment(date).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: i18n.t('Creator'),
      dataIndex: ['asset', 'creatorID'],
      width: 160,
      render: (text) => (
        <Tooltip title={<UserInfo id={text} />}>
          <UserInfo.RenderWithAvatar id={text} />
        </Tooltip>
      ),
    },
  ];

  const actions: IActions<API_MARKET.AssetListItem> = {
    render: (record) => {
      const { permission, asset } = record;
      const { manage, addVersion, hasAccess } = permission;
      return [
        {
          title: i18n.t('Export'),
          onClick: () => {
            exportApi
              .fetch({
                versionID: record.latestVersion.id,
                specProtocol,
              })
              .then(() => {
                toggleExportModal();
              });
          },
        },
        {
          title: i18n.t('manage'),
          onClick: () => {
            handleManage(asset);
          },
          show: manage,
        },
        {
          title: i18n.t('add {name}', { name: i18n.t('Version') }),
          onClick: () => {
            showAssetModal('version', 'add', asset);
          },
          show: !!addVersion,
        },
        {
          title: i18n.t('apply to call'),
          onClick: () => {
            handleApply(asset);
          },
          show: hasAccess,
        },
      ];
    },
  };

  return (
    <div className="api-market-list">
      <TopButtonGroup>
        <Button onClick={toggleExportModal}>{i18n.t('Export Records')}</Button>
        <Button
          type="primary"
          onClick={() => {
            showAssetModal('asset', 'add');
          }}
        >
          {i18n.t('default:Add Resource')}
        </Button>
      </TopButtonGroup>
      <ErdaTable
        rowKey="asset.assetID"
        columns={columns}
        dataSource={assetList}
        pagination={{
          ...assetListPaging,
          current: assetListPaging.pageNo,
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              gotoVersion(record);
            },
          };
        }}
        onChange={handleTableChange}
        loading={isFetchList}
        actions={actions}
        slot={<ConfigurableFilter fieldsList={filterConfig} onFilter={handleSearch} />}
      />
      <AssetModal
        visible={state.visible}
        scope={state.scope}
        mode={state.mode}
        formData={state.assetDetail as API_MARKET.Asset}
        onCancel={closeModal}
        afterSubmit={reload}
      />
      <ApplyModal
        visible={state.showApplyModal}
        onCancel={closeModal}
        dataSource={state.assetDetail as API_MARKET.Asset}
      />
      <ExportRecord visible={state.showExportModal} onCancel={toggleExportModal} />
    </div>
  );
}

ClientDetail = () => {
  const [{ showSecret, SLAVisible, selectRecord, trafficAuditVisible }, updater, update] = useUpdate<IState>({
    showSecret: false,
    SLAVisible: false,
    trafficAuditVisible: false,
    selectRecord: {},
  });
  const [
    clientDetail,
    disprovedContractList,
    disprovedContractPaging,
    provedContractList,
    provedContractPaging,
    provingContractList,
    provingContractPaging,
    unprovedContractList,
    unprovedContractPaging,
  ] = apiClientStore.useStore((s) => [
    s.clientDetail,
    s.disprovedContractList,
    s.disprovedContractPaging,
    s.provedContractList,
    s.provedContractPaging,
    s.provingContractList,
    s.provingContractPaging,
    s.unprovedContractList,
    s.unprovedContractPaging,
  ]);
  const slaList = apiAccessStore.useStore((s) => s.slaList);
  const { getSlaList, updateContracts } = apiAccessStore.effects;
  const { clearSla } = apiAccessStore.reducers;
  const params = routeInfoStore.useStore((s) => s.params);
  const { getClientDetail, getContractList } = apiClientStore.effects;
  const { clearContractList, clearClientDetail } = apiClientStore.reducers;
  const [isUpdateSLA] = useLoading(apiAccessStore, ['updateContracts']);
  const [isFetchDetail, isFetchList] = useLoading(apiClientStore, ['getClientDetail', 'getContractList']);
  React.useEffect(() => {
    if (params.id) {
      getClientDetail({ clientID: +params.id }).then((res) => {
        getContractList({ status: defaultStatue, paging: true, pageNo: 1, clientID: res.client.id });
      });
    }
    return () => {
      clearContractList();
      clearClientDetail();
      clearSla();
    };
  }, [clearClientDetail, clearContractList, clearSla, getClientDetail, getContractList, params.id]);
  const handleChangeTable = (status: API_CLIENT.ContractStatue, { current, pageSize }: PaginationProps) => {
    getContractList({ status, paging: true, pageNo: current, pageSize, clientID: clientDetail.client.id });
  };
  const handleChangeTab = (activeKey: API_CLIENT.ContractStatue) => {
    if (!dataMap[activeKey].list.length) {
      getContractList({ status: activeKey, paging: true, pageNo: 1, clientID: clientDetail.client.id });
    }
  };
  const handleUpdateSLA = (record: API_CLIENT.Contract) => {
    getSlaList({ assetID: record.assetID, swaggerVersion: record.swaggerVersion });
    update({
      SLAVisible: true,
      selectRecord: record,
    });
  };
  const handleCloseSLA = () => {
    update({
      SLAVisible: false,
      selectRecord: {},
    });
  };
  const handleSubmitSLA = async (requestSLAID: number) => {
    const { status, clientID, id } = selectRecord as API_CLIENT.Contract;
    await updateContracts({ requestSLAID, clientID, contractID: id });
    getContractList({ status, paging: true, pageNo: dataMap[status].paging.pageNo, clientID: clientDetail.client.id });
    handleCloseSLA();
  };
  const dataMap = {
    proved: {
      list: provedContractList,
      paging: provedContractPaging,
    },
    proving: {
      list: provingContractList,
      paging: provingContractPaging,
    },
    disproved: {
      list: disprovedContractList,
      paging: disprovedContractPaging,
    },
    unproved: {
      list: unprovedContractList,
      paging: unprovedContractPaging,
    },
  };
  const fields = [
    {
      label: i18n.t('Client name'),
      value: get(clientDetail, ['client', 'displayName']) || get(clientDetail, ['client', 'name']),
    },
    {
      label: i18n.t('Client identifier'),
      value: get(clientDetail, ['client', 'name']),
    },
    {
      label: i18n.t('Description'),
      value: get(clientDetail, ['client', 'desc']),
    },
    {
      label: 'ClientID',
      value: (
        <span className="cursor-copy" data-clipboard-text={get(clientDetail, ['sk', 'clientID'])}>
          {get(clientDetail, ['sk', 'clientID'])}
        </span>
      ),
    },
    {
      label: 'ClientSecret',
      value: (
        <div className="flex justify-between items-start">
          {showSecret ? (
            <span className="cursor-copy" data-clipboard-text={get(clientDetail, ['sk', 'clientSecret'])}>
              {get(clientDetail, ['sk', 'clientSecret'])}
            </span>
          ) : (
            <span>******</span>
          )}
          <span
            className="hover-active ml-1"
            onClick={() => {
              updater.showSecret(!showSecret);
            }}
          >
            <CustomIcon type={showSecret ? 'openeye' : 'closeeye'} />
          </span>
        </div>
      ),
    },
  ];
  const getColumns = (statue: API_CLIENT.ContractStatue) => {
    const columns: Array<ColumnProps<API_CLIENT.Contract>> = [
      {
        title: i18n.t('API name'),
        dataIndex: 'assetName',
        width: 200,
        render: (text, record) => {
          return (
            <div className="flex items-center justify-start">
              <div className="asset_name">
                <Ellipsis title={text} />
              </div>
              {record.status === 'proved' && (
                <Tooltip title={i18n.t('traffic audit')}>
                  <CustomIcon
                    className="ml-2 text-primary hover-active font-bold"
                    type="monitor"
                    onClick={(e) => {
                      e.stopPropagation();
                      update({ trafficAuditVisible: true, selectRecord: record });
                    }}
                  />
                </Tooltip>
              )}
            </div>
          );
        },
      },
      {
        title: i18n.t('Version'),
        dataIndex: 'swaggerVersion',
        width: 160,
      },
    ];
    if (statue === 'proved') {
      columns.push(
        ...[
          {
            title: i18n.t('current SLA'),
            dataIndex: 'curSLAName',
          },
          {
            title: firstCharToUpper(i18n.t('request SLA')),
            dataIndex: 'requestSLAName',
          },
          {
            title: i18n.t('Operations'),
            width: '150',
            dataIndex: 'id',
            fixed: 'right',
            render: (_id: number, record: API_CLIENT.Contract) => (
              <TableActions>
                <span
                  onClick={() => {
                    handleUpdateSLA(record);
                  }}
                >
                  {firstCharToUpper(i18n.t('replace SLA'))}
                </span>
              </TableActions>
            ),
          },
        ],
      );
    }
    return columns;
  };
  return (
    <Spin spinning={isFetchDetail}>
      <DetailsPanel
        baseInfoConf={{
          title: firstCharToUpper(i18n.t('basic information')),
          panelProps: {
            fields,
          },
        }}
      />
      <Copy selector=".cursor-copy" />
      <div className="p-4 api-list">
        <div className="title text-base text-normal font-medium">{i18n.t('Authorized API')}</div>
        <Tabs
          defaultActiveKey="proved"
          onChange={(v: string) => {
            handleChangeTab(v as API_CLIENT.ContractStatue);
          }}
        >
          {map(contractStatueMap, ({ name, value }) => (
            <TabPane key={value} tab={name}>
              <Table
                rowKey="id"
                loading={isFetchList}
                columns={getColumns(value)}
                dataSource={dataMap[value].list}
                pagination={dataMap[value].paging}
                onChange={(pagination) => {
                  handleChangeTable(value, pagination);
                }}
                scroll={{ x: 800 }}
              />
            </TabPane>
          ))}
        </Tabs>
      </div>
      <UpdateSLA
        visible={SLAVisible}
        slaList={slaList.filter((sla) => sla.source !== 'system')}
        metaData={{
          curSLAName: selectRecord.curSLAName,
          currentSLAID: selectRecord.curSLAID,
          defaultSLAID: selectRecord.requestSLAID,
          committedAt: selectRecord.slaCommittedAt,
        }}
        onCancel={handleCloseSLA}
        onOk={handleSubmitSLA}
        confirmLoading={isUpdateSLA}
      />
      <TrafficAuditDrawer
        visible={trafficAuditVisible}
        onClose={() => {
          updater.trafficAuditVisible(false);
        }}
        queries={{
          workspace: selectRecord.workspace?.toLowerCase(),
          endpoint: selectRecord.endpointName,
          client: selectRecord.clientName,
          projectID: selectRecord.projectID,
        }}
      />
    </Spin>
  );
}

ClientList = () => {
  const [{ keyword, resetModalInfo }, updater] = useUpdate<IState>({
    keyword: '',
    resetModalInfo: {},
  });
  const [clientList, clientListPaging] = apiClientStore.useStore((s) => [s.clientList, s.clientListPaging]);
  const { getClientList, deleteClient, updateClient } = apiClientStore.effects;
  const isLoading = useLoading(apiClientStore, ['getClientList', 'deleteClient', 'updateClient']);
  React.useEffect(() => {
    getClientList({ pageNo: 1, paging: true, keyword });
  }, [getClientList, keyword]);
  const handleTableChange = ({ current: pageNo, pageSize }: PaginationProps) => {
    getClientList({ pageNo, pageSize, paging: true, keyword });
  };
  const handleDelete = (clientID: number) => {
    deleteClient({ clientID }).then(() => {
      getClientList({ pageNo: 1, paging: true, keyword });
    });
  };
  const handleReset = (clientID: number, { name, desc, displayName }: API_CLIENT.Client) => {
    updateClient({ clientID, name, desc, resetClientSecret: true, displayName }).then(({ sk }) => {
      getClientList({ pageNo: clientListPaging.pageNo, paging: true, keyword });
      updater.resetModalInfo(sk);
    });
  };
  const handleSearch = (query: Record<string, any>) => {
    updater.keyword(query.keyword);
  };

  const filterConfig = React.useMemo(
    (): Field[] => [
      {
        label: '',
        type: 'input',
        key: 'keyword',
        outside: true,
        placeholder: i18n.t('default:Search by keyword'),
        customProps: {
          autoComplete: 'off',
        },
      },
    ],
    [],
  );
  const columns: Array<ColumnProps<API_CLIENT.ClientItem>> = [
    {
      title: i18n.t('Client name'),
      dataIndex: ['client', 'displayName'],
      width: 200,
      render: (text: string, record: API_CLIENT.ClientItem) => text || record.client.name,
    },
    {
      title: i18n.t('Client identifier'),
      dataIndex: ['client', 'name'],
      width: 200,
    },
    {
      title: i18n.t('Description'),
      dataIndex: ['client', 'desc'],
    },
  ];

  const actions = {
    render: (record: API_CLIENT.ClientItem) => {
      const { client } = record;
      const { id } = client;
      return [
        {
          title: i18n.t('reset key'),
          onClick: () => {
            Modal.confirm({
              title: i18n.t('confirm to {action}', { action: i18n.t('reset key') }),
              onOk() {
                handleReset(id, client);
              },
            });
          },
        },
        {
          title: i18n.t('Delete'),
          onClick: () => {
            Modal.confirm({
              title: i18n.t('confirm to {action}', { action: i18n.t('Delete') }),
              onOk() {
                handleDelete(id);
              },
            });
          },
        },
      ];
    },
  };

  return (
    <Spin spinning={isLoading.some((t) => t)}>
      <ErdaAlert
        message={i18n.t('Data source: API call management', { nsSeparator: '|' })}
        description={i18n.t(
          'On this page, you can check the progress of my application to call the API request, and its specific authentication information after the application is approved.',
        )}
        className="mb-3"
      />
      <ErdaTable
        rowKey="client.id"
        columns={columns}
        dataSource={clientList}
        onChange={handleTableChange}
        pagination={{
          current: clientListPaging.pageNo,
          ...clientListPaging,
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              goTo(`./${record.client.id}`);
            },
          };
        }}
        slot={<ConfigurableFilter fieldsList={filterConfig} onFilter={handleSearch} />}
        actions={actions}
      />
      <Modal
        title={i18n.t('client info')}
        visible={!isEmpty(resetModalInfo)}
        onCancel={() => updater.resetModalInfo({})}
        destroyOnClose
        footer={null}
      >
        <p className="mb-1">
          <span className="font-medium">ClientID: </span>
          <span className="cursor-copy" data-clipboard-text={resetModalInfo.clientID}>
            {resetModalInfo.clientID}
          </span>
        </p>
        <p className="mb-1">
          <span className="font-medium">ClientSecret: </span>
          <span className="cursor-copy" data-clipboard-text={resetModalInfo.clientSecret}>
            {resetModalInfo.clientSecret}
          </span>
        </p>
        <Copy selector=".cursor-copy" />
      </Modal>
    </Spin>
  );
}