viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 96f88269ac36632f40dae1cb79c9698c1f9e3804

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

implement Student Report Dashboard

Showing 5 changed files with 141 additions and 45 deletions   Show diff stats
... ... @@ -13,7 +13,7 @@
13 13 <!-- App Footer -->
14 14 <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer>
15 15 </v-content>
16   - <!-- theme setting -->
  16 + <!-- theme setting -->
17 17 <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
18 18 <v-icon>settings</v-icon>
19 19 </v-btn>
... ... @@ -26,7 +26,7 @@
26 26 fixed
27 27 >
28 28 <theme-settings></theme-settings>
29   - </v-navigation-drawer> -->
  29 + </v-navigation-drawer>-->
30 30 </v-app>
31 31 </template>
32 32 <template v-else>
... ... @@ -49,13 +49,13 @@ import AppDrawer from &quot;@/components/pageHeader/AppDrawer&quot;;
49 49 import AppToolbar from "@/components/pageHeader/AppToolbar";
50 50 import menu from "@/api/menu";
51 51 import AppEvents from "./event";
52   -import ThemeSettings from "@/components/ThemeSettings"
  52 +import ThemeSettings from "@/components/ThemeSettings";
53 53  
54 54 export default {
55 55 components: {
56 56 AppDrawer,
57 57 AppToolbar,
58   - ThemeSettings
  58 + ThemeSettings,
59 59 },
60 60 data: () => ({
61 61 expanded: true,
... ... @@ -75,12 +75,12 @@ export default {
75 75 });
76 76 window.getApp = this;
77 77 },
78   - methods: {
79   - openThemeSettings () {
  78 + methods: {
  79 + openThemeSettings() {
80 80 this.$vuetify.goTo(0);
81   - this.rightDrawer = (!this.rightDrawer);
  81 + this.rightDrawer = !this.rightDrawer;
82 82 }
83   - },
  83 + }
84 84 };
85 85 </script>
86 86  
... ...
src/Services/http.js
Diff comments   View file @96f8826
... ... @@ -7,8 +7,8 @@ const baseURL = `${baseDomain}`;
7 7  
8 8 export default () => {
9 9 return axios.create({
10   - // baseURL: 'http://192.168.0.120:3002/v1',
11   - baseURL,
  10 + baseURL: 'http://192.168.4.220:3002/v1',
  11 + // baseURL,
12 12 headers: {
13 13 Authorization: `Bearer ${store.state.token}`
14 14 }
... ...
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @96f8826
... ... @@ -27,7 +27,11 @@
27 27 <v-btn icon large flat slot="activator">
28 28 <v-avatar>
29 29 <!-- <img src="/static/icon/user.png" /> -->
30   - <v-icon dark size="40px" v-if="!userData.schoolLogoUrl && !userData.profilePicUrl">account_circle</v-icon>
  30 + <v-icon
  31 + dark
  32 + size="40px"
  33 + v-if="!userData.schoolLogoUrl && !userData.profilePicUrl"
  34 + >account_circle</v-icon>
31 35 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" />
32 36 <img :src="userData.profilePicUrl" v-else-if="userData.profilePicUrl" />
33 37 </v-avatar>
... ... @@ -102,7 +106,7 @@ export default {
102 106 methods: {
103 107 emitSearch(ev) {
104 108 this.$root.$emit("app:search", ev.target.value);
105   - console.log("ev.target.value", ev.target.value);
  109 + // console.log("ev.target.value", ev.target.value);
106 110 },
107 111 handleDrawerToggle() {
108 112 window.getApp.$emit("APP_DRAWER_TOGGLED");
... ...
src/pages/Authentication/Login.vue
Diff comments   View file @96f8826
... ... @@ -29,14 +29,14 @@
29 29 <v-flex xs12 sm12 md12 lg12>
30 30 <v-form ref="form" v-model="valid" lazy-validation>
31 31 <v-text-field
32   - v-model="userLogincredentials.email"
  32 + v-model.trim="userLogincredentials.email"
33 33 :rules="nameRules"
34 34 label="Username"
35 35 required
36 36 ></v-text-field>
37 37 <v-text-field
38 38 :rules="[rules.required]"
39   - v-model="userLogincredentials.password"
  39 + v-model.trim="userLogincredentials.password"
40 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 41 :append-icon-cb="() => (e1 = !e1)"
42 42 :type="e1 ? 'password' : 'text'"
... ...
src/pages/Report/studentReport.vue
Diff comments   View file @96f8826
... ... @@ -175,7 +175,7 @@
175 175 </v-flex>
176 176 </v-layout>
177 177 </v-flex>
178   - <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only">
  178 + <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
179 179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn>
180 180 </v-flex>
181 181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
... ... @@ -191,34 +191,106 @@
191 191 </v-flex>
192 192 </v-form>
193 193 </v-card>
194   - <v-data-table
195   - :headers="headers"
196   - :items="getStudentsReportList"
197   - :pagination.sync="pagination"
198   - :search="search"
199   - v-show="showTable"
200   - >
201   - <template slot="items" slot-scope="props">
202   - <td class="text-xs-center">{{ props.index + 1}}</td>
203   - <td id="td" class="text-xs-center">
204   - <v-avatar>
205   - <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
206   - <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
207   - </v-avatar>
208   - </td>
209   - <td id="td" class="text-xs-center">{{ props.item.name}}</td>
210   - <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
211   - <td id="td" class="text-xs-center">{{ props.item.email }}</td>
212   - <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
213   - <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
214   - </template>
215   - <v-alert
216   - slot="no-results"
217   - :value="true"
218   - color="error"
219   - icon="warning"
220   - >Your search for "{{ search }}" found no results.</v-alert>
221   - </v-data-table>
  194 + <v-layout v-show="showTable">
  195 + <v-flex xs12>
  196 + <v-card>
  197 + <v-layout>
  198 + <v-flex xs12>
  199 + <v-btn class="grey right" dark @click="printStudentReport()">
  200 + Print
  201 + <v-icon right dark>print</v-icon>
  202 + </v-btn>
  203 + </v-flex>
  204 + </v-layout>
  205 + <v-layout>
  206 + <v-flex xs12 class="text-xs-center">
  207 + <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
  208 + <p class="title">{{ userData.name }}</p>
  209 + <p>{{ userData.address }}</p>
  210 + </v-flex>
  211 + </v-layout>
  212 + <v-data-table
  213 + :headers="headers"
  214 + :items="getStudentsReportList"
  215 + :pagination.sync="pagination"
  216 + :search="search"
  217 + >
  218 + <template slot="items" slot-scope="props">
  219 + <td class="text-xs-center">{{ props.index + 1}}</td>
  220 + <td id="td" class="text-xs-center">
  221 + <v-avatar>
  222 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  223 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  224 + </v-avatar>
  225 + </td>
  226 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  227 + <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
  228 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  229 + <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
  230 + <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
  231 + </template>
  232 + <v-alert
  233 + slot="no-results"
  234 + :value="true"
  235 + color="error"
  236 + icon="warning"
  237 + >Your search for "{{ search }}" found no results.</v-alert>
  238 + </v-data-table>
  239 + </v-card>
  240 + <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
  241 + <v-layout>
  242 + <v-flex xs12 style="text-align:center;margin-bottom:10px">
  243 + <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
  244 + <p class="title">{{ userData.name }}</p>
  245 + <p>{{ userData.address }}</p>
  246 + </v-flex>
  247 + </v-layout>
  248 + <table
  249 + class="mb-5 tableRsponsive feeTypeTable"
  250 + style="border: 1px solid lightgrey;
  251 + border-collapse: collapse;!important
  252 + table-layout: auto !important;
  253 + width: 100% !important;"
  254 + >
  255 + <thead style="border: 1px solid lightgrey !important;">
  256 + <tr style="border: 1px solid lightgrey !important;padding:4px;">
  257 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td>
  258 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  259 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
  260 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  261 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
  262 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
  263 + </tr>
  264 + </thead>
  265 + <tbody style="border: 1px solid lightgrey !important;">
  266 + <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
  267 + <td style="border: 1px solid lightgrey !important;padding: 6px;">
  268 + <v-avatar>
  269 + <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
  270 + <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
  271 + </v-avatar>
  272 + </td>
  273 + <td
  274 + style="border: 1px solid lightgrey !important;padding: 6px;"
  275 + >{{ studentReport.name }}</td>
  276 + <td
  277 + style="border: 1px solid lightgrey !important;padding: 6px;"
  278 + >{{ studentReport.rollNo }}</td>
  279 + <td
  280 + style="border: 1px solid lightgrey !important;padding: 6px;"
  281 + >{{ studentReport.email }}</td>
  282 + <td
  283 + style="border: 1px solid lightgrey !important;padding: 6px;"
  284 + >{{ studentReport.classId.classNum }}</td>
  285 + <td
  286 + style="border: 1px solid lightgrey !important;padding: 6px;"
  287 + >{{ studentReport.sectionId.name }}</td>
  288 + </tr>
  289 + </tbody>
  290 + </table>
  291 + </v-flex>
  292 + </v-flex>
  293 + </v-layout>
222 294 <div class="loader" v-if="showLoader">
223 295 <v-progress-circular indeterminate color="white"></v-progress-circular>
224 296 </div>
... ... @@ -252,7 +324,8 @@ export default {
252 324 BirthdayShow: false,
253 325 sectionShow: false,
254 326 showTable: false,
255   - ClassShow: true,
  327 + classShow: true,
  328 + hidePrintStudentReport: false,
256 329 addSection: [],
257 330 pagination: {
258 331 rowsPerPage: 15
... ... @@ -311,6 +384,7 @@ export default {
311 384 ],
312 385 classList: [],
313 386 report: {},
  387 + userData: {},
314 388 markData: [],
315 389 formList: [
316 390 {
... ... @@ -460,7 +534,7 @@ export default {
460 534 console.log("err====>", error);
461 535 this.showLoader = false;
462 536 });
463   - }
  537 + },
464 538 // getFormList() {
465 539 // this.showLoader = true;
466 540 // http()
... ... @@ -483,11 +557,29 @@ export default {
483 557 // }
484 558 // });
485 559 // }
  560 + printStudentReport() {
  561 + this.$htmlToPaper("printMe");
  562 + },
  563 + getUserData() {
  564 + http()
  565 + .get("/getParticularUserDetail")
  566 + .then(response => {
  567 + this.userData = response.data.data;
  568 + })
  569 + .catch(error => {
  570 + if (error.response.status === 401) {
  571 + this.$router.replace({ path: "/" });
  572 + this.$store.dispatch("setToken", null);
  573 + this.$store.dispatch("Id", null);
  574 + }
  575 + });
  576 + }
486 577 },
487 578 mounted() {
488 579 this.token = this.$store.state.token;
489 580 const getCountryList = countryList();
490 581 this.countryList = getCountryList;
  582 + this.getUserData();
491 583 // console.log("getindustryList", this.countryList);
492 584 // this.getExamList();
493 585 this.getClass();
... ...