Nov 25, 2023
0
Level 12
Pagination breaks after any interaction
When I load the page pagination works fine, but after any interaction, as in filtering, the pagination changes from
luckyfox.test/jobs-page?page=2
to
luckyfox.co.uk/livewire/update?page=2
I've removed some code that shouldn't effect this to keep the post smaller.
Livewire:
namespace App\Http\Livewire;
use App\Models\JobApplication;
use Carbon\Carbon;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Title;
use Livewire\Component;
use Livewire\WithPagination;
#[Layout('layouts.app')]
#[Title('Job Applications')]
class JobsPage extends Component
{
use WithPagination;
public $search = '';
public $selectedApplication;
public $sortField = 'job_title';
public $sortDirection = 'asc';
public $user;
#[Rule('required|min:5', as: 'Job Title')]
public $job_title;
#[Rule('required|min:5')]
public $company_name;
#[Rule('required|min:5', message: 'You need to do this')]
public $application_method;
#[Rule('required', message: 'You need to select something here')]
public $status;
public $follow_up_date;
protected $queryString = ['sortField', 'sortDirection'];
public function sortBy($field)
{
if ($this->sortField === $field) {
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
} else {
$this->sortDirection = 'asc';
}
$this->sortField = $field;
}
public function showEditModal()
{
$this->showEditModal = true;
}
public function store()
{
//
}
public function edit(JobApplication $application)
{
//
}
public function delete($id)
{
//
}
public function showDetails($applicationId)
{
$this->selectedApplication = JobApplication::findOrFail($applicationId);
}
public function render()
{
return view('livewire.jobs.jobs-page', [
'jobApplications' => JobApplication::search('job_title', $this->search)
->orderBy($this->sortField, $this->sortDirection)->paginate(10),
]);
}
}
Livewire View
<div class="col-span-3">
<div class="py-2">
<div class="px-2">
@if (session('success'))
<x-flashMessage>{{ session('success') }}</x-flashMessage>
@endif
<div class="bg-white dark:bg-gray-800 shadow-xl sm:rounded-lg">
<div class="px-4 sm:px-6 lg:px-8">
<div class="pt-4 sm:flex sm:items-center">
<div class="sm:flex-auto">
<div class="w-1/4">
<x-input.text wire:model.live="search"
placeholder="Search Job Applications..."
id="search"
class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"/>
</div>
</div>
<div class="sm:ml-16 sm:mt-0 sm:flex-none">
<button x-data
x-on:click="$dispatch('open-modal')"
class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
New Applications
</button>
</div>
</div>
<div class="mt-8 flow-root">
<div class="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="flex-col space-y-4">
<x-table>
<x-slot:head>
<x-table.heading sortable=true
wire:click="sortBy('job_title')"
:direction="$sortField === 'job_title' ? $sortDirection : null">
Job Title
</x-table.heading>
<x-table.heading sortable=true
wire:click="sortBy('company_name')"
:direction="$sortField === 'company_name' ? $sortDirection : null">
Company Name
</x-table.heading>
<x-table.heading sortable=true
wire:click="sortBy('created_at')"
:direction="$sortField === 'created_at' ? $sortDirection : null">
Created
</x-table.heading>
<x-table.heading sortable=true
wire:click="sortBy('contact_person')"
:direction="$sortField === 'contact_person' ? $sortDirection : null ">
Contact
</x-table.heading>
<x-table.heading sortable=true
wire:click="sortBy('status')"
:direction="$sortField === 'status' ? $sortDirection : null ">
Status
</x-table.heading>
</x-slot:head>
<x-slot:body>
@forelse($jobApplications as $jobApplication)
<x-table.row wire:key="{{$jobApplication->id}}"
wire:click="showDetails({{ $jobApplication->id }})">
<x-table.primary-cell>{{$jobApplication->job_title}}</x-table.primary-cell>
<x-table.cell>{{$jobApplication->company_name}}</x-table.cell>
<x-table.cell>{{$jobApplication->created_at->format('d-m-y')}}</x-table.cell>
<x-table.cell>{{$jobApplication->contact_person}}</x-table.cell>
<x-table.cell>
<span
class="
whitespace-nowrap
rounded-[0.27rem] bg-{{$jobApplication->status_colour}}-100
px-[0.65em] pb-[0.25em] pt-[0.35em]
text-center
align-baseline text-[0.75em]
font-bold
leading-none
text-{{$jobApplication->status_colour}}-700">
{{$jobApplication->status}}
</span>
{{-- <x-pills/> --}}
</x-table.cell>
</x-table.row>
@empty
<x-table.row>
<x-table.cell colspan="7">
<div class="flex justify-center items-center">
<span
class="text-2xl text-red-500 py-8">Sorry no job applications match <span
class="font-extrabold">{{$search}}</span></span>
</div>
</x-table.cell>
</x-table.row>
@endforelse
</x-slot:body>
<x-slot:foot>
<x-table.foot>
{{$jobApplications->links('pagination::tailwind')}}
</x-table.foot>
</x-slot:foot>
</x-table>
</div>
<div x-cloak>
<x-new-application-modal></x-new-application-modal>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col pt-2 mb-2">
<div class="basis-0 grow overflow-y-auto mb-2">
<div class="mr-2 rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
@if($selectedApplication)
<div class="rounded-2 text-xs text-gray-500 p-2 mr-2 flex justify-between">
<dd class="rounded-md bg-{{$selectedApplication->status_colour}}-50 px-2 py-1 pb-2 text-xs font-medium text-{{$selectedApplication->status_colour}}-600 ring-1 ring-inset ring-{{$selectedApplication->status_colour}}-600/20">
{{$selectedApplication->status}}
</dd>
<dd>
<button
class="rounded-md bg-indigo-600 px-2 py-1 text-center text-xs text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Update
</button>
</dd>
</div>
<div class="rounded-2 text-xs text-gray-500 p-2 mr-2">
<span
class="text-gray-900">Company Name: </span> {{$selectedApplication->company_name}}
<br/>
<span
class="text-gray-900">Applied Through: </span> {{$selectedApplication->application_method}}
<br/>
<span
class="text-gray-900">Contact Person: </span>{{$selectedApplication->contact_person}}
<br/>
<span
class="text-gray-900">Contact Info: </span>{{$selectedApplication->contact_information}}
</div>
<div class="rounded-2 text-xs text-gray-500 p-2 mr-2">
<span
class="text-gray-900">Date Applied: </span>{{$selectedApplication->created_at}}
<br/>
<span
class="text-gray-900">Resume Submitted: </span>{{$selectedApplication->resume_submitted}}
<br/>
<span
class="text-gray-900">Cover Letter Submitted: </span>{{$selectedApplication->cover_letter_submitted}}
</div>
<div class="rounded-2 text-xs text-gray-500 p-2 mr-2">
@if($selectedApplication->interviews->count() > 1)
<h2
class="text-gray-900 text-sm border-b-2 border-gray-400 mb-2">Interviews: </h2>
@foreach($selectedApplication->interviews as $interview)
<div class="pb-2 pl-2 border-b-2 border-gray-300 mt-2">
<span
class="text-gray-900">Date: </span>{{$interview->interview_date}}
<br/>
<span
class="text-gray-900">Type: </span>{{$interview->interview_type}}
<br/>
<span
class="text-gray-900">Outcome: </span>{{$interview->interview_outcome}}
<br/>
<span
class="text-gray-900">Feedback: </span>{{$interview->feedback}}
<span class="pb-2 border-b-2 border-gray-400"></span>
</div>
@endforeach
@else
<span
class="text-gray-900">Interviews: </span> No interviews on file
@endif
</div>
<div class="rounded-2 text-xs text-gray-500 p-2 mr-2">
@if($selectedApplication->jobNotes->count() > 1)
<h2
class="text-gray-900 text-sm border-b-2 border-gray-400 mb-2">Notes: </h2>
@foreach($selectedApplication->jobNotes as $note)
<div class="pb-2 pl-2 border-b-2 border-gray-300 mt-2">
<span
class="text-gray-900">Date: </span>{{$note->created_at}}<br/>
{{$note->content}}
</div>
@endforeach
@else
<span
class="text-gray-900">Notes: </span> No notes on file
@endif
</div>
<div class="flex justify-between rounded-2 text-xs text-gray-500 p-2 mr-2">
<button
class="rounded-md bg-indigo-600 px-2 py-1 text-center text-xs text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
View/Edit Details
</button>
<button
class="rounded-md bg-red-600 px-2 py-1 text-center text-xs text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
Delete
</button>
</div>
@endif
</div>
</div>
</div>
</div>
Please or to participate in this conversation.