From bdaae72ca0ebc92973237fbd856d44db1eb2ca61 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Wed, 13 May 2020 17:26:02 +0530
Subject: [PATCH] complete task of reports card and view mark

---
 src/pages/Mark/viewMark.vue             | 399 +++++++++++++++-----------------
 src/pages/Report/progressCardReport.vue | 244 ++++++++++---------
 2 files changed, 315 insertions(+), 328 deletions(-)

diff --git a/src/pages/Mark/viewMark.vue b/src/pages/Mark/viewMark.vue
index ae330af..8db4d32 100644
--- a/src/pages/Mark/viewMark.vue
+++ b/src/pages/Mark/viewMark.vue
@@ -20,80 +20,76 @@
         </v-flex>
       </v-layout>
       <v-flex xs12 sm12 id="printMe">
-        <v-layout wrap>
-          <!-- ****** TABLE DATA MARK  ****** -->
-          <v-flex xs12 sm12 md12>
-            <v-card 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" /> -->
-                  <v-avatar>
-                    <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
+        <!-- <v-layout wrap> -->
+        <!-- ****** TABLE DATA MARK  ****** -->
+        <v-flex xs12 sm12 md12>
+          <v-layout>
+            <v-flex xs12 sm12 md12 class="text-xs-center">
+              <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
+              <v-avatar>
+                <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
+                <img
+                  src="/static/schoolIcons/INTRACK_White.png"
+                  v-else-if="!userData.schoolLogoUrl"
+                />
+              </v-avatar>
+              <p class="title">{{ userData.name }}</p>
+              <p>{{ userData.address }}</p>
+            </v-flex>
+          </v-layout>
+          <v-layout wrap>
+            <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="/static/schoolIcons/INTRACK_White.png"
-                      v-else-if="!userData.schoolLogoUrl"
+                      :src="markData[0].studentId.profilePicUrl"
+                      v-else-if="markData[0].studentId.profilePicUrl"
                     />
                   </v-avatar>
-                  <p class="title">{{ userData.name }}</p>
-                  <p>{{ userData.address }}</p>
-                </v-flex>
-              </v-layout>
-              <v-layout wrap>
-                <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>
-                        <h4>{{ markData[0].studentId.name }}</h4>
-                      </v-flex>
-                    </v-layout>
-                    <v-layout class="pa-2">
-                      <v-flex xs6 sm6>
-                        <h4 class="right">
-                          <b>Class :</b>
-                        </h4>
-                      </v-flex>
-                      <v-flex sm6 xs6>
-                        <h4>{{ markData[0].classId.classNum }}</h4>
-                      </v-flex>
-                    </v-layout>
-                    <v-layout class="pa-2">
-                      <v-flex xs6 sm6>
-                        <h4 class="right">
-                          <b>Section :</b>
-                        </h4>
-                      </v-flex>
-                      <v-flex sm6 xs6>
-                        <h4>{{ markData[0].sectionId.name }}</h4>
-                      </v-flex>
-                    </v-layout>
-                    <v-layout class="pa-2">
-                      <v-flex xs6 sm6>
-                        <h4 class="right">
-                          <b>Roll No :</b>
-                        </h4>
-                      </v-flex>
-                      <v-flex sm6 xs6>
-                        <h4>{{ markData[0].studentId.rollNo }}</h4>
-                      </v-flex>
-                    </v-layout>
-                    <!-- <p
+                </v-layout>
+                <v-layout class="pa-2">
+                  <v-flex xs6 sm6>
+                    <h4 class="right">
+                      <b>Name :</b>
+                    </h4>
+                  </v-flex>
+                  <v-flex sm6 xs6>
+                    <h4>{{ markData[0].studentId.name }}</h4>
+                  </v-flex>
+                </v-layout>
+                <v-layout class="pa-2">
+                  <v-flex xs6 sm6>
+                    <h4 class="right">
+                      <b>Class :</b>
+                    </h4>
+                  </v-flex>
+                  <v-flex sm6 xs6>
+                    <h4>{{ markData[0].classId.classNum }}</h4>
+                  </v-flex>
+                </v-layout>
+                <v-layout class="pa-2">
+                  <v-flex xs6 sm6>
+                    <h4 class="right">
+                      <b>Section :</b>
+                    </h4>
+                  </v-flex>
+                  <v-flex sm6 xs6>
+                    <h4>{{ markData[0].sectionId.name }}</h4>
+                  </v-flex>
+                </v-layout>
+                <v-layout class="pa-2">
+                  <v-flex xs6 sm6>
+                    <h4 class="right">
+                      <b>Roll No :</b>
+                    </h4>
+                  </v-flex>
+                  <v-flex sm6 xs6>
+                    <h4>{{ markData[0].studentId.rollNo }}</h4>
+                  </v-flex>
+                </v-layout>
+                <!-- <p
                       style="font-size:20px;margin:0px;margin-bottom:4px;"
                     >{{ markData[0].studentId.name }}</p>
                     <p
@@ -104,151 +100,136 @@
                     >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>-->
-                  </v-card>
-                </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"
-                      :key="id"
-                      class="mb-5 tableRsponsive feeTypeTable subheading"
-                      style="border: 1px solid black;
+                >Roll No : {{ markData[0].studentId.rollNo }}</p>-->
+              </v-card>
+            </v-flex>
+            <v-flex xs12 sm12 md8 v-show="showMark">
+              <v-card>
+                <div style="overflow-x:auto;">
+                  <table
+                    v-for="(value, id) in filterData"
+                    :key="id"
+                    class="mb-5 tableRsponsive feeTypeTable subheading"
+                    style="border: 1px solid black;
                       border-collapse: collapse;!important
                       table-layout: auto !important;
-                      width: 100% !important;
-                      overflow: hidden;"
-                    >
-                      <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;
+                      width: 100% !important;"
+                  >
+                    <thead 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;">
+                      >{{value[0].examId.examName}}</td>
+                      <!-- </tr>   -->
+                      <tr style="border: 1px solid lightgrey !important;">
+                        <td
+                          rowspan="2"
+                          style="border: 1px solid lightgrey !important;;padding:4px; text-align: left;"
+                        >Subject</td>
+                        <template v-for="(studentData,ind) in  value">
                           <td
-                            rowspan="2"
-                            style="border: 1px solid lightgrey !important;padding: 10px;"
-                          >Subject</td>
-                          <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>
-                        </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;">Marks</td>
-                            <td
-                              style="border: 1px solid lightgrey !important;padding: 10px;"
-                            >Highest Marks</td>
-                          </template>
-                        </tr>
-                      </thead>
-                      <tbody style="border: 1px solid lightgrey !important;">
-                        <tr
-                          v-for="subject in value"
-                          style="border: 1px solid lightgrey !important;"
-                        >
+                            v-if="ind == 0"
+                            colspan="2"
+                            v-for="studentMark in studentData.studentsMarks"
+                            style="border: 1px solid lightgrey !important;padding:10px; text-align: left;"
+                          >{{studentMark.markDistributionId.distributionType}}</td>
                           <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>
+                            v-if="ind == 0"
+                            style="border: 1px solid lightgrey !important text-align: left;"
+                          >Total Marks</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;"
-                          >{{subject.totalMarks}}</td>
-                        </tr>
-                      </tbody>
-                    </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;
+                            style="border: 1px solid lightgrey !important;padding: 10px; text-align: left;"
+                          >Marks</td>
+                          <td
+                            style="border: 1px solid lightgrey !important;padding: 10px; text-align: left;"
+                          >Highest Marks</td>
+                        </template>
+                      </tr>
+                    </thead>
+                    <tbody style="border: 1px solid lightgrey !important;">
+                      <tr
+                        v-for="subject in value"
+                        style="border: 1px solid lightgrey !important;"
+                        class="tr"
+                      >
+                        <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; text-align: left;"
+                          >{{exam.marksScored}}</td>
+                          <td
+                            style="border: 1px solid lightgrey !important;padding: 10px; text-align: left;"
+                          >{{exam.markDistributionId.markValue}}</td>
+                        </template>
+                        <td
+                          style="border: 1px solid lightgrey !important;padding: 10px; text-align: left;"
+                        >{{subject.totalMarks}}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </v-card>
+            </v-flex>
+            <!-- ****** TABLE GRADE MARK  ****** -->
+            <v-flex xs12 sm12 md8 v-show="showGrade">
+              <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;"
                     >
-                      <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>
-        </v-layout>
+                      <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-flex>
       </v-flex>
     </v-container>
     <div class="loader" v-if="showLoader">
@@ -382,15 +363,6 @@ export default {
 </script>
 
 <style scoped>
-.student-card {
-  float: left;
-  width: 20%;
-  height: 70%;
-}
-.student-table {
-  margin-left: 28%;
-  height: -webkit-fill-available;
-}
 .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
@@ -442,6 +414,7 @@ table.feeTypeTable {
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
 }
+/* .tr:nth-child(odd){background-color: #f2f2f2} */
 
 .loader > div {
   position: relative;
diff --git a/src/pages/Report/progressCardReport.vue b/src/pages/Report/progressCardReport.vue
index 386c735..cd26639 100644
--- a/src/pages/Report/progressCardReport.vue
+++ b/src/pages/Report/progressCardReport.vue
@@ -93,7 +93,7 @@
                       </v-btn>
                     </v-flex>
                   </v-layout>
-                  <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
+                  <v-flex xs12 v-for="(value, id, Index) in filterData" :key="Index" flat>
                     <!-- {{value}}---{{id}}---{{index}} -->
                     <v-card
                       class="ma-3"
@@ -184,118 +184,126 @@
                           </div>
                         </v-flex>
                       </v-layout>
-                      <v-card v-for="studentMarks in value" :key="studentMarks" class="my-4">
+                      <v-card
+                        v-for="studentMarks in value"
+                        :key="studentMarks"
+                        class="my-4 elevation-0"
+                      >
                         <!-- {{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
-                          table-layout: auto !important;
-                          width: 100% !important;
-                          overflow: hidden;"
+                        <div
+                          style="overflow-x:auto;    
+                        border: 1px solid lightgrey !important;"
                         >
-                          <thead style="border: 1px solid transparent !important" v-if="key == 0">
-                            <tr style="border: 1px solid transparent !important">
-                              <td
-                                colspan="4"
-                                style="text-align: inherit !important;
-                                border-right: inherit;
-                                border-top: inherit;
-                                padding:14px;"
-                              >{{studentMark.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>
+                          <table
+                            v-for="(studentMark,key) in studentMarks"
+                            :key="key"
+                            class="tableRsponsive feeTypeTable subheading"
+                            style="border: 1px solid black;
+                             border-collapse: collapse;!important
+                             table-layout: auto !important;
+                             width: 100% !important;
+                             overflow: hidden;"
+                          >
+                            <thead style="border: 1px solid transparent !important" v-if="key == 0">
+                              <tr style="border: 1px solid transparent !important">
+                                <td
+                                  colspan="4"
+                                  style="text-align: inherit !important;
+                                    border-right: inherit;
+                                    border-top: inherit;
+                                    padding:14px;"
+                                >{{studentMark.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>
+                                  <td
+                                    v-for="(studentMarkData,i) in studentMark.studentsMarks"
+                                    :key="i"
+                                    colspan="2"
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >{{studentMarkData.markDistributionId.distributionType}}</td>
+                                  <td
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >Total Marks</td>
+                                </template>
+                              </tr>
+                              <tr style="border: 1px solid lightgrey !important;">
+                                <template v-for="(exam, ind) in studentMark.studentsMarks">
+                                  <td
+                                    :key="ind"
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >Marks</td>
+                                  <td
+                                    :key="ind"
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >Highest Marks</td>
+                                </template>
+                              </tr>
+                            </thead>
+                            <tbody style="border: 1px solid lightgrey !important;" v-if="key == 0">
+                              <tr v-for="studentMark in studentMarks" :key="studentMark">
                                 <td
-                                  v-for="(studentMarkData,i) in studentMark.studentsMarks"
-                                  :key="i"
-                                  colspan="2"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
-                                >{{studentMarkData.markDistributionId.distributionType}}</td>
+                                >{{studentMark.subjectName}}</td>
+                                <template v-for="(exam, index) in  studentMark.studentsMarks">
+                                  <td
+                                    :key="index"
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >{{exam.marksScored}}</td>
+                                  <td
+                                    :key="index"
+                                    style="border: 1px solid lightgrey !important;padding: 10px;"
+                                  >{{exam.markDistributionId.markValue}}</td>
+                                </template>
                                 <td
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
+                                >{{studentMark.totalMarks}}</td>
+                              </tr>
+                            </tbody>
+                            <tfoot v-if="key == studentMarks.length - 1">
+                              <tr style="border: 1px solid lightgrey !important;">
+                                <td
+                                  colspan="5"
+                                  style="text-align:center"
+                                  class="subheding"
                                 >Total Marks</td>
-                              </template>
-                            </tr>
-                            <tr style="border: 1px solid lightgrey !important;">
-                              <template v-for="(exam, ind) in studentMark.studentsMarks">
                                 <td
-                                  :key="ind"
+                                  colspan="7"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
-                                >Marks</td>
+                                >{{ studentMark.allSubjectTotalMarks }}</td>
+                              </tr>
+                              <tr>
+                                <td colspan="5" style="text-align:center" class="subheding">Grade</td>
                                 <td
-                                  :key="ind"
+                                  colspan="7"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
-                                >Highest Marks</td>
-                              </template>
-                            </tr>
-                          </thead>
-                          <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>
-                              <template v-for="(exam, index) in  studentMark.studentsMarks">
+                                >{{ studentMark.grade }}</td>
+                              </tr>
+                              <tr>
+                                <td
+                                  colspan="5"
+                                  style="text-align:center"
+                                  class="subheding"
+                                >Average Mark</td>
                                 <td
-                                  :key="index"
+                                  colspan="7"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
-                                >{{exam.marksScored}}</td>
+                                ></td>
+                              </tr>
+                              <tr>
+                                <td colspan="5" style="text-align:center" class="subheding">GPA</td>
                                 <td
-                                  :key="index"
+                                  colspan="7"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
-                                >{{exam.markDistributionId.markValue}}</td>
-                              </template>
-                              <td
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >{{studentMark.totalMarks}}</td>
-                            </tr>
-                          </tbody>
-                          <tfoot v-if="key == 0">
-                            <tr style="border: 1px solid lightgrey !important;">
-                              <td
-                                colspan="5"
-                                style="text-align:center"
-                                class="subheding"
-                              >Total Marks</td>
-                              <td
-                                colspan="7"
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >{{ studentMark.totalMarks }}</td>
-                            </tr>
-                            <tr>
-                              <td colspan="5" style="text-align:center" class="subheding">Grade</td>
-                              <td
-                                colspan="7"
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                              >{{ studentMark.grade }}</td>
-                            </tr>
-                            <tr>
-                              <td
-                                colspan="5"
-                                style="text-align:center"
-                                class="subheding"
-                              >Average Mark</td>
-                              <td
-                                colspan="7"
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                              ></td>
-                            </tr>
-                            <tr>
-                              <td colspan="5" style="text-align:center" class="subheding">GPA</td>
-                              <td
-                                colspan="7"
-                                style="border: 1px solid lightgrey !important;padding: 10px;"
-                              ></td>
-                            </tr>
-                          </tfoot>
-                        </table>
+                                ></td>
+                              </tr>
+                            </tfoot>
+                          </table>
+                        </div>
                       </v-card>
                     </v-card>
                   </v-flex>
@@ -451,9 +459,9 @@ export default {
           this.filterData = studentMarkArray;
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
-              var totalMarks = 0;
-
+              var allSubjectTotalMarks = 0;
               for (let i = 0; i < this.filterData[data][item].length; i++) {
+                var totalMarks = 0;
                 for (
                   let j = 0;
                   j < studentMarkArray[data][item][i].studentsMarks.length;
@@ -462,27 +470,33 @@ export default {
                   totalMarks +=
                     studentMarkArray[data][item][i].studentsMarks[j]
                       .marksScored;
-                  console.log("totalMarks", totalMarks);
                 }
                 this.filterData[data][item][i].totalMarks = totalMarks;
+
+                allSubjectTotalMarks += this.filterData[data][item][i]
+                  .totalMarks;
+                this.filterData[data][item][
+                  i
+                ].allSubjectTotalMarks = allSubjectTotalMarks;
               }
+
               // 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;
-              // }
+              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);
+          // console.log("this.filterData-----------last", this.filterData);
 
           this.showLoader = false;
         })
-- 
2.0.0