feat: create button for importing groups from medlem as options (#212)

* feat: create button for importing groups from medlem as options

backend/controllers/group.ts

@@ -0,0 +1,17 @@
+import { Response } from "express";
+import { getAllGroups } from "ntnui-tools";
+import { RequestWithNtnuiNo } from "../utils/request";
+
+export const getGroups = async (
+  req: RequestWithNtnuiNo,
+  res: Response
+): Promise<Response> => {
+  try {
+    const groups = await getAllGroups(req.body.category);
+    return res.status(200).json(groups);
+  } catch (error) {
+    return res
+      .status(500)
+      .json({ message: "Error while fetching groups from medlem" });
+  }
+};

backend/index.ts

@@ -13,6 +13,7 @@ import votationRoutes from "./routes/votation";
 import { parse } from "url";
 import { lobbyWss } from "./wsServers/lobby";
 import { organizerWss } from "./wsServers/organizer";
+import groupRoutes from "./routes/groups";
 
 dotenv.config();
 
@@ -45,6 +46,7 @@ app.use("/user", userRoutes);
 app.use("/assembly", assemblyRoutes);
 app.use("/qr", qrRoutes);
 app.use("/votation", votationRoutes);
+app.use("/groups", groupRoutes);
 
 // WebSocket routes
 server.on("upgrade", function upgrade(request, socket, head) {

backend/routes/groups.ts

@@ -0,0 +1,8 @@
+import { Router } from "express";
+import { getGroups } from "../controllers/group";
+
+const groupRoutes = Router();
+
+groupRoutes.post("/", getGroups);
+
+export default groupRoutes;

frontend/package.json

@@ -22,7 +22,7 @@
     "@tabler/icons-react": "^2.10.0",
     "@types/js-cookie": "^3.0.2",
     "@yudiel/react-qr-scanner": "^1.1.4",
-    "axios": "^1.4.0",
+    "axios": "^1.7.7",
     "js-cookie": "^3.0.1",
     "msw": "^1.2.1",
     "protected-route-react": "^1.0.1",

frontend/src/components/VotationPanel.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Flex,
   NumberInput,
+  Menu,
 } from "@mantine/core";
 import {
   activateVotation,
@@ -22,6 +23,7 @@ import { useStyles } from "../styles/EditAssemblyStyles";
 import { VoteType } from "../types/votes";
 import { getNumberOfParticipantsInAssembly } from "../services/assembly";
 import { showNotification } from "@mantine/notifications";
+import { getGroups } from "../services/groups";
 
 export interface CaseType {
   caseNumber: number;
@@ -109,6 +111,20 @@ function VotationPanel({
     setIsChanged(!isChanged);
   }
 
+  const handleImportGroupOptions = async (category: string) => {
+    const groups = await getGroups(category);
+    if (Array.isArray(groups)) {
+      const groupNames = groups.map((group) => group.name);
+
+      const newGroupNames = groupNames.filter(
+        (name) => !options.includes(name)
+      );
+      setOptions([...options, ...newGroupNames]);
+
+      form.setFieldValue("options", [...form.values.options, ...newGroupNames]);
+    }
+  };
+
   async function activateVote(votation: VoteType) {
     if (!votation.isFinished) {
       await activateVotation(
@@ -229,6 +245,33 @@ function VotationPanel({
               }}
               {...form.getInputProps("options")}
             />
+            <Menu>
+              <Menu.Target>
+                <Button
+                  style={{
+                    display: "flex",
+                    justifyContent: "left",
+                    marginTop: "10px",
+                    marginBottom: "10px",
+                  }}
+                >
+                  <Text>Import options</Text>
+                </Button>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <Menu.Item
+                  onClick={() => handleImportGroupOptions("committee")}
+                >
+                  Import committees
+                </Menu.Item>
+                <Menu.Item
+                  onClick={() => handleImportGroupOptions("sports_group")}
+                >
+                  Import sports groups
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
             <NumberInput
               data-testid="maxOptionsInput"
               withAsterisk

frontend/src/services/groups.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export const getGroups = async (category?: string): Promise<Group[]> => {
+  try {
+    const response = await axios.post(
+      "/groups",
+      { category },
+      { withCredentials: true }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching groups:", error);
+    throw new Error("Failed to fetch groups");
+  }
+};

frontend/src/types/group.ts

@@ -0,0 +1,13 @@
+interface Group {
+  group_id: number;
+  name: string;
+  name_english: string;
+  slug: string;
+  gsuite_prefix: string;
+  subgroups: any[];
+  member?: boolean;
+  access: string;
+  sent_request?: boolean;
+  category: string;
+  website_link: string;
+}