From 0cc0b83525c346f37c5a2c9ac7d8be396faa2823 Mon Sep 17 00:00:00 2001
From: HerrHase <me@herr-hase.wtf>
Date: Sun, 2 Oct 2022 23:32:34 +0200
Subject: [PATCH] adding comments

---
 src/js/components/filter.riot | 58 +++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 16 deletions(-)

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 @@
 <potato-filter>
-    <div class="{ getCssClasses('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">
@@ -12,7 +12,7 @@
                 </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) }}>
+                <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" />
@@ -21,12 +21,12 @@
             </div>
         </div>
         <div class="filter__tags">
-            <button class="button" each={ (tag, index) in state.tags } onclick={ (event) => { handleToggle(event, index) }}>
+            <button class="button" each={ (tag, index) in state.tags } onclick={ (event) => { handleTagToggle(event, index) }}>
                 { tag.name }
-                <svg class="icon { tag.selected ? 'hidden' : '' }">
+                <svg class="{ getTagCssClasses('icon', tag, true) }">
                     <use xlink:href="symbol-defs.svg#icon-checkbox" />
                 </svg>
-                <svg class="icon { tag.selected === undefined ? 'hidden' : '' }">
+                <svg class="{ getTagCssClasses('icon', tag) }">
                     <use xlink:href="symbol-defs.svg#icon-checkbox-checked" />
                 </svg>
             </button>
@@ -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()