apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'summary-skills' (#1) from summary-skills into main

Browse Source 
Reviewed-on: #1
This commit is contained in:
Николай Полтщук
2023-12-05 16:03:56 +03:00
parent 6fc708255c a353f96d16
commit 5861fbe4b1
34 changed files with 1096 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/pages/Summary/Summary.js
View File

@ -17,6 +17,8 @@ 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.png";
@ -30,18 +32,40 @@ 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(
`/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`,
`/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
).then((responseGit) => setGitInfo(responseGit));
}, []);
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 +122,84 @@ export const Summary = () => {
<div className="summary__skills skills__section">
<div className="summary__sections__head">
<h3>Основной стек</h3>
<button>Редактировать</button>
<button
className={editSkills ? "edit" : ""}
onClick={() => {
if (editSkills) {
setSkills();
}
setEditSkills(!editSkills);
}}
>
{editSkills ? "Сохранить" : "Редактировать"}
</button>
</div>
<div className="skills__section__items">
<div className="skills__section__items__wrapper">
{profileInfo.skillValues &&
profileInfo.skillValues.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ","}
</span>
))}
</div>
{editSkills ? (
<div className="editSkills">
{selectedSkills &&
selectedSkills.map((skill) => {
return (
<span key={skill.skill_id}>
{skill.skill.name}
<img
src={deleteIcon}
alt="deleteIcon"
onClick={() =>
setSelectedSkills((prevValue) =>
prevValue.filter(
(item) => item.skill_id !== skill.skill_id
)
)
}
/>
</span>
);
})}
<div className="selectSkills">
<div
className="selectSkills__name"
onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
>
Выберите скилл
<img
className={selectSkillsOpen ? "open" : ""}
src={arrowDown}
/>
</div>
{selectSkillsOpen && (
<div className="selectSkills__dropDown">
{skillsList.map((skill) => {
return (
<p
onClick={() =>
setSelectedSkills((prevValue) => [
...prevValue,
{ skill: skill, skill_id: skill.id },
])
}
key={skill.id}
className="selectSkills__item"
>
{skill.name}
</p>
);
})}
</div>
)}
</div>
</div>
) : (
<div className="skills__section__items__wrapper">
{selectedSkills &&
selectedSkills.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{selectedSkills.length > index + 1 && ","}
</span>
))}
</div>
)}
</div>
</div>
)}

83
src/pages/Summary/summary.scss
View File

@ -249,6 +249,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 {