feat: updated pagination logic and added loading screen while fetchin…

…g results. fixes #220
Steinbeck-Lab · Aug 29, 2024 · 7fabdd4 · 7fabdd4
1 parent dd17dfb
commit 7fabdd4
Show file tree

Hide file tree

Showing 10 changed files with 371 additions and 26 deletions.
diff --git a/app/Console/Commands/OrganismDedupeOptions.php b/app/Console/Commands/OrganismDedupeOptions.php
@@ -16,7 +16,7 @@ class OrganismDedupeOptions extends Command
      *
      * @var string
      */
-    protected $signature = 'app:organism-molecule-counts';
+    protected $signature = 'app:organism-dedupe';
 
     /**
      * The console command description.
@@ -32,8 +32,8 @@ public function handle()
     {
         $this->info('Updating missing slugs...');
 
-        Organism::whereNotNull('slug')
-            ->chunk(100, function ($organisms) {
+        Organism::whereNull('slug')
+            ->chunk(1000, function ($organisms) {
                 $organisms->each(function ($organism) {
                     $slug = Str::slug($organism->name);
                     $organism->update(['slug' => $slug]);

diff --git a/app/Console/Commands/OrganismMoleculeCounts.php b/app/Console/Commands/OrganismMoleculeCounts.php
@@ -40,7 +40,7 @@ public function handle()
                 ->update(['molecule_count' => $count->count]);
         }
 
-        $this->info('Updatin the residual organisms.');
+        $this->info('Updating the residual organisms.');
 
         DB::table('organisms')
             ->whereNotIn('id', $moleculeCounts->pluck('id'))

diff --git a/app/Livewire/Search.php b/app/Livewire/Search.php
@@ -69,6 +69,11 @@ public function placeholder()
         HTML;
     }
 
+    public function updatingPage($page)
+    {
+        $this->page = $page;
+    }
+
     public function updatedQuery()
     {
         $this->page = 1;
@@ -84,14 +89,15 @@ public function search(SearchMolecule $search)
     public function render(SearchMolecule $search)
     {
         try {
+            $cacheKey = 'search.'.md5($this->query.$this->size.$this->type.$this->sort.$this->tagType.$this->page);
+
+            $results = Cache::remember($cacheKey, now()->addDay(), function () use ($search) {
+                return $search->query($this->query, $this->size, $this->type, $this->sort, $this->tagType, $this->page);
+            });
+
+            $this->collection = $results[1];
+            $this->organisms = $results[2];
 
-            if ($this->query == '') {
-                $results = Cache::rememberForever('search.default', function () use ($search) {
-                    return $search->query($this->query, $this->size, $this->type, $this->sort, $this->tagType, $this->page);
-                });
-            } else {
-                $results = $search->query($this->query, $this->size, $this->type, $this->sort, $this->tagType, $this->page);
-            }
             $this->collection = $results[1];
             $this->organisms = $results[2];
 

diff --git a/composer.lock b/composer.lock
diff --git a/public/img/loading.gif b/public/img/loading.gif
diff --git a/resources/views/livewire/search.blade.php b/resources/views/livewire/search.blade.php
@@ -68,8 +68,7 @@ class="text-base font-semibold leading-7 text-secondary-dark  text-sm">
             <div class="sm:hidden">
                 <label for="tabs" class="sr-only">Select a tab</label>
                 <select id="tabs" name="tabs" x-model="activeTab"
-                    class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-                    >
+                    class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                     <option value="molecules">Molecules</option>
                     <option value="organism">Organism</option>
                     <option value="citations">Citations</option>
@@ -252,15 +251,18 @@ class="rounded-md bg-secondary-dark px-3.5 py-1.5 text-base font-semibold leadin
             <div class="p-4 w-full">
                 {{ $molecules->links() }}
             </div>
+            <div class="relative items-center block p-6 bg-white dark:bg-gray-800 dark:border-gray-800 dark:hover:bg-gray-700">
             <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-4 lg:gap-x-8">
                 @foreach ($molecules as $molecule)
                     <livewire:molecule-card :key="$molecule->identifier" :molecule="$molecule" />
                 @endforeach
+
             </div>
-            <div class="p-4">
-                {{ $molecules->links() }}
+            <div wire:loading role="status" class="border rounded-lg shadow-md opacity-90 absolute -translate-x-1/2 top-24 left-1/2 text-center justify-center">
+                <img class="w-full rounded-md" alt="loading" src="/img/loading.gif" />
             </div>
         </div>
+        </div>
     @else
         <div class="text-center pt-10 mt-10">
             <svg class="w-12 h-12 mx-auto" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/resources/views/vendor/livewire/bootstrap.blade.php b/resources/views/vendor/livewire/bootstrap.blade.php
@@ -0,0 +1,102 @@
+@php
+if (! isset($scrollTo)) {
+    $scrollTo = 'body';
+}
+
+$scrollIntoViewJsSnippet = ($scrollTo !== false)
+    ? <<<JS
+       (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
+    JS
+    : '';
+@endphp
+
+<div>
+    @if ($paginator->hasPages())
+        <nav class="d-flex justify-items-center justify-content-between">
+            <div class="d-flex justify-content-between flex-fill d-sm-none">
+                <ul class="pagination">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <li class="page-item disabled" aria-disabled="true">
+                            <span class="page-link">@lang('pagination.previous')</span>
+                        </li>
+                    @else
+                        <li class="page-item">
+                            <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
+                        </li>
+                    @endif
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <li class="page-item">
+                            <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
+                        </li>
+                    @else
+                        <li class="page-item disabled" aria-disabled="true">
+                            <span class="page-link" aria-hidden="true">@lang('pagination.next')</span>
+                        </li>
+                    @endif
+                </ul>
+            </div>
+
+            <div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
+                <div>
+                    <p class="small text-muted">
+                        {!! __('Showing') !!}
+                        <span class="fw-semibold">{{ $paginator->firstItem() }}</span>
+                        {!! __('to') !!}
+                        <span class="fw-semibold">{{ $paginator->lastItem() }}</span>
+                        {!! __('of') !!}
+                        <span class="fw-semibold">{{ $paginator->total() }}</span>
+                        {!! __('results') !!}
+                    </p>
+                </div>
+
+                <div>
+                    <ul class="pagination">
+                        {{-- Previous Page Link --}}
+                        @if ($paginator->onFirstPage())
+                            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                                <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                            </li>
+                        @else
+                            <li class="page-item">
+                                <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.previous')">&lsaquo;</button>
+                            </li>
+                        @endif
+
+                        {{-- Pagination Elements --}}
+                        @foreach ($elements as $element)
+                            {{-- "Three Dots" Separator --}}
+                            @if (is_string($element))
+                                <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                            @endif
+
+                            {{-- Array Of Links --}}
+                            @if (is_array($element))
+                                @foreach ($element as $page => $url)
+                                    @if ($page == $paginator->currentPage())
+                                        <li class="page-item active" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                                    @else
+                                        <li class="page-item" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}">{{ $page }}</button></li>
+                                    @endif
+                                @endforeach
+                            @endif
+                        @endforeach
+
+                        {{-- Next Page Link --}}
+                        @if ($paginator->hasMorePages())
+                            <li class="page-item">
+                                <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.next')">&rsaquo;</button>
+                            </li>
+                        @else
+                            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                                <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                            </li>
+                        @endif
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    @endif
+</div>
diff --git a/resources/views/vendor/livewire/simple-bootstrap.blade.php b/resources/views/vendor/livewire/simple-bootstrap.blade.php
@@ -0,0 +1,53 @@
+@php
+if (! isset($scrollTo)) {
+    $scrollTo = 'body';
+}
+
+$scrollIntoViewJsSnippet = ($scrollTo !== false)
+    ? <<<JS
+       (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
+    JS
+    : '';
+@endphp
+
+<div>
+    @if ($paginator->hasPages())
+        <nav>
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.previous')</span>
+                    </li>
+                @else
+                    @if(method_exists($paginator,'getCursorName'))
+                        <li class="page-item">
+                            <button dusk="previousPage" type="button" class="page-link" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->previousCursor()->encode() }}" wire:click="setPage('{{$paginator->previousCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
+                        </li>
+                    @else
+                        <li class="page-item">
+                            <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
+                        </li>
+                    @endif
+                @endif
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    @if(method_exists($paginator,'getCursorName'))
+                        <li class="page-item">
+                            <button dusk="nextPage" type="button" class="page-link" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{$paginator->nextCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
+                        </li>
+                    @else
+                        <li class="page-item">
+                            <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
+                        </li>
+                    @endif
+                @else
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.next')</span>
+                    </li>
+                @endif
+            </ul>
+        </nav>
+    @endif
+</div>