Created order components

app/Livewire/OrderCreate.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class OrderCreate extends Component
+{
+    public function render()
+    {
+        return view('livewire.order-create');
+    }
+}

app/Livewire/OrderManagement.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class OrderManagement extends Component
+{
+    public function render()
+    {
+        return view('livewire.order-management');
+    }
+}

app/Livewire/OrderShow.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class OrderShow extends Component
+{
+    public function render()
+    {
+        return view('livewire.order-show');
+    }
+}

app/Livewire/OrderUpdateStatus.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class OrderUpdateStatus extends Component
+{
+    public function render()
+    {
+        return view('livewire.order-update-status');
+    }
+}

app/Livewire/SendMessageInput.php

@@ -36,7 +36,7 @@ public function removeAttachment($name): void
 
     public function sendMessage(): void
     {
-        sleep(4);
+        //sleep(1);
         if (empty($this->newMessage) && empty($this->attachments)) {
             return;
         }
@@ -49,7 +49,7 @@ public function sendMessage(): void
 
         if ($this->attachments) {
             foreach ($this->attachments as $attachment) {
-                $path = $attachment->store('public/'.$this->loggedInUser->name.'/attachments');
+                $path = $attachment->store('public/' . $this->loggedInUser->name . '/attachments');
                 Attachment::create([
                     'message_id' => $message->id,
                     'name' => $attachment->getClientOriginalName(),

resources/css/app.css

@@ -49,11 +49,11 @@ input:-webkit-autofill {
 }
 
 .received-message{
-    @apply rounded-t-2xl rounded-br-2xl bg-green-400 overflow-hidden text-gray-700 p-1 px-4;
+    @apply rounded-t-2xl rounded-br-2xl bg-white overflow-hidden text-gray-800 p-1 px-4;
 }
 
 .received-message-attachment{
-    @apply rounded-b-2xl overflow-clip rounded-tr-2xl bg-green-400 text-gray-700 p-1;
+    @apply rounded-b-2xl overflow-clip rounded-tr-2xl bg-white text-gray-800 p-1;
 }
 
 .sent-message-attachment{

resources/views/livewire/display-chat-message.blade.php

@@ -17,7 +17,7 @@ class="inline-block {{ $message->sender_id == Auth::id() ? 'bg-blue-500 text-whi
                     <div class="min-w-[128px]">
                         <div
                             onclick="viewAttachment('{{ $attachment->type }}', '{{ Storage::url($attachment->path) }}')"
-                            class="bg-gray-200 rounded-xl ring-1 ring-gray-100 overflow-hidden relative">
+                            class="bg-gray-200 rounded-xl ring-1 ring-blue-100 overflow-hidden relative">
                             @if (in_array($attachment->type, ['image/jpeg', 'image/png', 'image/gif']))
                                 <img
                                     src="{{ Storage::url($attachment->path) }}"

resources/views/livewire/order-create.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}
+</div>

resources/views/livewire/order-management.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- Close your eyes. Count to one. That is how long forever feels. --}}
+</div>

resources/views/livewire/order-show.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- The Master doesn't talk, he acts. --}}
+</div>

resources/views/livewire/order-update-status.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- Care about people's approval and you will be their prisoner. --}}
+</div>

resources/views/livewire/send-message-input.blade.php

@@ -36,7 +36,7 @@ class="absolute top-0 right-1 -mt-2 -mr-3 bg-amber-500 text-white center rounded
     </div>
     <div class="relative flex gap-2 items-center">
         <label class="w-full">
-            <input id="messageInput" wire:model="newMessage" wire:keydown.enter="sendMessage"
+            <input id="messageInput" wire:model.live="newMessage" wire:keydown.enter="sendMessage"
                    class="message-input"
                    type="text" placeholder="Type your message...">
         </label>

resources/views/messages.blade.php

@@ -112,19 +112,38 @@ class="w-12 h-12 bg-white rounded-full">
 <script>
     Livewire.on('chatOpened', (event) => {
         setTimeout(() => {
-            let messageContainer = document.getElementById('messageContainer');
+            const messageContainer = document.getElementById('messageContainer');
             messageContainer.scrollTo({
                 top: messageContainer.scrollHeight,
                 behavior: 'smooth',
             });
         }, 10);
     });
 
+    function ensureScrolledToBottom() {
+        const messageContainer = document.getElementById('messageContainer');
+        messageContainer.scrollTo({
+            top: messageContainer.scrollHeight,
+            behavior: 'smooth',
+        });
+        if (messageContainer.scrollTop !== messageContainer.scrollHeight) {
+            setTimeout(() => {
+                messageContainer.scrollTo({
+                    top: messageContainer.scrollHeight,
+                    behavior: 'smooth',
+                });
+            }, 300);
+        }
+    }
+
     Livewire.on('messagesSent', (event) => {
+        console.log('Messages sent');
         setTimeout(() => {
-            let messageContainer = document.getElementById('messageContainer');
+            const messageContainer = document.getElementById('messageContainer');
             messageContainer.scrollTop = messageContainer.scrollHeight;
         }, 10);
+        //Ensure the message container is scrolled to the bottom
+        ensureScrolledToBottom();
     });
 </script>
 @endscript

resources/views/orders.blade.php

@@ -1,18 +1,20 @@
-<div>
+<div class="p-2 md:p-0 md:py-4">
     <x-slot name="header">
         <h2 class="text-gray-800 leading-tight">
             <i class="fas text-blue-500 fa-shopping-cart"></i>
             {{ __('Orders') }}
         </h2>
     </x-slot>
 
-    <div class="py-8">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900">
-                    {{ __("You're viewing your orders!") }}
-                </div>
-            </div>
+    <div class="max-w-7xl relative h-full mx-auto">
+        <div class="flex sm:mx-3 lg:mx-4 flex-col h-full md:flex-row">
+            <!--
+            TODO: Add the Orders component here
+            - Show orders
+            - Create a new order
+            - View order details
+            - Update order status
+            -->
         </div>
     </div>
 </div>