spt/forge
spt/forge
0
0
Fork 0
mirror of https://github.com/sp-tarkov/forge.git synced 2025-02-13 04:30:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request 'Add Results Per Page Dropdown to Mods Index Page' (#55) from waffle.lord/forge:impl/results-per-page into listing-per-page

Browse Source 
Reviewed-on: SPT/forge#55
This commit is contained in:
Refringe 2024-10-07 03:59:46 +00:00
commit 53e3fd36da
4 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Livewire/Mod/Listing.php
View File

@ -32,6 +32,9 @@ class Listing extends Component
#[Url] #[Url]
public string $order = 'created'; public string $order = 'created';
#[Url]
public int $resultsPerPage = 12;
/** /**
* The SPT versions filter value. * The SPT versions filter value.
*/ */
@ -87,7 +90,7 @@ class Listing extends Component
'order' => $this->order, 'order' => $this->order,
'sptVersions' => $this->sptVersions, 'sptVersions' => $this->sptVersions,
]; ];
$mods = (new ModFilter($filters))->apply()->paginate(16); $mods = (new ModFilter($filters))->apply()->paginate($this->resultsPerPage);
$this->redirectOutOfBoundsPage($mods); $this->redirectOutOfBoundsPage($mods);

8
resources/views/components/filter-menu-item.blade.php Normal file
View File

@ -0,0 +1,8 @@
@props(['filterName', 'filter', 'currentFilter'])
<a href="#{{ $filter }}"
@click.prevent="$wire.set('{{ $filterName }}', '{{ $filter }}')"
class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm hover:bg-slate-800/5 focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:hover:bg-slate-100/5 dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white {{ strval($filter) === strval($currentFilter) ? "font-bold text-cyan-500 dark:text-cyan-500 hover:text-cyan-400 dark:hover:text-cyan-400" : "text-slate-700 dark:text-slate-300 hover:text-black dark:hover:text-white" }}"
role="menuitem" tabindex="-1">
{{ $slot }}
</a>

8
resources/views/components/filter-sort-menu-item.blade.php
View File

@ -1,8 +0,0 @@
@props(['order', 'currentOrder'])
<a href="#{{ $order }}"
@click.prevent="$wire.set('order', '{{ $order }}')"
class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white {{ $order === $currentOrder ? "font-bold text-slate-900 dark:text-white" : "" }}"
role="menuitem" tabindex="-1">
{{ $slot }}
</a>

47
resources/views/livewire/mod/listing.blade.php
View File

@ -99,7 +99,46 @@
</div> </div>
</div> </div>
<div class="col-start-1 row-start-1 py-4"> <div class="col-start-1 row-start-1 py-4">
<div class="mx-auto flex max-w-7xl justify-end px-4 sm:px-6 lg:px-8"> <div class="mx-auto flex max-w-7xl justify-end px-4 sm:px-6 lg:px-8 gap-6">
{{-- Results Per Page Dropdown --}}
<div class="relative inline-block" x-data="{ isResultsPerPageOpen: false }" @click.away="isResultsPerPageOpen = false">
<div class="flex">
{{-- Large display can show full text --}}
<button type="button" @click="isResultsPerPageOpen = !isResultsPerPageOpen" class="hidden lg:flex group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isResultsPerPageOpen.toString()" aria-haspopup="true">
{{ __('Results Per Page') }}
<svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
{{-- Only show selected number on smaller screens --}}
<button type="button" @click="isResultsPerPageOpen = !isResultsPerPageOpen" class="lg:hidden group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isResultsPerPageOpen.toString()" aria-haspopup="true">
{{ $resultsPerPage }}
<svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div x-cloak
x-show="isResultsPerPageOpen"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute top-7 right-0 z-10 flex w-full min-w-[12rem] flex-col divide-y divide-slate-300 overflow-hidden rounded-xl border border-gray-300 bg-gray-100 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="flex flex-col py-1.5">
<x-filter-menu-item filterName="resultsPerPage" filter="6" :currentFilter="$resultsPerPage">6</x-filter-menu-item>
<x-filter-menu-item filterName="resultsPerPage" filter="12" :currentFilter="$resultsPerPage">12</x-filter-menu-item>
<x-filter-menu-item filterName="resultsPerPage" filter="24" :currentFilter="$resultsPerPage">24</x-filter-menu-item>
<x-filter-menu-item filterName="resultsPerPage" filter="50" :currentFilter="$resultsPerPage">50</x-filter-menu-item>
<x-filter-menu-item filterName="resultsPerPage" filter="100" :currentFilter="$resultsPerPage">100</x-filter-menu-item>
</div>
</div>
</div>
{{-- Sort Dropdown --}}
<div class="relative inline-block" x-data="{ isSortOpen: false }" @click.away="isSortOpen = false"> <div class="relative inline-block" x-data="{ isSortOpen: false }" @click.away="isSortOpen = false">
<div class="flex"> <div class="flex">
<button type="button" @click="isSortOpen = !isSortOpen" class="group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isSortOpen.toString()" aria-haspopup="true"> <button type="button" @click="isSortOpen = !isSortOpen" class="group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isSortOpen.toString()" aria-haspopup="true">
@ -120,9 +159,9 @@
class="absolute top-7 right-0 z-10 flex w-full min-w-[12rem] flex-col divide-y divide-slate-300 overflow-hidden rounded-xl border border-gray-300 bg-gray-100 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800" class="absolute top-7 right-0 z-10 flex w-full min-w-[12rem] flex-col divide-y divide-slate-300 overflow-hidden rounded-xl border border-gray-300 bg-gray-100 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"> role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="flex flex-col py-1.5"> <div class="flex flex-col py-1.5">
<x-filter-sort-menu-item order="created" :currentOrder="$order">{{ __('Newest') }}</x-filter-sort-menu-item> <x-filter-menu-item filterName="order" filter="created" :currentFilter="$order">{{ __('Newest') }}</x-filter-menu-item>
<x-filter-sort-menu-item order="updated" :currentOrder="$order">{{ __('Recently Updated') }}</x-filter-sort-menu-item> <x-filter-menu-item filterName="order" filter="updated" :currentFilter="$order">{{ __('Recently Updated') }}</x-filter-menu-item>
<x-filter-sort-menu-item order="downloaded" :currentOrder="$order">{{ __('Most Downloaded') }}</x-filter-sort-menu-item> <x-filter-menu-item filterName="order" filter="downloaded" :currentFilter="$order">{{ __('Most Downloaded') }}</x-filter-menu-item>
</div> </div>
</div> </div>
</div> </div>