mint/dashboard/src/components/channel/ChannelPickerTable.tsx

import { useEffect, useRef, useState } from "react";
import { useIntl } from "react-intl";
import { ActionType, ProList } from "@ant-design/pro-components";
import { Button } from "antd";
import { Badge, Dropdown, Space, Table, Typography } from "antd";
import {
  GlobalOutlined,
  EditOutlined,
  MoreOutlined,
  CopyOutlined,
} from "@ant-design/icons";

import { IApiResponseChannelList, IFinal, TChannelType } from "../api/Channel";
import { post } from "../../request";
import { LockIcon } from "../../assets/icon";
import StudioName, { IStudio } from "../auth/StudioName";
import ProgressSvg from "./ProgressSvg";
import { IChannel } from "./Channel";
import { ArticleType } from "../article/Article";
import CopyToModal from "./CopyToModal";

import { useAppSelector } from "../../hooks";
import { currentUser as _currentUser } from "../../reducers/current-user";

const { Link } = Typography;

interface IProgressRequest {
  sentence: string[];
}
export interface IItem {
  id: number;
  uid: string;
  title: string;
  summary: string;
  type: TChannelType;
  studio: IStudio;
  shareType: string;
  role?: string;
  publicity: number;
  createdAt: number;
  final?: IFinal[];
  progress: number;
}
interface IWidget {
  type?: ArticleType | "editable";
  articleId?: string;
  multiSelect?: boolean /*是否支持多选*/;
  selectedKeys?: string[];
  reload?: boolean;
  onSelect?: Function;
}
const ChannelPickerTableWidget = ({
  type,
  articleId,
  multiSelect = true,
  selectedKeys = [],
  onSelect,
  reload = false,
}: IWidget) => {
  const intl = useIntl();
  const [selectedRowKeys, setSelectedRowKeys] =
    useState<React.Key[]>(selectedKeys);
  const [showCheckBox, setShowCheckBox] = useState<boolean>(false);
  const user = useAppSelector(_currentUser);
  const ref = useRef<ActionType>();

  useEffect(() => {
    if (reload) {
      ref.current?.reload();
    }
  }, [reload]);

  return (
    <ProList<IItem>
      actionRef={ref}
      rowSelection={
        showCheckBox
          ? {
              // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
              // 注释该行则默认不显示下拉选项
              alwaysShowAlert: true,
              selectedRowKeys: selectedRowKeys,
              onChange: (selectedRowKeys: React.Key[]) => {
                setSelectedRowKeys(selectedRowKeys);
              },
              selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
            }
          : undefined
      }
      tableAlertRender={
        showCheckBox
          ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
              console.log(selectedRowKeys);
              return (
                <Space>
                  {intl.formatMessage({ id: "buttons.selected" })}
                  <Badge color="geekblue" count={selectedRowKeys.length} />
                  <Link onClick={onCleanSelected}>
                    {intl.formatMessage({ id: "buttons.empty" })}
                  </Link>
                </Space>
              );
            }
          : undefined
      }
      tableAlertOptionRender={
        showCheckBox
          ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
              return (
                <Space>
                  <Link
                    onClick={() => {
                      console.log("select", selectedRowKeys);
                      if (typeof onSelect !== "undefined") {
                        onSelect(
                          selectedRows.map((item) => {
                            return {
                              id: item.uid,
                              name: item.title,
                            };
                          })
                        );
                        setShowCheckBox(false);
                        ref.current?.reload();
                      }
                    }}
                  >
                    {intl.formatMessage({
                      id: "buttons.ok",
                    })}
                  </Link>
                  <Link
                    type="danger"
                    onClick={() => {
                      setShowCheckBox(false);
                    }}
                  >
                    {intl.formatMessage({
                      id: "buttons.cancel",
                    })}
                  </Link>
                </Space>
              );
            }
          : undefined
      }
      request={async (params = {}, sorter, filter) => {
        console.log(params, sorter, filter);
        const sentElement = document.querySelectorAll(".pcd_sent");
        let sentList: string[] = [];
        for (let index = 0; index < sentElement.length; index++) {
          const element = sentElement[index];
          const id = element.id.split("_")[1];
          sentList.push(id);
        }
        console.log("sentList", sentList);
        const res = await post<IProgressRequest, IApiResponseChannelList>(
          `/v2/channel-progress`,
          {
            sentence: sentList,
          }
        );
        console.log("progress data", res.data.rows);
        const items: IItem[] = res.data.rows
          .filter((value) => value.name.substring(0, 4) !== "_Sys")
          .map((item, id) => {
            const date = new Date(item.created_at);
            let all: number = 0;
            let finished: number = 0;
            item.final?.forEach((value) => {
              all += value[0];
              finished += value[1] ? value[0] : 0;
            });
            const progress = finished / all;
            return {
              id: id,
              uid: item.uid,
              title: item.name,
              summary: item.summary,
              studio: item.studio,
              shareType: "my",
              role: item.role,
              type: item.type,
              publicity: item.status,
              createdAt: date.getTime(),
              final: item.final,
              progress: progress,
            };
          });
        //当前被选择的
        const currChannel = items.filter((value) =>
          selectedRowKeys.includes(value.uid)
        );
        let show = selectedRowKeys;
        //有进度的
        const progressing = items.filter(
          (value) => value.progress > 0 && !show.includes(value.uid)
        );
        show = [...show, ...progressing.map((item) => item.uid)];
        //我自己的
        const myChannel = items.filter(
          (value) => value.role === "owner" && !show.includes(value.uid)
        );
        show = [...show, ...myChannel.map((item) => item.uid)];
        //其他的
        const others = items.filter(
          (value) => !show.includes(value.uid) && value.role !== "member"
        );
        console.log("user:", user);
        setSelectedRowKeys(selectedRowKeys);
        const channelData = [
          ...currChannel,
          ...progressing,
          ...myChannel,
          ...others,
        ];
        console.log("channel list ", channelData);
        return {
          total: res.data.count,
          succcess: true,
          data: channelData,
        };
      }}
      rowKey="uid"
      bordered
      options={false}
      search={{
        filterType: "light",
      }}
      toolBarRender={() => [
        <Button
          onClick={() => {
            ref.current?.reload();
          }}
        >
          reload
        </Button>,
        multiSelect ? (
          <Button
            onClick={() => {
              setShowCheckBox(true);
              console.log("user:", user);
            }}
          >
            选择
          </Button>
        ) : undefined,
      ]}
      metas={{
        title: {
          render(dom, entity, index, action, schema) {
            let pIcon = <></>;
            switch (entity.publicity) {
              case 10:
                pIcon = <LockIcon />;
                break;
              case 30:
                pIcon = <GlobalOutlined />;
                break;
            }

            return (
              <div
                key={index}
                style={{
                  width: "100%",
                  borderRadius: 5,
                  padding: "0 5px",
                  background:
                    selectedKeys.includes(entity.uid) && !showCheckBox
                      ? "linear-gradient(to right,#006112,rgba(0,0,0,0))"
                      : undefined,
                }}
              >
                <div key="info" style={{ overflowX: "clip", display: "flex" }}>
                  <Space>
                    {pIcon}
                    {entity.role !== "member" ? <EditOutlined /> : undefined}
                  </Space>
                  <Button
                    type="link"
                    onClick={() => {
                      if (typeof onSelect !== "undefined") {
                        const e: IChannel = {
                          name: entity.title,
                          id: entity.uid,
                        };
                        onSelect([e]);
                      }
                    }}
                  >
                    <Space>
                      <StudioName data={entity.studio} showName={false} />
                      {entity.title}
                    </Space>
                  </Button>
                </div>
                <div key="progress">
                  <ProgressSvg data={entity.final} width={200} />
                </div>
              </div>
            );
          },
          search: false,
        },
        actions: {
          render: (dom, entity, index, action, schema) => {
            return (
              <Dropdown
                key={index}
                trigger={["click"]}
                menu={{
                  items: [
                    {
                      key: "copy_to",
                      label: (
                        <CopyToModal
                          trigger={intl.formatMessage({
                            id: "buttons.copy.to",
                          })}
                          channel={{
                            id: entity.uid,
                            name: entity.title,
                            type: entity.type,
                          }}
                        />
                      ),
                      icon: <CopyOutlined />,
                    },
                  ],
                  onClick: (e) => {
                    console.log("click ", e);
                    switch (e.key) {
                      case "copy_to":
                        break;

                      default:
                        break;
                    }
                  },
                }}
                placement="bottomRight"
              >
                <Button
                  type="link"
                  size="small"
                  icon={<MoreOutlined />}
                ></Button>
              </Dropdown>
            );
          },
        },
        status: {
          // 自己扩展的字段，主要用于筛选，不在列表中显示
          title: "版本筛选",
          valueType: "select",
          valueEnum: {
            all: { text: "全部", status: "Default" },
            my: {
              text: "我的",
            },
            closed: {
              text: "协作",
            },
            processing: {
              text: "社区公开",
            },
          },
        },
      }}
    />
  );
};

export default ChannelPickerTableWidget;