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

Complete initial tag filter handling

This commit is contained in:
Christopher C. Wells 2021-02-27 13:38:55 -08:00 committed by Christopher Charbonneau Wells
parent a32cb2e72d
commit 3879898b7d
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,14 @@
class="w-full mb-4" class="w-full mb-4"
@input.debounce.400ms="search($event)" /> @input.debounce.400ms="search($event)" />
<details open> <details open>
<summary>Tags</summary> <summary>Filters</summary>
@foreach($tags as $tag) <div class="my-2 pl-2 p-1 border-blue-200 border-b-2 font-bold">Tags</div>
<a class="m-1 bg-gray-200 hover:bg-gray-300 rounded-full px-2 font-bold text-sm leading-loose cursor-pointer" <div class="flex flex-wrap">
x-on:click="filterByTag($event);">{{ $tag->name }}</a> @foreach($tags as $tag)
@endforeach <a class="m-1 bg-gray-200 hover:bg-gray-300 rounded-full px-2 leading-loose cursor-pointer"
x-on:click="updateFilters($event);">{{ $tag->name }}</a>
@endforeach
</div>
</details> </details>
</div> </div>
<div class="md:w-3/4"> <div class="md:w-3/4">
@ -42,11 +45,9 @@
size: 12, size: 12,
morePages: false, morePages: false,
searchTerm: '{{ $defaultSearch ?? null }}', searchTerm: '{{ $defaultSearch ?? null }}',
filterTag: null, filterTags: [],
reset() { resetPagination() {
this.number = 1; this.number = 1;
this.searchTerm = null;
this.filterTag = null;
this.morePages = false; this.morePages = false;
}, },
loadMore() { loadMore() {
@ -54,9 +55,7 @@
if (this.searchTerm) { if (this.searchTerm) {
url += `&filter[search]=${this.searchTerm}`; url += `&filter[search]=${this.searchTerm}`;
} }
if (this.filterTag) { this.filterTags.every(tag => url += `&filter[tags.all][]=${tag}`)
url += `&filter[tags]=${this.filterTag}`;
}
fetch(url) fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -71,15 +70,26 @@
}); });
}, },
search(e) { search(e) {
this.reset(); this.resetPagination();
if (e.target.value !== '') { if (e.target.value !== '') {
this.searchTerm = e.target.value; this.searchTerm = e.target.value;
} }
else {
this.searchTerm = null;
}
this.loadMore(); this.loadMore();
}, },
filterByTag(e) { updateFilters(e) {
this.reset(); this.resetPagination();
this.filterTag = e.target.text; const newTag = e.target.text;
if (this.filterTags.includes(newTag)) {
this.filterTags = this.filterTags.filter(tag => tag !== newTag)
e.target.classList.remove('bg-gray-600', 'text-white');
}
else {
this.filterTags.push(newTag)
e.target.classList.add('bg-gray-600', 'text-white');
}
this.loadMore(); this.loadMore();
} }
} }