From d4735dce7c40b88084c8e084563421b6702d7b3b Mon Sep 17 00:00:00 2001
From: shikha <shikha.mishra@viithiisys.com>
Date: Mon, 10 Feb 2020 13:27:51 +0530
Subject: [PATCH] show school logo and name while printing the report

---
 src/pages/Library/member.vue            | 142 ++++++++--------
 src/pages/Mark/viewMark.vue             |  52 ++----
 src/pages/Report/progressCardReport.vue | 291 ++++++++++++++++----------------
 3 files changed, 241 insertions(+), 244 deletions(-)

diff --git a/src/pages/Library/member.vue b/src/pages/Library/member.vue
index 211392d..f795cb1 100644
--- a/src/pages/Library/member.vue
+++ b/src/pages/Library/member.vue
@@ -490,75 +490,79 @@
         </v-flex>
       </v-card-actions>
     </v-card>
-    <v-data-table
-      :headers="headers"
-      :items="studentData"
-      :pagination.sync="pagination"
-      :search="search"
-    >
-      <template slot="items" slot-scope="props">
-        <td id="td" class="text-xs-center">{{ props.index}}</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 id="td" class="text-xs-center">{{ props.item.name}}</td>
-        <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.email }}</td>
-        <td class="text-xs-center">
-          <v-tooltip top>
-            <img
-              slot="activator"
-              v-if="!props.item.libraryId"
-              style="cursor:pointer; width:25px; height:18px; "
-              @click="addLibraryData(props.item)"
-              src="/static/icon/add.png"
-            />
-            <span>Add</span>
-          </v-tooltip>
-          <span v-if="props.item.libraryId">
-            <v-tooltip top>
-              <img
-                slot="activator"
-                style="cursor:pointer; width:25px; height:18px; "
-                class="mr5"
-                @click="profile(props.item)"
-                src="/static/icon/eye1.png"
-              />
-              <span>View</span>
-            </v-tooltip>
-            <v-tooltip top>
-              <img
-                slot="activator"
-                style="cursor:pointer; width:20px; height:18px; "
-                class="mr5"
-                @click="editItem(props.item)"
-                src="/static/icon/edit1.png"
-              />
-              <span>Edit</span>
-            </v-tooltip>
-            <v-tooltip top>
-              <img
-                slot="activator"
-                style="cursor:pointer; width:20px; height:20px; "
-                class="mr5"
-                @click="deleteItem(props.item)"
-                src="/static/icon/delete1.png"
-              />
-              <span>Delete</span>
-            </v-tooltip>
-          </span>
-        </td>
-      </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 class="transparent">
+      <v-data-table
+        :headers="headers"
+        :items="studentData"
+        :pagination.sync="pagination"
+        :search="search"
+      >
+        <template slot="items" slot-scope="props">
+          <tr class="tr">
+            <td class="td td-row text-xs-center">{{ props.index}}</td>
+            <td class="td td-row 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">
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  v-if="!props.item.libraryId"
+                  style="cursor:pointer; width:25px; height:18px; "
+                  @click="addLibraryData(props.item)"
+                  src="/static/icon/add.png"
+                />
+                <span>Add</span>
+              </v-tooltip>
+              <span v-if="props.item.libraryId">
+                <v-tooltip top>
+                  <img
+                    slot="activator"
+                    style="cursor:pointer; width:25px; height:18px; "
+                    class="mr5"
+                    @click="profile(props.item)"
+                    src="/static/icon/eye1.png"
+                  />
+                  <span>View</span>
+                </v-tooltip>
+                <v-tooltip top>
+                  <img
+                    slot="activator"
+                    style="cursor:pointer; width:20px; height:18px; "
+                    class="mr5"
+                    @click="editItem(props.item)"
+                    src="/static/icon/edit1.png"
+                  />
+                  <span>Edit</span>
+                </v-tooltip>
+                <v-tooltip top>
+                  <img
+                    slot="activator"
+                    style="cursor:pointer; width:20px; height:20px; "
+                    class="mr5"
+                    @click="deleteItem(props.item)"
+                    src="/static/icon/delete1.png"
+                  />
+                  <span>Delete</span>
+                </v-tooltip>
+              </span>
+            </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>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
diff --git a/src/pages/Mark/viewMark.vue b/src/pages/Mark/viewMark.vue
index 3fca9e1..564da5a 100644
--- a/src/pages/Mark/viewMark.vue
+++ b/src/pages/Mark/viewMark.vue
@@ -29,27 +29,23 @@
               flat
               style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
             >
-              <v-layout v-if="index === 0">
-                <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important">
-                  <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" />
-                  <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" />
+              <!-- <v-layout>
+                <v-flex xs12>
+                  <v-btn class="add-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 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-layout>
               <v-layout style="padding-top:10px" v-if="index === 0">
                 <v-flex xs5>
-                  <p style="margin:0px;margin-bottom:4px">
-                    <span style="font-size:20px">{{ userData.name }}</span>
-                    <br />
-                    <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
-                  </p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >phone : {{ userData.mobile }}</p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Email : {{ userData.email }}</p>
-                </v-flex>
-                <v-flex xs5>
                   <p
                     style="font-size:20px;margin:0px;margin-bottom:4px;"
                   >{{ value[0].studentId.name }}</p>
@@ -85,9 +81,7 @@
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;
-                  overflow: hidden; 
-                  display: block;"
-                  
+                 "
               >
                 <thead style="border: 1px solid lightgrey !important;">
                   <tr style="border: 1px solid lightgrey !important;padding:4px;">
@@ -110,19 +104,10 @@
                     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>
+                      <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>
+                    <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                   </tr>
                 </thead>
                 <tbody style="border: 1px solid lightgrey !important;">
@@ -182,7 +167,6 @@ export default {
     selectMark: ["Mark", "Grade"],
     MarkData: "",
     userData: {}
-
   }),
   mounted() {
     this.token = this.$store.state.token;
@@ -339,7 +323,7 @@ table.feeTypeTable {
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
-    display: block;
+    /* display: block; */
     position: relative;
     overflow: scroll;
   }
diff --git a/src/pages/Report/progressCardReport.vue b/src/pages/Report/progressCardReport.vue
index 9be5128..6841574 100644
--- a/src/pages/Report/progressCardReport.vue
+++ b/src/pages/Report/progressCardReport.vue
@@ -63,151 +63,157 @@
                 </v-flex>
               </v-layout>
             </v-flex>
-            <v-flex xs12 sm12 lg3>
+            <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
-                class="right mt-3"
+                class="open-dialog-button mt-3 ml-5"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
-    <v-container grid-list-md v-show="showReport">
-      <!-- {{ filterData }} -->
-      <v-layout>
+    <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-layout>
+            <v-flex xs12 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-layout>
+          <!-- </v-card>
+      </v-flex>
+          </v-layout>-->
+          <v-container grid-list-md v-show="showReport">
+            <!-- {{ filterData }} -->
+            <!-- <v-layout>
         <v-flex xs12 sm12 v-if="filterData != {}">
-          <v-btn class="add-button" round dark @click="print()">
+          <v-btn class="add-button right" round dark @click="printProgressReport()">
             Print
             <v-icon right dark>print</v-icon>
           </v-btn>
         </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-if="index === 0">
-                <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important">
-                  <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" />
-                  <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" />
-                </v-flex>
-              </v-layout>
-              <v-layout style="padding-top:10px" v-if="index === 0">
-                <v-flex xs5>
-                  <p style="margin:0px;margin-bottom:4px">
-                    <span style="font-size:20px">{{ userData.name }}</span>
-                    <br />
-                    <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
-                  </p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >phone : {{ userData.mobile }}</p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Email : {{ userData.email }}</p>
-                </v-flex>
-                <v-flex xs5>
-                  <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>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Section : {{ value[0].sectionId.name }}</p>
-                </v-flex>
-                <v-flex xs2>
-                  <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>
-                </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;
-                  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">
-                      <td
-                        colspan="2"
-                        v-for="studentMark in studentData.studentsMarks"
-                      >{{ studentMark.markDistributionId.distributionType }}</td>
-                    </template>
-                    <!-- <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;"
+            </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"
                   >
-                    <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>
+                    <v-layout style="padding-top:10px" v-if="index === 0">
+                      <v-flex xs5>
+                        <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>
+                        <p
+                          style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                        >Section : {{ value[0].sectionId.name }}</p>
+                      </v-flex>
+                      <v-flex xs2>
+                        <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>
+                      </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;
+                        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">
+                            <td
+                              colspan="2"
+                              v-for="studentMark in studentData.studentsMarks"
+                            >{{ studentMark.markDistributionId.distributionType }}</td>
+                          </template>
+                          <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>
@@ -226,13 +232,16 @@
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                   </tr>
-                </tfoot>-->
-              </table>
-            </v-card>
-          </v-flex>
-        </v-layout>
+                      </tfoot>-->
+                    </table>
+                  </v-card>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+          </v-container>
+        </v-card>
       </v-flex>
-    </v-container>
+    </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
@@ -349,11 +358,11 @@ export default {
             // console.log("data+++++++++++++++++++++++++++++++++++", data);
 
             for (let item in this.filterData[data]) {
-              console.log(
-                "filterData[data]==========================>",
-                this.filterData[data]
-              );
-              console.log("filterData[item]==========================>", item);
+              // console.log(
+              //   "filterData[data]==========================>",
+              //   this.filterData[data]
+              // );
+              // console.log("filterData[item]==========================>", item);
               var totalMarks = 0;
               for (
                 let i = 0;
@@ -382,7 +391,7 @@ export default {
           }
         });
     },
-    print() {
+    printProgressReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
@@ -434,7 +443,7 @@ table.feeTypeTable {
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
-    display: block;
+    /* display: block; */
     position: relative;
     overflow: scroll;
   }
-- 
2.0.0