From 6ddfff6a60a2eb80aedce33d4cd2d90f85b1f49c Mon Sep 17 00:00:00 2001
From: Jaton David <david.jaton@he-arc.ch>
Date: Mon, 16 Dec 2024 14:43:35 +0100
Subject: [PATCH] Loader on button that interract with db

---
 .../components/messaging/chatbar.blade.php    | 86 ++++++++++---------
 .../messaging/discussion-sidebar.blade.php    | 66 +++++++-------
 resources/views/dashboard.blade.php           |  7 +-
 resources/views/friendships/create.blade.php  | 31 ++++---
 4 files changed, 108 insertions(+), 82 deletions(-)

diff --git a/resources/views/components/messaging/chatbar.blade.php b/resources/views/components/messaging/chatbar.blade.php
index 3b64ccb..3c93bdc 100644
--- a/resources/views/components/messaging/chatbar.blade.php
+++ b/resources/views/components/messaging/chatbar.blade.php
@@ -5,9 +5,13 @@ class="rounded-full secondary-background-app p-2 flex items-center justify-cente
             <img src="{{asset('source/assets/images/add.png')}}" alt="Icone" class="h-6 w-6">
         </button>
         <input type="text" id="message-content" class="flex-1 secondary-background-app text-white border-none rounded-3xl p-2 ml-2 mr-2" onkeypress="if(event.key === 'Enter') { sendMessage() }">
-        <button onclick="sendMessage()" class="rounded-full secondary-background-app p-2 flex items-center justify-center">
+        <button id="send-message-btn" onclick="sendMessage()" class="rounded-full secondary-background-app p-2 flex items-center justify-center">
             <img src="{{asset('source/assets/images/send.png')}}" alt="Icone" class="h-6 w-6">
         </button>
+        <span id="send-message-loader" style="display:none;">
+            <div class="spinner"></div>
+        </span>
+
         <x-modal name="create-file-modal" focusable>
             <form method="post" class="p-6" x-data="capsuleForm()" id="create-file-modal-form" @submit.prevent="submitForm">
                 @csrf
@@ -77,46 +81,46 @@ function handleDrop(event) {
 </div>
 
 <script>
-function capsuleForm() {
-    return {
-        chatMessage: '',
-        file: null,
-        submitForm() {
-            event.preventDefault();
-            // Récupérer dynamiquement l'ID de la discussion depuis le champ caché
-            const discussionId = document.getElementById('discussion-id').value;
+    function capsuleForm() {
+        return {
+            chatMessage: '',
+            file: null,
+            submitForm() {
+                event.preventDefault();
+                // Récupérer dynamiquement l'ID de la discussion depuis le champ caché
+                const discussionId = document.getElementById('discussion-id').value;
 
-            // Créer l'objet FormData avec les données du formulaire
-            const formData = new FormData(document.getElementById('create-file-modal-form'));
+                // Créer l'objet FormData avec les données du formulaire
+                const formData = new FormData(document.getElementById('create-file-modal-form'));
 
-            // Effectuer la requête AJAX avec `fetch`
-            fetch(`/chat/${discussionId}/capsule`, {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.message.id) {
-                    // Fermer le modal et réinitialiser le formulaire
-                    this.chatMessage = '';
-                    this.file = null;
-                    document.getElementById('file-info').innerHTML = `<p class='text-gray-300 font-medium'>Glissez et déposez votre fichier ici ou</p><p class='text-blue-400 underline'>cliquez pour sélectionner un fichier</p>`;
-                    document.getElementById('date-time').value = '';
-                    this.$dispatch('close');
-                } else {
-                    console.log(data)
-                    alert('Erreur lors de l\'envoi de la capsule');
-                }
-            })
-            .catch(error => {
-                alert('Erreur lors de l\'envoi');
-                console.error(error);
-            });
-        }
-    };
-}
+                // Effectuer la requête AJAX avec `fetch`
+                fetch(`/chat/${discussionId}/capsule`, {
+                        method: 'POST',
+                        body: formData,
+                        headers: {
+                            'X-Requested-With': 'XMLHttpRequest',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        },
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.message.id) {
+                            // Fermer le modal et réinitialiser le formulaire
+                            this.chatMessage = '';
+                            this.file = null;
+                            document.getElementById('file-info').innerHTML = `<p class='text-gray-300 font-medium'>Glissez et déposez votre fichier ici ou</p><p class='text-blue-400 underline'>cliquez pour sélectionner un fichier</p>`;
+                            document.getElementById('date-time').value = '';
+                            this.$dispatch('close');
+                        } else {
+                            console.log(data)
+                            alert('Erreur lors de l\'envoi de la capsule');
+                        }
+                    })
+                    .catch(error => {
+                        alert('Erreur lors de l\'envoi');
+                        console.error(error);
+                    });
+            }
+        };
+    }
 </script>
\ No newline at end of file
diff --git a/resources/views/components/messaging/discussion-sidebar.blade.php b/resources/views/components/messaging/discussion-sidebar.blade.php
index 4405298..e25b602 100644
--- a/resources/views/components/messaging/discussion-sidebar.blade.php
+++ b/resources/views/components/messaging/discussion-sidebar.blade.php
@@ -28,21 +28,21 @@ class="flex items-center justify-center">
                                 <p class="font-medium text-white">Sélectionnez le/les amis à ajouter à la discussion</p>
                                 <div class="mt-2 overflow-y-auto max-h-48 scrollbar-hide rounded p-2">
                                     @foreach ($friends as $friend)
-                                        <div
-                                            class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
-                                            <div class="flex items-center">
-                                                @if ($friend->image)
-                                                    <img src="{{ asset('storage/' . $friend->image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
-                                                @else
-                                                    <img src="{{ asset('source/assets/avatar/avatar.png') }}"
-                                                        alt="Avatar" class="w-8 h-8 rounded-full mr-3">
-                                                @endif
-                                                <span class="text-white font-medium">{{ $friend->name }}</span>
-                                            </div>
-                                            <input type="checkbox" name="friends[]" value="{{ $friend->id }}"
-                                                class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500"
-                                                x-model="selectedFriends">
+                                    <div
+                                        class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
+                                        <div class="flex items-center">
+                                            @if ($friend->image)
+                                            <img src="{{ asset('storage/' . $friend->image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
+                                            @else
+                                            <img src="{{ asset('source/assets/avatar/avatar.png') }}"
+                                                alt="Avatar" class="w-8 h-8 rounded-full mr-3">
+                                            @endif
+                                            <span class="text-white font-medium">{{ $friend->name }}</span>
                                         </div>
+                                        <input type="checkbox" name="friends[]" value="{{ $friend->id }}"
+                                            class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500"
+                                            x-model="selectedFriends">
+                                    </div>
                                     @endforeach
                                     <p x-show="errors.friends" class="text-red-500 text-sm mt-1">Sélectionnez au moins
                                         un ami.</p>
@@ -53,9 +53,12 @@ class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray
                                 <x-secondary-button x-on:click="$dispatch('close')">
                                     Annuler
                                 </x-secondary-button>
-                                <x-primary-button class="ml-3">
+                                <x-primary-button id="create-chat" class="ml-3">
                                     Créer la discussion
                                 </x-primary-button>
+                                <span id="create-chat-loader" style="display:none;">
+                                    <div class="spinner"></div>
+                                </span>
                             </div>
                         </form>
                     </x-modal>
@@ -63,19 +66,19 @@ class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray
             </div>
         </li>
         @foreach ($discussions as $discussion)
-            <li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
-                onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
-                <img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
-                <!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
-                <div class="flex-1">
-                    <div class="font-bold">{{ $discussion->name }}</div>
-                    <div class="text-sm text-gray-400 whitespace-nowrap">
-                        @if ($discussion->messages->first())
-                            {{ $discussion->messages->first()->message }}
-                        @endif
-                    </div>
+        <li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
+            onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
+            <img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
+            <!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
+            <div class="flex-1">
+                <div class="font-bold">{{ $discussion->name }}</div>
+                <div class="text-sm text-gray-400 whitespace-nowrap">
+                    @if ($discussion->messages->first())
+                    {{ $discussion->messages->first()->message }}
+                    @endif
                 </div>
-            </li>
+            </div>
+        </li>
         @endforeach
     </ul>
 </div>
@@ -92,12 +95,17 @@ function chatForm() {
             validateForm() {
                 // Réinitialise l'erreur des amis
                 this.errors.friends = this.selectedFriends.length === 0;
-
+                let createChatBtn = document.getElementById('create-chat');
+                let createChatLoader = document.getElementById('create-chat-loader');
+                createChatBtn.style.display = 'none';
+                createChatLoader.style.display = 'block';
                 if (!this.errors.friends) {
                     // Soumet le formulaire si la validation passe
                     this.$el.submit();
                 }
+                createChatBtn.style.display = 'block';
+                createChatLoader.style.display = 'none';
             }
         }
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 093c678..291777f 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -206,6 +206,8 @@ function startAutoRefresh(intervalTime = 5000) {
 
     function sendMessage() {
         const messageContent = document.getElementById('message-content').value;
+        document.getElementById('send-message-btn').style.display = 'none';
+        document.getElementById('send-message-loader').style.display = 'block';
         if (!messageContent) return;
 
         fetch(`/chat/${currentChatId}/messages`, {
@@ -223,6 +225,8 @@ function sendMessage() {
                 document.getElementById('message-content').value = '';
             })
             .catch(error => console.error('Erreur:', error));
+        document.getElementById('send-message-btn').style.display = 'block';
+        document.getElementById('send-message-loader').style.display = 'none';
     }
 
     function scrollToBottom() {
@@ -253,7 +257,6 @@ function leaveChat() {
             }
         })
         .then(data => {
-            alert(data.message || "Vous avez quitté la conversation.");
             currentChatId = null;
 
             document.getElementById('chat-area').style.display = 'none';
@@ -266,7 +269,7 @@ function leaveChat() {
             alert("Une erreur s'est produite en essayant de quitter la conversation.");
         });
 }
-leaveChatWithLoad()
+function leaveChatWithLoad()
 {
     const loader = document.getElementById('leave-chat-loader');
     const button = event.target;
diff --git a/resources/views/friendships/create.blade.php b/resources/views/friendships/create.blade.php
index 0cf3d95..4b3019d 100644
--- a/resources/views/friendships/create.blade.php
+++ b/resources/views/friendships/create.blade.php
@@ -6,35 +6,46 @@
 
             <div class="space-y-2">
                 <input type="text" name="name" id="name" value="{{ old('name') }}" required
-                       class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
-                       placeholder="Enter friend's username">
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
+                    placeholder="Enter friend's username">
 
                 @error('name')
-                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
+                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                 @enderror
             </div>
 
             <div>
-                <button type="submit" class="w-full text-white py-2 secondary-background-app transition-colors duration-200">
+                <button id="add-friend-btn" type="submit" class="w-full text-white py-2 secondary-background-app transition-colors duration-200" onclick="addFriendWithLoad()">
                     Add Friend
                 </button>
+                <span id="add-friend-loader" style="display:none;">
+                    <div class="spinner"></div>
+                </span>
+
             </div>
 
             <!-- Affichage du message de succès ou d'erreur sous le champ de saisie -->
             <div>
                 @if(session('success'))
-                    <p class="text-green-500 mt-1">
-                        {{ session('success') }}
-                    </p>
+                <p class="text-green-500 mt-1">
+                    {{ session('success') }}
+                </p>
                 @endif
 
                 @if(session('error'))
-                    <p class="text-red-500 mt-1">
-                        {{ session('error') }}
-                    </p>
+                <p class="text-red-500 mt-1">
+                    {{ session('error') }}
+                </p>
                 @endif
             </div>
 
         </form>
     </div>
 </x-app-layout>
+
+<script>
+    function addFriendWithLoad() {
+        document.getElementById('add-friend-btn').style.display = 'none';
+        document.getElementById('add-friend-loader').style.display = 'block';
+    }
+</script>
\ No newline at end of file