Added search filters & model page

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>

src/components/Filters.vue

 <template>
   <b-menu>
     <div>
-      <b-menu-list v-for="tag in tags" v-bind:key="tag.name">
+      <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>

src/components/ModelCard.vue

 <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>

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 } })
     }
   }
 }

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
   }
 ]
 

src/views/Home.vue

@@ -19,6 +19,7 @@ export default {
 
 .home {
   padding-top: 50px;
+  text-align: center;
 }
 
 </style>

src/views/Model.vue

+<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>

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()