Skip to content

Commit

Permalink
update chatUI
Browse files Browse the repository at this point in the history
  • Loading branch information
@3x1io
3x1io committed Mar 31, 2024
1 parent 15efa17 commit 4e75c3b
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 65 deletions.
22 changes: 20 additions & 2 deletions Modules/CircleXO/App/Http/Controllers/ProfileController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,26 @@ public function followers(Request $request)

public function messages(Request $request)
{
return view('circle-xo::profile.messages', [
'table' => (new AccountContactTable(auth('accounts')->id()))

$messages = AccountContact::query();
$messages->where('account_id', auth('accounts')->id());
$messages->orderBy('id', 'desc');
$messages->groupBy('sender_id');
if($request->has('search') && $request->get('search')){
$messages->whereHas('sender', function($query) use ($request){
$query->where('name', 'LIKE', '%'.$request->get('search').'%');
});
}
$chats = $messages->paginate(20);

$getSelectedChat = null;
if($request->has('chat') && $request->get('chat')){
$getSelectedChat = AccountContact::find($request->get('chat'));
}

return view('circle-xo::profile.messages',[
'chats' => $chats,
'getSelectedChat' => $getSelectedChat
]);
}

Expand Down
152 changes: 90 additions & 62 deletions Modules/CircleXO/resources/views/profile/messages.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
makeMenuHide: false,
}"

remember="admin"
remember="profile_messages"
local-storage
>

Expand All @@ -20,42 +20,55 @@ class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay lg:hidden
<div class="my-12 mx-8 lg:mx-16">
<div class="relative overflow-hidden border border-zinc-700 -m-2.5 rounded-xl">
<div class="flex bg-zinc-800">

{{-- sidebar --}}
<aside class="md:w-[360px] relative border-r border-zinc-700" >
<div :class="{'hidden md:block': !data.makeMenuHide}" class="top-0 left-0 max-md:fixed max-md:w-5/6 max-md:h-screen bg-zinc-800 z-50 max-md:shadow max-md:-tranzinc-x-full">
{{-- heading title --}}
<div class="p-4 border-b border-zinc-700">
<div class="flex mt-2 items-center justify-between">
<h2 class="text-2xl font-bold text-white ml-1">Chats</h2>
<h2 class="text-2xl font-bold text-white ml-1">{{__('Chats')}}</h2>
</div>
{{-- search --}}
<div class="relative mt-4">
<x-splade-form method="GET" action="{{url()->current()}}" :default="['search' => request()->get('search') ?? '']">
<x-splade-input type="search" name="search" placeholder="{{__('Search ...')}}" />
</x-splade-form>
</div>
</div>
</div>
</div>

{{-- users list --}}
<div class="space-y-2 p-2 overflow-y-auto md:h-[calc(100vh-204px)] h-[calc(100vh-130px)]">
<a href="#" class="relative flex items-center gap-4 p-2 duration-200 rounded-xl hover:bg-zinc-700">
<div class="relative w-14 h-14 shrink-0">
<img src="{{ asset('placeholder.webp') }}" alt="" class="object-cover w-full h-full rounded-full">
<div class="w-4 h-4 absolute bottom-0 right-0 bg-green-500 rounded-full border border-zinc-800"></div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1.5">
<div class="mr-auto text-sm text-white font-medium">Abdelmjid Saber</div>
<div class="text-xs font-light text-white/70">09:40AM</div>
@foreach($chats as $chat)
<x-splade-link preserve-scroll href="{{url()->current().'?chat='.$chat->id}}" class="relative flex items-center gap-4 p-2 duration-200 rounded-xl hover:bg-zinc-700">
<div class="relative w-14 h-14 shrink-0">
<img src="{{ $chat->sender?->getMedia('avatar')->first()?->getUrl() ?? asset('placeholder.webp') }}" alt="" class="border border-zinc-700 object-cover w-full h-full rounded-full">
<div class="w-4 h-4 absolute bottom-0 right-0 bg-green-500 rounded-full border border-zinc-800"></div>
</div>
<div class="font-medium overflow-hidden text-ellipsis text-sm whitespace-nowrap">Great, thank you.</div>
</div>
</a>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1.5">
<div class="mr-auto text-sm text-white font-medium">{{$chat->sender?->name ?? __('Anonymous')}}</div>
<div class="text-xs font-light text-white/70">{{$chat->created_at->diffForHumans()}}</div>
</div>
<div class="font-medium overflow-hidden text-ellipsis text-sm whitespace-nowrap">
{{ $chat->message }}
</div>
</div>
</x-splade-link>
@endforeach

@if($chats->count() < 1)
<div class="relative flex items-center gap-4 p-2 duration-200 rounded-xl hover:bg-zinc-700">
{{ __('No Message Here!') }}
</div>
@endif

{!! $chats->links('tomato-admin::components.pagination') !!}
</div>
</div>
</aside>
</aside>

@php $lastMessage = $getSelectedChat ?: $chats->first(); @endphp
{{-- message center --}}
<div class="flex-1">
{{-- chat heading --}}
Expand All @@ -66,75 +79,90 @@ class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay lg:hidden
<i class="bx bx-chevron-left text-4xl -ml-4"></i>
</button>
<div class="relative cursor-pointer max-md:hidden">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-8 h-8 rounded-full shadow">
<img src="{{ $lastMessage->sender?->getMedia('avatar')->first()?->getUrl() ?? asset('placeholder.webp') }}" alt="" class="w-8 h-8 border border-zinc-700 rounded-full shadow">
<div class="w-2 h-2 bg-teal-500 rounded-full absolute right-0 bottom-0 m-px"></div>
</div>
<div class="cursor-pointer">
<div class="text-base font-bold">Abdelmjid Saber</div>
<div class="text-base font-bold">{{ $lastMessage->sender?->name ??__('Anonymous') }}</div>
<div class="text-xs text-green-500 font-semibold">Online</div>
</div>
</div>

<div class="flex items-center gap-2">
<Link slideover href="{{ route('profile.messages.profile-info.show', 'abdelmjid') }}" class="hover:bg-zinc-700 p-1.5 rounded-full">
<i class="bx bx-info-circle text-lg"></i>
</Link>
</div>
</div>

{{-- chats bubble --}}
<div class="w-full p-5 py-10 overflow-y-auto md:h-[calc(100vh-204px)] h-[calc(100vh-195px)]">

<div class="py-10 text-center text-sm lg:pt-8">
<img src="{{ asset('placeholder.webp') }}" class="w-24 h-24 rounded-full mx-auto mb-3" alt="">
<img src="{{ $lastMessage->sender?->getMedia('avatar')->first()?->getUrl() ?? asset('placeholder.webp') }}" class="w-24 h-24 border border-zinc-700 rounded-full mx-auto mb-3" alt="">
<div class="mt-8">
<div class="md:text-xl text-base font-medium text-white">Abdelmjid Saber </div>
<div class="text-white/80 text-sm"> @AbdelmjidSaber </div>
<div class="md:text-xl text-base font-medium text-white">{{ $lastMessage->sender?->name ?? __('Anonymous') }}</div>
<div class="text-white/80 text-sm">{{ $lastMessage->sender?->username }}</div>
</div>
<div class="mt-3.5">
<a href="#" class="inline-block rounded-lg px-4 py-1.5 text-sm font-semibold bg-zinc-700">View profile</a>
<x-splade-link :href="$lastMessage->sender?->username ? url($lastMessage->sender?->username) : '#'" class="inline-block rounded-lg px-4 py-1.5 text-sm font-semibold bg-zinc-700">
{{__('View profile')}}
</x-splade-link>
</div>
</div>

<div class="text-sm font-medium space-y-6">
@php
$chatMessages = \Modules\CircleXO\App\Models\AccountContact::query()
->where('account_id', auth('accounts')->user()->id)
->where('sender_id', $lastMessage->sender_id)
->orWhere('account_id', $lastMessage->sender_id)
->where('sender_id', auth('accounts')->user()->id)
->orderBy('created_at', 'asc')
->get();
{{-- received --}}
<div class="flex gap-3">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-9 h-9 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-zinc-700"> Hi, I’m Fady </div>
</div>

{{-- sent --}}
<div class="flex gap-2 flex-row-reverse items-end">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-5 h-5 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-gradient-to-tr from-sky-500 to-blue-500 text-white shadow"> I’m Abdelmjid. welcome Fady</div>
</div>

{{-- time --}}
<div class="flex justify-center ">
<div class="font-medium text-white/70 text-sm">
March 29,2024,6:30 PM
</div>
</div>
@endphp


{{-- sent --}}
<div class="flex gap-2 flex-row-reverse items-end">
<img src="{{ asset('placeholder.webp') }}" alt="" class="w-5 h-5 rounded-full shadow">
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-gradient-to-tr from-sky-500 to-blue-500 text-white shadow">Great, thank you.</div>
</div>

@if($chatMessages->count() < 1)
<div class="text-center text-white/70">
{{ __('No Messages Here!') }}
</div>
@endif

@foreach($chatMessages as $chatMessage)
@if($chatMessage->sender_id == auth('accounts')->user()->id)
{{-- received --}}
<div class="flex gap-3">
<x-splade-link :href="$chatMessage->sender?->username ? url($chatMessage->sender?->username) : '#'">
<img src="{{ $chatMessage->sender?->getMedia('avatar')->first()?->getUrl() ?? asset('placeholder.webp') }}" alt="" class="border border-zinc-700 w-9 h-9 rounded-full shadow">
</x-splade-link>
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-zinc-700" style="white-space: pre-line !important;">{{ $chatMessage->message }}</div>
</div>
@else
{{-- sent --}}
<div class="flex gap-2 flex-row-reverse items-end">
<x-splade-link :href="$chatMessage->sender?->username ? url($chatMessage->sender?->username) : '#'">
<img src="{{ $chatMessage->sender?->getMedia('avatar')->first()?->getUrl() ?? asset('placeholder.webp') }}" alt="" class="border border-zinc-700 w-5 h-5 rounded-full shadow">
</x-splade-link>
<div class="px-4 py-2 rounded-[20px] max-w-sm bg-gradient-to-tr from-sky-500 to-blue-500 text-white shadow" style="white-space: pre-line !important;">
{{ $chatMessage->message }}
</div>
</div>
@endif
@endforeach
</div>
</div>
</div>

@if($lastMessage->sender)
{{-- sending message area --}}
<div class="flex items-center md:gap-4 gap-2 md:p-3 p-2 overflow-hidden">
<div class="relative flex-1">
<textarea placeholder="Write your message" rows="1" class="w-full resize-none bg-zinc-700 rounded-full px-4 p-2"></textarea>
<button type="submit" class="text-white shrink-0 p-2 absolute right-0.5 top-0">
<i class="bx bx-send text-xl flex"></i>
</button>
<x-splade-form preserve-scroll method="POST" :default="['anonymous_message' => false, 'name' =>$lastMessage->sender?->name, 'email' =>$lastMessage->sender?->email]" :action="route('home.contact.send', $lastMessage->sender?->username)">
<div class="flex items-center md:gap-4 gap-2 md:p-3 p-2 overflow-hidden">
<div class="relative flex-1">
<textarea placeholder="{{__('Write your message')}}" v-model="form.message" rows="1" class="w-full resize-none bg-zinc-700 rounded-full px-4 p-2"></textarea>
<button type="submit" class="text-white shrink-0 p-2 absolute right-0.5 top-0">
<i class="bx bx-send text-xl flex"></i>
</button>
</div>
</div>
</div>
</x-splade-form>

@endif
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion config/database.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'strict' => false,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
Expand Down

0 comments on commit 4e75c3b

Please sign in to comment.