Skip to content

Commit b0ee119

Browse files
dewitadewita
committed
refactor(Form): use TextInput and TextInput for genericity
1 parent 55dc9da commit b0ee119

File tree

8 files changed

+163
-192
lines changed

8 files changed

+163
-192
lines changed

‎components/Gestion/CategoryForm.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,15 @@
33
<h1>{{title}}</h1>
44

55
<ValidationObserver ref="observer" tag="form" @submit.prevent="validateBeforeSubmit">
6-
<ValidationProvider tag="label"
7-
name="catégorie"
8-
rules="required|min:3|max:100"
9-
v-slot="{ errors }">
6+
<TextInput tag="label"
7+
name="catégorie"
8+
v-model="form.title"
9+
placeholder="Entrez le nom de la catégorie"
10+
rules="required|min:3|max:100">
1011
<span class="label__name">
1112
Nom *
1213
</span>
13-
<input id="Title" placeholder="Entrez le nom de la catégorie" name="title" v-model="form.title"
14-
class="input--grey" type="text">
15-
<span class="error-message">{{errors[0]}}</span>
16-
</ValidationProvider>
17-
14+
</TextInput>
1815
</ValidationObserver>
1916

2017
<p class="disclaimer">* champs obligatoires</p>
@@ -31,15 +28,16 @@
3128
<script lang="ts">
3229
3330
import {Component, Vue, Ref, Prop} from "vue-property-decorator";
34-
import {ValidationProvider, ValidationObserver} from 'vee-validate';
31+
import {ValidationObserver} from 'vee-validate';
3532
import {AxiosError} from "axios";
3633
import {
3734
Category
3835
} from "~/types";
3936
import Icon from "~/components/Symbols/Icon.vue";
37+
import TextInput from "~/components/Input/TextInput.vue";
4038
4139
@Component({
42-
components: {ValidationObserver, ValidationProvider, Icon}
40+
components: {TextInput, ValidationObserver, Icon}
4341
})
4442
export default class ExerciseForm extends Vue {
4543

‎components/Gestion/ExerciseForm.vue‎

Lines changed: 71 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,44 @@
77

88
<div v-if="exercise" class="status">
99
<template v-if="exercise.state === 'VALIDATED'">
10-
Valide <Icon type="check" theme="theme--green"/>
10+
Valide
11+
<Icon type="check" theme="theme--green"/>
1112
</template>
1213

1314
<template v-else-if="exercise.state === 'NOT_VALIDATED'">
14-
Non valide <Icon type="close" theme="theme--red-light"/>
15+
Non valide
16+
<Icon type="close" theme="theme--red-light"/>
1517
</template>
1618

1719
<template v-else-if="exercise.state === 'PENDING'">
18-
En attente <Icon type="send" theme="theme--yellow"/>
20+
En attente
21+
<Icon type="send" theme="theme--yellow"/>
1922
</template>
2023

2124
<template v-else-if="exercise.state === 'DRAFT'">
22-
Brouillon <Icon title="Créé" type="paper" theme="theme--primary-color-light"/>
25+
Brouillon
26+
<Icon title="Créé" type="paper" theme="theme--primary-color-light"/>
2327
</template>
2428

2529
<template v-else-if="exercise.state === 'ARCHIVED'">
26-
Archivé <Icon type="archive" theme="theme--red-light"/>
30+
Archivé
31+
<Icon type="archive" theme="theme--red-light"/>
2732
</template>
2833
</div>
2934

3035
<ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit()">
31-
<ValidationProvider tag="label"
32-
name="titre"
33-
rules="required|min:3|max:200"
34-
v-slot="{ errors }">
35-
<span class="label__name">
36+
<TextInput
37+
tag="label"
38+
name="titre"
39+
v-model="form.title"
40+
:value="form.title"
41+
@input="debounceInput"
42+
placeholder="Entrez le nom de votre exercice"
43+
rules="required|min:3|max:200">
44+
<span class="label__name">
3645
Titre *
37-
</span>
38-
<input id="Title" placeholder="Entrez le nom de votre exercice" name="title" v-model="form.title"
39-
v-on:input="debounceInput" class="input--grey" type="text">
40-
<span class="error-message">{{errors[0]}}</span>
41-
</ValidationProvider>
46+
</span>
47+
</TextInput>
4248

4349
</ValidationObserver>
4450

@@ -101,15 +107,13 @@
101107
<span class="error-message">{{errors[0]}}</span>
102108
</ValidationProvider>
103109

104-
<ValidationProvider tag="label"
105-
name="tag"
106-
rules="required|min:3|max:100"
107-
v-slot="{ errors }">
108-
<input id="NewTagName" name="selectedNewTag.text" placeholder="Entrez votre nouveau tag"
109-
v-model="selectedNewTag.text"
110-
class="input--grey" type="text">
111-
<span class="error-message">{{errors[0]}}</span>
112-
</ValidationProvider>
110+
<TextInput
111+
tag="label"
112+
name="tag"
113+
rules="required|min:3|max:100"
114+
v-model="selectedNewTag.text"
115+
placeholder="Entrez votre nouveau tag">
116+
</TextInput>
113117

114118
<button :class="{'button--ternary-color-reverse': valid, 'button--ternary-color': !valid}" type="submit">
115119
Ajouter ce tag
@@ -119,39 +123,36 @@
119123

120124
<ValidationObserver ref="observer2" tag="form"
121125
@submit.prevent="validateBeforeSubmit">
122-
<ValidationProvider tag="div"
123-
name="archive zip"
124-
rules="mimes:application/zip,application/x-zip,application/x-zip-compressed,application/octet-stream"
125-
ref="fileObserver"
126-
v-slot="{ errors, validate }">
127-
<span class="label__name">
126+
<FileInput
127+
name="archive zip"
128+
rules="mimes:application/zip,application/x-zip,application/x-zip-compressed,application/octet-stream"
129+
:default-filename="filename"
130+
@input="updateFile"
131+
ref="fileObserver">
132+
133+
<span class="label__name">
128134
Uploadez votre archive (zip)
129-
</span>
130-
<input id="Archive" name="archive" ref="inputFile" @change="selectedFile" class="input--secondary-color"
131-
type="file">
132-
<label for="Archive">
133-
<Icon type="archive" theme="theme--white"/>
134-
{{labelFileText}}</label>
135-
<span class="error-message">{{errors[0]}}</span>
135+
</span>
136+
137+
<template v-slot:footer>
136138
<span v-if="exercise && exercise.file && filename" @click="downloadFile"
137-
class="message message--primary-color"
138-
style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</span>
139-
<span class="message message--red" v-if="filename"
140-
style="text-decoration: underline; cursor: pointer;"
141-
@click="deleteFile">Supprimer le fichier</span>
142-
</ValidationProvider>
143-
144-
<ValidationProvider tag="label"
145-
name="url"
146-
rules="url"
147-
v-slot="{ errors }">
148-
<span class="label__name">
139+
class="message message--primary-color"
140+
style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</span>
141+
142+
</template>
143+
</FileInput>
144+
145+
<TextInput
146+
tag="label"
147+
name="url"
148+
type="url"
149+
v-model="form.url"
150+
placeholder="Entrez l'url absolue vers votre exercice"
151+
rules="url">
152+
<span class="label__name">
149153
Url vers l'exercice
150-
</span>
151-
<input id="Url" type="url" placeholder="Entrez l'url absolue vers votre exercice" name="url" v-model="form.url"
152-
class="input--grey">
153-
<span class="error-message">{{errors[0]}}</span>
154-
</ValidationProvider>
154+
</span>
155+
</TextInput>
155156
</ValidationObserver>
156157

157158

@@ -207,13 +208,17 @@
207208
import jsonFormData from 'json-form-data';
208209
import ExerciseFormMixins from "~/components/Mixins/ExerciseFormMixins";
209210
import TagColorLegend from "~/components/Tag/TagColorLegend.vue";
210-
211-
const debounce = require('lodash.debounce');
211+
import TextInput from "~/components/Input/TextInput.vue";
212+
import FileInput from "~/components/Input/FileInput.vue";
212213
213214
const download = require('downloadjs');
214215
215216
@Component({
216-
components: {TagColorLegend, CustomSelect, ValidationObserver, ValidationProvider, RichTextEditor, Tag, Icon}
217+
components: {
218+
FileInput,
219+
TextInput,
220+
TagColorLegend, CustomSelect, ValidationObserver, ValidationProvider, RichTextEditor, Tag, Icon
221+
}
217222
})
218223
export default class ExerciseForm extends Mixins(FilterPanelMixins, ExerciseFormMixins) {
219224
@Prop({type: Object, default: undefined}) exercise!: Exercise | undefined;
@@ -265,7 +270,7 @@
265270
exerciseBuild.url = this.form.url;
266271
}
267272
268-
const file: File | null = this.file();
273+
const file: File | null = this.file;
269274
270275
if (file !== null) {
271276
@@ -341,18 +346,18 @@
341346
} catch (e) {
342347
const error = e as AxiosError;
343348
344-
if(error.response) {
349+
if (error.response) {
345350
const status: number = error.response.status;
346351
347-
if(status === 400) {
352+
if (status === 400) {
348353
this.$displayError(`Vous ne respectez pas les conditions pour publier la catégorie.`);
349-
} else if(status === 401) {
354+
} else if (status === 401) {
350355
this.$displayError("Vous devez vous connecter pour effectuer cette action.")
351-
} else if(status === 403) {
356+
} else if (status === 403) {
352357
this.$displayError(`Vous n'êtes pas autorisé à effectuer cette action !`);
353-
} else if(status === 409) {
358+
} else if (status === 409) {
354359
this.$displayError(`Un conflit a été détecté. Vérifiez vos données.`);
355-
} else if(status === 500) {
360+
} else if (status === 500) {
356361
this.$displayError(`Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser.`);
357362
}
358363
} else {
@@ -370,10 +375,10 @@
370375
}
371376
372377
async downloadFile() {
373-
if(this.exercise) {
378+
if (this.exercise) {
374379
try {
375380
376-
const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
381+
const result: Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
377382
378383
download(result, "archive.zip", result.type);
379384

‎components/Gestion/FavoriteForm.vue‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,29 @@
22
<section class="content">
33
<h1>{{title}}</h1>
44

5-
<ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit()">
6-
<ValidationProvider tag="label"
7-
name="favori"
8-
rules="required|max:200"
9-
v-slot="{ errors }">
10-
<span class="label__name">
11-
Nom du favori *
12-
</span>
13-
<input id="Name" placeholder="Entrez le nom de votre favori" name="name" v-model="form.name"
14-
class="input--grey" type="text">
15-
<span class="error-message">{{errors[0]}}</span>
16-
</ValidationProvider>
17-
18-
<ValidationProvider tag="label"
19-
name="titre"
20-
rules="max:100"
21-
v-slot="{ errors }">
22-
<span class="label__name">
5+
<ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit">
6+
<TextInput
7+
tag="label"
8+
name="favori"
9+
v-model="form.name"
10+
placeholder="Entrez le nom de votre favori"
11+
rules="required|max:200">
12+
<span class="label__name">
13+
Nom du favori *
14+
</span>
15+
</TextInput>
16+
17+
<TextInput
18+
tag="label"
19+
name="titre"
20+
v-model="form.title"
21+
@input="debounceInput"
22+
placeholder="Entrez le titre de votre recherche"
23+
rules="max:100">
24+
<span class="label__name">
2325
Titre de recherche
24-
</span>
25-
<input id="Title" placeholder="Entrez le titre de votre recherche" name="title" v-model="form.title"
26-
v-on:input="debounceInput" class="input--grey" type="text">
27-
<span class="error-message">{{errors[0]}}</span>
28-
</ValidationProvider>
26+
</span>
27+
</TextInput>
2928

3029
</ValidationObserver>
3130

@@ -62,13 +61,14 @@
6261
import FilterPanelMixins from "~/components/Mixins/FilterPanelMixins.vue";
6362
import FavoriteFormMixins from "~/components/Mixins/FavoriteFormMixins";
6463
import {Configuration, CreateConfigurationRequest, SelectedTag, UpdateConfigurationRequest} from "../../types";
65-
import {ValidationObserver, ValidationProvider} from "vee-validate";
64+
import {ValidationObserver} from "vee-validate";
6665
import Tag from "../Tag/Tag.vue";
6766
import TagColorLegend from "~/components/Tag/TagColorLegend.vue";
6867
import {AxiosError} from "axios";
68+
import TextInput from "~/components/Input/TextInput.vue";
6969
7070
@Component({
71-
components: {TagColorLegend, Tag, ValidationProvider, ValidationObserver}
71+
components: {TextInput, TagColorLegend, Tag, ValidationObserver}
7272
})
7373
export default class FavoriteForm extends Mixins(FilterPanelMixins, FavoriteFormMixins) {
7474
@@ -120,18 +120,18 @@
120120
} catch (e) {
121121
const error = e as AxiosError;
122122
123-
if(error.response) {
123+
if (error.response) {
124124
const status: number = error.response.status;
125125
126-
if(status === 400) {
126+
if (status === 400) {
127127
this.$displayError(`Vous ne respectez pas les conditions pour publier ce favori.`);
128-
} else if(status === 401) {
128+
} else if (status === 401) {
129129
this.$displayError("Vous devez vous connecter pour effectuer cette action.")
130-
} else if(status === 403) {
130+
} else if (status === 403) {
131131
this.$displayError(`Vous n'êtes pas autorisé à effectuer cette action !`);
132-
} else if(status === 409) {
132+
} else if (status === 409) {
133133
this.$displayError(`Cette catégorie existe déjà.`);
134-
} else if(status === 500) {
134+
} else if (status === 500) {
135135
this.$displayError(`Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser.`);
136136
}
137137
} else {

0 commit comments

Comments
 (0)