Plugin Manager with checkboxes and reactive filter

src/app/components/plugin-manager-component.js

-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-
-// const styleguide = require('../ui/styles-guide/theme-chooser')
-// const styles = styleguide.chooser()
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
 
 const EventEmitter = require('events')
 
+const css = csjs`
+  .pluginManager {
+    padding: 10px;
+  }
+`
+
 class PluginManagerComponent {
 
   constructor () {
@@ -14,6 +17,7 @@ class PluginManagerComponent {
       root: null,
       items: {}
     }
+    this.filter = ''
   }
 
   profile () {
@@ -40,103 +44,72 @@ class PluginManagerComponent {
     this.store.event.on('remove', (entity) => { this.reRender() })
   }
 
-  render () {
-    let activeMods = yo`
-    <div id='activePlugs' class=${css.activePlugins}>
-      <h3>Active Modules</h3>
-    </div>
-    `
-    let inactiveMods = yo`
-    <div id='inActivePlugs' class=${css.inactivePlugins}>
-      <h3>Inactive Modules</h3>
-    </div>
-    `
-    let searchbox = yo`
-    <input id='filter_plugins' placeholder='Search'>
-    `
-    var rootView = yo`
-      <div id='pluginManager' class=${css.plugins_settings} >
-        <h2>Plugin Manager</h2>
-        ${searchbox}
-        ${activeMods}
-        ${inactiveMods}
-      </div>
-    `
-
-    searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event.target) })
-
-    var modulesActiveNotReq = this.store.getActives().filter(({profile}) => !profile.required)
-    this.sortObject(modulesActiveNotReq)
-
-    if (modulesActiveNotReq.length > 0) {
-      modulesActiveNotReq.forEach((mod) => {
-        activeMods.appendChild(this.renderItem(mod.profile.name))
-      })
-      activeMods.style.display = 'block'
-    } else {
-      activeMods.style.display = 'none'
-    }
-
-    var modulesAllNotReq = this.store.getAll().filter(({profile}) => !profile.required)
-    this.sortObject(modulesAllNotReq)
-    modulesAllNotReq.forEach((mod) => {
-      if (!modulesActiveNotReq.includes(mod)) {
-        inactiveMods.appendChild(this.renderItem(mod.profile.name))
-      }
-    })
-    if (!this.views.root) {
-      this.views.root = rootView
-    }
-    return rootView
-  }
-
-  searchBox () {
-    if (this.views.root) {
-      return this.views.root.querySelector('#filter_plugins')
-    }
-    return null
-  }
-
-  sortObject (obj) {
-    obj.sort((a, b) => {
-      var textA = a.profile.name.toUpperCase()
-      var textB = b.profile.name.toUpperCase()
-      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0
-    })
-  }
-
   renderItem (item) {
-    let ctrBtns
-
     const mod = this.store.getOne(item)
     if (!mod) return
-    let displayName = (mod.profile.displayName) ? mod.profile.displayName : mod.profile.name
-    let action = () => {
-      if (this.store.isActive(item)) {
-        this.appManager.deactivateOne(item)
-      } else {
-        this.appManager.activateOne(item)
-      }
-    }
-
-    ctrBtns = yo`<div id='${mod.profile.name}Activation'>
-        <button class='btn btn-sm btn-primary' onclick=${(event) => { action(event) }} >${this.store.isActive(item) ? 'deactivate' : 'activate'}</button>
-        </div>`
+    const isActive = this.store.actives.includes(mod.profile.name)
+    const displayName = (mod.profile.displayName) ? mod.profile.displayName : mod.profile.name
 
-        // <div id='${mod.profile.name}Activation' class="custom-control custom-switch">
-        //   <input type="checkbox" class="custom-control-input" id="customSwitch1">
-        //   <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
-        // </div>
+    const input = isActive
+      ? yo`<input onchange="${_ => this.appManager.deactivateOne(item)}" checked type="checkbox" class="form-check-input">`
+      : yo`<input onchange="${_ => this.appManager.activateOne(item)}" type="checkbox" class="form-check-input">`
 
     return yo`
-    <div id=${mod.profile.name} title="${item}" class="card ${css.plugin}" >
-      <h3>${displayName}</h3>
-      ${mod.profile.description}
-      ${ctrBtns}
-    </div>
+      <article class="plugin" id="${mod.profile.name}" title="${item}" >
+        <div id="${mod.profile.name}Activation" class="form-check row align-items-center">
+          ${input}
+          <h6 class="form-check-label">${displayName}</h6>
+        </div>
+        <p>${mod.profile.description}</p>
+      </article>
     `
   }
 
+  render () {
+    // Filtering helpers
+    const isFiltered = ({profile}) => profile.name.toLowerCase().includes(this.filter)
+    const isNotRequired = ({profile}) => !profile.required
+    const sortByName = (a, b) => {
+      const nameA = a.profile.name.toUpperCase()
+      const nameB = b.profile.name.toUpperCase()
+      return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+    }
+
+    // Filter all active and inactive modules that are not required
+    const { actives, inactives } = this.store.getAll()
+      .filter(isFiltered)
+      .filter(isNotRequired)
+      .sort(sortByName)
+      .reduce(({actives, inactives}, {profile}) => {
+        return this.store.actives.includes(profile.name)
+          ? { actives: [...actives, profile.name], inactives }
+          : { inactives: [...inactives, profile.name], actives }
+      }, { actives: [], inactives: [] })
+
+    const activeTile = actives.length !== 0
+      ? yo`<h3>Active Modules</h3>`
+      : ''
+    const inactiveTile = inactives.length !== 0
+      ? yo`<h3>Inactive Modules</h3>`
+      : ''
+
+    const rootView = yo`
+      <section id="${css.pluginManager}">
+        <h2>Plugin Manager</h2>
+        <hr/>
+        <div class="form-group">
+          <input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder='Search'>
+        </div>
+        ${activeTile}
+        ${actives.map(name => this.renderItem(name))}
+        ${inactiveTile}
+        ${inactives.map(name => this.renderItem(name))}
+      </section>
+    `
+    if (!this.views.root) this.views.root = rootView
+    return rootView
+  }
+
   reRender () {
     if (this.views.root) {
       yo.update(this.views.root, this.render())
@@ -144,59 +117,10 @@ class PluginManagerComponent {
     }
   }
 
-  filterPlugins (target) {
-    if (!target) return
-    let filterOn = target.value.toUpperCase()
-    var nodes = this.views.root.querySelectorAll(`.${css.plugin}`)
-    nodes.forEach((node) => {
-      let h = node.querySelector('h3')
-      let txtValue = h.textContent || h.innerText
-      if (txtValue.toLowerCase().indexOf(filterOn.toLowerCase()) !== -1) {
-        node.style.display = 'block'
-      } else {
-        node.style.display = 'none'
-      }
-    })
+  filterPlugins ({ target }) {
+    this.filter = target.value.toLowerCase()
+    this.reRender()
   }
 }
 
 module.exports = PluginManagerComponent
-
-const css = csjs`
-  .plugins_settings h2 {
-    font-size: 1em;
-    border-bottom: 1px red solid;
-    padding: 10px 20px;
-    font-size: 10px;
-    padding: 10px 20px;
-    text-transform: uppercase;
-    font-weight: normal;
-    background-color: white;
-    margin-bottom: 0;
-  }
-  .plugin {
-    margin: 0;
-    margin-bottom: 2%;
-    padding: 0px 20px 10px;
-  }
-  .plugin h3 {
-    margin-bottom: 5px;
-    font-size: 12px;
-    margin-top: 9px;
-  }
-
-  .plugin button {
-    font-size: 10px;
-  }
-  .activePlugins {
-  }
-
-  .inactivePlugins {
-  }
-  .plugins_settings input {
-    margin: 10px;
-  }
-  .hideIt {
-    display: none;
-  }
-`

src/app/ui/styles-guide/theme-chooser.js

@@ -36,7 +36,7 @@ module.exports = {
     themeStorage.set('theme', theme)
     if (themes[theme]) {
       document.getElementById('theme-link').setAttribute('href', themes[theme])
-    } 
+    }
     // if (theme === 'dark') {
     //   return styleGuideDark()
     // } else if (theme === 'light') {