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 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"
name="search"
placeholder="Search..."
@ -17,11 +17,22 @@
@endforeach
</div>
</details>
</div>
<div class="md:w-3/4">
</nav>
<section class="md:w-3/4">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
{{ $results }}
</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
class="text-xl mt-4"
color="blue"
@ -31,7 +42,7 @@
@click.prevent="loadMore()">
Load more
</x-inputs.button>
</div>
</section>
</div>
</div>
@ -44,13 +55,15 @@
number: 1,
size: 12,
morePages: false,
searchTerm: '{{ $defaultSearch ?? null }}',
searchTerm: null,
searching: false,
filterTags: [],
resetPagination() {
this.number = 1;
this.morePages = false;
},
loadMore() {
this.searching = true;
let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`;
if (this.searchTerm) {
url += `&filter[search]=${this.searchTerm}`;
@ -59,7 +72,6 @@
fetch(url)
.then(response => response.json())
.then(data => {
this.results = [];
this.results = [...this.results, ...data.data.map(result => result.attributes)];
if (this.number < data.meta.page['last-page']) {
this.morePages = true;
@ -67,9 +79,11 @@
} else {
this.morePages = false;
}
this.searching = false;
});
},
search(e) {
this.results = [];
this.resetPagination();
if (e.target.value !== '') {
this.searchTerm = e.target.value;
@ -80,6 +94,7 @@
this.loadMore();
},
updateFilters(e) {
this.results = [];
this.resetPagination();
const newTag = e.target.text;
if (this.filterTags.includes(newTag)) {