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

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

const { useBreakpoint } = Grid;

export default function GroupTaskTableList({
  categoryGroup,
  showGroupTypeSelectionModal,
  groupTasks,
}) {
  const webSocketContext = useWebSocketContext();
  const appContext = useAppContext();
  const { t } = useTranslation();
  const screenBreakpoint = useBreakpoint();

  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}${categoryGroup.category}/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 = appContext.users.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 handleOnInstallPythonPackagesConfirm = (category, groupId) => {
    webSocketContext.SendSocketMessage(
      SentMessagesCommands.GroupTasksInstallPythonPackages,
      {
        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(
        appContext.userPermissions,
        categoryGroup.category,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYInstallPythonPackages
      ) && (
        <Row
          style={{
            marginBottom: AppStyle.app.marginBottom,
          }}
        >
          {hasXYPermission(
            appContext.userPermissions,
            Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
            categoryGroup.category
          ) && (
            <Col xs={24} sm={12}>
              <Button
                block={screenBreakpoint.xs}
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => showGroupTypeSelectionModal(categoryGroup)}
              >
                {t("groupTasks.groupTasksTableList.button.newTask")}
              </Button>
            </Col>
          )}

          <Col
            xs={24}
            sm={12}
            style={
              screenBreakpoint.xs
                ? {
                    display: "flex",
                    flexDirection: "column",
                    marginTop: 10,
                    gap: 10,
                  }
                : {
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "flex-end",
                    gap: 10,
                  }
            }
          >
            {hasXYPermission(
              appContext.userPermissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW
                .XYInstallPythonPackages,
              categoryGroup.category
            ) && (
              <Dropdown
                menu={{
                  items: dropDownItems,
                  onClick: ({ key }) =>
                    handleOnInstallPythonPackagesConfirm(
                      dropDownItems[key].category,
                      dropDownItems[key].groupid
                    ),
                }}
                arrow
                trigger="click"
              >
                <Button block={!screenBreakpoint.sm}>
                  <Space>
                    {t(
                      "groupTasks.groupTasksTableList.button.installPythonPackages"
                    )}
                    <DownOutlined />
                  </Space>
                </Button>
              </Dropdown>
            )}

            {hasXYPermission(
              appContext.userPermissions,
              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 block={screenBreakpoint.xs} icon={<ReloadOutlined />}>
                  {t("common.button.reload")}
                </Button>
              </Popconfirm>
            )}
          </Col>
        </Row>
      )}

      <Table
        style={{ marginTop: AppStyle.app.margin }}
        scroll={{ x: "max-content" }}
        columns={getTableColumns()}
        dataSource={getTableItems()}
        pagination={false}
      />
    </>
  );
}