Skip to content

Commit

Permalink
Merge pull request #4 from janson-git/main
Browse files Browse the repository at this point in the history 
Add pagination to mail list
  • Loading branch information
@modernben
modernben authored Sep 19, 2024
2 parents 790dc74 + 5c9b259 commit 5dca23e
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 15 deletions.
4 changes: 2 additions & 2 deletions resources/views/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>MailThief Inbox</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@livewireStyles()
</head>
<body class="bg-light">
Expand All @@ -23,7 +23,7 @@
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
@livewireScripts()
</body>
</html>
43 changes: 36 additions & 7 deletions resources/views/livewire/inbox.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,44 @@
<div class="row">
<div class="col-md-4">
<div class="form-group mb-3">
<label for="search" class="visually-hidden">Search...</label>
<input
type="search"
class="form-control"
id="search"
placeholder="Search"
wire:model.debounce.500ms="search"
/>
</div>

<div>
{{ $emails->links() }}
</div>

<ul class="list-group">
@foreach ($emails as $singleEmail)
<li class="list-group-item" role="button" wire:click="selectEmail({{ $singleEmail->id }})" style="{{ !empty($email) && $email->id == $singleEmail->id ? 'background-color: var(--bs-gray-300)' : '' }}">
<li
@class([
'list-group-item',
'bg-dark-subtle' => !empty($email) && $email->id == $singleEmail->id,
])
role="button"
wire:click="selectEmail({{ $singleEmail->id }})"
wire:key="email-{{ $singleEmail->id }}"
>
<div class="d-flex justify-content-between">
<div>
<span class="text-primary">{{ $singleEmail->subject }}</span><br />
<span class="text-muted text-sm">
{{ collect($singleEmail->to)->pluck('email')->join(', ') }}
</span><br />
<span class="form-text">({{ $singleEmail->created_at->toDateTimeLocalString() }})</span>
<span class="form-text">
@if($singleEmail->created_at < now()->subDay())
{{ $singleEmail->created_at->toDateTimeLocalString() }}
@else
{{ $singleEmail->created_at->diffForHumans() }}
@endif
</span>
</div>
<div class="d-flex flex-column justify-content-around align-items-center">
<span class="badge bg-secondary badge-pill">#{{ $singleEmail->id }}</span>
Expand All @@ -28,7 +57,7 @@
@if($email)
<table class="table bg-white rounded border">
<tr id="from">
<th class="w-25">From:</td>
<th class="w-25">From:</th>
<td>
@foreach($email->from as $from)
{{ @$from['name'] }} {{ @$from['email'] }}<br />
Expand Down Expand Up @@ -74,13 +103,13 @@
</table>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">HTML</button>
<button class="nav-link {{ $email->html ? 'active' : '' }}" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">HTML</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="source-tab" data-bs-toggle="tab" data-bs-target="#source-tab-pane" type="button" role="tab" aria-controls="source-tab-pane" aria-selected="false">HTML Source</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="text-tab" data-bs-toggle="tab" data-bs-target="#text-tab-pane" type="button" role="tab" aria-controls="text-tab-pane" aria-selected="false">Text</button>
<button class="nav-link {{ !$email->html && $email->text ? 'active' : '' }}" id="text-tab" data-bs-toggle="tab" data-bs-target="#text-tab-pane" type="button" role="tab" aria-controls="text-tab-pane" aria-selected="false">Text</button>
</li>
@if($email->attachments)
<li class="nav-item" role="presentation" id="attachments">
Expand All @@ -89,7 +118,7 @@
@endif
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="html-tab" tabindex="0">
<div class="tab-pane fade {{ $email->html ? 'show active' : '' }}" id="html-tab-pane" role="tabpanel" aria-labelledby="html-tab" tabindex="0">
<div class="border">
<iframe class="w-100" style="height: 800px;" srcdoc="{{ $email->html }}"></iframe>
</div>
Expand All @@ -99,7 +128,7 @@
<code><pre>{{ $email->html }}</pre></code>
</div>
</div>
<div class="tab-pane fade" id="text-tab-pane" role="tabpanel" aria-labelledby="text-tab" tabindex="0">
<div class="tab-pane fade {{ !$email->html && $email->text ? 'show active' : '' }}" id="text-tab-pane" role="tabpanel" aria-labelledby="text-tab" tabindex="0">
<div class="border bg-white p-3">
{!! nl2br($email->text) !!}
</div>
Expand Down
56 changes: 56 additions & 0 deletions resources/views/livewire/pagination/bootstrap.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<div>
@if ($paginator->hasPages())
@php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)

<nav>
<ul class="pagination pagination-sm justify-content-center text-center">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="w-100 page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<span class="w-100 page-link" aria-hidden="true">Previous</span>
</li>
@else
<li class="w-100 page-item">
<button class="w-100 page-link" type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">Previous</button>
</li>
@endif

{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="w-100 page-item disabled" aria-disabled="true">
<span class="w-100 page-link">{{ $element }}</span>
</li>
@endif

{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="w-100 page-item active" wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}" aria-current="page">
<span class="w-100 page-link">{{ $page }}</span>
</li>
@else
<li class="w-100 page-item" wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}">
<button type="button" class="w-100 page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')">{{ $page }}</button>
</li>
@endif
@endforeach
@endif
@endforeach

{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="w-100 page-item">
<button class="w-100 page-link" type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')">Next</button>
</li>
@else
<li class="w-100 page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span class="w-100 page-link" aria-hidden="true">Next</span>
</li>
@endif
</ul>
</nav>
@endif
</div>
39 changes: 33 additions & 6 deletions src/Http/Livewire/Inbox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,54 @@
namespace ModernMcGuire\MailThief\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\DB;
use Livewire\WithPagination;
use ModernMcGuire\MailThief\MailThief;

class Inbox extends Component
{
public $emails;
public $email;
use WithPagination;

private const EMAILS_PAGE_LIMIT = 10;

public $email = null;
public $search = '';

public function mount()
{
$this->emails = MailThief::latest()->get(['id','from','subject','attachments','created_at']);
$this->email = $this->emails->first()?->refresh();
$this->email = MailThief::latest()->first()?->refresh();
}

public function selectEmail($id)
{
$this->email = MailThief::find($id);
}

public function updatedSearch()
{
$this->resetPage();
}

public function render()
{
return view('mailthief::livewire.inbox');
$emails = MailThief::query()
->when($this->search, function($query, $search) {
return $query
->where('subject', 'like', "%{$search}%")
->orWhere('text', 'like', "%{$search}%")
->orWhere('html', 'like', "%{$search}%");
})
->latest()
->limit(self::EMAILS_PAGE_LIMIT)
->paginate(self::EMAILS_PAGE_LIMIT)
->onEachSide(1);

return view('mailthief::livewire.inbox', [
'emails' => $emails,
]);
}

public function paginationView()
{
return 'mailthief::livewire.pagination.bootstrap';
}
}

0 comments on commit 5dca23e

Please sign in to comment.