Refactor music management UI: separate group musics into its own template, enhance form structure, and improve responsiveness

Fix #5
This commit is contained in:
Edgar P. Burkhart 2025-06-15 16:37:09 +02:00
parent b30ee77132
commit c7b907f115
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 113 additions and 76 deletions

View file

@ -12,68 +12,5 @@
{% include "game/include/group_buttons.html" %}
{% include "game/include/group_games.html" %}
{% include "game/include/group_members.html" %}
<h2>
<i class="ri-music-2-fill"></i> Mes musiques <span class="music-count">{{ musics.count }}</span>
</h2>
<details>
<summary role="button">
<i class="ri-music-2-fill"></i> Liste des musiques
</summary>
<form method="post">
{% csrf_token %}
<table>
<thead>
<tr>
<th></th>
<th>Musique</th>
<th>ID</th>
<th>
<i class="ri-history-fill"></i>
</th>
</tr>
</thead>
<tbody>
{% for music in musics %}
<tr>
<td>
<input type="checkbox" name="musics" value="{{ music.pk }}">
</td>
<th>{{ music.title }}</th>
<td>
<a href="https://youtu.be/{{ music.yt_id }}">{{ music.yt_id }}</a>
</td>
<td>
<input type="checkbox" disabled {% if music.blacklisted %}checked{% endif %}>
</td>
</tr>
{% empty %}
<tr>
<td colspan="4">Aucune musique.</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if musics %}
<fieldset role="group">
<button type="submit"
formaction="{% url "group_remove_music" pk=group.pk %}"
class="secondary">
<i class="ri-delete-bin-fill"></i> Supprimer
</button>
<button type="submit"
class="secondary"
formaction="{% url "group_unblacklist_music" pk=group.pk %}">
<i class="ri-history-fill"></i> Retirer de la blacklist
</button>
</fieldset>
{% endif %}
</form>
</details>
<form method="post" action="{% url "group_add_music" pk=group.pk %}">
{% csrf_token %}
<fieldset>
<textarea name="yt_id" id="yt_id" placeholder="Musiques" required></textarea>
<button type="submit">Ajouter</button>
</fieldset>
</form>
{% include "game/include/group_musics.html" %}
{% endblock content %}

View file

@ -0,0 +1,66 @@
<h2>
<i class="ri-music-2-fill"></i> Mes musiques <span class="music-count">{{ musics.count }}</span>
</h2>
<details>
<summary role="button">
<i class="ri-music-2-fill"></i> Liste des musiques
</summary>
<form method="post">
{% csrf_token %}
<div class="overflow-auto">
<table class="musics">
<thead>
<tr>
<th></th>
<th>Musique</th>
<th>ID</th>
<th>
<i class="ri-history-fill"></i>
</th>
</tr>
</thead>
<tbody>
{% for music in musics %}
<tr>
<td>
<input type="checkbox" name="musics" value="{{ music.pk }}">
</td>
<th>{{ music.title }}</th>
<td>
<a href="https://youtu.be/{{ music.yt_id }}">{{ music.yt_id }}</a>
</td>
<td>
<input type="checkbox" disabled {% if music.blacklisted %}checked{% endif %}>
</td>
</tr>
{% empty %}
<tr>
<td colspan="4">Aucune musique.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if musics %}
<fieldset role="group">
<button type="submit"
formaction="{% url "group_remove_music" pk=group.pk %}"
class="secondary">
<i class="ri-delete-bin-fill"></i> Supprimer
</button>
<button type="submit"
class="secondary"
formaction="{% url "group_unblacklist_music" pk=group.pk %}">
<i class="ri-history-fill"></i> Retirer de la blacklist
</button>
</fieldset>
{% endif %}
</form>
</details>
<form method="post" action="{% url "group_add_music" pk=group.pk %}">
{% csrf_token %}
<fieldset>
<textarea name="yt_id" id="yt_id" placeholder="Musiques" required></textarea>
<button type="submit">Ajouter</button>
</fieldset>
</form>