65 lines
2.0 KiB
Svelte
65 lines
2.0 KiB
Svelte
<script>
|
|
import { productsView, products, tags, filters } from '$lib/stores';
|
|
import { normalize, filterByRating, filterByCat } from '$helpers';
|
|
export let reset;
|
|
let { selectedCat, selectedRating } = $filters;
|
|
|
|
const stars = ['⭐ ⬆', '⭐⭐ ⬆', '⭐⭐⭐ ⬆', '⭐⭐⭐⭐ ⬆', '⭐⭐⭐⭐⭐ ⬆'];
|
|
|
|
const filter = ({ target: { name, value } }) => {
|
|
if (Number(value) === 0) {
|
|
reset();
|
|
|
|
return;
|
|
}
|
|
switch (normalize(name)) {
|
|
case 'rating':
|
|
if (selectedCat)
|
|
productsView.set(filterByCat(filterByRating($products, value), selectedCat, $tags));
|
|
else productsView.set(filterByRating($products, value));
|
|
break;
|
|
case 'category':
|
|
if (selectedRating)
|
|
productsView.set(filterByRating(filterByCat($products, value, $tags), selectedRating));
|
|
else productsView.set(filterByCat($products, value, $tags));
|
|
break;
|
|
}
|
|
};
|
|
|
|
const { container, filterBar, filterTitle } = {
|
|
container: 'flex flex-col text-sm h-auto mb-4 mr-6 mt-4',
|
|
filterBar: 'pl-8 p-2 pr-2 flex justify-between',
|
|
filterTitle: 'font-bold',
|
|
};
|
|
</script>
|
|
|
|
<div class={container}>
|
|
<div class={filterBar}>
|
|
<div class={filterTitle}>Filter</div>
|
|
<button on:click={reset}> ✖️ </button>
|
|
</div>
|
|
|
|
<select on:change={filter} class={`p-1 pl-9 mr-12 w-full focus:outline-none ${$filters.selectedCat? 'dither':''}`}
|
|
name="category" bind:value={$filters.selectedCat}>
|
|
<option select="selected" value={0}>Category</option>
|
|
{#each $tags as tag (tag.name)}
|
|
<option value={tag.name}>{tag.name}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<select on:change={filter} class={`p-1 pl-9 mr-12 w-full focus:outline-none ${$filters.selectedRating? 'dither':''}`}
|
|
name="rating" bind:value={$filters.selectedRating}>
|
|
<option select="selected" value={0}>Rating</option>
|
|
{#each stars as starValue, i (starValue)}
|
|
<option value={i + 1}>{starValue}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<style>
|
|
select:hover {
|
|
background-image: url('dither.gif');
|
|
background-repeat: repeat;
|
|
}
|
|
</style>
|