From 01d009dde71146c76b27ee5d464fea28849bfdb0 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Wed, 18 Dec 2019 18:46:14 +0530
Subject: [PATCH] fixed Show Notice Board on dashboard above calendar view same
 as Web School

---
 src/pages/Dashboard/dashboard.vue | 235 +++++++++++++++++++++++++++++++++-----
 1 file changed, 206 insertions(+), 29 deletions(-)

diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 69bb9de..fa45915 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -1,12 +1,57 @@
 <template>
-  <v-app id="pages-dasboard">
+  <v-app id="pages-dasboard" class="dashbaordBackground">
+    <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
+    <v-dialog v-model="dialogNotice" max-width="640px" scrollable>
+      <v-card>
+        <v-toolbar color="grey lighten-2" flat>
+          <v-spacer></v-spacer>
+          <v-toolbar-title>
+            <h3>Notice Board</h3>
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-icon @click="closeNotice">close</v-icon>
+        </v-toolbar>
+        <v-card-text>
+          <v-layout>
+            <v-flex align-center justify-center layout text-xs-center class="mt-2">
+              <img src="/static/icon/user.png" width="70px" />
+            </v-flex>
+          </v-layout>
+          <v-container grid-list-md>
+            <v-layout wrap>
+              <v-flex>
+                <v-layout>
+                  <v-flex xs5 sm6>
+                    <h5 class="right my-1">
+                      <b>Title:</b>
+                    </h5>
+                  </v-flex>
+                  <v-flex sm6 xs8>
+                    <h5 class="my-1">{{ editedItem.title }}</h5>
+                  </v-flex>
+                </v-layout>
+                <v-layout>
+                  <v-flex xs5 sm6>
+                    <h5 class="right my-1">
+                      <b>Description:</b>
+                    </h5>
+                  </v-flex>
+                  <v-flex sm6 xs8>
+                    <h5 class="my-1">{{ editedItem.description }}</h5>
+                  </v-flex>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
     <v-container fluid grid-list-xl>
-      <!-- <v-card flat class="dashCard"> -->
       <v-layout row wrap class="pt-3">
         <!-- ***** Total Students ***** -->
         <v-flex xs12 class="pt-2">
           <v-layout row wrap>
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark>
                 <img
                   src="/static/schoolIcons/Students.png"
@@ -22,7 +67,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Parents ***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark>
                 <img
                   src="/static/schoolIcons/Parents.png"
@@ -38,7 +83,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Teachers***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark>
                 <img
                   src="/static/schoolIcons/Teachers.png"
@@ -54,7 +99,7 @@
               </v-card>
             </v-flex>
             <!-- ***** Total Class***** -->
-            <v-flex xs12 sm12 lg3 md4>
+            <v-flex xs12 sm12 lg3 md3>
               <v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark>
                 <img
                   src="/static/schoolIcons/Class.png"
@@ -72,6 +117,77 @@
           </v-layout>
         </v-flex>
       </v-layout>
+      <v-layout wrap>
+        <v-flex xs12 sm12 md4>
+          <v-card>
+            <v-flex xs12 class="text-xs-center">
+              <v-avatar size="60px" class="mx-auto" style="margin: auto;display:block;">
+                <img src="/static/icon/user.png" />
+              </v-avatar>
+              <h5 class="pt-1">
+                <i>{{ userData.name }}</i>
+              </h5>
+              <!-- <p class="grey--text">Student</p> -->
+            </v-flex>
+            <table class="feeTypeTable tableRsponsive">
+              <tr>
+                <td>
+                  <v-icon>person</v-icon>
+                </td>
+                <td class="fixedSize">Username</td>
+                <td>{{ userData.name }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>mail</v-icon>
+                </td>
+                <td class="fixedSize">Email</td>
+                <td>{{ userData.email }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>call</v-icon>
+                </td>
+                <td class="fixedSize">Phone</td>
+                <td>{{ userData.mobile }}</td>
+              </tr>
+              <tr>
+                <td>
+                  <v-icon>home</v-icon>
+                </td>
+                <td class="fixedSize">Address</td>
+                <td>{{ userData.address }}</td>
+              </tr>
+            </table>
+          </v-card>
+        </v-flex>
+        <v-flex xs12 sm12 md8>
+          <v-card>
+            <v-card-title class="subheading">Notice</v-card-title>
+            <v-data-table :items="noticeData" class="elevation-1" hide-actions hide-headers>
+              <template slot="items" slot-scope="props" v-if="props.index < 5">
+                <td>{{ props.index + 1}}</td>
+                <td>{{ props.item.title}}</td>
+                <td>{{ props.item.description}}</td>
+
+                <td class="text-xs-center">
+                  <span>
+                    <v-tooltip top>
+                      <img
+                        slot="activator"
+                        style="cursor:pointer; width:25px; height:18px; "
+                        @click="profile(props.item)"
+                        src="/static/icon/eye1.png"
+                      />
+                      <span>View</span>
+                    </v-tooltip>
+                  </span>
+                </td>
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-flex>
+      </v-layout>
       <v-card class="pt-4 mt-3" flat>
         <full-calendar
           ref="calendar"
@@ -85,7 +201,6 @@
     <v-dialog v-model="dialog" max-width="500">
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
-          <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
           <v-spacer></v-spacer>
           <v-btn icon @click="dialog= false">
             <v-icon>close</v-icon>
@@ -106,7 +221,6 @@
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
-              <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
@@ -120,7 +234,6 @@
 
 <script>
 import http from "@/Services/http.js";
-import Util from "@/util";
 import moment from "moment";
 
 export default {
@@ -128,6 +241,7 @@ export default {
     return {
       showLoader: false,
       dialog: false,
+      dialogNotice: false,
       HolidaysList: [],
       EventsList: [],
       events: [],
@@ -138,10 +252,13 @@ export default {
         }
       },
       selected: {},
+      editedItem: {},
+      userData: {},
       students: "",
       parents: "",
       teachers: "",
-      classes: ""
+      classes: "",
+      noticeData: []
     };
   },
   mounted() {
@@ -151,8 +268,18 @@ export default {
     this.getTeachers();
     this.getParents();
     this.getClasses();
+    this.getNoticeData();
+    this.getUserData();
   },
   methods: {
+    closeNotice() {
+      this.dialogNotice = false;
+    },
+    profile(item) {
+      // this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialogNotice = true;
+    },
     date: function(date) {
       return moment(date).format("MMMM DD, YYYY  HH:mm:ss");
     },
@@ -175,11 +302,8 @@ export default {
     },
     getData() {
       this.showLoader = true;
-      var token = this.$store.state.token;
       http()
-        .get("/getHolidaysList", {
-          headers: { Authorization: "Bearer " + token }
-        })
+        .get("/getHolidaysList", {})
         .then(response => {
           this.HolidaysList = response.data.data;
           // this.events = response.data.data;
@@ -196,9 +320,7 @@ export default {
           }
         });
       http()
-        .get("/getSchoolEventsList", {
-          headers: { Authorization: "Bearer " + token }
-        })
+        .get("/getSchoolEventsList")
         .then(response => {
           this.EventsList = response.data.data;
           let allData = [];
@@ -219,9 +341,7 @@ export default {
     },
     getStudents() {
       http()
-        .get("/getStudentsList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getStudentsList")
         .then(response => {
           this.students = response.data.data;
           this.showLoader = false;
@@ -238,9 +358,7 @@ export default {
     },
     getParents() {
       http()
-        .get("/getParentsList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getParentsList")
         .then(response => {
           this.parents = response.data.data;
           this.showLoader = false;
@@ -257,9 +375,7 @@ export default {
     },
     getTeachers() {
       http()
-        .get("/getTeachersList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getTeachersList")
         .then(response => {
           this.teachers = response.data.data;
           this.showLoader = false;
@@ -276,9 +392,7 @@ export default {
     },
     getClasses() {
       http()
-        .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
-        })
+        .get("/getClassesList")
         .then(response => {
           this.classes = response.data.data;
           this.showLoader = false;
@@ -292,6 +406,40 @@ export default {
             this.$store.dispatch("Role", null);
           }
         });
+    },
+    getNoticeData() {
+      this.showLoader = true;
+      http()
+        .get("/getEventsList")
+        .then(response => {
+          this.noticeData = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+    getUserData() {
+      this.showLoader = true;
+      http()
+        .get("/getParticularUserDetail")
+        .then(response => {
+          this.userData = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
     }
     // eventSources() {
     //   const self = this;
@@ -352,4 +500,33 @@ export default {
   border-radius: 4px;
   z-index: 1;
 }
+
+.dashbaordBackground {
+  background: #f1f2f7 !important;
+}
+table {
+  border-collapse: collapse;
+  border: 1px solid #e2e7eb;
+}
+tr {
+  border: 1px solid #e2e7eb;
+  /* text-align: center; */
+}
+td {
+  padding: 6px;
+}
+.fixedSize {
+  padding: 6px 20px !important;
+}
+table.feeTypeTable {
+  table-layout: auto !important;
+  width: 100% !important;
+}
+@media screen and (max-width: 380px) {
+  .tableRsponsive {
+    display: block;
+    position: relative;
+    overflow: scroll;
+  }
+}
 </style>
\ No newline at end of file
-- 
2.0.0