fix: disply chats in sidebar, minor ui issues
This commit is contained in:
kusowl
parent
964d7a8936
commit
44b13a5ebf
@ -15,13 +15,17 @@ public function __construct(private CreateOrGetInboxAction $inboxAction) {}
|
||||
public function execute(User $sender, User $recipient, array $data): void
|
||||
{
|
||||
// find the inbox between the two users
|
||||
\DB::beginTransaction();
|
||||
$inbox = $this->inboxAction->execute($recipient, $sender);
|
||||
$inbox->last_message = $data['message'];
|
||||
$inbox->last_user_id = $sender->id;
|
||||
$inbox->save();
|
||||
$message = $inbox->messages()->create([
|
||||
'message' => $data['message'],
|
||||
'user_id' => $sender->id,
|
||||
]);
|
||||
|
||||
broadcast(new MessageSent($message))->toOthers();
|
||||
|
||||
\DB::commit();
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,8 @@ class ChatController extends Controller
|
||||
//
|
||||
public function index(#[CurrentUser] User $user)
|
||||
{
|
||||
return view('dashboards.user.chat');
|
||||
return view('dashboards.user.chat')
|
||||
->with('inboxes', $user->inboxes);
|
||||
}
|
||||
|
||||
public function show(#[CurrentUser] User $sender, User $recipient, CreateOrGetInboxAction $action)
|
||||
@ -27,7 +28,8 @@ public function show(#[CurrentUser] User $sender, User $recipient, CreateOrGetIn
|
||||
|
||||
return view('dashboards.user.chat')
|
||||
->with('recipient', $recipient)
|
||||
->with('chats', $inbox->messages()->latest()->get());
|
||||
->with('inboxes', $sender->inboxes)
|
||||
->with('messages', $inbox->messages()->latest()->get());
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
|
||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||
use Illuminate\Database\Eloquent\Relations\HasOne;
|
||||
|
||||
/**
|
||||
* @property int $id
|
||||
@ -37,13 +37,19 @@ public function users(): BelongsToMany
|
||||
return $this->belongsToMany(User::class);
|
||||
}
|
||||
|
||||
public function lastUser(): HasOne
|
||||
public function lastUser(): BelongsTo
|
||||
{
|
||||
return $this->hasOne(User::class, 'id', 'last_user_id');
|
||||
return $this->belongsTo(User::class, 'id', 'last_user_id');
|
||||
}
|
||||
|
||||
public function messages(): HasMany
|
||||
{
|
||||
return $this->hasMany(Message::class, 'inbox_id');
|
||||
}
|
||||
|
||||
public function getRecipientAttribute(): User
|
||||
{
|
||||
// first user in the relationship that is NOT the authenticated user
|
||||
return $this->users->where('id', '!=', auth()->id())->first();
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ export const addMessageToChat = (message, right = false) => {
|
||||
|
||||
const messagePlaceholder = `
|
||||
<div class="grid px-4 my-1 w-full ${right ? 'place-items-end' : 'place-items-start'}">
|
||||
<div class="w-fit px-6 py-2 rounded-2xl bg-gray-200">
|
||||
<div class="max-w-[40vw] py-2 px-4 rounded-2xl bg-gray-200">
|
||||
${message.message}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
@props(['recipient', 'chats' => []])
|
||||
<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description=""/>
|
||||
<div class="bg-gray-100 h-full overflow-hidden">
|
||||
@props(['recipient', 'messages' => []])
|
||||
<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description="offline"/>
|
||||
<div class="bg-gray-50 h-full overflow-hidden flex-shrink-0">
|
||||
<div id="chat-container" data-auth-id="{{ auth()->id() }}" data-partner-id="{{ $recipient->id }}"
|
||||
class="text-sm flex flex-col-reverse overflow-y-scroll h-full max-h-screen pb-50 scroll-snap-y-container">
|
||||
@forelse($chats as $chat)
|
||||
@ds($chat)
|
||||
<x-chat.message :right="$chat->user_id === auth()->user()->id">{{$chat->message}}</x-chat.message>
|
||||
@forelse($messages as $message)
|
||||
<x-chat.message :right="$message->user_id === auth()->user()->id">{{$message->message}}</x-chat.message>
|
||||
@empty
|
||||
<div id="no-messages-placeholder" class="grid px-4 my-1 w-full h-full place-items-center ">
|
||||
<p class="text-gray-600">No Messages Found!</p>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@props(['right' => false])
|
||||
<div class="grid px-4 my-1 w-full @if($right) place-items-end @else place-items-start @endif">
|
||||
<div class="w-fit px-6 py-2 rounded-full bg-gray-200">
|
||||
<div class="max-w-[40vw] py-2 px-4 @if($right) rounded-l-xl rounded-br-xl @else rounded-r-xl rounded-bl-xl @endif bg-gray-200">
|
||||
{{ $slot }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@props(['avatar', 'name', 'status' => 'inactive', 'message' => '', 'link' => ''])
|
||||
<x-dashboard.broker.sidebar.item :link="$link" class="w-full">
|
||||
<x-dashboard.broker.sidebar.item :link="$link" class="">
|
||||
<x-ui.avatar class="w-12! h-12! text-xl!">{{$avatar}}</x-ui.avatar>
|
||||
<div class="flex flex-col text-left">
|
||||
<p class="sidebar-text text-sm font-bold">{{$name}}</p>
|
||||
<p class="sidebar-text text-sm text-accent-600">{{$message}}</p>
|
||||
<div class="flex flex-col text-left max-w-24">
|
||||
<p class="sidebar-text text-sm transition-opacity duration-300 ease-in-out font-bold">{{$name}}</p>
|
||||
<p class="sidebar-text text-sm text-accent-600 transition-opacity duration-300 ease-in-out truncate">{{$message}}</p>
|
||||
</div>
|
||||
</x-dashboard.broker.sidebar.item>
|
||||
|
||||
@ -22,6 +22,14 @@
|
||||
<p>Control Panel</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
|
||||
<a href="{{route('chat')}}" class="flex space-x-4">
|
||||
<div class="p-1 bg-gray-200 rounded-xl text-gray-900">
|
||||
<x-heroicon-o-chat-bubble-left-right class="w-4"/>
|
||||
</div>
|
||||
<p>Chat</p>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
</ul>
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
<x-chat.layout>
|
||||
<x-slot:sidebarItems>
|
||||
<x-chat.sidebar-item :link="route('chat.show', 8)" name="Kushal Saha" avatar="Ku" message="Hi, how do i do that ?"/>
|
||||
<x-chat.sidebar-item name="Jhon Doe" avatar="JD" message="How much for thr tv ?"/>
|
||||
<x-chat.sidebar-item name="Jane Marry" avatar="JM" message="I will let you know"/>
|
||||
@forelse($inboxes as $inbox)
|
||||
<x-chat.sidebar-item
|
||||
:name="$inbox->recipient->name"
|
||||
:link="route('chat.show', $inbox->recipient->id)"
|
||||
:avatar="(new \App\Services\ProfileInitialsService)->create($inbox->recipient->name)"
|
||||
:message="$inbox->last_message"/>
|
||||
@empty
|
||||
No chats found !
|
||||
@endforelse
|
||||
</x-slot:sidebarItems>
|
||||
<div class="overflow-y-hidden">
|
||||
|
||||
@if(isset($recipient))
|
||||
<x-chat.message-box :recipient="$recipient" :chats="$chats" />
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<p class="font-bold text-5xl text-gray-400">Start a chat ! </p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(isset($recipient))
|
||||
<x-chat.message-box :recipient="$recipient" :messages="$messages"/>
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<p class="font-bold text-5xl text-gray-400">Start a chat ! </p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-chat.layout>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user