Skip to content

Instantly share code, notes, and snippets.

@cristoferdomingues
Created August 23, 2017 17:40
Show Gist options
  • Select an option

  • Save cristoferdomingues/53fcbd25428d88ca4084857177c1050b to your computer and use it in GitHub Desktop.

Select an option

Save cristoferdomingues/53fcbd25428d88ca4084857177c1050b to your computer and use it in GitHub Desktop.
Filter Menu in Vuw
<template>
<q-list>
<div class="light-paragraph sansys-menu">
<q-list-header>
<div class="menu-search">
<q-search placeholder="Buscar Módulos" v-model="menuFilter"></q-search>
</div>
</q-list-header>
<menu-item v-for="item in filteredModules" :item="item" :key="item.id || item.name" :config="menuItemConfig"></menu-item>
</div>
</q-list>
</template>
<script>
import menuItem from './MenuItem.vue'
import _ from 'lodash';
import { QList, QListHeader, QSearch } from 'quasar'
export default {
data() {
return {
menuFilter: ""
}
},
props: {
links: {
type: Array,
required: true
},
contractedHtml: {
type: String,
required: true,
default: '<i class="fa fa-chevron-right"></i>'
},
expandedHtml: {
type: String,
required: true,
default: '<i class="fa fa-chevron-down"></i>'
}
},
components: { menuItem, QSearch, QList, QListHeader },
watch: {
'$route.path'() {
Object.keys(this.links).forEach(parentName => { this.setParentVisibilityBasedOnRoute(this.links[parentName]) })
}
},
computed: {
currentRoutePath() {
return this.$route.path
},
menuItemConfig() {
return {
contracted: '<i class="fa fa-chevron-right"></i>',
expanded: '<i class="fa fa-chevron-down"></i>',
labelName: 'name',
nodeName: 'children',
expandFlagName: 'expanded'
}
},
filteredModules() {
let filterMatch = (match) => match.toUpperCase().includes(this.menuFilter.toUpperCase());
let doFilter = (link) => {
if (filterMatch(link[this.menuItemConfig.labelName])) return true
if (link[this.menuItemConfig.nodeName] && link[this.menuItemConfig.nodeName].length > 0) return (link[this.menuItemConfig.nodeName] = link[this.menuItemConfig.nodeName].map((childObj) => Object.assign({}, childObj)).filter(doFilter)).length
}
return this.links
.map((linkObj) => Object.assign({}, linkObj))
.filter(doFilter)
}
},
methods: {
setParentVisibilityBasedOnRoute(parent) {
parent.routes.forEach(item => {
if (this.$route.path === item.route) {
parent.show = true
return
}
})
},
replaceUnderlineToSpace(text) {
while (text.indexOf('_') !== -1) {
text = text.replace('_', ' ')
}
return text
},
showHideToggle(link) {
link.show = !link.show
},
}
}
</script>
<style scoped>
.sansys-menu .q-search {
padding: 13px 13px 0px 13px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment