77 </h3 >
88 <div class =" modal-body" >
99 <form class =" w-full max-w-sm" >
10- <input type =" text" name =" title" v-model =" this.tag" placeholder =" Title :" /><br />
11- <input type =" datetime-local" class =" text-field" v-model =" this.periodStart" /><br />
12- <input type =" datetime-local" class =" text-field" v-model =" this.periodEnd" /><br />
13- <input type =" url" placeholder =" picture link" v-model =" this.picture" /><br />
10+ <input type =" text" name =" title" v-model =" tag" placeholder =" Title :" /><br />
11+ <VueDatePicker
12+ placeholder="debut"
13+ v-model =" periodStart "
14+ :format =" dateFormat "
15+ :language =" datePickerLanguage "
16+ />
17+ <VueDatePicker
18+ placeholder="fin"
19+ v-model =" periodEnd "
20+ :format =" dateFormat "
21+ :language =" datePickerLanguage "
22+ />
23+ <input type =" url" placeholder =" picture link" v-model =" picture" /><br />
1424 <input
1525 type =" text"
1626 name =" language"
17- v-model =" this. language"
27+ v-model =" language"
1828 placeholder =" Language :"
19- /><br />
29+ @input =" searchLanguage"
30+ autocomplete =" off"
31+ />
32+ <ul v-if =" showSuggest" >
33+ <li v-for =" suggest in languageSuggest" :key =" suggest" @click =" selectSuggest(suggest)" >
34+ {{ suggest }}
35+ </li >
36+ </ul >
37+ <input type =" file" id =" file" ref =" fileInput" @change =" onFileSelected" />
2038 <div class =" flex justify-center mt-6" >
2139 <button
2240 class =" px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
4159
4260<script lang="ts">
4361import { useCoursStore } from ' @/store/modules/course.store' ;
62+ import VueDatePicker from ' @vuepic/vue-datepicker' ;
63+ import Swal from ' sweetalert2' ;
4464
4565export default {
4666 name: ' AddCourses' ,
@@ -57,11 +77,33 @@ export default {
5777 project: [],
5878 site: ' ' ,
5979 teacherId: ' ' ,
80+ languages: [],
81+ languageSuggest: [],
82+ showSuggest: false ,
83+ dateFormat: ' yyyy-MM-dd HH:mm' ,
84+ datePickerLanguage: ' fr' , // Langue du date picker
85+ selectedFile: null ,
86+ base64String: ' ' ,
6087 };
6188 },
6289 methods: {
63- AddCourses() {
90+ AddCourses(event ) {
91+ event .preventDefault ();
92+
93+ // Vérifier si tous les champs sont remplis
94+ if (! this .tag || ! this .periodStart || ! this .periodEnd || ! this .picture || ! this .language ) {
95+ Swal .fire ({
96+ title: ' Vous devez remplir tous les champs' ,
97+ text: ' Veuillez remplir tous les champs pour ajouter un nouveau cours' ,
98+ icon: ' error' ,
99+ confirmButtonColor: ' #3085d6' ,
100+ cancelButtonColor: ' #d33' ,
101+ confirmButtonText: ' OK' ,
102+ });
103+ return ;
104+ }
64105 const course = useCoursStore ();
106+
65107 this .newCourse = {
66108 tag: this .tag ,
67109 classTag: ' ' ,
@@ -74,8 +116,73 @@ export default {
74116 project: [],
75117 site: ' ' ,
76118 teacherId: ' ' ,
119+ files: this .base64String ,
77120 };
78- course .addCourse (this .newCourse );
121+
122+ Swal .fire ({
123+ title: ' Votre cours a été ajouté' ,
124+ icon: ' success' ,
125+ confirmButtonColor: ' #3085d6' ,
126+ cancelButtonColor: ' #d33' ,
127+ confirmButtonText: ' OK' ,
128+ }).then (async (result ) => {
129+ if (result .isConfirmed ) {
130+ // Ajouter le cours
131+ course .addCourse (this .newCourse );
132+ }
133+ });
134+ // Rediriger vers la page des cours
135+ this .$emit (' close' );
136+ },
137+ onFileSelected(event ) {
138+ this .selectedFile = event .target .files [0 ];
139+ this .convertToBase64 ();
140+ },
141+
142+ convertToBase64() {
143+ if (this .selectedFile ) {
144+ const reader = new FileReader ();
145+ reader .onload = (event ) => {
146+ let result = event .target .result ;
147+ this .base64String = result .toString ();
148+ };
149+ reader .readAsDataURL (this .selectedFile );
150+ }
151+ },
152+
153+ searchLanguage() {
154+ // recherche de toutes les matieres
155+ this .showSuggest = true ;
156+ this .getAllTagCourse ();
157+ this .languageSuggest = [];
158+ this .languages .forEach ((element ) => {
159+ let alreadyInList = false ;
160+ if (element .toUpperCase ().includes (this .language .toUpperCase ()) && this .language != ' ' ) {
161+ this .languageSuggest .forEach ((languageInList ) => {
162+ if (languageInList == element .toUpperCase ()) {
163+ alreadyInList = true ;
164+ }
165+ });
166+ if (! alreadyInList ) {
167+ this .languageSuggest .push (element .toUpperCase ());
168+ }
169+ }
170+ });
171+ },
172+
173+ getAllTagCourse() {
174+ this .languages = []; // reset la list
175+ const courseStore = useCoursStore ();
176+ const course = courseStore .items ;
177+ course .forEach ((element ) => {
178+ if (! this .languages .includes (element .language )) {
179+ this .languages .push (element .language );
180+ }
181+ });
182+ },
183+
184+ selectSuggest(suggest ) {
185+ this .language = suggest ;
79186 },
80187 },
81188};
0 commit comments