Skip to content

Commit f630b49

Browse files
dewitadewita
committed
refactor(Exercise): move rating part from DetailsPanel to the exercise description
1 parent cc905a7 commit f630b49

File tree

2 files changed

+109
-96
lines changed

2 files changed

+109
-96
lines changed

‎components/Panel/Item/DetailsPanel.vue‎

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,6 @@
1212
</div>
1313
</div>
1414

15-
<div>
16-
<h3>Notes</h3>
17-
<template v-if="$auth.loggedIn">
18-
<h4>Votre note</h4>
19-
<Rating :rating="rating" @rating="rate"/>
20-
</template>
21-
<h4>Moyenne</h4>
22-
<div class="avg-score" v-if="nbVotes !== 0">
23-
<span>{{avgVote}}</span>
24-
<Icon theme="theme--primary-color" type="star"/>
25-
</div>
26-
<div v-else>
27-
<span>Pas encore évalué</span>
28-
</div>
29-
<h4>Nombre de votes</h4>
30-
<div>
31-
<span>{{nbVotes}}</span>
32-
</div>
33-
34-
</div>
3515

3616
<div v-if="!!exercise.url || !!exercise.file" class="sources">
3717
<h3>Sources</h3>
@@ -111,60 +91,6 @@
11191
return arrayOfTagByCategories
11292
}
11393
114-
get rating() {
115-
return this.exercise.vote ? this.exercise.vote : 0
116-
}
117-
118-
get avgVote() {
119-
120-
const metrics: ExerciseMetrics | undefined = this.exercise.metrics;
121-
122-
if(metrics) {
123-
return metrics.avg_score
124-
}
125-
126-
return '-'
127-
}
128-
129-
get nbVotes() {
130-
const metrics: ExerciseMetrics | undefined = this.exercise.metrics;
131-
132-
if(metrics) {
133-
return metrics.votes
134-
}
135-
136-
return 0
137-
}
138-
139-
private async rate(i:number) {
140-
if(this.$auth.loggedIn) {
141-
try {
142-
await this.$axios.$post('/api/vote_for_exercise', {exercise_id: this.exercise.id, score: i});
143-
this.$displaySuccess('Merci pour votre retour !');
144-
} catch (e) {
145-
const error = e as AxiosError;
146-
147-
if(error.response) {
148-
const status = error.response.status;
149-
150-
if(status === 400) {
151-
this.$displayError('Une erreur est survenue, vérifiez vos données');
152-
} else if(status === 401) {
153-
this.$displayError('Vous devez vous connecter pour effectuer cette action !');
154-
} else if(status === 403) {
155-
this.$displayError("Vous n'êtes pas autorisé à effectuer cette action !");
156-
} else if(status === 500) {
157-
this.$displayError("Une erreur est survenue depuis nos serveurs, veuillez nous en excuser.");
158-
} else {
159-
this.$displayError("Une erreur est survenue.");
160-
}
161-
} else {
162-
this.$displayError("Une erreur est survenue.");
163-
}
164-
}
165-
}
166-
}
167-
16894
created() {
16995
const link: string | undefined = this.$accessor.sharedEnv.CDN_SERVER;
17096
this.cdnLink = link ? link : ''
@@ -216,20 +142,5 @@
216142
width: 100%;
217143
}
218144
}
219-
220-
221-
.avg-score {
222-
display: inline-block;
223-
span {
224-
display: inline-block;
225-
}
226-
227-
svg {
228-
width: 25px;
229-
vertical-align: -6px;
230-
}
231-
}
232-
233-
234145
}
235146
</style>

‎pages/exercices/_id.vue‎

Lines changed: 109 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,23 @@
2424
<section class="exercise">
2525
<h1>{{exercise.title}}</h1>
2626
<span>Créé le {{$moment(exercise.createdAt).format("DD/MM/YY à H:mm")}}</span> | <span>Mis à jour le {{$moment(exercise.updatedAt).format("DD/MM/YY à H:mm")}}</span>
27+
28+
<div class="score__info">
29+
<div v-if="$auth.loggedIn">
30+
<h4 class="title--primary-color__light">Votre note</h4>
31+
<Rating :rating="rating" @rating="rate"/>
32+
</div>
33+
<div>
34+
<h4 class="title--primary-color__light">Moyenne de l'exercice</h4>
35+
<div class="avg-score" v-if="nbVotes !== 0">
36+
<span>{{avgVote}}</span>
37+
<Icon theme="theme--primary-color" type="star"/>
38+
</div>
39+
<div v-else>
40+
<span>Pas encore évalué</span>
41+
</div>
42+
</div>
43+
</div>
2744
<button v-if="isTheCreator || isAdmin || isSuperAdmin" @click="modifyExercise"
2845
class="button--ternary-color-reverse">Modifier l'exercice
2946
</button>
@@ -38,7 +55,7 @@
3855

3956
<script lang="ts">
4057
import {Component, Mixins} from "vue-property-decorator";
41-
import {Exercise} from "~/types";
58+
import {Exercise, ExerciseMetrics} from "~/types";
4259
import Icon from "~/components/Symbols/Icon.vue";
4360
import hljs from 'highlight.js/lib/highlight';
4461
import javascript from 'highlight.js/lib/languages/javascript';
@@ -52,6 +69,7 @@
5269
import DetailsPanel from "~/components/Panel/Item/DetailsPanel.vue";
5370
import UserMixins from "~/components/Mixins/Api/UserMixins";
5471
import {AxiosError} from "axios";
72+
import Rating from "~/components/Rating/Rating.vue";
5573
5674
hljs.registerLanguage('javascript', javascript);
5775
hljs.registerLanguage('css', css);
@@ -62,6 +80,7 @@
6280
6381
@Component({
6482
components: {
83+
Rating,
6584
DetailsPanel,
6685
PanelItem,
6786
Panel,
@@ -76,15 +95,18 @@
7695
} catch (e) {
7796
const axiosError = e as AxiosError;
7897
79-
if(axiosError.response) {
98+
if (axiosError.response) {
8099
const status: number = axiosError.response.status;
81100
82-
if(status === 404) {
101+
if (status === 404) {
83102
error({statusCode: status, message: "Cet exercice est introuvable."});
84-
} else if(status === 410) {
103+
} else if (status === 410) {
85104
error({statusCode: 410, message: "Cet exercice a été archivé."});
86-
} else if(status === 500) {
87-
error({statusCode: status, message: "Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser."});
105+
} else if (status === 500) {
106+
error({
107+
statusCode: status,
108+
message: "Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser."
109+
});
88110
}
89111
} else {
90112
error({statusCode: 404, message: "Cet exercice est introuvable."});
@@ -113,6 +135,61 @@
113135
}
114136
}
115137
138+
get rating() {
139+
return this.exercise.vote ? this.exercise.vote : 0
140+
}
141+
142+
get avgVote() {
143+
144+
const metrics: ExerciseMetrics | undefined = this.exercise.metrics;
145+
146+
if(metrics) {
147+
return metrics.avg_score
148+
}
149+
150+
return '-'
151+
}
152+
153+
get nbVotes() {
154+
const metrics: ExerciseMetrics | undefined = this.exercise.metrics;
155+
156+
if (metrics) {
157+
console.log(metrics);
158+
return metrics.votes
159+
}
160+
161+
return 0
162+
}
163+
164+
private async rate(i: number) {
165+
if (this.$auth.loggedIn) {
166+
try {
167+
await this.$axios.$post('/api/vote_for_exercise', {exercise_id: this.exercise.id, score: i});
168+
this.$displaySuccess('Merci pour votre retour !');
169+
} catch (e) {
170+
const error = e as AxiosError;
171+
172+
if (error.response) {
173+
const status = error.response.status;
174+
175+
if (status === 400) {
176+
this.$displayError('Une erreur est survenue, vérifiez vos données');
177+
} else if (status === 401) {
178+
this.$displayError('Vous devez vous connecter pour effectuer cette action !');
179+
} else if (status === 403) {
180+
this.$displayError("Vous n'êtes pas autorisé à effectuer cette action !");
181+
} else if (status === 500) {
182+
this.$displayError("Une erreur est survenue depuis nos serveurs, veuillez nous en excuser.");
183+
} else {
184+
this.$displayError("Une erreur est survenue.");
185+
}
186+
} else {
187+
this.$displayError("Une erreur est survenue.");
188+
}
189+
}
190+
}
191+
}
192+
116193
modifyExercise() {
117194
if (this.isAdmin || this.isSuperAdmin) {
118195
this.$router.push('/administration/exercices/' + this.exercise.id)
@@ -145,7 +222,32 @@
145222
#Exercise {
146223
147224
.exercise {
148-
position: relative;
225+
226+
.score__info {
227+
display: flex;
228+
229+
h4 {
230+
margin-bottom: 5px;
231+
}
232+
233+
> div:not(:first-child) {
234+
margin-left: 35px;
235+
}
236+
237+
}
238+
239+
.avg-score {
240+
display: inline-block;
241+
242+
span {
243+
display: inline-block;
244+
}
245+
246+
svg {
247+
width: 25px;
248+
vertical-align: -6px;
249+
}
250+
}
149251
150252
button {
151253
position: absolute;

0 commit comments

Comments
 (0)