potato-launcher/src/js/components/filter.riot

<potato-filter>
    <div class="{ getFilterCssClasses('filter') }" if={ this.state.tags.length > 0 }>
        <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) => { handleTagToggle(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) => { handleTagToggle(event, index) }}>
                { tag.name }
                <svg class="{ getTagCssClasses('icon', tag, true) }">
                    <use xlink:href="symbol-defs.svg#icon-checkbox" />
                </svg>
                <svg class="{ getTagCssClasses('icon', tag) }">
                    <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'

        /**
         *  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
         *  @link https://gitea.node001.net/HerrHase/potato-launcher.git
         *
         */

        export default {
            state: {
                tags: [],
                selected: [],
                isOpen: false
            },

            /**
             *
             *
             */
            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
                ]

                if (this.state.isOpen === true) {
                    classes.push('filter--open')
                }

                return classes.join(' ')
            },

            /**
             *  get css for tag
             *
             *  @param  {string} defaultCssClass
             *  @param  {object} tag
             *  @param  {mixed}  parameter
             *  @return {string}
             */
            getTagCssClasses(defaultCssClass, tag, parameter = undefined) {
                const classes = [
                    defaultCssClass
                ]

                if (tag.selected === parameter) {
                    classes.push('hidden')
                }

                return classes.join(' ')
            },

            /**
             *  toggle tag, if selected or not
             *
             *  @param  {object} event
             *  @param  {integer} 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)
                } else {
                    const selectedIndex = this.state.selected.indexOf(this.state.tags[index].name)

                    // 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()
            },

            handleOpen(event) {
                if (this.state.isOpen === true) {
                    this.state.isOpen = false
                } else {
                    this.state.isOpen = true
                }

                this.update()
            }
        }

    </script>
</potato-filter>