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 = () => {
           <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">
+              {editSkills ?
-                {profileInfo.skillValues &&
+                <div className='editSkills'>
-                  profileInfo.skillValues.map((skill, index) => (
+                  {selectedSkills &&
-                    <span key={skill.id} className="skill_item">
+                    selectedSkills.map((skill) => {
-                      {skill.skill.name}
+                      return <span key={skill.skill_id}>
-                      {profileInfo.skillValues.length > index + 1 && ","}
+                        {skill.skill.name}
-                    </span>
+                        <img
-                  ))}
+                          src={deleteIcon}
-              </div>
+                          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>
         )}

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 {