ucef/as-talange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: gestion dynamique des équipements dans la configuration d'une catégorie
AS Talange CI/CD Pipeline / Build & Run Unit Tests (push) Successful in 3m10s
Details
AS Talange CI/CD Pipeline / Deploy to Test Environment (push) Successful in 4m28s
Details

Browse Source
This commit is contained in:
Youssef
2026-06-29 11:46:15 +02:00
parent 7249b45533
commit 8156c8f3d0
1 changed files with 73 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/parametrage/categories_form.html
+73 -8
View File
@@ -62,30 +62,95 @@
<div class="pt-4 border-t border-gray-100">
<label class="block text-sm font-medium text-gray-700 mb-2">Équipements liés à la catégorie</label>
<div class="space-y-3 max-h-64 overflow-y-auto">
<th:block th:each="equi : ${allEquipements}">
<div class="flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100">
<div class="w-1/3">
<div class="flex space-x-2 mb-4">
<select id="equipementToAdd" class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
<option value="">Sélectionner un équipement à ajouter...</option>
<th:block th:each="equi : ${allEquipements}">
<option th:value="${equi.id}" th:text="${equi.nom}"></option>
</th:block>
</select>
<button type="button" onclick="addEquipement()" class="px-4 py-1.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">Ajouter</button>
</div>
<div id="equipementsContainer" class="space-y-3 max-h-64 overflow-y-auto">
<th:block th:each="equi : ${allEquipements}" th:if="${categorie.hasEquipement(equi.id)}">
<div class="flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100 equipement-row" th:id="'eq-row-' + ${equi.id}">
<div class="w-1/4">
<span class="block text-sm font-medium text-gray-900" th:text="${equi.nom}"></span>
</div>
<div class="w-1/3">
<select th:name="'etatEquipement_' + ${equi.id}" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
<option value="NON_LIE" th:selected="${!categorie.hasEquipement(equi.id)}">Non lié</option>
<option value="OBLIGATOIRE" th:selected="${categorie.hasEquipement(equi.id) and categorie.isEquipementObligatoire(equi.id)}">Obligatoire (inclus)</option>
<option value="OPTIONNEL" th:selected="${categorie.hasEquipement(equi.id) and !categorie.isEquipementObligatoire(equi.id)}">Optionnel (payant)</option>
<option value="OBLIGATOIRE" th:selected="${categorie.isEquipementObligatoire(equi.id)}">Obligatoire (inclus)</option>
<option value="OPTIONNEL" th:selected="${!categorie.isEquipementObligatoire(equi.id)}">Optionnel (payant)</option>
</select>
</div>
<div class="w-1/3 flex items-center space-x-2">
<div class="w-1/4 flex items-center space-x-2">
<label class="text-xs text-gray-500">Prix (€)</label>
<input type="number" step="0.01" th:name="'prixEquipement_' + ${equi.id}"
th:value="${categorie.getEquipementPrix(equi.id)}"
class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
</div>
<div class="w-auto">
<button type="button" th:onclick="'removeEquipement(' + ${equi.id} + ')'" class="text-red-600 hover:text-red-800 text-sm font-medium">Retirer</button>
</div>
</div>
</th:block>
</div>
</div>
<script>
function addEquipement() {
const select = document.getElementById('equipementToAdd');
const selectedOption = select.options[select.selectedIndex];
if (!selectedOption.value) return;
const id = selectedOption.value;
const nom = selectedOption.text;
if (document.getElementById('eq-row-' + id)) {
alert("Cet équipement est déjà lié à la catégorie.");
return;
}
const container = document.getElementById('equipementsContainer');
const row = document.createElement('div');
row.className = 'flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100 equipement-row';
row.id = 'eq-row-' + id;
row.innerHTML = `
<div class="w-1/4">
<span class="block text-sm font-medium text-gray-900">${nom}</span>
</div>
<div class="w-1/3">
<select name="etatEquipement_${id}" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
<option value="OBLIGATOIRE">Obligatoire (inclus)</option>
<option value="OPTIONNEL">Optionnel (payant)</option>
</select>
</div>
<div class="w-1/4 flex items-center space-x-2">
<label class="text-xs text-gray-500">Prix (€)</label>
<input type="number" step="0.01" name="prixEquipement_${id}" value="0.00" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
</div>
<div class="w-auto">
<button type="button" onclick="removeEquipement(${id})" class="text-red-600 hover:text-red-800 text-sm font-medium">Retirer</button>
</div>
`;
container.appendChild(row);
select.value = '';
}
function removeEquipement(id) {
const row = document.getElementById('eq-row-' + id);
if (row) {
row.remove();
}
}
</script>
<div class="pt-4 flex justify-end space-x-3 border-t border-gray-100">
<a th:href="@{/categories}" class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</a>
<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">Enregistrer</button>