viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit fa4edf92926eb8116080de2ee3efc183ff282be3

Authored by Shikha Mishra
1 parent 8669ee94e5
Exists in master and in 3 other branches amber-development, development, ui-design

added option of upload images and pdf

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