Skip to content

Commit

Permalink
Fixed send message and attachments creation input
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raccoon254
Raccoon254 committed May 19, 2024
1 parent dfd26aa commit ca6edb5
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 38 deletions.
3 changes: 0 additions & 3 deletions app/Models/User.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@ public function referrals(): HasMany
return $this->hasMany(Referral::class, 'referrer_id');
}

//https://api.dicebear.com/8.x/pixel-art/svg?seed={{md5($this->email)}}
// https://mighty.tools/mockmind-api/content/cartoon/' . $this->id. '.jpg

public function getAvatarAttribute(): string
{
return 'https://api.dicebear.com/8.x/avataaars/svg?seed=' . $this->name;
Expand Down
2 changes: 1 addition & 1 deletion resources/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,5 @@ input:-webkit-autofill {
}

.message-input{
@apply w-full rounded-md px-12 border-2 border-gray-300 p-3 ring-1 ring-gray-300 ring-offset-1 transition-all duration-300 ease-in-out focus:border-blue-300 focus:outline-none bg-gray-200 text-gray-800;
@apply w-full rounded-md px-4 border border-gray-300 p-3 transition-all duration-300 ease-in-out text-gray-800;
}
52 changes: 28 additions & 24 deletions resources/views/livewire/send-message-input.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
<div class="flex flex-col">
<div class="flex relative flex-col">
@if (count($attachments) > 0)
<div class="flex w-full p-2 pt-3">
<div class="flex w-full mb-2 absolute -top-20">
@foreach($attachments as $attachment)
<div
class="flex relative flex-col items-center justify-center w-16 h-16 bg-blue-200 rounded-md mr-2">
@if (in_array($attachment->getMimeType(), ['image/jpeg', 'image/png']))
<img src="{{ $attachment->temporaryUrl() }}" alt="Attachment"
class="w-16 h-16 object-cover rounded-md">
@elseif ($attachment->getMimeType() == 'image/svg+xml')
<i class="fas fa-file-image text-4xl text-gray-500"></i>
@elseif ($attachment->getMimeType() == 'application/zip')
<i class="fas fa-file-archive text-4xl text-gray-500"></i>
@else
<i class="fas fa-file text-4xl text-gray-500"></i>
@endif
<!-- Displaying the first five characters of the file name -->
<span class="text-xs mt-1">
{{ substr($attachment->getClientOriginalName(), 0, 5) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
</span>
<div class="bg-white relative p-1 mr-2 flex flex-col items-center justify-center w-16 h-16 rounded-md">
<div
class="flex relative overflow-clip flex-col items-center justify-center w-full h-12 bg-blue-200 rounded-[4px]">
@if (in_array($attachment->getMimeType(), ['image/jpeg', 'image/png']))
<img src="{{ $attachment->temporaryUrl() }}" alt="Attachment"
class="w-full h-12 object-cover rounded-md">
@elseif ($attachment->getMimeType() == 'image/svg+xml')
<i class="fas fa-file-image text-2xl text-gray-500"></i>
@elseif ($attachment->getMimeType() == 'application/zip')
<i class="fas fa-file-archive text-2xl text-gray-500"></i>
@else
<i class="fas fa-file text-2xl text-gray-500"></i>
@endif
</div>
<!-- Displaying the first 6 characters of the file name -->
<span class="text-[10px] mt-1">
{{ substr($attachment->getClientOriginalName(), 0, 6) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
</span>

<button wire:click="removeAttachment('{{ $attachment->getClientOriginalName() }}')"
class="absolute btn-warning btn btn-xs btn-circle top-0 right-1 text-red-500 hover:text-red-700 -mt-2 -mr-3">
<i class="fas fa-times"></i>
class="absolute top-0 right-1 -mt-2 -mr-3 bg-amber-500 text-white center rounded-full p-2 h-5 w-5">
<i class="fas text-sm fa-times"></i>
</button>
</div>
@endforeach
Expand All @@ -31,25 +34,26 @@ class="absolute btn-warning btn btn-xs btn-circle top-0 right-1 text-red-500 hov
@error('attachments.*') <span class="error m-1">{{ $message }}</span> @enderror
@error('newMessage') <span class="error m-1">{{ $message }}</span> @enderror
</div>
<div class="px-2 relative flex items-center">
<div class="relative flex gap-2 items-center">
<label class="w-full">
<input id="messageInput" wire:model="newMessage" wire:keydown.enter="sendMessage"
class="message-input"
type="text" placeholder="Type your message...">
</label>
<!-- Hidden file input -->
<input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;">
<input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;" accept="image/*, application/pdf, application/zip, application/x-rar-compressed application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
<!-- Clip icon for opening file dialog -->
<button
class="btn absolute left-3 btn-ghost ring-1 ring-primary text-primary top[50%] transform[-50%] btn-sm btn-circle ml-2"
class="btn absolute right-16 btn-sm mr-2 btn-ghost btn-circle bg-gray-100 text-primary bottom-2 transform[-50%] ml-2"
onclick="document.getElementById('fileInput').click();">
<i class="fas fa-paperclip"></i>
</button>

<!-- Send message button -->
<button wire:click="sendMessage"
wire:loading.class.remove="btn-primary"
wire:loading.class="btn-ghost"
class="btn absolute right-3 btn-primary top[50%] transform[-50%] btn-sm btn-circle mr-2">
class="btn right-3 btn-primary ring-1 ring-offset-2 border rounded-md btn-square mr-2">
<i wire:target="sendMessage" wire:loading.class="hidden" class="fas fa-paper-plane"></i>
<span wire:loading wire:target="sendMessage"
class="loading loading-spinner text-primary loading-sm"></span>
Expand Down
32 changes: 22 additions & 10 deletions resources/views/messages.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,30 @@
<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 h-[87vh] bg-gray-300 m-2 rounded-md">
<div class="w-2/3 h-[87vh] bg-gray-100 m-2 rounded-md">
@if($selectedUser)
<div class="flex flex-col gap-3 p-3 h-full">
<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="flex-grow">
<h1 class="text-gray-800 font-semibold">{{ $selectedUser->name }}</h1>
</div>
<div class="flex gap-3 border-b pb-3 items-center">
@if($selectedUser->role == 'client')
<div class="flex-shrink-0">
<img src="{{ $selectedUser->profile_photo }}" alt="{{ $selectedUser->name }}"
class="w-10 h-10 bg-white rounded-full">
</div>
<div class="flex-grow">
<h1 class="text-gray-800 font-semibold">{{ $selectedUser->name }}</h1>
</div>
@else
<div class="flex-shrink-0">
<div class="div w-10 h-10 bg-white center rounded-full">
<x-application-logo class="w-4 h-4"/>
</div>
</div>
<div class="flex-grow">
<h1 class="text-gray-800 font-semibold">
ScholarSpace Support
</h1>
</div>
@endif
</div>
<div class="h-full flex flex-col overflow-y-auto">
@if ($messages->count() == 0)
Expand Down Expand Up @@ -60,7 +73,6 @@ class="absolute text-black/80 right-5 top-[50%] transform translate-x-1/2 -trans
</div>
</div>
<div class="h-[76vh] flex overflow-y-auto flex-col gap-3 rounded-lg">

<!-- All users -->
@foreach($clients as $user)
<div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg"
Expand Down

0 comments on commit ca6edb5

Please sign in to comment.