diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index 86273214..7fd95e8c 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -19,6 +19,8 @@ import rightArrow from "assets/icons/arrows/arrowRight.svg"; import arrow from "assets/icons/arrows/left-arrow.png"; import gitImgItem from "assets/icons/gitItemImg.svg"; import avatarMok from "assets/images/avatarMok.png"; +import deleteIcon from "assets/icons/closeProjectPersons.svg"; +import arrowDown from "assets/icons/arrows/selectArrow.png"; import "./summary.scss"; @@ -30,7 +32,11 @@ export const Summary = () => { const [openGit, setOpenGit] = useState(false); const [gitInfo, setGitInfo] = useState([]); const [editSummeryOpen, setEditSummeryOpen] = useState(false); + const [editSkills, setEditSkills] = useState(false) const [summery, setSummery] = useState(""); + const [selectedSkills, setSelectedSkills] = useState([]) + const [selectSkillsOpen, setSelectSkillsOpen] = useState(false) + const [skillsList, seSkillsList] = useState([]); useEffect(() => { apiRequest( @@ -40,8 +46,27 @@ export const Summary = () => { useEffect(() => { setSummery(profileInfo.vc_text); + setSelectedSkills(profileInfo.skillValues) }, [profileInfo]); + + useEffect(() => { + apiRequest(`/skills/get-skills-list`).then((el) => { + seSkillsList(el); + }); + }, []) + + function setSkills() { + apiRequest("/resume/edit-skills", { + method: "PUT", + data: { + "UserCard": { + "skill": selectedSkills.map((item) => item.skill_id) + } + }, + }).then(() => {}); + } + function editSummery() { apiRequest("/resume/edit-text", { method: "PUT", @@ -98,18 +123,67 @@ export const Summary = () => {

Основной стек

- +
-
- {profileInfo.skillValues && - profileInfo.skillValues.map((skill, index) => ( - - {skill.skill.name} - {profileInfo.skillValues.length > index + 1 && ","} - - ))} -
+ {editSkills ? +
+ {selectedSkills && + selectedSkills.map((skill) => { + return + {skill.skill.name} + deleteIcon setSelectedSkills((prevValue) => prevValue.filter((item) => item.skill_id !== skill.skill_id))} + /> + + }) + } +
+
setSelectSkillsOpen(!selectSkillsOpen)}> + Выберите скилл + +
+ {selectSkillsOpen && +
+ {skillsList.map((skill) => { + return

setSelectedSkills((prevValue) => [...prevValue, {'skill': skill, 'skill_id': skill.id}])} + key={skill.id} + className='selectSkills__item'> + {skill.name} +

+ }) + } +
+ } +
+
+ : +
+ {selectedSkills && + selectedSkills.map((skill, index) => ( + + {skill.skill.name} + {selectedSkills.length > index + 1 && ","} + + ))} +
+ }
)} diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index aa12f850..51fbe77e 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -250,6 +250,89 @@ } } } + + .editSkills { + display: flex; + flex-wrap: wrap; + gap: 14px; + align-items: center; + + span { + display: flex; + column-gap: 8px; + background-color: #f5f5f5; + border-radius: 15px; + padding: 3px 10px 3px 10px; + font-weight: 700; + font-size: 16px; + line-height: 32px; + white-space: nowrap; + text-transform: uppercase; + + img { + cursor: pointer; + } + } + + .selectSkills { + position: relative; + display: flex; + flex-direction: column; + font-weight: 700; + font-size: 16px; + + &__name { + display: flex; + column-gap: 12px; + align-items: center; + cursor: pointer; + background-color: #f5f5f5; + border-radius: 15px; + padding: 3px 10px 3px 10px; + + img { + transition: all 0.3s ease; + } + + .open { + transform: rotate(180deg); + } + } + + &__dropDown { + position: absolute; + background-color: white; + border-radius: 12px; + max-height: 300px; + overflow-y: auto; + display: flex; + flex-direction: column; + row-gap: 5px; + align-items: center; + padding: 7px; + top: 35px; + + &::-webkit-scrollbar { + width: 3px; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } + + p { + cursor: pointer; + } + } + } + } } &__experience {