gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 Rewrite findByTags & add Search

Browse Source
This commit is contained in:
Kevin Van Der Werff
2019-10-21 13:46:33 +02:00
parent 240f82f339
commit 0d3a0489ae
5 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Search.vue
View File

@@ -1,7 +1,27 @@
<template lang="pug">
input.search(placeholder="Search (does not work currently, sorry)")
input.search(v-model="searchInput" type="text" placeholder="Search (does not work currently, sorry)")
</template>
<script>
export default {
data() {
return {
searchInput: '',
}
},
watch: {
searchInput(e) {
console.log(this.$store.getters['data/findByTags']([e]))
},
},
methods: {
updateSearchResults(e) {
console.log(e)
},
},
}
</script>
<style lang="scss">
input {
padding: .5rem 1.5rem .5rem 1.5rem;
@@ -13,5 +33,4 @@ input {
outline:none;
}
}
</style>

3
layouts/default.vue
View File

@@ -2,6 +2,7 @@
.layout
Github
Logo
Search
Sidebar
nuxt.content
</template>
@@ -73,7 +74,7 @@ h1 {
grid-template-columns: fit-content(200px) auto;
grid-gap: 1rem;
grid-template-areas:
'logo .'
'logo search'
'sidebar content';
}

46
package-lock.json generated
View File

@@ -4456,8 +4456,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@@ -4475,13 +4474,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4494,18 +4491,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4608,8 +4602,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -4619,7 +4612,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4632,20 +4624,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4662,7 +4651,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4735,8 +4723,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -4746,7 +4733,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4822,8 +4808,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4853,7 +4838,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4871,7 +4855,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4910,13 +4893,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
@@ -8895,6 +8876,11 @@
"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
},
"ramda": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
"integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
"cross-env": "^5.2.0",
"nuxt": "^2.4.0",
"nuxt-clipboard2": "^0.2.1",
"ramda": "^0.26.1",
"vue-i18n": "^8.11.2"
},
"devDependencies": {

38
store/data.js
View File

@@ -1,4 +1,5 @@
import resources from '../resources'
import { prop, compose, flatten, map, filter, isEmpty, not, any, includes, curry } from 'ramda'
// Polyfill for flat
if (!Array.prototype.flat) {
@@ -21,13 +22,13 @@ if (!Array.prototype.flat) {
})
}
/**
* Check if list 2 has an element of list 1.
* includesElOf(list1, list2) -> read as list1 includesElOf list2.
* @param {any[]} list1
* @param {any[]} list2
*/
const includesElOf = (list1, list2) => list1.some(element => list2.includes(element))
// True if list2 has element that appears in list1
// includesElOf([1, 2], [3]) -> false
// includesElOf([1, 2])([3]) -> false
// includesElOf([1, 2], [2]) -> true
// includesElOf([1, 2])([2]) -> true
// includesElOf :: [a] -> [a] -> Bool
// const includesElOf = curry((list1, list2) => any(flip(includes)(list2), list1))
export const state = () => ({
resources: resources.map(category => ({
@@ -52,15 +53,28 @@ export const state = () => ({
export const getters = {
tags: state => state.tags,
resources: state => state.resources,
findResources: state => title => {
return Object.assign(state.resources.find(resource => resource.title.toLowerCase() === title.toLowerCase()))
findCategory: state => categoryTitle => {
return Object.assign(state.resources.find(category => category.title.toLowerCase() === categoryTitle.toLowerCase()))
},
findByTags: state => tags => {
const flat = state.resources.map(category => category.resources).flat()
return flat.filter(resource => resource.tags && includesElOf(resource.tags, tags))
// true if list2 has element that appears in list1 else false
// includesElOf [a] -> [a] -> Bool
const includesElOf = curry((list1, list2) => any(el => includes(el, list2), list1))
// getAllResources :: [Category] -> [Resource]
const getAllResources = compose(flatten, map(prop('resources')))
// tagsNotEmpty :: [Resource] -> Bool
const tagsNotEmpty = compose(not, isEmpty, prop('tags'))
// containsTags :: [Resource] -> [Resource]
const containsTags = filter(tagsNotEmpty)
// findResourcesByTag :: [Resource] -> [Resource]
const findResourcesByTag = filter(compose(includesElOf(tags), prop('tags')))
// getDesiredResources :: [Category] -> [Resource]
const getDesiredResources = compose(findResourcesByTag, containsTags, getAllResources)
return getDesiredResources(state.resources)
},
sortByTitle: (_, getters) => title => {
const category = getters.findResources(title)
const category = getters.findCategory(title)
const clone = [...category.resources]
return {
...category,