2021323
/
Backend
1
0
Fork 0
Code Pull Requests Activity

fix: Multi skill add delete button implemented

pull/2/head
Lunix-420 2024-11-14 20:41:17 +01:00
parent 73e3e3e2d5
commit 4eb2fabc9a
2 changed files with 58 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/main/resources/static/js/skills/skillSelector.js
View File

@ -28,4 +28,52 @@ function handleSecondarySkillSelection(selectElement) {
// Initialize star rating components for the new skill selector
initializeStarRatingComponents();
// Update the visibility of the "Entfernen" buttons
updateRemoveButtonsVisibility();
}
function updateRemoveButtonsVisibility() {
const skillSelectors = document.querySelectorAll(".skill-selector");
const removeButtons = document.querySelectorAll(".btn-default");
// Show "Entfernen" buttons only if there are at least two skill selectors
if (skillSelectors.length > 1) {
removeButtons.forEach((button) => {
const selectElement = button
.closest(".skill-selector")
.querySelector("#secondarySkill");
if (selectElement.value) {
button.style.display = "inline-block";
} else {
button.style.display = "none";
}
});
} else {
removeButtons.forEach((button) => {
button.style.display = "none";
});
}
}
function handleRemoveSkillButtonClick(button) {
const skillSelector = button.closest(".skill-selector");
skillSelector.remove();
updateRemoveButtonsVisibility();
}
document.addEventListener("DOMContentLoaded", function () {
// Initialize star rating components on page load
initializeStarRatingComponents();
// Update the visibility of the "Entfernen" buttons on page load
updateRemoveButtonsVisibility();
// Add event listeners to "Entfernen" buttons
document.querySelectorAll(".btn-default").forEach((button) => {
button.addEventListener("click", function (event) {
event.preventDefault();
handleRemoveSkillButtonClick(button);
});
});
});

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

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="skillSelector" class="row">
<div th:fragment="skillSelector" class="row skill-selector">
<!-- Secondary Skill Dropdown -->
<div class="col-6">
<div class="form-group">
@ -35,7 +35,15 @@
</div>
</div>
<div class="col-2 d-flex justify-content-center align-items-center">
<button type="submit" class="btn-default" disabled>Entfernen</button>
<button
type="submit"
class="btn-default"
id="removeSkillButton"
style="display: none"
>
Entfernen
</button>
</div>
</div>
<script></script>
</html>