Message card create

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

Hide file tree

Showing 6 changed files with 145 additions and 20 deletions.
diff --git a/app/Livewire/DisplayChatMessage.php b/app/Livewire/DisplayChatMessage.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class DisplayChatMessage extends Component
+{
+    public function render()
+    {
+        return view('livewire.display-chat-message');
+    }
+}
diff --git a/app/Livewire/Messages.php b/app/Livewire/Messages.php
@@ -19,12 +19,32 @@ public function mount(): void
     {
         $this->loggedInUser = auth()->user();
         $this->currentUserRole = $this->loggedInUser->role;
+
+        if ($this->currentUserRole === 'client') {
+            $this->openChat(User::where('role', 'writer')->first()->id);
+        }
     }
 
     public function openChat($id): void
+{
+    $this->selectedUser = User::find($id);
+    $this->messages = $this->loggedInUser->messages()->where('receiver_id', $id)->orWhere('sender_id', $id)->orderBy('created_at', 'asc')->get();
+}
+
+    //sendMessage
+    public function sendMessage(): void
     {
-        $this->selectedUser = User::find($id);
-        $this->messages = $this->loggedInUser->messages()->where('receiver_id', $id)->orWhere('sender_id', $id)->get();
+        if (empty($this->message)) {
+            return;
+        }
+
+        $this->loggedInUser->messages()->create([
+            'receiver_id' => $this->selectedUser->id,
+            'content' => $this->message
+        ]);
+
+        $this->message = '';
+        $this->messages = $this->loggedInUser->messages()->where('receiver_id', $this->selectedUser->id)->orWhere('sender_id', $this->selectedUser->id)->sortBy('created_at', 'asc')->get();
     }
 
     public function render(): View

diff --git a/app/Models/Message.php b/app/Models/Message.php
@@ -18,6 +18,8 @@ class Message extends Model
         'read_at'
     ];
 
+    protected array $dates = ['read_at', 'created_at', 'updated_at'];
+
     public function sender(): BelongsTo
     {
         return $this->belongsTo(User::class, 'sender_id');

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -39,3 +39,20 @@ input:-webkit-autofill {
 .custom-badge{
     @apply absolute top-1 right-1 h-[6px] w-[6px] bg-blue-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center ring ring-white;
 }
+
+.sent-message{
+    @apply rounded-t-2xl rounded-bl-2xl bg-blue-500 text-white p-1 px-4;
+}
+
+.received-message{
+    @apply rounded-t-2xl rounded-br-2xl bg-gray-200 text-gray-700 p-1 px-4;
+}
+
+.received-message-attachment{
+    @apply rounded-b-2xl rounded-tr-2xl bg-gray-200 text-gray-700 p-1 mt-1 px-4;
+}
+
+.sent-message-attachment{
+    @apply rounded-b-2xl rounded-tl-2xl bg-blue-500 text-white p-1 mt-1 px-4;
+}
+
diff --git a/resources/views/livewire/display-chat-message.blade.php b/resources/views/livewire/display-chat-message.blade.php
@@ -0,0 +1,73 @@
+<div
+    id="message_{{ $message->id }}"
+    class="{{ $message->sender_id == Auth::id() ? 'text-right' : 'text-left' }} max-w-2/3 text-sm mx-auto message">
+    @if($message->content)
+        <div
+            class="inline-block max-w-[400px] {{ $message->sender_id == Auth::id() ? 'bg-blue-500 text-white sent-message ' : 'bg-gray-200 text-gray-800 received-message ' }} px-1 py-1/4">
+            {{ $message->content }}
+        </div>
+    @endif
+    <br>
+
+    @if ($message->attachments->count() > 0)
+        <div
+            class="inline-block {{ $message->sender_id == Auth::id() ? 'bg-blue-500 text-white sent-message-attachment ' : 'bg-gray-200 text-gray-800 received-message-attachment' }}">
+            <div class="flex max-w-[392px] flex-wrap gap-1">
+                @foreach($message->attachments as $attachment)
+                    <div class="min-w-[128px]">
+                        <div
+                            onclick="viewAttachment('{{ $attachment->type }}', '{{ Storage::url($attachment->path) }}')"
+                            class="bg-gray-200 rounded-xl overflow-hidden relative">
+                            @if (in_array($attachment->type, ['image/jpeg', 'image/png', 'image/gif']))
+                                <img
+                                    src="{{ Storage::url($attachment->path) }}"
+                                    alt="Attachment"
+                                    class="w-[128px] h-32 object-cover">
+                            @elseif ($attachment->type == 'application/pdf')
+                                <div
+                                    class="flex items-center justify-center h-32 bg-red-200">
+                                    <i class="fas fa-file-pdf text-4xl text-red-500"></i>
+                                </div>
+                            @elseif ($attachment->type == 'application/zip' || $attachment->type == 'application/x-rar-compressed')
+                                <div
+                                    class="flex items-center justify-center h-32 bg-green-200">
+                                    <i class="fas fa-file-archive text-4xl text-green-500"></i>
+                                </div>
+                            @elseif (str_starts_with($attachment->type, 'video/'))
+                                <div
+                                    class="flex items-center justify-center h-32 bg-blue-200">
+                                    <i class="fas fa-file-video text-4xl text-blue-500"></i>
+                                </div>
+                            @elseif (str_starts_with($attachment->type, 'audio/'))
+                                <div
+                                    class="flex items-center justify-center h-32 bg-yellow-200">
+                                    <i class="fas fa-file-audio text-4xl text-yellow-500"></i>
+                                </div>
+                            @else
+                                <div
+                                    class="flex items-center justify-center h-32 bg-gray-300">
+                                    <i class="fas fa-file text-4xl text-gray-500"></i>
+                                </div>
+                            @endif
+                            <a href="{{ Storage::url($attachment->path) }}"
+                               class="absolute top-0 btn btn-xs btn-circle btn-ghost right-0 mt-1 mr-1 bg-gray-500 text-white text-xs px-2 py-1">
+                                <i class="fas fa-download"></i>
+                            </a>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endif
+    <!-- if no message or attachment -->
+    @if (!$message->content && $message->attachments->count() == 0)
+        <div
+            class="inline-block max-w-[400px] {{ $message->sender_id == Auth::id() ? 'bg-blue-500 text-white sent-message ' : 'bg-gray-200 text-gray-800 received-message ' }} px-1 py-1/4">
+            <i class="fas fa-exclamation-circle"></i> This message has been
+            deleted.
+        </div>
+    @endif
+    <div class="text-[10px] mt-1 text-blue-500">
+        {{ $message->time }}
+    </div>
+</div>
diff --git a/resources/views/messages.blade.php b/resources/views/messages.blade.php
@@ -9,32 +9,31 @@
     <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="flex gap-2 bg-white w-full rounded-lg">
-                <div class="w-2/3 rounded-lg">
+                <div class="w-2/3 h-[87vh] bg-gray-300 m-2 rounded-md">
                     @if($selectedUser)
                         <div class="flex flex-col gap-3 p-3 h-full">
-                            <div class="flex gap-3">
-                                <div class="">
+                            <div class="flex gap-3 items-center">
+                                <div class="flex-shrink-0">
                                     <img src="{{ $selectedUser->profile_photo }}" alt="{{ $selectedUser->name }}"
                                          class="w-12 h-12 rounded-full">
                                 </div>
-                                <div class="w-2/3">
+                                <div class="flex-grow">
                                     <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 class="h-full flex flex-col overflow-y-auto">
+                                @if ($messages->count() == 0)
+                                    <div class="flex items-center flex-col justify-center h-full">
+                                        <i class="fa-regular fa-bell-slash text-4xl text-gray-500"></i>
+                                        <p class="text-gray-500">No messages yet.</p>
+                                    </div>
+                                @else
+                                    <div class="p-6 space-y-4">
+                                        @foreach($messages as $message)
+                                            <livewire:DisplayChatMessage :message="$message" :key="$message->id"/>
+                                        @endforeach
                                     </div>
-                                @endforeach
+                                @endif
                             </div>
                             <div class="flex gap-3">
                                 <input type="text" wire:model="message" placeholder="Type a message ..."
@@ -68,7 +67,8 @@ class="absolute text-black/80 right-5 top-[50%] transform translate-x-1/2 -trans
 
                             <!-- All users -->
                             @foreach($clients as $user)
-                                <div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg" wire:click="openChat({{ $user->id }})">
+                                <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">