mirror of https://github.com/kcal-app/kcal.git
70 lines
2.5 KiB
PHP
70 lines
2.5 KiB
PHP
<div x-data="searchView()" x-init="loadMore()">
|
|
<x-inputs.input type="text"
|
|
name="search"
|
|
placeholder="Search..."
|
|
autocomplete="off"
|
|
class="w-full mb-4"
|
|
@input.debounce.400ms="search($event)" />
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
|
|
{{ $results }}
|
|
</div>
|
|
<x-inputs.button
|
|
class="text-xl mt-4"
|
|
color="blue"
|
|
type="button"
|
|
x-show="morePages"
|
|
x-cloak
|
|
@click.prevent="loadMore()">
|
|
Load more
|
|
</x-inputs.button>
|
|
</div>
|
|
|
|
@once
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
let searchView = () => {
|
|
return {
|
|
results: [],
|
|
number: 1,
|
|
size: 12,
|
|
morePages: false,
|
|
searchTerm: '{{ $defaultSearch ?? null }}',
|
|
reset() {
|
|
this.results = [];
|
|
this.number = 1;
|
|
this.searchTerm = null;
|
|
this.morePages = false;
|
|
},
|
|
loadMore() {
|
|
let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`;
|
|
if (this.searchTerm) {
|
|
url += `&filter[search]=${this.searchTerm}`;
|
|
}
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.results = [...this.results, ...data.data.map(result => result.attributes)];
|
|
if (this.number < data.meta.page['last-page']) {
|
|
this.morePages = true;
|
|
this.number++;
|
|
} else {
|
|
this.morePages = false;
|
|
}
|
|
});
|
|
},
|
|
search(e) {
|
|
this.reset();
|
|
if (e.target.value !== '') {
|
|
this.searchTerm = e.target.value;
|
|
this.loadMore();
|
|
}
|
|
else {
|
|
this.loadMore();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endonce
|