dashboard done + UI/UX fix

This commit is contained in:
Olivier PARPAILLON
2024-11-26 15:35:11 +01:00
parent 5e5e5e9ca7
commit 119051eef8
16 changed files with 271 additions and 49 deletions

View File

@@ -11,24 +11,7 @@
<h1 class="text-2xl font-semibold mb-4">Gestion des utilisateurs</h1>
<!-- Actions: Import/Export -->
<div class="flex flex-row items-center mb-4">
<form action="{{ path('participant_import') }}" method="post" enctype="multipart/form-data" class="flex items-center">
<button
type="submit"
class="bg-green-500 text-white mr-4 px-4 py-2 rounded hover:bg-green-600">
Importer CSV
</button>
<input
type="file"
name="csv_file"
accept=".csv"
class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-gray-800 file:text-white
hover:file:bg-gray-700" />
</form>
<div class="flex flex-row mb-4 justify-between">
<button
id="openModal"
class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 items-end justify-end">
@@ -38,9 +21,16 @@
<!-- Participants Table -->
<form method="POST" action="{{ path('participant_export') }}">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 mb-4 rounded hover:bg-blue-600">
<a href="{{ path('participant_export') }}">Exporter CSV</a>
</button>
<div class="flex flex-row">
<button
id="openModalCsv" type="button"
class="bg-green-500 text-white mb-4 mr-4 px-4 py-2 rounded hover:bg-green-600">
Importer CSV
</button>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 mb-4 rounded hover:bg-blue-600">
<a href="{{ path('participant_export') }}">Exporter CSV</a>
</button>
</div>
<div class="overflow-x-auto bg-white rounded shadow">
<table class="min-w-full bg-white divide-y divide-gray-200">
<thead class="bg-gray-50">
@@ -195,6 +185,36 @@
</div>
</div>
<div id="modalCsv" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-50">
<div class="flex justify-center items-center min-h-screen">
<div class="bg-white p-6 rounded shadow-md w-1/3">
<h2 class="text-xl font-semibold mb-4">Importer un CSV</h2>
<form id="addCSVForm" method="post" enctype="multipart/form-data" class="flex flex-col items-center" action="{{ path('participant_import') }}">
<div class="mb-4">
<input
type="file"
name="csv_file"
accept=".csv"
class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-gray-800 file:text-white
hover:file:bg-gray-700" />
</div>
<div class="flex flex-row">
<button
type="submit"
class="bg-green-500 text-white mr-4 px-4 py-2 rounded hover:bg-green-600">
Importer CSV
</button>
<button type="button" id="closeModalCsv" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Annuler</button>
</div>
</form>
</div>
</div>
</div>
{# Modale import CSV#}
<script>
@@ -209,6 +229,16 @@
});
</script>
<script>
document.getElementById('openModalCsv').addEventListener('click', function() {
document.getElementById('modalCsv').classList.remove('hidden')
})
document.getElementById('closeModalCsv').addEventListener('click', function() {
document.getElementById('modalCsv').classList.add('hidden')
})
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const selectAllCheckbox = document.getElementById('selectAll');