From 18f126e4eb09bf0d797886aa3bdc428da9bacdbb Mon Sep 17 00:00:00 2001
From: soukainna <soukaina1lafdili@gmail.com>
Date: Wed, 22 Feb 2023 11:06:21 +0100
Subject: [PATCH] create members list

---
 web/layouts/members/membersList.html | 159 +++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 web/layouts/members/membersList.html

diff --git a/web/layouts/members/membersList.html b/web/layouts/members/membersList.html
new file mode 100644
index 0000000..a339435
--- /dev/null
+++ b/web/layouts/members/membersList.html
@@ -0,0 +1,159 @@
+{{define "content"}}
+<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+    <h1 class="text-2xl font-semibold text-gray-900">Les membres de l'organisation {{.Group.Data.name}}</h1>
+
+    <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+            <p class="mt-2 text-sm text-gray-700"></p>
+        </div>
+    </div>
+</div>
+
+
+<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+            state: {{.ViewState.list.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.members = data
+                this.current=page-1
+            }
+        }">
+    <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">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                                    Nom
+                                </th>
+                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                    Téléphone
+                                </th>
+                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                    Email
+                                </th>
+                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                    Organisations
+                                </th>
+                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                                    <span class="sr-only"></span>
+                                </th>
+                            </tr>
+                        </thead>
+                       
+                        <tbody class="divide-y divide-gray-200 bg-white">
+                           
+                          
+                            <template x-for="(member, i) in state.members"  > 
+                                
+                               
+                                   
+                                <tr>
+                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                        <div class="flex items-center">
+                                            <div class="h-10 w-10 flex-shrink-0">
+                                                <img class="h-10 w-10 rounded-co"
+                                                    :src="'/app/members/' + member.id + '/picture'" alt="">
+                                            </div>
+                                            <div class="ml-4">
+                                                <div class="font-medium text-gray-900"><span
+                                                        x-text="member.data.first_name"></span> <span
+                                                        x-text="member.data.last_name"></span></div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                        <div class="text-gray-900" x-text="member.data.phone_number"></div>
+                                    </td>
+                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+                                        x-text="member.data.email">
+                                    </td>
+                                    <template x-for="(group, index) in state.groups" > 
+                                    <template  x-if="i === index">
+                                        <td  class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+                                    x-text="group"   >
+                                </td>
+                                    </template></template>
+                                    
+                                    <td
+                                        class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                        <a :href="'/app/members/' + member.id"
+                                            class="text-co-blue hover:text-co-blue">Voir<span class="sr-only">, <span
+                                                    x-text="member.data.first_name"></span> <span
+                                                    x-text="member.data.last_name"></span></a>
+                                    </td>
+                                </tr>
+                                <!-- </template> -->
+                        </template>
+                            <!-- More people... -->
+                        </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>
+</div>
+
+{{end}}
\ No newline at end of file