-
Notifications
You must be signed in to change notification settings - Fork 103
/
Filter.svelte
62 lines (52 loc) · 1.97 KB
/
Filter.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script lang="typescript">
import { TogglableButton, FilterModal, FilterItem, Modal } from 'shared/components'
import type { Filter } from '@core/wallet/interfaces/filter/filter.interface'
import { deepCopy } from '@core/utils'
import type { Writable } from 'svelte/store'
export let filterStore: Writable<Filter>
let filter: Filter = deepCopy($filterStore)
let filterActive = false
let modal: Modal
let openFilterItemIndex = -1
function onSetFilters(): void {
$filterStore = deepCopy(filter)
filterActive = false
}
function onClose(): void {
filter = deepCopy($filterStore)
filterActive = false
}
function toggleFilterItem(index: number): void {
if (openFilterItemIndex === index) {
openFilterItemIndex = -1
} else {
openFilterItem(index)
}
}
function openFilterItem(index: number): void {
openFilterItemIndex = index
}
$: isChanged = JSON.stringify($filterStore) !== JSON.stringify(filter)
$: filterActive = modal?.isOpened()
$: activeFilterCount = Object.keys($filterStore).filter((f) => $filterStore[f].active).length
</script>
<div class="h-6 relative">
<TogglableButton icon="filter" bind:active={filterActive} onClick={modal?.toggle} />
{#if activeFilterCount}
<filter-badge
class="inline-flex items-center justify-center h-3 w-3 -ml-2 -mt-0.5 absolute rounded-full bg-blue-500 text-white text-8"
>
{activeFilterCount}
</filter-badge>
{/if}
<FilterModal bind:modal bind:filter {isChanged} {onSetFilters} {onClose}>
{#each Object.keys(filter) as filterUnit, index}
<FilterItem
bind:filterUnit={filter[filterUnit]}
on:toggle={() => toggleFilterItem(index)}
on:open={() => openFilterItem(index)}
isOpen={openFilterItemIndex === index}
/>
{/each}
</FilterModal>
</div>