admin-dashboard-web/src/Pages/GroupTasks/Overview/GroupTasksTableList.js

import { DownOutlined, PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import {
  Badge,
  Button,
  Divider,
  Dropdown,
  Popconfirm,
  Popover,
  Space,
  Table,
  Tooltip,
} from "antd";
import { Link } from "react-router-dom";
import {
  Constants,
  FormatDatetime,
  GetDuration,
  MyAvatar,
  SentMessagesCommands,
  WebSocketContext,
  hasOneXYPermission,
  hasXYPermission,
} from "../../../utils";
import { useContext } from "react";
import { useTranslation } from "react-i18next";

export default function GroupTaskTableList({
  categoryGroup,
  showGroupTypeSelectionModal,
  groupTasks,
}) {
  const webSocketContext = useContext(WebSocketContext);
  const { t } = useTranslation();

  const getTableColumns = () => {
    return [
      {
        title: t("groupTasks.groupTasksTableList.column.creator"),
        dataIndex: "creator",
        key: "creator",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.groupName"),
        dataIndex: "groupName",
        key: "groupName",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.description"),
        dataIndex: "description",
        key: "description",
        ellipsis: {
          showTitle: false,
        },
        render: (description) => (
          <Tooltip placement="topLeft" title={description}>
            {description}
          </Tooltip>
        ),
      },
      {
        title: t("groupTasks.groupTasksTableList.column.step"),
        dataIndex: "step",
        key: "step",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.status"),
        dataIndex: "status",
        key: "status",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.startedAt"),
        dataIndex: "startedAt",
        key: "startedAt",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.endedAt"),
        dataIndex: "endedAt",
        key: "endedAt",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.duration"),
        dataIndex: "duration",
        key: "duration",
      },
      {
        title: t("groupTasks.groupTasksTableList.column.action.title"),
        dataIndex: "action",
        key: "action",
        render: (_, record) => (
          <Space size="middle">
            <Link to={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + record.key}>
              {t("groupTasks.groupTasksTableList.column.action.link")}
            </Link>
          </Space>
        ),
      },
    ];
  };

  const getStatusBadge = (status) => {
    switch (status) {
      case Constants.GROUP_TASKS_STATUS.FINISHED:
        return (
          <Badge
            status="success"
            text={t("groupTasks.groupTasksTableList.statusBadge.finished")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.RUNNING:
        return (
          <Badge
            status="processing"
            text={t("groupTasks.groupTasksTableList.statusBadge.running")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.CANCELED:
        return (
          <Badge
            status="warning"
            text={t("groupTasks.groupTasksTableList.statusBadge.canceled")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.FAILED:
        return (
          <Badge
            status="error"
            text={t("groupTasks.groupTasksTableList.statusBadge.failed")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
        return (
          <Badge
            status="warning"
            text={t("groupTasks.groupTasksTableList.statusBadge.inputRequired")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.PAUSED:
        return (
          <Badge
            status="warning"
            text={t("groupTasks.groupTasksTableList.statusBadge.paused")}
          />
        );
      case Constants.GROUP_TASKS_STATUS.UNDO_ENDED:
        return (
          <Badge
            status="warning"
            text={t("groupTasks.groupTasksTableList.statusBadge.undoEnded")}
          />
        );
      default:
        return <Badge status="error" text="Status not found" />;
    }
  };

  const getTableItems = () => {
    let items = [];

    groupTasks.sort((a, b) => new Date(b.StartedAt) - new Date(a.StartedAt));

    groupTasks.forEach((groupTask) => {
      if (groupTask.Category === categoryGroup.category) {
        const user = webSocketContext.AllUsers.find(
          (user) => user.Id === groupTask.CreatorUserId
        );

        items.push({
          key: groupTask.Id,
          creator: (
            <>
              <Popover
                placement="right"
                trigger="hover"
                content={<MyAvatar avatar={user?.Avatar} avatarWidth={256} />}
              >
                <>
                  <MyAvatar avatar={user?.Avatar} /> {user?.Username}
                </>
              </Popover>
            </>
          ),
          groupName: groupTask.GroupName,
          description: groupTask.Description,
          step: `${groupTask.CurrentTasksStep} / ${groupTask.NumberOfSteps}`,
          status: getStatusBadge(groupTask.Status),
          startedAt: FormatDatetime(groupTask.StartedAt),
          duration: GetDuration(groupTask.StartedAt, groupTask.EndedAt),
          endedAt: FormatDatetime(groupTask.EndedAt),
        });
      }
    });

    return items;
  };

  const handleOnReloadGroupTasksConfirm = (category) => {
    webSocketContext.SendSocketMessage(SentMessagesCommands.ReloadGroupTasks, {
      category: category,
    });
  };

  const handleOnInstallPythonDependenciesConfirm = (category, groupId) => {
    webSocketContext.SendSocketMessage(
      SentMessagesCommands.GroupTasksInstallPythonDependencies,
      {
        category: category,
        groupId: groupId,
      }
    );
  };

  const dropDownItems =
    categoryGroup.groups !== undefined
      ? categoryGroup.groups.map((group, index) => {
          return {
            key: index,
            label: group.name,
            category: group.category,
            groupid: group.id,
          };
        })
      : [];

  return (
    <>
      <Divider orientation="left">{categoryGroup.category}</Divider>

      {hasOneXYPermission(
        webSocketContext.User.Permissions,
        categoryGroup.category,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig
      ) && (
        <div
          style={{
            marginBottom: 16,
            display: "flex",
            justifyContent: hasXYPermission(
              webSocketContext.User.Permissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
              categoryGroup.category
            )
              ? "space-between"
              : "right",
          }}
        >
          {hasXYPermission(
            webSocketContext.User.Permissions,
            Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
            categoryGroup.category
          ) && (
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => showGroupTypeSelectionModal(categoryGroup)}
            >
              {t("groupTasks.groupTasksTableList.button.newTask")}
            </Button>
          )}

          <Space>
            {hasXYPermission(
              webSocketContext.User.Permissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW
                .XYInstallPythonDependencies,
              categoryGroup.category
            ) && (
              <Dropdown
                menu={{
                  items: dropDownItems,
                  onClick: ({ key }) =>
                    handleOnInstallPythonDependenciesConfirm(
                      dropDownItems[key].category,
                      dropDownItems[key].groupid
                    ),
                }}
                arrow
                trigger="click"
              >
                <Button>
                  <Space>
                    {t(
                      "groupTasks.groupTasksTableList.button.installPythonDependencies"
                    )}
                    <DownOutlined />
                  </Space>
                </Button>
              </Dropdown>
            )}

            {hasXYPermission(
              webSocketContext.User.Permissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig,
              categoryGroup.category
            ) && (
              <Popconfirm
                placement="left"
                title={t("groupTasks.groupTasksTableList.popover.reload.title")}
                cancelText={t("common.button.cancel")}
                okText={t("common.button.confirm")}
                onConfirm={() =>
                  handleOnReloadGroupTasksConfirm(categoryGroup.category)
                }
              >
                <Button icon={<ReloadOutlined />}>
                  {t("common.button.reload")}
                </Button>
              </Popconfirm>
            )}
          </Space>
        </div>
      )}

      <Table
        scroll={{ x: "max-content" }}
        columns={getTableColumns()}
        dataSource={getTableItems()}
      />
    </>
  );
}

/*
<Popconfirm
                placement="left"
                title={t(
                  "groupTasks.groupTasksTableList.popover.installPythonDependencies.title"
                )}
                cancelText={t("common.button.cancel")}
                okText={t("common.button.confirm")}
                onConfirm={() =>
                  handleOnInstallPythonDependenciesConfirm(
                    categoryGroup.category
                  )
                }
              >
                <Button icon={<DownloadOutlined />}>
                  {t(
                    "groupTasks.groupTasksTableList.button.installPythonDependencies"
                  )}
                </Button>
              </Popconfirm>
*/