Fix chat layout -- add openChat to user component

Raccoon254 · May 19, 2024 · dcebe19 · dcebe19
1 parent e58789d
commit dcebe19
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/app/Livewire/Messages.php b/app/Livewire/Messages.php
@@ -21,7 +21,6 @@ public function mount(): void
         $this->currentUserRole = $this->loggedInUser->role;
     }
 
-    //openChat
     public function openChat($id): void
     {
         $this->selectedUser = User::find($id);

diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
@@ -3,9 +3,9 @@
     <div class="drawer-content flex flex-col items-center justify-center">
         <!-- Page content here -->
     </div>
-    <div class="drawer-side">
+    <div class="drawer-side flex flex-col justify-between h-full">
         <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-        <ul class="menu bg-white px-4 md:pt-0 w-60 h-screen text-black/90">
+        <ul class="menu bg-white px-4 md:pt-0 w-60 h-[82vh] text-black/90">
             <li class="md:hidden mb-2">
                 <div class="flex center items-center justify-center gap-2 p-4">
                     <x-application-logo class="h-5"/>
@@ -47,7 +47,7 @@
             </li>
         </ul>
 
-        <div class="flex bottom-8 md:bottom-1 absolute w-60 items-center justify-center p-2 md:w-full">
+        <div class="flex bottom-0 w-60 items-center justify-center p-2 md:w-full">
             <form class="w-full" method="POST" action="{{ route('logout') }}">
                 @csrf
                 <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md w-full">

diff --git a/resources/views/messages.blade.php b/resources/views/messages.blade.php
@@ -8,7 +8,49 @@
 
     <div class="max-w-7xl relative h-full mx-auto">
         <div class="flex sm:mx-3 gap-4 lg:mx-4 h-full flex-row">
-            <div class="h-screen flex gap-2 bg-white w-full rounded-lg">
+            <div class="flex gap-2 bg-white w-full rounded-lg">
+                <div class="w-2/3 rounded-lg">
+                    @if($selectedUser)
+                        <div class="flex flex-col gap-3 p-3 h-full">
+                            <div class="flex gap-3">
+                                <div class="">
+                                    <img src="{{ $selectedUser->profile_photo }}" alt="{{ $selectedUser->name }}"
+                                         class="w-12 h-12 rounded-full">
+                                </div>
+                                <div class="w-2/3">
+                                    <h1 class="text-gray-800 font-semibold">{{ $selectedUser->name }}</h1>
+                                </div>
+                            </div>
+                            <div class="h-full overflow-y-auto">
+                                @foreach($messages as $message)
+                                    <div class="flex gap-3">
+                                        <div class="w-2/3">
+                                            <p class="text-gray-800 font-semibold">{{ $message->user->name }}</p>
+                                            <p class="text-gray-500 text-xs">{{ $message->message }}</p>
+                                        </div>
+                                        <div class="">
+                                            <img src="{{ $message->user->profile_photo }}"
+                                                 alt="{{ $message->user->name }}"
+                                                 class="w-12 h-12 rounded-full">
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                            <div class="flex gap-3">
+                                <input type="text" wire:model="message" placeholder="Type a message ..."
+                                       class="w-full p-2 rounded-lg border border-gray-200 focus:outline-none">
+                                <button wire:click="sendMessage"
+                                        class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md">
+                                    Send
+                                </button>
+                            </div>
+                        </div>
+                    @else
+                        <div class="flex items-center justify-center h-full">
+                            <h1 class="text-gray-800 font-semibold">Select a user to chat with</h1>
+                        </div>
+                    @endif
+                </div>
                 @if($currentUserRole == 'writer')
                     <div class="w-1/3 p-3 flex overflow-y-auto flex-col gap-3 rounded-lg">
                         <!-- Search -->
@@ -22,16 +64,16 @@ class="absolute text-black/80 right-5 top-[50%] transform translate-x-1/2 -trans
                                 </div>
                             </div>
                         </div>
-                        <div class="h-screen flex overflow-y-auto flex-col gap-3 rounded-lg">
+                        <div class="h-[76vh] flex overflow-y-auto flex-col gap-3 rounded-lg">
 
                             <!-- All users -->
                             @foreach($clients as $user)
-                                <div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg">
+                                <div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg" wire:click="openChat({{ $user->id }})">
                                     <div class="">
                                         <img src="{{ $user->profile_photo }}" alt="{{ $user->name }}"
                                              class="w-12 h-12 rounded-full">
                                     </div>
-                                    <div class="w-2/3" wire:click="openChat({{ $user->id }})">
+                                    <div class="w-2/3">
                                         <h1 class="text-gray-800 font-semibold">{{ $user->name }}</h1>
 
                                         <!-- Last message from user -->
@@ -45,9 +87,6 @@ class="w-12 h-12 rounded-full">
                     </div>
 
                 @endif
-                <div class="h-screen bg-gray-500 w-2/3 rounded-lg">
-
-                </div>
             </div>
         </div>
     </div>