From 1d7227237ca5e5b8afd1fdd28ff823995c5725ea Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Wed, 13 May 2020 03:34:18 +0530
Subject: [PATCH] implement view mark and report card

---
 src/pages/Mark/viewMark.vue             | 130 +++++++++++++++++++-----
 src/pages/Report/progressCardReport.vue | 173 ++++++++++++++------------------
 2 files changed, 180 insertions(+), 123 deletions(-)

diff --git a/src/pages/Mark/viewMark.vue b/src/pages/Mark/viewMark.vue
index f2ae188..ae330af 100644
--- a/src/pages/Mark/viewMark.vue
+++ b/src/pages/Mark/viewMark.vue
@@ -39,52 +39,57 @@
                 </v-flex>
               </v-layout>
               <v-layout wrap>
-                <v-flex xs12 sm12 md12 class="text-xs-center">
-                  <v-card class="student-card" xs6 sm6 md6>
-                    <v-avatar style="padding-top: 8%">
-                      <img src="/static/icon/user.png" v-if="!markData[0].studentId.profilePicUrl" />
-                      <img
-                        :src="markData[0].studentId.profilePicUrl"
-                        v-else-if="markData[0].studentId.profilePicUrl"
-                      />
-                    </v-avatar>
-                    <v-layout style=" padding-top: 8%">
-                      <v-flex xs6 sm6 class="pa-0">
+                <v-flex xs12 sm12 md4>
+                  <v-card>
+                    <v-layout class="py-4">
+                      <v-avatar class="mx-auto" size="70">
+                        <img
+                          src="/static/icon/user.png"
+                          v-if="!markData[0].studentId.profilePicUrl"
+                        />
+                        <img
+                          :src="markData[0].studentId.profilePicUrl"
+                          v-else-if="markData[0].studentId.profilePicUrl"
+                        />
+                      </v-avatar>
+                    </v-layout>
+                    <v-layout class="pa-2">
+                      <v-flex xs6 sm6>
                         <h4 class="right">
                           <b>Name :</b>
                         </h4>
                       </v-flex>
-                      <v-flex sm6 xs6 class="pa-0">
+                      <v-flex sm6 xs6>
                         <h4>{{ markData[0].studentId.name }}</h4>
                       </v-flex>
                     </v-layout>
-                    <v-layout style=" padding-top: 8%">
-                      <v-flex xs6 sm6 class="pa-0">
+                    <v-layout class="pa-2">
+                      <v-flex xs6 sm6>
                         <h4 class="right">
                           <b>Class :</b>
                         </h4>
                       </v-flex>
-                      <v-flex sm6 xs6 class="pa-0">
+                      <v-flex sm6 xs6>
                         <h4>{{ markData[0].classId.classNum }}</h4>
                       </v-flex>
                     </v-layout>
-                    <v-layout style=" padding-top: 8%">
-                      <v-flex xs6 sm6 class="pa-0">
+                    <v-layout class="pa-2">
+                      <v-flex xs6 sm6>
                         <h4 class="right">
                           <b>Section :</b>
                         </h4>
                       </v-flex>
-                      <v-flex sm6 xs6 class="pa-0">
+                      <v-flex sm6 xs6>
                         <h4>{{ markData[0].sectionId.name }}</h4>
                       </v-flex>
                     </v-layout>
-                    <v-layout style=" padding-top: 8%">
-                      <v-flex xs6 sm6 class="pa-0">
+                    <v-layout class="pa-2">
+                      <v-flex xs6 sm6>
                         <h4 class="right">
                           <b>Roll No :</b>
                         </h4>
                       </v-flex>
-                      <v-flex sm6 xs6 class="pa-0">
+                      <v-flex sm6 xs6>
                         <h4>{{ markData[0].studentId.rollNo }}</h4>
                       </v-flex>
                     </v-layout>
@@ -99,9 +104,11 @@
                     >Section : {{ markData[0].sectionId.name }}</p>
                     <p
                       style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                    >Roll No : {{ markData[0].studentId.rollNo }}</p> -->
+                    >Roll No : {{ markData[0].studentId.rollNo }}</p>-->
                   </v-card>
-                  <v-card class="student-table" xs6 sm6 md6>
+                </v-flex>
+                <v-flex xs12 sm12 md8 v-show="showMark">
+                  <v-card>
                     <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
                     <table
                       v-for="(value, id) in filterData"
@@ -113,21 +120,33 @@
                       width: 100% !important;
                       overflow: hidden;"
                     >
-                      <thead style="border: 1px solid lightgrey !important;">
-                        <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
-
+                      <thead style="border: 1px solid transparent !important;">
+                        <!-- <tr>
+                          <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
+                        </tr>-->
+                        <!-- <tr style="border: 1px solid transparent !important"> -->
+                        <td
+                          colspan="4"
+                          style="text-align: inherit !important;
+                                border-right: inherit;
+                                border-top: inherit;
+                                padding:14px;"
+                        >{{value[0].examId.examName}}</td>
+                        <!-- </tr>   -->
                         <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">
+                          <template v-for="(studentData,ind) in  value">
                             <td
+                              v-if="ind == 0"
                               colspan="2"
                               v-for="studentMark in studentData.studentsMarks"
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{studentMark.markDistributionId.distributionType}}</td>
                             <td
+                              v-if="ind == 0"
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Total Marks</td>
                           </template>
@@ -169,6 +188,63 @@
                     </table>
                   </v-card>
                 </v-flex>
+                <!-- ****** TABLE GRADE MARK  ****** -->
+                <v-flex xs12 sm12 md8 v-show="showGrade">
+                  <!-- <v-card class="fixcolors white--text" flat>
+                    <v-card-actions class="pa-0">
+                      <v-spacer></v-spacer>
+                      <v-card-title class="pa-2">
+                        <h3>Mark</h3>
+                      </v-card-title>
+                      <v-spacer></v-spacer>
+                    </v-card-actions>
+                  </v-card> -->
+                  <v-card
+                    v-for="(value, id, index) in filterData"
+                    :key="index"
+                    flat
+                    style="border: 1px solid lightgrey;margin-bottom:14px;"
+                  >
+                    <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
+                          class="info white--text"
+                          style="border: 1px solid lightgrey !important;padding:4px;"
+                        >
+                          <td style="border: 1px solid lightgrey !important;padding: 10px;">Subject</td>
+                          <td style="border: 1px solid lightgrey !important;padding: 10px;">Grade</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>
+                          <td
+                            style="border: 1px solid lightgrey !important;padding: 10px;"
+                          >{{ subject.grade }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </v-card>
+                  <v-card v-if="markData == ''">
+                    <v-layout>
+                      <v-flex xs12>
+                        <h5 class="text-xs-center pa-3">No Data Found</h5>
+                      </v-flex>
+                    </v-layout>
+                  </v-card>
+                </v-flex>
               </v-layout>
             </v-card>
           </v-flex>
diff --git a/src/pages/Report/progressCardReport.vue b/src/pages/Report/progressCardReport.vue
index 2324c5a..386c735 100644
--- a/src/pages/Report/progressCardReport.vue
+++ b/src/pages/Report/progressCardReport.vue
@@ -76,10 +76,11 @@
         </v-flex>
       </v-form>
     </v-card>
+
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
-          <v-container grid-list-md v-show="showReport" class="report">
+          <v-container grid-list-md class="report">
             <v-flex xs12 sm12 id="printMe">
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
@@ -93,14 +94,11 @@
                     </v-flex>
                   </v-layout>
                   <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
-                    <!-- Index Loop Start -->
+                    <!-- {{value}}---{{id}}---{{index}} -->
                     <v-card
-                      v-for="(studentMark,i) in value"
-                      :key="i"
-                      class="pa-3 ma-3"
+                      class="ma-3"
                       style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                     >
-                      <!-- Profile School -->
                       <v-layout>
                         <v-flex xs12 sm12 md12>
                           <div>
@@ -121,8 +119,9 @@
                             style="border:1px solid #ddd;
                           overflow: hidden;
                           vertical-align: middle;
-                          margin-bottom: 4px;"
+                          margin: 10px; 0px;"
                           />
+                          <!-- Profile School -->
                           <div class="school-info">
                             <v-layout>
                               <v-flex xs5 class="pl-3">
@@ -139,47 +138,57 @@
                               </v-flex>
                               <!-- Profile Student Report Card-->
                               <v-flex xs5>
-                                <div v-if="cardData !=''">
-                                  <p style="font-size:20px;">{{ studentMark.studentId.name }}</p>
+                                <div v-for="(studentMark,i,index) in value" :key="index">
+                                  <p
+                                    v-if="index == 0"
+                                    style="font-size:20px;"
+                                  >{{ studentMark[0].studentId.name }}</p>
                                   <p
+                                    v-if="index == 0"
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Class :
-                                    <b>{{ studentMark.classId.classNum }}</b>
+                                    <b>{{ studentMark[0].classId.classNum }}</b>
                                   </p>
                                   <p
+                                    v-if="index == 0"
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Section :
-                                    <b>{{ studentMark.sectionId.name }}</b>
+                                    <b>{{ studentMark[0].sectionId.name }}</b>
                                   </p>
                                   <p
+                                    v-if="index == 0"
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Roll NO :
-                                    <b>{{ studentMark.studentId.rollNo }}</b>
+                                    <b>{{ studentMark[0].studentId.rollNo }}</b>
                                   </p>
                                 </div>
                               </v-flex>
                               <v-flex xs2>
-                                <v-avatar size="100" style="padding-top:20px">
-                                  <img
-                                    src="/static/icon/user.png"
-                                    v-if="!studentMark.studentId.profilePicUrl"
-                                  />
-                                  <img
-                                    :src="studentMark.studentId.profilePicUrl"
-                                    v-else-if="studentMark.studentId.profilePicUrl"
-                                  />
-                                </v-avatar>
+                                <div v-for="(studentMark,i,index) in value" :key="index">
+                                  <v-avatar size="100" style="padding-top:20px" v-if="index == 0">
+                                    <img
+                                      src="/static/icon/user.png"
+                                      v-if="!studentMark[0].studentId.profilePicUrl"
+                                    />
+                                    <img
+                                      :src="studentMark[0].studentId.profilePicUrl"
+                                      v-else-if="studentMark[0].studentId.profilePicUrl"
+                                    />
+                                  </v-avatar>
+                                </div>
                               </v-flex>
                             </v-layout>
                           </div>
                         </v-flex>
                       </v-layout>
-                      <!-- Start Table Report Marks -->
-                      <v-card class="student-table">
+                      <v-card v-for="studentMarks in value" :key="studentMarks" class="my-4">
+                        <!-- {{studentMark}} -->
                         <table
+                          v-for="(studentMark,key) in studentMarks"
+                          :key="key"
                           class="mb-5 tableRsponsive feeTypeTable subheading"
                           style="border: 1px solid black;
                           border-collapse: collapse;!important
@@ -187,7 +196,7 @@
                           width: 100% !important;
                           overflow: hidden;"
                         >
-                          <thead style="border: 1px solid transparent !important">
+                          <thead style="border: 1px solid transparent !important" v-if="key == 0">
                             <tr style="border: 1px solid transparent !important">
                               <td
                                 colspan="4"
@@ -227,8 +236,9 @@
                               </template>
                             </tr>
                           </thead>
-                          <tbody style="border: 1px solid lightgrey !important;">
-                            <tr>
+                          <tbody style="border: 1px solid lightgrey !important;" v-if="key == 0">
+                            <tr v-for="studentMark in studentMarks" :key="studentMark">
+                              <!-- {{studentMark.totalMarks}} -->
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{studentMark.subjectName}}</td>
@@ -247,7 +257,7 @@
                               >{{studentMark.totalMarks}}</td>
                             </tr>
                           </tbody>
-                          <tfoot>
+                          <tfoot v-if="key == 0">
                             <tr style="border: 1px solid lightgrey !important;">
                               <td
                                 colspan="5"
@@ -404,49 +414,8 @@ export default {
         });
     },
     getMarkReportList() {
-      // this.showLoader = true;
+      this.showLoader = true;
       this.showReport = true;
-      // http()
-      //   .get("/getParticularMark", {
-      //     params: { studentId: this.getReport.studentId },
-      //     headers: { Authorization: "Bearer " + this.token }
-      //   })
-      //   .then(response => {
-      //     this.showLoader = false;
-      //     this.cardData = response.data.data;
-      //     let newData = response.data.data;
-      //     for (var i = 0; i < newData.length; i++) {
-      //       newData[i].examination = newData[i].examId._id;
-      //     }
-      //     this.filterData = _.groupBy(newData, ["examination"]);
-      //     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++
-      //         ) {
-      //           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);
-      //       }
-      //     }
-      //   })
-      // console.log(
-      //   "getReport.classId",
-      //   this.getReport.classId,
-      //   "getReport.sectionId",
-      //   this.getReport.sectionId,
-      //   "getReport.studentId",
-      //   this.getReport.studentId
-      // );
-
       var getSelectMarks = {};
       if (this.getReport.studentId == "Select All") {
         getSelectMarks = {
@@ -468,41 +437,53 @@ export default {
         .then(response => {
           this.cardData = 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;
+            newData[i].studentsId = newData[i].studentId._id;
+          }
+          var studentMarkArray = [];
+          studentMarkArray = _.groupBy(newData, ["studentsId"]);
+          for (let data in studentMarkArray) {
+            studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
+              "examination"
+            ]);
           }
-          this.filterData = _.groupBy(newData, ["examination"]);
-          // console.log("this.filterData", this.filterData);
+          this.filterData = studentMarkArray;
           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++
-              ) {
-                totalMarks += this.filterData[data][item].studentsMarks[i]
-                  .marksScored;
-              }
-              this.filterData[data][item].totalMarks = totalMarks;
-              console.log("totalMarks", totalMarks);
-              this.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;
+
+              for (let i = 0; i < this.filterData[data][item].length; i++) {
+                for (
+                  let j = 0;
+                  j < studentMarkArray[data][item][i].studentsMarks.length;
+                  j++
+                ) {
+                  totalMarks +=
+                    studentMarkArray[data][item][i].studentsMarks[j]
+                      .marksScored;
+                  console.log("totalMarks", totalMarks);
+                }
+                this.filterData[data][item][i].totalMarks = totalMarks;
               }
+              // this.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;
+              // }
             }
           }
+          console.log("this.filterData-----------last", this.filterData);
+
           this.showLoader = false;
         })
         .catch(error => {
-- 
2.0.0