2021323
/
Backend
1
0
Fork 0
Code Pull Requests Activity

feat: Multiselect new skill

pull/1/head
Lunix-420 2024-11-14 18:50:42 +01:00
parent 7725711822
commit 859b91e5b7
4 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/main/resources/static/js/skills/skillSelector.js 100644
View File

@ -0,0 +1,9 @@
function handleSecondarySkillSelection(selectElement) {
const skillCreator = document.querySelector("#skillCreator");
const newSkillSelector = selectElement.closest(".row").cloneNode(true);
newSkillSelector.querySelector("#secondarySkill").value = "";
newSkillSelector.querySelector("#level").value = "1";
newSkillSelector.querySelector(".btn-default").disabled = true;
const skillSelectorList = document.querySelector("#skillSelectorList");
skillSelectorList.appendChild(newSkillSelector);
}

12
src/main/resources/templates/fragments/skills/_skillCreator.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="skillCreator">
<div th:fragment="skillCreator" id="skillCreator">
<form th:object="${skillPrototype}" id="addSkillForm" class="project-card">
<div class="card-body">
<!-- Primary Skill Dropdown -->
@ -22,11 +22,13 @@
</select>
</div>
<!-- Secondary Skill Selector -->
<div
th:replace="~{/fragments/skills/_skillSelector :: skillSelector}"
></div>
<div id="skillSelectorList" class="skill-selector-list">
<div
th:replace="~{/fragments/skills/_skillSelector :: skillSelector}"
></div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn-default">Speichern</button>
<button type="submit" class="btn-default">Add Skill</button>
</div>
</form>
</div>

1
src/main/resources/templates/fragments/skills/_skillSelector.html
View File

@ -10,6 +10,7 @@
name="ssid"
class="form-control"
th:field="*{ssid}"
onchange="handleSecondarySkillSelection(this)"
>
<option value="" disabled selected>
Bitte eine Fähigkeit auswählen!

1
src/main/resources/templates/pages/skills/add.html
View File

@ -25,5 +25,6 @@
<script src="/js/skills/fetchSecondarySkills.js"></script>
<script src="/js/skills/levelSelector.js"></script>
<script src="/js/skills/addSkill.js"></script>
<script src="/js/skills/skillSelector.js"></script>
</body>
</html>