diff --git a/frontend/src/components/features/Skills/Skills.jsx b/frontend/src/components/features/Skills/Skills.jsx new file mode 100644 index 0000000..1f35451 --- /dev/null +++ b/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( +
+ handleCheckboxChange(itemName, e.target.checked)} + /> + +
+ ); + if (typeof items[key] === "object") { + renderedCheckboxes.push( +
+ {renderCheckboxes(items[key], itemName)} +
+ ); + } + } + return renderedCheckboxes; + }; + + return
{renderCheckboxes(data)}
; +}; diff --git a/frontend/src/components/pages/Main/Main.tsx b/frontend/src/components/pages/Main/Main.tsx index 0957f12..7feb536 100644 --- a/frontend/src/components/pages/Main/Main.tsx +++ b/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([]); useEffect(() => { @@ -66,15 +66,16 @@ const Main = () => {

{t("entrance")}

-
submitRegister(event, navigate)}> + submitRegister(event, navigate, graph)}>