RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add loading animation to search

This commit is contained in:
Christopher C. Wells 2021-03-08 20:29:51 -08:00
parent 65e3e9c776
commit 7e5e7d5222
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/views/components/search-view.blade.php
View File

@ -1,6 +1,6 @@
<div x-data="searchView()" x-init="loadMore()"> <div x-data="searchView()" x-init="loadMore()">
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0"> <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<div class="md:w-1/4"> <nav class="md:w-1/4">
<x-inputs.input type="text" <x-inputs.input type="text"
name="search" name="search"
placeholder="Search..." placeholder="Search..."
@ -17,11 +17,22 @@
@endforeach @endforeach
</div> </div>
</details> </details>
</div> </nav>
<div class="md:w-3/4"> <section class="md:w-3/4">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start"> <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
{{ $results }} {{ $results }}
</div> </div>
<svg x-show="searching" class="animate-spin h-24 w-24 mx-auto my-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-5" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-25" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<div x-show="!searching && results.length === 0"
class="h-full w-full font-extrabold text-red-100">
<div class="text-center text-6xl md:text-9xl">Nothing Found</div>
<svg class="h-24 w-24 m-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<x-inputs.button <x-inputs.button
class="text-xl mt-4" class="text-xl mt-4"
color="blue" color="blue"
@ -31,7 +42,7 @@
@click.prevent="loadMore()"> @click.prevent="loadMore()">
Load more Load more
</x-inputs.button> </x-inputs.button>
</div> </section>
</div> </div>
</div> </div>
@ -44,13 +55,15 @@
number: 1, number: 1,
size: 12, size: 12,
morePages: false, morePages: false,
searchTerm: '{{ $defaultSearch ?? null }}', searchTerm: null,
searching: false,
filterTags: [], filterTags: [],
resetPagination() { resetPagination() {
this.number = 1; this.number = 1;
this.morePages = false; this.morePages = false;
}, },
loadMore() { loadMore() {
this.searching = true;
let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`; let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`;
if (this.searchTerm) { if (this.searchTerm) {
url += `&filter[search]=${this.searchTerm}`; url += `&filter[search]=${this.searchTerm}`;
@ -59,7 +72,6 @@
fetch(url) fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.results = [];
this.results = [...this.results, ...data.data.map(result => result.attributes)]; this.results = [...this.results, ...data.data.map(result => result.attributes)];
if (this.number < data.meta.page['last-page']) { if (this.number < data.meta.page['last-page']) {
this.morePages = true; this.morePages = true;
@ -67,9 +79,11 @@
} else { } else {
this.morePages = false; this.morePages = false;
} }
this.searching = false;
}); });
}, },
search(e) { search(e) {
this.results = [];
this.resetPagination(); this.resetPagination();
if (e.target.value !== '') { if (e.target.value !== '') {
this.searchTerm = e.target.value; this.searchTerm = e.target.value;
@ -80,6 +94,7 @@
this.loadMore(); this.loadMore();
}, },
updateFilters(e) { updateFilters(e) {
this.results = [];
this.resetPagination(); this.resetPagination();
const newTag = e.target.text; const newTag = e.target.text;
if (this.filterTags.includes(newTag)) { if (this.filterTags.includes(newTag)) {