Added pagination & improved search logic

src/components/Comments.vue

 <template>
-  <div class="comments">
+  <div class="comments" v-if="comments">
     <h1 class="title is-5">{{comments.length}} commentaires</h1>
     <article class="media" v-for="comment in comments" v-bind:key="comment.id">
       <div class="media-content">
@@ -12,35 +12,13 @@
         </div>
       </div>
     </article>
-    <b-loading :is-full-page="false" :active.sync="isLoading"/>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Comments',
-  props: ['id'],
-  data () {
-    return {
-      comments: '',
-      isLoading: true
-    }
-  },
-  async mounted () {
-    this.comments = await this.getComments(this.id)
-    this.isLoading = false
-  },
-  methods: {
-    async getComments (id) {
-      const url = this.$serverurl + 'comment' + '?id=' + id
-      const response = await fetch(url)
-      try {
-        return await response.json()
-      } catch (error) {
-        return null
-      }
-    }
-  }
+  props: ['comments']
 }
 </script>
 

src/components/ModelCard.vue

@@ -27,7 +27,7 @@ export default {
   props: ['model'],
   methods: {
     onClick () {
-      this.$router.push({ name: 'Model', params: { model: this.model } })
+      this.$router.push({ name: 'Model', query: { id: this.model.id } })
     }
   }
 }

src/components/Navbar.vue

@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     onSearch () {
-      this.$router.push({ name: 'Search', query: { n: this.search } })
+      this.$router.push({ name: 'Search', query: { n: this.search }, force: true })
     }
   }
 }

src/router/index.js

@@ -28,8 +28,7 @@ const routes = [
   {
     path: '/model',
     name: 'Model',
-    component: () => import('../views/Model.vue'),
-    props: true
+    component: () => import('../views/Model.vue')
   }
 ]
 

src/views/Model.vue

 <template>
   <div class="model container">
+    <div v-if="isError" class="error">
+      <h1 class="title is-1">Erreur</h1>
+      <h2 class="subtitle">Modèle introuvable</h2>
+    </div>
+    <div v-else>
       <div class="columns box">
         <div class="column is-two-thirds">
           <h1 class="title is-1">{{model.name}}</h1>
@@ -27,8 +32,10 @@
         {{model.longDescription}}
       </div>
       <div class="box">
-      <Comments v-bind:id="model.id"/>
+        <Comments v-bind:comments="model.comments"/>
+      </div>
     </div>
+    <b-loading :is-full-page="false" :active.sync="isLoading"/>
   </div>
 </template>
 
@@ -40,7 +47,30 @@ export default {
   components: {
     Comments
   },
-  props: ['model']
+  data () {
+    return {
+      model: '',
+      isError: false,
+      isLoading: true
+    }
+  },
+  async mounted () {
+    const id = this.$route.query.id
+    this.model = await this.getModel(id)
+    if (this.model == null) this.isError = true
+    this.isLoading = false
+  },
+  methods: {
+    async getModel (id) {
+      const url = this.$serverurl + 'models' + '?id=' + id
+      const response = await fetch(url)
+      try {
+        return await response.json()
+      } catch (error) {
+        return null
+      }
+    }
+  }
 }
 </script>
 
@@ -48,4 +78,8 @@ export default {
 .model {
   padding: 25px;
 }
+.error {
+  margin-top: 50px;
+  text-align: center;
+}
 </style>

src/views/Search.vue

@@ -2,12 +2,15 @@
   <div class="search container">
     <div class="columns">
       <div class="column">
-        <Filters v-bind:tags="tags" v-on:setTags="getModels"/>
+        <h1 class="title is-6 filterTitle">Filtres</h1>
+        <Filters v-bind:tags="tags" v-on:setTags="refreshResults"/>
       </div>
-      <div v-if="models" class="column is-four-fifths">
-        <div v-for="model in models" v-bind:key="model.name">
+      <div v-if="result" class="column is-four-fifths">
+        <h1 class="title is-6">{{result.total}} résultats - page {{result.page}}</h1>
+        <div v-for="model in result.models" v-bind:key="model.name">
           <ModelCard v-bind:model="model"/>
         </div>
+        <b-pagination :total="result.total" :current.sync="result.page" :per-page="resultSize" @change="changePage"/>
       </div>
       <div v-else class="column is-four-fifths">
         <h1 class="title">no modelo</h1>
@@ -30,9 +33,10 @@ export default {
   data () {
     return {
       tags: '',
-      models: true,
+      result: true,
       paramTags: '',
       paramSearch: '',
+      paramPerf: '',
       resultSize: 10,
       page: 1,
       isLoading: true
@@ -40,21 +44,18 @@ export default {
   },
   async mounted () {
     this.tags = await this.getTags()
-    this.models = await this.getModels()
+    this.result = await this.getResult()
     this.isLoading = false
   },
   methods: {
-    setParams (tags, perfValue) {
-      const searchParam = this.$route.query.n
-      var tagsParam
-      if (tags) tagsParam = tags
-      else tagsParam = this.$route.query.t
-
-      var perfParam
-      if (perfValue) perfParam = perfValue
-      else perfParam = this.$route.query.p
-
-      this.$router.push({ name: 'Search', query: { n: searchParam, t: tagsParam, p: perfParam } })
+    async changePage (page) {
+      this.page = page
+      this.result = await this.getResult()
+    },
+    async setTags (tags, perfValue) {
+      this.paramTags = tags
+      this.paramPerf = perfValue
+      this.result = await this.getResult()
     },
     async getTags () {
       const url = this.$serverurl + 'tags'
@@ -65,22 +66,19 @@ export default {
         return null
       }
     },
-    async getModels (tags, perfValue) {
-      this.setParams(tags, perfValue)
+    async getResult () {
       const url = new URL(this.$serverurl + 'search')
       const params = new URLSearchParams()
       const nameParam = this.$route.query.n
-      const tagsParam = this.$route.query.t
-      const perfParam = this.$route.query.p
 
-      if (nameParam) params.append('n', nameParam)
-      if (tagsParam) params.append('t', tagsParam)
-      if (perfParam) params.append('p', perfParam)
+      if (nameParam != null) params.append('q', nameParam)
+      if (this.paramTags != null) params.append('tag', this.paramTags)
+      if (this.paramPerf != null) params.append('perf', this.paramPerf)
 
       params.append('size', this.resultSize)
       params.append('page', this.page)
 
-      console.log('get models ' + nameParam + ' + ' + tags)
+      console.log('get models ' + nameParam + ' + ' + this.paramPerf + ' + ' + this.paramTags)
 
       url.search = params
       const response = await fetch(url)
@@ -98,4 +96,8 @@ export default {
 .search {
   padding-top: 50px;
 }
+
+.filterTitle {
+  margin-left: 15px;
+}
 </style>