369 lines
13 KiB
JavaScript
369 lines
13 KiB
JavaScript
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
|
import { CKEditor } from "@ckeditor/ckeditor5-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
import { getProfileInfo } from "@redux/outstaffingSlice";
|
|
|
|
import { urlForLocal } from "@utils/helper";
|
|
|
|
import { apiRequest } from "@api/request";
|
|
|
|
import { useNotification } from "@hooks/useNotification";
|
|
|
|
import { Footer } from "@components/Common/Footer/Footer";
|
|
import { Navigation } from "@components/Navigation/Navigation";
|
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
|
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
|
|
|
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
|
import arrow from "assets/icons/arrows/left-arrow.png";
|
|
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
|
import deleteIcon from "assets/icons/closeProjectPersons.svg";
|
|
import gitImgItem from "assets/icons/gitItemImg.svg";
|
|
import avatarMok from "assets/images/avatarMok.webp";
|
|
|
|
import "./summary.scss";
|
|
|
|
export const Summary = () => {
|
|
const profileInfo = useSelector(getProfileInfo);
|
|
const [openGit, setOpenGit] = useState(false);
|
|
const [gitInfo, setGitInfo] = useState([]);
|
|
const [editSummaryOpen, setEditSummaryOpen] = useState(false);
|
|
const [editSkills, setEditSkills] = useState(false);
|
|
const [userInfo, setUserInfo] = useState({});
|
|
const [summary, setSummary] = useState("");
|
|
const [selectedSkills, setSelectedSkills] = useState([]);
|
|
const [selectSkillsOpen, setSelectSkillsOpen] = useState(false);
|
|
const [skillsList, seSkillsList] = useState([]);
|
|
const { showNotification } = useNotification();
|
|
const { id: userId } = useParams();
|
|
|
|
useEffect(() => {
|
|
apiRequest(
|
|
`/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
|
|
).then((responseGit) => setGitInfo(responseGit));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!userId) {
|
|
setSummary(profileInfo.vc_text);
|
|
setSelectedSkills(profileInfo.skillValues);
|
|
}
|
|
}, [profileInfo]);
|
|
|
|
useEffect(() => {
|
|
apiRequest(`/skills/get-skills-list`).then((el) => {
|
|
seSkillsList(el);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (userId) {
|
|
apiRequest(`/resume?userId=${userId}`).then((res) => {
|
|
setUserInfo({
|
|
photo: res.userCard.photo,
|
|
fio: res.userCard.fio,
|
|
specification: res.userCard.specification,
|
|
level: res.userCard.level_title,
|
|
position: res.userCard.position.name
|
|
});
|
|
setSummary(res.userCard.vc_text);
|
|
setSelectedSkills(res.userCard.skillValues);
|
|
});
|
|
}
|
|
}, [userId]);
|
|
|
|
const addSkill = (skill) => {
|
|
const isSkillFound = selectedSkills.some(
|
|
(item) => item.skill_id == skill.id
|
|
);
|
|
|
|
if (!isSkillFound) {
|
|
setSelectedSkills((prevValue) => [
|
|
...prevValue,
|
|
{ skill: skill, skill_id: skill.id }
|
|
]);
|
|
}
|
|
};
|
|
|
|
const deleteSkill = (skill) => {
|
|
setSelectedSkills((prevValue) =>
|
|
prevValue.filter((item) => item.skill_id !== skill.skill_id)
|
|
);
|
|
};
|
|
|
|
function setSkills() {
|
|
apiRequest("/resume/edit-skills", {
|
|
method: "PUT",
|
|
data: {
|
|
UserCard: {
|
|
skill: selectedSkills.map((item) => item.skill_id)
|
|
}
|
|
}
|
|
}).then(() => {
|
|
showNotification({
|
|
show: true,
|
|
text: "Изменения успешно сохранены",
|
|
type: "success"
|
|
});
|
|
});
|
|
}
|
|
|
|
function editSummary() {
|
|
apiRequest("/resume/edit-text", {
|
|
method: "PUT",
|
|
data: {
|
|
resume: summary
|
|
}
|
|
}).then(() => {
|
|
showNotification({
|
|
show: true,
|
|
text: "Изменения успешно сохранены",
|
|
type: "success"
|
|
});
|
|
});
|
|
}
|
|
return (
|
|
<div className="summary">
|
|
<ProfileHeader />
|
|
<Navigation />
|
|
<div className="container">
|
|
<div className="summary__content">
|
|
<ProfileBreadcrumbs
|
|
links={[
|
|
{ name: "Главная", link: "/profile" },
|
|
{ name: "Резюме", link: "/profile/summary" }
|
|
]}
|
|
/>
|
|
<h2 className="summary__title">
|
|
Ваше резюме {openGit && <span>- Git</span>}
|
|
</h2>
|
|
{openGit && (
|
|
<div className="summary__back" onClick={() => setOpenGit(false)}>
|
|
<img src={arrow} alt="arrow" />
|
|
<p>Вернуться</p>
|
|
</div>
|
|
)}
|
|
<div className={openGit ? "summary__info open-git" : "summary__info"}>
|
|
<div className="summary__person">
|
|
<img
|
|
src={
|
|
userId
|
|
? urlForLocal(userInfo.photo)
|
|
: profileInfo?.photo
|
|
? urlForLocal(profileInfo.photo)
|
|
: avatarMok
|
|
}
|
|
className="summary__avatar"
|
|
alt="avatar"
|
|
/>
|
|
<p className="summary__name">
|
|
{userId
|
|
? userInfo.fio
|
|
: profileInfo?.fio || profileInfo?.username}{" "}
|
|
{userId ? userInfo.specification : profileInfo.specification}
|
|
</p>
|
|
<hr />
|
|
<div className="summary__direction">
|
|
{userId ? userInfo.position : profileInfo?.position?.name}
|
|
</div>
|
|
<div className="summary__level">
|
|
{userId ? userInfo.level : profileInfo?.level_title}
|
|
</div>
|
|
</div>
|
|
{!openGit && (
|
|
<button className="summary__git" onClick={() => setOpenGit(true)}>
|
|
Git
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!openGit && (
|
|
<div className="summary__skills skills__section">
|
|
<div className="summary__sections__head">
|
|
<h3>Основной стек</h3>
|
|
{!userId && (
|
|
<button
|
|
className={editSkills ? "edit" : ""}
|
|
onClick={() => {
|
|
if (editSkills) {
|
|
setSkills();
|
|
}
|
|
setEditSkills(!editSkills);
|
|
}}
|
|
>
|
|
{editSkills ? "Сохранить" : "Редактировать"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="skills__section__items">
|
|
{editSkills ? (
|
|
<div className="edit-skills">
|
|
{selectedSkills &&
|
|
selectedSkills.map((skill) => {
|
|
return (
|
|
<span key={skill.skill_id}>
|
|
{skill.skill.name}
|
|
<img
|
|
src={deleteIcon}
|
|
alt="deleteIcon"
|
|
onClick={() => deleteSkill(skill)}
|
|
/>
|
|
</span>
|
|
);
|
|
})}
|
|
<div className="select-skills">
|
|
<div
|
|
className="select-skills__name"
|
|
onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
|
|
>
|
|
Выберите скилл
|
|
<img
|
|
className={selectSkillsOpen ? "open" : ""}
|
|
src={arrowDown}
|
|
/>
|
|
</div>
|
|
{selectSkillsOpen && (
|
|
<div className="select-skills__dropDown">
|
|
{skillsList.map((skill) => {
|
|
return (
|
|
<p
|
|
onClick={() => addSkill(skill)}
|
|
key={skill.id}
|
|
className="select-skills__item"
|
|
>
|
|
{skill.name}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="skills__section__items__wrapper">
|
|
{selectedSkills &&
|
|
selectedSkills.map((skill, index) => (
|
|
<span key={skill.skill_id} className="skill_item">
|
|
{skill.skill.name}
|
|
{selectedSkills.length > index + 1 && ","}
|
|
</span>
|
|
))}
|
|
{Boolean(!selectedSkills?.length) && (
|
|
<p style={{ fontSize: "16px", fontWeight: "400" }}>
|
|
Данные не заполнены
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!openGit && (
|
|
<div className="summary__experience">
|
|
<div className="experience__block">
|
|
<div className="summary__sections__head">
|
|
<h3>Опыт работы</h3>
|
|
{!userId && (
|
|
<button
|
|
className={editSummaryOpen ? "edit" : ""}
|
|
onClick={() => {
|
|
if (editSummaryOpen) {
|
|
editSummary();
|
|
}
|
|
setEditSummaryOpen(!editSummaryOpen);
|
|
}}
|
|
>
|
|
{editSummaryOpen ? "Сохранить" : "Редактировать"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{editSummaryOpen ? (
|
|
<CKEditor
|
|
editor={ClassicEditor}
|
|
data={summary}
|
|
config={{
|
|
removePlugins: [
|
|
"CKFinderUploadAdapter",
|
|
"CKFinder",
|
|
"EasyImage",
|
|
"Image",
|
|
"ImageCaption",
|
|
"ImageStyle",
|
|
"ImageToolbar",
|
|
"ImageUpload",
|
|
"MediaEmbed",
|
|
"BlockQuote"
|
|
]
|
|
}}
|
|
onChange={(event, editor) => {
|
|
const data = editor.getData();
|
|
setSummary(data);
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="experience__content"
|
|
dangerouslySetInnerHTML={{
|
|
__html: summary ? summary : "<p>Данные не заполнены</p>"
|
|
}}
|
|
></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{openGit && (
|
|
<div className="summary__section-git">
|
|
<div className="summary__sections__head">
|
|
<h3>Ваши репозитории</h3>
|
|
<button>Редактировать</button>
|
|
</div>
|
|
<div className="summary__section-git-items">
|
|
{Boolean(gitInfo.length) &&
|
|
gitInfo.map((itemGit) => {
|
|
return (
|
|
<a
|
|
href={itemGit.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
key={itemGit.id}
|
|
className="summary__section-git-item git-item"
|
|
>
|
|
<div className="git-item__info">
|
|
<div className="git-item__info__about">
|
|
<img src={gitImgItem} alt="gitImg" />
|
|
<div className="git-item__info__name">
|
|
<h4>{itemGit.title}</h4>
|
|
<p>{itemGit.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="git-item__info__specification">
|
|
<span className="git-item__lineSkill" />
|
|
<p>{itemGit.main_stack}</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
className="git-item__link"
|
|
href={itemGit.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<img src={rightArrow} alt="arrowRight" />
|
|
</a>
|
|
</a>
|
|
);
|
|
})}
|
|
{!Boolean(gitInfo.length) && (
|
|
<p className="no-git-items">Нет актуальных проектов</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|