program - calendar filters working

site/blueprints/pages/event.yml

@@ -164,7 +164,16 @@ tabs:
     label: Réglages
     icon: cog
     fields:
-      color: fields/color
+      category:
+        label: Catégorie
+        type: select
+        width: 1/4
+        options:
+          type: query
+          query: page.parent.parent.categories.split
+      color:
+        extends: fields/color
+        width: 3/4
       mapadoLine:
         type: line
       isMapadoEvent:

site/blueprints/pages/program.yml

@@ -13,9 +13,18 @@ tabs:
   contentTab:
     label: Calendrier
     icon: calendar
-    sections:
+    columns:
-      seasons:
+      - width: 1/2
-        label: Saisons
+        fields:
-        type: pages
+          categories:
-        template: season
+            label: Catégories d'événement
-        info: "{{ page.children.count }} événements"
+            type: tags
+            max: 5
+            help: Permet aux visiteurs de filtrer les événements du [programme](/programme).
+      - width: 1/2
+        sections:
+          seasons:
+            label: Saisons
+            type: pages
+            template: season
+            info: "{{ page.children.count }} événements"

site/controllers/program.php

@@ -38,6 +38,7 @@ function createArraySession($event, $session) {
   $arraySession['ticketingUrl'] = $isMapadoEvent ? $session->ticketingUrl() : false;
   $arraySession['bookableStock'] = $isMapadoEvent ? $session->bookableStock()->value() : 'free';
   $arraySession['color'] = $event->color();
+  $arraySession['category'] = $event->category();
 
   return $arraySession;
 

site/templates/program.php

@@ -29,39 +29,19 @@
         :class="tab === title ? 'strong' : ''"
         @click="if (tab === title) { tab = 'Programme' } else {tab = title}"
       ></button>
-      <button
+      <?php foreach($page->categories()->split() as $filter): ?>
-        x-data="{
+        <button
-          title: 'Spectacles',
+          x-data="{
-          get filterTitle() {
+            title: '<?= $filter ?>',
-            return 'Calendrier — ' + this.title
+            get filterTitle() {
-          }
+              return 'Calendrier — ' + this.title
-        }"
+            }
-        x-text="title"
+          }"
-        :class="tab === filterTitle ? 'strong' : ''"
+          x-text="title"
-        @click="if (tab === filterTitle) { tab = 'Programme' } else { tab = filterTitle; filter = title }"
+          :class="tab === filterTitle ? 'strong' : ''"
-      ></button>
+          @click="if (tab === filterTitle) { tab = 'Programme' } else { tab = filterTitle; filter = title }"
-      <button
+        ></button>
-        x-data="{
+      <?php endforeach ?>
-          title: 'Autres événements',
-          get filterTitle() {
-            return 'Calendrier — ' + this.title
-          }
-        }"
-        x-text="title"
-        :class="tab === filterTitle ? 'strong' : ''"
-        @click="if (tab === filterTitle) { tab = 'Programme' } else { tab = filterTitle; filter = title }"
-      ></button>
-      <button
-        x-data="{
-          title: 'Ici & Là',
-          get filterTitle() {
-            return 'Calendrier — ' + this.title
-          }
-        }"
-        x-text="title"
-        :class="tab === filterTitle ? 'strong' : ''"
-        @click="if (tab === filterTitle) { tab = 'Programme' } else { tab = filterTitle; filter = title }"
-      ></button>
     </section>
     <section class="page-title">
       <h1 x-text="tab"></h1>
@@ -101,7 +81,8 @@
                       } catch (\Throwable $th) {
                         throw new Exception($session['title'], 1);
                       }
-                    ?>
+                  ?>
+                    <template x-if="tab === 'Calendrier' || ('<?= $session['category'] ?>'.length > 0 && tab.includes('<?= $session['category'] ?>'))">
                     <li class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>" @click="goTo(event, '<?= $session['event-url'] ?>')" title="En savoir plus">
                       <div class="session__info">
                         <p><?= $formattedDate ?></p>
@@ -138,6 +119,7 @@
                         <?php endif ?>
                       </div>
                     </li>
+                    </template>
                     <?php endforeach ?>
                   </ul>
                 <?php endslot() ?>