diff --git a/src/js/components/filter.riot b/src/js/components/filter.riot index 56750c4..479b510 100644 --- a/src/js/components/filter.riot +++ b/src/js/components/filter.riot @@ -1,5 +1,5 @@ -
+
0 }>
0 }> -
- @@ -39,7 +39,8 @@ import appsStore from './../stores/apps.js' /** - * + * filtering apps by tags, showing all available tags as list of buttons + * whith a checkbox icon, after select or deselect update apps * * @author Björn Hase * @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3 @@ -58,7 +59,22 @@ * * */ - getCssClasses(defaultCssClass) { + onMounted() { + tagsStore.on('ready', (data) => { + this.state.tags = data + this.update() + }) + + tagsStore.get() + }, + + /** + * get css for filter + * + * @param {string} defaultCssClass + * @return {string} + */ + getFilterCssClasses(defaultCssClass) { const classes = [ defaultCssClass ] @@ -71,27 +87,35 @@ }, /** + * get css for tag * - * + * @param {string} defaultCssClass + * @param {object} tag + * @param {mixed} parameter + * @return {string} */ - onMounted() { - tagsStore.on('ready', (data) => { - this.state.tags = data - this.update() - }) + getTagCssClasses(defaultCssClass, tag, parameter = undefined) { + const classes = [ + defaultCssClass + ] - tagsStore.get() + if (tag.selected === parameter) { + classes.push('hidden') + } + + return classes.join(' ') }, /** - * toggle + * toggle tag, if selected or not * * @param {object} event * @param {integer} index * */ - handleToggle(event, index) { + handleTagToggle(event, index) { + // if selected is undefined on tags with index if (this.state.tags[index].selected === undefined) { this.state.tags[index].selected = true this.state.selected.push(this.state.tags[index].name) @@ -101,11 +125,13 @@ // delete selected from tags delete this.state.tags[index].selected + // if selctedIndex has value, remove from array if (selectedIndex !== -1) { this.state.selected.splice(selectedIndex, 1) } } + // update filter for store appsStore.filter(this.state.selected) this.update()