You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.0 KiB
126 lines
4.0 KiB
<potato-filter>
|
|
<div class="{ getCssClasses('filter') }">
|
|
<div class="display-flex">
|
|
<button class="button button--open button--icon button--hover-icon-contrast m-bottom-0" onclick={ (event) => { handleOpen(event) }}>
|
|
<svg class="icon icon--big">
|
|
<use xlink:href="symbol-defs.svg#icon-filter" />
|
|
</svg>
|
|
</button>
|
|
<button class="button button--close button--icon button--hover-icon-contrast m-bottom-0" onclick={ (event) => { handleOpen(event) }}>
|
|
<svg class="icon icon--big">
|
|
<use xlink:href="symbol-defs.svg#icon-close" />
|
|
</svg>
|
|
</button>
|
|
<div class="filter__selected m-left-3" if={ state.tags.length > 0 }>
|
|
<button if={ tag.selected === true } class="button m-bottom-0 m-right-3" each={ (tag, index) in state.tags } onclick={ (event) => { handleToggle(event, index) }}>
|
|
{ tag.name }
|
|
<svg class="icon">
|
|
<use xlink:href="symbol-defs.svg#icon-close" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="filter__tags">
|
|
<button class="button" each={ (tag, index) in state.tags } onclick={ (event) => { handleToggle(event, index) }}>
|
|
{ tag.name }
|
|
<svg class="icon { tag.selected ? 'hidden' : '' }">
|
|
<use xlink:href="symbol-defs.svg#icon-checkbox" />
|
|
</svg>
|
|
<svg class="icon { tag.selected === undefined ? 'hidden' : '' }">
|
|
<use xlink:href="symbol-defs.svg#icon-checkbox-checked" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import tagsStore from './../stores/tags.js'
|
|
import appsStore from './../stores/apps.js'
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
|
|
* @link https://gitea.node001.net/HerrHase/potato-launcher.git
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
state: {
|
|
tags: [],
|
|
selected: [],
|
|
isOpen: false
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
getCssClasses(defaultCssClass) {
|
|
const classes = [
|
|
defaultCssClass
|
|
]
|
|
|
|
if (this.state.isOpen === true) {
|
|
classes.push('filter--open')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
onMounted() {
|
|
tagsStore.on('ready', (data) => {
|
|
this.state.tags = data
|
|
this.update()
|
|
})
|
|
|
|
tagsStore.get()
|
|
},
|
|
|
|
/**
|
|
* toggle
|
|
*
|
|
* @param {object} event
|
|
* @param {integer} index
|
|
*
|
|
*/
|
|
handleToggle(event, index) {
|
|
|
|
if (this.state.tags[index].selected === undefined) {
|
|
this.state.tags[index].selected = true
|
|
this.state.selected.push(this.state.tags[index].name)
|
|
} else {
|
|
const selectedIndex = this.state.selected.indexOf(this.state.tags[index].name)
|
|
|
|
// delete selected from tags
|
|
delete this.state.tags[index].selected
|
|
|
|
if (selectedIndex !== -1) {
|
|
this.state.selected.splice(selectedIndex, 1)
|
|
}
|
|
}
|
|
|
|
appsStore.filter(this.state.selected)
|
|
|
|
this.update()
|
|
},
|
|
|
|
handleOpen(event) {
|
|
if (this.state.isOpen === true) {
|
|
this.state.isOpen = false
|
|
} else {
|
|
this.state.isOpen = true
|
|
}
|
|
|
|
this.update()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</potato-filter> |