IT-Stock/app/templates/categories.html

{% extends "base.html" %}
{% block titre %}Catégories - Gestion de stock IT{% endblock %}

{#
  Macro récursive : un nœud de l'arborescence (profondeur illimitée) et
  ses enfants. <details> est replié par défaut pour qu'un arbre profond
  ou avec beaucoup de branches reste lisible sans tout afficher d'un coup.
#}
{% macro noeud_categorie(categorie) %}
<li class="noeud-categorie">
  <details>
    <summary>
      <span class="noeud-chevron" aria-hidden="true"></span>
      <span class="noeud-nom">{{ categorie.nom }}</span>
      <span class="noeud-compte">
        {%- if categorie.enfants %}{{ categorie.enfants|length }} sous-cat.{% endif -%}
        {%- if categorie.enfants and categorie.materiels %} · {% endif -%}
        {%- if categorie.materiels %}{{ categorie.materiels|length }} matériel(s){% endif -%}
      </span>
    </summary>

    <div class="noeud-actions">
      <form method="post" action="/categories" class="formulaire-inline">
        <input type="hidden" name="parent_id" value="{{ categorie.id }}">
        <input type="text" name="nom" placeholder="Ajouter une sous-catégorie" required>
        <button type="submit">Ajouter</button>
      </form>
      {% if not categorie.enfants and not categorie.materiels %}
      <form method="post" action="/categories/{{ categorie.id }}/supprimer" class="formulaire-inline">
        <button type="submit" class="bouton-danger">Supprimer</button>
      </form>
      {% endif %}
    </div>

    {% if categorie.enfants %}
    <ul>
      {% for enfant in categorie.enfants %}
        {{ noeud_categorie(enfant) }}
      {% endfor %}
    </ul>
    {% endif %}
  </details>
</li>
{% endmacro %}

{% block contenu %}
<h1>Catégories</h1>

<form method="get" action="/categories" class="barre-recherche">
  <input type="search" name="q" value="{{ q }}" placeholder="Rechercher une catégorie…">
  {% if q %}<a href="/categories" class="lien-effacer">Effacer</a>{% endif %}
</form>

<form method="post" action="/categories" class="formulaire-inline formulaire-racine">
  <input type="text" name="nom" placeholder="Nouvelle catégorie racine" required>
  <button type="submit">Ajouter</button>
</form>

{% if q %}
  {% if resultats %}
  <ul class="liste-resultats">
    {% for categorie in resultats %}
    <li>
      <span class="chemin-categorie">{{ categorie.chemin() }}</span>
      {% if not categorie.enfants and not categorie.materiels %}
      <form method="post" action="/categories/{{ categorie.id }}/supprimer" class="formulaire-inline">
        <button type="submit" class="bouton-danger">Supprimer</button>
      </form>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="liste-vide">Aucune catégorie ne correspond à « {{ q }} ».</p>
  {% endif %}
{% else %}
  {% if racines %}
  <ul class="arbre-categories">
    {% for racine in racines %}
      {{ noeud_categorie(racine) }}
    {% endfor %}
  </ul>
  {% else %}
  <p class="liste-vide">Aucune catégorie pour l'instant.</p>
  {% endif %}
{% endif %}
{% endblock %}