diff --git a/public/index.html b/public/index.html index e9bb139bf6bf5d4171056081bcc293ccdb4f16e1..87ab121f4079ad480dd5554fb97f9f7ccdcea9d4 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue index 2eb21763ed1cdbfd910542c281885543719e51cb..6a48e4bd5e8b3fc2c6bc8c98e96221bb73d1c711 100644 --- a/src/components/LoginForm.vue +++ b/src/components/LoginForm.vue @@ -38,7 +38,7 @@ export default { if (response.token !== null) { await localStorage.setItem('token', response.token) this.$parent.close() - this.$router.push({ name: 'Account', params: { account: response } }) + this.$router.go() } else { this.$buefy.toast.open('Email ou mot de passe incorect') } diff --git a/src/components/ModelTable.vue b/src/components/ModelTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..1345de204dc553d456813998263bebca785e5643 --- /dev/null +++ b/src/components/ModelTable.vue @@ -0,0 +1,88 @@ +<template> + <b-table :data="models" :loading="isLoading" striped hoverable> + <template slot-scope="props"> + <b-table-column field="name" label="Nom du modèle" searchable sortable> + {{ props.row.name }} + </b-table-column> + + <b-table-column field="vote" label="Votes" sortable> + {{ props.row.vote }} + </b-table-column> + + <b-table-column field="date" label="Date de modification" centered sortable> + {{ new Date(props.row.modificationDate).toLocaleDateString() }} + </b-table-column> + + <b-table-column field="date" label="Date d'ajout" centered sortable> + {{ new Date(props.row.addedDate).toLocaleDateString() }} + </b-table-column> + + <b-table-column label="" centered> + <b-button class="actionButton" icon-left="pencil" type="is-warning" tag="router-link" :to="{ name: 'ModelEdit', props: {model: props.row} }" outlined/> + <b-button class="actionButton" icon-left="delete" type="is-danger" @click="removePrompt(props.row.id)" outlined/> + </b-table-column> + </template> + </b-table> +</template> + +<script> +export default { + name: 'ModelTable', + data () { + return { + isLoading: true, + models: '' + } + }, + async mounted () { + this.models = await this.getModels() + this.isLoading = false + }, + methods: { + async getModels () { + const token = await localStorage.getItem('token') + const url = this.$serverurl + 'models' + try { + const response = await fetch(url, { headers: { Authorization: 'Bearer ' + token } }) + return await response.json() + } catch (error) { + return null + } + }, + edit (id) { + + }, + removePrompt (id) { + const name = this.models[id].name + this.$buefy.dialog.confirm({ + message: 'Supprimer ' + name + ' ?', + cancelText: 'Annuler', + confirmText: 'Supprimer', + type: 'is-danger', + hasIcon: true, + onConfirm: () => this.remove(id) + }) + }, + async remove (id) { + const url = this.$$serverurl + 'models' + '?id=' + id + const name = this.models[id].name + try { + await fetch(url, { + method: 'DELETE', + headers: { + Authorization: 'Bearer ' + this.token + } + }) + this.$buefy.toast.open(name + ' supprimé') + this.getData() + } catch (error) { + this.$buefy.toast.open('Erreur supprimer') + } + } + } +} +</script> + +<style> + +</style> diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index c070578e5b41bad390a365498e0b886b331e542a..9192095cbefd94d854b3a94c0733075b85593743 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -36,7 +36,15 @@ <b-icon icon="help-circle-outline"/> </b-navbar-item> <b-navbar-item tag="div"> - <div class="buttons"> + <div v-if="isLogged" class="buttons"> + <b-button tag="router-link" :to="{ name: 'Account' }" type="is-light"> + <strong>Mon compte</strong> + </b-button> + <b-button @click="logout" type="is-warning"> + Déconnexion + </b-button> + </div> + <div v-else class="buttons"> <b-button @click="openRegisterPrompt" type="is-primary"> <strong>S'inscrire</strong> </b-button> @@ -70,11 +78,16 @@ export default { }, data () { return { + isLogged: false, isLoginModalActive: false, isRegisterModalActive: false, search: '' } }, + async mounted () { + const token = await localStorage.getItem('token') + if (token) this.isLogged = true + }, methods: { onSearch () { this.$router.push({ name: 'Search', query: { n: this.search }, force: true }) @@ -84,6 +97,11 @@ export default { }, openRegisterPrompt () { this.isRegisterModalActive = true + }, + logout () { + this.isLogged = false + localStorage.removeItem('token') + this.$router.push({ name: 'Home' }) } } } diff --git a/src/main.js b/src/main.js index de80a936aa36101ccd0e59b196d8167a096b8ef2..2ba6ec9e2e2c259d112f6be15fa1a1baec547835 100644 --- a/src/main.js +++ b/src/main.js @@ -9,6 +9,7 @@ Vue.use(Buefy) Vue.config.productionTip = false Vue.prototype.$serverurl = 'http://localhost:8181/api/v1/' +Vue.prototype.$isLogged = false new Vue({ router, diff --git a/src/router/index.js b/src/router/index.js index 7cad3e91c8f4677a3eab25187dff6adb34185260..cdcfc71c6fd74369f463a74bf0ce1bf40f3b4a0c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -30,11 +30,16 @@ const routes = [ name: 'Model', component: () => import('../views/Model.vue') }, + { + path: '/modeledit', + name: 'ModelEdit', + component: () => import('../views/ModelEdit.vue'), + props: true + }, { path: '/account', name: 'Account', - component: () => import('../views/Account.vue'), - props: true + component: () => import('../views/Account.vue') } ] diff --git a/src/views/Account.vue b/src/views/Account.vue index b05134dfe14e3c16763ce2b3b6904531d7306f75..0718d87ebd23eab8e3521b300bea27ce7458b044 100644 --- a/src/views/Account.vue +++ b/src/views/Account.vue @@ -1,14 +1,46 @@ <template> <div class="account container"> - <h1 class="title">Bienvenue {{account.username}}</h1> + <div class="box"> + <h1 class="title">Bienvenue {{account.username}}</h1> + <div class="buttons"> + <b-button>Ajouter un modèle</b-button> + <b-button>Modifier le compte</b-button> + </div> + </div> + <div class="box"> + <h1 class="title is-4">Mes modèles</h1> + <ModelTable/> + </div> </div> </template> <script> +import ModelTable from '@/components/ModelTable.vue' + export default { name: 'Account', - props: ['account'], + components: { + ModelTable + }, + data () { + return { + account: '' + } + }, + async mounted () { + this.account = await this.getAccount() + }, methods: { + async getAccount () { + const token = await localStorage.getItem('token') + const url = this.$serverurl + 'user' + try { + const response = await fetch(url, { headers: { Authorization: 'Bearer ' + token } }) + return await response.json() + } catch (error) { + return null + } + } } } </script> diff --git a/src/views/ModelEdit.vue b/src/views/ModelEdit.vue new file mode 100644 index 0000000000000000000000000000000000000000..645179bd6b33cb145fc7029efa794a83a3b382a9 --- /dev/null +++ b/src/views/ModelEdit.vue @@ -0,0 +1,46 @@ +<template> + <div class="modelEdit container"> + <div class="box"> + <b-field label="Nom du modèle"> + <b-input maxlength="30" :value="model.name"/> + </b-field> + + <b-field label="Description courte"> + <b-input maxlength="200" type="textarea" :value="model.shortDescription"/> + </b-field> + + <b-field label="Description longue"> + <b-input type="textarea" :value="model.longDescription"/> + </b-field> + </div> + <div class="box"> + <b-button type="is-warning">Annuler</b-button> + <b-button type="is-danger">Supprimer</b-button> + <b-button type="is-success">Enregistrer</b-button> + </div> + </div> +</template> + +<script> +export default { + name: 'ModelEdit', + props: ['model'], + data () { + return { + name: '', + shortDesc: '', + longDesc: '', + tags: '' + } + }, + methods: { + async saveModel () { + + } + } +} +</script> + +<style> + +</style> diff --git a/src/views/Search.vue b/src/views/Search.vue index b766c19d1f2b9224278e5f673ef9e26a916b32ad..07be994e3ce3a1c08c684417c8ff6e450c7d79eb 100644 --- a/src/views/Search.vue +++ b/src/views/Search.vue @@ -3,7 +3,7 @@ <div class="columns"> <div class="column"> <h1 class="title is-6 filterTitle">Filtres</h1> - <Filters v-bind:tags="tags" v-on:setTags="refreshResults"/> + <Filters v-bind:tags="tags" v-on:setTags="setTags"/> </div> <div v-if="result" class="column is-four-fifths"> <h1 class="title is-6">{{result.total}} résultats - page {{result.page}}</h1>