viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit ecf8cdfdd44497a66e2538d014fc5d57ca882510

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

create design of id card and print/ pdf funtionality

Showing 4 changed files with 405 additions and 471 deletions   Show diff stats
src/pages/Report/idCard.vue
Diff comments   View file @ecf8cdf
1 1 <template>
2 2 <v-container fluid class="body-color">
3   - <!-- **** Id Card Report Table **** -->
  3 + <!-- **** Id Card Select options **** -->
4 4 <v-card flat class="elevation-0 transparent">
5 5 <v-form ref="form" v-model="valid" lazy-validation>
6 6 <v-flex xs12 sm12 lg12>
7 7 <v-layout wrap>
8   - <v-flex xs12 sm12 lg3>
  8 + <v-flex xs12 sm6 lg4>
9 9 <v-layout>
10 10 <v-flex xs3 sm6 lg4 class="subheading mt-4">
11 11 <label class="right">Id Card For:</label>
12 12 </v-flex>
13   - <v-flex xs7 sm6 lg8 class="ml-2">
  13 + <v-flex xs7 sm6 lg7 class="ml-2">
14 14 <v-autocomplete
15 15 v-model="getReport.role"
16 16 label="Please Select"
17 17 :items="getRoles"
18 18 item-text="name"
19 19 item-value="role"
20   - :rules="cardRules"
21 20 @change="getRoleInputs(getReport.role)"
22 21 required
23 22 ></v-autocomplete>
24 23 </v-flex>
25 24 </v-layout>
26 25 </v-flex>
27   - <v-flex xs12 sm12 lg3 v-if="this.showClass">
  26 + <v-flex xs12 sm6 lg4 v-if="showClass">
28 27 <v-layout>
29 28 <v-flex xs3 sm6 lg2 class="subheading mt-4">
30 29 <label class="right">Class:</label>
... ... @@ -36,14 +35,13 @@
36 35 :items="classList"
37 36 item-text="classNum"
38 37 item-value="_id"
39   - :rules="classRules"
40 38 @change="getSections(getReport.classId)"
41 39 required
42 40 ></v-select>
43 41 </v-flex>
44 42 </v-layout>
45 43 </v-flex>
46   - <v-flex xs12 sm12 lg3 v-if="getReport.classId">
  44 + <v-flex xs12 sm6 lg4 v-if="showSections">
47 45 <v-layout>
48 46 <v-flex xs3 sm6 lg2 class="subheading mt-4">
49 47 <label class="right">Section:</label>
... ... @@ -57,31 +55,29 @@
57 55 item-value="_id"
58 56 name="Select Section"
59 57 @change="getStudents"
60   - :rules="sectionRules"
61 58 required
62 59 ></v-select>
63 60 </v-flex>
64 61 </v-layout>
65 62 </v-flex>
66   - <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
  63 + <v-flex xs12 sm6 lg4 v-if="showStudents">
67 64 <v-layout>
68   - <v-flex xs3 sm6 lg2 class="subheading mt-4">
  65 + <v-flex xs3 sm6 lg4 class="subheading mt-4">
69 66 <label class="right">Student:</label>
70 67 </v-flex>
71   - <v-flex xs9 sm6 lg8 class="ml-2">
  68 + <v-flex xs9 sm6 lg7 class="ml-2">
72 69 <v-select
73 70 :items="getStudentsList"
74 71 label="Select Student"
75 72 v-model="getReport._id"
76 73 item-text="name"
77 74 item-value="_id"
78   - :rules="studentRules"
79 75 required
80 76 ></v-select>
81 77 </v-flex>
82 78 </v-layout>
83 79 </v-flex>
84   - <v-flex xs12 sm12 lg3 v-if="this.showTeacher">
  80 + <v-flex xs12 sm6 lg4 v-if="showTeacher">
85 81 <v-layout>
86 82 <v-flex xs3 sm6 lg2 class="subheading mt-4">
87 83 <label class="right">Teacher:</label>
... ... @@ -93,31 +89,29 @@
93 89 :items="teacherList"
94 90 item-text="name"
95 91 item-value="_id"
96   - :rules="teacherRules"
97 92 required
98 93 ></v-select>
99 94 </v-flex>
100 95 </v-layout>
101 96 </v-flex>
102   - <v-flex xs12 sm12 lg3 v-if="this.showAdmin">
  97 + <v-flex xs12 sm6 lg4 v-if="showAdmin">
103 98 <v-layout>
104 99 <v-flex xs3 sm6 lg2 class="subheading mt-4">
105 100 <label class="right">Admin:</label>
106 101 </v-flex>
107   - <v-flex xs9 sm6 lg8 class="ml-2">
  102 + <v-flex xs9 sm6 lg10 class="ml-2">
108 103 <v-select
109 104 v-model="getReport._id"
110 105 label="Select Admin"
111 106 :items="userData"
112 107 item-text="name"
113 108 item-value="_id"
114   - :rules="adminRules"
115 109 required
116 110 ></v-select>
117 111 </v-flex>
118 112 </v-layout>
119 113 </v-flex>
120   - <v-flex xs12 sm12 lg3 v-if="this.showAccountant">
  114 + <v-flex xs12 sm6 lg4 v-if="showAccountant">
121 115 <v-layout>
122 116 <v-flex xs3 sm6 lg2 class="subheading mt-4">
123 117 <label class="right">Accountant:</label>
... ... @@ -129,13 +123,12 @@
129 123 :items="Users"
130 124 item-text="name"
131 125 item-value="_id"
132   - :rules="accountantRules"
133 126 required
134 127 ></v-select>
135 128 </v-flex>
136 129 </v-layout>
137 130 </v-flex>
138   - <v-flex xs12 sm12 lg3 v-if="this.showLibrarian">
  131 + <v-flex xs12 sm6 lg4 v-if="showLibrarian">
139 132 <v-layout>
140 133 <v-flex xs3 sm6 lg2 class="subheading mt-4">
141 134 <label class="right">Librarian:</label>
... ... @@ -147,49 +140,31 @@
147 140 :items="Users"
148 141 item-text="name"
149 142 item-value="_id"
150   - :rules="librarianRules"
151 143 required
152 144 ></v-select>
153 145 </v-flex>
154 146 </v-layout>
155 147 </v-flex>
156   - <v-flex xs12 sm12 lg4>
  148 + <v-flex xs12 sm6 lg4>
157 149 <v-layout>
158   - <v-flex xs4 sm4 lg3 class="subheading mt-4">
  150 + <v-flex xs4 sm4 lg2 class="subheading mt-4">
159 151 <label class="right">Type:</label>
160 152 </v-flex>
161 153 <v-flex xs7 sm6 lg8 class="ml-2">
162 154 <v-autocomplete
163 155 label="Please Select"
164 156 type="text"
165   - :rules="typeRules"
166 157 :items="typeList"
167 158 v-model="getReport.form"
168 159 item-text="name"
169 160 item-value="value"
170   - @change="getReport(getReport.form)"
  161 + @change="getReportType(getReport.form)"
171 162 required
172 163 ></v-autocomplete>
173 164 </v-flex>
174 165 </v-layout>
175 166 </v-flex>
176   - <!-- <v-flex xs12 sm12 lg4>
177   - <v-layout>
178   - <v-flex xs4 sm4 lg3 class="subheading mt-4">
179   - <label class="right">Background:</label>
180   - </v-flex>
181   - <v-flex xs7 sm6 lg8 class="ml-2">
182   - <v-autocomplete
183   - label="Please Select"
184   - type="text"
185   - :rules="backgroundRules"
186   - :items="backgroundList"
187   - required
188   - ></v-autocomplete>
189   - </v-flex>
190   - </v-layout>
191   - </v-flex>-->
192   - <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
  167 + <v-flex xs12 sm6 lg4 class="pl-5">
193 168 <v-btn
194 169 @click="getCards"
195 170 round
... ... @@ -202,7 +177,7 @@
202 177 </v-flex>
203 178 </v-form>
204 179 </v-card>
205   - <div v-if="frontPart">
  180 + <div>
206 181 <v-layout v-show="showReport">
207 182 <v-flex xs12>
208 183 <v-card class="transparent elevation-0">
... ... @@ -214,404 +189,283 @@
214 189 </v-btn>
215 190 </v-flex>
216 191 </v-layout>
217   - <v-container grid-list-md>
218   - <v-layout class="col-sm-12">
219   - <div class="idcardreport">
220   - <div class="icard-front">
221   - <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
222   - <img src="/static/logo.png" alt="logo" class="logo"/>
223   - <h2>{{ userData.name }}</h2>
224   - <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" class="icard-img"/>
225   - <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" class="icard-img"/>
226   - <div class="Data" v-if="this.getReport.role === 4">
227   - <h3 style="text-align: center;">
228   - <!-- <span>
229   - <b>Name</b>
230   - </span> -->
231   - {{ getCard.studentData.name }}
232   - </h3>
233   - </div>
234   - <div class="Data" v-if="this.getReport.role === 4">
235   - <p style="text-align: center;">
236   - <!-- <span>
237   - <b>Class</b>
238   - </span> -->
239   - {{ getCard.studentData.classId.classNum }}
240   - </p>
241   - </div>
242   - <div class="Data" v-if="this.getReport.role === 4">
243   - <p style="text-align: center;">
244   - <!-- <span>
245   - <b>Section</b>
246   - </span> -->
247   - {{ getCard.studentData.sectionId.name }}
248   - </p>
249   - </div>
250   - <div class="Data" v-if="this.getReport.role === 4">
251   - <p style="text-align: center;">
252   - <!-- <span>
253   - <b>Roll No</b>
254   - </span> -->
255   - {{ getCard.studentData.rollNo }}
256   - </p>
257   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
258   - </div>
259   - <!-- <div class="Data" v-if="this.getReport.role === 4">
260   - <p>
261   - <span>
262   - <b>Blood Group</b>
263   - </span>
264   - : {{ getCard.studentData.bloodGroup }}
265   - </p>
266   - </div>-->
267   - <div class="Data" v-if="this.getReport.role === 3">
268   - <h3 style="text-align: center;">
269   - <!-- <span>
270   - <b>Name</b>
271   - </span> -->
272   - {{ getCard.teachersData.name }}
273   - </h3>
274   - </div>
275   - <div class="Data" v-if="this.getReport.role === 3">
276   - <p style="text-align: center;">
277   - <!-- <span>
278   - <b>Phone No</b>
279   - </span> -->
280   - {{ getCard.teachersData.mobileNo }}
281   - </p>
282   - </div>
283   - <div class="Data" v-if="this.getReport.role === 3">
284   - <p style="text-align: center;">
285   - <!-- <span>
286   - <b>Joining Date</b>
287   - </span> -->
288   - {{ getCard.teachersData.joinDate }}
289   - </p>
290   - </div>
291   - <div class="Data" v-if="this.getReport.role === 3">
292   - <p style="text-align: center;">
293   - <!-- <span>
294   - <b>Email</b>
295   - </span> -->
296   - {{ getCard.teachersData.email }}
297   - </p>
298   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
299   - </div>
300   - <div class="Data" v-if="this.getReport.role === 2">
301   - <h3 style="text-align: center;">
302   - <!-- <span>
303   - <b>Name</b>
304   - </span> -->
305   - {{ getCard.adminData.name }}
306   - </h3>
307   - </div>
308   - <div class="Data" v-if="this.getReport.role === 2">
309   - <p style="text-align: center;">
310   - <!-- <span>
311   - <b>Establishment Year</b>
312   - </span> -->
313   - {{ getCard.adminData.establishmentYear }}
314   - </p>
315   - </div>
316   - <div class="Data" v-if="this.getReport.role === 2">
317   - <p style="text-align: center;">
318   - <!-- <span>
319   - <b>Joining Date</b>
320   - </span> -->
321   - {{ getCard.adminData.joinDate }}
322   - </p>
323   - </div>
324   - <div class="Data" v-if="this.getReport.role === 2">
325   - <p style="text-align: center;">
326   - <!-- <span>
327   - <b>Phone No</b>
328   - </span> -->
329   - {{ getCard.adminData.mobile }}
330   - </p>
331   - </div>
332   - <div class="Data" v-if="this.getReport.role === 2">
333   - <p style="text-align: center;">
334   - <!-- <span>
335   - <b>Email</b>
336   - </span> -->
337   - {{ getCard.adminData.email }}
338   - </p>
339   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
340   - </div>
341   - <div class="Data" v-if="this.getReport.role === 6">
342   - <h3 style="text-align: center;">
343   - <!-- <span>
344   - <b>Name</b>
345   - </span> -->
346   - {{ getCard.usersData.name }}
347   - </h3>
348   - </div>
349   - <div class="Data" v-if="this.getReport.role === 6">
350   - <p style="text-align: center;">
351   - <!-- <span>
352   - <b>Email</b>
353   - </span> -->
354   - {{ getCard.usersData.email }}
355   - </p>
356   - </div>
357   - <div class="Data" v-if="this.getReport.role === 6">
358   - <p style="text-align: center;">
359   - <!-- <span>
360   - <b>Phone No</b>
361   - </span> -->
362   - {{ getCard.usersData.phone }}
363   - </p>
364   - </div>
365   - <div class="Data" v-if="this.getReport.role === 6">
366   - <p style="text-align: center;">
367   - <!-- <span>
368   - <b>Gender</b>
369   - </span> -->
370   - {{ getCard.usersData.gender }}
371   - </p>
372   - </div>
373   - <div class="Data" v-if="this.getReport.role === 6">
374   - <p style="text-align: center;">
375   - <!-- <span>
376   - <b>Joining Date</b>
377   - </span> -->
378   - {{ getCard.usersData.joiningDate }}
  192 + </v-card>
  193 + <v-container grid-list-md id="printMe">
  194 + <v-layout class="col-sm-12">
  195 + <div
  196 + style="font-family: arial;
  197 + max-width: 794px;
  198 + max-height: 1123px;
  199 + margin-left: auto;
  200 + margin-right: auto;
  201 + -webkit-print-color-adjust: exact;"
  202 + >
  203 + <div
  204 + style="
  205 + float: left;
  206 + height: 520px;
  207 + width: 520px;
  208 + background: #fff;
  209 + border: 1px solid lightgray;
  210 + position:relative;"
  211 + >
  212 + <!-- bottom-right-side-image -->
  213 + <img
  214 + src="/static/icon/shape1.png"
  215 + alt="shape"
  216 + style="position:absolute;width: 90px;"
  217 + />
  218 + <!-- Front Side -->
  219 + <v-layout
  220 + style="
  221 + text-align: center;
  222 + margin-top: 50px;"
  223 + v-if="frontPart"
  224 + >
  225 + <v-flex xs12>
  226 + <!-- school Logo Url -->
  227 + <img
  228 + v-if="getCard.schoolLogoUrl"
  229 + :src="getCard.schoolLogoUrl"
  230 + alt="schoollogo"
  231 + style="
  232 + width: 110px;
  233 + margin-top:10px;
  234 + overflow:hidden"
  235 + />
  236 + <v-layout style="margin:auto">
  237 + <!-- profile url -->
  238 + <img
  239 + v-if="getCard.profilePicUrl"
  240 + :src="getCard.profilePicUrl"
  241 + alt="profileImage"
  242 + style=";
  243 + width: 110px;
  244 + margin:10px auto;
  245 + width: 110px;
  246 + margin: 10px auto;
  247 + border: 3px solid #323232;
  248 + border-radius: 12px;"
  249 + />
  250 + <img
  251 + style=";
  252 + width: 110px;
  253 + margin:10px auto;
  254 + width: 110px;
  255 + margin: 10px auto;"
  256 + alt="dummy"
  257 + src="/static/icon/user.png"
  258 + v-if="!getCard.profilePicUrl && getCard.role != '2'"
  259 + />
  260 + </v-layout>
  261 +
  262 + <p
  263 + style="color: #302653;font-size:24px;
  264 + letter-spacing: 4px;"
  265 + >
  266 + <b>{{ getCard.name}}</b>
379 267 </p>
380   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
381   - </div>
382   - <div class="Data" v-if="this.getReport.role === 7">
383   - <h3 style="text-align: center;">
384   - <!-- <span>
385   - <b>Name</b>
386   - </span> -->
387   - {{ getCard.usersData.name }}
388   - </h3>
389   - </div>
390   - <div class="Data" v-if="this.getReport.role === 7">
391   - <p style="text-align: center;">
392   - <!-- <span>
393   - <b>Email</b>
394   - </span> -->
395   - {{ getCard.usersData.email }}
  268 + <p
  269 + style="color: #302653;font-size:14px;
  270 + letter-spacing: 4px;"
  271 + >
  272 + <b>{{ getCard.gender}}</b>
396 273 </p>
397   - </div>
398   - <div class="Data" v-if="this.getReport.role === 7">
399   - <p style="text-align: center;">
400   - <!-- <span>
401   - <b>Phone No</b>
402   - </span> -->
403   - {{ getCard.usersData.phone }}
  274 + <p
  275 + v-if="getCard.classId"
  276 + style="color: #302653;font-size:24px;
  277 + letter-spacing: 4px;"
  278 + >{{ getCard.classId.classNum }}</p>
  279 + <p
  280 + v-if="getCard.classId"
  281 + style="color: #302653;font-size:24px;
  282 + letter-spacing: 4px;"
  283 + >{{ getCard.sectionId.name }}</p>
  284 + <p
  285 + v-if="getCard.rollNo"
  286 + style="color: #302653;font-size:24px;
  287 + letter-spacing: 2px;"
  288 + >Roll: {{ getCard.rollNo }}</p>
  289 + <p
  290 + v-if="getCard.joinDate"
  291 + style="color: #302653;font-size:16px;
  292 + letter-spacing: 2px;"
  293 + >{{ dates(getCard.joinDate) }}</p>
  294 + <p
  295 + v-if="getCard.joiningDate"
  296 + style="color: #302653;font-size:16px;
  297 + letter-spacing: 2px;"
  298 + >{{ dates(getCard.joiningDate) }}</p>
  299 + <p
  300 + v-if="getCard.phone"
  301 + style="color: #302653;font-size:16px;
  302 + letter-spacing: 2px;"
  303 + >{{ getCard.phone }}</p>
  304 + <p
  305 + style="
  306 + font-size: 19px;
  307 + font-weight: 100;
  308 + color: rgb(48, 38, 83);
  309 + letter-spacing: 5px;"
  310 + >
  311 + <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
  312 + <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
404 313 </p>
405   - </div>
406   - <div class="Data" v-if="this.getReport.role === 7">
407   - <p style="text-align: center;">
408   - <!-- <span>
409   - <b>Gender</b>
410   - </span> -->
411   - {{ getCard.usersData.gender }}
  314 + <!-- <p
  315 + style="
  316 + font-size: 17px;
  317 + font-weight: 100;
  318 + color: rgb(48, 38, 83);
  319 + letter-spacing: 4px;"
  320 + >{{ getCard.address}}</p>-->
  321 + <p
  322 + style="
  323 + font-size: 17px;
  324 + font-weight: 100;
  325 + color: rgb(48, 38, 83);
  326 + letter-spacing: 4px;"
  327 + >{{ getCard.email}}</p>
  328 + </v-flex>
  329 + </v-layout>
  330 + <!-- back side -->
  331 + <v-layout style="
  332 + text-align: center;" v-if="backPart">
  333 + <v-flex xs12>
  334 + <!-- school Logo Url -->
  335 + <img
  336 + v-if="getCard.schoolLogoUrl"
  337 + :src="getCard.schoolLogoUrl"
  338 + alt="schoollogo"
  339 + style="
  340 + width: 110px;
  341 + margin-top:10px;
  342 + overflow:hidden"
  343 + />
  344 + <img
  345 + v-if="getCard.schoolId"
  346 + :src="getCard.schoolId.schoolLogoUrl"
  347 + alt="schoollogo"
  348 + style="
  349 + width: 110px;
  350 + margin-top:10px;
  351 + overflow:hidden"
  352 + />
  353 + <!-- <v-layout style="margin:auto">
  354 + <img
  355 + v-if="getCard.profilePicUrl"
  356 + :src="getCard.profilePicUrl"
  357 + alt="profileImage"
  358 + style=";
  359 + width: 110px;
  360 + margin:10px auto;
  361 + width: 110px;
  362 + margin: 10px auto;
  363 + border: 3px solid #323232;
  364 + border-radius: 12px;"
  365 + />
  366 + </v-layout>-->
  367 + <p
  368 + v-if="getCard.schoolLogoUrl"
  369 + style="color: #302653;font-size:24px;
  370 + letter-spacing: 4px;"
  371 + >
  372 + <b>{{ getCard.name}}</b>
412 373 </p>
413   - </div>
414   - <div class="Data" v-if="this.getReport.role === 7">
415   - <p style="text-align: center;">
416   - <!-- <span>
417   - <b>Joining Date</b>
418   - </span> -->
419   - {{ getCard.usersData.joiningDate }}
  374 + <!-- <p
  375 + v-if="getCard.classId"
  376 + style="color: #302653;font-size:24px;
  377 + letter-spacing: 4px;"
  378 + >{{ getCard.classId.classNum }}</p>-->
  379 + <!-- <p
  380 + v-if="getCard.classId"
  381 + style="color: #302653;font-size:24px;
  382 + letter-spacing: 4px;"
  383 + >{{ getCard.sectionId.name }}</p>-->
  384 + <!-- <p
  385 + v-if="getCard.rollNo"
  386 + style="color: #302653;font-size:24px;
  387 + letter-spacing: 2px;"
  388 + >Roll: {{ getCard.rollNo }}</p>
  389 + <p
  390 + v-if="getCard.joinDate"
  391 + style="color: #302653;font-size:16px;
  392 + letter-spacing: 2px;"
  393 + >{{ dates(getCard.joinDate) }}</p>
  394 + <p
  395 + v-if="getCard.joiningDate"
  396 + style="color: #302653;font-size:16px;
  397 + letter-spacing: 2px;"
  398 + >{{ dates(getCard.joiningDate) }}</p>
  399 + <p
  400 + v-if="getCard.phone"
  401 + style="color: #302653;font-size:16px;
  402 + letter-spacing: 2px;"
  403 + >{{ getCard.phone }}</p>-->
  404 + <!-- <p
  405 + style="
  406 + font-size: 19px;
  407 + font-weight: 100;
  408 + color: rgb(48, 38, 83);
  409 + letter-spacing: 5px;"
  410 + >
  411 + <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
  412 + <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
  413 + </p>-->
  414 + <p
  415 + v-if="getCard.city"
  416 + style="
  417 + font-size: 17px;
  418 + font-weight: 100;
  419 + color: rgb(48, 38, 83);
  420 + letter-spacing: 4px;"
  421 + >{{ getCard.city}}</p>
  422 + <p
  423 + style="
  424 + font-size: 17px;
  425 + font-weight: 100;
  426 + color: rgb(48, 38, 83);
  427 + letter-spacing: 4px;"
  428 + >
  429 + {{ getCard.address }}
  430 + {{ getCard.presentAddress }}
  431 + <span
  432 + v-if="getCard.state"
  433 + >({{ getCard.state }})</span>
420 434 </p>
421   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
422   - </div>
423   - </div>
424   - </div>
425   - </v-layout>
426   - </v-container>
427   - </v-card>
428   - <v-flex xs12 id="printMe" v-show="hideprintIdCard">
429   - <!-- <v-layout class="col-sm-12" > -->
430   - <div class="idcardreport">
431   - <div class="print-data">
432   - <img src="/static/icon/shape1.png" alt="shape" class="shape1" style="padding-left: 25%;"/>
433   - <img src="/static/logo.png" alt="logo" class="logo" style="width: 70px; height: 70px; margin-left: 12%;"/>
434   - <h2 style="text-align: center;">{{ userData.name }}</h2>
435   - <img
436   - :src="getCards.profilePicUrl"
437   - v-if="getCards.profilePicUrl"
438   - style="margin-top: 31px;
439   - margin-left: 45%;"
440   - />
  435 + <p
  436 + v-if="getCard.establishmentYear"
  437 + style="
  438 + font-size: 17px;
  439 + font-weight: 100;
  440 + color: rgb(48, 38, 83);
  441 + letter-spacing: 4px;"
  442 + >{{ getCard.establishmentYear }}</p>
  443 + </v-flex>
  444 + </v-layout>
  445 + <!-- bottom-right-side-image -->
441 446 <img
442   - src="/static/icon/user.png"
443   - v-else-if="!getCards.profilePicUrl"
444   - style="margin-top: 31px;
445   - margin-left: 45%;"
  447 + src="static/icon/shape2.png"
  448 + alt="shape2"
  449 + style="bottom: 0;
  450 + position: absolute;
  451 + right: 0;
  452 + width: 110px;"
446 453 />
447   - <table
448   - class="mb-5 tableRsponsive feeTypeTable"
449   - style="table-layout: auto !important;
450   - width: 100% !important;
451   - "
452   - >
453   - <!-- <thead style="border: 1px solid lightgrey !important;">
454   - <tr
455   - style="border: 1px solid lightgrey !important;padding:4px;"
456   - v-if="this.getReport.role === 4"
457   - >
458   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
459   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
460   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
461   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
462   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
463   - </tr>
464   - <tr
465   - style="border: 1px solid lightgrey !important;padding:4px;"
466   - v-if="this.getReport.role === 3"
467   - >
468   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
469   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
470   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
471   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
472   - </tr>
473   - <tr
474   - style="border: 1px solid lightgrey !important;padding:4px;"
475   - v-if="this.getReport.role === 2"
476   - >
477   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
478   - <td
479   - style="border: 1px solid lightgrey !important;padding: 6px;"
480   - >Establishment Year</td>
481   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
482   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
483   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
484   - </tr>
485   - <tr
486   - style="border: 1px solid lightgrey !important;padding:4px;"
487   - v-if="this.getReport.role === 6"
488   - >
489   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
490   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
491   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
492   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
493   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
494   - </tr>
495   - <tr
496   - style="border: 1px solid lightgrey !important;padding:4px;"
497   - v-if="this.getReport.role === 7"
498   - >
499   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
500   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
501   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
502   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
503   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
504   - </tr>
505   - </thead> -->
506   - <tbody style="border: 1px solid lightgrey !important;">
507   - <tr
508   - v-if="this.getReport.role === 4"
509   - >
510   - <h3 style="text-align: center;">{{ getCard.studentData.name }}</h3>
511   - <p style="text-align: center;">{{ getCard.studentData.classId.classNum }}</p>
512   - <p style="text-align: center;">{{ getCard.studentData.sectionId.name }}</p>
513   - <p style="text-align: center;">{{ getCard.studentData.rollNo }}</p>
514   - <p style="text-align: center;">{{ getCard.studentData.bloodGroup }}</p>
515   - <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
516   - </tr>
517   - <tr
518   - v-if="this.getReport.role === 3"
519   - >
520   - <h3 style="text-align: center;">{{ getCard.teachersData.name }}</h3>
521   - <p style="text-align: center;">{{ getCard.teachersData.email }}</p>
522   - <p style="text-align: center;">{{ getCard.teachersData.mobileNo }}</p>
523   - <p style="text-align: center;">{{ getCard.teachersData.joinDate }}</p>
524   - <img src="static/icon/shape2.png" alt="shape2" class="rightside" style="padding-left: 75%;"/>
525   - </tr>
526   - <tr
527   - v-if="this.getReport.role === 2"
528   - >
529   - <h3 style="text-align: center;">{{ getCard.adminData.name }}</h3>
530   - <p style="text-align: center;">{{ getCard.adminData.establishmentYear }}</p>
531   - <p style="text-align: center;">{{ getCard.adminData.joinDate }}</p>
532   - <p style="text-align: center;">{{ getCard.adminData.mobile }}</p>
533   - <p style="text-align: center;">{{ getCard.adminData.email }}</p>
534   - <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
535   - </tr>
536   - <tr
537   - v-if="this.getReport.role === 6"
538   - >
539   - <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
540   - <p style="text-align: center;">{{ getCard.usersData.email }}</p>
541   - <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
542   - <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
543   - <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
544   - <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
545   - </tr>
546   - <tr
547   - v-if="this.getReport.role === 7"
548   - >
549   - <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
550   - <p style="text-align: center;">{{ getCard.usersData.email }}</p>
551   - <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
552   - <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
553   - <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
554   - <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
555   - </tr>
556   - </tbody>
557   - </table>
558 454 </div>
559 455 </div>
560   - <!-- </v-layout> -->
561   - </v-flex>
562   - </v-flex>
563   - </v-layout>
564   - </div>
565   - <div v-if="backPart" class="col-sm-12">
566   - <v-layout v-show="showReport">
567   - <v-flex xs12>
568   - <v-card class="transparent elevation-0">
569   - <v-layout>
570   - <v-flex xs12>
571   - <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
572   - Print
573   - <v-icon right dark>print</v-icon>
574   - </v-btn>
575   - </v-flex>
576 456 </v-layout>
577   - <div class="icard-data">
578   - <div class="idcardreport">
579   - <div class="icard-back">
580   - <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
581   - <img src="/static/logo.png" alt="logo" class="logo" />
582   - <h2>{{userData.name}}</h2>
583   - <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
584   - <div class="school-address">
585   - <p>{{ userData.address }}, {{ userData.pinCode }}</p>
586   - </div>
587   - <!-- <div class="icard-bottom">
588   - <div class="qrcode">
589   - <img src="/static/icon/qr-code.png" alt="icon" />
590   - </div>
591   - <div class="session">
592   - <span>Session: 2019-2020</span>
593   - </div>
594   - </div> -->
595   - </div>
596   - </div>
597   - </div>
598   - </v-card>
599   - <div class="icard-data" id="printMe" v-show="hidebackprintIdCard">
600   - <div class="idcardreport" style="margin-top: 25%;">
601   - <div class="back-icard">
602   - <img src="/static/icon/shape1.png" alt="shape" class="shape1" style="padding-left: 25%;"/>
603   - <img src="/static/logo.png" alt="logo" class="logo" style="width: 50px; height: 50px; margin-left: 12%;"/>
604   - <h2 style="text-align: center;">{{ userData.name }}</h2>
605   - <div class="address" style="text-align: center;">
606   - <p>{{ userData.address }}, {{ userData.pinCode }}</p>
607   - </div>
608   - <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
609   - </div>
610   - </div>
611   - </div>
  457 + </v-container>
612 458 </v-flex>
613 459 </v-layout>
614 460 </div>
  461 + <v-snackbar
  462 + :timeout="timeout"
  463 + :top="y === 'top'"
  464 + :right="x === 'right'"
  465 + :vertical="mode === 'vertical'"
  466 + v-model="snackbar"
  467 + :color="color"
  468 + >{{ text }}</v-snackbar>
615 469 </v-container>
616 470 </template>
617 471  
... ... @@ -624,7 +478,13 @@ export default {
624 478 valid: true,
625 479 report: {},
626 480 userData: {},
627   -
  481 + snackbar: false,
  482 + color: "",
  483 + y: "top",
  484 + x: "right",
  485 + mode: "",
  486 + timeout: 10000,
  487 + text: "",
628 488 loading: false,
629 489 showReport: false,
630 490 frontPart: false,
... ... @@ -636,7 +496,8 @@ export default {
636 496 showLibrarian: false,
637 497 hideprintIdCard: false,
638 498 hidebackprintIdCard: false,
639   -
  499 + showStudents: false,
  500 + showSections: false,
640 501 getRoles: [],
641 502 classList: [],
642 503 getCard: [],
... ... @@ -645,19 +506,18 @@ export default {
645 506 teacherList: [],
646 507 userData: [],
647 508 Users: [],
  509 + getReport: {},
  510 + // cardRules: [v => !!v || "Id-Card Field is required"],
  511 + // classRules: [v => !!v || "Class Field is required"],
  512 + // sectionRules: [v => !!v || "Section Field is required"],
  513 + // studentRules: [v => !!v || "Student Field is required"],
  514 + // teacherRules: [v => !!v || "Teacher Field is required"],
  515 + // adminRules: [v => !!v || "Admin Field is required"],
  516 + // accountantRules: [v => !!v || "Accountant Field is required"],
  517 + // librarianRules: [v => !!v || "Librarian Field is required"],
648 518  
649   - cardRules: [v => !!v || "Id-Card Field is required"],
650   - classRules: [v => !!v || "Class Field is required"],
651   - sectionRules: [v => !!v || "Section Field is required"],
652   - studentRules: [v => !!v || "Student Field is required"],
653   - teacherRules: [v => !!v || "Teacher Field is required"],
654   - adminRules: [v => !!v || "Admin Field is required"],
655   - accountantRules: [v => !!v || "Accountant Field is required"],
656   - librarianRules: [v => !!v || "Librarian Field is required"],
657   -
658   - typeRules: [v => !!v || "Type is required"],
659   - backgroundRules: [v => !!v || "Background is required"],
660   -
  519 + // typeRules: [v => !!v || "Type is required"],
  520 + // backgroundRules: [v => !!v || "Background is required"],
661 521 typeList: [
662 522 {
663 523 name: "Front Part",
... ... @@ -678,7 +538,11 @@ export default {
678 538 },
679 539  
680 540 methods: {
681   - getReport() {
  541 + dates: function(date) {
  542 + return moment(date).format("MMMM DD, YYYY");
  543 + return date;
  544 + },
  545 + getReportType() {
682 546 if (this.getReport.form === "frontPart") {
683 547 this.frontPart = true;
684 548 this.backPart = false;
... ... @@ -689,26 +553,59 @@ export default {
689 553 }
690 554 },
691 555 getRoleInputs(role) {
692   - // console.log("role", role);
  556 + console.log("role", role);
  557 + this.showReport = false;
  558 + this.getReport._id = "";
  559 + this.getCard = "";
693 560 if (role === 4) {
694 561 // console.log("role", role);
695 562 this.showClass = true;
  563 + this.showTeacher = false;
  564 + this.showAdmin = false;
  565 + this.showAccountant = false;
  566 + this.showLibrarian = false;
  567 + this.showStudents = false;
  568 + this.showSections = false;
696 569 this.getClass();
697 570 }
698 571 if (role === 3) {
699 572 this.showTeacher = true;
  573 + this.showClass = false;
  574 + this.showAdmin = false;
  575 + this.showAccountant = false;
  576 + this.showLibrarian = false;
  577 + this.showStudents = false;
  578 + this.showSections = false;
700 579 this.getTeacherList();
701 580 }
702 581 if (role === 2) {
703 582 this.showAdmin = true;
  583 + this.showTeacher = false;
  584 + this.showClass = false;
  585 + this.showAccountant = false;
  586 + this.showLibrarian = false;
  587 + this.showStudents = false;
  588 + this.showSections = false;
704 589 this.getUserData();
705 590 }
706 591 if (role === 6) {
707 592 this.showAccountant = true;
  593 + this.showAdmin = false;
  594 + this.showTeacher = false;
  595 + this.showClass = false;
  596 + this.showLibrarian = false;
  597 + this.showStudents = false;
  598 + this.showSections = false;
708 599 this.getUsersList();
709 600 }
710 601 if (role === 7) {
711 602 this.showLibrarian = true;
  603 + this.showAccountant = false;
  604 + this.showAdmin = false;
  605 + this.showTeacher = false;
  606 + this.showClass = false;
  607 + this.showStudents = false;
  608 + this.showSections = false;
712 609 this.getUsersList();
713 610 }
714 611 },
... ... @@ -725,11 +622,11 @@ export default {
725 622 // this.adminList = response.data.data;
726 623 })
727 624 .catch(error => {
728   - // if (error.response.status === 401) {
729   - // this.$router.replace({ path: "/" });
730   - // this.$store.dispatch("setToken", null);
731   - // this.$store.dispatch("Id", null);
732   - // }
  625 + if (error.response.status === 401) {
  626 + this.$router.replace({ path: "/" });
  627 + this.$store.dispatch("setToken", null);
  628 + this.$store.dispatch("Id", null);
  629 + }
733 630 });
734 631 },
735 632 getRole() {
... ... @@ -739,23 +636,26 @@ export default {
739 636 headers: { Authorization: "Bearer " + this.token }
740 637 })
741 638 .then(response => {
742   - this.getRoles = response.data.data;
743   - if (this.getRoles[0].role !== 1) {
744   - this.getRoles = response.data.data;
745   - console.log("bdhcbkguvhb", this.getRoles[0].role);
  639 + var getRoles = [];
  640 + getRoles = response.data.data;
  641 + // if (getRoles[0].role !== 1) {
  642 + // getRoles = response.data.data;
  643 + // }
  644 + for (let i = 0; i < getRoles.length; i++) {
  645 + if (getRoles[i].role != "1" && getRoles[i].role != "5") {
  646 + this.getRoles.push(getRoles[i]);
  647 + }
746 648 }
747   - // this.role = response.data.data;
748   - // console.log("this.role", this.role);
749 649 this.showLoader = false;
750 650 })
751 651 .catch(error => {
752 652 this.showLoader = false;
753   - // if (error.response.status === 401) {
754   - // this.$router.replace({ path: "/" });
755   - // this.$store.dispatch("setToken", null);
756   - // this.$store.dispatch("Id", null);
757   - // this.$store.dispatch("Role", null);
758   - // }
  653 + if (error.response.status === 401) {
  654 + this.$router.replace({ path: "/" });
  655 + this.$store.dispatch("setToken", null);
  656 + this.$store.dispatch("Id", null);
  657 + this.$store.dispatch("Role", null);
  658 + }
759 659 });
760 660 },
761 661 getClass() {
... ... @@ -786,6 +686,7 @@ export default {
786 686 )
787 687 .then(response => {
788 688 this.addSection = response.data.data;
  689 + this.showSections = true;
789 690 this.showLoader = false;
790 691 })
791 692 .catch(err => {
... ... @@ -804,6 +705,7 @@ export default {
804 705 })
805 706 .then(response => {
806 707 this.getStudentsList = response.data.data;
  708 + this.showStudents = true;
807 709 this.showLoader = false;
808 710 })
809 711 .catch(error => {
... ... @@ -823,12 +725,48 @@ export default {
823 725 }
824 726 })
825 727 .then(response => {
826   - this.getCard = response.data.data;
  728 + this.getCard = "";
  729 + var data = response.data.data;
  730 + if (
  731 + Object.keys(data.adminData).length != 0 &&
  732 + data.adminData.constructor === Object
  733 + ) {
  734 + this.getCard = response.data.data.adminData;
  735 + console.log("this.getCard ", this.getCard);
  736 + }
  737 + if (
  738 + Object.keys(data.teachersData).length != 0 &&
  739 + data.teachersData.constructor === Object
  740 + ) {
  741 + this.getCard = response.data.data.teachersData;
  742 + console.log("this.getCard--teachersData ", this.getCard);
  743 + }
  744 + if (
  745 + Object.keys(data.studentData).length != 0 &&
  746 + data.studentData.constructor === Object
  747 + ) {
  748 + this.getCard = response.data.data.studentData;
  749 + console.log("this.getCard--studentData ", this.getCard);
  750 + }
  751 + if (
  752 + Object.keys(data.usersData).length != 0 &&
  753 + data.usersData.constructor === Object
  754 + ) {
  755 + this.getCard = response.data.data.usersData;
  756 + console.log("this.getCard--usersData ", this.getCard);
  757 + }
  758 + // console.log("this.getCard--all ", response.data.data);
827 759 this.showLoader = false;
828 760 this.showReport = true;
829 761 })
830 762 .catch(error => {
831 763 this.showLoader = false;
  764 + console.log("error", error.response.data.errors);
  765 + if (error.response.data.errors) {
  766 + this.snackbar = true;
  767 + this.text = " Field is required";
  768 + this.color = "error";
  769 + }
832 770 });
833 771 },
834 772 getTeacherList() {
... ... @@ -921,11 +859,12 @@ export default {
921 859 .icard-front {
922 860 margin: 3px;
923 861 float: left;
924   - /* border: 1px solid #000; */
925 862 padding: 10px;
926   - /* width: 55%; */
927 863 text-align: center;
928   - height: 95%;
  864 + height: 520px;
  865 + width: 520px;
  866 + background: #fff;
  867 + border: 1px solid lightgray;
929 868 }
930 869 .print-data {
931 870 margin: 3px;
... ... @@ -936,12 +875,6 @@ export default {
936 875 text-align: center;
937 876 height: 95%;
938 877 }
939   -.shape1 {
940   - float: left;
941   -}
942   -.shape2 {
943   - float: right;
944   -}
945 878 .rightside {
946 879 float: right !important;
947 880 }
... ...
static/css/custom.css
Diff comments   View file @ecf8cdf
... ... @@ -145,6 +145,7 @@ h4 {
145 145 padding: 8px;
146 146 }
147 147  
  148 +
148 149 /* .apexcharts-canvas {
149 150 width: 100% !important;
150 151 }
... ...
static/defaultSchoolLogo.jpg
Diff comments   View file @ecf8cdf

21.1 KB
static/default_thumb.png
Diff comments   View file @ecf8cdf

8.44 KB