viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit f35ab5f436c99e55b1673113d5639b4bfc0754cd

Authored by Amber Dev
1 parent cb844617e4
Exists in master and in 2 other branches amber-development, ui-design

bug in syllabus data not visible

Showing 1 changed file with 2 additions and 2 deletions   Show diff stats
src/pages/Academic/syllabus.vue
Diff comments   View file @f35ab5f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Syllabus ****** --> 3 <!-- ****** EDIT Syllabus ****** -->
4 <v-dialog v-model="editSyllabusDialog" max-width="400px"> 4 <v-dialog v-model="editSyllabusDialog" max-width="400px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Syllabus</label> 8 <label class="title text-xs-center">Edit Syllabus</label>
9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> 13 <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 sm4 class="pt-4 subheading"> 15 <v-flex xs4 sm4 class="pt-4 subheading">
16 <label class="right">Title :</label> 16 <label class="right">Title :</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm8 class="ml-3"> 18 <v-flex xs8 sm8 class="ml-3">
19 <v-text-field v-model="editedItem.title"></v-text-field> 19 <v-text-field v-model="editedItem.title"></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-layout> 22 <v-layout>
23 <v-flex xs4 class="pt-4 subheading"> 23 <v-flex xs4 class="pt-4 subheading">
24 <label class="right">Description:</label> 24 <label class="right">Description:</label>
25 </v-flex> 25 </v-flex>
26 <v-flex xs8 class="ml-3"> 26 <v-flex xs8 class="ml-3">
27 <v-text-field v-model="editedItem.description"></v-text-field> 27 <v-text-field v-model="editedItem.description"></v-text-field>
28 </v-flex> 28 </v-flex>
29 </v-layout> 29 </v-layout>
30 <v-layout> 30 <v-layout>
31 <v-flex xs4 class="pt-4 subheading"> 31 <v-flex xs4 class="pt-4 subheading">
32 <label class="right">Class:</label> 32 <label class="right">Class:</label>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 class="ml-3"> 34 <v-flex xs8 class="ml-3">
35 <v-select 35 <v-select
36 :items="classList" 36 :items="classList"
37 v-model="editedItem.classId" 37 v-model="editedItem.classId"
38 label="Select Class" 38 label="Select Class"
39 item-text="classNum" 39 item-text="classNum"
40 item-value="_id" 40 item-value="_id"
41 name="Select Class" 41 name="Select Class"
42 @change="getSections(addSyllabus.classId)" 42 @change="getSections(addSyllabus.classId)"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 <!-- <v-layout> 47 <!-- <v-layout>
48 <v-flex xs4 sm4 class="pt-4 subheading"> 48 <v-flex xs4 sm4 class="pt-4 subheading">
49 <label class="right">Section :</label> 49 <label class="right">Section :</label>
50 </v-flex> 50 </v-flex>
51 <v-flex xs8 sm8 class="ml-3"> 51 <v-flex xs8 sm8 class="ml-3">
52 <v-select 52 <v-select
53 :items="addSection" 53 :items="addSection"
54 label="Select Section" 54 label="Select Section"
55 item-text="name" 55 item-text="name"
56 item-value="_id" 56 item-value="_id"
57 v-model="editedItem.sectionId" 57 v-model="editedItem.sectionId"
58 name="Select Section" 58 name="Select Section"
59 class="px-2" 59 class="px-2"
60 required 60 required
61 ></v-select> 61 ></v-select>
62 </v-flex> 62 </v-flex>
63 </v-layout>--> 63 </v-layout>-->
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 class="pt-4 subheading"> 65 <v-flex xs4 class="pt-4 subheading">
66 <label class="right">File:</label> 66 <label class="right">File:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8 sm6 class="ml-3"> 68 <v-flex xs8 sm6 class="ml-3">
69 <v-text-field 69 <v-text-field
70 label="Select file" 70 label="Select file"
71 @click="pickFile" 71 @click="pickFile"
72 v-model="imageName" 72 v-model="imageName"
73 append-icon="attach_file" 73 append-icon="attach_file"
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-flex xs12 sm12> 77 <v-flex xs12 sm12>
78 <v-card-actions> 78 <v-card-actions>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 <v-btn 80 <v-btn
81 round 81 round
82 dark 82 dark
83 @click="save" 83 @click="save"
84 :loading="editLoading" 84 :loading="editLoading"
85 class="add-button" 85 class="add-button"
86 >Update Syllabus</v-btn> 86 >Update Syllabus</v-btn>
87 </v-card-actions> 87 </v-card-actions>
88 </v-flex> 88 </v-flex>
89 </v-form> 89 </v-form>
90 </v-container> 90 </v-container>
91 </v-card> 91 </v-card>
92 </v-dialog> 92 </v-dialog>
93 93
94 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 94 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
95 95
96 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> 96 <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px">
97 <v-toolbar flat class="card-style pa-3" dark> 97 <v-toolbar flat class="card-style pa-3" dark>
98 <v-spacer></v-spacer> 98 <v-spacer></v-spacer>
99 <v-toolbar-title> 99 <v-toolbar-title>
100 <h3>Subject</h3> 100 <h3>Subject</h3>
101 </v-toolbar-title> 101 </v-toolbar-title>
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 <v-icon @click="close1">close</v-icon> 103 <v-icon @click="close1">close</v-icon>
104 </v-toolbar> 104 </v-toolbar>
105 <v-card> 105 <v-card>
106 <v-card-text> 106 <v-card-text>
107 <v-container grid-list-md> 107 <v-container grid-list-md>
108 <v-layout wrap> 108 <v-layout wrap>
109 <v-flex> 109 <v-flex>
110 <v-layout> 110 <v-layout>
111 <v-flex xs7 sm6> 111 <v-flex xs7 sm6>
112 <h5 class="right my-1"> 112 <h5 class="right my-1">
113 <b>Subject Name:</b> 113 <b>Subject Name:</b>
114 </h5> 114 </h5>
115 </v-flex> 115 </v-flex>
116 <v-flex sm6 xs5> 116 <v-flex sm6 xs5>
117 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 117 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-container> 122 </v-container>
123 </v-card-text> 123 </v-card-text>
124 </v-card> 124 </v-card>
125 </v-dialog>--> 125 </v-dialog>-->
126 126
127 <!-- ****** EXISTING SYLLABUS TABLE ****** --> 127 <!-- ****** EXISTING SYLLABUS TABLE ****** -->
128 <v-toolbar color="transparent" flat> 128 <v-toolbar color="transparent" flat>
129 <v-btn 129 <v-btn
130 fab 130 fab
131 dark 131 dark
132 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 132 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
133 small 133 small
134 @click="addSyllabusDialog = true" 134 @click="addSyllabusDialog = true"
135 > 135 >
136 <v-icon dark>add</v-icon> 136 <v-icon dark>add</v-icon>
137 </v-btn> 137 </v-btn>
138 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 138 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
139 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> 139 <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true">
140 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus 140 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus
141 </v-btn> 141 </v-btn>
142 </v-flex> 142 </v-flex>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-flex lg2 md2 xs12 v-show="show"> 144 <v-flex lg2 md2 xs12 v-show="show">
145 <v-select 145 <v-select
146 :items="classList" 146 :items="classList"
147 label="Select Class" 147 label="Select Class"
148 v-model="addSyllabus.classId" 148 v-model="addSyllabus.classId"
149 item-text="classNum" 149 item-text="classNum"
150 item-value="_id" 150 item-value="_id"
151 name="Select Class" 151 name="Select Class"
152 :rules="classRules" 152 :rules="classRules"
153 @change="getSyallabusList" 153 @change="getSyallabusList"
154 class="pl-2" 154 class="pl-2"
155 required 155 required
156 ></v-select> 156 ></v-select>
157 </v-flex> 157 </v-flex>
158 <v-card-title class="body-1" v-show="show"> 158 <v-card-title class="body-1" v-show="show">
159 <v-btn icon flat @click="displaySearch"> 159 <v-btn icon flat @click="displaySearch">
160 <v-avatar size="27"> 160 <v-avatar size="27">
161 <img src="/static/icon/search.png" alt="icon" /> 161 <img src="/static/icon/search.png" alt="icon" />
162 </v-avatar> 162 </v-avatar>
163 </v-btn> 163 </v-btn>
164 </v-card-title> 164 </v-card-title>
165 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> 165 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
166 <v-layout> 166 <v-layout>
167 <v-text-field 167 <v-text-field
168 v-model="search" 168 v-model="search"
169 label="Search" 169 label="Search"
170 prepend-inner-icon="search" 170 prepend-inner-icon="search"
171 color="primary" 171 color="primary"
172 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 172 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
173 ></v-text-field> 173 ></v-text-field>
174 <v-icon @click="closeSearch" color="error">close</v-icon> 174 <v-icon @click="closeSearch" color="error">close</v-icon>
175 </v-layout> 175 </v-layout>
176 </v-flex> 176 </v-flex>
177 </v-toolbar> 177 </v-toolbar>
178 <v-data-table 178 <v-data-table
179 :headers="headers" 179 :headers="headers"
180 :items="syllabusList" 180 :items="syllabusList"
181 :pagination.sync="pagination" 181 :pagination.sync="pagination"
182 :search="search" 182 :search="search"
183 > 183 >
184 <template slot="items" slot-scope="props"> 184 <template slot="items" slot-scope="props">
185 <tr class="tr"> 185 <tr class="tr">
186 <td class="td-row td">{{ props.index + 1 }}</td> 186 <td class="td-row td">{{ props.index + 1 }}</td>
187 <td class="text-xs-center td td-row">{{ props.item.title }}</td> 187 <td class="text-xs-center td td-row">{{ props.item.title }}</td>
188 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 188 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
189 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> 189 <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
190 <td 190 <td
191 class="text-xs-center td td-row" 191 class="text-xs-center td td-row"
192 v-if="role != 'ADMIN' " 192 v-if="props.item.teacherId"
193 >{{ props.item.teacherId.name }}</td> 193 >{{ props.item.teacherId.name }}</td>
194 <td 194 <td
195 class="text-xs-center td td-row" 195 class="text-xs-center td td-row"
196 v-if="role != 'TEACHER' " 196 v-else
197 >{{ props.item.schoolId.name }}</td> 197 >{{ props.item.schoolId.name }}</td>
198 <td class="text-xs-center td td-row"> 198 <td class="text-xs-center td td-row">
199 <v-btn 199 <v-btn
200 class="add-button" 200 class="add-button"
201 @click="generatePDF2Canvas(props.item)" 201 @click="generatePDF2Canvas(props.item)"
202 :loading="loadingPdf" 202 :loading="loadingPdf"
203 dark 203 dark
204 >{{ props.item.fileType }}</v-btn> 204 >{{ props.item.fileType }}</v-btn>
205 </td> 205 </td>
206 <td class="text-xs-center td td-row"> 206 <td class="text-xs-center td td-row">
207 <span> 207 <span>
208 <v-tooltip top> 208 <v-tooltip top>
209 <img 209 <img
210 slot="activator" 210 slot="activator"
211 style="cursor:pointer; width:20px; height:18px; " 211 style="cursor:pointer; width:20px; height:18px; "
212 class="mr-3" 212 class="mr-3"
213 @click="editItem(props.item)" 213 @click="editItem(props.item)"
214 src="/static/icon/edit.png" 214 src="/static/icon/edit.png"
215 /> 215 />
216 <span>Edit</span> 216 <span>Edit</span>
217 </v-tooltip> 217 </v-tooltip>
218 <v-tooltip top> 218 <v-tooltip top>
219 <img 219 <img
220 slot="activator" 220 slot="activator"
221 style="cursor:pointer; width:20px; height:20px; " 221 style="cursor:pointer; width:20px; height:20px; "
222 class="mr-3" 222 class="mr-3"
223 @click="deleteItem(props.item)" 223 @click="deleteItem(props.item)"
224 src="/static/icon/delete.png" 224 src="/static/icon/delete.png"
225 /> 225 />
226 <span>Delete</span> 226 <span>Delete</span>
227 </v-tooltip> 227 </v-tooltip>
228 </span> 228 </span>
229 </td> 229 </td>
230 </tr> 230 </tr>
231 </template> 231 </template>
232 <v-alert 232 <v-alert
233 slot="no-results" 233 slot="no-results"
234 :value="true" 234 :value="true"
235 color="error" 235 color="error"
236 icon="warning" 236 icon="warning"
237 >Your search for "{{ search }}" found no results.</v-alert> 237 >Your search for "{{ search }}" found no results.</v-alert>
238 </v-data-table> 238 </v-data-table>
239 <!-- ****** ADD SYLLABUS ****** --> 239 <!-- ****** ADD SYLLABUS ****** -->
240 <v-snackbar 240 <v-snackbar
241 :timeout="timeout" 241 :timeout="timeout"
242 :top="y === 'top'" 242 :top="y === 'top'"
243 :right="x === 'right'" 243 :right="x === 'right'"
244 :vertical="mode === 'vertical'" 244 :vertical="mode === 'vertical'"
245 v-model="snackbar" 245 v-model="snackbar"
246 :color="color" 246 :color="color"
247 >{{ text }}</v-snackbar> 247 >{{ text }}</v-snackbar>
248 <v-dialog v-model="addSyllabusDialog" max-width="400px"> 248 <v-dialog v-model="addSyllabusDialog" max-width="400px">
249 <v-card flat class="card-style pa-2" dark> 249 <v-card flat class="card-style pa-2" dark>
250 <v-layout> 250 <v-layout>
251 <v-flex xs12> 251 <v-flex xs12>
252 <label class="title text-xs-center">Add Syllabus</label> 252 <label class="title text-xs-center">Add Syllabus</label>
253 <v-icon size="24" class="right" @click="addSyllabusDialog = false">cancel</v-icon> 253 <v-icon size="24" class="right" @click="addSyllabusDialog = false">cancel</v-icon>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 <v-container fluid fill-height> 256 <v-container fluid fill-height>
257 <v-layout align-center> 257 <v-layout align-center>
258 <v-flex xs12> 258 <v-flex xs12>
259 <v-form ref="form" v-model="valid" lazy-validation> 259 <v-form ref="form" v-model="valid" lazy-validation>
260 <v-layout> 260 <v-layout>
261 <v-flex xs4 sm4 class="pt-4 subheading"> 261 <v-flex xs4 sm4 class="pt-4 subheading">
262 <label class="right">Title :</label> 262 <label class="right">Title :</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 sm8 class="ml-3"> 264 <v-flex xs8 sm8 class="ml-3">
265 <v-text-field 265 <v-text-field
266 v-model="addSyllabus.title" 266 v-model="addSyllabus.title"
267 name="name" 267 name="name"
268 type="text" 268 type="text"
269 placeholder="Add Title" 269 placeholder="Add Title"
270 :rules="titleRules" 270 :rules="titleRules"
271 required 271 required
272 ></v-text-field> 272 ></v-text-field>
273 </v-flex> 273 </v-flex>
274 </v-layout> 274 </v-layout>
275 <v-layout> 275 <v-layout>
276 <v-flex xs4 sm4 class="pt-4 subheading"> 276 <v-flex xs4 sm4 class="pt-4 subheading">
277 <label class="right">Description :</label> 277 <label class="right">Description :</label>
278 </v-flex> 278 </v-flex>
279 <v-flex xs8 sm8 class="ml-3"> 279 <v-flex xs8 sm8 class="ml-3">
280 <v-text-field 280 <v-text-field
281 v-model="addSyllabus.description" 281 v-model="addSyllabus.description"
282 name="name" 282 name="name"
283 type="text" 283 type="text"
284 placeholder="Add Description" 284 placeholder="Add Description"
285 :rules="descriptionRules" 285 :rules="descriptionRules"
286 required 286 required
287 ></v-text-field> 287 ></v-text-field>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-layout> 290 <v-layout>
291 <v-flex xs4 class="pt-4 subheading"> 291 <v-flex xs4 class="pt-4 subheading">
292 <label class="right">Class:</label> 292 <label class="right">Class:</label>
293 </v-flex> 293 </v-flex>
294 <v-flex xs8 class="ml-3"> 294 <v-flex xs8 class="ml-3">
295 <v-select 295 <v-select
296 :items="classList" 296 :items="classList"
297 v-model="addSyllabus.classId" 297 v-model="addSyllabus.classId"
298 label="Select Class" 298 label="Select Class"
299 item-text="classNum" 299 item-text="classNum"
300 item-value="_id" 300 item-value="_id"
301 name="Select Class" 301 name="Select Class"
302 @change="getSections(addSyllabus.classId)" 302 @change="getSections(addSyllabus.classId)"
303 required 303 required
304 ></v-select> 304 ></v-select>
305 </v-flex> 305 </v-flex>
306 </v-layout> 306 </v-layout>
307 <!-- <v-layout> 307 <!-- <v-layout>
308 <v-flex xs4 sm4 class="pt-4 subheading"> 308 <v-flex xs4 sm4 class="pt-4 subheading">
309 <label class="right">Section :</label> 309 <label class="right">Section :</label>
310 </v-flex> 310 </v-flex>
311 <v-flex xs8 sm8 class="ml-3"> 311 <v-flex xs8 sm8 class="ml-3">
312 <v-select 312 <v-select
313 :items="addSection" 313 :items="addSection"
314 label="Select Section" 314 label="Select Section"
315 item-text="name" 315 item-text="name"
316 item-value="_id" 316 item-value="_id"
317 v-model="addSyllabus.sectionId" 317 v-model="addSyllabus.sectionId"
318 name="Select Section" 318 name="Select Section"
319 class="px-2" 319 class="px-2"
320 required 320 required
321 ></v-select> 321 ></v-select>
322 </v-flex> 322 </v-flex>
323 </v-layout>--> 323 </v-layout>-->
324 <v-layout> 324 <v-layout>
325 <v-flex xs4 class="pt-4 subheading"> 325 <v-flex xs4 class="pt-4 subheading">
326 <label class="right">File:</label> 326 <label class="right">File:</label>
327 </v-flex> 327 </v-flex>
328 <v-flex xs8 sm6 class="ml-3"> 328 <v-flex xs8 sm6 class="ml-3">
329 <v-text-field 329 <v-text-field
330 label="Select file" 330 label="Select file"
331 @click="pickFile" 331 @click="pickFile"
332 v-model="imageName" 332 v-model="imageName"
333 append-icon="attach_file" 333 append-icon="attach_file"
334 ></v-text-field> 334 ></v-text-field>
335 <input 335 <input
336 type="file" 336 type="file"
337 style="display:none" 337 style="display:none"
338 ref="image" 338 ref="image"
339 accept="image/*" 339 accept="image/*"
340 @change="onFilePicked" 340 @change="onFilePicked"
341 /> 341 />
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 <v-layout> 344 <v-layout>
345 <v-flex xs12 sm12> 345 <v-flex xs12 sm12>
346 <v-card-actions> 346 <v-card-actions>
347 <v-spacer></v-spacer> 347 <v-spacer></v-spacer>
348 <v-btn 348 <v-btn
349 @click="submit" 349 @click="submit"
350 round 350 round
351 dark 351 dark
352 :loading="loading" 352 :loading="loading"
353 class="add-button" 353 class="add-button"
354 >Add Syllabus</v-btn> 354 >Add Syllabus</v-btn>
355 </v-card-actions> 355 </v-card-actions>
356 </v-flex> 356 </v-flex>
357 </v-layout> 357 </v-layout>
358 </v-form> 358 </v-form>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-container> 361 </v-container>
362 </v-card> 362 </v-card>
363 </v-dialog> 363 </v-dialog>
364 <div class="loader" v-if="showLoader"> 364 <div class="loader" v-if="showLoader">
365 <v-progress-circular indeterminate color="white"></v-progress-circular> 365 <v-progress-circular indeterminate color="white"></v-progress-circular>
366 </div> 366 </div>
367 </v-container> 367 </v-container>
368 </template> 368 </template>
369 369
370 <script> 370 <script>
371 import http from "@/Services/http.js"; 371 import http from "@/Services/http.js";
372 import Util from "@/util"; 372 import Util from "@/util";
373 import moment from "moment"; 373 import moment from "moment";
374 import jsPDF from "jspdf"; 374 import jsPDF from "jspdf";
375 import { saveAs } from "file-saver"; 375 import { saveAs } from "file-saver";
376 376
377 export default { 377 export default {
378 data: () => ({ 378 data: () => ({
379 snackbar: false, 379 snackbar: false,
380 y: "top", 380 y: "top",
381 x: "right", 381 x: "right",
382 mode: "", 382 mode: "",
383 timeout: 3000, 383 timeout: 3000,
384 text: "", 384 text: "",
385 color: "", 385 color: "",
386 show: true, 386 show: true,
387 showSearch: false, 387 showSearch: false,
388 showLoader: false, 388 showLoader: false,
389 loading: false, 389 loading: false,
390 editLoading: false, 390 editLoading: false,
391 date: null, 391 date: null,
392 search: "", 392 search: "",
393 editSyllabusDialog: false, 393 editSyllabusDialog: false,
394 valid: true, 394 valid: true,
395 validEditSyllabus: true, 395 validEditSyllabus: true,
396 addSyllabusDialog: false, 396 addSyllabusDialog: false,
397 loadingPdf: false, 397 loadingPdf: false,
398 398
399 pagination: { 399 pagination: {
400 rowsPerPage: 10 400 rowsPerPage: 10
401 }, 401 },
402 token: "", 402 token: "",
403 upload: "", 403 upload: "",
404 titleRules: [v => !!v || " Title is required"], 404 titleRules: [v => !!v || " Title is required"],
405 descriptionRules: [v => !!v || " Description is required"], 405 descriptionRules: [v => !!v || " Description is required"],
406 classRules: [v => !!v || " Class Name is required"], 406 classRules: [v => !!v || " Class Name is required"],
407 fileRules: [v => !!v || " File is required"], 407 fileRules: [v => !!v || " File is required"],
408 headers: [ 408 headers: [
409 { 409 {
410 text: "No", 410 text: "No",
411 align: "", 411 align: "",
412 sortable: false, 412 sortable: false,
413 value: "No" 413 value: "No"
414 }, 414 },
415 { 415 {
416 text: "Title", 416 text: "Title",
417 value: "title", 417 value: "title",
418 sortable: false, 418 sortable: false,
419 align: "center" 419 align: "center"
420 }, 420 },
421 { 421 {
422 text: "Description", 422 text: "Description",
423 value: "description", 423 value: "description",
424 sortable: false, 424 sortable: false,
425 align: "center" 425 align: "center"
426 }, 426 },
427 { 427 {
428 text: "Date", 428 text: "Date",
429 value: "created", 429 value: "created",
430 sortable: false, 430 sortable: false,
431 align: "center" 431 align: "center"
432 }, 432 },
433 { 433 {
434 text: "Uploader", 434 text: "Uploader",
435 value: "upload", 435 value: "upload",
436 sortable: false, 436 sortable: false,
437 align: "center" 437 align: "center"
438 }, 438 },
439 { 439 {
440 text: "File", 440 text: "File",
441 value: "documentUrl", 441 value: "documentUrl",
442 sortable: false, 442 sortable: false,
443 align: "center" 443 align: "center"
444 }, 444 },
445 { text: "Action", value: "", sortable: false, align: "center" } 445 { text: "Action", value: "", sortable: false, align: "center" }
446 ], 446 ],
447 syllabusList: [], 447 syllabusList: [],
448 classList: [], 448 classList: [],
449 addSection: [], 449 addSection: [],
450 editedIndex: -1, 450 editedIndex: -1,
451 addSyllabus: {}, 451 addSyllabus: {},
452 452
453 editedItem: { 453 editedItem: {
454 subjectName: "" 454 subjectName: ""
455 }, 455 },
456 imageData: {}, 456 imageData: {},
457 imageName: "", 457 imageName: "",
458 imageUrl: "", 458 imageUrl: "",
459 imageFile: "" 459 imageFile: ""
460 }), 460 }),
461 461
462 methods: { 462 methods: {
463 pickFile() { 463 pickFile() {
464 this.$refs.image.click(); 464 this.$refs.image.click();
465 }, 465 },
466 dates: function(date) { 466 dates: function(date) {
467 return moment(date).format("MMMM DD, YYYY"); 467 return moment(date).format("MMMM DD, YYYY");
468 }, 468 },
469 editItem(item) { 469 editItem(item) {
470 this.editedIndex = this.syllabusList; 470 this.editedIndex = this.syllabusList;
471 this.editedItem = Object.assign({}, item); 471 this.editedItem = Object.assign({}, item);
472 this.dialog = true; 472 this.dialog = true;
473 this.editSyllabusDialog = true; 473 this.editSyllabusDialog = true;
474 }, 474 },
475 download(item) { 475 download(item) {
476 this.editedIndex = this.syllabusList; 476 this.editedIndex = this.syllabusList;
477 this.editedItem = Object.assign({}, item); 477 this.editedItem = Object.assign({}, item);
478 this.dialog1 = true; 478 this.dialog1 = true;
479 }, 479 },
480 deleteItem(item) { 480 deleteItem(item) {
481 let deleteSyallabus = { 481 let deleteSyallabus = {
482 syallabusId: item._id 482 syallabusId: item._id
483 }; 483 };
484 http() 484 http()
485 .delete( 485 .delete(
486 "/deleteSyallabus", 486 "/deleteSyallabus",
487 confirm("Are you sure you want to delete this?") && { 487 confirm("Are you sure you want to delete this?") && {
488 params: deleteSyallabus 488 params: deleteSyallabus
489 } 489 }
490 ) 490 )
491 .then(response => { 491 .then(response => {
492 this.getSyallabusList(); 492 this.getSyallabusList();
493 this.snackbar = true; 493 this.snackbar = true;
494 this.color = "green"; 494 this.color = "green";
495 this.text = "Successfully delete Existing Syllabus"; 495 this.text = "Successfully delete Existing Syllabus";
496 }) 496 })
497 .catch(error => { 497 .catch(error => {
498 this.snackbar = true; 498 this.snackbar = true;
499 this.text = error.response.data.message; 499 this.text = error.response.data.message;
500 this.color = "error"; 500 this.color = "error";
501 }); 501 });
502 }, 502 },
503 close() { 503 close() {
504 this.editSyllabusDialog = false; 504 this.editSyllabusDialog = false;
505 }, 505 },
506 506
507 submit() { 507 submit() {
508 // var addSyllabus = { 508 // var addSyllabus = {
509 // classId: this.addSyllabus.classId, 509 // classId: this.addSyllabus.classId,
510 // title: this.addSyllabus.title, 510 // title: this.addSyllabus.title,
511 // description: this.addSyllabus.description, 511 // description: this.addSyllabus.description,
512 // upload: this.addSyllabus.upload, 512 // upload: this.addSyllabus.upload,
513 // fileType: this.addSyllabus.fileType 513 // fileType: this.addSyllabus.fileType
514 // }; 514 // };
515 var signatures = { 515 var signatures = {
516 JVBERi0: "other", 516 JVBERi0: "other",
517 iVBORw0KGgo: "image", 517 iVBORw0KGgo: "image",
518 UEsDBBQ: "other", 518 UEsDBBQ: "other",
519 "/": "image", 519 "/": "image",
520 AAABAA: "image", 520 AAABAA: "image",
521 IywiV2hhdC: "other", 521 IywiV2hhdC: "other",
522 bmFtZSxl: "other" 522 bmFtZSxl: "other"
523 }; 523 };
524 function detectMimeType(b64) { 524 function detectMimeType(b64) {
525 for (var s in signatures) { 525 for (var s in signatures) {
526 if (b64.indexOf(s) === 0) { 526 if (b64.indexOf(s) === 0) {
527 return signatures[s]; 527 return signatures[s];
528 } 528 }
529 } 529 }
530 } 530 }
531 if (this.$refs.form.validate()) { 531 if (this.$refs.form.validate()) {
532 if (this.imageUrl) { 532 if (this.imageUrl) {
533 var str = this.imageUrl; 533 var str = this.imageUrl;
534 const [baseUrl, imageUrl] = str.split(/,/); 534 const [baseUrl, imageUrl] = str.split(/,/);
535 this.addSyllabus.upload = imageUrl; 535 this.addSyllabus.upload = imageUrl;
536 this.addSyllabus.fileType = detectMimeType(imageUrl); 536 this.addSyllabus.fileType = detectMimeType(imageUrl);
537 this.addSyllabus.fileName = this.imageName; 537 this.addSyllabus.fileName = this.imageName;
538 } 538 }
539 http() 539 http()
540 .post("/createSyallabus", this.addSyllabus) 540 .post("/createSyallabus", this.addSyllabus)
541 .then(response => { 541 .then(response => {
542 this.getSyallabusList(); 542 this.getSyallabusList();
543 this.snackbar = true; 543 this.snackbar = true;
544 this.text = "Syllabus added successfully"; 544 this.text = "Syllabus added successfully";
545 this.clear(); 545 this.clear();
546 this.color = "green"; 546 this.color = "green";
547 this.addSyllabusDialog = false; 547 this.addSyllabusDialog = false;
548 }) 548 })
549 .catch(error => { 549 .catch(error => {
550 // console.log(error); 550 // console.log(error);
551 this.snackbar = true; 551 this.snackbar = true;
552 this.text = error.response.data.message; 552 this.text = error.response.data.message;
553 this.color = "error"; 553 this.color = "error";
554 }); 554 });
555 } 555 }
556 }, 556 },
557 onFilePicked(e) { 557 onFilePicked(e) {
558 const files = e.target.files; 558 const files = e.target.files;
559 this.upload = e.target.files[0]; 559 this.upload = e.target.files[0];
560 if (files[0] !== undefined) { 560 if (files[0] !== undefined) {
561 this.imageName = files[0].name; 561 this.imageName = files[0].name;
562 if (this.imageName.lastIndexOf(".") <= 0) { 562 if (this.imageName.lastIndexOf(".") <= 0) {
563 return; 563 return;
564 } 564 }
565 const fr = new FileReader(); 565 const fr = new FileReader();
566 fr.readAsDataURL(files[0]); 566 fr.readAsDataURL(files[0]);
567 fr.addEventListener("load", () => { 567 fr.addEventListener("load", () => {
568 this.imageUrl = fr.result; 568 this.imageUrl = fr.result;
569 this.imageFile = files[0]; // this is an image file that can be sent to server... 569 this.imageFile = files[0]; // this is an image file that can be sent to server...
570 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 570 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
571 }); 571 });
572 } else { 572 } else {
573 this.imageName = ""; 573 this.imageName = "";
574 this.imageFile = ""; 574 this.imageFile = "";
575 this.imageUrl = ""; 575 this.imageUrl = "";
576 } 576 }
577 }, 577 },
578 clear() { 578 clear() {
579 this.$refs.form.reset(); 579 this.$refs.form.reset();
580 }, 580 },
581 save() { 581 save() {
582 if (this.$refs.formEditSyllabus.validate()) { 582 if (this.$refs.formEditSyllabus.validate()) {
583 let syllabusData = { 583 let syllabusData = {
584 syallabusId: this.editedItem._id, 584 syallabusId: this.editedItem._id,
585 classId: this.editedItem.classId._id, 585 classId: this.editedItem.classId._id,
586 // sectionId: this.editedItem.sectionId, 586 // sectionId: this.editedItem.sectionId,
587 title: this.editedItem.title, 587 title: this.editedItem.title,
588 description: this.editedItem.description, 588 description: this.editedItem.description,
589 upload: this.editedItem.upload, 589 upload: this.editedItem.upload,
590 fileType: this.editedItem.fileType, 590 fileType: this.editedItem.fileType,
591 fileName: this.imageName 591 fileName: this.imageName
592 }; 592 };
593 this.editLoading = true; 593 this.editLoading = true;
594 var signatures = { 594 var signatures = {
595 JVBERi0: "other", 595 JVBERi0: "other",
596 iVBORw0KGgo: "image", 596 iVBORw0KGgo: "image",
597 UEsDBBQ: "other", 597 UEsDBBQ: "other",
598 "/": "image", 598 "/": "image",
599 AAABAA: "image", 599 AAABAA: "image",
600 IywiV2hhdC: "other" 600 IywiV2hhdC: "other"
601 }; 601 };
602 function detectMimeType(b64) { 602 function detectMimeType(b64) {
603 for (var s in signatures) { 603 for (var s in signatures) {
604 if (b64.indexOf(s) === 0) { 604 if (b64.indexOf(s) === 0) {
605 return signatures[s]; 605 return signatures[s];
606 } 606 }
607 } 607 }
608 } 608 }
609 if (this.imageUrl) { 609 if (this.imageUrl) {
610 var str = this.imageUrl; 610 var str = this.imageUrl;
611 const [baseUrl, imageUrl] = str.split(/,/); 611 const [baseUrl, imageUrl] = str.split(/,/);
612 syllabusData.upload = imageUrl; 612 syllabusData.upload = imageUrl;
613 syllabusData.fileType = detectMimeType(imageUrl); 613 syllabusData.fileType = detectMimeType(imageUrl);
614 } 614 }
615 http() 615 http()
616 .put("/updateSyallabus", syllabusData) 616 .put("/updateSyallabus", syllabusData)
617 .then(response => { 617 .then(response => {
618 this.snackbar = true; 618 this.snackbar = true;
619 this.text = "Successfully Edit Existing Syllabus"; 619 this.text = "Successfully Edit Existing Syllabus";
620 this.color = "green"; 620 this.color = "green";
621 this.editLoading = false; 621 this.editLoading = false;
622 this.editSyllabusDialog = false; 622 this.editSyllabusDialog = false;
623 http() 623 http()
624 .get( 624 .get(
625 "/getSyallabusList", 625 "/getSyallabusList",
626 { params: { classId: this.addSyllabus.classId } }, 626 { params: { classId: this.addSyllabus.classId } },
627 { 627 {
628 headers: { Authorization: "Bearer " + this.token } 628 headers: { Authorization: "Bearer " + this.token }
629 } 629 }
630 ) 630 )
631 .then(response => { 631 .then(response => {
632 this.syllabusList = response.data.data; 632 this.syllabusList = response.data.data;
633 this.getSyallabusList(); 633 this.getSyallabusList();
634 this.snackbar = true; 634 this.snackbar = true;
635 this.color = "green"; 635 this.color = "green";
636 this.close(); 636 this.close();
637 }) 637 })
638 .catch(err => { 638 .catch(err => {
639 console.log("err====>", err); 639 console.log("err====>", err);
640 this.text = error.response.data.message; 640 this.text = error.response.data.message;
641 this.color = "error"; 641 this.color = "error";
642 }); 642 });
643 }) 643 })
644 .catch(error => { 644 .catch(error => {
645 this.editLoading = false; 645 this.editLoading = false;
646 }); 646 });
647 } 647 }
648 }, 648 },
649 getSyallabusList() { 649 getSyallabusList() {
650 this.showLoader = true; 650 this.showLoader = true;
651 http() 651 http()
652 .get( 652 .get(
653 "/getSyallabusList", 653 "/getSyallabusList",
654 { params: { classId: this.addSyllabus.classId } }, 654 { params: { classId: this.addSyllabus.classId } },
655 { 655 {
656 headers: { Authorization: "Bearer " + this.token } 656 headers: { Authorization: "Bearer " + this.token }
657 } 657 }
658 ) 658 )
659 .then(response => { 659 .then(response => {
660 this.syllabusList = response.data.data; 660 this.syllabusList = response.data.data;
661 this.showLoader = false; 661 this.showLoader = false;
662 }) 662 })
663 .catch(err => { 663 .catch(err => {
664 this.showLoader = false; 664 this.showLoader = false;
665 }); 665 });
666 }, 666 },
667 getClass() { 667 getClass() {
668 http() 668 http()
669 .get("/getClassesList", { 669 .get("/getClassesList", {
670 headers: { Authorization: "Bearer " + this.token } 670 headers: { Authorization: "Bearer " + this.token }
671 }) 671 })
672 .then(response => { 672 .then(response => {
673 this.classList = response.data.data; 673 this.classList = response.data.data;
674 }) 674 })
675 .catch(error => { 675 .catch(error => {
676 if (error.response.status === 401) { 676 if (error.response.status === 401) {
677 this.$router.replace({ path: "/" }); 677 this.$router.replace({ path: "/" });
678 this.$store.dispatch("setToken", null); 678 this.$store.dispatch("setToken", null);
679 this.$store.dispatch("Id", null); 679 this.$store.dispatch("Id", null);
680 } 680 }
681 }); 681 });
682 }, 682 },
683 getSections(_id) { 683 getSections(_id) {
684 var token = this.$store.state.token; 684 var token = this.$store.state.token;
685 this.showLoader = true; 685 this.showLoader = true;
686 http() 686 http()
687 .get( 687 .get(
688 "/getSectionsList", 688 "/getSectionsList",
689 { params: { classId: _id } }, 689 { params: { classId: _id } },
690 { 690 {
691 headers: { Authorization: "Bearer " + token } 691 headers: { Authorization: "Bearer " + token }
692 } 692 }
693 ) 693 )
694 .then(response => { 694 .then(response => {
695 this.addSection = response.data.data; 695 this.addSection = response.data.data;
696 this.showLoader = false; 696 this.showLoader = false;
697 }) 697 })
698 .catch(err => { 698 .catch(err => {
699 this.showLoader = false; 699 this.showLoader = false;
700 }); 700 });
701 }, 701 },
702 displaySearch() { 702 displaySearch() {
703 (this.show = false), (this.showSearch = true); 703 (this.show = false), (this.showSearch = true);
704 }, 704 },
705 closeSearch() { 705 closeSearch() {
706 this.showSearch = false; 706 this.showSearch = false;
707 this.show = true; 707 this.show = true;
708 this.search = ""; 708 this.search = "";
709 }, 709 },
710 710
711 async generatePDF2Canvas(item) { 711 async generatePDF2Canvas(item) {
712 // console.log("documentUrl", documentUrl); 712 // console.log("documentUrl", documentUrl);
713 // this.loadingPdf = true; 713 // this.loadingPdf = true;
714 // const el = this.$refs.printMe; 714 // const el = this.$refs.printMe;
715 // add option type to get the image version 715 // add option type to get the image version
716 // if not provided the promise will return 716 // if not provided the promise will return
717 // the canvas. 717 // the canvas.
718 // const options = { 718 // const options = {
719 // type: "dataURL" 719 // type: "dataURL"
720 // }; 720 // };
721 // this.output = await this.$html2canvas(el, options); 721 // this.output = await this.$html2canvas(el, options);
722 // console.log("el,option", this.output); 722 // console.log("el,option", this.output);
723 // if (this.output) { 723 // if (this.output) {
724 // this.loadingPdf = false; 724 // this.loadingPdf = false;
725 // } 725 // }
726 // let doc = new jsPDF(); 726 // let doc = new jsPDF();
727 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); 727 // doc.addImage(this.output,"JPEG", 5, 10, 200, 280);
728 // doc.save("File.pdf"); 728 // doc.save("File.pdf");
729 729
730 // function download(documentUrl, filename) { 730 // function download(documentUrl, filename) {
731 // fetch(documentUrl).then(function(t) { 731 // fetch(documentUrl).then(function(t) {
732 // return t.blob().then(b => { 732 // return t.blob().then(b => {
733 // var a = document.createElement("a"); 733 // var a = document.createElement("a");
734 // a.href = URL.createObjectURL(b); 734 // a.href = URL.createObjectURL(b);
735 // a.setAttribute("download", "filename"); 735 // a.setAttribute("download", "filename");
736 // a.click(); 736 // a.click();
737 // }); 737 // });
738 // }); 738 // });
739 // } 739 // }
740 var dataType = ""; 740 var dataType = "";
741 var type = ""; 741 var type = "";
742 if (item.fileType == "image") { 742 if (item.fileType == "image") {
743 dataType = "file.jpg"; 743 dataType = "file.jpg";
744 } else if (item.fileType == "other") { 744 } else if (item.fileType == "other") {
745 dataType = "file.pdf"; 745 dataType = "file.pdf";
746 type = "application/pdf"; 746 type = "application/pdf";
747 } 747 }
748 var FileSaver = require("file-saver"); 748 var FileSaver = require("file-saver");
749 FileSaver.saveAs(item.documentUrl, "image.jpg"); 749 FileSaver.saveAs(item.documentUrl, "image.jpg");
750 750
751 // var blob = new Blob([item.documentUrl], { 751 // var blob = new Blob([item.documentUrl], {
752 // type: type 752 // type: type
753 // }); 753 // });
754 // FileSaver.saveAs(blob, dataType); 754 // FileSaver.saveAs(blob, dataType);
755 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 755 // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
756 // console.log("document", item.documentUrl); 756 // console.log("document", item.documentUrl);
757 // const link = document.createElement("a"); 757 // const link = document.createElement("a");
758 // link.href = url; 758 // link.href = url;
759 // link.setAttribute("download", dataType); //or any other extension 759 // link.setAttribute("download", dataType); //or any other extension
760 // document.body.appendChild(link); 760 // document.body.appendChild(link);
761 // link.click(); 761 // link.click();
762 762
763 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); 763 // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
764 // const link = document.createElement('a') 764 // const link = document.createElement('a')
765 // link.href = URL.createObjectURL(blob) 765 // link.href = URL.createObjectURL(blob)
766 // link.download = dataType 766 // link.download = dataType
767 // link.click() 767 // link.click()
768 // URL.revokeObjectURL(link.href) 768 // URL.revokeObjectURL(link.href)
769 } 769 }
770 }, 770 },
771 mounted() { 771 mounted() {
772 this.token = this.$store.state.token; 772 this.token = this.$store.state.token;
773 this.role = this.$store.state.role; 773 this.role = this.$store.state.role;
774 this.getClass(); 774 this.getClass();
775 } 775 }
776 }; 776 };
777 </script> 777 </script>