add tags filter in LibraryList & LibraryMap
This commit is contained in:
@@ -18,10 +18,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// FIXME let events bubble
|
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
|
||||||
import { searchInNode } from '@/store/utils'
|
import { searchInNode, tagsInNode } from '@/store/utils'
|
||||||
import { NodeView } from '@/components/nodes'
|
import { NodeView } from '@/components/nodes'
|
||||||
|
|
||||||
|
|
||||||
@@ -33,14 +32,16 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['orderedTextsDepart', 'search']),
|
...mapGetters(['orderedTextsDepart', 'search', 'tags']),
|
||||||
|
|
||||||
filteredNodes () {
|
filteredNodes () {
|
||||||
if (!this.orderedTextsDepart) return {}
|
if (!this.orderedTextsDepart) return {}
|
||||||
const nodesGroups = {}
|
const nodesGroups = {}
|
||||||
const search = this.search.toLowerCase()
|
const search = this.search.toLowerCase()
|
||||||
Object.entries(this.orderedTextsDepart).forEach(([char, nodes]) => {
|
Object.entries(this.orderedTextsDepart).forEach(([char, nodes]) => {
|
||||||
const filteredNodes = nodes.filter(node => searchInNode(search, node))
|
const filteredNodes = nodes
|
||||||
|
.filter(node => tagsInNode(this.tags, node.tags))
|
||||||
|
.filter(node => searchInNode(search, node))
|
||||||
if (filteredNodes.length) {
|
if (filteredNodes.length) {
|
||||||
nodesGroups[char] = filteredNodes
|
nodesGroups[char] = filteredNodes
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ import { randomUniform } from 'd3'
|
|||||||
import { forceSimulation, forceCollide, forceManyBody } from 'd3-force'
|
import { forceSimulation, forceCollide, forceManyBody } from 'd3-force'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
|
||||||
import { searchInNode } from '@/store/utils'
|
import { searchInNode, tagsInNode } from '@/store/utils'
|
||||||
import { MapZoom } from '@/components/layouts'
|
import { MapZoom } from '@/components/layouts'
|
||||||
import { NodeView } from '@/components/nodes'
|
import { NodeView } from '@/components/nodes'
|
||||||
|
|
||||||
@@ -42,13 +42,15 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['search']),
|
...mapGetters(['search', 'tags']),
|
||||||
|
|
||||||
filteredNodes () {
|
filteredNodes () {
|
||||||
if (!this.nodes) return
|
if (!this.nodes) return
|
||||||
const search = this.search.toLowerCase()
|
const search = this.search.toLowerCase()
|
||||||
this.nodes.forEach(node => {
|
this.nodes.forEach(node => {
|
||||||
Object.assign(node, { hidden: !searchInNode(search, node.data) })
|
Object.assign(node, {
|
||||||
|
hidden: !(tagsInNode(this.tags, node.data.tags) && searchInNode(search, node.data))
|
||||||
|
})
|
||||||
})
|
})
|
||||||
return this.nodes
|
return this.nodes
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-1
@@ -124,10 +124,16 @@ export function searchInNode (search, node) {
|
|||||||
if (key === 'authors') {
|
if (key === 'authors') {
|
||||||
match = node[key].some(author => author.name.toLowerCase().includes(search))
|
match = node[key].some(author => author.name.toLowerCase().includes(search))
|
||||||
} else {
|
} else {
|
||||||
console.log(node[key].toLowerCase(), search)
|
|
||||||
match = node[key].toLowerCase().includes(search)
|
match = node[key].toLowerCase().includes(search)
|
||||||
}
|
}
|
||||||
if (match) return true
|
if (match) return true
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function tagsInNode (tags, nodeTags) {
|
||||||
|
if (tags.length === 0) return true
|
||||||
|
if (!nodeTags || nodeTags.length === 0) return false
|
||||||
|
return tags.every(tag => nodeTags.some(nodeTag => nodeTag.name === tag))
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user