From 96f88269ac36632f40dae1cb79c9698c1f9e3804 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Wed, 8 Jan 2020 18:08:36 +0530
Subject: [PATCH] implement Student Report Dashboard

---
 src/App.vue                              |  16 ++--
 src/Services/http.js                     |   4 +-
 src/components/pageHeader/AppToolbar.vue |   8 +-
 src/pages/Authentication/Login.vue       |   4 +-
 src/pages/Report/studentReport.vue       | 154 ++++++++++++++++++++++++-------
 5 files changed, 141 insertions(+), 45 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ee143de..8abc61a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
           <!-- App Footer -->
           <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer>
         </v-content>
-           <!-- theme setting -->
+        <!-- theme setting -->
         <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
           <v-icon>settings</v-icon>
         </v-btn>
@@ -26,7 +26,7 @@
           fixed
           >
           <theme-settings></theme-settings>
-        </v-navigation-drawer>    -->
+        </v-navigation-drawer>-->
       </v-app>
     </template>
     <template v-else>
@@ -49,13 +49,13 @@ import AppDrawer from "@/components/pageHeader/AppDrawer";
 import AppToolbar from "@/components/pageHeader/AppToolbar";
 import menu from "@/api/menu";
 import AppEvents from "./event";
-import ThemeSettings from "@/components/ThemeSettings"
+import ThemeSettings from "@/components/ThemeSettings";
 
 export default {
   components: {
     AppDrawer,
     AppToolbar,
-    ThemeSettings
+    ThemeSettings,
   },
   data: () => ({
     expanded: true,
@@ -75,12 +75,12 @@ export default {
     });
     window.getApp = this;
   },
-   methods: {
-    openThemeSettings () {
+  methods: {
+    openThemeSettings() {
       this.$vuetify.goTo(0);
-      this.rightDrawer = (!this.rightDrawer);
+      this.rightDrawer = !this.rightDrawer;
     }
-  },
+  }
 };
 </script>
 
diff --git a/src/Services/http.js b/src/Services/http.js
index f91a130..f1b6f74 100644
--- a/src/Services/http.js
+++ b/src/Services/http.js
@@ -7,8 +7,8 @@ const baseURL = `${baseDomain}`;
 
 export default () => {
     return axios.create({
-        // baseURL: 'http://192.168.0.120:3002/v1',
-        baseURL,
+        baseURL: 'http://192.168.4.220:3002/v1',
+        // baseURL,
         headers: {
             Authorization: `Bearer ${store.state.token}`
         }
diff --git a/src/components/pageHeader/AppToolbar.vue b/src/components/pageHeader/AppToolbar.vue
index 780b87d..a305321 100644
--- a/src/components/pageHeader/AppToolbar.vue
+++ b/src/components/pageHeader/AppToolbar.vue
@@ -27,7 +27,11 @@
       <v-btn icon large flat slot="activator">
         <v-avatar>
           <!-- <img src="/static/icon/user.png" /> -->
-          <v-icon dark size="40px" v-if="!userData.schoolLogoUrl && !userData.profilePicUrl">account_circle</v-icon>
+          <v-icon
+            dark
+            size="40px"
+            v-if="!userData.schoolLogoUrl && !userData.profilePicUrl"
+          >account_circle</v-icon>
           <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" />
           <img :src="userData.profilePicUrl" v-else-if="userData.profilePicUrl" />
         </v-avatar>
@@ -102,7 +106,7 @@ export default {
   methods: {
     emitSearch(ev) {
       this.$root.$emit("app:search", ev.target.value);
-      console.log("ev.target.value", ev.target.value);
+      // console.log("ev.target.value", ev.target.value);
     },
     handleDrawerToggle() {
       window.getApp.$emit("APP_DRAWER_TOGGLED");
diff --git a/src/pages/Authentication/Login.vue b/src/pages/Authentication/Login.vue
index 558f5c2..ce5801e 100644
--- a/src/pages/Authentication/Login.vue
+++ b/src/pages/Authentication/Login.vue
@@ -29,14 +29,14 @@
                 <v-flex xs12 sm12 md12 lg12>
                   <v-form ref="form" v-model="valid" lazy-validation>
                     <v-text-field
-                      v-model="userLogincredentials.email"
+                      v-model.trim="userLogincredentials.email"
                       :rules="nameRules"
                       label="Username"
                       required
                     ></v-text-field>
                     <v-text-field
                       :rules="[rules.required]"
-                      v-model="userLogincredentials.password"
+                      v-model.trim="userLogincredentials.password"
                       :append-icon="e1 ? 'visibility_off' : 'visibility'"
                       :append-icon-cb="() => (e1 = !e1)"
                       :type="e1 ? 'password' : 'text'"
diff --git a/src/pages/Report/studentReport.vue b/src/pages/Report/studentReport.vue
index 5a812b1..b5b8346 100644
--- a/src/pages/Report/studentReport.vue
+++ b/src/pages/Report/studentReport.vue
@@ -175,7 +175,7 @@
                 </v-flex>
               </v-layout>
             </v-flex>
-            <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only">
+            <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn @click="getStudents" round dark :loading="loading" class="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">
@@ -191,34 +191,106 @@
         </v-flex>
       </v-form>
     </v-card>
-    <v-data-table
-      :headers="headers"
-      :items="getStudentsReportList"
-      :pagination.sync="pagination"
-      :search="search"
-      v-show="showTable"
-    >
-      <template slot="items" slot-scope="props">
-        <td class="text-xs-center">{{ 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 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 id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</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-layout v-show="showTable">
+      <v-flex xs12>
+        <v-card>
+          <v-layout>
+            <v-flex xs12>
+              <v-btn class="grey right" 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-data-table
+            :headers="headers"
+            :items="getStudentsReportList"
+            :pagination.sync="pagination"
+            :search="search"
+          >
+            <template slot="items" slot-scope="props">
+              <td class="text-xs-center">{{ 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 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 id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
+              <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</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>
+        <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>
@@ -252,7 +324,8 @@ export default {
     BirthdayShow: false,
     sectionShow: false,
     showTable: false,
-    ClassShow: true,
+    classShow: true,
+    hidePrintStudentReport: false,
     addSection: [],
     pagination: {
       rowsPerPage: 15
@@ -311,6 +384,7 @@ export default {
     ],
     classList: [],
     report: {},
+    userData: {},
     markData: [],
     formList: [
       {
@@ -460,7 +534,7 @@ export default {
           console.log("err====>", error);
           this.showLoader = false;
         });
-    }
+    },
     //     getFormList() {
     //       this.showLoader = true;
     //       http()
@@ -483,11 +557,29 @@ export default {
     //           }
     //         });
     //     }
+    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();
-- 
2.0.0