Added skills

frontend/src/components/features/Skills/Skills.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+
+export const CheckboxTree = ({ data, setGraph }) => {
+  const [checkedItems, setCheckedItems] = useState({});
+
+  const handleCheckboxChange = (itemName, checked) => {
+    setCheckedItems((prevCheckedItems) => {
+      let newCheckedItems = { ...prevCheckedItems, [itemName]: checked };
+
+      if (checked) {
+        const parts = itemName.split(".");
+        parts.pop();
+        let parent = parts.join(".");
+        while (parent) {
+          newCheckedItems = { ...newCheckedItems, [parent]: true };
+          const parentParts = parent.split(".");
+          parentParts.pop();
+          parent = parentParts.join(".");
+        }
+      } else {
+        uncheckChildren(itemName, newCheckedItems);
+      }
+      
+      setGraph(getGraph(newCheckedItems));
+
+      return newCheckedItems;
+    });
+  };
+
+  const getGraph = (checkedItems) => {
+    const graph = {};
+  
+    for (const itemName in checkedItems) {
+      if (checkedItems[itemName]) {
+        const parts = itemName.split(".");
+        let currentNode = graph;
+  
+        for (let i = 0; i < parts.length; i++) {
+          const part = parts[i];
+          if (!currentNode[part]) {
+            currentNode[part] = {};
+          }
+          currentNode = currentNode[part];
+        }
+      }
+    }
+  
+    return graph;
+  };
+
+  const uncheckChildren = (parentName, checkedItems) => {
+    for (const key in checkedItems) {
+      if (key.startsWith(parentName + ".")) {
+        checkedItems[key] = false;
+        if (typeof checkedItems[key] === "object") {
+          uncheckChildren(key, checkedItems);
+        }
+      }
+    }
+  };
+
+  const renderCheckboxes = (items, prefix = "") => {
+    const renderedCheckboxes = [];
+    for (const key in items) {
+      const itemName = prefix ? `${prefix}.${key}` : key;
+      renderedCheckboxes.push(
+        <div key={itemName}>
+          <input
+            id={itemName}
+            type="checkbox"
+            checked={checkedItems[itemName] || false}
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            onChange={(e) => handleCheckboxChange(itemName, e.target.checked)}
+          />
+          <label htmlFor={itemName}>{key}</label>
+        </div>
+      );
+      if (typeof items[key] === "object") {
+        renderedCheckboxes.push(
+          <div key={`${itemName}-children`} style={{ paddingLeft: "20px" }}>
+            {renderCheckboxes(items[key], itemName)}
+          </div>
+        );
+      }
+    }
+    return renderedCheckboxes;
+  };
+
+  return <div>{renderCheckboxes(data)}</div>;
+};

frontend/src/components/pages/Main/Main.tsx

@@ -7,7 +7,7 @@ import { Textarea } from "../../shared/ui/textarea";
 import { Link, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { deleteEvent, eventList } from "../AdminEventPage/AdminEventAPI";
-import VacancyCard from "../../entities/VacancyCard/VacancyCard";
+import { CheckboxTree } from "../../features/Skills/Skills";
 import {
   Card,
   CardContent,
@@ -24,12 +24,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../shared/ui/dialog";
-import { t } from "i18next";
 
 const Main = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const [graph, setGraph] = useState({});
   const [events, setEvents] = useState<Event[]>([]);
 
   useEffect(() => {
@@ -66,15 +66,16 @@ const Main = () => {
                                 <DialogHeader>
                                     <DialogTitle><h1 className={less["title-form"]}>{t("entrance")}</h1></DialogTitle>
                                     <DialogDescription>
-                                        <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
+                                        <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate, graph)}>
                                             <div className={less["novis"]}><Input type="text" name="event" value={event.id} placeholder="Event" /></div>
                                             <Input type="text" name="first_name" placeholder="First name" />
                                             <Input type="text" name="last_name" placeholder="Last name" />
                                             <Input type="date" name="birth_date" placeholder="Date" />
                                             <Input type="email" name="email" placeholder="Email" />
                                             <Textarea name="bio" placeholder="About" />
+                                            <CheckboxTree data={event.tree} setGraph={setGraph} />
 
-                                            <Button>{t("buttonLoginInSystem")}</Button>
+                                            <Button>Signup</Button>
                                         </form>
                                     </DialogDescription>
                                 </DialogHeader>
@@ -85,7 +86,7 @@ const Main = () => {
                 </Card>
             ))}
         <Button variant="link" asChild>
-          <Link to={"/dash/skill-tree"}>{t("iorganizer")}</Link>
+          <Link to={"/dash/admin"}>{t("iorganizer")}</Link>
         </Button>
       </div>
       <div className={less["general-right"] + " shadow"}></div>

frontend/src/components/shared/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}

frontend/src/components/widgets/Header/AuthAPI.ts

@@ -37,11 +37,12 @@ export const submitLogin = (e: FormEvent<HTMLFormElement>) => {
 }
 
 //регистрация
-export const submitRegister = (e: FormEvent<HTMLFormElement>, navigate: Function) => {
+export const submitRegister = (e: FormEvent<HTMLFormElement>, navigate: Function, graph: JSON) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     const formProps = Object.fromEntries(formData);
     console.log(formProps)
+    formProps.skills = JSON.stringify(graph);
 
 
     fetch(`${API_BASE}${API_USERS}`, {