Added Fetch Email on page load
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:button class="cursor-pointer inbox-btn" variant="filled" icon="inbox" x-on:click="$dispatch('getEmail')">Inbox</flux:button>
|
||||
<flux:button class="mt-2 cursor-pointer" variant="filled" icon="refresh-cw" x-on:click="Livewire.dispatch('updateEmail')">Refresh</flux:button>
|
||||
<flux:button class="mt-2 cursor-pointer" variant="filled" icon="refresh-cw" x-on:click="$dispatch('fetchMessages')">Refresh</flux:button>
|
||||
</flux:navlist>
|
||||
<img src="https://placehold.co/300x250?font=roboto" alt="sideAds" />
|
||||
<flux:spacer />
|
||||
@@ -121,8 +121,6 @@
|
||||
<!-- Toast Container -->
|
||||
|
||||
<div id="toast-container" class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 space-y-4"></div>
|
||||
<!-- Toast Wrapper (top center) -->
|
||||
<div id="toast-container" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[999999] right-4 top-4 left-1/2 -translate-x-1/2 space-y-2 pointer-events-none"></div>
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
<div>
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<!-- Email Address Display -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold mb-2">Your Disposable Email</h2>
|
||||
<div class="flex items-center space-x-4">
|
||||
<input type="text" value="{{ $currentEmail }}" readonly class="flex-1 p-2 border rounded bg-gray-50" />
|
||||
<button wire:click="generateNewEmail" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
|
||||
Generate New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages List -->
|
||||
<div class="space-y-4">
|
||||
@if(count($messages) > 0)
|
||||
@foreach($messages as $message)
|
||||
<div class="border rounded p-4 hover:bg-gray-50 cursor-pointer {{ $selectedMessage === $message->id ? 'bg-blue-50' : '' }}"
|
||||
wire:click="selectMessage({{ $message->id }})">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="font-semibold">{{ $message->subject }}</h3>
|
||||
<p class="text-sm text-gray-600">From: {{ $message->from }}</p>
|
||||
<p class="text-sm text-gray-500">{{ $message->date }}</p>
|
||||
</div>
|
||||
<button wire:click.stop="deleteMessage({{ $message->id }})"
|
||||
class="text-red-500 hover:text-red-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="text-center py-8 text-gray-500">
|
||||
No messages yet. They will appear here automatically.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-refresh script -->
|
||||
<script>
|
||||
document.addEventListener('livewire:load', function () {
|
||||
setInterval(() => {
|
||||
@this.loadMessages()
|
||||
}, {{ $this->getPollingInterval() }});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
47
resources/views/livewire/frontend/components/mail.blade.php
Normal file
47
resources/views/livewire/frontend/components/mail.blade.php
Normal file
@@ -0,0 +1,47 @@
|
||||
<div class="inbox-list cursor-pointer" x-on:click="" data-message-id="{{ $message['id'] }}">
|
||||
<div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
|
||||
<div class="flex items-center px-4 py-4 sm:px-6">
|
||||
<div class="flex flex-1 items-center min-w-0">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="relative inline-block">
|
||||
<img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />
|
||||
<span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3 dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
|
||||
{{ $message['sender_name'] }}
|
||||
</div>
|
||||
<div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20"
|
||||
class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate">{{ $message['sender_email'] }}</span></div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div>
|
||||
<div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
|
||||
{{ $message['subject'] }}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
|
||||
{{ Str::limit($message['contentText'], 100) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
9
resources/views/livewire/frontend/mailbox.blade.php
Normal file
9
resources/views/livewire/frontend/mailbox.blade.php
Normal file
@@ -0,0 +1,9 @@
|
||||
<span>
|
||||
@if($messages)
|
||||
@foreach(array_reverse($messages) as $message)
|
||||
<livewire:frontend.components.mail :message="$message" />
|
||||
@endforeach
|
||||
@else
|
||||
<flux:text>{{ $initial ? __('Empty Inbox') : __('Fetching') . '...' }}</flux:text>
|
||||
@endif
|
||||
</span>
|
||||
@@ -1,11 +1,5 @@
|
||||
<div>
|
||||
<flux:heading class="mb-3" size="xl" level="1">Inbox</flux:heading>
|
||||
<div class="mb-3"></div>
|
||||
@php
|
||||
for ($i=0; $i<=10; $i++) {
|
||||
@endphp
|
||||
<livewire:inbox />
|
||||
@php
|
||||
}
|
||||
@endphp
|
||||
<livewire:frontend.mailbox />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user