Tri code postal

.drone.yml

@@ -0,0 +1,35 @@
+---
+kind: pipeline
+type: ssh
+name: Ceinture culturelle | Déploiment du Thème
+
+clone:
+  disable: true
+
+server:
+  host:
+    from_secret: build_server_host
+  user:
+    from_secret: build_server_user
+  password:
+    from_secret: build_server_password
+
+steps:
+  - name: Clonage du Repo
+    commands:
+      - git clone https://git.deligraph.be/deliadmin/ceinture-culturelle.git
+  - name: Installation du package
+    commands:
+      - cd ceinture-culturelle
+      - npm install
+  - name: Build du package
+    commands:
+      - cd ceinture-culturelle
+      - npm run production
+  - name: Déploiement sur le serveur de dev
+    environment:
+      DEV_SERVER_PATH:
+        from_secret: dev_server_path
+    commands:
+      - cd ceinture-culturelle
+      - rsync -avhp -e 'ssh -p 1982' ./ $DEV_SERVER_PATH:~/homegrade-network/wordpress/wp-content/themes/Metiers_du_patrimoine --delete --exclude 'node_modules' --exclude 'Makefile' --exclude '.git' --exclude '.env' --exclude '.env_prod' --exclude '.env_dev'

css/app.css

@@ -604,6 +604,9 @@ video {
 .h-1{
     height: 0.25rem
 }
+.h-4{
+    height: 1rem
+}
 .h-6{
     height: 1.5rem
 }

css/editor-style.css

@@ -104,6 +104,9 @@
 .h-1 {
     height: 0.25rem
 }
+.h-4 {
+    height: 1rem
+}
 .h-6 {
     height: 1.5rem
 }

htmx/events-home.php

@@ -43,7 +43,7 @@ $query = new WP_Query( $args );
         $organisme = get_field('organisme');
         $lien_de_levenement = get_field('lien_de_levenement');
     ?>
-        <tr>
+        <tr data-postal="<?php echo $code_postal; ?>">
             <td class="p-4 border-b border-slate-300"><?php echo $date_debut; ?></td>
             <td class="p-4 border-b border-slate-300"><?php echo $date_fin; ?></td>
             <td class="p-4 border-b border-slate-300"><?php echo $code_postal; ?></td>

js/app.js

@@ -41,6 +41,37 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
+/* Ajout du tri dynamique sur les codes postaux */
+
+document.addEventListener("DOMContentLoaded", function () {
+  var input = document.getElementById("postalInput");
+  input.addEventListener("input", function () {
+    var value = input.value;
+
+    // Vérifie si 4 chiffres ont été tapés
+    if (value.length === 4) {
+      // Cache toutes les zones
+      var zones = document.querySelectorAll("[data-postal]");
+      zones.forEach(function (zone) {
+        zone.classList.add("hidden");
+      });
+
+      // Affiche uniquement celles qui correspondent au code postal
+      var matchingZones = document.querySelectorAll("[data-postal='".concat(value, "']"));
+      matchingZones.forEach(function (zone) {
+        zone.classList.remove("hidden");
+      });
+    }
+    if (value.length < 4) {
+      // Cache toutes les zones
+      var _zones = document.querySelectorAll("[data-postal]");
+      _zones.forEach(function (zone) {
+        zone.classList.remove("hidden");
+      });
+    }
+  });
+});
+
 /***/ }),
 
 /***/ "./resources/css/app.css":

resources/js/app.js

@@ -34,3 +34,37 @@ document.addEventListener("DOMContentLoaded", () => {
         }
       });
     });
+
+
+    /* Ajout du tri dynamique sur les codes postaux */
+
+    document.addEventListener("DOMContentLoaded", () => {
+      const input = document.getElementById("postalInput");
+
+      input.addEventListener("input", () => {
+          const value = input.value;
+
+          // Vérifie si 4 chiffres ont été tapés
+          if (value.length === 4) {
+              // Cache toutes les zones
+              const zones = document.querySelectorAll("[data-postal]");
+              zones.forEach(zone => {
+                  zone.classList.add("hidden");
+              });
+
+              // Affiche uniquement celles qui correspondent au code postal
+              const matchingZones = document.querySelectorAll(`[data-postal='${value}']`);
+              matchingZones.forEach(zone => {
+                  zone.classList.remove("hidden");
+              });
+          }
+
+          if (value.length < 4) {
+              // Cache toutes les zones
+              const zones = document.querySelectorAll("[data-postal]");
+              zones.forEach(zone => {
+                zone.classList.remove("hidden");
+              });
+          }
+      });
+  });

template-parts/events-display.php

@@ -1,5 +1,11 @@
 <?php 
 $today = date('Ymd');
+
+$date_filter = 'ASC';
+if (isset($_GET['debut']) && $_GET['debut'] == 'asc') {
+    $date_filter = 'DESC';
+}
+
 // WP_Query arguments
 $args = array(
 	'post_type' => 'evenements',
@@ -22,8 +28,8 @@ $args = array(
         ),
     ),
     'orderby' => array(
-        'date_debut' => 'ASC',     // Trier par date de début
+        'date_debut' => $date_filter,     // Trier par date de début
-        'date_fin'   => 'ASC',     // Puis par date de fin
+        'date_fin'   => $date_filter,     // Puis par date de fin
     ),
 );
 
@@ -31,6 +37,13 @@ $args = array(
 $query = new WP_Query( $args );
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 
+
+if (isset($_GET['debut']) && $_GET['debut'] == 'asc') {
+    $asc_url = add_query_arg( 'debut', 'desc', get_permalink() );
+}else{
+    $asc_url = add_query_arg( 'debut', 'asc', get_permalink() );
+}
+
 ?>
 
 <section>
@@ -38,9 +51,19 @@ $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
         <table class="w-full text-left table-auto min-w-max">
             <thead>
                 <tr>
-                    <th class="p-4 border-b border-slate-300 bg-slate-200">Début</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">
+                        Début
+                        <a href="<?php echo $asc_url; ?>">
+                            <svg class="inline-block h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                                <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"></path>
+                            </svg>
+                        </a>
+                    </th>
                     <th class="p-4 border-b border-slate-300 bg-slate-200">Fin</th>
-                    <th class="p-4 border-b border-slate-300 bg-slate-200">CP</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">
+                        CP :
+                        <input type="text" id="postalInput" maxlength="4" placeholder="48..">
+                    </th>
                     <th class="p-4 border-b border-slate-300 bg-slate-200">Organisme</th>
                     <th class="p-4 border-b border-slate-300 bg-slate-200">Titre</th>
                 </tr>
@@ -55,7 +78,7 @@ $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                 $organisme = get_field('organisme');
                 $lien_de_levenement = get_field('lien_de_levenement');
             ?>
-                <tr>
+                <tr data-postal="<?php echo $code_postal; ?>">
                     <td class="p-4 border-b border-slate-300"><?php echo $date_debut; ?></td>
                     <td class="p-4 border-b border-slate-300"><?php echo $date_fin; ?></td>
                     <td class="p-4 border-b border-slate-300"><?php echo $code_postal; ?></td>