From beeeb7cb8bfe69ed9301e0c5827b090a33cb7aa8 Mon Sep 17 00:00:00 2001
From: gltron <thomasblc@free.fr>
Date: Sat, 2 May 2020 19:51:49 +0200
Subject: [PATCH] Added search filters & model page
---
src/App.vue | 1 -
src/components/Filters.vue | 30 ++++++++++++++++++++++++------
src/components/ModelCard.vue | 17 ++++++++++++-----
src/components/Navbar.vue | 4 ++--
src/router/index.js | 6 ++++++
src/views/Home.vue | 1 +
src/views/Model.vue | 33 +++++++++++++++++++++++++++++++++
src/views/Search.vue | 32 +++++++++++++++++++++++++++++---
8 files changed, 107 insertions(+), 17 deletions(-)
create mode 100644 src/views/Model.vue
diff --git a/src/App.vue b/src/App.vue
index abf72b8..5305d28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,6 @@ export default {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
color: #2c3e50;
}
</style>
diff --git a/src/components/Filters.vue b/src/components/Filters.vue
index d5918ad..d6101fe 100644
--- a/src/components/Filters.vue
+++ b/src/components/Filters.vue
@@ -1,9 +1,15 @@
<template>
<b-menu>
- <div >
- <b-menu-list v-for="tag in tags" v-bind:key="tag.name">
+ <div>
+ <b-menu-list label="Performance">
+ <b-slider lazy></b-slider>
+ </b-menu-list>
+ <b-menu-list v-for="tag in tags" v-bind:key="tag.name" :label="tag.name">
<div v-for="type in tag.types" v-bind:key="type" class="field">
- <b-checkbox>{{type}}</b-checkbox>
+ <b-checkbox
+ :native-value="type"
+ v-model="checkboxGroup"
+ @input="changeTag">{{type}}</b-checkbox>
</div>
</b-menu-list>
</div>
@@ -13,10 +19,22 @@
<script>
export default {
name: 'Filters',
- props: ['tags']
+ props: ['tags'],
+ data () {
+ return {
+ checkboxGroup: []
+ }
+ },
+ methods: {
+ changeTag () {
+ this.$emit('setTags', this.checkboxGroup)
+ }
+ }
}
</script>
-<style>
-
+<style scoped>
+.menu {
+ margin: 15px;
+}
</style>
diff --git a/src/components/ModelCard.vue b/src/components/ModelCard.vue
index 579af09..3b909e7 100644
--- a/src/components/ModelCard.vue
+++ b/src/components/ModelCard.vue
@@ -1,5 +1,5 @@
<template>
- <div class="box">
+ <a class="box" v-on:click="onClick">
<article class="media">
<figure></figure>
</article>
@@ -13,20 +13,27 @@
{{model.shortDescription}}
</p>
<b-taglist>
- <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.type}}</b-tag>
+ <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
</b-taglist>
</div>
</div>
- </div>
+ </a>
</template>
<script>
export default {
name: 'ModelCard',
- props: ['model']
+ props: ['model'],
+ methods: {
+ onClick () {
+ this.$router.push({ name: 'Model', params: { model: this.model } })
+ }
+ }
}
</script>
<style>
-
+.box {
+ margin-bottom: 10px;
+}
</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 89be3e7..111864a 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -15,7 +15,7 @@
type="search"
icon="magnify"
v-model="search"
- v-on:keyup.enter="onSearch"
+ v-on:keyup.enter.native="onSearch"
>
</b-input>
</b-field>
@@ -55,7 +55,7 @@ export default {
},
methods: {
onSearch () {
-
+ this.$router.push({ name: 'Search', query: { n: this.search } })
}
}
}
diff --git a/src/router/index.js b/src/router/index.js
index acc2ad2..89b258c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,12 @@ const routes = [
path: '/search',
name: 'Search',
component: () => import('../views/Search.vue')
+ },
+ {
+ path: '/model',
+ name: 'Model',
+ component: () => import('../views/Model.vue'),
+ props: true
}
]
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 09c5697..43da2f9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -19,6 +19,7 @@ export default {
.home {
padding-top: 50px;
+ text-align: center;
}
</style>
diff --git a/src/views/Model.vue b/src/views/Model.vue
new file mode 100644
index 0000000..85f171c
--- /dev/null
+++ b/src/views/Model.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="model container">
+ <div class="title">
+ {{model.name}}
+ </div>
+ <div class="content">
+ <p>
+ <strong></strong>
+ <br>
+ <small>{{model.author}}</small> - <small>{{model.modificationDate}}</small>
+ <br>
+ {{model.shortDescription}}
+ </p>
+ <hr>
+ <b-taglist>
+ <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
+ </b-taglist>
+ <hr>
+ {{model.longDescription}}
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Model',
+ props: ['model']
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index bd20d68..f3839ec 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -2,7 +2,7 @@
<div class="search container">
<div class="columns">
<div class="column">
- <Filters v-bind:tags="tags"/>
+ <Filters v-bind:tags="tags" v-on:setTags="getModels"/>
</div>
<div v-if="models" class="column is-four-fifths">
<div v-for="model in models" v-bind:key="model.name">
@@ -31,6 +31,10 @@ export default {
return {
tags: '',
models: true,
+ paramTags: '',
+ paramSearch: '',
+ resultSize: 10,
+ page: 1,
isLoading: true
}
},
@@ -40,6 +44,14 @@ export default {
this.isLoading = false
},
methods: {
+ setParams (tags) {
+ const searchParam = this.$route.query.n
+ var tagsParam
+ if (tags) tagsParam = tags
+ else tagsParam = this.$route.query.t
+
+ this.$router.push({ name: 'Search', query: { n: searchParam, t: tagsParam } })
+ },
async getTags () {
const url = this.$serverurl + 'tags'
const response = await fetch(url)
@@ -49,8 +61,22 @@ export default {
return null
}
},
- async getModels () {
- const url = this.$serverurl + 'search'
+ async getModels (tags) {
+ this.setParams(tags)
+ const url = new URL(this.$serverurl + 'search')
+ const params = new URLSearchParams()
+ const nameParam = this.$route.query.n
+ var tagsParam = this.$route.query.t
+
+ if (nameParam) params.append('n', nameParam)
+ if (tagsParam) params.append('t', tagsParam)
+
+ params.append('size', this.resultSize)
+ params.append('page', this.page)
+
+ console.log('get models ' + nameParam + ' + ' + tags)
+
+ url.search = params
const response = await fetch(url)
try {
return await response.json()
--
GitLab