From 3f7b851676c581bd793d651334dc8abcfd071145 Mon Sep 17 00:00:00 2001
From: Amber Dev <amber.dev@viithiisys.com>
Date: Sat, 11 Jul 2020 21:45:09 +0530
Subject: [PATCH] added announcements

---
 src/Services/GetApis.js                       |   2 +-
 src/pages/Dashboard/Announcement.vue          | 379 ++++++++++++++++
 src/pages/Dashboard/CourseDetails.vue         |   1 +
 src/pages/Dashboard/CourseDiscussionForum.vue |   8 +-
 src/pages/Dashboard/dashboard.vue             | 619 +++++++++++++-------------
 5 files changed, 706 insertions(+), 303 deletions(-)

diff --git a/src/Services/GetApis.js b/src/Services/GetApis.js
index 5598ae4..016c214 100644
--- a/src/Services/GetApis.js
+++ b/src/Services/GetApis.js
@@ -40,7 +40,7 @@ export default {
         async getCourseDiscussionesList(params) {
             try {
                 let response = await this.getMethod("/getCourseDiscussionesList", {
-                    courseId: params.courseId,
+                    // courseId: params.courseId,
                     classId: params.classId,
                 })
                 this.courseDiscussionItems = response.data.data
diff --git a/src/pages/Dashboard/Announcement.vue b/src/pages/Dashboard/Announcement.vue
index e69de29..10d9b14 100644
--- a/src/pages/Dashboard/Announcement.vue
+++ b/src/pages/Dashboard/Announcement.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="body-color">
+    <!-- LOADER -->
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+
+    <!-- SNACKBAR -->
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="snackbarColor"
+    >
+      {{ text }}
+      <v-spacer></v-spacer>
+      <v-btn flat text @click="snackbar = false">X</v-btn>
+    </v-snackbar>
+
+    <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
+    <!-- <v-dialog v-model="addForumDialog" max-width="500" persistent>
+      <v-card flat class="card-style pa-2" dark>
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Add Forum</label>
+            <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-container fluid>
+          <v-layout align-center>
+            <v-flex xs12>
+              <v-flex xs12 sm12>
+                <v-form ref="form" v-model="valid" lazy-validation>
+                  <v-layout>
+                    <v-flex
+                      xs12
+                      class="text-xs-center text-sm-center text-md-center text-lg-center"
+                    >
+                      <v-avatar size="100px" v-if="!imageUrl">
+                        <img src="/static/icon/user.png" />
+                      </v-avatar>
+                      <input
+                        type="file"
+                        style="display: none"
+                        ref="image"
+                        accept="image/*"
+                        @change="onFilePicked"
+                      />
+                      <img
+                        :src="imageData.imageUrl"
+                        height="150"
+                        width="150"
+                        v-if="imageUrl"
+                        style="border-radius:50%; width:200px"
+                      />
+                    </v-flex>
+                  </v-layout>
+
+                  <v-layout wrap>
+    <!-- SUBJECT-->
+    <!-- <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
+                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
+                        </v-flex>
+                        <v-flex xs8 sm8 class="ml-3">
+                          <v-text-field
+                            v-model="addForumParams.subject"
+                            placeholder="subject"
+                            type="text"
+                            :rules="cantBeEmpty"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+    </v-flex>-->
+    <!-- DESCRIPTION -->
+    <!-- <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Description:</label>
+                          <label
+                            class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                          >Description:</label>
+                        </v-flex>
+                        <v-flex xs8 sm8 class="ml-3">
+                          <v-text-field
+                            v-model="addForumParams.description"
+                            placeholder="Description"
+                            type="text"
+                            :rules="cantBeEmpty"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+    </v-flex>-->
+    <!-- UPLOAD IMAGE -->
+    <!-- <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
+                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            label="Select Image"
+                            @click="pickFile"
+                            v-model="imageName"
+                            append-icon="attach_file"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                      <v-layout class="right">
+                        <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-form>
+              </v-flex>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-card>
+    </v-dialog>-->
+
+    <v-container grid-list-xl class="pt-0">
+      <v-layout row class="mt-1">
+        <v-flex xs8>
+          <v-layout column>
+            <!-- HEADING -->
+            <v-flex>
+              <div class="title side-bar-color font-weight-bold">Announcements</div>
+              <div class="subheading grey--text lighten-1">General news and announcements</div>
+            </v-flex>
+
+            <!-- ADD DISCUSSION FORUM BUTTON -->
+            <!-- <v-flex>
+              <div>
+                <v-btn
+                  fab
+                  dark
+                  class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
+                  small
+                  @click="addForumDialog = true"
+                >
+                  <v-icon dark>add</v-icon>
+                </v-btn>
+                <v-btn
+                  round
+                  class="open-dialog-button hidden-sm-only hidden-xs-only"
+                  dark
+                  @click="addForumDialog = true"
+                >
+                  <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
+                </v-btn>
+              </div>
+            </v-flex>-->
+
+            <!-- DATA TABLE -->
+            <v-flex>
+              <v-data-table
+                :headers="courseDiscussionHeaders"
+                :items="courseDiscussionItems"
+                :pagination.sync="pagination"
+                :search="search"
+              >
+                <template slot="items" slot-scope="props">
+                  <tr class="tr">
+                    <td class="td td-row text-xs-center">{{ props.item.courseId.courseName}}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.courseId.courseName}}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</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-flex>
+          </v-layout>
+
+          <!-- NEXT CHAPTER -->
+          <!-- <v-flex
+            class="text-xs-right mt-5"
+            v-if="indexSelectedChapter < chapterNames.length -1"
+            @click="showSelectedChapter()"
+          >
+            <span style="cursor: pointer;" class="subheading font-weight-bold">
+              {{chapterNames[indexSelectedChapter + 1]}}
+              <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
+            </span>
+          </v-flex>-->
+          <!-- <v-flex class="text-xs-right mt-5" v-else>
+            <span class="subheading font-weight-bold">Return to chapter one</span>
+          </v-flex>-->
+        </v-flex>
+
+        <v-spacer></v-spacer>
+
+        <!-- COURSES - positioned to the right of the page -->
+        <v-flex xs3>
+          <v-card class="elevation-0 card-border" height="100%">
+            <v-container class="pt-0">
+              <div class="side-bar-color font-weight-bold title">Courses</div>
+
+              <div v-for="(course,index) in courseData">
+                <v-btn
+                  flat
+                  class="subheading text-xs-start justify-left"
+                  style="cursor: pointer;"
+                  block
+                  @click="routeToCourseDetails(course._id)"
+                >
+                  <div style="width: 100%;text-align: left;">
+                    <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
+                    {{course.courseName}}
+                  </div>
+                </v-btn>
+              </div>
+            </v-container>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+<script>
+import AllApiCalls from "@/Services/AllApiCalls.js";
+import http from "@/Services/http.js";
+export default {
+  mixins: [AllApiCalls],
+  data() {
+    return {
+      valid: true,
+      addForumDialog: false,
+      addForumParams: {},
+      // UPLOAD IMAGE
+      imageName: "",
+      imageUrl: "",
+      imageFile: "",
+      imageData: {},
+
+      // DATA TABLE
+      search: "",
+      pagination: {
+        rowsPerPage: 10
+      },
+      courseDiscussionHeaders: [
+        {
+          text: "Discussion",
+          align: "",
+          sortable: false,
+          value: ""
+        },
+        {
+          text: "Started",
+          value: "",
+          sortable: false,
+          align: "center"
+        },
+        { text: "Last Pot", value: "", sortable: false, align: "center" },
+        { text: "Replies", value: "", sortable: false, align: "center" }
+      ],
+      courseDiscussionItems: []
+    };
+  },
+  methods: {
+    /* UPLOAD IMAGE */
+    pickFile() {
+      this.$refs.image.click();
+    },
+
+    onFilePicked(e) {
+      // console.log(e)
+      const files = e.target.files;
+      this.imageData.upload = e.target.files[0];
+      if (files[0] !== undefined) {
+        this.imageName = files[0].name;
+        if (this.imageName.lastIndexOf(".") <= 0) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.readAsDataURL(files[0]);
+        fr.addEventListener("load", () => {
+          this.imageUrl = fr.result;
+          this.imageFile = files[0]; // this is an image file that can be sent to server...
+          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
+        });
+      } else {
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+    submit() {
+      if (this.$refs.form.validate()) {
+        this.addForumParams.classId = localStorage.getItem("parentClassId");
+        this.addForumParams.courseId = this.$route.query.courseId;
+        this.addForumParams.studentId = localStorage.getItem("parentStudentId");
+
+        if (this.imageUrl) {
+          var str = this.imageUrl;
+          const [baseUrl, imageUrl] = str.split(/,/);
+          this.addForumParams.upload = imageUrl;
+        }
+        this.loading = true;
+        http()
+          .post("/createCourseDiscussion", this.addForumParams)
+          .then(response => {
+            this.snackbar = true;
+            this.text = "Discussion added successfully";
+            this.snackbarColor = "green";
+            this.addForumDialog = false;
+            this.clear();
+            this.loading = false;
+            console.log("response of createCourseDiscussion - ", response);
+          })
+          .catch(error => {
+            this.snackbar = true;
+            this.text = error.response.data.message;
+            this.color = "error";
+            this.loading = false;
+          });
+      }
+    },
+    clear() {
+      this.$refs.form.reset();
+      this.imageUrl = "";
+    },
+    async routeToCourseDetails(courseId) {
+      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+      let response = await this.getParticularCourseDetail(courseId);
+
+      /* If the response is null then dont route */
+      if (response.data.data.length > 0) {
+        this.$router.push({
+          name: "Course Details",
+          query: { courseId: courseId }
+        });
+      } else {
+        this.seeSnackbar("No Data Available", "warning");
+      }
+    }
+  },
+  async created() {
+    /* getStudentCourses - to get courseData - defined in GetApis.js*/
+    await this.getStudentCourses({
+      classId: localStorage.getItem("parentClassId"),
+      studentId: localStorage.getItem("parentStudentId")
+    });
+
+    /* getCourseDiscussionesList - to populate the data table */
+    await this.getCourseDiscussionesList({
+      courseId: this.$route.query.courseId,
+      classId: localStorage.getItem("parentClassId")
+    });
+  }
+};
+</script>
+<style scoped>
+.side-bar-color {
+  color: #827bfa !important;
+  /* border-top-right-radius: 74px !important; */
+}
+.card-border {
+  border: 1px #bdbdbd solid;
+  border-radius: 3px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Dashboard/CourseDetails.vue b/src/pages/Dashboard/CourseDetails.vue
index 715ebeb..5752845 100644
--- a/src/pages/Dashboard/CourseDetails.vue
+++ b/src/pages/Dashboard/CourseDetails.vue
@@ -33,6 +33,7 @@
 
           <div class="mt-5">
             <span
+              style="cursor: pointer;"
               class="grey--text lighten-1"
               @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
             >
diff --git a/src/pages/Dashboard/CourseDiscussionForum.vue b/src/pages/Dashboard/CourseDiscussionForum.vue
index 921ab6b..8a09734 100644
--- a/src/pages/Dashboard/CourseDiscussionForum.vue
+++ b/src/pages/Dashboard/CourseDiscussionForum.vue
@@ -302,7 +302,7 @@ export default {
         this.imageUrl = "";
       }
     },
-    submit() {
+    async submit() {
       if (this.$refs.form.validate()) {
         this.addForumParams.classId = localStorage.getItem("parentClassId");
         this.addForumParams.courseId = this.$route.query.courseId;
@@ -331,6 +331,12 @@ export default {
             this.color = "error";
             this.loading = false;
           });
+        /* getCourseDiscussionesList - to populate the data table */
+        await this.getCourseDiscussionesList({
+          courseId: this.$route.query.courseId,
+          classId: localStorage.getItem("parentClassId")
+        });
+        this.addForumDialog = false;
       }
     },
     clear() {
diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 5338d33..da6cec2 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -68,138 +68,215 @@
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
 
-    <v-layout wrap>
-      <v-flex xs12>
-        <v-layout wrap row>
+    <v-layout wrap row>
+      <v-flex xs12 sm12 md9>
+        <v-container fluid grid-list-xl>
           <!-- ***** Total Students ***** -->
-          <v-flex xs12 sm12 md9>
-            <v-container fluid grid-list-xl>
-              <v-flex xs12 sm12 md12>
-                <v-layout wrap class>
-                  <v-flex xs12 sm12 md3>
-                    <router-link :to="{ name:'Students' }">
-                      <v-card class="card pink-bgcolor">
-                        <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
-                        <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
-                        <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
-                      </v-card>
-                    </router-link>
-                  </v-flex>
-                  <!-- ***** Total Teachers***** -->
-                  <v-flex xs12 sm12 md3>
-                    <router-link :to="{ name:'Teachers' }">
-                      <v-card flat class="card elevation-2 firozi-bgcolor">
-                        <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
-                        <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
+          <!-- <v-flex xs12 sm12 md12>
+            <v-layout wrap class>
+              <v-flex xs12 sm12 md3>
+                <router-link :to="{ name:'Students' }">
+                  <v-card class="card pink-bgcolor">
+                    <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
+                    <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
+                    <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
+                  </v-card>
+                </router-link>
+          </v-flex>-->
+          <!-- ***** Total Teachers***** -->
+          <!-- <v-flex xs12 sm12 md3>
+                <router-link :to="{ name:'Teachers' }">
+                  <v-card flat class="card elevation-2 firozi-bgcolor">
+                    <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
+                    <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
 
-                        <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
-                      </v-card>
-                    </router-link>
-                  </v-flex>
-                  <!-- ***** Total Parents ***** -->
+                    <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
+                  </v-card>
+                </router-link>
+          </v-flex>-->
+          <!-- ***** Total Parents ***** -->
+          <!-- <v-flex xs12 sm12 md3>
+                <router-link :to="{ name:'Parents' }">
+                  <v-card flat class="card yellow darken-3">
+                    <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
+                    <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
+                    <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
+                  </v-card>
+                </router-link>
+          </v-flex>-->
+          <!-- ***** Total Class***** -->
+          <!-- <v-flex xs12 sm12 md3>
+                <router-link :to="{ name:'Class' }">
+                  <v-card flat class="card darkBlue-bgcolor">
+                    <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
+                    <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
+                    <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
+                  </v-card>
+                </router-link>
+              </v-flex>
+            </v-layout>
+          </v-flex>-->
+          <p
+            v-if="studentsData.length === 0 && role == 'PARENT'"
+            class="text-center title grey lighten-4 error--text"
+          >You have no student registered with school</p>
+          <v-layout v-if="role != 'PARENT'">
+            <v-flex xs12>
+              <v-card class="card mt-2 account-Card">
+                <h4>
+                  <b>Account</b>
+                </h4>
+                <v-layout wrap>
                   <v-flex xs12 sm12 md3>
-                    <router-link :to="{ name:'Parents' }">
-                      <v-card flat class="card yellow darken-3">
-                        <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
-                        <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
-                        <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
-                      </v-card>
-                    </router-link>
+                    <v-list two-line>
+                      <template>
+                        <v-list-tile>
+                          <v-list-tile-avatar>
+                            <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
+                          </v-list-tile-avatar>
+                          <v-list-tile-content>
+                            <v-list-tile-title class="mt-2">
+                              <p class="subheading font-color">Fees</p>
+                            </v-list-tile-title>
+                            <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
+                          </v-list-tile-content>
+                        </v-list-tile>
+                        <v-list-tile>
+                          <v-list-tile-avatar>
+                            <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
+                          </v-list-tile-avatar>
+                          <v-list-tile-content>
+                            <v-list-tile-title class="mt-2">
+                              <p class="subheading font-color">Collection</p>
+                            </v-list-tile-title>
+                            <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
+                          </v-list-tile-content>
+                        </v-list-tile>
+                        <v-list-tile>
+                          <v-list-tile-avatar>
+                            <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
+                          </v-list-tile-avatar>
+                          <v-list-tile-content>
+                            <v-list-tile-title class="mt-2">
+                              <p class="subheading font-color">Expences</p>
+                            </v-list-tile-title>
+                            <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
+                          </v-list-tile-content>
+                        </v-list-tile>
+                      </template>
+                    </v-list>
                   </v-flex>
-                  <!-- ***** Total Class***** -->
-                  <v-flex xs12 sm12 md3>
-                    <router-link :to="{ name:'Class' }">
-                      <v-card flat class="card darkBlue-bgcolor">
-                        <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
-                        <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
-                        <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
-                      </v-card>
-                    </router-link>
+                  <v-flex xs12 sm12 md9 lg9>
+                    <div id="chart">
+                      <div v-if="this.series">
+                        <apexchart
+                          type="bar"
+                          height="250"
+                          style="max-width: 800px !important"
+                          :options="chartOptions"
+                          :series="series"
+                          v-show="true"
+                        ></apexchart>
+                      </div>
+                    </div>
                   </v-flex>
                 </v-layout>
-              </v-flex>
-              <p
-                v-if="studentsData.length === 0 && role == 'PARENT'"
-                class="text-center title grey lighten-4 error--text"
-              >You have no student registered with scholl</p>
-              <v-layout v-if="role != 'PARENT'">
-                <v-flex xs12>
-                  <v-card class="card mt-2 account-Card">
-                    <h4>
-                      <b>Account</b>
-                    </h4>
-                    <v-layout wrap>
-                      <v-flex xs12 sm12 md3>
-                        <v-list two-line>
-                          <template>
-                            <v-list-tile>
-                              <v-list-tile-avatar>
-                                <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
-                              </v-list-tile-avatar>
-                              <v-list-tile-content>
-                                <v-list-tile-title class="mt-2">
-                                  <p class="subheading font-color">Fees</p>
-                                </v-list-tile-title>
-                                <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
-                              </v-list-tile-content>
-                            </v-list-tile>
-                            <v-list-tile>
-                              <v-list-tile-avatar>
-                                <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
-                              </v-list-tile-avatar>
-                              <v-list-tile-content>
-                                <v-list-tile-title class="mt-2">
-                                  <p class="subheading font-color">Collection</p>
-                                </v-list-tile-title>
-                                <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
-                              </v-list-tile-content>
-                            </v-list-tile>
-                            <v-list-tile>
-                              <v-list-tile-avatar>
-                                <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
-                              </v-list-tile-avatar>
-                              <v-list-tile-content>
-                                <v-list-tile-title class="mt-2">
-                                  <p class="subheading font-color">Expences</p>
-                                </v-list-tile-title>
-                                <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
-                              </v-list-tile-content>
-                            </v-list-tile>
-                          </template>
-                        </v-list>
-                      </v-flex>
-                      <v-flex xs12 sm12 md9 lg9>
-                        <div id="chart">
-                          <div v-if="this.series">
-                            <apexchart
-                              type="bar"
-                              height="250"
-                              style="max-width: 800px !important"
-                              :options="chartOptions"
-                              :series="series"
-                              v-show="true"
-                            ></apexchart>
-                          </div>
-                        </div>
-                      </v-flex>
-                    </v-layout>
-                  </v-card>
-                </v-flex>
-              </v-layout>
-              <v-card class="mt-2 card" v-if="role != 'PARENT'">
-                <!-- <full-calendar
+              </v-card>
+            </v-flex>
+          </v-layout>
+          <v-card class="mt-2 card" v-if="role != 'PARENT'">
+            <!-- <full-calendar
                   ref="calendar"
                   defaultView="month"
                   droppable="false"
                   :events="events"
                   :config="config"
-                ></full-calendar>-->
+            ></full-calendar>-->
+            <h4 class="pa-3">
+              <b>Notice</b>
+            </h4>
+
+            <v-data-table
+              :items="noticeData"
+              class="elevation-0"
+              flat
+              hide-actions
+              hide-headers
+              style="border-spacing: 0 !important;"
+            >
+              <template
+                slot="items"
+                slot-scope="props"
+                v-if="props.index < 5"
+                style="border-spacing: 0 !important;"
+              >
+                <tr class="td-notice">
+                  <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
+                  <td>
+                    <span class="grey--text caption">{{ date(props.item.created) }}</span>
+                    <br />
+                    <span class="body-2">{{ props.item.title}}</span>
+                  </td>
+                  <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
+
+                  <td class="text-xs-center">
+                    <span>
+                      <v-tooltip top>
+                        <img
+                          slot="activator"
+                          style="cursor:pointer; width:25px; height:25px; "
+                          @click="profile"
+                          src="/static/icon/view.png"
+                        />
+                        <span>View</span>
+                      </v-tooltip>
+                    </span>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-card>
+          <!-- COURSES -->
+          <v-layout v-if="role == 'PARENT'">
+            <v-flex xs12>
+              <v-card class="card mt-2 account-Card">
+                <h4>
+                  <b>My Courses</b>
+                </h4>
+                <v-layout wrap>
+                  <v-flex xs12 sm12>
+                    <v-list two-line>
+                      <template>
+                        <v-list-tile v-for="(course,i) in courseData" :key="i">
+                          <v-list-tile-avatar>
+                            <v-icon
+                              class="account-circle darkBlue-color"
+                              style="cursor: pointer;"
+                            >panorama_fish_eye</v-icon>
+                          </v-list-tile-avatar>
+                          <v-list-tile-content>
+                            <v-list-tile-title
+                              style="cursor: pointer;"
+                              @click="routeToCourseDetails(course._id)"
+                            >{{ course.courseName }}</v-list-tile-title>
+                          </v-list-tile-content>
+                        </v-list-tile>
+                      </template>
+                    </v-list>
+                  </v-flex>
+                </v-layout>
+              </v-card>
+            </v-flex>
+          </v-layout>
+          <v-layout v-if="role == 'PARENT'">
+            <v-flex xs6>
+              <v-card class="mt-2 card">
                 <h4 class="pa-3">
-                  <b>Notice</b>
+                  <b>Latest Annoucements</b>
                 </h4>
 
                 <v-data-table
-                  :items="noticeData"
+                  :items="annoucementData"
                   class="elevation-0"
                   flat
                   hide-actions
@@ -217,17 +294,14 @@
                       <td>
                         <span class="grey--text caption">{{ date(props.item.created) }}</span>
                         <br />
-                        <span class="body-2">{{ props.item.title}}</span>
+                        <span class="body-2">{{ props.item.discussionType}}</span>
                       </td>
-                      <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
-
                       <td class="text-xs-center">
                         <span>
                           <v-tooltip top>
                             <img
                               slot="activator"
                               style="cursor:pointer; width:25px; height:25px; "
-                              @click="profile"
                               src="/static/icon/view.png"
                             />
                             <span>View</span>
@@ -238,181 +312,102 @@
                   </template>
                 </v-data-table>
               </v-card>
-              <!-- COURSES -->
-              <v-layout v-if="role == 'PARENT'">
-                <v-flex xs12>
-                  <v-card class="card mt-2 account-Card">
-                    <h4>
-                      <b>My Courses</b>
-                    </h4>
-                    <v-layout wrap>
-                      <v-flex xs12 sm12>
-                        <v-list two-line>
-                          <template>
-                            <v-list-tile v-for="(course,i) in courseData" :key="i">
-                              <v-list-tile-avatar>
-                                <v-icon
-                                  class="account-circle darkBlue-color"
-                                  style="cursor: pointer;"
-                                >panorama_fish_eye</v-icon>
-                              </v-list-tile-avatar>
-                              <v-list-tile-content>
-                                <v-list-tile-title
-                                  style="cursor: pointer;"
-                                  @click="routeToCourseDetails(course._id)"
-                                >{{ course.courseName }}</v-list-tile-title>
-                              </v-list-tile-content>
-                            </v-list-tile>
-                          </template>
-                        </v-list>
-                      </v-flex>
-                    </v-layout>
-                  </v-card>
-                </v-flex>
-              </v-layout>
-              <v-layout v-if="role == 'PARENT'">
-                <v-flex xs6>
-                  <v-card class="mt-2 card">
-                    <h4 class="pa-3">
-                      <b>Latest Annoucements</b>
-                    </h4>
+            </v-flex>
+            <v-flex xs6>
+              <v-card class="mt-2 card">
+                <h4 class="pa-3">
+                  <b>Online User</b>
+                </h4>
 
-                    <v-data-table
-                      :items="annoucementData"
-                      class="elevation-0"
-                      flat
-                      hide-actions
-                      hide-headers
-                      style="border-spacing: 0 !important;"
-                    >
-                      <template
-                        slot="items"
-                        slot-scope="props"
-                        v-if="props.index < 5"
-                        style="border-spacing: 0 !important;"
-                      >
-                        <tr class="td-notice">
-                          <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
-                          <td>
-                            <span class="grey--text caption">{{ date(props.item.created) }}</span>
-                            <br />
-                            <span class="body-2">{{ props.item.discussionType}}</span>
-                          </td>
-                          <td class="text-xs-center">
-                            <span>
-                              <v-tooltip top>
-                                <img
-                                  slot="activator"
-                                  style="cursor:pointer; width:25px; height:25px; "
-                                  src="/static/icon/view.png"
-                                />
-                                <span>View</span>
-                              </v-tooltip>
-                            </span>
-                          </td>
-                        </tr>
-                      </template>
-                    </v-data-table>
-                  </v-card>
+                <v-data-table
+                  :items="onlineUser"
+                  class="elevation-0"
+                  flat
+                  hide-actions
+                  hide-headers
+                  style="border-spacing: 0 !important;"
+                >
+                  <template
+                    slot="items"
+                    slot-scope="props"
+                    v-if="props.index < 5"
+                    style="border-spacing: 0 !important;"
+                  >
+                    <tr class="td-notice">
+                      <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
+                      <td>
+                        <span class="body-2">{{ props.item.user }}</span>
+                      </td>
+                      <td class="text-xs-center">
+                        <span>
+                          <v-tooltip top>
+                            <img
+                              slot="activator"
+                              style="cursor:pointer; width:25px; height:25px; "
+                              src="/static/icon/view.png"
+                            />
+                            <span>View</span>
+                          </v-tooltip>
+                        </span>
+                      </td>
+                    </tr>
+                  </template>
+                </v-data-table>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-flex>
+      <v-spacer></v-spacer>
+      <!-- SIDE BAR -->
+      <v-flex xs12 sm12 md3>
+        <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
+          <v-card-text class="px-2">
+            <h4 class="text-xs-center py-3">
+              <b>Profile</b>
+            </h4>
+            <v-flex xs12 class="py-3">
+              <v-layout wrap>
+                <v-flex xs12 sm12 md4>
+                  <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
+                  <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" />
                 </v-flex>
-                <v-flex xs6>
-                  <v-card class="mt-2 card">
-                    <h4 class="pa-3">
-                      <b>Online User</b>
-                    </h4>
-
-                    <v-data-table
-                      :items="onlineUser"
-                      class="elevation-0"
-                      flat
-                      hide-actions
-                      hide-headers
-                      style="border-spacing: 0 !important;"
-                    >
-                      <template
-                        slot="items"
-                        slot-scope="props"
-                        v-if="props.index < 5"
-                        style="border-spacing: 0 !important;"
-                      >
-                        <tr class="td-notice">
-                          <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
-                          <td>
-                            <span class="body-2">{{ props.item.user }}</span>
-                          </td>
-                          <td class="text-xs-center">
-                            <span>
-                              <v-tooltip top>
-                                <img
-                                  slot="activator"
-                                  style="cursor:pointer; width:25px; height:25px; "
-                                  src="/static/icon/view.png"
-                                />
-                                <span>View</span>
-                              </v-tooltip>
-                            </span>
-                          </td>
-                        </tr>
-                      </template>
-                    </v-data-table>
-                  </v-card>
+                <v-flex xs12 sm12 md6>
+                  <p class="mb-0 body-1">
+                    <i>{{ userData.name }}</i>
+                  </p>
+                  <p class="mb-0 caption grey--text">{{ userData.email }}</p>
+                  <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
+                  <address class="caption grey--text mb-3">{{ userData.address }}</address>
                 </v-flex>
               </v-layout>
-            </v-container>
-          </v-flex>
-          <v-flex xs12 sm12 md3>
-            <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
+            </v-flex>
+            <hr />
+            <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
+            <vue-event-calendar :events="activityEvents"></vue-event-calendar>
+            <!-- LATEST ACTIVITY -->
+            <v-card class="my-3 elevation-0">
               <v-card-text>
-                <h4 class="text-xs-center py-3">
-                  <b>Profile</b>
-                </h4>
-                <v-flex xs12 class="py-3">
-                  <v-layout wrap>
-                    <v-flex xs12 sm12 md4>
-                      <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
-                      <img
-                        :src="userData.schoolLogoUrl"
-                        v-else-if="userData.schoolLogoUrl"
-                        width="80"
-                      />
-                    </v-flex>
-                    <v-flex xs12 sm12 md6>
-                      <p class="mb-0 body-1">
-                        <i>{{ userData.name }}</i>
-                      </p>
-                      <p class="mb-0 caption grey--text">{{ userData.email }}</p>
-                      <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
-                      <address class="caption grey--text mb-3">{{ userData.address }}</address>
-                    </v-flex>
-                  </v-layout>
-                </v-flex>
-                <hr />
-                <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
-                <vue-event-calendar :events="activityEvents"></vue-event-calendar>
-                <!-- LATEST ACTIVITY -->
-                <v-card class="my-3 elevation-0">
-                  <v-card-text>
-                    <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
-                    <div v-for="(activity,index) in activityList" :key="index" class="mt-2">
-                      <span
-                        :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                        style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
-                      ></span>
-                      <div style="display: inline-block;" class="ml-2">
-                        <div
-                          class="grey--text lighten-1 caption"
-                        >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                        <div class="body-2">{{activity.meetingEvent.title}}</div>
-                      </div>
-                    </div>
-                  </v-card-text>
-                </v-card>
+                <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
+                <div v-for="(activity,index) in activityList" :key="index" class="mt-2">
+                  <span
+                    :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
+                    style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                  ></span>
+                  <div style="display: inline-block;" class="ml-2">
+                    <div
+                      class="grey--text lighten-1 caption"
+                    >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                    <div class="body-2">{{activity.meetingEvent.title}}</div>
+                  </div>
+                </div>
               </v-card-text>
             </v-card>
-          </v-flex>
-        </v-layout>
+          </v-card-text>
+        </v-card>
       </v-flex>
     </v-layout>
+
     <v-dialog v-model="dialog" max-width="500">
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
@@ -777,19 +772,39 @@ export default {
     },
     getUserData() {
       // this.showLoader = true;
-      http()
-        .get("/getParticularUserDetail", {
-          headers: {
-            Authorization: "Bearer " + this.token
-          }
-        })
-        .then(response => {
-          this.userData = response.data.data;
-          this.showLoader = false;
-        })
-        .catch(error => {
-          this.showLoader = false;
-        });
+      if (this.$store.state.role === "PARENT") {
+        http()
+          .get("/getParticularUserDetail", {
+            headers: {
+              Authorization: "Bearer " + this.token
+            },
+            params: {
+              studentId: localStorage.getItem("parentStudentId")
+            }
+          })
+          .then(response => {
+            this.userData = response.data.data;
+            this.showLoader = false;
+            console.log("sdsdfsdfsd - ", response);
+          })
+          .catch(error => {
+            this.showLoader = false;
+          });
+      } else {
+        http()
+          .get("/getParticularUserDetail", {
+            headers: {
+              Authorization: "Bearer " + this.token
+            }
+          })
+          .then(response => {
+            this.userData = response.data.data;
+            this.showLoader = false;
+          })
+          .catch(error => {
+            this.showLoader = false;
+          });
+      }
     },
 
     getFeesAndCollectionsData() {
@@ -904,7 +919,9 @@ export default {
     /* set activityEvents array to highlight event dates in calender */
     for (var i = 0; i < this.activityList.length; i++) {
       let obj = {};
-      obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format("YYYY/MM/DD");;
+      obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
+        "YYYY/MM/DD"
+      );
       obj.title = this.activityList[i].meetingEvent.title;
       this.activityEvents.push(obj);
     }
-- 
2.0.0