responsive grouptasks table action buttons

2023-08-18 18:32:58 +00:00 · 2023-08-18 18:32:58 +00:00 · 8fb3a56704
parent 2319023ef5
commit 8fb3a56704
6 changed files with 140 additions and 71 deletions
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@ -116,23 +116,28 @@
      },
      "button": {
        "newTask": "Neue Aufgabe",
-        "installPythonDependencies": "Abhängigkeiten installieren"
+        "installPythonPackages": "Python Pakete installieren"
      },
      "popover": {
        "reload": {
          "title": "Sind Sie sicher, dass Sie die Gruppenkonfigurationen neu laden wollen?"
        },
-        "installPythonDependencies": {
+        "installPythonPackages": {
          "title": "Sind Sie sicher das die Python Bibliotheken installiert werden sollen?"
        }
      }
    },
    "button": {
+      "installGlobalPythonPackages": {
+        "title": "Globale Python Bibliotheken installieren",
+        "popover": {
+          "title": "Sind Sie sicher, dass Sie die globalen Python Bibliotheken installieren wollen?"
+        }
+      },
      "checkingForCategoryGroupChanges": {
        "check": "Prüfung auf Änderungen der Kategoriegruppen",
        "popover": {
-          "title": "Sind Sie sicher, dass Sie die Kategoriegruppen prüfen wollen? (Während der Prüfung schaut der Server nach neuen Kategoriegruppen und löscht ggf. nicht mehr vorhandene)",
-          "buttonOk": "Prüfen"
+          "title": "Sind Sie sicher, dass Sie die Kategoriegruppen prüfen wollen? (Während der Prüfung schaut der Server nach neuen Kategoriegruppen und löscht ggf. nicht mehr vorhandene)"
        }
      }
    }
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -116,23 +116,28 @@
      },
      "button": {
        "newTask": "New Task",
-        "installPythonDependencies": "Install Dependencies"
+        "installPythonPackages": "Install python packages"
      },
      "popover": {
        "reload": {
          "title": "Are you sure you want to reload group configurations?"
        },
-        "installPythonDependencies": {
+        "installPythonPackages": {
          "title": "Are you sure you want to install Python libraries?"
        }
      }
    },
    "button": {
+      "installGlobalPythonPackages": {
+        "title": "Install global python packages",
+        "popover": {
+          "title": "Are you sure you want to install the global Python libraries?"
+        }
+      },
      "checkingForCategoryGroupChanges": {
        "check": "Checking for Category Group Changes",
        "popover": {
-          "title": "Are you sure you want to check category groups? (During the check, the server looks for new category groups and deletes those that are no longer available)",
-          "buttonOk": "Check"
+          "title": "Are you sure you want to check category groups? (During the check, the server looks for new category groups and deletes those that are no longer available)"
        }
      }
    }
--- a/src/App.js
+++ b/src/App.js
@ -1,12 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import "antd/dist/reset.css";
 import "./App.css";
-import PageContent from "./Components/PageContent";
-import SideMenu from "./Components/SideMenu";
 import Login from "./Pages/Login";
 import { Layout, notification } from "antd";
 import { UseUserSession, WebSocketProvider } from "./utils";
-import { Header } from "antd/es/layout/layout";
 import DashboardLayout from "./Components/DashboardLayout";

 export default function App() {
--- a/src/Pages/GroupTasks/Overview/GroupTasksTableList.js
+++ b/src/Pages/GroupTasks/Overview/GroupTasksTableList.js
@ -2,10 +2,13 @@ import { DownOutlined, PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import {
  Badge,
  Button,
+  Col,
  Divider,
  Dropdown,
+  Grid,
  Popconfirm,
  Popover,
+  Row,
  Space,
  Table,
  Tooltip,
@ -24,6 +27,8 @@ import {
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";

+const { useBreakpoint } = Grid;
+
 export default function GroupTaskTableList({
  categoryGroup,
  showGroupTypeSelectionModal,
@ -199,9 +204,9 @@ export default function GroupTaskTableList({
    });
  };

-  const handleOnInstallPythonDependenciesConfirm = (category, groupId) => {
+  const handleOnInstallPythonPackagesConfirm = (category, groupId) => {
    webSocketContext.SendSocketMessage(
-      SentMessagesCommands.GroupTasksInstallPythonDependencies,
+      SentMessagesCommands.GroupTasksInstallPythonPackages,
      {
        category: category,
        groupId: groupId,
@ -221,6 +226,8 @@ export default function GroupTaskTableList({
        })
      : [];

+  const screenBreakpoint = useBreakpoint();
+
  return (
    <>
      <Divider orientation="left">{categoryGroup.category}</Divider>
@ -229,19 +236,20 @@ export default function GroupTaskTableList({
        webSocketContext.User.Permissions,
        categoryGroup.category,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
-        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig
+        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig,
+        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYInstallPythonPackages
      ) && (
-        <div
+        <Row
          style={{
            marginBottom: 16,
-            display: "flex",
-            justifyContent: hasXYPermission(
+            //display: "flex",
+            /*justifyContent: hasXYPermission(
              webSocketContext.User.Permissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
              categoryGroup.category
            )
              ? "space-between"
-              : "right",
+              : "right",*/
          }}
        >
          {hasXYPermission(
@ -249,27 +257,48 @@ export default function GroupTaskTableList({
            Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
            categoryGroup.category
          ) && (
-            <Button
-              type="primary"
-              icon={<PlusOutlined />}
-              onClick={() => showGroupTypeSelectionModal(categoryGroup)}
-            >
-              {t("groupTasks.groupTasksTableList.button.newTask")}
-            </Button>
+            <Col xs={24} sm={12}>
+              <Button
+                block={!screenBreakpoint.sm}
+                type="primary"
+                icon={<PlusOutlined />}
+                onClick={() => showGroupTypeSelectionModal(categoryGroup)}
+              >
+                {t("groupTasks.groupTasksTableList.button.newTask")}
+              </Button>
+            </Col>
          )}

-          <Space>
+          <Col
+            xs={24}
+            sm={12}
+            style={
+              screenBreakpoint.sm
+                ? {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-end",
+                    gap: 10,
+                  }
+                : {
+                    display: "flex",
+                    flexDirection: "column",
+                    marginTop: 10,
+                    gap: 10,
+                  }
+            }
+          >
            {hasXYPermission(
              webSocketContext.User.Permissions,
              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW
-                .XYInstallPythonDependencies,
+                .XYInstallPythonPackages,
              categoryGroup.category
            ) && (
              <Dropdown
                menu={{
                  items: dropDownItems,
                  onClick: ({ key }) =>
-                    handleOnInstallPythonDependenciesConfirm(
+                    handleOnInstallPythonPackagesConfirm(
                      dropDownItems[key].category,
                      dropDownItems[key].groupid
                    ),
@ -277,10 +306,10 @@ export default function GroupTaskTableList({
                arrow
                trigger="click"
              >
-                <Button>
+                <Button block={!screenBreakpoint.sm}>
                  <Space>
                    {t(
-                      "groupTasks.groupTasksTableList.button.installPythonDependencies"
+                      "groupTasks.groupTasksTableList.button.installPythonPackages"
                    )}
                    <DownOutlined />
                  </Space>
@ -302,13 +331,13 @@ export default function GroupTaskTableList({
                  handleOnReloadGroupTasksConfirm(categoryGroup.category)
                }
              >
-                <Button icon={<ReloadOutlined />}>
+                <Button block={!screenBreakpoint.sm} icon={<ReloadOutlined />}>
                  {t("common.button.reload")}
                </Button>
              </Popconfirm>
            )}
-          </Space>
-        </div>
+          </Col>
+        </Row>
      )}

      <Table
@ -319,25 +348,3 @@ export default function GroupTaskTableList({
    </>
  );
 }
-
-/*
-<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>
-*/
--- a/src/Pages/GroupTasks/Overview/index.js
+++ b/src/Pages/GroupTasks/Overview/index.js
@ -44,6 +44,13 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
    );
  };

+  const onInstallGlobalPythonPackages = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.GroupTasksInstallGlobalPythonPackages,
+      {}
+    );
+  }
+
  return (
    <>
      {webSocketContext.CategoryGroups.length === 0 ? (
@ -52,6 +59,32 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
        <>
          {filteredCategoryGroups.length > 0 ? (
            <>
+              {hasPermission(
+                webSocketContext.User.Permissions,
+                Constants.PERMISSIONS.GROUP_TASKS.INSTALL_GLOBAL_PYTHON_PACKAGES
+              ) && (
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  <Popconfirm
+                    placement="top"
+                    okText={t("common.button.confirm")}
+                    cancelText={t("common.button.cancel")}
+                    title={t(
+                      "groupTasks.button.installGlobalPythonPackages.popover.title"
+                    )}
+                    onConfirm={() => onInstallGlobalPythonPackages()}
+                  >
+                    <Button icon={<ReloadOutlined />}>
+                      {t("groupTasks.button.installGlobalPythonPackages.title")}
+                    </Button>
+                  </Popconfirm>
+                </div>
+              )}
+
              {filteredCategoryGroups.map((categoryGroup) => {
                return (
                  <GroupTaskTableList
@ -97,9 +130,7 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
        >
          <Popconfirm
            placement="top"
-            okText={t(
-              "groupTasks.button.checkingForCategoryGroupChanges.popover.buttonOk"
-            )}
+            okText={t("common.button.confirm")}
            cancelText={t("common.button.cancel")}
            title={t(
              "groupTasks.button.checkingForCategoryGroupChanges.popover.title"
--- a/src/utils.js
+++ b/src/utils.js
@ -59,11 +59,13 @@ export const Constants = {
      OVERVIEW: {
        XYNewTask: "group_tasks.overview.XY.new_task",
        XYReloadGroupConfig: "group_tasks.overview.XY.reload_group_config",
-        XYInstallPythonDependencies:
-          "group_tasks.overview.XY.install_python_dependencies",
+        XYInstallPythonPackages:
+          "group_tasks.overview.XY.install_python_packages",
        XYView: "group_tasks.overview.XY.view",
      },
      HISTORY: "group_tasks.history",
+      INSTALL_GLOBAL_PYTHON_PACKAGES:
+        "group_tasks.install_global_python_packages",
      CHECKING_FOR_CATEGORY_GROUP_CHANGES:
        "group_tasks.checking_for_category_group_changes",
    },
@ -212,9 +214,12 @@ const ReceivedMessagesCommands = {
  NewUserApiKeyCreated: 30,
  DeletedUserApiKey: 31,
  NewApiKeyUsageCount: 32,
-  InstallingPythonDependencies: 33,
-  InstallingPythonDependenciesFailed: 34,
-  InstallingPythonDependenciesFinished: 35,
+  InstallingPythonPackages: 33,
+  InstallingPythonPackagesFailed: 34,
+  InstallingPythonPackagesFinished: 35,
+  InstallingGlobalPythonPackages: 36,
+  InstallingGlobalPythonPackagesFailed: 37,
+  InstallingGlobalPythonPackagesFinished: 38,
 };

 // commands sent to the backend server
@ -239,7 +244,8 @@ export const SentMessagesCommands = {
  HandleUserActionTaskStep: 18,
  CreateNewUserApiKey: 19,
  DeleteUserApiKey: 20,
-  GroupTasksInstallPythonDependencies: 21,
+  GroupTasksInstallPythonPackages: 21,
+  GroupTasksInstallGlobalPythonPackages: 22,
 };

 export function WebSocketProvider({
@ -1015,24 +1021,42 @@ export function WebSocketProvider({
            return updatedUser;
          });
          break;
-        case ReceivedMessagesCommands.InstallingPythonDependencies:
+        case ReceivedMessagesCommands.InstallingPythonPackages:
          notificationApi["info"]({
-            message: `Installing python dependencies for ${body.GroupId} of ${body.Category}`,
+            message: `Installing python packages for ${body.GroupId} of ${body.Category}`,
            description: `This may take a while`,
          });
          break;
-        case ReceivedMessagesCommands.InstallingPythonDependenciesFailed:
+        case ReceivedMessagesCommands.InstallingPythonPackagesFailed:
          notificationApi["error"]({
-            message: `Installing python dependencies for ${body.GroupId} of ${body.Category} failed`,
+            message: `Installing python packages for ${body.GroupId} of ${body.Category} failed`,
            description: `Please check the logs`,
          });
          break;
-        case ReceivedMessagesCommands.InstallingPythonDependenciesFinished:
+        case ReceivedMessagesCommands.InstallingPythonPackagesFinished:
          notificationApi["success"]({
-            message: `Installing python dependencies for ${body.GroupId} of ${body.Category} finished`,
+            message: `Installing python packages for ${body.GroupId} of ${body.Category} finished`,
            description: `You can now start the group task`,
          });
          break;
+        case ReceivedMessagesCommands.InstallingGlobalPythonPackages:
+          notificationApi["info"]({
+            message: `Installing global python packages`,
+            description: `This may take a while`,
+          });
+          break;
+        case ReceivedMessagesCommands.InstallingGlobalPythonPackagesFailed:
+          notificationApi["error"]({
+            message: `Installing global python packages failed`,
+            description: `Please check the logs`,
+          });
+          break;
+        case ReceivedMessagesCommands.InstallingGlobalPythonPackagesFinished:
+          notificationApi["success"]({
+            message: `Installing global python packages finished`,
+            description: `You can now continue with the work`,
+          });
+          break;
        case ReceivedMessagesCommands.default:
          console.error("unknown command", cmd);
          break;