viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit fe0d05d2976de695f6903dea1013d0cb390a8df5

Authored by Neeraj Sharma
1 parent 0fa3b3a791
Exists in master and in 3 other branches amber-development, development, ui-design

complete design and functionality of id card and admit card

Showing 4 changed files with 330 additions and 295 deletions   Show diff stats
src/pages/Exam/examSchedule.vue
Diff comments   View file @fe0d05d
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Exam Schedule****** --> 3 <!-- ****** Edit Exam Schedule****** -->
4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable> 4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>
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 Exam Schedule</label> 8 <label class="title text-xs-center">Edit Exam Schedule</label>
9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12> 16 <v-flex xs12 sm12>
17 <v-layout> 17 <v-layout>
18 <v-flex xs4 class="pt-4 subheading"> 18 <v-flex xs4 class="pt-4 subheading">
19 <label class="right">Exam Name:</label> 19 <label class="right">Exam Name:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs7 class="ml-3"> 21 <v-flex xs7 class="ml-3">
22 <v-select 22 <v-select
23 :rules="examRules" 23 :rules="examRules"
24 :items="examList" 24 :items="examList"
25 v-model="editedItem.examId" 25 v-model="editedItem.examId"
26 label="Select your Exam Name" 26 label="Select your Exam Name"
27 item-text="examName" 27 item-text="examName"
28 item-value="_id" 28 item-value="_id"
29 ></v-select> 29 ></v-select>
30 </v-flex> 30 </v-flex>
31 </v-layout> 31 </v-layout>
32 </v-flex> 32 </v-flex>
33 <v-flex xs12 sm12> 33 <v-flex xs12 sm12>
34 <v-layout> 34 <v-layout>
35 <v-flex xs4 class="pt-4 subheading"> 35 <v-flex xs4 class="pt-4 subheading">
36 <label class="right">Class:</label> 36 <label class="right">Class:</label>
37 </v-flex> 37 </v-flex>
38 <v-flex xs7 class="ml-3"> 38 <v-flex xs7 class="ml-3">
39 <v-select 39 <v-select
40 v-model="editedItem.classId" 40 v-model="editedItem.classId"
41 label="Select your Class" 41 label="Select your Class"
42 type="text" 42 type="text"
43 :items="classList" 43 :items="classList"
44 item-text="classNum" 44 item-text="classNum"
45 item-value="_id" 45 item-value="_id"
46 @change="getSections(editedItem.classId)" 46 @change="getSections(editedItem.classId)"
47 required 47 required
48 ></v-select> 48 ></v-select>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-flex> 51 </v-flex>
52 <v-flex xs12 sm12> 52 <v-flex xs12 sm12>
53 <v-layout> 53 <v-layout>
54 <v-flex xs4 class="pt-4 subheading"> 54 <v-flex xs4 class="pt-4 subheading">
55 <label class="right">Subject Name:</label> 55 <label class="right">Subject Name:</label>
56 </v-flex> 56 </v-flex>
57 <v-flex xs7 class="ml-3"> 57 <v-flex xs7 class="ml-3">
58 <v-select 58 <v-select
59 :items="subjects" 59 :items="subjects"
60 label="Select your Subject" 60 label="Select your Subject"
61 v-model="editedItem.subjectName" 61 v-model="editedItem.subjectName"
62 item-text="subjectName" 62 item-text="subjectName"
63 item-value="subjectName" 63 item-value="subjectName"
64 name="Select Subject" 64 name="Select Subject"
65 required 65 required
66 ></v-select> 66 ></v-select>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Date:</label> 73 <label class="right">Date:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs7 class="ml-3"> 75 <v-flex xs7 class="ml-3">
76 <v-menu 76 <v-menu
77 ref="editDate" 77 ref="editDate"
78 :close-on-content-click="false" 78 :close-on-content-click="false"
79 v-model="editDate" 79 v-model="editDate"
80 :nudge-right="40" 80 :nudge-right="40"
81 :return-value.sync="editDate" 81 :return-value.sync="editDate"
82 lazy 82 lazy
83 transition="scale-transition" 83 transition="scale-transition"
84 offset-y 84 offset-y
85 full-width 85 full-width
86 min-width="290px" 86 min-width="290px"
87 > 87 >
88 <v-text-field 88 <v-text-field
89 slot="activator" 89 slot="activator"
90 v-model="editedItem.date" 90 v-model="editedItem.date"
91 label="Select Date" 91 label="Select Date"
92 append-icon="event" 92 append-icon="event"
93 readonly 93 readonly
94 ></v-text-field> 94 ></v-text-field>
95 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> 95 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
96 </v-menu> 96 </v-menu>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 </v-flex> 99 </v-flex>
100 <v-flex xs12 sm12> 100 <v-flex xs12 sm12>
101 <v-layout> 101 <v-layout>
102 <v-flex xs4 class="pt-4 subheading"> 102 <v-flex xs4 class="pt-4 subheading">
103 <label class="right">Time From:</label> 103 <label class="right">Time From:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs7 class="ml-3"> 105 <v-flex xs7 class="ml-3">
106 <v-menu 106 <v-menu
107 ref="menuEdit" 107 ref="menuEdit"
108 :close-on-content-click="false" 108 :close-on-content-click="false"
109 v-model="menuEdit" 109 v-model="menuEdit"
110 :nudge-right="40" 110 :nudge-right="40"
111 :return-value.sync="editedItem.timeFrom" 111 :return-value.sync="editedItem.timeFrom"
112 lazy 112 lazy
113 transition="scale-transition" 113 transition="scale-transition"
114 offset-y 114 offset-y
115 full-width 115 full-width
116 max-width="290px" 116 max-width="290px"
117 min-width="290px" 117 min-width="290px"
118 > 118 >
119 <v-text-field 119 <v-text-field
120 slot="activator" 120 slot="activator"
121 v-model="editedItem.timeFrom" 121 v-model="editedItem.timeFrom"
122 label="Select your time From" 122 label="Select your time From"
123 append-icon="access_time" 123 append-icon="access_time"
124 readonly 124 readonly
125 ></v-text-field> 125 ></v-text-field>
126 <v-time-picker 126 <v-time-picker
127 v-model="editedItem.timeIn" 127 v-model="editedItem.timeIn"
128 @change="$refs.menuEdit.save(editedItem.timeIn)" 128 @change="$refs.menuEdit.save(editedItem.timeIn)"
129 ></v-time-picker> 129 ></v-time-picker>
130 </v-menu> 130 </v-menu>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex> 133 </v-flex>
134 <v-flex xs12 sm12> 134 <v-flex xs12 sm12>
135 <v-layout> 135 <v-layout>
136 <v-flex xs4 class="pt-4 subheading"> 136 <v-flex xs4 class="pt-4 subheading">
137 <label class="right">Time To:</label> 137 <label class="right">Time To:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs7 class="ml-3"> 139 <v-flex xs7 class="ml-3">
140 <v-menu 140 <v-menu
141 ref="timeToEdit" 141 ref="timeToEdit"
142 :close-on-content-click="false" 142 :close-on-content-click="false"
143 v-model="timeToEdit" 143 v-model="timeToEdit"
144 :nudge-right="40" 144 :nudge-right="40"
145 :return-value.sync="editedItem.timeTo" 145 :return-value.sync="editedItem.timeTo"
146 lazy 146 lazy
147 transition="scale-transition" 147 transition="scale-transition"
148 offset-y 148 offset-y
149 full-width 149 full-width
150 max-width="290px" 150 max-width="290px"
151 min-width="290px" 151 min-width="290px"
152 > 152 >
153 <v-text-field 153 <v-text-field
154 slot="activator" 154 slot="activator"
155 v-model="editedItem.timeTo" 155 v-model="editedItem.timeTo"
156 label="Select your Time To" 156 label="Select your Time To"
157 append-icon="access_time" 157 append-icon="access_time"
158 readonly 158 readonly
159 ></v-text-field> 159 ></v-text-field>
160 <v-time-picker 160 <v-time-picker
161 v-model="editedItem.timeTo" 161 v-model="editedItem.timeTo"
162 @change="$refs.timeToEdit.save(editedItem.timeTo)" 162 @change="$refs.timeToEdit.save(editedItem.timeTo)"
163 ></v-time-picker> 163 ></v-time-picker>
164 </v-menu> 164 </v-menu>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 <v-flex xs12 sm12> 168 <v-flex xs12 sm12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right">Room:</label> 171 <label class="right">Room:</label>
172 </v-flex> 172 </v-flex>
173 <v-flex xs7 class="ml-3"> 173 <v-flex xs7 class="ml-3">
174 <v-text-field 174 <v-text-field
175 placeholder="fill your room" 175 placeholder="fill your room"
176 v-model="editedItem.room" 176 v-model="editedItem.room"
177 @keyup.enter="save" 177 @keyup.enter="save"
178 ></v-text-field> 178 ></v-text-field>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs12> 184 <v-flex xs12>
185 <v-card-actions> 185 <v-card-actions>
186 <v-spacer></v-spacer> 186 <v-spacer></v-spacer>
187 <v-btn round dark @click="update" class="add-button">Save</v-btn> 187 <v-btn round dark @click="update" class="add-button">Save</v-btn>
188 </v-card-actions> 188 </v-card-actions>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-container> 191 </v-container>
192 </v-form> 192 </v-form>
193 </v-card-text> 193 </v-card-text>
194 </v-card> 194 </v-card>
195 </v-dialog> 195 </v-dialog>
196 196
197 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 197 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
198 198
199 <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> 199 <v-dialog v-model="profileExamScheduleDialog" max-width="600px">
200 <v-card flat class="card-style pa-3" dark> 200 <v-card flat class="card-style pa-3" dark>
201 <v-layout> 201 <v-layout>
202 <v-flex xs12> 202 <v-flex xs12>
203 <label class="title text-xs-center">View Exam Schedule</label> 203 <label class="title text-xs-center">View Exam Schedule</label>
204 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> 204 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 <v-card-text> 207 <v-card-text>
208 <v-container grid-list-md> 208 <v-container grid-list-md>
209 <v-layout wrap> 209 <v-layout wrap>
210 <v-flex> 210 <v-flex>
211 <v-layout> 211 <v-layout>
212 <v-flex xs5 sm6> 212 <v-flex xs5 sm6>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Exam Name:</b> 214 <b>Exam Name:</b>
215 </h5> 215 </h5>
216 </v-flex> 216 </v-flex>
217 <v-flex sm6 xs8> 217 <v-flex sm6 xs8>
218 <h5 class="my-1">{{ editedItem.examId}}</h5> 218 <h5 class="my-1">{{ editedItem.examId}}</h5>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 <v-layout> 221 <v-layout>
222 <v-flex xs5 sm6> 222 <v-flex xs5 sm6>
223 <h5 class="right my-1"> 223 <h5 class="right my-1">
224 <b>Class:</b> 224 <b>Class:</b>
225 </h5> 225 </h5>
226 </v-flex> 226 </v-flex>
227 <v-flex sm6 xs8> 227 <v-flex sm6 xs8>
228 <h5 class="my-1">{{ editedItem.classId }}</h5> 228 <h5 class="my-1">{{ editedItem.classId }}</h5>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 <v-layout> 231 <v-layout>
232 <v-flex xs5 sm6> 232 <v-flex xs5 sm6>
233 <h5 class="right my-1"> 233 <h5 class="right my-1">
234 <b>Section:</b> 234 <b>Section:</b>
235 </h5> 235 </h5>
236 </v-flex> 236 </v-flex>
237 <v-flex sm6 xs8> 237 <v-flex sm6 xs8>
238 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 238 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 <v-layout> 241 <v-layout>
242 <v-flex xs5 sm6> 242 <v-flex xs5 sm6>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Subject Name:</b> 244 <b>Subject Name:</b>
245 </h5> 245 </h5>
246 </v-flex> 246 </v-flex>
247 <v-flex sm6 xs8> 247 <v-flex sm6 xs8>
248 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 248 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 <v-layout> 251 <v-layout>
252 <v-flex xs5 sm6> 252 <v-flex xs5 sm6>
253 <h5 class="right my-1"> 253 <h5 class="right my-1">
254 <b>Date:</b> 254 <b>Date:</b>
255 </h5> 255 </h5>
256 </v-flex> 256 </v-flex>
257 <v-flex sm6 xs8> 257 <v-flex sm6 xs8>
258 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 258 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 <v-layout> 261 <v-layout>
262 <v-flex xs5 sm6> 262 <v-flex xs5 sm6>
263 <h5 class="right my-1"> 263 <h5 class="right my-1">
264 <b>Time From:</b> 264 <b>Time From:</b>
265 </h5> 265 </h5>
266 </v-flex> 266 </v-flex>
267 <v-flex sm6 xs8> 267 <v-flex sm6 xs8>
268 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 268 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 <v-layout> 271 <v-layout>
272 <v-flex xs5 sm6> 272 <v-flex xs5 sm6>
273 <h5 class="right my-1"> 273 <h5 class="right my-1">
274 <b>Time To:</b> 274 <b>Time To:</b>
275 </h5> 275 </h5>
276 </v-flex> 276 </v-flex>
277 <v-flex sm6 xs8> 277 <v-flex sm6 xs8>
278 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 278 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
279 </v-flex> 279 </v-flex>
280 </v-layout> 280 </v-layout>
281 <v-layout> 281 <v-layout>
282 <v-flex xs5 sm6> 282 <v-flex xs5 sm6>
283 <h5 class="right my-1"> 283 <h5 class="right my-1">
284 <b>Room:</b> 284 <b>Room:</b>
285 </h5> 285 </h5>
286 </v-flex> 286 </v-flex>
287 <v-flex sm6 xs8> 287 <v-flex sm6 xs8>
288 <h5 class="my-1">{{ editedItem.room }}</h5> 288 <h5 class="my-1">{{ editedItem.room }}</h5>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-flex> 291 </v-flex>
292 </v-layout> 292 </v-layout>
293 </v-container> 293 </v-container>
294 </v-card-text> 294 </v-card-text>
295 </v-card> 295 </v-card>
296 </v-dialog> 296 </v-dialog>
297 <!-- ***** Exam Schedule TABLE****** --> 297 <!-- ***** Exam Schedule TABLE****** -->
298 <v-toolbar color="transparent" flat> 298 <v-toolbar color="transparent" flat>
299 <v-btn 299 <v-btn
300 fab 300 fab
301 dark 301 dark
302 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 302 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
303 small 303 small
304 @click="addExamScheduleDialog = true" 304 @click="addExamScheduleDialog = true"
305 > 305 >
306 <v-icon dark>add</v-icon> 306 <v-icon dark>add</v-icon>
307 </v-btn> 307 </v-btn>
308 <v-btn 308 <v-btn
309 v-if="role != 'TEACHER' " 309 v-if="role != 'TEACHER' "
310 round 310 round
311 class="open-dialog-button hidden-sm-only hidden-xs-only" 311 class="open-dialog-button hidden-sm-only hidden-xs-only"
312 dark 312 dark
313 @click="addExamScheduleDialog = true" 313 @click="addExamScheduleDialog = true"
314 > 314 >
315 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule 315 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
316 </v-btn> 316 </v-btn>
317 <v-spacer></v-spacer> 317 <v-spacer></v-spacer>
318 <v-flex xs8 sm3 md2 class="mr-3"> 318 <v-flex xs8 sm3 md2 class="mr-3">
319 <v-select 319 <v-select
320 v-model="getScheduleData.classId" 320 v-model="getScheduleData.classId"
321 label="Select your class" 321 label="Select your class"
322 type="text" 322 type="text"
323 :items="classList" 323 :items="classList"
324 item-text="classNum" 324 item-text="classNum"
325 item-value="_id" 325 item-value="_id"
326 @change="getSchedulesList()" 326 @change="getSchedulesList()"
327 required 327 required
328 ></v-select> 328 ></v-select>
329 </v-flex> 329 </v-flex>
330 <v-card-title class="body-1" v-show="show"> 330 <v-card-title class="body-1" v-show="show">
331 <v-btn icon large flat @click="displaySearch"> 331 <v-btn icon large flat @click="displaySearch">
332 <v-avatar size="27"> 332 <v-avatar size="27">
333 <img src="/static/icon/search.png" alt="icon" /> 333 <img src="/static/icon/search.png" alt="icon" />
334 </v-avatar> 334 </v-avatar>
335 </v-btn> 335 </v-btn>
336 </v-card-title> 336 </v-card-title>
337 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 337 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
338 <v-layout> 338 <v-layout>
339 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 339 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
340 <v-icon @click="closeSearch" color="error">close</v-icon> 340 <v-icon @click="closeSearch" color="error">close</v-icon>
341 </v-layout> 341 </v-layout>
342 </v-flex> 342 </v-flex>
343 </v-toolbar> 343 </v-toolbar>
344 <v-data-table 344 <v-data-table
345 :headers="headers" 345 :headers="headers"
346 :items="ScheduleData" 346 :items="ScheduleData"
347 :pagination.sync="pagination" 347 :pagination.sync="pagination"
348 :search="search" 348 :search="search"
349 > 349 >
350 <template slot="items" slot-scope="props"> 350 <template slot="items" slot-scope="props">
351 <tr class="tr"> 351 <tr class="tr">
352 <td class="td td-row">{{ props.index + 1}}</td> 352 <td class="td td-row">{{ props.index + 1}}</td>
353 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> 353 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>
354 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> 354 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
355 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> 355 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
356 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 356 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
357 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 357 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
358 <td class="td td-row text-xs-center">{{ props.item.room }}</td> 358 <td class="td td-row text-xs-center">{{ props.item.room }}</td>
359 <td class="td td-row text-xs-center"> 359 <td class="td td-row text-xs-center">
360 <span> 360 <span>
361 <v-tooltip top > 361 <v-tooltip top>
362 <img 362 <img
363 slot="activator" 363 slot="activator"
364 style="cursor:pointer; width:25px; height:25px; " 364 style="cursor:pointer; width:25px; height:25px; "
365 class="mr-3" 365 class="mr-3"
366 @click="profile(props.item)" 366 @click="profile(props.item)"
367 src="/static/icon/view.png" 367 src="/static/icon/view.png"
368 /> 368 />
369 <span>View</span> 369 <span>View</span>
370 </v-tooltip> 370 </v-tooltip>
371 <v-tooltip top v-if="role != 'TEACHER' "> 371 <v-tooltip top v-if="role != 'TEACHER' ">
372 <img 372 <img
373 slot="activator" 373 slot="activator"
374 style="cursor:pointer; width:20px; height:18px; " 374 style="cursor:pointer; width:20px; height:18px; "
375 class="mr-3" 375 class="mr-3"
376 @click="editItem(props.item)" 376 @click="editItem(props.item)"
377 src="/static/icon/edit.png" 377 src="/static/icon/edit.png"
378 /> 378 />
379 <span>Edit</span> 379 <span>Edit</span>
380 </v-tooltip> 380 </v-tooltip>
381 <v-tooltip top v-if="role != 'TEACHER' "> 381 <v-tooltip top v-if="role != 'TEACHER' ">
382 <img 382 <img
383 slot="activator" 383 slot="activator"
384 style="cursor:pointer; width:20px; height:20px; " 384 style="cursor:pointer; width:20px; height:20px; "
385 @click="deleteSchedule(props.item)" 385 @click="deleteSchedule(props.item)"
386 src="/static/icon/delete.png" 386 src="/static/icon/delete.png"
387 /> 387 />
388 <span>Delete</span> 388 <span>Delete</span>
389 </v-tooltip> 389 </v-tooltip>
390 </span> 390 </span>
391 </td> 391 </td>
392 </tr> 392 </tr>
393 </template> 393 </template>
394 <v-alert 394 <v-alert
395 slot="no-results" 395 slot="no-results"
396 :value="true" 396 :value="true"
397 color="error" 397 color="error"
398 icon="warning" 398 icon="warning"
399 >Your search for "{{ search }}" found no results.</v-alert> 399 >Your search for "{{ search }}" found no results.</v-alert>
400 </v-data-table> 400 </v-data-table>
401 401
402 <!-- ****** ADD Exam Schedule ****** --> 402 <!-- ****** ADD Exam Schedule ****** -->
403 <v-dialog v-model="addExamScheduleDialog" max-width="600"> 403 <v-dialog v-model="addExamScheduleDialog" max-width="600">
404 <v-card flat class="card-style pa-2" dark> 404 <v-card flat class="card-style pa-2" dark>
405 <v-layout> 405 <v-layout>
406 <v-flex xs12> 406 <v-flex xs12>
407 <label class="title text-xs-center">Add Exam Schedule</label> 407 <label class="title text-xs-center">Add Exam Schedule</label>
408 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> 408 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-form ref="form" v-model="valid" lazy-validation> 411 <v-form ref="form" v-model="valid" lazy-validation>
412 <v-container fluid> 412 <v-container fluid>
413 <v-flex xs12> 413 <v-flex xs12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs5 class="pt-4 subheading"> 415 <v-flex xs5 class="pt-4 subheading">
416 <label class="right">Exam Name:</label> 416 <label class="right">Exam Name:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs7 sm7 md6 class="ml-3"> 418 <v-flex xs7 sm7 md6 class="ml-3">
419 <v-select 419 <v-select
420 label="Select your Exam Name" 420 label="Select your Exam Name"
421 :rules="examRules" 421 :rules="examRules"
422 :items="examList" 422 :items="examList"
423 v-model="addSchedule.examId" 423 v-model="addSchedule.examId"
424 item-text="examName" 424 item-text="examName"
425 item-value="_id" 425 item-value="_id"
426 ></v-select> 426 ></v-select>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-flex> 429 </v-flex>
430 <v-flex xs12> 430 <v-flex xs12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 class="pt-4 subheading"> 432 <v-flex xs5 class="pt-4 subheading">
433 <label class="right">Class:</label> 433 <label class="right">Class:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs7 sm7 md6 class="ml-3"> 435 <v-flex xs7 sm7 md6 class="ml-3">
436 <v-select 436 <v-select
437 v-model="addSchedule.classId" 437 v-model="addSchedule.classId"
438 label="Select your class" 438 label="Select your class"
439 type="text" 439 type="text"
440 :items="classList" 440 :items="classList"
441 item-text="classNum" 441 item-text="classNum"
442 item-value="_id" 442 item-value="_id"
443 :rules="classRules" 443 :rules="classRules"
444 @change="getSections(addSchedule.classId)" 444 @change="getSections(addSchedule.classId)"
445 required 445 required
446 ></v-select> 446 ></v-select>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 </v-flex> 449 </v-flex>
450 <v-flex xs12> 450 <v-flex xs12>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 class="pt-4 subheading"> 452 <v-flex xs5 class="pt-4 subheading">
453 <label class="right">Section:</label> 453 <label class="right">Section:</label>
454 </v-flex> 454 </v-flex>
455 <v-flex xs7 sm7 md6 class="ml-3"> 455 <v-flex xs7 sm7 md6 class="ml-3">
456 <v-select 456 <v-select
457 :items="addSection" 457 :items="addSection"
458 label="Select Section" 458 label="Select Section"
459 v-model="addSchedule.sectionId" 459 v-model="addSchedule.sectionId"
460 item-text="name" 460 item-text="name"
461 item-value="_id" 461 item-value="_id"
462 name="Select Section" 462 name="Select Section"
463 :rules="sectionRules" 463 :rules="sectionRules"
464 required 464 required
465 ></v-select> 465 ></v-select>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 <v-flex xs12> 469 <v-flex xs12>
470 <v-layout> 470 <v-layout>
471 <v-flex xs5 class="pt-4 subheading"> 471 <v-flex xs5 class="pt-4 subheading">
472 <label class="right">Subject Name:</label> 472 <label class="right">Subject Name:</label>
473 </v-flex> 473 </v-flex>
474 <v-flex xs7 sm7 md6 class="ml-3"> 474 <v-flex xs7 sm7 md6 class="ml-3">
475 <v-select 475 <v-select
476 :items="subjects" 476 :items="subjects"
477 label="Select Subject" 477 label="Select Subject"
478 v-model="addSchedule.subjectName" 478 v-model="addSchedule.subjectName"
479 item-text="subjectName" 479 item-text="subjectName"
480 item-value="subjectName" 480 item-value="subjectName"
481 name="Select Section" 481 name="Select Section"
482 :rules="subjectRules" 482 :rules="subjectRules"
483 required 483 required
484 ></v-select> 484 ></v-select>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-flex xs12> 488 <v-flex xs12>
489 <v-layout> 489 <v-layout>
490 <v-flex xs5 class="pt-4 subheading"> 490 <v-flex xs5 class="pt-4 subheading">
491 <label class="right">Date:</label> 491 <label class="right">Date:</label>
492 </v-flex> 492 </v-flex>
493 <v-flex xs7 sm7 md6 class="ml-3"> 493 <v-flex xs7 sm7 md6 class="ml-3">
494 <v-menu 494 <v-menu
495 ref="menu2" 495 ref="menu2"
496 :close-on-content-click="false" 496 :close-on-content-click="false"
497 v-model="menu2" 497 v-model="menu2"
498 :nudge-right="40" 498 :nudge-right="40"
499 :return-value.sync="addSchedule.date" 499 :return-value.sync="addSchedule.date"
500 lazy 500 lazy
501 transition="scale-transition" 501 transition="scale-transition"
502 offset-y 502 offset-y
503 full-width 503 full-width
504 min-width="290px" 504 min-width="290px"
505 > 505 >
506 <v-text-field 506 <v-text-field
507 slot="activator" 507 slot="activator"
508 v-model="addSchedule.date" 508 v-model="addSchedule.date"
509 :rules="examScheduleDateRules" 509 :rules="examScheduleDateRules"
510 label="Select Date" 510 label="Select Date"
511 append-icon="event" 511 append-icon="event"
512 readonly 512 readonly
513 ></v-text-field> 513 ></v-text-field>
514 <v-date-picker 514 <v-date-picker
515 v-model="addSchedule.date" 515 v-model="addSchedule.date"
516 @input="$refs.menu2.save(addSchedule.date)" 516 @input="$refs.menu2.save(addSchedule.date)"
517 ></v-date-picker> 517 ></v-date-picker>
518 </v-menu> 518 </v-menu>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 <v-flex xs12> 522 <v-flex xs12>
523 <v-layout> 523 <v-layout>
524 <v-flex xs5 class="pt-4 subheading"> 524 <v-flex xs5 class="pt-4 subheading">
525 <label class="right">Time From:</label> 525 <label class="right">Time From:</label>
526 </v-flex> 526 </v-flex>
527 <v-flex xs7 sm7 md6 class="ml-3"> 527 <v-flex xs7 sm7 md6 class="ml-3">
528 <v-menu 528 <v-menu
529 ref="menuA" 529 ref="menuA"
530 :close-on-content-click="false" 530 :close-on-content-click="false"
531 v-model="menuB" 531 v-model="menuB"
532 :nudge-right="40" 532 :nudge-right="40"
533 :return-value.sync="addSchedule.timeFrom" 533 :return-value.sync="addSchedule.timeFrom"
534 lazy 534 lazy
535 transition="scale-transition" 535 transition="scale-transition"
536 offset-y 536 offset-y
537 full-width 537 full-width
538 max-width="290px" 538 max-width="290px"
539 min-width="290px" 539 min-width="290px"
540 > 540 >
541 <v-text-field 541 <v-text-field
542 slot="activator" 542 slot="activator"
543 v-model="addSchedule.timeIn" 543 v-model="addSchedule.timeIn"
544 label="Select your time From" 544 label="Select your time From"
545 append-icon="access_time" 545 append-icon="access_time"
546 :rules="timeInRules" 546 :rules="timeInRules"
547 readonly 547 readonly
548 ></v-text-field> 548 ></v-text-field>
549 <v-time-picker 549 <v-time-picker
550 v-model="addSchedule.timeIn" 550 v-model="addSchedule.timeIn"
551 @change="$refs.menuA.save(addSchedule.timeIn)" 551 @change="$refs.menuA.save(addSchedule.timeIn)"
552 ></v-time-picker> 552 ></v-time-picker>
553 </v-menu> 553 </v-menu>
554 </v-flex> 554 </v-flex>
555 </v-layout> 555 </v-layout>
556 </v-flex> 556 </v-flex>
557 <v-flex xs12> 557 <v-flex xs12>
558 <v-layout> 558 <v-layout>
559 <v-flex xs5 class="pt-4 subheading"> 559 <v-flex xs5 class="pt-4 subheading">
560 <label class="right">Time To:</label> 560 <label class="right">Time To:</label>
561 </v-flex> 561 </v-flex>
562 <v-flex xs7 sm7 md6 class="ml-3"> 562 <v-flex xs7 sm7 md6 class="ml-3">
563 <v-menu 563 <v-menu
564 ref="menu" 564 ref="menu"
565 :close-on-content-click="false" 565 :close-on-content-click="false"
566 v-model="menu1" 566 v-model="menu1"
567 :nudge-right="40" 567 :nudge-right="40"
568 :return-value.sync="addSchedule.timeTo" 568 :return-value.sync="addSchedule.timeTo"
569 lazy 569 lazy
570 transition="scale-transition" 570 transition="scale-transition"
571 offset-y 571 offset-y
572 full-width 572 full-width
573 max-width="290px" 573 max-width="290px"
574 min-width="290px" 574 min-width="290px"
575 > 575 >
576 <v-text-field 576 <v-text-field
577 slot="activator" 577 slot="activator"
578 v-model="addSchedule.timeTo" 578 v-model="addSchedule.timeTo"
579 label="Select your Time To" 579 label="Select your Time To"
580 append-icon="access_time" 580 append-icon="access_time"
581 :rules="timeOutRules" 581 :rules="timeOutRules"
582 readonly 582 readonly
583 ></v-text-field> 583 ></v-text-field>
584 <v-time-picker 584 <v-time-picker
585 v-model="addSchedule.timeTo" 585 v-model="addSchedule.timeTo"
586 @change="$refs.menu.save(addSchedule.timeTo)" 586 @change="$refs.menu.save(addSchedule.timeTo)"
587 ></v-time-picker> 587 ></v-time-picker>
588 </v-menu> 588 </v-menu>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 </v-flex> 591 </v-flex>
592 <v-flex xs12> 592 <v-flex xs12>
593 <v-layout> 593 <v-layout>
594 <v-flex xs5 class="pt-4 subheading"> 594 <v-flex xs5 class="pt-4 subheading">
595 <label class="right">Room:</label> 595 <label class="right">Room:</label>
596 </v-flex> 596 </v-flex>
597 <v-flex xs7 sm7 md6 class="ml-3"> 597 <v-flex xs7 sm7 md6 class="ml-3">
598 <v-text-field 598 <v-text-field
599 placeholder="fill your room" 599 placeholder="fill your room"
600 :rules="roomRules" 600 :rules="roomRules"
601 v-model="addSchedule.room" 601 v-model="addSchedule.room"
602 @keyup.enter="submit" 602 @keyup.enter="submit"
603 ></v-text-field> 603 ></v-text-field>
604 </v-flex> 604 </v-flex>
605 </v-layout> 605 </v-layout>
606 </v-flex> 606 </v-flex>
607 <v-layout> 607 <v-layout>
608 <v-flex xs12> 608 <v-flex xs12>
609 <v-card-actions> 609 <v-card-actions>
610 <v-spacer class="hidden-xs-only"></v-spacer> 610 <v-spacer class="hidden-xs-only"></v-spacer>
611 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 611 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
612 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 612 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
613 </v-card-actions> 613 </v-card-actions>
614 </v-flex> 614 </v-flex>
615 </v-layout> 615 </v-layout>
616 </v-container> 616 </v-container>
617 </v-form> 617 </v-form>
618 </v-card> 618 </v-card>
619 </v-dialog> 619 </v-dialog>
620 <v-snackbar 620 <v-snackbar
621 :timeout="timeout" 621 :timeout="timeout"
622 :top="y === 'top'" 622 :top="y === 'top'"
623 :right="x === 'right'" 623 :right="x === 'right'"
624 :vertical="mode === 'vertical'" 624 :vertical="mode === 'vertical'"
625 v-model="snackbar" 625 v-model="snackbar"
626 :color="color" 626 :color="color"
627 >{{ text }}</v-snackbar> 627 >{{ text }}</v-snackbar>
628 <div class="loader" v-if="showLoader"> 628 <div class="loader" v-if="showLoader">
629 <v-progress-circular indeterminate color="white"></v-progress-circular> 629 <v-progress-circular indeterminate color="white"></v-progress-circular>
630 </div> 630 </div>
631 </v-container> 631 </v-container>
632 </template> 632 </template>
633 633
634 <script> 634 <script>
635 import http from "@/Services/http.js"; 635 import http from "@/Services/http.js";
636 import moment from "moment"; 636 import moment from "moment";
637 637
638 export default { 638 export default {
639 data: () => ({ 639 data: () => ({
640 snackbar: false, 640 snackbar: false,
641 date: null, 641 date: null,
642 editDate: false, 642 editDate: false,
643 menu1: false, 643 menu1: false,
644 menuB: false, 644 menuB: false,
645 menu2: false, 645 menu2: false,
646 menuEdit: false, 646 menuEdit: false,
647 timeToEdit: false, 647 timeToEdit: false,
648 show: true, 648 show: true,
649 showSearch: false, 649 showSearch: false,
650 addExamScheduleDialog: false, 650 addExamScheduleDialog: false,
651 color: "", 651 color: "",
652 y: "top", 652 y: "top",
653 x: "right", 653 x: "right",
654 mode: "", 654 mode: "",
655 timeout: 10000, 655 timeout: 10000,
656 text: "", 656 text: "",
657 loading: false, 657 loading: false,
658 date: null, 658 date: null,
659 search: "", 659 search: "",
660 showLoader: false, 660 showLoader: false,
661 editExamScheduleDialog: false, 661 editExamScheduleDialog: false,
662 profileExamScheduleDialog: false, 662 profileExamScheduleDialog: false,
663 valid: true, 663 valid: true,
664 role: "", 664 role: "",
665 pagination: { 665 pagination: {
666 rowsPerPage: 10 666 rowsPerPage: 10
667 }, 667 },
668 examRules: [v => !!v || "Exam Name is required"], 668 examRules: [v => !!v || "Exam Name is required"],
669 classRules: [v => !!v || "Class Name is required"], 669 classRules: [v => !!v || "Class Name is required"],
670 sectionRules: [v => !!v || "section is required"], 670 sectionRules: [v => !!v || "section is required"],
671 subjectRules: [v => !!v || "Subject is required"], 671 subjectRules: [v => !!v || "Subject is required"],
672 timeInRules: [v => !!v || "Time In is required"], 672 timeInRules: [v => !!v || "Time In is required"],
673 timeOutRules: [v => !!v || "time Out s is required"], 673 timeOutRules: [v => !!v || "time Out s is required"],
674 roomRules: [v => !!v || "Room is required"], 674 roomRules: [v => !!v || "Room is required"],
675 examScheduleDateRules: [v => !!v || "Date is required"], 675 examScheduleDateRules: [v => !!v || "Date is required"],
676 headers: [ 676 headers: [
677 { 677 {
678 align: "", 678 align: "",
679 text: "No", 679 text: "No",
680 sortable: false, 680 sortable: false,
681 value: "No" 681 value: "No"
682 }, 682 },
683 { 683 {
684 text: "Exam Name", 684 text: "Exam Name",
685 vaue: "examId.examName", 685 vaue: "examId.examName",
686 sortable: false, 686 sortable: false,
687 align: "center" 687 align: "center"
688 }, 688 },
689 { 689 {
690 text: "Class", 690 text: "Class",
691 value: "classId.classNum", 691 value: "classId.classNum",
692 sortable: false, 692 sortable: false,
693 align: "center" 693 align: "center"
694 }, 694 },
695 // { 695 // {
696 // text: "Section", 696 // text: "Section",
697 // value: "sectionId.name", 697 // value: "sectionId.name",
698 // sortable: false, 698 // sortable: false,
699 // align: "center" 699 // align: "center"
700 // }, 700 // },
701 { 701 {
702 text: "Subject Name", 702 text: "Subject Name",
703 value: "subjectName", 703 value: "subjectName",
704 sortable: false, 704 sortable: false,
705 align: "center" 705 align: "center"
706 }, 706 },
707 { 707 {
708 text: "Date", 708 text: "Date",
709 value: "date", 709 value: "date",
710 sortable: false, 710 sortable: false,
711 align: "center" 711 align: "center"
712 }, 712 },
713 { 713 {
714 text: "Time", 714 text: "Time",
715 value: "timeFrom", 715 value: "timeFrom",
716 sortable: false, 716 sortable: false,
717 align: "center" 717 align: "center"
718 }, 718 },
719 { 719 {
720 text: "Room", 720 text: "Room",
721 value: "room", 721 value: "room",
722 sortable: false, 722 sortable: false,
723 align: "center" 723 align: "center"
724 }, 724 },
725 { text: "Action", value: "", sortable: false, align: "center"} 725 { text: "Action", value: "", sortable: false, align: "center" }
726 ], 726 ],
727 classList: [], 727 classList: [],
728 addSection: [], 728 addSection: [],
729 examList: [], 729 examList: [],
730 subjects: [], 730 subjects: [],
731 addSchedule: {}, 731 addSchedule: {},
732 editedItem: { 732 editedItem: {
733 sectionId: { 733 sectionId: {
734 name: "" 734 name: ""
735 } 735 }
736 }, 736 },
737 getScheduleData: {}, 737 getScheduleData: {},
738 ScheduleData: [], 738 ScheduleData: [],
739 token: "" 739 token: ""
740 }), 740 }),
741 methods: { 741 methods: {
742 dates: function(date) { 742 dates: function(date) {
743 return moment(date).format("MMMM DD, YYYY"); 743 return moment(date).format("MMMM DD, YYYY");
744 }, 744 },
745 pickFile() { 745 pickFile() {
746 this.$refs.image.click(); 746 this.$refs.image.click();
747 }, 747 },
748 getSchedulesList() { 748 getSchedulesList() {
749 if (this.addSchedule.classId) {
750 this.getScheduleData.classId = this.addSchedule.classId;
751 }
749 this.showLoader = true; 752 this.showLoader = true;
750 http() 753 http()
751 .get("/getSchedulesList", { 754 .get("/getSchedulesList", {
752 params: { classId: this.getScheduleData.classId }, 755 params: { classId: this.getScheduleData.classId },
753 headers: { Authorization: "Bearer " + this.token } 756 headers: { Authorization: "Bearer " + this.token }
754 }) 757 })
755 .then(response => { 758 .then(response => {
756 this.ScheduleData = response.data.data; 759 this.ScheduleData = response.data.data;
757 // console.log("this.ScheduleData", this.ScheduleData); 760 // console.log("this.ScheduleData", this.ScheduleData);
758 this.showLoader = false; 761 this.showLoader = false;
759 }) 762 })
760 .catch(error => { 763 .catch(error => {
761 // console.log("err====>", err); 764 // console.log("err====>", err);
762 this.showLoader = false; 765 this.showLoader = false;
763 this.loadingSearch = false; 766 this.loadingSearch = false;
764 this.snackbar = true; 767 this.snackbar = true;
765 this.text = error.response.data.message; 768 this.text = error.response.data.message;
766 if (error.response.status === 401) { 769 if (error.response.status === 401) {
767 this.$router.replace({ path: "/" }); 770 this.$router.replace({ path: "/" });
768 this.$store.dispatch("setToken", null); 771 this.$store.dispatch("setToken", null);
769 this.$store.dispatch("Id", null); 772 this.$store.dispatch("Id", null);
770 } 773 }
771 }); 774 });
772 }, 775 },
773 editItem(item) { 776 editItem(item) {
774 // console.log("item", item); 777 // console.log("item", item);
775 this.editedIndex = this.ScheduleData.indexOf(item); 778 this.editedIndex = this.ScheduleData.indexOf(item);
776 this.editedItem = Object.assign({}, item); 779 this.editedItem = Object.assign({}, item);
777 this.editedItem.examId = this.editedItem.examId._id; 780 this.editedItem.examId = this.editedItem.examId._id;
778 this.editedItem.classId = this.editedItem.classId._id; 781 this.editedItem.classId = this.editedItem.classId._id;
779 this.editedItem.sectionId = this.editedItem.sectionId._id; 782 this.editedItem.sectionId = this.editedItem.sectionId._id;
780 this.editedItem.date = 783 this.editedItem.date =
781 this.editedItem.date != undefined 784 this.editedItem.date != undefined
782 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 785 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
783 : (this.editedItem.date = ""); 786 : (this.editedItem.date = "");
784 this.editExamScheduleDialog = true; 787 this.editExamScheduleDialog = true;
785 }, 788 },
786 profile(item) { 789 profile(item) {
787 this.editedIndex = this.ScheduleData.indexOf(item); 790 this.editedIndex = this.ScheduleData.indexOf(item);
788 this.editedItem = Object.assign({}, item); 791 this.editedItem = Object.assign({}, item);
789 this.editedItem.examId = this.editedItem.examId.examName; 792 this.editedItem.examId = this.editedItem.examId.examName;
790 this.editedItem.classId = this.editedItem.classId.classNum; 793 this.editedItem.classId = this.editedItem.classId.classNum;
791 this.editedItem.sectionId = this.editedItem.sectionId.name; 794 this.editedItem.sectionId = this.editedItem.sectionId.name;
792 this.profileExamScheduleDialog = true; 795 this.profileExamScheduleDialog = true;
793 }, 796 },
794 deleteSchedule(item) { 797 deleteSchedule(item) {
795 let deleteSchedule = { 798 let deleteSchedule = {
796 scheduleId: item._id 799 scheduleId: item._id
797 }; 800 };
798 http() 801 http()
799 .delete( 802 .delete(
800 "/deleteSchedule", 803 "/deleteSchedule",
801 confirm("Are you sure you want to Delete this?") && { 804 confirm("Are you sure you want to Delete this?") && {
802 params: deleteSchedule 805 params: deleteSchedule
803 } 806 }
804 ) 807 )
805 .then(response => { 808 .then(response => {
806 this.snackbar = true; 809 this.snackbar = true;
807 this.text = response.data.message; 810 this.text = response.data.message;
808 this.color = "green"; 811 this.color = "green";
809 this.getSchedulesList(); 812 this.getSchedulesList();
810 }) 813 })
811 .catch(error => { 814 .catch(error => {
812 this.snackbar = true; 815 this.snackbar = true;
813 this.color = "error"; 816 this.color = "error";
814 this.text = error.response.data.message; 817 this.text = error.response.data.message;
815 }); 818 });
816 }, 819 },
817 close() { 820 close() {
818 this.dialog = false; 821 this.dialog = false;
819 }, 822 },
820 submit() { 823 submit() {
821 if (this.$refs.form.validate()) { 824 if (this.$refs.form.validate()) {
822 this.loading = true; 825 this.loading = true;
823 http() 826 http()
824 .post("/createSchedule", this.addSchedule) 827 .post("/createSchedule", this.addSchedule)
825 .then(response => { 828 .then(response => {
829 this.loading = false;
826 this.snackbar = true; 830 this.snackbar = true;
827 this.text = response.data.message; 831 this.text = response.data.message;
828 this.addExamScheduleDialog = false;
829 this.color = "green"; 832 this.color = "green";
830 this.loading = false; 833 this.addExamScheduleDialog = false;
834 this.getSchedulesList();
831 this.clear(); 835 this.clear();
832 }) 836 })
833 .catch(error => { 837 .catch(error => {
834 this.snackbar = true; 838 this.snackbar = true;
835 this.text = error.response.data.message; 839 this.text = error.response.data.message;
836 this.color = "red"; 840 this.color = "red";
837 this.loading = false; 841 this.loading = false;
838 }); 842 });
839 } 843 }
840 }, 844 },
841 clear() { 845 clear() {
842 this.$refs.form.reset(); 846 this.$refs.form.reset();
843 this.disable = false; 847 this.disable = false;
844 this.loading = false; 848 this.loading = false;
845 }, 849 },
846 update() { 850 update() {
847 this.editedItem.scheduleId = this.editedItem._id; 851 this.editedItem.scheduleId = this.editedItem._id;
848 http() 852 http()
849 .put("/updateSchedule", this.editedItem) 853 .put("/updateSchedule", this.editedItem)
850 .then(response => { 854 .then(response => {
851 this.snackbar = true; 855 this.snackbar = true;
852 this.text = "Successfully Edit Exam Schedule"; 856 this.text = "Successfully Edit Exam Schedule";
853 this.color = "green"; 857 this.color = "green";
854 this.editExamScheduleDialog = false 858 this.editExamScheduleDialog = false;
855 this.getSchedulesList(); 859 this.getSchedulesList();
856 this.close(); 860 this.close();
857 }) 861 })
858 .catch(error => { 862 .catch(error => {
859 this.snackbar = true; 863 this.snackbar = true;
860 this.text = error.response.data.message; 864 this.text = error.response.data.message;
861 this.color = "red"; 865 this.color = "red";
862 }); 866 });
863 }, 867 },
864 getClass() { 868 getClass() {
865 http() 869 http()
866 .get("/getClassesList", { 870 .get("/getClassesList", {
867 headers: { Authorization: "Bearer " + this.token } 871 headers: { Authorization: "Bearer " + this.token }
868 }) 872 })
869 .then(response => { 873 .then(response => {
870 this.classList = response.data.data; 874 this.classList = response.data.data;
871 }) 875 })
872 .catch(err => { 876 .catch(err => {
873 // console.log("err====>", err); 877 // console.log("err====>", err);
874 }); 878 });
875 }, 879 },
876 getSections(_id) { 880 getSections(_id) {
877 for (let i = 0; i < this.classList.length; i++) { 881 for (let i = 0; i < this.classList.length; i++) {
878 if (_id == this.classList[i]._id) { 882 if (_id == this.classList[i]._id) {
879 this.subjects = this.classList[i].subjects; 883 this.subjects = this.classList[i].subjects;
880 } 884 }
881 } 885 }
882 http() 886 http()
883 .get( 887 .get(
884 "/getSectionsList", 888 "/getSectionsList",
885 { params: { classId: _id } }, 889 { params: { classId: _id } },
886 { 890 {
887 headers: { Authorization: "Bearer " + this.token } 891 headers: { Authorization: "Bearer " + this.token }
888 } 892 }
889 ) 893 )
890 .then(response => { 894 .then(response => {
891 this.addSection = response.data.data; 895 this.addSection = response.data.data;
892 }) 896 })
893 .catch(err => { 897 .catch(err => {});
894 });
895 }, 898 },
896 getExamList() { 899 getExamList() {
897 this.showLoader = true; 900 this.showLoader = true;
898 this.loadingSearch = true; 901 this.loadingSearch = true;
899 http() 902 http()
900 .get("/getExamsList", { 903 .get("/getExamsList", {
901 headers: { Authorization: "Bearer " + this.token } 904 headers: { Authorization: "Bearer " + this.token }
902 }) 905 })
903 .then(response => { 906 .then(response => {
904 this.examList = response.data.data; 907 this.examList = response.data.data;
905 this.showLoader = false; 908 this.showLoader = false;
906 this.loadingSearch = false; 909 this.loadingSearch = false;
907 }) 910 })
908 .catch(error => { 911 .catch(error => {
909 this.showLoader = false; 912 this.showLoader = false;
910 this.loadingSearch = false; 913 this.loadingSearch = false;
911 this.snackbar = true; 914 this.snackbar = true;
912 this.text = error.response.data.message; 915 this.text = error.response.data.message;
913 if (error.response.status === 401) { 916 if (error.response.status === 401) {
914 this.$router.replace({ path: "/" }); 917 this.$router.replace({ path: "/" });
915 this.$store.dispatch("setToken", null); 918 this.$store.dispatch("setToken", null);
916 this.$store.dispatch("Id", null); 919 this.$store.dispatch("Id", null);
917 } 920 }
918 }); 921 });
919 }, 922 },
920 displaySearch() { 923 displaySearch() {
921 (this.show = false), (this.showSearch = true); 924 (this.show = false), (this.showSearch = true);
922 }, 925 },
923 closeSearch() { 926 closeSearch() {
924 this.showSearch = false; 927 this.showSearch = false;
925 this.show = true; 928 this.show = true;
926 this.search = ""; 929 this.search = "";
927 } 930 }
928 }, 931 },
929 mounted() { 932 mounted() {
930 this.token = this.$store.state.token; 933 this.token = this.$store.state.token;
931 this.getClass(); 934 this.getClass();
932 this.getExamList(); 935 this.getExamList();
933 this.role = this.$store.state.role; 936 this.role = this.$store.state.role;
934
src/pages/Gallery/gallery.vue
Diff comments   View file @fe0d05d
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS Gallery ****** --> 3 <!-- ****** EDITS Gallery ****** -->
4 <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable> 4 <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable>
5 <v-card class="card-style pa-2" dark> 5 <v-card 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 Gallery</label> 8 <label class="title text-xs-center">Edit Gallery</label>
9 <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout row> 13 <v-layout row>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15 <input 15 <input
16 type="file" 16 type="file"
17 style="display: none" 17 style="display: none"
18 ref="editImage" 18 ref="editImage"
19 accept="image/*" 19 accept="image/*"
20 multiple 20 multiple
21 @change="editFilePicked" 21 @change="editFilePicked"
22 /> 22 />
23 <v-layout justify-center> 23 <v-layout justify-center>
24 <v-flex 24 <v-flex
25 xs6 25 xs6
26 sm12 26 sm12
27 md3 27 md3
28 v-for="Image in editedItem.imageUrl" 28 v-for="Image in editedItem.imageUrl"
29 :key="Image._id" 29 :key="Image._id"
30 v-if="editedItem.imageUrl" 30 v-if="editedItem.imageUrl"
31 class="profile-image-wrapper imgNews" 31 class="profile-image-wrapper imgNews"
32 > 32 >
33 <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> 33 <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" />
34 <v-icon 34 <v-icon
35 class="red edit-profile-icon" 35 class="red edit-profile-icon"
36 dark 36 dark
37 @click="deleteImage(Image._id,editedItem._id)" 37 @click="deleteImage(Image._id,editedItem._id)"
38 >close</v-icon> 38 >close</v-icon>
39 </v-flex> 39 </v-flex>
40 <v-flex v-for="(file, index) in editFiles" :key="index"> 40 <v-flex v-for="(file, index) in editFiles" :key="index">
41 <img :src="file" height="160" width="160" class="pa-2" /> 41 <img :src="file" height="160" width="160" class="pa-2" />
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <img 44 <img
45 src="/static/icon/user.png" 45 src="/static/icon/user.png"
46 v-if="editedItem.imageUrl == '' && editFiles == ''" 46 v-if="editedItem.imageUrl == '' && editFiles == ''"
47 height="160" 47 height="160"
48 width="160" 48 width="160"
49 alt="Gallery" 49 alt="Gallery"
50 /> 50 />
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 <v-layout wrap> 53 <v-layout wrap>
54 <v-flex xs12 sm12> 54 <v-flex xs12 sm12>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right">Title:</label> 57 <label class="right">Title:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8 sm6 class="ml-3"> 59 <v-flex xs8 sm6 class="ml-3">
60 <v-text-field 60 <v-text-field
61 v-model="editedItem.title" 61 v-model="editedItem.title"
62 placeholder="fill your Title" 62 placeholder="fill your Title"
63 name="name" 63 name="name"
64 type="text" 64 type="text"
65 required 65 required
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Description:</label> 73 <label class="right">Description:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs8 sm6 class="ml-3"> 75 <v-flex xs8 sm6 class="ml-3">
76 <v-text-field 76 <v-text-field
77 placeholder="fill your Description" 77 placeholder="fill your Description"
78 v-model="editedItem.description" 78 v-model="editedItem.description"
79 type="text" 79 type="text"
80 name="email" 80 name="email"
81 required 81 required
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 class="pt-4 subheading"> 87 <v-flex xs4 class="pt-4 subheading">
88 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 sm6 class="ml-3"> 91 <v-flex xs8 sm6 class="ml-3">
92 <v-select 92 <v-select
93 :items="addclass" 93 :items="addclass"
94 label="Select Class" 94 label="Select Class"
95 v-model="editedItem.classNum" 95 v-model="editedItem.classNum"
96 item-text="classNum" 96 item-text="classNum"
97 item-value="_id" 97 item-value="_id"
98 name="Select Class" 98 name="Select Class"
99 required 99 required
100 ></v-select> 100 ></v-select>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-flex xs12> 103 <v-flex xs12>
104 <v-layout> 104 <v-layout>
105 <v-flex xs4 class="pt-4 subheading"> 105 <v-flex xs4 class="pt-4 subheading">
106 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 106 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 107 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs8 sm6 class="ml-3"> 109 <v-flex xs8 sm6 class="ml-3">
110 <v-text-field 110 <v-text-field
111 label="Select Image" 111 label="Select Image"
112 @click="editPickFile" 112 @click="editPickFile"
113 v-model="editImageName" 113 v-model="editImageName"
114 append-icon="attach_file" 114 append-icon="attach_file"
115 multiple 115 multiple
116 ></v-text-field> 116 ></v-text-field>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 <v-flex xs12> 121 <v-flex xs12>
122 <div 122 <div
123 v-for="(editImage,index) in editedItem.youTubeLinkUrl" 123 v-for="(editImage,index) in editedItem.youTubeLinkUrl"
124 :key="index" 124 :key="index"
125 v-if="editImage.youTubeLink !=[]" 125 v-if="editImage.youTubeLink !=[]"
126 > 126 >
127 <v-layout wrap> 127 <v-layout wrap>
128 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 128 <v-flex xs12 sm12 md4 class="pt-4 subheading">
129 <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> 129 <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label>
130 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> 130 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label>
131 </v-flex> 131 </v-flex>
132 <v-layout> 132 <v-layout>
133 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 133 <v-flex xs10 sm10 sm5 md9 class="ml-3">
134 <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> 134 <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field>
135 </v-flex> 135 </v-flex>
136 <v-flex xs2 class="pt-4"> 136 <v-flex xs2 class="pt-4">
137 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> 137 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-layout> 140 </v-layout>
141 </div> 141 </div>
142 </v-flex> 142 </v-flex>
143 <v-flex xs12> 143 <v-flex xs12>
144 <div v-for="(updateImage,index) in updates" :key="index"> 144 <div v-for="(updateImage,index) in updates" :key="index">
145 <v-layout wrap> 145 <v-layout wrap>
146 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 146 <v-flex xs12 sm12 md4 class="pt-4 subheading">
147 <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> 147 <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label>
148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> 148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label>
149 </v-flex> 149 </v-flex>
150 <v-layout> 150 <v-layout>
151 <v-flex xs10 sm12 md9 class="ml-3"> 151 <v-flex xs10 sm12 md9 class="ml-3">
152 <v-text-field 152 <v-text-field
153 v-model="updateImage.youTubeLink" 153 v-model="updateImage.youTubeLink"
154 label="Upload new you tube link url" 154 label="Upload new you tube link url"
155 required 155 required
156 ></v-text-field> 156 ></v-text-field>
157 </v-flex> 157 </v-flex>
158 <v-flex xs2 class="pt-4"> 158 <v-flex xs2 class="pt-4">
159 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 159 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
160 <v-icon @click="update">add_circle</v-icon> 160 <v-icon @click="update">add_circle</v-icon>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-layout> 163 </v-layout>
164 </div> 164 </div>
165 </v-flex> 165 </v-flex>
166 <v-layout> 166 <v-layout>
167 <v-flex xs12 sm12 md11 lg11> 167 <v-flex xs12 sm12 md11 lg11>
168 <v-card-actions class="hidden-xs-only hidden-sm-only"> 168 <v-card-actions class="hidden-xs-only hidden-sm-only">
169 <v-spacer></v-spacer> 169 <v-spacer></v-spacer>
170 <v-btn 170 <v-btn
171 round 171 round
172 dark 172 dark
173 @click="save" 173 @click="save"
174 :loading="editGalleryLoading" 174 :loading="editGalleryLoading"
175 class="add-button mr-4" 175 class="add-button mr-4"
176 >Save</v-btn> 176 >Save</v-btn>
177 </v-card-actions> 177 </v-card-actions>
178 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 178 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
179 <v-spacer></v-spacer> 179 <v-spacer></v-spacer>
180 <v-btn 180 <v-btn
181 round 181 round
182 dark 182 dark
183 @click="save" 183 @click="save"
184 :loading="editGalleryLoading" 184 :loading="editGalleryLoading"
185 class="add-button" 185 class="add-button"
186 >Save</v-btn> 186 >Save</v-btn>
187 <v-spacer></v-spacer> 187 <v-spacer></v-spacer>
188 </v-card-actions> 188 </v-card-actions>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <!-- ****** PROFILE Gallery ****** --> 195 <!-- ****** PROFILE Gallery ****** -->
196 196
197 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> 197 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
198 <v-card flat class="card-style pa-3" dark> 198 <v-card flat class="card-style pa-3" dark>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12> 200 <v-flex xs12>
201 <label class="title text-xs-center">View Gallery</label> 201 <label class="title text-xs-center">View Gallery</label>
202 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 202 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 <v-card-text> 205 <v-card-text>
206 <v-layout row wrap> 206 <v-layout row wrap>
207 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 207 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
208 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> 208 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
209 <img src="/static/icon/user.png" width="240" height="180" /> 209 <img src="/static/icon/user.png" width="240" height="180" />
210 </v-avatar> 210 </v-avatar>
211 <span 211 <span
212 v-for="(image,i) in editedItem.imageUrl" 212 v-for="(image,i) in editedItem.imageUrl"
213 :key="i" 213 :key="i"
214 class="mt-4 pa-2" 214 class="mt-4 pa-2"
215 v-if="editedItem.imageUrl" 215 v-if="editedItem.imageUrl"
216 > 216 >
217 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> 217 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" />
218 </span> 218 </span>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 <v-container grid-list-md> 221 <v-container grid-list-md>
222 <v-layout wrap> 222 <v-layout wrap>
223 <v-flex xs12> 223 <v-flex xs12>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 sm6> 225 <v-flex xs5 sm6>
226 <h5 class="right my-1"> 226 <h5 class="right my-1">
227 <b>Title:</b> 227 <b>Title:</b>
228 </h5> 228 </h5>
229 </v-flex> 229 </v-flex>
230 <v-flex sm6 xs8> 230 <v-flex sm6 xs8>
231 <h5 class="my-1">{{ editedItem.title }}</h5> 231 <h5 class="my-1">{{ editedItem.title }}</h5>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 <v-layout> 234 <v-layout>
235 <v-flex xs5 sm6> 235 <v-flex xs5 sm6>
236 <h5 class="right my-1"> 236 <h5 class="right my-1">
237 <b>Description:</b> 237 <b>Description:</b>
238 </h5> 238 </h5>
239 </v-flex> 239 </v-flex>
240 <v-flex sm6 xs8> 240 <v-flex sm6 xs8>
241 <h5 class="my-1">{{ editedItem.description }}</h5> 241 <h5 class="my-1">{{ editedItem.description }}</h5>
242 </v-flex> 242 </v-flex>
243 </v-layout> 243 </v-layout>
244 <v-layout> 244 <v-layout>
245 <v-flex xs5 sm6> 245 <v-flex xs5 sm6>
246 <h5 class="right my-1"> 246 <h5 class="right my-1">
247 <b>You Tube Link Url:</b> 247 <b>You Tube Link Url:</b>
248 </h5> 248 </h5>
249 </v-flex> 249 </v-flex>
250 <v-flex sm6 xs8> 250 <v-flex sm6 xs8>
251 <h5 class="my-1 ml-3"> 251 <h5 class="my-1 ml-3">
252 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> 252 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl">
253 <li>{{ youTubeLinkUrl.youTubeLink }}</li> 253 <li>{{ youTubeLinkUrl.youTubeLink }}</li>
254 </ul> 254 </ul>
255 </h5> 255 </h5>
256 </v-flex> 256 </v-flex>
257 </v-layout> 257 </v-layout>
258 </v-flex> 258 </v-flex>
259 </v-layout> 259 </v-layout>
260 </v-container> 260 </v-container>
261 </v-card-text> 261 </v-card-text>
262 </v-card> 262 </v-card>
263 </v-dialog> 263 </v-dialog>
264 264
265 <!-- ****** Gallery TABLE ****** --> 265 <!-- ****** Gallery TABLE ****** -->
266 266
267 <v-toolbar color="transparent" flat> 267 <v-toolbar color="transparent" flat>
268 <v-btn 268 <v-btn
269 fab 269 fab
270 dark 270 dark
271 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 271 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
272 small 272 small
273 @click="addGalleryDialog = true" 273 @click="addGalleryDialog = true"
274 > 274 >
275 <v-icon dark>add</v-icon> 275 <v-icon dark>add</v-icon>
276 </v-btn> 276 </v-btn>
277 <v-btn 277 <v-btn
278 round 278 round
279 class="open-dialog-button hidden-sm-only hidden-xs-only" 279 class="open-dialog-button hidden-sm-only hidden-xs-only"
280 dark 280 dark
281 @click="addGalleryDialog = true" 281 @click="addGalleryDialog = true"
282 > 282 >
283 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery 283 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery
284 </v-btn> 284 </v-btn>
285 <v-spacer></v-spacer> 285 <v-spacer></v-spacer>
286 <v-card-title class="body-1" v-show="show"> 286 <v-card-title class="body-1" v-show="show">
287 <v-btn icon large flat @click="displaySearch"> 287 <v-btn icon large flat @click="displaySearch">
288 <v-avatar size="27"> 288 <v-avatar size="27">
289 <img src="/static/icon/search.png" alt="icon" /> 289 <img src="/static/icon/search.png" alt="icon" />
290 </v-avatar> 290 </v-avatar>
291 </v-btn> 291 </v-btn>
292 </v-card-title> 292 </v-card-title>
293 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 293 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
294 <v-layout> 294 <v-layout>
295 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 295 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
296 <v-icon @click="closeSearch" color="error">close</v-icon> 296 <v-icon @click="closeSearch" color="error">close</v-icon>
297 </v-layout> 297 </v-layout>
298 </v-flex> 298 </v-flex>
299 </v-toolbar> 299 </v-toolbar>
300 <v-data-table 300 <v-data-table
301 :headers="headers" 301 :headers="headers"
302 :items="desserts" 302 :items="desserts"
303 :pagination.sync="pagination" 303 :pagination.sync="pagination"
304 :search="search" 304 :search="search"
305 > 305 >
306 <template slot="items" slot-scope="props"> 306 <template slot="items" slot-scope="props">
307 <tr class="tr"> 307 <tr class="tr">
308 <td class="td td-row">{{ props.index + 1}}</td> 308 <td class="td td-row">{{ props.index + 1}}</td>
309 <td class="td td-row text-xs-center">{{ props.item.title}}</td> 309 <td class="td td-row text-xs-center">{{ props.item.title}}</td>
310 <td class="td td-row text-xs-center">{{ props.item.description}}</td> 310 <td class="td td-row text-xs-center">{{ props.item.description}}</td>
311 <td class="td td-row text-xs-center"> 311 <td class="td td-row text-xs-center">
312 <span> 312 <span>
313 <v-tooltip top> 313 <v-tooltip top>
314 <img 314 <img
315 slot="activator" 315 slot="activator"
316 style="cursor:pointer; width:25px; height:25px; " 316 style="cursor:pointer; width:25px; height:25px; "
317 class="mr-3" 317 class="mr-3"
318 @click="profile(props.item)" 318 @click="profile(props.item)"
319 src="/static/icon/view.png" 319 src="/static/icon/view.png"
320 /> 320 />
321 <span>View</span> 321 <span>View</span>
322 </v-tooltip> 322 </v-tooltip>
323 <v-tooltip top> 323 <v-tooltip top>
324 <img 324 <img
325 slot="activator" 325 slot="activator"
326 style="cursor:pointer; width:20px; height:18px; " 326 style="cursor:pointer; width:20px; height:18px; "
327 class="mr-3" 327 class="mr-3"
328 @click="editItem(props.item)" 328 @click="editItem(props.item)"
329 src="/static/icon/edit.png" 329 src="/static/icon/edit.png"
330 /> 330 />
331 <span>Edit</span> 331 <span>Edit</span>
332 </v-tooltip> 332 </v-tooltip>
333 <v-tooltip top> 333 <v-tooltip top>
334 <img 334 <img
335 slot="activator" 335 slot="activator"
336 style="cursor:pointer; width:20px; height:20px; " 336 style="cursor:pointer; width:20px; height:20px; "
337 class="mr-3" 337 class="mr-3"
338 @click="deleteItem(props.item)" 338 @click="deleteItem(props.item)"
339 src="/static/icon/delete.png" 339 src="/static/icon/delete.png"
340 /> 340 />
341 <span>Delete</span> 341 <span>Delete</span>
342 </v-tooltip> 342 </v-tooltip>
343 </span> 343 </span>
344 </td> 344 </td>
345 </tr> 345 </tr>
346 </template> 346 </template>
347 <v-alert 347 <v-alert
348 slot="no-results" 348 slot="no-results"
349 :value="true" 349 :value="true"
350 color="error" 350 color="error"
351 icon="warning" 351 icon="warning"
352 >Your search for "{{ search }}" found no results.</v-alert> 352 >Your search for "{{ search }}" found no results.</v-alert>
353 </v-data-table> 353 </v-data-table>
354 <!-- ****** ADD Gallery ****** --> 354 <!-- ****** ADD Gallery ****** -->
355 <v-dialog v-model="addGalleryDialog" max-width="600px"> 355 <v-dialog v-model="addGalleryDialog" max-width="600px">
356 <v-card flat class="card-style pa-2" dark> 356 <v-card flat class="card-style pa-2" dark>
357 <v-layout> 357 <v-layout>
358 <v-flex xs12> 358 <v-flex xs12>
359 <label class="title text-xs-center">Add Gallery</label> 359 <label class="title text-xs-center">Add Gallery</label>
360 <v-icon size="24" class="right" @click="addGalleryDialog = false">cancel</v-icon> 360 <v-icon size="24" class="right" @click="addGalleryDialog = false">cancel</v-icon>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-form ref="form" v-model="valid" lazy-validation> 363 <v-form ref="form" v-model="valid" lazy-validation>
364 <v-container fluid> 364 <v-container fluid>
365 <v-layout> 365 <v-layout>
366 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 366 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
367 <input 367 <input
368 type="file" 368 type="file"
369 style="display: none" 369 style="display: none"
370 ref="image" 370 ref="image"
371 accept="image/*" 371 accept="image/*"
372 multiple 372 multiple
373 @change="onFilePicked" 373 @change="onFilePicked"
374 /> 374 />
375 <v-layout justify-center> 375 <v-layout justify-center>
376 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 376 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
377 <img :src="file" height="150" width="150" /> 377 <img :src="file" height="150" width="150" />
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> 380 <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" />
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 <v-flex xs12> 383 <v-flex xs12>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Title:</label> 386 <label class="right">Title:</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm8 md7 class="ml-3"> 388 <v-flex xs8 sm8 md7 class="ml-3">
389 <v-text-field 389 <v-text-field
390 v-model="addGallery.title" 390 v-model="addGallery.title"
391 placeholder="fill your Title" 391 placeholder="fill your Title"
392 name="name" 392 name="name"
393 type="text" 393 type="text"
394 :rules="titleRules" 394 :rules="titleRules"
395 required 395 required
396 ></v-text-field> 396 ></v-text-field>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 </v-flex> 399 </v-flex>
400 <v-flex xs12> 400 <v-flex xs12>
401 <v-layout> 401 <v-layout>
402 <v-flex xs4 class="pt-4 subheading"> 402 <v-flex xs4 class="pt-4 subheading">
403 <label class="right">Description:</label> 403 <label class="right">Description:</label>
404 </v-flex> 404 </v-flex>
405 <v-flex xs8 sm8 md7 class="ml-3"> 405 <v-flex xs8 sm8 md7 class="ml-3">
406 <v-text-field 406 <v-text-field
407 placeholder="fill your Description" 407 placeholder="fill your Description"
408 :rules="descriptionRules" 408 :rules="descriptionRules"
409 v-model="addGallery.description" 409 v-model="addGallery.description"
410 type="text" 410 type="text"
411 name="email" 411 name="email"
412 required 412 required
413 ></v-text-field> 413 ></v-text-field>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 </v-flex> 416 </v-flex>
417 <v-flex xs12> 417 <v-flex xs12>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 class="pt-4 subheading"> 419 <v-flex xs4 class="pt-4 subheading">
420 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 420 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
421 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 421 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
422 </v-flex> 422 </v-flex>
423 <v-flex xs8 sm8 md7 class="ml-3"> 423 <v-flex xs8 sm8 md7 class="ml-3">
424 <v-select 424 <v-select
425 :items="addclass" 425 :items="addclass"
426 label="Select Class" 426 label="Select Class"
427 v-model="addGallery.classNum" 427 v-model="addGallery.classNum"
428 item-text="classNum" 428 item-text="classNum"
429 item-value="_id" 429 item-value="_id"
430 name="Select Class" 430 name="Select Class"
431 required 431 required
432 ></v-select> 432 ></v-select>
433 </v-flex> 433 </v-flex>
434 </v-layout> 434 </v-layout>
435 </v-flex> 435 </v-flex>
436 <v-flex xs12> 436 <v-flex xs12>
437 <v-layout> 437 <v-layout>
438 <v-flex xs4 class="pt-4 subheading"> 438 <v-flex xs4 class="pt-4 subheading">
439 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 439 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
440 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 440 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
441 </v-flex> 441 </v-flex>
442 <v-flex xs8 sm8 md7 class="ml-3"> 442 <v-flex xs8 sm8 md7 class="ml-3">
443 <v-text-field 443 <v-text-field
444 label="Select Image" 444 label="Select Image"
445 @click="pickFile" 445 @click="pickFile"
446 v-model="imageName" 446 v-model="imageName"
447 append-icon="attach_file" 447 append-icon="attach_file"
448 multiple 448 multiple
449 ></v-text-field> 449 ></v-text-field>
450 </v-flex> 450 </v-flex>
451 </v-layout> 451 </v-layout>
452 </v-flex> 452 </v-flex>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12> 454 <v-flex xs12>
455 <div v-for="(youTubeLink,index) in finds" :key="index"> 455 <div v-for="(youTubeLink,index) in finds" :key="index">
456 <v-layout> 456 <v-layout>
457 <v-flex xs4 class="pt-4 subheading"> 457 <v-flex xs4 class="pt-4 subheading">
458 <label class="right">You Tube Url:</label> 458 <label class="right">You Tube Url:</label>
459 </v-flex> 459 </v-flex>
460 <v-flex xs8 sm8 md6 class="ml-3"> 460 <v-flex xs8 sm8 md6 class="ml-3">
461 <v-text-field 461 <v-text-field
462 placeholder="fill your youtube link" 462 placeholder="fill your youtube link"
463 v-model="youTubeLink.value" 463 v-model="youTubeLink.value"
464 type="text" 464 type="text"
465 name="link" 465 name="link"
466 required 466 required
467 ></v-text-field> 467 ></v-text-field>
468 </v-flex> 468 </v-flex>
469 <v-flex xs2 class="pt-4"> 469 <v-flex xs2 class="pt-4">
470 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 470 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
471 <v-icon @click="addFind">add_circle</v-icon> 471 <v-icon @click="addFind">add_circle</v-icon>
472 </v-flex> 472 </v-flex>
473 </v-layout> 473 </v-layout>
474 </div> 474 </div>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 <v-layout> 477 <v-layout>
478 <v-flex xs12 sm12> 478 <v-flex xs12 sm12>
479 <v-layout class="right"> 479 <v-layout class="right">
480 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 480 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
481 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 481 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
482 </v-layout> 482 </v-layout>
483 </v-flex> 483 </v-flex>
484 </v-layout> 484 </v-layout>
485 </v-container> 485 </v-container>
486 </v-form> 486 </v-form>
487 </v-card> 487 </v-card>
488 </v-dialog> 488 </v-dialog>
489 <v-snackbar 489 <v-snackbar
490 :timeout="timeout" 490 :timeout="timeout"
491 :top="y === 'top'" 491 :top="y === 'top'"
492 :right="x === 'right'" 492 :right="x === 'right'"
493 :vertical="mode === 'vertical'" 493 :vertical="mode === 'vertical'"
494 v-model="snackbar" 494 v-model="snackbar"
495 :color="color" 495 :color="color"
496 >{{ text }}</v-snackbar> 496 >{{ text }}</v-snackbar>
497 <div class="loader" v-if="showLoader"> 497 <div class="loader" v-if="showLoader">
498 <v-progress-circular indeterminate color="white"></v-progress-circular> 498 <v-progress-circular indeterminate color="white"></v-progress-circular>
499 </div> 499 </div>
500 </v-container> 500 </v-container>
501 </template> 501 </template>
502 502
503 <script> 503 <script>
504 import http from "@/Services/http.js"; 504 import http from "@/Services/http.js";
505 505
506 export default { 506 export default {
507 data: () => ({ 507 data: () => ({
508 snackbar: false, 508 snackbar: false,
509 y: "top", 509 y: "top",
510 x: "right", 510 x: "right",
511 mode: "", 511 mode: "",
512 timeout: 3000, 512 timeout: 3000,
513 text: "", 513 text: "",
514 loading: false, 514 loading: false,
515 color: "", 515 color: "",
516 date: null, 516 date: null,
517 search: "", 517 search: "",
518 show: true, 518 show: true,
519 addGalleryDialog: false, 519 addGalleryDialog: false,
520 showSearch: false, 520 showSearch: false,
521 showLoader: false, 521 showLoader: false,
522 editGalleryDialog: false, 522 editGalleryDialog: false,
523 viewProfileGallery: false, 523 viewProfileGallery: false,
524 valid: true, 524 valid: true,
525 editGalleryLoading: false, 525 editGalleryLoading: false,
526 addclass: [], 526 addclass: [],
527 addSection: [], 527 addSection: [],
528 finds: [{ value: "" }], 528 finds: [{ value: "" }],
529 updates: [{ youTubeLink: "" }], 529 updates: [{ youTubeLink: "" }],
530 youTubeLink: {}, 530 youTubeLink: {},
531 addGallery: { 531 addGallery: {
532 youTubeLinkUrl: [] 532 youTubeLinkUrl: []
533 }, 533 },
534 pagination: { 534 pagination: {
535 rowsPerPage: 10 535 rowsPerPage: 10
536 }, 536 },
537 imageName: "", 537 imageName: "",
538 imageUrl: "", 538 imageUrl: "",
539 imageFile: "", 539 imageFile: "",
540 image: [], 540 image: [],
541 upload: "", 541 upload: "",
542 editImageName: "", 542 editImageName: "",
543 editFiles: [], 543 editFiles: [],
544 files: [], 544 files: [],
545 token: "", 545 token: "",
546 titleRules: [v => !!v || " Tilte is required"], 546 titleRules: [v => !!v || " Tilte is required"],
547 descriptionRules: [v => !!v || " Description is required"], 547 descriptionRules: [v => !!v || " Description is required"],
548 headers: [ 548 headers: [
549 { 549 {
550 align: "", 550 align: "",
551 text: "No", 551 text: "No",
552 sortable: false, 552 sortable: false,
553 value: "index" 553 value: "index"
554 }, 554 },
555 { text: "Title", value: "title", sortable: false, align: "center" }, 555 { text: "Title", value: "title", sortable: false, align: "center" },
556 { 556 {
557 text: "Description", 557 text: "Description",
558 value: "description", 558 value: "description",
559 sortable: false, 559 sortable: false,
560 align: "center" 560 align: "center"
561 }, 561 },
562 { text: "Action", value: "", sortable: false, align: "center" } 562 { text: "Action", value: "", sortable: false, align: "center" }
563 ], 563 ],
564 desserts: [], 564 desserts: [],
565 editedIndex: -1, 565 editedIndex: -1,
566 editedItem: {}, 566 editedItem: {},
567 index: "" 567 index: ""
568 }), 568 }),
569 methods: { 569 methods: {
570 pickFile() { 570 pickFile() {
571 this.$refs.image.click(); 571 this.$refs.image.click();
572 }, 572 },
573 editPickFile() { 573 editPickFile() {
574 this.$refs.editImage.click(); 574 this.$refs.editImage.click();
575 }, 575 },
576 onFilePicked(e) { 576 onFilePicked(e) {
577 const files = e.target.files; 577 const files = e.target.files;
578 /** fetch Image Name **/ 578 /** fetch Image Name **/
579 if (files[0] !== undefined) { 579 if (files[0] !== undefined) {
580 this.imageName = files[0].name; 580 this.imageName = files[0].name;
581 if (this.imageName.lastIndexOf(".") <= 0) { 581 if (this.imageName.lastIndexOf(".") <= 0) {
582 return; 582 return;
583 } 583 }
584 this.files = []; 584 this.files = [];
585 // console.log("files", this.files); 585 // console.log("files", this.files);
586 /** Select many image and showing many image add to Gallery card **/ 586 /** Select many image and showing many image add to Gallery card **/
587 const test = Array.from(files).forEach((file, idx) => { 587 const test = Array.from(files).forEach((file, idx) => {
588 const fr = new FileReader(); 588 const fr = new FileReader();
589 const getResult = new Promise(resolve => { 589 const getResult = new Promise(resolve => {
590 fr.onload = e => { 590 fr.onload = e => {
591 this.files.push( 591 this.files.push(
592 // id: idx, 592 // id: idx,
593 e.target.result 593 e.target.result
594 ); 594 );
595 }; 595 };
596 console.log("uploadImage=======>", this.files); 596 console.log("uploadImage=======>", this.files);
597 }); 597 });
598 fr.readAsDataURL(file); 598 fr.readAsDataURL(file);
599 return getResult.then(file => { 599 return getResult.then(file => {
600 return file; 600 return file;
601 }); 601 });
602 }); 602 });
603 const fr = new FileReader(); 603 const fr = new FileReader();
604 fr.readAsDataURL(files[0]); 604 fr.readAsDataURL(files[0]);
605 fr.addEventListener("load", () => { 605 fr.addEventListener("load", () => {
606 this.imageFile = files; // this is an image file that can be sent to server... 606 this.imageFile = files; // this is an image file that can be sent to server...
607 }); 607 });
608 } else { 608 } else {
609 this.imageName = ""; 609 this.imageName = "";
610 this.imageFile = ""; 610 this.imageFile = "";
611 this.imageUrl = ""; 611 this.imageUrl = "";
612 } 612 }
613 }, 613 },
614 editFilePicked(e) { 614 editFilePicked(e) {
615 const files = e.target.files; 615 const files = e.target.files;
616 /** fetch Image Name **/ 616 /** fetch Image Name **/
617 if (files[0] !== undefined) { 617 if (files[0] !== undefined) {
618 this.editImageName = files[0].name; 618 this.editImageName = files[0].name;
619 if (this.editImageName.lastIndexOf(".") <= 0) { 619 if (this.editImageName.lastIndexOf(".") <= 0) {
620 return; 620 return;
621 } 621 }
622 /** Select many image and showing many image add to Gallery card **/ 622 /** Select many image and showing many image add to Gallery card **/
623 const test = Array.from(files).forEach((file, idx) => { 623 const test = Array.from(files).forEach((file, idx) => {
624 const fr = new FileReader(); 624 const fr = new FileReader();
625 const getResult = new Promise(resolve => { 625 const getResult = new Promise(resolve => {
626 fr.onload = e => { 626 fr.onload = e => {
627 this.editFiles.push( 627 this.editFiles.push(
628 // id: idx, 628 // id: idx,
629 e.target.result 629 e.target.result
630 ); 630 );
631 }; 631 };
632 console.log("uploadeditFilesImage=======>", this.editFiles); 632 console.log("uploadeditFilesImage=======>", this.editFiles);
633 }); 633 });
634 fr.readAsDataURL(file); 634 fr.readAsDataURL(file);
635 return getResult.then(file => { 635 return getResult.then(file => {
636 return file; 636 return file;
637 }); 637 });
638 }); 638 });
639 const fr = new FileReader(); 639 const fr = new FileReader();
640 fr.readAsDataURL(files[0]); 640 fr.readAsDataURL(files[0]);
641 // fr.addEventListener("load", () => { 641 // fr.addEventListener("load", () => {
642 // this.imageFile = files; // this is an image file that can be sent to server... 642 // this.imageFile = files; // this is an image file that can be sent to server...
643 // }); 643 // });
644 } else { 644 } else {
645 this.editImageName = ""; 645 this.editImageName = "";
646 this.editFiles = []; 646 this.editFiles = [];
647 } 647 }
648 }, 648 },
649 getGalleryList() { 649 getGalleryList() {
650 this.showLoader = true; 650 this.showLoader = true;
651 http() 651 http()
652 .get("/getGalleryList", { 652 .get("/getGalleryList", {
653 headers: { Authorization: "Bearer " + this.token } 653 headers: { Authorization: "Bearer " + this.token }
654 }) 654 })
655 .then(response => { 655 .then(response => {
656 this.desserts = response.data.data; 656 this.desserts = response.data.data;
657 this.showLoader = false; 657 this.showLoader = false;
658 }) 658 })
659 .catch(error => { 659 .catch(error => {
660 // console.log("err====>", err); 660 // console.log("err====>", err);
661 this.showLoader = false; 661 this.showLoader = false;
662 if (error.response.status === 401) { 662 if (error.response.status === 401) {
663 this.$router.replace({ path: "/" }); 663 this.$router.replace({ path: "/" });
664 this.$store.dispatch("setToken", null); 664 this.$store.dispatch("setToken", null);
665 this.$store.dispatch("Id", null); 665 this.$store.dispatch("Id", null);
666 } 666 }
667 }); 667 });
668 }, 668 },
669 editItem(item) { 669 editItem(item) {
670 this.files = []; 670 this.files = [];
671 this.editedIndex = this.desserts.indexOf(item); 671 this.editedIndex = this.desserts.indexOf(item);
672 this.editedItem = Object.assign({}, item); 672 this.editedItem = Object.assign({}, item);
673 this.editGalleryDialog = true; 673 this.editGalleryDialog = true;
674 }, 674 },
675 profile(item) { 675 profile(item) {
676 this.editedIndex = this.desserts.indexOf(item); 676 this.editedIndex = this.desserts.indexOf(item);
677 this.editedItem = Object.assign({}, item); 677 this.editedItem = Object.assign({}, item);
678 this.viewProfileGallery = true; 678 this.viewProfileGallery = true;
679 }, 679 },
680 deleteItem(item) { 680 deleteItem(item) {
681 let deleteGallery = { 681 let deleteGallery = {
682 galleryId: item._id 682 galleryId: item._id
683 }; 683 };
684 http() 684 http()
685 .delete( 685 .delete(
686 "/deleteGallery", 686 "/deleteGallery",
687 confirm("Are you sure you want to delete this?") && { 687 confirm("Are you sure you want to delete this?") && {
688 params: deleteGallery, 688 params: deleteGallery,
689 headers: { 689 headers: {
690 Authorization: "Bearer " + this.token 690 Authorization: "Bearer " + this.token
691 } 691 }
692 } 692 }
693 ) 693 )
694 .then(response => { 694 .then(response => {
695 this.snackbar = true; 695 this.snackbar = true;
696 this.text = "Successfully delete Existing Gallery"; 696 this.text = "Successfully delete Existing Gallery";
697 this.color = "green"; 697 this.color = "green";
698 this.getGalleryList(); 698 this.getGalleryList();
699 }) 699 })
700 .catch(error => { 700 .catch(error => {
701 // console.log(error); 701 // console.log(error);
702 this.snackbar = true; 702 this.snackbar = true;
703 this.text = error.response.data.message; 703 this.text = error.response.data.message;
704 this.color = "error"; 704 this.color = "error";
705 }); 705 });
706 }, 706 },
707 deleteImage(imageId, id) { 707 deleteImage(imageId, id) {
708 let deleteImages = { 708 let deleteImages = {
709 galleryId: id, 709 galleryId: id,
710 imageId: imageId 710 imageId: imageId
711 }; 711 };
712 http() 712 http()
713 .put("/deleteImage", deleteImages) 713 .put("/deleteImage", deleteImages)
714 .then(response => { 714 .then(response => {
715 this.snackbar = true; 715 this.snackbar = true;
716 this.text = response.data.message; 716 this.text = response.data.message;
717 this.color = "green"; 717 this.color = "green";
718 this.getGalleryList(); 718 this.getGalleryList();
719 this.close(); 719 this.close();
720 }) 720 })
721 .catch(error => { 721 .catch(error => {
722 this.snackbar = true; 722 this.snackbar = true;
723 this.text = error.response.data.message; 723 this.text = error.response.data.message;
724 this.color = "error"; 724 this.color = "error";
725 }); 725 });
726 }, 726 },
727 close() { 727 close() {
728 this.editGalleryDialog = false; 728 this.editGalleryDialog = false;
729 }, 729 },
730 closeProfileGallery() { 730 closeProfileGallery() {
731 this.viewProfileGallery = false; 731 this.viewProfileGallery = false;
732 }, 732 },
733 submit() { 733 submit() {
734 for (let i = 0; i < this.finds.length; i++) { 734 for (let i = 0; i < this.finds.length; i++) {
735 this.addGallery.youTubeLinkUrl.push(this.finds[i].value); 735 this.addGallery.youTubeLinkUrl.push(this.finds[i].value);
736 } 736 }
737 if (this.$refs.form.validate()) { 737 if (this.$refs.form.validate()) {
738 if (this.files) { 738 if (this.files) {
739 var ary = []; 739 var ary = [];
740 var imageData = []; 740 var imageData = [];
741 ary = this.files; 741 ary = this.files;
742 for (let i = 0; i < ary.length; i++) { 742 for (let i = 0; i < ary.length; i++) {
743 const [baseUrl, imageUrl] = ary[i].split(/,/); 743 const [baseUrl, imageUrl] = ary[i].split(/,/);
744 imageData.push(imageUrl); 744 imageData.push(imageUrl);
745 this.addGallery.upload = imageData; 745 this.addGallery.upload = imageData;
746 } 746 }
747 } 747 }
748 if (this.addGallery.youTubeLinkUrl == "") { 748 if (this.addGallery.youTubeLinkUrl == "") {
749 var galleryData = { 749 var galleryData = {
750 classId: this.addGallery.classNum, 750 classId: this.addGallery.classNum,
751 title: this.addGallery.title, 751 title: this.addGallery.title,
752 description: this.addGallery.description, 752 description: this.addGallery.description,
753 upload: this.addGallery.upload 753 upload: this.addGallery.upload
754 }; 754 };
755 this.loading = true; 755 this.loading = true;
756 http() 756 http()
757 .post("/createGallery", galleryData) 757 .post("/createGallery", galleryData)
758 .then(response => { 758 .then(response => {
759 this.getGalleryList(); 759 this.getGalleryList();
760 this.addGalleryDialog = false;
760 this.loading = false; 761 this.loading = false;
761 this.snackbar = true; 762 this.snackbar = true;
762 this.text = response.data.message; 763 this.text = response.data.message;
763 this.color = "green"; 764 this.color = "green";
764 this.clear(); 765 this.clear();
765 this.files = ""; 766 this.files = "";
766 }) 767 })
767 .catch(error => { 768 .catch(error => {
768 this.snackbar = true; 769 this.snackbar = true;
769 this.text = error.response.data.message; 770 this.text = error.response.data.message;
770 this.color = "error"; 771 this.color = "error";
771 this.loading = false; 772 this.loading = false;
772 }); 773 });
773 } else if (this.addGallery.youTubeLinkUrl) { 774 } else if (this.addGallery.youTubeLinkUrl) {
774 this.loading = true; 775 this.loading = true;
775 http() 776 http()
776 .post("/createGallery", this.addGallery) 777 .post("/createGallery", this.addGallery)
777 .then(response => { 778 .then(response => {
778 this.getGalleryList(); 779 this.getGalleryList();
779 this.files = []; 780 this.addGalleryDialog = false;
781 this.files = "nmn";
780 this.loading = false; 782 this.loading = false;
781 this.snackbar = true; 783 this.snackbar = true;
782 this.color = "green"; 784 this.color = "green";
783 this.text = response.data.message; 785 this.text = response.data.message;
784 this.clear(); 786 this.clear();
787 this.removeAddFind();
785 this.files = ""; 788 this.files = "";
786 }) 789 })
787 .catch(error => { 790 .catch(error => {
788 this.snackbar = true; 791 this.snackbar = true;
789 this.text = error.response.data.message; 792 this.text = error.response.data.message;
790 this.loading = false; 793 this.loading = false;
791 this.color = "error"; 794 this.color = "error";
792 }); 795 });
793 } 796 }
794 } 797 }
795 }, 798 },
796 clear() { 799 clear() {
797 this.$refs.form.reset(); 800 this.$refs.form.reset();
798 this.files = []; 801 this.files = [];
799 }, 802 },
800 save() { 803 save() {
801 this.editedItem.gelleryId = this.editedItem._id; 804 this.editedItem.gelleryId = this.editedItem._id;
802 var linkUrl = []; 805 var linkUrl = [];
803 for (let i = 0; i < this.updates.length; i++) { 806 for (let i = 0; i < this.updates.length; i++) {
804 linkUrl.push(this.updates[i].youTubeLink); 807 linkUrl.push(this.updates[i].youTubeLink);
805 } 808 }
806 if (this.editFiles) { 809 if (this.editFiles) {
807 var ary = []; 810 var ary = [];
808 var imageData = []; 811 var imageData = [];
809 ary = this.editFiles; 812 ary = this.editFiles;
810 for (let i = 0; i < ary.length; i++) { 813 for (let i = 0; i < ary.length; i++) {
811 const [baseUrl, imageUrl] = ary[i].split(/,/); 814 const [baseUrl, imageUrl] = ary[i].split(/,/);
812 imageData.push(imageUrl); 815 imageData.push(imageUrl);
813 this.editedItem.editFiles = imageData; 816 this.editedItem.editFiles = imageData;
814 } 817 }
815 } 818 }
816 if (linkUrl != "") { 819 if (linkUrl != "") {
817 var updateData = { 820 var updateData = {
818 galleryId: this.editedItem._id, 821 galleryId: this.editedItem._id,
819 description: this.editedItem.description, 822 description: this.editedItem.description,
820 classId: this.editedItem.classNum, 823 classId: this.editedItem.classNum,
821 uploadImage: this.editedItem.editFiles, 824 uploadImage: this.editedItem.editFiles,
822 title: this.editedItem.title, 825 title: this.editedItem.title,
823 updateYouTubeLinkUrl: linkUrl 826 updateYouTubeLinkUrl: linkUrl
824 }; 827 };
825 } else if (linkUrl == "") { 828 } else if (linkUrl == "") {
826 var updateData = { 829 var updateData = {
827 galleryId: this.editedItem._id, 830 galleryId: this.editedItem._id,
828 description: this.editedItem.description, 831 description: this.editedItem.description,
829 classId: this.editedItem.classNum, 832 classId: this.editedItem.classNum,
830 uploadImage: this.editedItem.editFiles, 833 uploadImage: this.editedItem.editFiles,
831 title: this.editedItem.title 834 title: this.editedItem.title
832 }; 835 };
833 } 836 }
834 this.editGalleryLoading = true; 837 this.editGalleryLoading = true;
835 http() 838 http()
836 .put("/updateGallery", updateData) 839 .put("/updateGallery", updateData)
837 .then(response => { 840 .then(response => {
838 this.getGalleryList(); 841 this.getGalleryList();
839 this.close(); 842 this.close();
840 this.snackbar = true; 843 this.snackbar = true;
841 this.text = response.data.message; 844 this.text = response.data.message;
842 this.color = "green"; 845 this.color = "green";
843 this.editGalleryLoading = false; 846 this.editGalleryLoading = false;
844 (this.editImageName = ""), (this.editFiles = []); 847 this.editImageName = "";
848 this.editFiles = [];
845 }) 849 })
846 .catch(error => { 850 .catch(error => {
847 this.editGalleryLoading = false; 851 this.editGalleryLoading = false;
848 this.snackbar = true; 852 this.snackbar = true;
849 this.text = error.response.data.message; 853 this.text = error.response.data.message;
850 this.color = "error"; 854 this.color = "error";
851 }); 855 });
852 }, 856 },
853 getAllClasses() { 857 getAllClasses() {
854 http() 858 http()
855 .get("/getClassesList", { 859 .get("/getClassesList", {
856 headers: { Authorization: "Bearer " + this.token } 860 headers: { Authorization: "Bearer " + this.token }
857 }) 861 })
858 .then(response => { 862 .then(response => {
859 this.addclass = response.data.data; 863 this.addclass = response.data.data;
860 }) 864 })
861 .catch(err => { 865 .catch(err => {
862 // console.log("err====>", err); 866 // console.log("err====>", err);
863 }); 867 });
864 }, 868 },
869 removeAddFind: function() {
870 this.finds = [{ value: "" }];
871 },
865 addFind: function() { 872 addFind: function() {
866 this.finds.push({ value: "" }); 873 this.finds.push({ value: "" });
867 }, 874 },
868 update: function() { 875 update: function() {
869 this.updates.push({ youTubeLink: "" }); 876 this.updates.push({ youTubeLink: "" });
870 }, 877 },
871 deleteFind: function(index) { 878 deleteFind: function(index) {
872 this.finds.splice(index, 1); 879 this.finds.splice(index, 1);
873 if (index === 0) this.addFind(); 880 if (index === 0) this.addFind();
874 }, 881 },
875 deleteUpdate: function(index) { 882 deleteUpdate: function(index) {
876 this.updates.splice(index, 1); 883 this.updates.splice(index, 1);
877 if (index === 0) this.update(); 884 if (index === 0) this.update();
878 }, 885 },
879 deleteUrl: function(index, youTubelinkId, id) { 886 deleteUrl: function(index, youTubelinkId, id) {
880 this.editedItem.youTubeLinkUrl.splice(index, 1); 887 this.editedItem.youTubeLinkUrl.splice(index, 1);
881 if (index === 0) this.update(); 888 if (index === 0) this.update();
882 let deleteYouTubeUrl = { 889 let deleteYouTubeUrl = {
883 galleryId: id, 890 galleryId: id,
884 youTubeId: youTubelinkId 891 youTubeId: youTubelinkId
885 }; 892 };
886 http() 893 http()
887 .put("/deleteYoutubeLink", deleteYouTubeUrl) 894 .put("/deleteYoutubeLink", deleteYouTubeUrl)
888 .then(response => { 895 .then(response => {
889 this.snackbar = true; 896 this.snackbar = true;
890 this.text = response.data.message; 897 this.text = response.data.message;
891 this.color = "green"; 898 this.color = "green";
892 this.getGalleryList(); 899 this.getGalleryList();
893 this.close(); 900 this.close();
894 }) 901 })
895 .catch(error => { 902 .catch(error => {
896 this.snackbar = true; 903 this.snackbar = true;
897 this.text = error.response.data.message; 904 this.text = error.response.data.message;
898 this.color = "error"; 905 this.color = "error";
899 }); 906 });
900 }, 907 },
901 displaySearch() { 908 displaySearch() {
902 (this.show = false), (this.showSearch = true); 909 this.show = false;
910 this.showSearch = true;
903 }, 911 },
904 closeSearch() { 912 closeSearch() {
905 this.showSearch = false; 913 this.showSearch = false;
906 this.show = true; 914 this.show = true;
907 this.search = ""; 915 this.search = "";
908 } 916 }
909 }, 917 },
910 mounted() { 918 mounted() {
911 this.token = this.$store.state.token; 919 this.token = this.$store.state.token;
912 this.getAllClasses(); 920 this.getAllClasses();
913 this.getGalleryList(); 921 this.getGalleryList();
914 } 922 }
915 }; 923 };
916 </script> 924 </script>
src/pages/Report/admitCard.vue
Diff comments   View file @fe0d05d
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Admit Card Table **** --> 3 <!-- **** Admit Card Table **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 10 <!-- <v-flex xs3 sm12 lg3 class="subheading mt-4">
11 <label class="right">Exam :</label> 11 <label class="right">Exam :</label>
12 </v-flex> 12 </v-flex>-->
13 <v-flex xs7 sm6 lg8 class="ml-2"> 13 <v-flex xs12 sm12 lg10 class="ml-2">
14 <v-autocomplete 14 <v-autocomplete
15 v-model="getReport.examId" 15 v-model="getReport.examId"
16 label="Please Select" 16 label="Please Select Exam"
17 :items="examData" 17 :items="examData"
18 item-text="examName" 18 item-text="examName"
19 item-value="_id" 19 item-value="_id"
20 :rules="examRules" 20 :rules="examRules"
21 @change="getExamList" 21 @change="getExamList"
22 required 22 required
23 ></v-autocomplete> 23 ></v-autocomplete>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 27
28 <v-flex xs12 sm12 lg3 v-if="getReport.examId"> 28 <v-flex xs12 sm12 lg3 v-if="getReport.examId">
29 <v-layout> 29 <v-layout>
30 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 30 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
31 <label class="right">Class:</label> 31 <label class="right">Class:</label>
32 </v-flex> 32 </v-flex>-->
33 <v-flex xs9 sm6 lg8 class="ml-2"> 33 <v-flex xs12 sm12 lg10 class="ml-2">
34 <v-select 34 <v-select
35 v-model="getReport.classId" 35 v-model="getReport.classId"
36 label="Select your class" 36 label="Select your class"
37 type="text" 37 type="text"
38 :items="classList" 38 :items="classList"
39 item-text="classNum" 39 item-text="classNum"
40 item-value="_id" 40 item-value="_id"
41 :rules="classRules" 41 :rules="classRules"
42 @change="getSections(getReport.classId)" 42 @change="getSections(getReport.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-flex> 47 </v-flex>
48 <v-flex xs12 sm12 lg3 v-if="getReport.classId"> 48 <v-flex xs12 sm12 lg3 v-if="getReport.classId">
49 <v-layout> 49 <v-layout>
50 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 50 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
51 <label class="right">Section:</label> 51 <label class="right">Section:</label>
52 </v-flex> 52 </v-flex>-->
53 <v-flex xs9 sm6 lg8 class="ml-2"> 53 <v-flex xs12 sm12 lg10 class="ml-2">
54 <v-select 54 <v-select
55 :items="addSection" 55 :items="addSection"
56 label="Select your Section" 56 label="Select your Section"
57 v-model="getReport.sectionId" 57 v-model="getReport.sectionId"
58 item-text="name" 58 item-text="name"
59 item-value="_id" 59 item-value="_id"
60 name="Select Section" 60 name="Select Section"
61 @change="getStudents" 61 @change="getStudents"
62 :rules="sectionRules" 62 :rules="sectionRules"
63 required 63 required
64 ></v-select> 64 ></v-select>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-flex> 67 </v-flex>
68 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId"> 68 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
69 <v-layout> 69 <v-layout>
70 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 70 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
71 <label class="right">Student:</label> 71 <label class="right">Student:</label>
72 </v-flex> 72 </v-flex>-->
73 <v-flex xs9 sm6 lg8 class="ml-2"> 73 <v-flex xs12 sm12 lg10 class="ml-2">
74 <v-select 74 <v-select
75 :items="getStudentsList" 75 :items="getStudentsList"
76 label="Select your student" 76 label="Select your student"
77 v-model="getReport.studentId" 77 v-model="getReport.studentId"
78 item-text="name" 78 item-text="name"
79 item-value="_id" 79 item-value="_id"
80 :rules="studentRules" 80 :rules="studentRules"
81 required 81 required
82 ></v-select> 82 ></v-select>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 86
87 <v-flex xs12 sm12 lg4> 87 <v-flex xs12 sm12 lg3>
88 <v-layout> 88 <v-layout>
89 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 89 <!-- <v-flex xs4 sm4 lg3 class="subheading mt-4">
90 <label class="right">Type:</label> 90 <label class="right">Type:</label>
91 </v-flex> 91 </v-flex>-->
92 <v-flex xs7 sm6 lg8 class="ml-2"> 92 <v-flex xs12 sm12 lg10 class="ml-2">
93 <v-autocomplete 93 <v-autocomplete
94 label="Please Select" 94 label="Please Select View Type"
95 type="text" 95 type="text"
96 :rules="typeRules" 96 :rules="typeRules"
97 :items="typeList" 97 :items="typeList"
98 v-model="getReport.form" 98 v-model="getReport.form"
99 item-text="name" 99 item-text="name"
100 item-value="value" 100 item-value="value"
101 @change="getReport(getReport.form)" 101 @change="getReport(getReport.form)"
102 required 102 required
103 ></v-autocomplete> 103 ></v-autocomplete>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <!-- <v-flex xs12 sm12 lg4> 107 <v-flex xs12 sm12 lg3>
108 <v-layout>
109 <v-flex xs4 sm4 lg3 class="subheading mt-4">
110 <label class="right">Background:</label>
111 </v-flex>
112 <v-flex xs7 sm6 lg8 class="ml-2">
113 <v-autocomplete
114 label="Please Select"
115 type="text"
116 :rules="backgroundRules"
117 :items="backgroundList"
118 required
119 ></v-autocomplete>
120 </v-flex>
121 </v-layout>
122 </v-flex>-->
123 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
124 <v-btn 108 <v-btn
125 @click="getSchedule" 109 @click="getSchedule"
126 round 110 round
127 dark 111 dark
128 :loading="loading" 112 :loading="loading"
129 class="open-dialog-button mt-3 ml-5" 113 class="open-dialog-button mt-3"
130 >Get Report</v-btn> 114 >Get Report</v-btn>
131 </v-flex> 115 </v-flex>
132 </v-layout> 116 </v-layout>
133 </v-flex> 117 </v-flex>
134 </v-form> 118 </v-form>
135 </v-card> 119 </v-card>
136 <div v-if="frontPart"> 120 <div v-show="showTable">
137 <v-layout v-show="showTable"> 121 <v-flex xs12 sm12 md10 style="margin:auto">
138 <v-flex xs12> 122 <v-layout>
139 <v-layout> 123 <v-flex xs12>
140 <v-flex xs12> 124 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
141 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()"> 125 Print
142 Print 126 <v-icon right dark>print</v-icon>
143 <v-icon right dark>print</v-icon> 127 </v-btn>
144 </v-btn> 128 </v-flex>
145 </v-flex> 129 </v-layout>
146 </v-layout> 130 <div id="printMe" v-if="frontPart">
147 <div class="admincardreport"> 131 <v-card
148 <v-card class="transparent elevation-0"> 132 style="
149 <v-layout> 133 background-color: #fff;
150 <v-flex xs12 sm12 md12 class="text-xs-center"> 134 border: 1px solid #ddd;
151 <div class="line"> 135 color: rgba(0,0,0,0.87);
152 <div class="school-logo"> 136 overflow-x: auto;
153 <img :src="userData.schoolLogoUrl" width="140" alt="logo" v-if="userData.profilePicUrl"/> 137 display: block;
154 <img src="/static/icon/dashboard icons-18.png" width="140" v-else-if="!userData.profilePicUrl" /> 138 padding:14px !important;
155 </div> 139 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
156 <div class="school-name"> 140 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
157 <h2>{{ userData.name }}</h2> 141 >
158 <v-flex class="school-address"> 142 <v-layout style="border-bottom: 1px solid #ddd;margin-bottom: 6px;">
159 <p>{{ userData.address }}, {{ userData.pinCode }}</p> 143 <v-flex xs3 style="margin-bottom:0px">
160 <h4>{{ examName }} Exam Admit Card - (2019-2020)</h4> 144 <img
161 </v-flex> 145 :src="userData.schoolLogoUrl"
162 </div> 146 width="90"
163 <!-- <div class="student-logo"> 147 alt="logo"
164 <v-avatar> 148 v-if="userData.schoolLogoUrl"
165 <img :src="studentData.profilePicUrl" width="140" v-if="studentData.profilePicUrl" /> 149 />
166 <img src="/static/icon/user.png" width="140" v-else-if="!studentData.profilePicUrl" /> 150 <img
167 </v-avatar> 151 src="/static/default_thumb.png"
168 </div> --> 152 width="140"
169 </div> 153 v-else-if="!userData.schoolLogoUrl"
170 <div class="school-info"> 154 />
171 <v-flex xs12 sm12 md12 > 155 </v-flex>
172 <div class="student-info" v-if="getScheduleList.studentData"> 156 <v-flex xs5 style="text-align:center;margin-bottom:0px">
173 <p 157 <p
174 style="font-size:18px;margin:0px;margin-bottom:4px;" 158 style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px"
175 >Name : {{ getScheduleList.studentData.name }}</p> 159 >{{ userData.name }}</p>
176 <p 160 <p>{{ userData.address }}, {{ userData.pinCode }}</p>
177 style="font-size: 18px;margin:0px;margin-bottom:4px;" 161 <div>
178 >Class : {{ getScheduleList.studentData.classId.classNum}}</p> 162 <h4>First Terminal Exam Admit Card - ( {{ userData.establishmentYear }})</h4>
179 <p 163 </div>
180 style="font-size: 18px;margin:0px;margin-bottom:4px;" 164 </v-flex>
181 >Section : {{ getScheduleList.studentData.sectionId.name }}</p> 165 <v-flex xs4 style="text-align:center;margin-bottom:0px">
182 <p 166 <!-- {{userData.profilePicUrl}} -->
183 style="font-size: 18px;margin:0px;margin-bottom:4px;" 167 <img src="/static/icon/user.png" style="widht:80px;" />
184 >Roll NO : {{ getScheduleList.studentData.rollNo }}</p> 168 </v-flex>
185 <p 169 </v-layout>
186 style="font-size: 18px;margin:0px;margin-bottom:4px;" 170 <v-layout>
187 >Blood Group : {{ getScheduleList.studentData.bloodGroup }}</p> 171 <v-flex xs5 style="margin-bottom:10px">
188 <p style="font-size: 18px;color: #707478;">Subject in which Appearing</p> 172 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
189 </div> 173 <b>Name :</b>
190 </v-flex> 174 <span>{{getScheduleList.studentData.name}}</span>
191 </div> 175 </p>
192 </v-flex> 176 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
193 </v-layout> 177 <b>Class :</b>
194 <v-data-table 178 <span>{{getScheduleList.studentData.classId.classNum}}</span>
195 :headers="headers" 179 </p>
196 :items="getScheduleListArray" 180 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
197 :pagination.sync="pagination" 181 <b>Roll :</b>
198 :search="search" 182 <span>{{getScheduleList.studentData.rollNo}}</span>
183 </p>
184 </v-flex>
185 <v-flex xs5 style="margin-bottom:10px">
186 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
187 <b>Section :</b>
188 <span>{{getScheduleList.studentData.sectionId.name }}</span>
189 </p>
190 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
191 <b>Blood Group :</b>
192 <span style="color: #707478">{{getScheduleList.studentData.bloodGroup }}</span>
193 </p>
194 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p>
195 </v-flex>
196 </v-layout>
197 <table
198 class="mb-5 tableRsponsive feeTypeTable"
199 style="border: 1px solid lightgrey;
200 border-collapse: collapse;!important
201 table-layout: auto !important;
202 width: 100% !important;"
203 >
204 <thead style="border: 1px solid lightgrey !important;">
205 <tr style="border: 1px solid lightgrey !important;padding:4px;">
206 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td>
207 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td>
208 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td>
209 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td>
210 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td>
211 </tr>
212 </thead>
213 <tbody style="border: 1px solid lightgrey !important;">
214 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i">
215 <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td>
216 <td
217 style="border: 1px solid lightgrey !important;padding: 6px;"
218 >{{ scheduleData.date ? scheduleData.date : '-' }}</td>
219 <td
220 style="border: 1px solid lightgrey !important;padding: 6px;"
221 >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td>
222 <td
223 style="border: 1px solid lightgrey !important;padding: 6px;"
224 >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td>
225 <td
226 style="border: 1px solid lightgrey !important;padding: 6px;"
227 >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td>
228 </tr>
229 <tr v-if="getScheduleList.scheduleData.length === 0">
230 <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td>
231 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
232 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
233 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
234 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
235 </tr>
236 </tbody>
237 </table>
238 </v-card>
239 </div>
240 <div id="printMe" v-if="backPart">
241 <v-card
242 style="
243 text-align:center
244 background-color: #fff;
245 border: 1px solid #ddd;
246 color: rgba(0,0,0,0.87);
247 overflow-x: auto;
248 display: block;
249 padding:14px !important;
250 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
251 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
252 >
253 <div
254 style="
255 margin-bottom: 16px;
256 overflow: hidden;
257 padding: 50px 90px;"
258 >
259 <ol style="
260 margin: 0;
261 margin-bottom: 10px;">
262 <p
263 style="
264 margin-bottom: 16px;
265 line-height: 20px;
266 text-align: left;"
199 > 267 >
200 <template slot="items" slot-scope="props"> 268 <b>1. Do not Carry these Electronic Gadgets:</b>
201 <td class="td td-row">{{ props.index + 1}}</td> 269 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
202 <td class="td td-row text-xs-center">{{ props.item.date }}</td> 270 in the examination lab. These items are strictly prohibited from examination lab.
203 <td class="td td-row text-xs-center">{{ props.item.timeFrom }}</td> 271 </p>
204 <td class="td td-row text-xs-center">{{ props.item.timeTo }}</td> 272 <p
205 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> 273 style="
206 </template> 274 margin-bottom: 16px;
207 <v-alert 275 line-height: 20px;
208 slot="no-results" 276 text-align: left;"
209 :value="true" 277 >
210 color="error" 278 <b>2. Do not Carry these Ornaments:</b>
211 icon="warning" 279 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
212 >Your search for "{{ search }}" found no results.</v-alert> 280 necklace,pendants,badge,broach,hair-pin,hair-band.
213 </v-data-table> 281 </p>
214 <v-flex xs12 id="printMe" v-show="hideprintAdmitReport"> 282 <p
215 <v-layout> 283 style="
216 <v-flex xs12 style="text-align:center;margin-bottom:10px"> 284 margin-bottom: 16px;
217 <img :src="userData.schoolLogoUrl" width="140" alt="logo" v-if="userData.profilePicUrl"/> 285 line-height: 20px;
218 <img src="/static/icon/dashboard icons-18.png" width="140" v-else-if="!userData.profilePicUrl" /> 286 text-align: left;"
219 <p class="title">{{ userData.name }}</p> 287 >
220 <p>{{ userData.address }}, {{ userData.pinCode }}</p> 288 <b>3. What Candidates wear to Examination hall:</b>
221 <div> 289 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
222 <h4>First Terminal Exam Admit Card - (2019-2020)</h4> 290 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
223 </div> 291 </p>
224 </v-flex> 292 <p
225 </v-layout> 293 style="
226 <table 294 margin-bottom: 16px;
227 class="mb-5 tableRsponsive feeTypeTable" 295 line-height: 20px;
228 style="border: 1px solid lightgrey; 296 text-align: left;"
229 border-collapse: collapse;!important 297 >
230 table-layout: auto !important; 298 <b>4. Do not carry Stationary:</b>
231 width: 100% !important;" 299 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
232 > 300 on the computer screen alloted to the candidates.
233 <thead style="border: 1px solid lightgrey !important;"> 301 </p>
234 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 302 <p
235 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td> 303 style="
236 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td> 304 margin-bottom: 16px;
237 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td> 305 line-height: 20px;
238 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td> 306 text-align: left;"
239 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td> 307 >
240 </tr> 308 <b>5. Do not Carry Bags:</b>
241 </thead> 309 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
242 <tbody 310 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
243 style="border: 1px solid lightgrey !important;"> 311 safe custody of such items.
244 <tr v-if="(scheduleData) in getScheduleListArray" slot="items" slot-scope="props"> 312 </p>
245 <td 313 <p
246 style="border: 1px soild lightgrey !importand;padding:6px;" 314 style="
247 >{{ props.index + 1 }}</td> 315 margin-bottom: 16px;
248 <td 316 line-height: 20px;
249 style="border: 1px solid lightgrey !important;padding: 6px;" 317 text-align: left;"
250 >{{ scheduleData.date }}</td> 318 >
251 <td 319 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
252 style="border: 1px solid lightgrey !important;padding: 6px;" 320 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
253 >{{ scheduleData.timeFrom }}</td> 321 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
254 <td 322 from appearing in future examinations of the Commission for a period of 3 years.
255 style="border: 1px solid lightgrey !important;padding: 6px;" 323 </p>
256 >{{ scheduleData.timeTo }}</td> 324 <p
257 <td 325 style="
258 style="border: 1px solid lightgrey !important;padding: 6px;" 326 margin-bottom: 16px;
259 >{{ scheduleData.subjectName }}</td> 327 line-height: 20px;
260 </tr> 328 text-align: left;
261 </tbody> 329 "
262 </table> 330 >
263 </v-flex> 331 <b>7. Candidate should not create Disturbance in Exam Hall:</b>
264 </v-card> 332 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
265 </div> 333 his/her candidature shall be summarily canceled.
266 </v-flex> 334 </p>
267 </v-layout> 335 </ol>
336 </div>
337 </v-card>
338 </div>
339 </v-flex>
268 </div> 340 </div>
269 <div v-if="backPart"> 341 <v-snackbar
270 <v-layout v-show="showData"> 342 :timeout="timeout"
271 <v-flex xs12> 343 :top="y === 'top'"
272 <v-layout> 344 :right="x === 'right'"
273 <v-flex xs12> 345 :vertical="mode === 'vertical'"
274 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()"> 346 v-model="snackbar"
275 Print 347 :color="color"
276 <v-icon right dark>print</v-icon> 348 >{{ text }}</v-snackbar>
277 </v-btn> 349 <div class="loader" v-if="showLoader">
278 </v-flex> 350 <v-progress-circular indeterminate color="white"></v-progress-circular>
279 </v-layout>
280 <v-flex xs12 sm12 md12 class="text-xs-center">
281 <div class="admitcardreportbackend" id="printMe">
282 <ol>
283 <p>
284 <b>1. Do not Carry these Electronic Gadgets:</b>
285 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
286 in the examination lab. These items are strictly prohibited from examination lab.
287 </p>
288 <p>
289 <b>2. Do not Carry these Ornaments:</b>
290 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
291 necklace,pendants,badge,broach,hair-pin,hair-band.
292 </p>
293 <p>
294 <b>3. What Candidates wear to Examination hall:</b>
295 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
296 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
297 </p>
298 <p>
299 <b>4. Do not carry Stationary:</b>
300 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
301 on the computer screen alloted to the candidates.
302 </p>
303 <p>
304 <b>5. Do not Carry Bags:</b>
305 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
306 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
307 safe custody of such items.
308 </p>
309 <p>
310 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
311 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
312 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
313 from appearing in future examinations of the Commission for a period of 3 years.
314 </p>
315 <p>
316 <b>7. Candidate should not create Disturbance in Exam Hall:</b>
317 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
318 his/her candidature shall be summarily canceled.
319 </p>
320 </ol>
321 </div>
322 </v-flex>
323 </v-flex>
324 </v-layout>
325 </div> 351 </div>
326 </v-container> 352 </v-container>
327 </template> 353 </template>
328 <script> 354 <script>
329 import http from "@/Services/http.js"; 355 import http from "@/Services/http.js";
330 import moment from "moment"; 356 import moment from "moment";
331 import _ from "underscore"; 357 import _ from "underscore";
332 358
333 export default { 359 export default {
334 data: () => ({ 360 data: () => ({
361 snackbar: false,
362 color: "",
363 y: "top",
364 x: "right",
365 mode: "",
366 timeout: 10000,
367 text: "",
368 showLoader: false,
335 valid: true, 369 valid: true,
336 userData: {}, 370 userData: {},
337 frontPart: false, 371 frontPart: false,
338 backPart: false, 372 backPart: false,
339 loading: false, 373 loading: false,
340 showTable: false, 374 showTable: false,
341 showData: false, 375 showData: false,
342 hideprintAdmitReport: false, 376 hideprintAdmitReport: false,
343
344 examRules: [v => !!v || "Exam Field is required"], 377 examRules: [v => !!v || "Exam Field is required"],
345 classRules: [v => !!v || "Class Field Required"], 378 classRules: [v => !!v || "Class Field Required"],
346 sectionRules: [v => !!v || "Section Field is required"], 379 sectionRules: [v => !!v || "Section Field is required"],
347 studentRules: [v => !!v || "Student Field is required"], 380 studentRules: [v => !!v || "Student Field is required"],
348 typeRules: [v => !!v || "Type Field is required"], 381 typeRules: [v => !!v || "Type Field is required"],
349 backgroundRules: [v => !!v || "Background Field is required"], 382 backgroundRules: [v => !!v || "Background Field is required"],
350 383
351 pagination: { 384 pagination: {
352 rowsPerPage: 10 385 rowsPerPage: 10
353 }, 386 },
354 search: "", 387 search: "",
355 388
356 classList: [], 389 classList: [],
357 studentData: {}, 390 studentData: {},
358 scheduleData: {}, 391 scheduleData: {},
359 examData: [], 392 examData: [],
360 addSection: [], 393 addSection: [],
361 getStudentsList: [], 394 getStudentsList: [],
362 getScheduleList: [], 395 getScheduleList: [],
363 getScheduleListArray: [], 396 getScheduleListArray: [],
364 examName: [], 397 examName: [],
365 typeList: [ 398 typeList: [
366 { 399 {
367 name: "Front Part", 400 name: "Front Part",
368 value: "frontPart" 401 value: "frontPart"
369 }, 402 },
370 { 403 {
371 name: "Back Part", 404 name: "Back Part",
372 value: "backPart" 405 value: "backPart"
373 } 406 }
374 ], 407 ],
375 backgroundList: ["Yes", "No"], 408 backgroundList: ["Yes", "No"],
376
377 headers: [ 409 headers: [
378 { 410 {
379 text: "No", 411 text: "No",
380 align: "", 412 align: "",
381 sortable: false, 413 sortable: false,
382 value: "No" 414 value: "No"
383 }, 415 },
384 { 416 {
385 text: "Exam Date", 417 text: "Exam Date",
386 align: "center", 418 align: "center",
387 sortable: false, 419 sortable: false,
388 value: "date" 420 value: "date"
389 }, 421 },
390 { 422 {
391 text: "Start Time", 423 text: "Start Time",
392 align: "center", 424 align: "center",
393 sortable: false, 425 sortable: false,
394 value: "timeFrom" 426 value: "timeFrom"
395 }, 427 },
396 { 428 {
397 text: "End Time", 429 text: "End Time",
398 align: "center", 430 align: "center",
399 sortable: false, 431 sortable: false,
400 value: "timeTo" 432 value: "timeTo"
401 }, 433 },
402 { 434 {
403 text: "Subject Name", 435 text: "Subject Name",
404 align: "center", 436 align: "center",
405 sortable: false, 437 sortable: false,
406 value: "subjectName" 438 value: "subjectName"
407 } 439 }
408 ] 440 ]
409 }), 441 }),
410 442
411 mounted() { 443 mounted() {
412 this.token = this.$store.state.token; 444 this.token = this.$store.state.token;
413 this.getClass(); 445 this.getClass();
414 this.getExamList(); 446 this.getExamList();
415 this.getUserData(); 447 this.getUserData();
416 }, 448 },
417 449
418 methods: { 450 methods: {
419 getReport() { 451 getReport() {
420 if (this.getReport.form === "frontPart") { 452 if (this.getReport.form === "frontPart") {
421 this.frontPart = true; 453 this.frontPart = true;
422 this.backPart = false; 454 this.backPart = false;
423 } 455 }
424 if (this.getReport.form === "backPart") { 456 if (this.getReport.form === "backPart") {
425 this.frontPart = false; 457 this.frontPart = false;
426 this.backPart = true; 458 this.backPart = true;
427 } 459 }
428 }, 460 },
429 getExamList() { 461 getExamList() {
430 this.showLoader = true; 462 this.showLoader = true;
431 this.loadingSearch = true; 463 this.loadingSearch = true;
432 http() 464 http()
433 .get("/getExamsList", { 465 .get("/getExamsList", {
434 headers: { Authorization: "Bearer " + this.token } 466 headers: { Authorization: "Bearer " + this.token }
435 }) 467 })
436 .then(response => { 468 .then(response => {
437 this.examData = response.data.data; 469 this.examData = response.data.data;
438 this.showLoader = false; 470 this.showLoader = false;
439 this.loadingSearch = false; 471 this.loadingSearch = false;
440 }) 472 })
441 .catch(error => { 473 .catch(error => {
442 this.showLoader = false; 474 this.showLoader = false;
443 this.loadingSearch = false; 475 this.loadingSearch = false;
444 this.snackbar = true; 476 this.snackbar = true;
445 this.text = error.response.data.message; 477 this.text = error.response.data.message;
446 if (error.response.status === 401) { 478 if (error.response.status === 401) {
447 this.$router.replace({ path: "/" }); 479 this.$router.replace({ path: "/" });
448 this.$store.dispatch("setToken", null); 480 this.$store.dispatch("setToken", null);
449 this.$store.dispatch("Id", null); 481 this.$store.dispatch("Id", null);
450 } 482 }
451 }); 483 });
452 }, 484 },
453 getClass() { 485 getClass() {
454 this.showLoader = true; 486 this.showLoader = true;
455 http() 487 http()
456 .get("/getClassesList", { 488 .get("/getClassesList", {
457 headers: { Authorization: "Bearer " + this.token } 489 headers: { Authorization: "Bearer " + this.token }
458 }) 490 })
459 .then(response => { 491 .then(response => {
460 this.classList = response.data.data; 492 this.classList = response.data.data;
461 this.showLoader = false; 493 this.showLoader = false;
462 }) 494 })
463 .catch(error => { 495 .catch(error => {
464 this.showLoader = false; 496 this.showLoader = false;
465 // console.log("err====>", err); 497 // console.log("err====>", err);
466 }); 498 });
467 }, 499 },
468 getSections(_id) { 500 getSections(_id) {
469 this.showLoader = true; 501 this.showLoader = true;
470 http() 502 http()
471 .get( 503 .get(
472 "/getSectionsList", 504 "/getSectionsList",
473 { params: { classId: _id } }, 505 { params: { classId: _id } },
474 { 506 {
475 headers: { Authorization: "Bearer " + this.token } 507 headers: { Authorization: "Bearer " + this.token }
476 } 508 }
477 ) 509 )
478 .then(response => { 510 .then(response => {
479 this.addSection = response.data.data; 511 this.addSection = response.data.data;
480 this.showLoader = false; 512 this.showLoader = false;
481 }) 513 })
482 .catch(err => { 514 .catch(err => {
483 this.showLoader = false; 515 this.showLoader = false;
484 // console.log("err====>", err); 516 // console.log("err====>", err);
485 }); 517 });
486 }, 518 },
487 getStudents() { 519 getStudents() {
488 this.showLoader = true; 520 this.showLoader = true;
489 http() 521 http()
490 .get("/getStudentWithClass", { 522 .get("/getStudentWithClass", {
491 params: { 523 params: {
492 classId: this.getReport.classId, 524 classId: this.getReport.classId,
493 sectionId: this.getReport.sectionId 525 sectionId: this.getReport.sectionId
494 } 526 }
495 }) 527 })
496 .then(response => { 528 .then(response => {
497 this.getStudentsList = response.data.data; 529 this.getStudentsList = response.data.data;
498 this.showLoader = false; 530 this.showLoader = false;
499 }) 531 })
500 .catch(error => { 532 .catch(error => {
501 console.log("err====>", error); 533 console.log("err====>", error);
502 this.showLoader = false; 534 this.showLoader = false;
503 }); 535 });
504 }, 536 },
505 getSchedule() { 537 getSchedule() {
506 this.showLoader = true; 538 if (this.$refs.form.validate()) {
507 http() 539 this.showLoader = true;
508 .get("/getScheduleForParticularStudent", { 540 http()
509 params: { 541 .get("/getScheduleForParticularStudent", {
510 examId: this.getReport.examId, 542 params: {
511 classId: this.getReport.classId, 543 examId: this.getReport.examId,
512 sectionId: this.getReport.sectionId, 544 classId: this.getReport.classId,
513 studentId: this.getReport.studentId 545 sectionId: this.getReport.sectionId,
514 } 546 studentId: this.getReport.studentId
515 }) 547 }
516 .then(response => { 548 })
517 this.getScheduleList = response.data.data; 549 .then(response => {
518 this.getScheduleListArray = response.data.data.scheduleData; 550 this.showTable = true;
519 this.examName = response.data.data.scheduleData[0].examId.examName; 551 this.getScheduleList = response.data.data;
520 this.showTable = true; 552 this.showData = true;
521 this.showData = true; 553 this.showLoader = false;
522 this.showLoader = false; 554 })
523 }) 555 .catch(error => {
524 .catch(error => { 556 this.showLoader = false;
525 this.showLoader = false; 557 });
526 }); 558 }
527 }, 559 },
528 560
529 printAdmitReport() { 561 printAdmitReport() {
530 // Pass the element id here 562 // Pass the element id here
531 this.$htmlToPaper("printMe"); 563 this.$htmlToPaper("printMe");
532 }, 564 },
533 getUserData() { 565 getUserData() {
534 http() 566 http()
535 .get("/getParticularUserDetail") 567 .get("/getParticularUserDetail")
536 .then(response => { 568 .then(response => {
537 this.userData = response.data.data; 569 this.userData = response.data.data;
538 }) 570 })
539 .catch(error => { 571 .catch(error => {
540 // if (error.response.status === 401) { 572 if (error.response.status === 401) {
541 // this.$router.replace({ path: "/" }); 573 this.$router.replace({ path: "/" });
542 // this.$store.dispatch("setToken", null); 574 this.$store.dispatch("setToken", null);
543 // this.$store.dispatch("Id", null); 575 this.$store.dispatch("Id", null);
544 // } 576 }
545 }); 577 });
546 }, 578 }
547 // created() { 579 // created() {
src/pages/Report/idCard.vue
Diff comments   View file @fe0d05d
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Id Card Select options **** --> 3 <!-- **** Id Card Select options **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4"> 10 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
11 <label class="right">Id Card For:</label> 11 <label class="right">Id Card For:</label>
12 </v-flex>--> 12 </v-flex>-->
13 <v-flex xs12 sm12 lg10 class="ml-2"> 13 <v-flex xs12 sm12 lg10 class="ml-2">
14 <v-autocomplete 14 <v-autocomplete
15 v-model="getReport.role" 15 v-model="getReport.role"
16 label="Select Type" 16 label="Select Type"
17 :items="getRoles" 17 :items="getRoles"
18 item-text="name" 18 item-text="name"
19 item-value="role" 19 item-value="role"
20 @change="getRoleInputs(getReport.role)" 20 @change="getRoleInputs(getReport.role)"
21 required 21 required
22 ></v-autocomplete> 22 ></v-autocomplete>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 </v-flex> 25 </v-flex>
26 <v-flex xs12 sm12 lg4 v-if="showClass"> 26 <v-flex xs12 sm12 lg4 v-if="showClass">
27 <v-layout> 27 <v-layout>
28 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 28 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
29 <label class="right">Class:</label> 29 <label class="right">Class:</label>
30 </v-flex>--> 30 </v-flex>-->
31 <v-flex xs12 sm12 lg10 class="ml-2"> 31 <v-flex xs12 sm12 lg10 class="ml-2">
32 <v-select 32 <v-select
33 v-model="getReport.classId" 33 v-model="getReport.classId"
34 label="Select Class" 34 label="Select Class"
35 :items="classList" 35 :items="classList"
36 item-text="classNum" 36 item-text="classNum"
37 item-value="_id" 37 item-value="_id"
38 @change="getSections(getReport.classId)" 38 @change="getSections(getReport.classId)"
39 required 39 required
40 ></v-select> 40 ></v-select>
41 </v-flex> 41 </v-flex>
42 </v-layout> 42 </v-layout>
43 </v-flex> 43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="showSections"> 44 <v-flex xs12 sm12 lg4 v-if="showSections">
45 <v-layout> 45 <v-layout>
46 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 46 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
47 <label class="right">Section:</label> 47 <label class="right">Section:</label>
48 </v-flex>--> 48 </v-flex>-->
49 <v-flex xs12 sm12 lg10 class="ml-2"> 49 <v-flex xs12 sm12 lg10 class="ml-2">
50 <v-select 50 <v-select
51 :items="addSection" 51 :items="addSection"
52 label="Select Section" 52 label="Select Section"
53 v-model="getReport.sectionId" 53 v-model="getReport.sectionId"
54 item-text="name" 54 item-text="name"
55 item-value="_id" 55 item-value="_id"
56 name="Select Section" 56 name="Select Section"
57 @change="getStudents" 57 @change="getStudents"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 </v-flex> 62 </v-flex>
63 <v-flex xs12 sm12 lg4 v-if="showStudents"> 63 <v-flex xs12 sm12 lg4 v-if="showStudents">
64 <v-layout> 64 <v-layout>
65 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4"> 65 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
66 <label class="right">Student:</label> 66 <label class="right">Student:</label>
67 </v-flex>--> 67 </v-flex>-->
68 <v-flex xs12 sm12 lg10 class="ml-2"> 68 <v-flex xs12 sm12 lg10 class="ml-2">
69 <v-select 69 <v-select
70 :items="getStudentsList" 70 :items="getStudentsList"
71 label="Select Student" 71 label="Select Student"
72 v-model="getReport._id" 72 v-model="getReport._id"
73 item-text="name" 73 item-text="name"
74 item-value="_id" 74 item-value="_id"
75 required 75 required
76 ></v-select> 76 ></v-select>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12 sm12 lg4 v-if="showTeacher"> 80 <v-flex xs12 sm12 lg4 v-if="showTeacher">
81 <v-layout> 81 <v-layout>
82 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 82 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
83 <label class="right">Teacher:</label> 83 <label class="right">Teacher:</label>
84 </v-flex>--> 84 </v-flex>-->
85 <v-flex xs12 sm12 lg10 class="ml-2"> 85 <v-flex xs12 sm12 lg10 class="ml-2">
86 <v-select 86 <v-select
87 v-model="getReport._id" 87 v-model="getReport._id"
88 label="Select Teacher" 88 label="Select Teacher"
89 :items="teacherList" 89 :items="teacherList"
90 item-text="name" 90 item-text="name"
91 item-value="_id" 91 item-value="_id"
92 required 92 required
93 ></v-select> 93 ></v-select>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 <v-flex xs12 sm12 lg4 v-if="showAdmin"> 97 <v-flex xs12 sm12 lg4 v-if="showAdmin">
98 <v-layout> 98 <v-layout>
99 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 99 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
100 <label class="right">Admin:</label> 100 <label class="right">Admin:</label>
101 </v-flex>--> 101 </v-flex>-->
102 <v-flex xs12 sm12 lg10 class="ml-2"> 102 <v-flex xs12 sm12 lg10 class="ml-2">
103 <v-select 103 <v-select
104 v-model="getReport._id" 104 v-model="getReport._id"
105 label="Select Admin" 105 label="Select Admin"
106 :items="userData" 106 :items="userData"
107 item-text="name" 107 item-text="name"
108 item-value="_id" 108 item-value="_id"
109 required 109 required
110 ></v-select> 110 ></v-select>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-flex> 113 </v-flex>
114 <v-flex xs12 sm12 lg4 v-if="showAccountant"> 114 <v-flex xs12 sm12 lg4 v-if="showAccountant">
115 <v-layout> 115 <v-layout>
116 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 116 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
117 <label class="right">Accountant:</label> 117 <label class="right">Accountant:</label>
118 </v-flex>--> 118 </v-flex>-->
119 <v-flex xs12 sm12 lg10 class="ml-2"> 119 <v-flex xs12 sm12 lg10 class="ml-2">
120 <v-select 120 <v-select
121 v-model="getReport._id" 121 v-model="getReport._id"
122 label="Select Accountant" 122 label="Select Accountant"
123 :items="Users" 123 :items="Users"
124 item-text="name" 124 item-text="name"
125 item-value="_id" 125 item-value="_id"
126 required 126 required
127 ></v-select> 127 ></v-select>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-flex> 130 </v-flex>
131 <v-flex xs12 sm12 lg4 v-if="showLibrarian"> 131 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
132 <v-layout> 132 <v-layout>
133 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 133 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
134 <label class="right">Librarian:</label> 134 <label class="right">Librarian:</label>
135 </v-flex>--> 135 </v-flex>-->
136 <v-flex xs12 sm12 lg10 class="ml-2"> 136 <v-flex xs12 sm12 lg10 class="ml-2">
137 <v-select 137 <v-select
138 v-model="getReport._id" 138 v-model="getReport._id"
139 label="Select Librarian" 139 label="Select Librarian"
140 :items="Users" 140 :items="Users"
141 item-text="name" 141 item-text="name"
142 item-value="_id" 142 item-value="_id"
143 required 143 required
144 ></v-select> 144 ></v-select>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12 sm12 lg4> 148 <v-flex xs12 sm12 lg4>
149 <v-layout> 149 <v-layout>
150 <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4"> 150 <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4">
151 <label class="right">Type:</label> 151 <label class="right">Type:</label>
152 </v-flex>--> 152 </v-flex>-->
153 <v-flex xs12 sm12 lg10 class="ml-2"> 153 <v-flex xs12 sm12 lg10 class="ml-2">
154 <v-autocomplete 154 <v-autocomplete
155 label="Select View Type" 155 label="Select View Type"
156 type="text" 156 type="text"
157 :items="typeList" 157 :items="typeList"
158 v-model="getReport.form" 158 v-model="getReport.form"
159 item-text="name" 159 item-text="name"
160 item-value="value" 160 item-value="value"
161 :rules="typeRules" 161 :rules="typeRules"
162 @change="getReportType(getReport.form)" 162 @change="getReportType(getReport.form)"
163 required 163 required
164 ></v-autocomplete> 164 ></v-autocomplete>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 <v-flex xs12 sm12 lg4> 168 <v-flex xs12 sm12 lg4>
169 <v-btn 169 <v-btn
170 @click="getCards" 170 @click="getCards"
171 round 171 round
172 dark 172 dark
173 :loading="loading" 173 :loading="loading"
174 class="open-dialog-button mt-3" 174 class="open-dialog-button mt-3"
175 >Get Report</v-btn> 175 >Get Report</v-btn>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-form> 179 </v-form>
180 </v-card> 180 </v-card>
181 <div> 181 <div>
182 <v-layout v-show="showReport"> 182 <v-layout v-show="showReport">
183 <v-flex xs12> 183 <v-flex xs12>
184 <v-card class="transparent elevation-0"> 184 <v-card class="transparent elevation-0">
185 <v-layout> 185 <v-layout>
186 <v-flex xs12> 186 <v-flex xs12>
187 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()"> 187 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
188 Print 188 Print
189 <v-icon right dark>print</v-icon> 189 <v-icon right dark>print</v-icon>
190 </v-btn> 190 </v-btn>
191 </v-flex> 191 </v-flex>
192 </v-layout> 192 </v-layout>
193 </v-card> 193 </v-card>
194 <v-container grid-list-md id="printMe"> 194 <v-container grid-list-md id="printMe">
195 <v-layout class="col-sm-12"> 195 <v-layout class="col-sm-12">
196 <div 196 <div
197 style="font-family: arial; 197 style="font-family: arial;
198 max-width: 794px; 198 max-width: 794px;
199 max-height: 1123px; 199 max-height: 1123px;
200 margin-left: auto; 200 margin-left: auto;
201 margin-right: auto; 201 margin-right: auto;
202 -webkit-print-color-adjust: exact;" 202 -webkit-print-color-adjust: exact;"
203 > 203 >
204 <div 204 <div
205 style=" 205 style="
206 float: left; 206 float: left;
207 height: 520px; 207 height: 520px;
208 width: 520px; 208 width: 520px;
209 background: #fff; 209 background: #fff;
210 border: 1px solid lightgray; 210 border: 1px solid lightgray;
211 position:relative;" 211 position:relative;"
212 > 212 >
213 <!-- bottom-right-side-image --> 213 <!-- bottom-right-side-image -->
214 <img 214 <img
215 src="/static/icon/shape1.png" 215 src="/static/icon/shape1.png"
216 alt="shape" 216 alt="shape"
217 style="position:absolute;width: 90px;" 217 style="position:absolute;width: 90px;"
218 /> 218 />
219 <!-- Front Side --> 219 <!-- Front Side -->
220 <v-layout 220 <v-layout
221 style=" 221 style="
222 text-align: center; 222 text-align: center;
223 margin-top: 50px;" 223 margin-top: 50px;"
224 v-if="frontPart" 224 v-if="frontPart"
225 > 225 >
226 <v-flex xs12> 226 <v-flex xs12>
227 <!-- school Logo Url --> 227 <!-- school Logo Url -->
228 <img 228 <img
229 v-if="getCard.schoolLogoUrl" 229 v-if="getCard.schoolLogoUrl"
230 :src="getCard.schoolLogoUrl" 230 :src="getCard.schoolLogoUrl"
231 alt="schoollogo" 231 alt="schoollogo"
232 style=" 232 style="
233 width: 110px; 233 width: 110px;
234 margin-top:10px; 234 margin-top:10px;
235 overflow:hidden" 235 overflow:hidden"
236 /> 236 />
237 <v-layout style="margin:auto"> 237 <v-layout style="margin:auto">
238 <!-- profile url --> 238 <!-- profile url -->
239 <img 239 <img
240 v-if="getCard.profilePicUrl" 240 v-if="getCard.profilePicUrl"
241 :src="getCard.profilePicUrl" 241 :src="getCard.profilePicUrl"
242 alt="profileImage" 242 alt="profileImage"
243 style="; 243 style=";
244 width: 110px; 244 width: 110px;
245 margin:10px auto; 245 margin:10px auto;
246 width: 110px; 246 width: 110px;
247 margin: 10px auto; 247 margin: 10px auto;
248 border: 3px solid #323232; 248 border: 3px solid #323232;
249 border-radius: 12px;" 249 border-radius: 12px;"
250 /> 250 />
251 <img 251 <img
252 style="; 252 style=";
253 width: 110px; 253 width: 110px;
254 margin:10px auto; 254 margin:10px auto;
255 width: 110px; 255 width: 110px;
256 margin: 10px auto;" 256 margin: 10px auto;"
257 alt="dummy" 257 alt="dummy"
258 src="/static/icon/user.png" 258 src="/static/icon/user.png"
259 v-if="!getCard.profilePicUrl && getCard.role != '2'" 259 v-if="!getCard.profilePicUrl && getCard.role != '2'"
260 /> 260 />
261 </v-layout> 261 </v-layout>
262 262
263 <p 263 <p
264 style="color: #302653;font-size:24px; 264 style="color: #302653;font-size:24px;
265 letter-spacing: 4px; 265 letter-spacing: 4px;
266 margin-bottom:14px;" 266 margin-bottom:14px;"
267 > 267 >
268 <b>{{ getCard.name}}</b> 268 <b>{{ getCard.name}}</b>
269 </p> 269 </p>
270 <p 270 <p
271 style="color: #302653; 271 style="color: #302653;
272 font-size:14px; 272 font-size:14px;
273 letter-spacing: 4px; 273 letter-spacing: 4px;
274 margin-bottom:14px;" 274 margin-bottom:14px;"
275 > 275 >
276 <b>{{ getCard.gender}}</b> 276 <b>{{ getCard.gender}}</b>
277 </p> 277 </p>
278 <p 278 <p
279 v-if="getCard.classId" 279 v-if="getCard.classId"
280 style="color: #302653; 280 style="color: #302653;
281 font-size:24px; 281 font-size:24px;
282 letter-spacing: 4px; 282 letter-spacing: 4px;
283 margin-bottom:14px;" 283 margin-bottom:14px;"
284 >{{ getCard.classId.classNum }}</p> 284 >{{ getCard.classId.classNum }}</p>
285 <p 285 <p
286 v-if="getCard.classId" 286 v-if="getCard.classId"
287 style="color: #302653; 287 style="color: #302653;
288 font-size:24px; 288 font-size:24px;
289 letter-spacing: 4px; 289 letter-spacing: 4px;
290 margin-bottom:14px;" 290 margin-bottom:14px;"
291 >{{ getCard.sectionId.name }}</p> 291 >{{ getCard.sectionId.name }}</p>
292 <p 292 <p
293 v-if="getCard.rollNo" 293 v-if="getCard.rollNo"
294 style="color: #302653; 294 style="color: #302653;
295 font-size:24px; 295 font-size:24px;
296 letter-spacing: 2px; 296 letter-spacing: 2px;
297 margin-bottom:10px;" 297 margin-bottom:10px;"
298 >Roll: {{ getCard.rollNo }}</p> 298 >Roll: {{ getCard.rollNo }}</p>
299 <p 299 <p
300 v-if="getCard.joinDate" 300 v-if="getCard.joinDate"
301 style="color: #302653; 301 style="color: #302653;
302 margin-bottom:10px; 302 margin-bottom:10px;
303 font-size:16px; 303 font-size:16px;
304 letter-spacing: 2px;" 304 letter-spacing: 2px;"
305 >{{ dates(getCard.joinDate) }}</p> 305 >{{ dates(getCard.joinDate) }}</p>
306 <p 306 <p
307 v-if="getCard.joiningDate" 307 v-if="getCard.joiningDate"
308 style="color: #302653; 308 style="color: #302653;
309 margin-bottom:10px; 309 margin-bottom:10px;
310 font-size:16px; 310 font-size:16px;
311 letter-spacing: 2px;" 311 letter-spacing: 2px;"
312 >{{ dates(getCard.joiningDate) }}</p> 312 >{{ dates(getCard.joiningDate) }}</p>
313 <p 313 <p
314 v-if="getCard.phone" 314 v-if="getCard.phone"
315 style="color: #302653; 315 style="color: #302653;
316 margin-bottom:10px; 316 margin-bottom:10px;
317 font-size:16px; 317 font-size:16px;
318 letter-spacing: 2px;" 318 letter-spacing: 2px;"
319 >{{ getCard.phone }}</p> 319 >{{ getCard.phone }}</p>
320 <p 320 <p
321 style=" 321 style="
322 font-size: 19px; 322 font-size: 19px;
323 font-weight: 100; 323 font-weight: 100;
324 color: rgb(48, 38, 83); 324 color: rgb(48, 38, 83);
325 letter-spacing: 5px; 325 letter-spacing: 5px;
326 margin-bottom:10px;" 326 margin-bottom:10px;"
327 > 327 >
328 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 328 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
329 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 329 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
330 </p> 330 </p>
331 <!-- <p 331 <!-- <p
332 style=" 332 style="
333 font-size: 17px; 333 font-size: 17px;
334 font-weight: 100; 334 font-weight: 100;
335 color: rgb(48, 38, 83); 335 color: rgb(48, 38, 83);
336 letter-spacing: 4px;" 336 letter-spacing: 4px;"
337 >{{ getCard.address}}</p>--> 337 >{{ getCard.address}}</p>-->
338 <p 338 <p
339 style=" 339 style="
340 font-size: 17px; 340 font-size: 17px;
341 font-weight: 100; 341 font-weight: 100;
342 color: rgb(48, 38, 83); 342 color: rgb(48, 38, 83);
343 letter-spacing: 4px; 343 letter-spacing: 4px;
344 margin-bottom:14px;" 344 margin-bottom:14px;"
345 >{{ getCard.email}}</p> 345 >{{ getCard.email}}</p>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <!-- back side --> 348 <!-- back side -->
349 <v-layout style=" 349 <v-layout style="
350 text-align: center;" v-if="backPart"> 350 text-align: center;" v-if="backPart">
351 <v-flex xs12> 351 <v-flex xs12>
352 <!-- school Logo Url --> 352 <!-- school Logo Url -->
353 <img 353 <img
354 v-if="getCard.schoolLogoUrl" 354 v-if="getCard.schoolLogoUrl"
355 :src="getCard.schoolLogoUrl" 355 :src="getCard.schoolLogoUrl"
356 alt="schoollogo" 356 alt="schoollogo"
357 style=" 357 style="
358 width: 110px; 358 width: 110px;
359 margin-top:10px; 359 margin-top:10px;
360 overflow:hidden" 360 overflow:hidden"
361 /> 361 />
362 <img 362 <img
363 v-if="getCard.schoolId" 363 v-if="getCard.schoolId"
364 :src="getCard.schoolId.schoolLogoUrl" 364 :src="getCard.schoolId.schoolLogoUrl"
365 alt="schoollogo" 365 alt="schoollogo"
366 style=" 366 style="
367 width: 110px; 367 width: 110px;
368 margin-top:10px; 368 margin-top:10px;
369 overflow:hidden" 369 overflow:hidden"
370 /> 370 />
371 <!-- <v-layout style="margin:auto"> 371 <!-- <v-layout style="margin:auto">
372 <img 372 <img
373 v-if="getCard.profilePicUrl" 373 v-if="getCard.profilePicUrl"
374 :src="getCard.profilePicUrl" 374 :src="getCard.profilePicUrl"
375 alt="profileImage" 375 alt="profileImage"
376 style="; 376 style=";
377 width: 110px; 377 width: 110px;
378 margin:10px auto; 378 margin:10px auto;
379 width: 110px; 379 width: 110px;
380 margin: 10px auto; 380 margin: 10px auto;
381 border: 3px solid #323232; 381 border: 3px solid #323232;
382 border-radius: 12px;" 382 border-radius: 12px;"
383 /> 383 />
384 </v-layout>--> 384 </v-layout>-->
385 <p 385 <p
386 v-if="getCard.schoolLogoUrl" 386 v-if="getCard.schoolLogoUrl"
387 style="color: #302653; 387 style="color: #302653;
388 font-size:24px; 388 font-size:24px;
389 letter-spacing: 4px; 389 letter-spacing: 4px;
390 margin-bottom:14px;" 390 margin-bottom:14px;"
391 > 391 >
392 <b>{{ getCard.name}}</b> 392 <b>{{ getCard.name}}</b>
393 </p> 393 </p>
394 394
395 <p 395 <p
396 v-if="getCard.city" 396 v-if="getCard.city"
397 style=" 397 style="
398 font-size: 17px; 398 font-size: 17px;
399 font-weight: 100; 399 font-weight: 100;
400 color: rgb(48, 38, 83); 400 color: rgb(48, 38, 83);
401 letter-spacing: 4px; 401 letter-spacing: 4px;
402 margin-bottom:14px;" 402 margin-bottom:14px;"
403 >{{ getCard.city}}</p> 403 >{{ getCard.city}}</p>
404 <p 404 <p
405 style=" 405 style="
406 font-size: 17px; 406 font-size: 17px;
407 font-weight: 100; 407 font-weight: 100;
408 color: rgb(48, 38, 83); 408 color: rgb(48, 38, 83);
409 letter-spacing: 4px; 409 letter-spacing: 4px;
410 margin-bottom:14px;" 410 margin-bottom:14px;"
411 > 411 >
412 {{ getCard.address }} 412 {{ getCard.address }}
413 {{ getCard.presentAddress }} 413 {{ getCard.presentAddress }}
414 <span 414 <span
415 v-if="getCard.state" 415 v-if="getCard.state"
416 >({{ getCard.state }})</span> 416 >({{ getCard.state }})</span>
417 </p> 417 </p>
418 <p 418 <p
419 v-if="getCard.establishmentYear" 419 v-if="getCard.establishmentYear"
420 style=" 420 style="
421 font-size: 17px; 421 font-size: 17px;
422 font-weight: 100; 422 font-weight: 100;
423 color: rgb(48, 38, 83); 423 color: rgb(48, 38, 83);
424 letter-spacing: 4px; 424 letter-spacing: 4px;
425 margin-bottom:14px;" 425 margin-bottom:14px;"
426 >{{ getCard.establishmentYear }}</p> 426 >{{ getCard.establishmentYear }}</p>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 <!-- bottom-right-side-image --> 429 <!-- bottom-right-side-image -->
430 <img 430 <img
431 src="static/icon/shape2.png" 431 src="static/icon/shape2.png"
432 alt="shape2" 432 alt="shape2"
433 style="bottom: 0; 433 style="bottom: 0;
434 position: absolute; 434 position: absolute;
435 right: 0; 435 right: 0;
436 width: 110px;" 436 width: 110px;"
437 /> 437 />
438 </div> 438 </div>
439 </div> 439 </div>
440 </v-layout> 440 </v-layout>
441 </v-container> 441 </v-container>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 </div> 444 </div>
445 <v-snackbar 445 <v-snackbar
446 :timeout="timeout" 446 :timeout="timeout"
447 :top="y === 'top'" 447 :top="y === 'top'"
448 :right="x === 'right'" 448 :right="x === 'right'"
449 :vertical="mode === 'vertical'" 449 :vertical="mode === 'vertical'"
450 v-model="snackbar" 450 v-model="snackbar"
451 :color="color" 451 :color="color"
452 >{{ text }}</v-snackbar> 452 >{{ text }}</v-snackbar>
453 <div class="loader" v-if="showLoader"> 453 <div class="loader" v-if="showLoader">
454 <v-progress-circular indeterminate color="white"></v-progress-circular> 454 <v-progress-circular indeterminate color="white"></v-progress-circular>
455 </div> 455 </div>
456 </v-container> 456 </v-container>
457 </template> 457 </template>
458 458
459 <script> 459 <script>
460 import http from "@/Services/http.js"; 460 import http from "@/Services/http.js";
461 import moment from "moment"; 461 import moment from "moment";
462 462
463 export default { 463 export default {
464 data: () => ({ 464 data: () => ({
465 showLoader: false, 465 showLoader: false,
466 valid: true, 466 valid: true,
467 report: {}, 467 report: {},
468 userData: {}, 468 userData: {},
469 snackbar: false, 469 snackbar: false,
470 color: "", 470 color: "",
471 y: "top", 471 y: "top",
472 x: "right", 472 x: "right",
473 mode: "", 473 mode: "",
474 timeout: 10000, 474 timeout: 10000,
475 text: "", 475 text: "",
476 loading: false, 476 loading: false,
477 showReport: false, 477 showReport: false,
478 frontPart: false, 478 frontPart: false,
479 backPart: false, 479 backPart: false,
480 showClass: false, 480 showClass: false,
481 showTeacher: false, 481 showTeacher: false,
482 showAdmin: false, 482 showAdmin: false,
483 showAccountant: false, 483 showAccountant: false,
484 showLibrarian: false, 484 showLibrarian: false,
485 hideprintIdCard: false, 485 hideprintIdCard: false,
486 hidebackprintIdCard: false, 486 hidebackprintIdCard: false,
487 showStudents: false, 487 showStudents: false,
488 showSections: false, 488 showSections: false,
489 getRoles: [], 489 getRoles: [],
490 classList: [], 490 classList: [],
491 getCard: [], 491 getCard: [],
492 addSection: [], 492 addSection: [],
493 getStudentsList: [], 493 getStudentsList: [],
494 teacherList: [], 494 teacherList: [],
495 userData: [], 495 userData: [],
496 Users: [], 496 Users: [],
497 getReport: {}, 497 getReport: {},
498 // cardRules: [v => !!v || "Id-Card Field is required"], 498 // cardRules: [v => !!v || "Id-Card Field is required"],
499 // classRules: [v => !!v || "Class Field is required"], 499 // classRules: [v => !!v || "Class Field is required"],
500 // sectionRules: [v => !!v || "Section Field is required"], 500 // sectionRules: [v => !!v || "Section Field is required"],
501 // studentRules: [v => !!v || "Student Field is required"], 501 // studentRules: [v => !!v || "Student Field is required"],
502 // teacherRules: [v => !!v || "Teacher Field is required"], 502 // teacherRules: [v => !!v || "Teacher Field is required"],
503 // adminRules: [v => !!v || "Admin Field is required"], 503 // adminRules: [v => !!v || "Admin Field is required"],
504 // accountantRules: [v => !!v || "Accountant Field is required"], 504 // accountantRules: [v => !!v || "Accountant Field is required"],
505 // librarianRules: [v => !!v || "Librarian Field is required"], 505 // librarianRules: [v => !!v || "Librarian Field is required"],
506 506
507 typeRules: [v => !!v || "Type is required"], 507 typeRules: [v => !!v || "Type is required"],
508 // backgroundRules: [v => !!v || "Background is required"], 508 // backgroundRules: [v => !!v || "Background is required"],
509 typeList: [ 509 typeList: [
510 { 510 {
511 name: "Front Part", 511 name: "Front Part",
512 value: "frontPart" 512 value: "frontPart"
513 }, 513 },
514 { 514 {
515 name: "Back Part", 515 name: "Back Part",
516 value: "backPart" 516 value: "backPart"
517 } 517 }
518 ], 518 ],
519 backgroundList: ["Yes", "No"] 519 backgroundList: ["Yes", "No"]
520 }), 520 }),
521 521
522 mounted() { 522 mounted() {
523 this.token = this.$store.state.token; 523 this.token = this.$store.state.token;
524 this.getUserData(); 524 this.getUserData();
525 this.getRole(); 525 this.getRole();
526 }, 526 },
527 527
528 methods: { 528 methods: {
529 dates: function(date) { 529 dates: function(date) {
530 return moment(date).format("MMMM DD, YYYY"); 530 return moment(date).format("MMMM DD, YYYY");
531 return date; 531 return date;
532 }, 532 },
533 getReportType() { 533 getReportType() {
534 if (this.getReport.form === "frontPart") { 534 if (this.getReport.form === "frontPart") {
535 this.frontPart = true; 535 this.frontPart = true;
536 this.backPart = false; 536 this.backPart = false;
537 } 537 }
538 if (this.getReport.form === "backPart") { 538 if (this.getReport.form === "backPart") {
539 this.frontPart = false; 539 this.frontPart = false;
540 this.backPart = true; 540 this.backPart = true;
541 } 541 }
542 }, 542 },
543 getRoleInputs(role) { 543 getRoleInputs(role) {
544 console.log("role", role); 544 console.log("role", role);
545 this.showReport = false; 545 this.showReport = false;
546 this.getReport._id = ""; 546 this.getReport._id = "";
547 this.getCard = ""; 547 this.getCard = "";
548 if (role === 4) { 548 if (role === 4) {
549 // console.log("role", role); 549 // console.log("role", role);
550 this.showClass = true; 550 this.showClass = true;
551 this.showTeacher = false; 551 this.showTeacher = false;
552 this.showAdmin = false; 552 this.showAdmin = false;
553 this.showAccountant = false; 553 this.showAccountant = false;
554 this.showLibrarian = false; 554 this.showLibrarian = false;
555 this.showStudents = false; 555 this.showStudents = false;
556 this.showSections = false; 556 this.showSections = false;
557 this.getClass(); 557 this.getClass();
558 } 558 }
559 if (role === 3) { 559 if (role === 3) {
560 this.showTeacher = true; 560 this.showTeacher = true;
561 this.showClass = false; 561 this.showClass = false;
562 this.showAdmin = false; 562 this.showAdmin = false;
563 this.showAccountant = false; 563 this.showAccountant = false;
564 this.showLibrarian = false; 564 this.showLibrarian = false;
565 this.showStudents = false; 565 this.showStudents = false;
566 this.showSections = false; 566 this.showSections = false;
567 this.getTeacherList(); 567 this.getTeacherList();
568 } 568 }
569 if (role === 2) { 569 if (role === 2) {
570 this.showAdmin = true; 570 this.showAdmin = true;
571 this.showTeacher = false; 571 this.showTeacher = false;
572 this.showClass = false; 572 this.showClass = false;
573 this.showAccountant = false; 573 this.showAccountant = false;
574 this.showLibrarian = false; 574 this.showLibrarian = false;
575 this.showStudents = false; 575 this.showStudents = false;
576 this.showSections = false; 576 this.showSections = false;
577 this.getUserData(); 577 this.getUserData();
578 } 578 }
579 if (role === 6) { 579 if (role === 6) {
580 this.showAccountant = true; 580 this.showAccountant = true;
581 this.showAdmin = false; 581 this.showAdmin = false;
582 this.showTeacher = false; 582 this.showTeacher = false;
583 this.showClass = false; 583 this.showClass = false;
584 this.showLibrarian = false; 584 this.showLibrarian = false;
585 this.showStudents = false; 585 this.showStudents = false;
586 this.showSections = false; 586 this.showSections = false;
587 this.getUsersList(role); 587 this.getUsersList(role);
588 } 588 }
589 if (role === 7) { 589 if (role === 7) {
590 this.showLibrarian = true; 590 this.showLibrarian = true;
591 this.showAccountant = false; 591 this.showAccountant = false;
592 this.showAdmin = false; 592 this.showAdmin = false;
593 this.showTeacher = false; 593 this.showTeacher = false;
594 this.showClass = false; 594 this.showClass = false;
595 this.showStudents = false; 595 this.showStudents = false;
596 this.showSections = false; 596 this.showSections = false;
597 this.getUsersList(role); 597 this.getUsersList(role);
598 } 598 }
599 }, 599 },
600 600
601 prindIDCardReport() { 601 prindIDCardReport() {
602 // Pass the element id here 602 // Pass the element id here
603 this.$htmlToPaper("printMe"); 603 this.$htmlToPaper("printMe");
604 }, 604 },
605 getUserData() { 605 getUserData() {
606 this.showLoader = true; 606 this.showLoader = true;
607 http() 607 http()
608 .get("/getParticularUserDetail") 608 .get("/getParticularUserDetail")
609 .then(response => { 609 .then(response => {
610 this.userData = response.data.data; 610 this.userData = response.data.data;
611 this.showLoader = false; 611 this.showLoader = false;
612 // this.adminList = response.data.data; 612 // this.adminList = response.data.data;
613 }) 613 })
614 .catch(error => { 614 .catch(error => {
615 this.showLoader = false; 615 this.showLoader = false;
616 if (error.response.status === 401) { 616 if (error.response.status === 401) {
617 this.$router.replace({ path: "/" }); 617 this.$router.replace({ path: "/" });
618 this.$store.dispatch("setToken", null); 618 this.$store.dispatch("setToken", null);
619 this.$store.dispatch("Id", null); 619 this.$store.dispatch("Id", null);
620 } 620 }
621 }); 621 });
622 }, 622 },
623 getRole() { 623 getRole() {
624 this.showLoader = true; 624 this.showLoader = true;
625 http() 625 http()
626 .get("/getRolesList", { 626 .get("/getRolesList", {
627 headers: { Authorization: "Bearer " + this.token } 627 headers: { Authorization: "Bearer " + this.token }
628 }) 628 })
629 .then(response => { 629 .then(response => {
630 var getRoles = []; 630 var getRoles = [];
631 getRoles = response.data.data; 631 getRoles = response.data.data;
632 // if (getRoles[0].role !== 1) { 632 // if (getRoles[0].role !== 1) {
633 // getRoles = response.data.data; 633 // getRoles = response.data.data;
634 // } 634 // }
635 for (let i = 0; i < getRoles.length; i++) { 635 for (let i = 0; i < getRoles.length; i++) {
636 if (getRoles[i].role != "1" && getRoles[i].role != "5") { 636 if (getRoles[i].role != "1" && getRoles[i].role != "5") {
637 this.getRoles.push(getRoles[i]); 637 this.getRoles.push(getRoles[i]);
638 } 638 }
639 } 639 }
640 this.showLoader = false; 640 this.showLoader = false;
641 }) 641 })
642 .catch(error => { 642 .catch(error => {
643 this.showLoader = false; 643 this.showLoader = false;
644 if (error.response.status === 401) { 644 if (error.response.status === 401) {
645 this.$router.replace({ path: "/" }); 645 this.$router.replace({ path: "/" });
646 this.$store.dispatch("setToken", null); 646 this.$store.dispatch("setToken", null);
647 this.$store.dispatch("Id", null); 647 this.$store.dispatch("Id", null);
648 this.$store.dispatch("Role", null); 648 this.$store.dispatch("Role", null);
649 } 649 }
650 }); 650 });
651 }, 651 },
652 getClass() { 652 getClass() {
653 console.log("get classes"); 653 console.log("get classes");
654 this.showLoader = true; 654 this.showLoader = true;
655 http() 655 http()
656 .get("/getClassesList", { 656 .get("/getClassesList", {
657 headers: { Authorization: "Bearer " + this.token } 657 headers: { Authorization: "Bearer " + this.token }
658 }) 658 })
659 .then(response => { 659 .then(response => {
660 this.classList = response.data.data; 660 this.classList = response.data.data;
661 this.showLoader = false; 661 this.showLoader = false;
662 }) 662 })
663 .catch(error => { 663 .catch(error => {
664 this.showLoader = false; 664 this.showLoader = false;
665 // console.log("err====>", err); 665 // console.log("err====>", err);
666 }); 666 });
667 }, 667 },
668 getSections(_id) { 668 getSections(_id) {
669 this.showLoader = true; 669 this.showLoader = true;
670 http() 670 http()
671 .get( 671 .get(
672 "/getSectionsList", 672 "/getSectionsList",
673 { params: { classId: _id } }, 673 { params: { classId: _id } },
674 { 674 {
675 headers: { Authorization: "Bearer " + this.token } 675 headers: { Authorization: "Bearer " + this.token }
676 } 676 }
677 ) 677 )
678 .then(response => { 678 .then(response => {
679 this.addSection = response.data.data; 679 this.addSection = response.data.data;
680 this.showSections = true; 680 this.showSections = true;
681 this.showLoader = false; 681 this.showLoader = false;
682 }) 682 })
683 .catch(err => { 683 .catch(err => {
684 this.showLoader = false; 684 this.showLoader = false;
685 // console.log("err====>", err); 685 // console.log("err====>", err);
686 }); 686 });
687 }, 687 },
688 getStudents() { 688 getStudents() {
689 this.showLoader = true; 689 this.showLoader = true;
690 http() 690 http()
691 .get("/getStudentWithClass", { 691 .get("/getStudentWithClass", {
692 params: { 692 params: {
693 classId: this.getReport.classId, 693 classId: this.getReport.classId,
694 sectionId: this.getReport.sectionId 694 sectionId: this.getReport.sectionId
695 } 695 }
696 }) 696 })
697 .then(response => { 697 .then(response => {
698 this.getStudentsList = response.data.data; 698 this.getStudentsList = response.data.data;
699 this.showStudents = true; 699 this.showStudents = true;
700 this.showLoader = false; 700 this.showLoader = false;
701 }) 701 })
702 .catch(error => { 702 .catch(error => {
703 console.log("err====>", error); 703 console.log("err====>", error);
704 this.showLoader = false; 704 this.showLoader = false;
705 }); 705 });
706 }, 706 },
707 getCards() { 707 getCards() {
708 this.showLoader = true;
709 if (this.$refs.form.validate()) { 708 if (this.$refs.form.validate()) {
709 this.showLoader = true;
710 http() 710 http()
711 .get("/getIdCardDetail", { 711 .get("/getIdCardDetail", {
712 headers: { 712 headers: {
713 Authorization: "Bearer " + this.token 713 Authorization: "Bearer " + this.token
714 }, 714 },
715 params: { 715 params: {
716 profileId: this.getReport._id, 716 profileId: this.getReport._id,
717 role: this.getReport.role 717 role: this.getReport.role
718 } 718 }
719 }) 719 })
720 .then(response => { 720 .then(response => {
721 this.getCard = ""; 721 this.getCard = "";
722 var data = response.data.data; 722 var data = response.data.data;
723 if ( 723 if (
724 Object.keys(data.adminData).length != 0 && 724 Object.keys(data.adminData).length != 0 &&
725 data.adminData.constructor === Object 725 data.adminData.constructor === Object
726 ) { 726 ) {
727 this.getCard = response.data.data.adminData; 727 this.getCard = response.data.data.adminData;
728 console.log("this.getCard ", this.getCard); 728 console.log("this.getCard ", this.getCard);
729 } 729 }
730 if ( 730 if (
731 Object.keys(data.teachersData).length != 0 && 731 Object.keys(data.teachersData).length != 0 &&
732 data.teachersData.constructor === Object 732 data.teachersData.constructor === Object
733 ) { 733 ) {
734 this.getCard = response.data.data.teachersData; 734 this.getCard = response.data.data.teachersData;
735 console.log("this.getCard--teachersData ", this.getCard); 735 console.log("this.getCard--teachersData ", this.getCard);
736 } 736 }
737 if ( 737 if (
738 Object.keys(data.studentData).length != 0 && 738 Object.keys(data.studentData).length != 0 &&
739 data.studentData.constructor === Object 739 data.studentData.constructor === Object
740 ) { 740 ) {
741 this.getCard = response.data.data.studentData; 741 this.getCard = response.data.data.studentData;
742 console.log("this.getCard--studentData ", this.getCard); 742 console.log("this.getCard--studentData ", this.getCard);
743 } 743 }
744 if ( 744 if (
745 Object.keys(data.usersData).length != 0 && 745 Object.keys(data.usersData).length != 0 &&
746 data.usersData.constructor === Object 746 data.usersData.constructor === Object
747 ) { 747 ) {
748 this.getCard = response.data.data.usersData; 748 this.getCard = response.data.data.usersData;
749 console.log("this.getCard--usersData ", this.getCard); 749 console.log("this.getCard--usersData ", this.getCard);
750 } 750 }
751 // console.log("this.getCard--all ", response.data.data); 751 // console.log("this.getCard--all ", response.data.data);
752 this.showLoader = false; 752 this.showLoader = false;
753 this.showReport = true; 753 this.showReport = true;
754 }) 754 })
755 .catch(error => { 755 .catch(error => {
756 this.showLoader = false; 756 this.showLoader = false;
757 console.log("error", error.response.data.errors); 757 console.log("error", error.response.data.errors);
758 if (error.response.data.errors) { 758 if (error.response.data.errors) {
759 this.snackbar = true; 759 this.snackbar = true;
760 this.text = " Field is required"; 760 this.text = " Field is required";
761 this.color = "error"; 761 this.color = "error";
762 } 762 }
763 }); 763 });
764 } 764 }
765 }, 765 },
766 getTeacherList() { 766 getTeacherList() {
767 this.showLoader = true; 767 this.showLoader = true;
768 var token = this.$store.state.token; 768 var token = this.$store.state.token;
769 http() 769 http()
770 .get("/getTeachersList", { 770 .get("/getTeachersList", {
771 headers: { Authorization: "Bearer " + token } 771 headers: { Authorization: "Bearer " + token }
772 }) 772 })
773 .then(response => { 773 .then(response => {
774 this.teacherList = response.data.data; 774 this.teacherList = response.data.data;
775 this.showLoader = false; 775 this.showLoader = false;
776 }) 776 })
777 .catch(error => { 777 .catch(error => {
778 this.showLoader = false; 778 this.showLoader = false;
779 if (error.response.status === 401) { 779 if (error.response.status === 401) {
780 this.$router.replace({ path: "/" }); 780 this.$router.replace({ path: "/" });
781 this.$store.dispatch("setToken", null); 781 this.$store.dispatch("setToken", null);
782 this.$store.dispatch("Id", null); 782 this.$store.dispatch("Id", null);
783 } 783 }
784 }); 784 });
785 }, 785 },
786 getUsersList(role) { 786 getUsersList(role) {
787 this.showLoader = true; 787 this.showLoader = true;
788 var token = this.$store.state.token; 788 var token = this.$store.state.token;
789 http() 789 http()
790 .get("/getUsersList?role=" + role, { 790 .get("/getUsersList?role=" + role, {
791 headers: { Authorization: "Bearer " + token } 791 headers: { Authorization: "Bearer " + token }
792 }) 792 })
793 .then(response => { 793 .then(response => {
794 this.Users = response.data.data; 794 this.Users = response.data.data;
795 this.showLoader = false; 795 this.showLoader = false;
796 }) 796 })
797 .catch(error => { 797 .catch(error => {
798 this.showLoader = false; 798 this.showLoader = false;
799 if (error.response.status === 401) { 799 if (error.response.status === 401) {
800 this.$router.replace({ path: "/" }); 800 this.$router.replace({ path: "/" });
801 this.$store.dispatch("setToken", null); 801 this.$store.dispatch("setToken", null);
802 this.$store.dispatch("Id", null); 802 this.$store.dispatch("Id", null);
803 } 803 }
804 }); 804 });
805 }, 805 },
806 getParentDetails() { 806 getParentDetails() {
807 http() 807 http()
808 .get("getParentsList", { 808 .get("getParentsList", {
809 headers: { 809 headers: {
810 Authorization: "Bearer " + this.$store.state.token 810 Authorization: "Bearer " + this.$store.state.token
811 } 811 }
812 }) 812 })
813 .then(response => { 813 .then(response => {
814 this.parentsList = response.data.data; 814 this.parentsList = response.data.data;
815 }) 815 })
816 .catch(error => { 816 .catch(error => {
817 // console.log("err====>", error.response.data.message); 817 // console.log("err====>", error.response.data.message);
818 this.showLoader = false; 818 this.showLoader = false;
819 if (error.response.status === 401) { 819 if (error.response.status === 401) {
820 this.$router.replace({ path: "/" }); 820 this.$router.replace({ path: "/" });
821 this.$store.dispatch("setToken", null); 821 this.$store.dispatch("setToken", null);
822 this.$store.dispatch("Id", null); 822 this.$store.dispatch("Id", null);
823 this.$store.dispatch("Role", null); 823 this.$store.dispatch("Role", null);
824 } 824 }
825 }); 825 });
826 } 826 }
827 } 827 }
828 }; 828 };
829 </script> 829 </script>
830 830
831 <style scoped> 831 <style scoped>
832 .Data { 832 .Data {
833 width: 100%; 833 width: 100%;
834 float: left; 834 float: left;
835 margin-bottom: 0px; 835 margin-bottom: 0px;
836 padding: 0 15px; 836 padding: 0 15px;
837 font-size: 14px; 837 font-size: 14px;
838 margin-top: 5px; 838 margin-top: 5px;
839 text-align: justify; 839 text-align: justify;
840 } 840 }
841 .idcardreport { 841 .idcardreport {
842 font-family: arial; 842 font-family: arial;
843 max-width: 794px; 843 max-width: 794px;
844 max-height: 1123px; 844 max-height: 1123px;
845 margin-left: auto; 845 margin-left: auto;
846 margin-right: auto; 846 margin-right: auto;
847 -webkit-print-color-adjust: exact; 847 -webkit-print-color-adjust: exact;
848 } 848 }
849 .idcardreport1 { 849 .idcardreport1 {
850 text-align: center; 850 text-align: center;
851 margin-left: 35%; 851 margin-left: 35%;
852 } 852 }
853 .icard-front { 853 .icard-front {
854 margin: 3px; 854 margin: 3px;
855 float: left; 855 float: left;
856 padding: 10px; 856 padding: 10px;
857 text-align: center; 857 text-align: center;
858 height: 520px; 858 height: 520px;
859 width: 520px; 859 width: 520px;
860 background: #fff; 860 background: #fff;
861 border: 1px solid lightgray; 861 border: 1px solid lightgray;
862 } 862 }
863 .print-data { 863 .print-data {
864 margin: 3px; 864 margin: 3px;
865 float: left; 865 float: left;
866 /* border: 1px solid #000; */ 866 /* border: 1px solid #000; */
867 padding: 10px; 867 padding: 10px;
868 /* width: 55%; */ 868 /* width: 55%; */
869 text-align: center; 869 text-align: center;
870 height: 95%; 870 height: 95%;
871 } 871 }
872 .rightside { 872 .rightside {
873 float: right !important; 873 float: right !important;
874 } 874 }
875 .icard-front h2 { 875 .icard-front h2 {
876 font-size: 30px; 876 font-size: 30px;
877 } 877 }
878 .icard-back h2 { 878 .icard-back h2 {
879 font-size: 30px; 879 font-size: 30px;
880 } 880 }
881 .print-data h2 { 881 .print-data h2 {
882 font-size: 30px; 882 font-size: 30px;
883 text-align: center; 883 text-align: center;
884 } 884 }
885 .print-data img { 885 .print-data img {
886 width: 70px; 886 width: 70px;
887 height: 70px; 887 height: 70px;
888 margin-bottom: 5px; 888 margin-bottom: 5px;
889 } 889 }
890 .icard-front img { 890 .icard-front img {
891 width: 70px; 891 width: 70px;
892 height: 70px; 892 height: 70px;
893 margin-bottom: 5px; 893 margin-bottom: 5px;
894 } 894 }
895 .icard-back img { 895 .icard-back img {
896 width: 50px; 896 width: 50px;
897 height: 50px; 897 height: 50px;
898 margin-bottom: 5px; 898 margin-bottom: 5px;
899 } 899 }
900 .icard-img { 900 .icard-img {
901 width: 50px; 901 width: 50px;
902 height: 50px; 902 height: 50px;
903 margin-bottom: 5px; 903 margin-bottom: 5px;
904 margin-top: 5px; 904 margin-top: 5px;
905 border: 1px solid #ddd; 905 border: 1px solid #ddd;
906 } 906 }
907 .icard-data { 907 .icard-data {
908 /* font-family: Arial; */ 908 /* font-family: Arial; */
909 max-width: 794px; 909 max-width: 794px;
910 max-height: 1123px; 910 max-height: 1123px;
911 margin-left: auto; 911 margin-left: auto;
912 margin-right: auto; 912 margin-right: auto;
913 -webkit-print-color-adjust: exact; 913 -webkit-print-color-adjust: exact;
914 } 914 }
915 .icard-back { 915 .icard-back {
916 margin: 3px; 916 margin: 3px;
917 /* float: left; */ 917 /* float: left; */
918 /* border: 1px solid #000; */ 918 /* border: 1px solid #000; */
919 padding: 10px; 919 padding: 10px;
920 /* width: 55%; */ 920 /* width: 55%; */
921 text-align: center; 921 text-align: center;
922 /* height: 95%; */ 922 /* height: 95%; */
923 /* margin-top: 35%; */ 923 /* margin-top: 35%; */
924 } 924 }
925 .back-icard { 925 .back-icard {
926 margin: 3px; 926 margin: 3px;
927 padding: 10px; 927 padding: 10px;
928 } 928 }
929 .icard-back h3 { 929 .icard-back h3 {
930 background-color: #000; 930 background-color: #000;
931 color: #fff; 931 color: #fff;
932 font-size: 13px; 932 font-size: 13px;
933 padding: 5px 0px; 933 padding: 5px 0px;
934 margin: 5px; 934 margin: 5px;
935 margin-top: 13px; 935 margin-top: 13px;
936 } 936 }
937 .icard-back h5 { 937 .icard-back h5 {
938 font-size: 11px; 938 font-size: 11px;
939 color: #000; 939 color: #000;
940 font-weight: bold; 940 font-weight: bold;
941 padding: 5px 0px; 941 padding: 5px 0px;
942 } 942 }
943 /* .icard-back p { 943 /* .icard-back p {
944 font-size: 15px; 944 font-size: 15px;
945 color: #000; 945 color: #000;
946 font-weight: 500px; 946 font-weight: 500px;
947 line-height: 17px; 947 line-height: 17px;
948 } */ 948 } */
949 .school-address { 949 .school-address {
950 /* width: 40%; */ 950 /* width: 40%; */
951 font-weight: 500px; 951 font-weight: 500px;
952 color: #000; 952 color: #000;
953 } 953 }
954 .address { 954 .address {
955 font-weight: 500px; 955 font-weight: 500px;
956 color: #000; 956 color: #000;
957 text-align: center; 957 text-align: center;
958 } 958 }
959 .icard-bottom { 959 .icard-bottom {
960 padding-top: 5px; 960 padding-top: 5px;
961 text-align: center; 961 text-align: center;
962 } 962 }
963 .qrcode { 963 .qrcode {
964 float: left; 964 float: left;
965 width: 50%; 965 width: 50%;
966 } 966 }
967 .qrcode img { 967 .qrcode img {
968 width: 60px; 968 width: 60px;
969 height: 60px; 969 height: 60px;
970 margin-top: 15px; 970 margin-top: 15px;
971 } 971 }
972 .session { 972 .session {
973 float: right; 973 float: right;
974 width: 70%; 974 width: 70%;
975 margin-top: 15px; 975 margin-top: 15px;
976 } 976 }
977 @media screen and (max-width: 360px) { 977 @media screen and (max-width: 360px) {
978 .icard-front { 978 .icard-front {
979 width: 316px; 979 width: 316px;
980 height: 418px; 980 height: 418px;
981 float: inherit; 981 float: inherit;
982 } 982 }
983 .icard-back { 983 .icard-back {
984 float: left; 984 float: left;
985 } 985 }
986 } 986 }