admin-dashboard-web/src/Pages/AdminArea/Manage/index.js

import { Button, Card, Popconfirm, Space, Table, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
import {
  AppStyle,
  Constants,
  FormatDatetime,
  hasPermission,
  myFetch,
} from "../../../utils";
import { useAppContext } from "../../../Contexts/AppContext";
import { useConsolesContext } from "../../../Contexts/ConsolesContext";
import { Link } from "react-router-dom";
import { PlusOutlined } from "@ant-design/icons";
import AddLogManagerServerConnectionModal from "./AddLogManagerServerConnectionModal";
import { useEffect, useState } from "react";

export default function AdminAreaManage() {
  const { t } = useTranslation();
  const appContext = useAppContext();
  const webSocketContext = useWebSocketContext();

  return (
    <>
      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
          .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE
      ) && (
        <Card title={t("adminArea.manage.groupTasksCard.title")}>
          <p>{t("adminArea.manage.groupTasksCard.description")}</p>
          <Button
            onClick={() =>
              webSocketContext.SendSocketMessage(
                SentMessagesCommands.AdminAreaManageCheckWhichCategoriesAreAvailable,
                {}
              )
            }
          >
            {t("adminArea.manage.groupTasksCard.buttonText")}
          </Button>
        </Card>
      )}

      <LogManagerServersTable
        t={t}
        webSocketContext={webSocketContext}
        appContext={appContext}
      />
    </>
  );
}

function LogManagerServersTable({ t, webSocketContext, appContext }) {
  const consolesContext = useConsolesContext();
  const [
    isAddLogManagerServerConnectionModalOpen,
    setIsAddLogManagerServerConnectionModalOpen,
  ] = useState(false);

  const getColumns = () => {
    return [
      {
        title: t("adminArea.manage.logManagers.column.displayName"),
        dataIndex: "displayName",
        key: "displayName",
      },
      {
        title: t("adminArea.manage.logManagers.column.address"),
        dataIndex: "address",
        key: "address",
      },
      {
        title: t("adminArea.manage.logManagers.column.createdAt"),
        dataIndex: "createdAt",
        key: "createdAt",
      },
      {
        title: t("adminArea.manage.logManagers.column.action"),
        dataIndex: "action",
        key: "action",
        render: (_, record) => (
          <Space size="middle">
            <Popconfirm
              placement="left"
              title={t("adminArea.manage.logManagers.popconfirm.title")}
              description={t(
                "adminArea.manage.logManagers.popconfirm.description"
              )}
              okText={t("common.button.delete")}
              cancelText={t("common.button.cancel")}
              onConfirm={() =>
                webSocketContext.SendSocketMessage(
                  SentMessagesCommands.AdminAreaManageDeleteLogManagerServerConnection,
                  { Id: record.key }
                )
              }
            >
              <Link to="#">{t("common.button.delete")}</Link>
            </Popconfirm>
          </Space>
        ),
      },
    ];
  };

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

    consolesContext.connectedLogManagerServers.sort(
      (a, b) => new Date(b.CreatedAt) - new Date(a.CreatedAt)
    );

    consolesContext.connectedLogManagerServers.forEach((connection) => {
      items.push({
        key: connection.Id,
        displayName: connection.DisplayName,
        address: connection.Address,
        createdAt: FormatDatetime(connection.CreatedAt),
      });
    });

    return items;
  };

  useEffect(() => {
    myFetch("/lmsc", "GET").then((data) =>
      consolesContext.setConnectedLogManagerServers(data)
    );
  }, []);

  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: AppStyle.app.margin,
        }}
      >
        <Typography.Title level={4}>
          {t("adminArea.manage.logManagers.header")} (
          {consolesContext.connectedLogManagerServers.length})
        </Typography.Title>

        {hasPermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER
        ) && (
          <Button
            icon={<PlusOutlined />}
            onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
          >
            {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
          </Button>
        )}
      </div>

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

      <AddLogManagerServerConnectionModal
        isModalOpen={isAddLogManagerServerConnectionModalOpen}
        setIsModalOpen={setIsAddLogManagerServerConnectionModalOpen}
        t={t}
        webSocketContext={webSocketContext}
      />
    </>
  );
}