diff --git a/src/components/Comments.vue b/src/components/Comments.vue
index f85f00a05e968ca359d1cf35a83876b497e85568..3253ef447ed8938e6df794232142e0219b8af05d 100644
--- a/src/components/Comments.vue
+++ b/src/components/Comments.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/src/components/ModelCard.vue b/src/components/ModelCard.vue
index fcc04ef53534a8606883d8ac98570ebb2379e563..2981f29c345bc4b8a9a261cfbaeb01bde5c2b530 100644
--- a/src/components/ModelCard.vue
+++ b/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 } })
}
}
}
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 111864a1211ccceee6ae1f7d53c8fcf52792f3d2..6af307fdeb8c1055ee6246c2ac6d683752b685ff 100644
--- a/src/components/Navbar.vue
+++ b/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 })
}
}
}
diff --git a/src/router/index.js b/src/router/index.js
index 89b258cfe4a0f54bb40cb8cbc85c225deba71fff..9d5e6e3f9bce28d40f08e3b052249e14e7777636 100644
--- a/src/router/index.js
+++ b/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')
}
]
diff --git a/src/views/Model.vue b/src/views/Model.vue
index 041e45e3298a73f2e5ae21a79db632b1fe1194bd..f7427e02d428b9415b23dd006b95b9c560a6c406 100644
--- a/src/views/Model.vue
+++ b/src/views/Model.vue
@@ -1,34 +1,41 @@
<template>
<div class="model container">
- <div class="columns box">
- <div class="column is-two-thirds">
- <h1 class="title is-1">{{model.name}}</h1>
- <h2 class="subtitle">{{model.shortDescription}}</h2>
- <b-taglist>
- <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
- <b-tag type="is-info">{{model.performance}}%</b-tag>
- </b-taglist>
+ <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>
+ <h2 class="subtitle">{{model.shortDescription}}</h2>
+ <b-taglist>
+ <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
+ <b-tag type="is-info">{{model.performance}}%</b-tag>
+ </b-taglist>
+ </div>
+ <div class="column">
+ <h1 class="title is-4">{{model.vote}} votes <b-button size="is-small" icon-left="heart-outline" style="top:-2px"/></h1>
+ <small>Auteur: </small><strong>{{model.author}}</strong>
+ <br>
+ <small>Date d'ajout: </small><strong>{{model.addedDate}}</strong>
+ <br>
+ <small>Dernière modification: </small><strong>{{model.modificationDate}}</strong>
+ <br>
+ <br>
+ <b-button type="is-primary" size="is-medium" icon-left="download">
+ Télécharger
+ </b-button>
+ </div>
</div>
- <div class="column">
- <h1 class="title is-4">{{model.vote}} votes <b-button size="is-small" icon-left="heart-outline" style="top:-2px"/></h1>
- <small>Auteur: </small><strong>{{model.author}}</strong>
- <br>
- <small>Date d'ajout: </small><strong>{{model.addedDate}}</strong>
- <br>
- <small>Dernière modification: </small><strong>{{model.modificationDate}}</strong>
- <br>
- <br>
- <b-button type="is-primary" size="is-medium" icon-left="download">
- Télécharger
- </b-button>
+ <div class="box">
+ {{model.longDescription}}
+ </div>
+ <div class="box">
+ <Comments v-bind:comments="model.comments"/>
</div>
</div>
- <div class="box">
- {{model.longDescription}}
- </div>
- <div class="box">
- <Comments v-bind:id="model.id"/>
- </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>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index b584678c5adf48d3446f72f04e16470c0f5cc8e8..b766c19d1f2b9224278e5f673ef9e26a916b32ad 100644
--- a/src/views/Search.vue
+++ b/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>