add tags filter in LibraryList & LibraryMap

This commit is contained in:
axolotle
2021-06-14 17:00:18 +02:00
parent fb7aa12bd9
commit 3c324e0a3c
3 changed files with 17 additions and 8 deletions
+5 -4
View File
@@ -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
} }
+5 -3
View File
@@ -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
View File
@@ -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))
}