alpine JS: Filter + Fetch

product_filter_alpinejs.html

<div class="uk-container">
	<h1>Produkte</h1>

	<div x-data="productsData()">

		<div>
			<div class="uk-button uk-button-secondary" @click.prevent="fetchProductsData(filterparams.cat = 1)">Kategorie 1</div>
			<div class="uk-button uk-button-secondary" @click.prevent="fetchProductsData(filterparams.cat = 2)">Kategorie 2</div>
			<div class="uk-button uk-button-secondary" @click.prevent="fetchProductsData(filterparams.cat = 3)">Kategorie 3</div>
			<div class="uk-button uk-button-secondary" @click.prevent="fetchProductsData(filterparams.cat = 4)">Kategorie 4</div>

			<hr>

			<div>
				<h4>Filter:</h4>
				<label>
					<input class="uk-checkbox" type="checkbox" value="filter_a" x-model="filterparams.filter" @input.debounce="fetchProductsData()">
					Filter A
				</label>
				<label>
					<input class="uk-checkbox" type="checkbox" value="filter_b" x-model="filterparams.filter" @input.debounce="fetchProductsData()">
					Filter B
				</label>
				<label>
					<input class="uk-checkbox" type="checkbox" value="filter_c" x-model="filterparams.filter" @input.debounce="fetchProductsData()">
					Filter C
				</label>
			</div>

			<br>
			Filter: <span x-text="filterparams.filter"></span>

		</div>

		<hr>

		<p id="message">Produkte: <output x-text="message()">0</output></p>

		<div aria-labelledby="message" role="region" tabindex="-1" x-ref="region">
			<ol class="uk-child-width-1-5@l" uk-grid="">
				<template x-for="product in fetchResult.products">
					<li>
						<span x-text="product.product_name"></span><br>
						<span x-text="product.product_artnr"></span>
					</li>
				</template>
			</ol>
		</div>

		<hr>

		<template x-if="fetchResult.getLastPage > fetchResult.getCurrentPage">
			<button class="uk-button uk-button-secondary" @click.prevent="fetchProductsData(filterparams.start = fetchResult.cursor, add = true)">mehr <span x-text="fetchResult.cursor"></span></button>
		</template>

	</div>

</div>

<script>
	document.addEventListener('alpine:init', () => {
		Alpine.data('productsData', () => ({
			filterparams: {
				filter: [],
				cat: 0,
				start: 0,
			},
			fetchResult: {
				products: []
			},
			add: false,
			isLoading: false,
			async fetchProductsData() {
				this.isLoading = true;
				var oldProducts = this.fetchResult.products;
				let fetchparams = new URLSearchParams({
					filter: this.filterparams.filter,
					cat: this.filterparams.cat,
					start: this.filterparams.start
				});
				fetch('index.php?rex-api-call=xhr&do=getProductsJSON&' + fetchparams, {
							method: 'GET',
							mode: 'same-origin',
							credentials: 'same-origin',
							headers: {
								'Accept': 'application/json'
							}
						}
					)
					.then((res) => res.json())
					.then((data) => {
						this.isLoading = false;
						this.fetchResult = data;
						if (this.add) {
							this.fetchResult.products = oldProducts.concat(data.products);
							this.add = false;
							this.filterparams.start = 0;
						}
						else {
							this.fetchResult.products = data.products;
						}
					})
			},
			message() {
				return this.fetchResult.getRowCount;
			},
			init() {
				this.fetchProductsData();
				this.$watch('filterparams.filter', resetfunction => {
					console.log('resetfunction');
					this.filterparams.start = 0;
					this.add = false
				});
			}
		}))
	})
</script>