From fd459c0d3166522c3c1ee953f1d267efdcbb8dd8 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.parisi@coopgo.fr>
Date: Mon, 16 Dec 2024 10:26:33 +0100
Subject: [PATCH] list all bookings

---
 config.yaml                                   |   1 +
 .../_partials/booking-list.html               | 134 ++++++++++++++++++
 .../_partials/driver-list.html                |   5 +-
 .../beneficiary-solidarity.html               |  32 ++---
 web/layouts/solidarity_service/main.html      |   2 +-
 5 files changed, 153 insertions(+), 21 deletions(-)
 create mode 100644 web/layouts/solidarity_service/_partials/booking-list.html

diff --git a/config.yaml b/config.yaml
index 4a34e29..36a4b93 100644
--- a/config.yaml
+++ b/config.yaml
@@ -221,6 +221,7 @@ views:
         - web/layouts/solidarity_service/main.html
         - web/layouts/solidarity_service/_partials/beneficiary-list.html
         - web/layouts/solidarity_service/_partials/driver-list.html
+        - web/layouts/solidarity_service/_partials/booking-list.html
     create:
       files:
         - web/layouts/_partials/address_autocomplete.html
diff --git a/web/layouts/solidarity_service/_partials/booking-list.html b/web/layouts/solidarity_service/_partials/booking-list.html
new file mode 100644
index 0000000..83999c1
--- /dev/null
+++ b/web/layouts/solidarity_service/_partials/booking-list.html
@@ -0,0 +1,134 @@
+{{define "booking_solidarity_list" }}
+<main>              
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+        state: {{.ViewState.JSONWithLimits 0 10}},
+        current: 0,
+        nb_pages() {
+            let nbEl = this.state.count 
+            return Math.ceil(nbEl/10)
+        },
+        async paginate(page) {
+            let start = (page-1)*10
+            if(start < 0|| start > this.state.count) {
+                return
+            }
+            let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+            let data = await resp.json()
+            this.state.bookings = data
+            this.current=page-1
+        }            
+    }">
+    <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+        Conducteurs
+    </h2>
+    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+
+        <div class="mt-8 flex flex-col">
+            <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                    <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                        <table class="min-w-full divide-y divide-gray-300">
+                            <tbody class="divide-y divide-gray-200 bg-white">
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Conducteur</th>
+                                    <th>Passager</th>
+                                </tr>
+                                <template x-for="booking in state.bookings.booking">     
+                                    <tr>
+                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                            <div class="flex items-center">                                                        
+                                                    <div class="font-medium text-gray-900">
+                                                        <span
+                                                            x-text="booking.passengerPickupDate">
+                                                        </span>
+                                                    </div>
+                                                </button>
+                                            </div>
+                                        </td>
+                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                            <div class="flex items-center">                                                             
+                                                    <div class="font-medium text-gray-900">                                                       
+                                                        <span
+                                                            x-text="booking.driver.first_name">
+                                                        </span>   
+                                                        <span
+                                                            x-text="booking.driver.last_name">
+                                                        </span>                                                    
+                                                    </div>
+                                                </button>
+                                            </div>
+                                        </td>
+                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                            <div class="flex items-center">                                                             
+                                                    <div class="font-medium text-gray-900">                                                       
+                                                        <span
+                                                        x-text="booking.passenger.first_name">
+                                                        </span>
+                                                        <span
+                                                            x-text="booking.passenger.last_name">
+                                                        </span>                                                                                                       
+                                                    </div>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>    
+                            </tbody>
+                        </table>
+                        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                            <div class="flex-1 flex justify-between sm:hidden">
+                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                            @click="paginate(current)"> Previous </a>
+                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                            @click="paginate(current+2)"> Next </a>
+                            </div>
+                            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                <div>
+                                    <p class="text-sm text-gray-700">
+                                    Résultats
+                                    <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                    à
+                                    <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                    sur
+                                    <span class="font-medium" x-text="state.count"></span>
+                                    </p>
+                                </div>
+                                <div>
+                                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                        @click="paginate(current)">
+                                        <span class="sr-only">Previous</span>
+                                        <!-- Heroicon name: solid/chevron-left -->
+                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </a>
+                                    <template x-for="i in nb_pages">
+                                        <a href="#" @click="paginate(i)"
+                                        class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                        :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                        x-text="i"></a>
+                                    </template>
+                                    <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                        @click="paginate(current+2)">
+                                        <span class="sr-only">Next</span>
+                                        <!-- Heroicon name: solid/chevron-right -->
+                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </a>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p id="booking_name"></p>
+        </div>
+    </div>
+</main>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/_partials/driver-list.html b/web/layouts/solidarity_service/_partials/driver-list.html
index 0f7882f..11b1e48 100644
--- a/web/layouts/solidarity_service/_partials/driver-list.html
+++ b/web/layouts/solidarity_service/_partials/driver-list.html
@@ -1,7 +1,6 @@
 
 {{define "driver_solidarity_list" }}
 <main>
-    <form class="space-y-6" method="POST" name="create_booking">
                         
         <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
             state: {{.ViewState.JSONWithLimits 0 10}},
@@ -20,6 +19,7 @@
                 this.state.drivers = data
                 this.current=page-1
             }
+
         }">
         <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
             Conducteurs
@@ -32,11 +32,9 @@
                         <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                             <table class="min-w-full divide-y divide-gray-300">
                                 <tbody class="divide-y divide-gray-200 bg-white">
-                                    <span x-text="drivers"></span>
                                     <template x-for="driver in state.drivers.driver_journeys">
                                         <tr>
                                             <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                               
                                                 <div class="flex items-center">
                                                     <button type="button" @click="
                                                     document.getElementById('driver_id').value = driver.id
@@ -121,6 +119,5 @@
             <a href="driver/create">Ajouter un conducteur solidaire</a>
             </div>
         </div>
-    </form>
 </main>
 {{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/beneficiary-solidarity.html b/web/layouts/solidarity_service/beneficiary-solidarity.html
index 2a79893..56cf874 100644
--- a/web/layouts/solidarity_service/beneficiary-solidarity.html
+++ b/web/layouts/solidarity_service/beneficiary-solidarity.html
@@ -14,23 +14,23 @@
             </form>
         </div>
         {{else}}
-            <ul class="divide-y divide-gray-200 flex-1">
-                <li class="py-5 px-4 flex">Conducteur</li>
-                <li>______</li>
-                <li class="py-5 px-4 flex">Passager</li>
-                <li>______</li>
-                <li class="py-5 px-4 flex">Date</li>
-            </ul>
+        <table class="min-w-full divide-y divide-gray-300">
+            <tbody class="divide-y divide-gray-200 bg-white">
+                <tr>
+                    <th>Date</th>
+                    <th>Conducteur</th>
+                    <th>Passager</th>
+                </tr>
+           
             {{range .ViewState.bookingSolidarity}}
-            <ul class="divide-y divide-gray-200 flex-1">     
-                <li class="py-5 px-4 flex">{{.Driver.FirstName}} {{.Driver.LastName}}</li>
-                <li>______</li>
-                <li class="py-5 px-4 flex">{{.Passenger.Id}} </li>
-                <li>______</li>
-                <li class="py-5 px-4 flex">{{( .PassengerPickupDate)}}</li>
-                <li>____________</li>   
-            </ul>
-            {{end}}
+                <tr>     
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{( .PassengerPickupDate)}}</td>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{.Driver.FirstName}} {{.Driver.LastName}}</td>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{.Passenger.FirstName}} {{.Passenger.LastName}} </td>
+                </tr>
+                {{end}}
+            </tbody>
+        </table>
         {{end}}
     </div>
 {{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/main.html b/web/layouts/solidarity_service/main.html
index c751773..e558c8e 100644
--- a/web/layouts/solidarity_service/main.html
+++ b/web/layouts/solidarity_service/main.html
@@ -38,7 +38,7 @@
 
             <div x-show="tab == 'beneficiaries'">{{template "beneficiary_solidarity_list" .}}</div>
             <div x-show="tab == 'drivers'">{{template "driver_solidarity_list" .}}</div>
-            <div x-show="tab == 'solidarityService'">{{template "beneficiary_solidarity_list" .}}</div>
+            <div x-show="tab == 'solidarityService'">{{template "booking_solidarity_list" .}}</div>
 
         </div>
     </div>