correctif bouton planning

assets/controllers/planning_controller.js

@@ -5,7 +5,7 @@ export default class extends Controller {
     connect() {
         console.log("Stimulus: contrôleur de planning actif");
 
-        this.arrows = this.element.querySelectorAll('[data-id]');
+        this.arrows = this.element.querySelectorAll('.period-controller');
         this.showAll = this.element.querySelector('[data-store]');
         this.containers = document.querySelectorAll('.period-panel');
 
@@ -41,9 +41,10 @@ export default class extends Controller {
         if (this.showAll.dataset.action == "show") {
             this.containers.forEach(container => {
                 container.classList.remove('is-hidden');
-                this.showAll.dataset.action = "hide";
-                this.showAll.innerHTML = 'Cacher les autres périodes';
             });
+            this.showAll.dataset.action = "hide";
+            this.showAll.innerHTML = 'Cacher les autres périodes';
+            this.arrows.forEach(arrow => { console.log(arrow); arrow.classList.add('is-hidden') });
         } else {
             this.containers.forEach(container => {
                 if (container.id === this.showAll.dataset.store) {
@@ -51,6 +52,7 @@ export default class extends Controller {
                 } else {
                     container.classList.add('is-hidden');
                 }
+                this.arrows.forEach(arrow => { arrow.classList.remove('is-hidden') });
             });
             this.showAll.dataset.action = "show";
             this.showAll.innerHTML = 'Afficher toutes les périodes à la suite';            

templates/components/Planning.html.twig

@@ -22,11 +22,20 @@
 
     {# On ajoute les horaires période par période #}
     {% set i=0 %}
+    {% set first_period=1 %}
     {% for period in event.getPeriods() %}
     <div class="fixed-grid has-{{ cols }}-cols period-panel{% if i>0 %} is-hidden{% endif %}" id="#period-{{ period.id }}">
         <div class="grid is-gap-0">
             <div class="cell planning-cell planning-cell-period is-col-span-{{ cols }} has-text-centered">
-                {% if i > 0 %}<span class="icon period-controler" data-id="#period-{{ event.getPeriods()[i-1].id }}"><twig:ux:icon name='bi:arrow-left-circle'/></span>{% endif %}<div class="planning-cell-force-large has-text-centered">Période du {{ period.startOn|date('d/m/Y \\d\\e H:i', app_timezone) }} à {{ period.endOn|date('H:i', app_timezone) }}</div>{% if i+1 < event.getPeriods()|length %}<span class="icon period-controler"  data-id="#period-{{ event.getPeriods()[i+1].id }}"><twig:ux:icon name='bi:arrow-right-circle'/></span>{% endif %}
+                {% if i > 0 %}
+                    <span class="icon period-controller" data-id="#period-{{ event.getPeriods()[i-1].id }}"><twig:ux:icon name='bi:arrow-left-circle'/></span>
+                {% else %}
+                    {% set first_period=period.id %}
+                {% endif %}
+                <div class="planning-cell-force-large has-text-centered">Période du {{ period.startOn|date('d/m/Y \\d\\e H:i', app_timezone) }} à {{ period.endOn|date('H:i', app_timezone) }}</div>
+                {% if i+1 < event.getPeriods()|length %}
+                    <span class="icon period-controller"  data-id="#period-{{ event.getPeriods()[i+1].id }}"><twig:ux:icon name='bi:arrow-right-circle'/></span>
+                {% endif %}
                 {% set i=i+1 %}
             </div>
 
@@ -126,7 +135,7 @@
     {% endfor %}
 
 {# fin du block de grille #}
-
-<div class="has-text-centered"><p data-store="#period-1" data-action="show" class="button">Afficher toutes les périodes à la suite</p></div>
-
+{% if i > 1 %}
+<div class="has-text-centered"><p data-store="#period-{{ first_period }}" data-action="show" class="button">Afficher toutes les périodes à la suite</p></div>
+{% endif %}
 </div>