Skip to content

Commit

Permalink
Merge pull request #59 from tomatophp/develop
Browse files Browse the repository at this point in the history 
update chat UI
  • Loading branch information
@3x1io
3x1io committed Mar 31, 2024
2 parents d20e7c2 + 4e75c3b commit 3abbe28
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 15 deletions.
2 changes: 1 addition & 1 deletion Modules/CircleContacts/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
![Screenshot](https://github.com/tomatophp/circle-contacts/blob/master/art/cover.png)
![Screenshot](https://github.com/tomatophp/circle-contacts-module/blob/master/art/cover.png)

# Circle Contacts

Expand Down
2 changes: 2 additions & 0 deletions Modules/CircleInvoices/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
![Screenshot](https://github.com/tomatophp/circle-invoices-module/blob/master/art/cover.png)

# Circle Invoices

Invoices Generator With Custom Templates, to generate public invoices and your customer can download it
Expand Down
Binary file added Modules/CircleInvoices/art/cover.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 25 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 All @@ -81,6 +99,11 @@ public function message(Request $request, AccountContact $message)
return view('circle-xo::profile.message', compact('message'));
}

public function messageInfoProfile(Request $request, $profile)
{
return view('circle-xo::profile.message-profile-info');
}

public function qr()
{
$qr = QrCode::format('png')
Expand Down
44 changes: 44 additions & 0 deletions Modules/CircleXO/resources/views/profile/message-profile-info.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<x-splade-modal>
<div class="py-10 text-center text-sm pt-20">
<img src="{{ asset('placeholder.webp') }}" class="w-24 h-24 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 mt-1">@AbdelmjidSaber</div>
</div>
<div class="mt-5">
<a href="#"
class="inline-block rounded-full px-4 py-1.5 text-sm font-semibold bg-zinc-700 text-white">View
profile</a>
</div>
</div>

<hr class="border-zinc-700 opacity-80">

<ul class="text-base font-medium p-3">
<li>
<div class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-bell-off text-2xl"></i>
Mute Notification
</div>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-flag text-2xl"></i>
Report
</button>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-zinc-700 text-white">
<i class="bx bx-stop-circle text-2xl"></i>
Block
</button>
</li>
<li>
<button type="button" class="flex items-center gap-5 rounded-md p-3 w-full hover:bg-red-50 text-red-500">
<i class="bx bx-trash text-2xl"></i>
Delete Chat
</button>
</li>
</ul>
</div>
</x-splade-modal>
179 changes: 168 additions & 11 deletions Modules/CircleXO/resources/views/profile/messages.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,172 @@
<x-circle-xo-profile-layout>
<x-splade-data
default="{
makeMenuHide: false,
}"

remember="profile_messages"
local-storage
>

<div
v-cloak
v-show="data.makeMenuHide"
@click.prevent="data.makeMenuHide = !data.makeMenuHide"
class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay lg:hidden backdrop-blur"
>

</div>

<div class="my-12 mx-8 lg:mx-16">
<x-splade-table :for="$table" striped>
<x-splade-cell name>
<x-tomato-admin-row table :value="$item->name" type="text" />
</x-splade-cell>
<x-splade-cell email>
<x-tomato-admin-row table :value="$item->email" type="email" />
</x-splade-cell>
<x-splade-cell anonymous_message>
<x-tomato-admin-row table :value="$item->anonymous_message" type="bool" />
</x-splade-cell>
</x-splade-table>
<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>
</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>

{{-- users list --}}
<div class="space-y-2 p-2 overflow-y-auto md:h-[calc(100vh-204px)] h-[calc(100vh-130px)]">
@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="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>

@php $lastMessage = $getSelectedChat ?: $chats->first(); @endphp
{{-- message center --}}
<div class="flex-1">
{{-- chat heading --}}
<div class="flex items-center justify-between gap-2 w- px-6 py-3.5 z-10 border-b border-zinc-700 uk-animation-slide-top-medium">
<div class="flex items-center sm:gap-4 gap-2">
{{-- toggle for mobile --}}
<button type="button" @click.prevent="data.makeMenuHide = !data.makeMenuHide" class="md:hidden">
<i class="bx bx-chevron-left text-4xl -ml-4"></i>
</button>
<div class="relative cursor-pointer max-md:hidden">
<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">{{ $lastMessage->sender?->name ??__('Anonymous') }}</div>
<div class="text-xs text-green-500 font-semibold">Online</div>
</div>
</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="{{ $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">{{ $lastMessage->sender?->name ?? __('Anonymous') }}</div>
<div class="text-white/80 text-sm">{{ $lastMessage->sender?->username }}</div>
</div>
<div class="mt-3.5">
<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();
@endphp


@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>

@if($lastMessage->sender)
{{-- sending message area --}}
<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>
</x-splade-form>

@endif
</div>
</div>
</div>
</div>

</x-splade-data>
</x-circle-xo-profile-layout>
1 change: 1 addition & 0 deletions Modules/CircleXO/routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
Route::get('/followers', [ProfileController::class, 'followers'])->name('followers');
Route::get('/messages', [ProfileController::class, 'messages'])->name('messages');
Route::get('/messages/{message}', [ProfileController::class, 'message'])->name('messages.show');
Route::get('/messages/info/{profile}', [ProfileController::class, 'messageInfoProfile'])->name('messages.profile-info.show');
Route::get('/edit/social-accounts', [ProfileController::class, 'socialAccounts'])->name('social-accounts.show');
Route::post('/edit/social-accounts', [ProfileController::class, 'socialAccountsUpdate'])->name('social-accounts.update');
Route::get('/edit/password', [ProfileController::class, 'password'])->name('password.show');
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 3abbe28

Please sign in to comment.