Plugin Manager with checkboxes and reactive filter

pull/1/head
Grandschtroumpf 6 years ago committed by yann300
parent 47026d1d92
commit eaba9b7165
  1. 212
      src/app/components/plugin-manager-component.js

@ -1,11 +1,14 @@
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,101 +44,70 @@ 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}
<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 () {
@ -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;
}
`

Loading…
Cancel
Save