categories

public/locales/de/translation.json

@@ -29,7 +29,7 @@
     "equipmentDocumentation": "Gerätedokumentation",
     "groupTasks": {
       "menuCategory": "Gruppenaufgaben",
-      "overview": "Gruppenaufgaben",
+      "overview": "Kategorien",
       "history": "Verlauf"
     },
     "adminArea": {

public/locales/en/translation.json

@@ -29,7 +29,7 @@
     "equipmentDocumentation": "Equipment Documentation",
     "groupTasks": {
       "menuCategory": "Group Tasks",
-      "overview": "Group Tasks",
+      "overview": "Categories",
       "history": "History"
     },
     "adminArea": {

src/Components/AppRoutes/index.js

@@ -48,6 +48,17 @@ function SuspenseFallback({ children }) {
 export default function AppRoutes() {
   const appContext = useAppContext();
 
+  /*
+   <Route
+        path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
+        element={
+          <SuspenseFallback>
+            <GroupTasks isGroupTasksViewModalOpen={true} />
+          </SuspenseFallback>
+        }
+      />
+  */
+
   console.info("appRoutes");
 
   return (
@@ -122,7 +133,7 @@ export default function AppRoutes() {
       )}
 
       <Route
-        path={Constants.ROUTE_PATHS.GROUP_TASKS}
+        path={`${Constants.ROUTE_PATHS.GROUP_TASKS_VIEW}:paramCategory`}
         element={
           <SuspenseFallback>
             <GroupTasks isGroupTasksViewModalOpen={false} />
@@ -130,15 +141,6 @@ export default function AppRoutes() {
         }
       />
 
-      <Route
-        path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
-        element={
-          <SuspenseFallback>
-            <GroupTasks isGroupTasksViewModalOpen={true} />
-          </SuspenseFallback>
-        }
-      />
-
       {hasPermission(
         appContext.userPermissions,
         Constants.PERMISSIONS.GROUP_TASKS.HISTORY

src/Components/SideMenu/index.js

@@ -51,6 +51,7 @@ export default function SideMenu({
   };
 
   const getFirstMenuItems = () => {
+    // dashboard
     let items = [
       {
         label: t("sideMenu.dashboard"),
@@ -59,6 +60,7 @@ export default function SideMenu({
       },
     ];
 
+    // equipment documentation
     if (
       hasPermission(
         appContext.userPermissions,
@@ -72,37 +74,52 @@ export default function SideMenu({
       });
     }
 
-    let groupTasks = {
+    // group tasks
+    let groupTasksGroup = {
       label: t("sideMenu.groupTasks.menuCategory"),
       type: "group",
-      children: [
+      icon: <SnippetsOutlined />,
-        {
+      key: "/group-tasks",
-          label: t("sideMenu.groupTasks.overview"),
+      children: [],
-          icon: <SnippetsOutlined />,
-          key: "/group-tasks",
-        },
-      ],
     };
 
+    let groupTasks = {
+      label: t("sideMenu.groupTasks.overview"),
+      icon: <SnippetsOutlined />,
+      children: [],
+    };
+
+    for (let i = 0; i < sideBarContext.availableCategoryGroups.length; i++) {
+      groupTasks.children.push({
+        label: sideBarContext.availableCategoryGroups[i],
+        icon: <SnippetsOutlined />,
+        key: `/group-tasks/${sideBarContext.availableCategoryGroups[i]}`,
+      });
+    }
+
+    groupTasksGroup.children.push(groupTasks);
+
     if (
       hasPermission(
         appContext.userPermissions,
         Constants.PERMISSIONS.GROUP_TASKS.HISTORY
       )
     ) {
-      groupTasks.children.push({
+      groupTasksGroup.children.push({
         label: t("sideMenu.groupTasks.history"),
         icon: <HistoryOutlined />,
         key: "/group-tasks-history",
       });
     }
 
-    items.push(groupTasks);
+    items.push(groupTasksGroup);
 
+    // divider
     items.push({
       type: "divider",
     });
 
+    // admin area
     if (
       hasOnePermission(
         appContext.userPermissions,
@@ -158,6 +175,7 @@ export default function SideMenu({
   const getSecondMenuItems = () => {
     let items = [];
 
+    // scanner
     if (
       hasPermission(
         appContext.userPermissions,
@@ -171,6 +189,7 @@ export default function SideMenu({
       });
     }
 
+    // connection status, userprofile, logout
     items.push(
       {
         icon: (
@@ -266,7 +285,8 @@ export default function SideMenu({
           <Divider />
 
           <Menu
-            selectable={false}
+            selectable={true}
+            selectedKeys={[selectedKeys]}
             mode="vertical"
             onClick={(item) => navigate(item.key)}
             items={getSecondMenuItems()}

src/Contexts/SideBarContext.js

@@ -7,7 +7,7 @@ const preview = {
   selectedScanner: "",
   username: "",
   avatar: "",
-  availableGroupTasks: [],
+  availableCategoryGroups: [],
 };
 
 const SideBarContext = createContext(preview);
@@ -20,7 +20,7 @@ export default function SideBarProvider({ children }) {
   const [selectedScanner, setSelectedScanner] = useState("");
   const [username, setUsername] = useState(Constants.LOADING); //
   const [avatar, setAvatar] = useState("");
-  const [availableGroupTasks, setAvailableGroupTasks] = useState([]);
+  const [availableCategoryGroups, setAvailableCategoryGroups] = useState([]);
 
   return (
     <SideBarContext.Provider
@@ -35,8 +35,8 @@ export default function SideBarProvider({ children }) {
         setUsername,
         avatar,
         setAvatar,
-        availableGroupTasks,
+        availableCategoryGroups,
-        setAvailableGroupTasks,
+        setAvailableCategoryGroups,
       }}
     >
       {children}

src/Contexts/WebSocketContext.js

@@ -47,7 +47,7 @@ export default function WebSocketProvider({
         appContext.setUsers(data.Users);
         sideBarContext.setUsername(data.Username);
         sideBarContext.setAvatar(data.Avatar);
-        sideBarContext.setAvailableGroupTasks(data.AvailableGroupTasks);
+        sideBarContext.setAvailableCategoryGroups(data.AvailableCategoryGroups);
       });
     };
 

src/Pages/GroupTasks/Overview/index.js

@@ -15,11 +15,13 @@ import { ReloadOutlined } from "@ant-design/icons";
 import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
 import { useAppContext } from "../../../Contexts/AppContext";
 import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
+import { useParams } from "react-router-dom";
 
 export default function GroupTasks({ isGroupTasksViewModalOpen }) {
   const webSocketContext = useWebSocketContext();
   const appContext = useAppContext();
   const groupTasksContext = useGroupTasksContext();
+  const { paramCategory } = useParams();
 
   const [isGroupTypeSelectionModalOpen, setIsGroupTypeSelectionModalOpen] =
     useState(false);
@@ -58,14 +60,14 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
   };
 
   useEffect(() => {
-    myFetch("/grouptasks", "GET").then((data) => {
+    myFetch(`/grouptasks/${paramCategory}`, "GET").then((data) => {
       console.log("group tasks", data);
 
       groupTasksContext.setCategoryGroups(data.CategoryGroups);
       groupTasksContext.setGroupTasks(data.GroupTasks);
       groupTasksContext.setGroupTasksSteps(data.GroupTasksSteps);
     });
-  }, []);
+  }, [paramCategory]);
 
   return (
     <>

src/utils.js

@@ -47,7 +47,6 @@ export const Constants = {
   ROUTE_PATHS: {
     EQUIPMENT_DOCUMENTATION: "/equipment-documentation",
     EQUIPMENT_DOCUMENTATION_VIEW: "/equipment-documentation/",
-    EQUIPMENT_DOCUMENTATION_CREATE: "/equipment-documentation/create/",
     GROUP_TASKS: "/group-tasks",
     GROUP_TASKS_VIEW: "/group-tasks/",
   },