viithiisys / School-Management-dashboard

Browse Code »

Commit 819c223ec08cc985738f4d27e53b5664a7b68dfa

Authored by Shikha Mishra 2020-02-13 08:11:18 -0500

1 parent 8deade1932

Exists in master and in 3 other branches

improve school and persons logo and details

Showing 3 changed files with 32 additions and 26 deletions Show diff stats

src/pages/Mark/viewMark.vue

Diff comments View file @819c223

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** PROFILE MARK  ****** -->
     <v-container fluid grid-list-md>
       <v-layout>
         <v-flex xs12 sm8 md10>
           <v-btn class="open-dialog-button mt-3" round dark @click="print()">
             Print
             <v-icon size="18" right dark>print</v-icon>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm4 md2 class="right">
           <v-select
             class
             :items="selectMark"
             label="Select"
             v-model="selectMarkList"
             @change="selectMarkData(selectMarkList)"
           ></v-select>
         </v-flex>
       </v-layout>
       <v-flex xs12 sm12 id="printMe">
         <v-layout wrap>
           <!-- ****** TABLE DATA MARK  ****** -->
           <v-flex xs12 sm12 md12>
             <v-card
               v-for="(value, id, index) in filterData"
               :key="index"
               flat
               style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
             >
               <v-layout>
                 <v-flex xs12 sm12 md12 class="text-xs-center">
                   <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                   <p class="title">{{ userData.name }}</p>
                   <p>{{ userData.address }}</p>
                 </v-flex>
                 <v-flex xs12 sm12 md12 class="text-xs-center">
-                  <v-avatar size="100">
+                  <v-avatar size="80px">
-                    <img
+                    <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
-                      :src="value[0].studentId.profilePicUrl"
+                    <img :src="value[0].studentId.profilePicUrl" v-else-if="value[0].studentId.profilePicUrl" />
-                      v-if="value[0].studentId.profilePicUrl"
-                      width="100px"
-                    />
-                    <img
-                      src="/static/icon/user.png"
-                      v-else-if="!value[0].studentId.profilePicUrl"
-                      width="100px"
-                    />
                   </v-avatar>
                   <p
                     style="font-size:20px;margin:0px;margin-bottom:4px;"
                   >{{ value[0].studentId.name }}</p>
                   <p
                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Class : {{ value[0].classId.classNum }}</p>
+                  > Class : {{ value[0].classId.classNum }}</p>
                   <p
                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Roll NO : {{ value[0].studentId.rollNo }}</p>
+                  > Section : {{ value[0].sectionId.name }}</p>
                   <p
                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Section : {{ value[0].sectionId.name }}</p>
+                  > Roll No : {{ value[0].studentId.rollNo }}</p>
                 </v-flex>
               </v-layout>
-              <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
               <table
                 class="mb-5 tableRsponsive feeTypeTable"
                 style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;
                  "
               >
                 <thead style="border: 1px solid lightgrey !important;">
                   <tr style="border: 1px solid lightgrey !important;padding:4px;">
                     <td
                       rowspan="2"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >Subject</td>
                     <template v-for="studentData in  value">
                       <td
                         colspan="2"
                         v-for="studentMark in studentData.studentsMarks"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{studentMark.markDistributionId.distributionType}}</td>
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
                     </template>
                   </tr>
                   <tr
                     v-for="(subject, ind) in value"
                     v-if="ind == 0"
                     style="border: 1px solid lightgrey !important;"
                   >
                     <template v-for="(exam, i) in subject.studentsMarks">
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</td>
                     </template>
                     <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                   </tr>
                 </thead>
                 <tbody style="border: 1px solid lightgrey !important;">
                   <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
                     <td
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{subject.subjectName}}</td>
                     <template v-for="(exam, i) in subject.studentsMarks">
                       <td
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{exam.marksScored}}</td>
                       <td
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{exam.markDistributionId.markValue}}</td>
                     </template>
                     <td
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{subject.totalMarks}}</td>
                   </tr>
                 </tbody>
               </table>
             </v-card>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-container>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: true,
     nameShow: false,
     showMark: true,
     showGrade: false,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     filterData: [],
     output: null,
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
     selectMarkList: "Mark",
     selectMark: ["Mark", "Grade"],
     MarkData: "",
     userData: {}
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getMarkList();
     this.getUserData();
   },
   methods: {
     getMarkList() {
       this.showLoader = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.$route.params.markId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.markData = response.data.data;
           let newData = response.data.data;
           // console.log("newData", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           // console.log("this.filterData", this.filterData);
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
                 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
                 //   .marksScored)
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     print() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     selectMarkData(select) {
       if (select == "Mark") {
         this.showMark = true;
         this.showGrade = false;
       } else if (select == "Grade") {
         this.showGrade = true;
         this.showMark = false;
       }
     }
   }
 };
 </script>
 <style scoped>
 .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
 }
 .open-dialog-button {
   background: #827bfa !important;
   border-color: #827bfa !important;
   text-transform: none !important;
 }
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 .loader {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
 }
 .loader > div {
   position: relative;
   top: calc(50% - 16px);
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @819c223

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Student:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3 ml-5"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-layout>
             <v-flex xs12>
               <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
           <v-container grid-list-md v-show="showReport">
             <v-flex xs12 sm12 id="printMe">
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <v-card
                     v-for="(value, id, index) in filterData"
                     :key="index"
                     flat
                     style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                   >
                     <v-layout>
                       <v-flex xs12 sm12 md12 class="text-xs-center">
                           <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                           <p class="title">{{ userData.name }}</p>
                           <p>{{ userData.address }}</p>
                       </v-flex>
                       <v-flex xs12 sm12 md12 class="text-xs-center">
                           <v-avatar size="100">
                             <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" />
                             <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" />
                           </v-avatar>
                           <p
                             style="font-size:20px;margin:0px;margin-bottom:4px;"
                           >{{ value[0].studentId.name }}</p>
                           <p
                             style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                           >Class : {{ value[0].classId.classNum }}</p>
                           <p
                             style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                          >Roll NO : {{ value[0].studentId.rollNo }}</p>
+                          >Section : {{ value[0].sectionId.name }}</p>
                           <p
                             style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                          >Section : {{ value[0].sectionId.name }}</p>
+                          >Roll NO : {{ value[0].studentId.rollNo }}</p>
                       </v-flex>
                     </v-layout>
-                    <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
+                    <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
                     <table
                       class="mb-5 tableRsponsive feeTypeTable"
                       style="border: 1px solid lightgrey;
                         border-collapse: collapse;!important
                         table-layout: auto !important;
                         width: 100% !important;
-                        overflow: hidden;
+                        overflow: hidden;"
-                        display: block;"
                     >
                       <thead style="border: 1px solid lightgrey !important;">
                         <tr style="border: 1px solid lightgrey !important;padding:4px;">
                           <td
                             rowspan="2"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >Subject</td>
                           <td
                             v-for="(exam,i) in value[index].studentsMarks"
                             colspan="2"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{ exam.markDistributionId.distributionType }}</td>
-                          <template v-for="studentData in  value">
+                          <!-- <template v-for="studentData in  value">
                             <td
                               colspan="2"
                               v-for="studentMark in studentData.studentsMarks"
                             >{{ studentMark.markDistributionId.distributionType }}</td>
-                          </template>
+                          </template> -->
-                          <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td>
+                          <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> -->
                           <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
                         </tr>
                         <tr
                           v-for="(subject, ind) in value"
                           v-if="ind == 0"
                           style="border: 1px solid lightgrey !important;"
                         >
                           <template v-for="(exam, i) in subject.studentsMarks">
                             <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Highest Mark</td>
                           </template>
                           <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                         </tr>
                       </thead>
                       <tbody style="border: 1px solid lightgrey !important;">
                         <tr
                           v-for="subject in value"
                           style="border: 1px solid lightgrey !important;"
                         >
                           <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.subjectName}}</td>
                           <template v-for="(exam, i) in subject.studentsMarks">
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.marksScored}}</td>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.markDistributionId.markValue}}</td>
                           </template>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.totalMarks}}</td>
                         </tr>
                       </tbody>
                       <!-- <tfoot>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Total Amount (RS) :</span>
                     </td>
                     <td>{{ feeType.subTotal }}</td>
                   </tr>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Paid (RS) :</span>
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
                   </tr>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Balance (RS) :</span>
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                   </tr>
                       </tfoot>-->
                     </table>
                   </v-card>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </v-card>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: false,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     loading: false,
     valid: true,
     loading: false,
     showReport: false,
     addSection: [],
     filterData: [],
     getStudentsList: [],
     classRules: [v => !!v || "Class is required"],
     sectionRules: [v => !!v || "Class is required"],
     studentRules: [v => !!v || "Student is required"],
     getReport: {},
     classList: [],
     output: null,
     userData: {}
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getUserData();
   },
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId
           }
         })
         .then(response => {
           this.getStudentsList = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", response.data.data);
         })
         .catch(error => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     getMarkReportList() {
       // this.showLoader = true;
       this.showReport = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.getReport.studentId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.showLoader = false;
           let newData = response.data.data;
           // console.log("response", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
             // console.log("newData[i].examination", newData[i].examination);
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           for (let data in this.filterData) {
             // console.log("data+++++++++++++++++++++++++++++++++++", data);
             for (let item in this.filterData[data]) {
               // console.log(
               //   "filterData[data]==========================>",
               //   this.filterData[data]
               // );
               // console.log("filterData[item]==========================>", item);
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               // var total = 0;
               // total += this.filterData[data][item].totalMarks  ;
               // console.log("total", total);
             }
           }
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     printProgressReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     }
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style> s

src/pages/Report/studentReport.vue

Diff comments View file @819c223

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Student Report TABLE****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg4>
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Report For :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.form"
                     label="Select your report for"
                     :items="formList"
                     item-text="name"
                     item-value="value"
                     @change="getReport(report.form)"
                     :rules="formRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="bloodGroup">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Blood Group :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.bloodGroup"
                     label="Select your Blood Group "
                     :items="bloodGroupList"
                     :rules="bloodGroupRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="genderShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Gender:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.gender"
                     label="Select your gender "
                     :items="gender"
                     :rules="genderRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="TransportShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Route:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.route"
                     label="Select your gender "
                     :items="route"
                     :rules="routeRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="HostelShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Hostel:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.route"
                     label="Select your hostel "
                     :items="hostelList"
                     :rules="hostelRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="countryShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Country :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.country"
                     label="Select your Country "
                     :items="countryList"
                     :rules="countryRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
             <v-layout>
               <v-flex xs3 sm6 lg4 class="subheading mt-4">
                 <label class="right">Country :</label>
               </v-flex>
               <v-flex xs12 sm12 lg8 class="ml-2">
                 <v-select
                   v-model="report.country"
                   label="Select your Country "
                   :items="countryList"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             </v-flex>-->
             <v-flex xs12 sm12 lg4 v-if="classShow">
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.classId"
                     label="Select your class"
                     type="text"
                     :rules="classRules"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     @change="getSections(report.classId)"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="sectionShow">
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     :items="addSection"
                     label="Select your Section"
                     v-model="report.sectionId"
                     :rules="sectionRules"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn
                 @click="getStudents"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3 ml-5"
               >Get Report</v-btn>
             </v-flex>
             <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
               <v-btn
                 @click="getStudents"
                 round
                 dark
                 :loading="loading"
                 class="mt-3 right"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showTable">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-layout>
             <v-flex xs12>
               <v-btn class="open-dialog-button right" round dark @click="printStudentReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12 md12 class="text-xs-center">
               <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
               <p class="title">{{ userData.name }}</p>
               <p>{{ userData.address }}</p>
             </v-flex>
-            <v-flex xs12 sm12 md12 class="text-xs-center">
+            <v-flex xs12 sm12 md12 class="text-xs-center" v-for="(studentReport,i) in getStudentsReportList" :key="i">
+              <v-avatar>
+                <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
+                <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
+              </v-avatar>
+              <p
+                style="font-size:20px;margin:0px;margin-bottom:4px;"
+              >{{ studentReport.name }}</p>
+              <p
+                style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
+              > Class : {{ studentReport.classId.classNum }}</p>
+              <p
+                style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
+              > Section : {{ studentReport.sectionId.name }}</p>
+              <p
+                style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
+              > RollNo : {{ studentReport.rollNo }}</p>
             </v-flex>
           </v-layout>
           <v-data-table
             :headers="headers"
             :items="getStudentsReportList"
             :pagination.sync="pagination"
             :search="search"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="td td-row">{{ props.index + 1}}</td>
                 <td id="td" class="text-xs-center">
                   <v-avatar>
                     <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
                 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td>
               </tr>
             </template>
             <v-alert
               slot="no-results"
               :value="true"
               color="error"
               icon="warning"
             >Your search for "{{ search }}" found no results.</v-alert>
           </v-data-table>
         </v-card>
         <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
           <v-layout>
             <v-flex xs12 style="text-align:center;margin-bottom:10px">
               <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
               <p class="title">{{ userData.name }}</p>
               <p>{{ userData.address }}</p>
             </v-flex>
           </v-layout>
           <table
             class="mb-5 tableRsponsive feeTypeTable"
             style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;"
           >
             <thead style="border: 1px solid lightgrey !important;">
               <tr style="border: 1px solid lightgrey !important;padding:4px;">
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
               </tr>
             </thead>
             <tbody style="border: 1px solid lightgrey !important;">
               <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">
                   <v-avatar>
                     <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.name }}</td>
                 <!-- <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.rollNo }}</td>-->
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.email }}</td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.classId.classNum }}</td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.sectionId.name }}</td>
               </tr>
             </tbody>
           </table>
         </v-flex>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import countryList from "@/script/country.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     valid: true,
     search: "",
     showLoader: false,
     bloodGroup: false,
     genderShow: false,
     countryShow: false,
     TransportShow: false,
     HostelShow: false,
     BirthdayShow: false,
     sectionShow: false,
     showTable: false,
     classShow: true,
     hidePrintStudentReport: false,
     addSection: [],
     pagination: {
       rowsPerPage: 10
     },
     formRules: [v => !!v || "Form For is required"],
     bloodGroupRules: [v => !!v || "Blood group is required"],
     classRules: [v => !!v || "Class is required"],
     sectionRules: [v => !!v || "Class is required"],
     genderRules: [v => !!v || "Gender is required"],
     routeRules: [v => !!v || "RouteI is required"],
     hostelRules: [v => !!v || "Hostel is required"],
     countryRules: [v => !!v || "Country is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No"
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
         align: "center"
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
         align: "center"
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
         align: "center"
       },
       {
         text: "Class",
         value: "classId",
         sortable: false,
         align: "center"
       },
       {
         text: "Section",
         value: "sectionId",
         sortable: false,
         align: "center"
       }
     ],
     classList: [],
     report: {},
     userData: {},
     markData: [],
     formList: [
       {
         name: "Blood Group",
         value: "bloodGroup"
       },
       "Country",
       "Gender",
       "Transport",
       "Hostel"
       //   "Birthday"
     ],
     bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
     gender: ["Male", "female"],
     getStudentsReportList: [],
     studentReort: "",
     countryList: [],
     route: [],
     Hostel: [],
     hostelList: [],
     token: ""
   }),
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
     getReport() {
       if (this.report.form === "bloodGroup") {
         this.bloodGroup = true;
         this.genderShow = false;
         this.TransportShow = false;
         this.countryShow = false;
         this.BirthdayShow = false;
         this.HostelShow = false;
         this.classShow = false;
         this.sectionShow = false;
       }
       if (this.report.form === "Gender") {
         this.genderShow = true;
         this.bloodGroup = false;
         this.TransportShow = false;
         this.BirthdayShow = false;
         this.countryShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Transport") {
         this.TransportShow = true;
         this.genderShow = false;
         this.bloodGroup = false;
         this.BirthdayShow = false;
         this.countryShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Country") {
         this.countryShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.bloodGroup = false;
         this.BirthdayShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Hostel") {
         this.HostelShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.bloodGroup = false;
         this.countryShow = false;
         this.BirthdayShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Birthday") {
         this.BirthdayShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.HostelShow = false;
         this.bloodGroup = false;
         this.countryShow = false;
         this.classShow = true;
       }
     },
     getStudents() {
       if (this.$refs.form.validate()) {
         this.showLoader = true;
         http()
           .get("/getStudentReport", {
             params: {
               bloodGroup: this.report.bloodGroup,
               country: this.report.country,
               gender: this.report.gender,
               classId: this.report.classId,
               sectionId: this.report.sectionId
             },
             headers: { Authorization: "Bearer " + this.token }
           })
           .then(response => {
             this.getStudentsReportList = response.data.data;
             this.showTable = true;
             this.showLoader = false;
             this.clear();
             // console.log("getSectionsList=====>", response.data.data);
           })
           .catch(error => {
             console.log("err====>", error);
             this.showLoader = false;
           });
       }
     },
     getSections() {
       this.sectionShow = true;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: this.report.classId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     //     getFormList() {
     //       this.showLoader = true;
     //       http()
     //         .get("/getExamsList", {
     //           headers: { Authorization: "Bearer " + this.token }
     //         })
     //         .then(response => {
     //           this.formList = response.data.data;
     //           this.showLoader = false;
     //         })
     //         .catch(error => {
     //           // console.log("err====>", err);
     //           this.showLoader = false;
     //           this.snackbar = true;
     //           this.text = error.response.data.message;
     //           if (error.response.status === 401) {
     //             this.$router.replace({ path: "/" });
     //             this.$store.dispatch("setToken", null);
     //             this.$store.dispatch("Id", null);
     //           }
     //         });
     //     }
     printStudentReport() {
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     const getCountryList = countryList();
     this.countryList = getCountryList;
     this.getUserData();
     // console.log("getindustryList", this.countryList);
     // this.getExamList();
     this.getClass();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
-</style>s