From 2f89adbd737c27f153416fb81d2f6e92be8fd15a Mon Sep 17 00:00:00 2001
From: Shikha Mishra <smshikhamishra25@gmail.com>
Date: Tue, 13 Oct 2020 17:38:05 +0530
Subject: [PATCH] improve ui design while parent login

---
 src/pages/Dashboard/dashboard.vue | 538 +++++++++++++++++++++++++++-----------
 1 file changed, 391 insertions(+), 147 deletions(-)

diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 4732756..2587669 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -76,13 +76,25 @@
             <v-icon
               size="24"
               class="right"
-              @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
-            >cancel</v-icon>
+              @click="
+                active = 0;
+                displayEventsList = [];
+                dialogSchoolEvents = [];
+                dialogMeetingEvents = [];
+                viewEventDetails = false;
+              "
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
-        <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
+        <v-tabs
+          v-model="active"
+          color="#7f62f8"
+          dark
+          v-if="displayEventsList.length == 0"
+        >
           <v-tabs-slider color="yellow"></v-tabs-slider>
-          <v-tab v-for="(tab,index) in tabs" :key="index">
+          <v-tab v-for="(tab, index) in tabs" :key="index">
             <div class="subheading py-1">{{ tab.name }}</div>
           </v-tab>
           <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
@@ -90,26 +102,44 @@
 
           <!-- SCHOOL EVENTS-->
           <v-tab-item>
-            <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
+            <v-card
+              flat
+              class="card-style pa-2"
+              dark
+              v-if="dialogSchoolEvents.length > 0"
+            >
               <v-container fluid>
                 <v-divider class="white"></v-divider>
                 <v-card
-                  v-for="(particularEvent,index) in dialogSchoolEvents"
+                  v-for="(particularEvent, index) in dialogSchoolEvents"
                   :key="index"
                   class="mt-3 pa-2 card-style white--text elevation-0"
                 >
                   <div>
-                    <div class="headline">{{particularEvent.title}}</div>
-                    <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                    <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
-                    <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
+                    <div class="headline">{{ particularEvent.title }}</div>
+                    <div>
+                      Date Of Event :
+                      {{
+                        moment(particularEvent.dateOfEvent).format(
+                          "DD MMMM, YYYY"
+                        )
+                      }}
+                    </div>
+                    <div v-if="particularEvent.link">
+                      Start Time : {{ particularEvent.startTime }}
+                    </div>
+                    <div v-if="particularEvent.link">
+                      Duration : {{ particularEvent.duration }}
+                    </div>
                     <div v-if="particularEvent.link">
                       Link :
-                      <a :href="particularEvent.link">{{particularEvent.link}}</a>
+                      <a :href="particularEvent.link">{{
+                        particularEvent.link
+                      }}</a>
+                    </div>
+                    <div v-if="particularEvent.description">
+                      Description : {{ particularEvent.description }}
                     </div>
-                    <div
-                      v-if="particularEvent.description"
-                    >Description : {{particularEvent.description}}</div>
                   </div>
                   <v-divider class="white mt-3"></v-divider>
                 </v-card>
@@ -119,26 +149,44 @@
 
           <!-- MEETING EVENTS -->
           <v-tab-item>
-            <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
+            <v-card
+              v-if="dialogMeetingEvents.length > 0"
+              flat
+              class="card-style pa-2"
+              dark
+            >
               <v-container fluid>
                 <v-divider class="white"></v-divider>
                 <v-card
-                  v-for="(particularEvent,index) in dialogMeetingEvents"
+                  v-for="(particularEvent, index) in dialogMeetingEvents"
                   :key="index"
                   class="mt-3 pa-2 card-style white--text elevation-0"
                 >
                   <div>
-                    <div class="headline">{{particularEvent.title}}</div>
-                    <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                    <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
-                    <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
+                    <div class="headline">{{ particularEvent.title }}</div>
+                    <div>
+                      Date Of Event :
+                      {{
+                        moment(particularEvent.dateOfEvent).format(
+                          "DD MMMM, YYYY"
+                        )
+                      }}
+                    </div>
+                    <div v-if="particularEvent.link">
+                      Start Time : {{ particularEvent.startTime }}
+                    </div>
+                    <div v-if="particularEvent.link">
+                      Duration : {{ particularEvent.duration }}
+                    </div>
                     <div v-if="particularEvent.link">
                       Link :
-                      <a :href="particularEvent.link">{{particularEvent.link}}</a>
+                      <a :href="particularEvent.link">{{
+                        particularEvent.link
+                      }}</a>
+                    </div>
+                    <div v-if="particularEvent.description">
+                      Description : {{ particularEvent.description }}
                     </div>
-                    <div
-                      v-if="particularEvent.description"
-                    >Description : {{particularEvent.description}}</div>
                   </div>
                   <v-divider class="white mt-3"></v-divider>
                 </v-card>
@@ -152,22 +200,31 @@
           <v-container fluid>
             <v-divider class="white"></v-divider>
             <v-card
-              v-for="(particularEvent,index) in displayEventsList"
+              v-for="(particularEvent, index) in displayEventsList"
               :key="index"
               class="mt-3 pa-2 card-style white--text elevation-0"
             >
               <div>
-                <div class="headline">{{particularEvent.title}}</div>
-                <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
-                <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
+                <div class="headline">{{ particularEvent.title }}</div>
+                <div>
+                  Date Of Event :
+                  {{
+                    moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")
+                  }}
+                </div>
+                <div v-if="particularEvent.link">
+                  Start Time : {{ particularEvent.startTime }}
+                </div>
+                <div v-if="particularEvent.link">
+                  Duration : {{ particularEvent.duration }}
+                </div>
                 <div v-if="particularEvent.link">
                   Link :
-                  <a :href="particularEvent.link">{{particularEvent.link}}</a>
+                  <a :href="particularEvent.link">{{ particularEvent.link }}</a>
+                </div>
+                <div v-if="particularEvent.description">
+                  Description : {{ particularEvent.description }}
                 </div>
-                <div
-                  v-if="particularEvent.description"
-                >Description : {{particularEvent.description}}</div>
               </div>
               <v-divider class="white mt-3"></v-divider>
             </v-card>
@@ -180,44 +237,80 @@
       <v-flex xs12 sm12 md8>
         <v-container fluid grid-list-xl>
           <!-- ***** Total Students ***** -->
-          <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
+          <v-layout wrap class v-if="$store.state.role != 'PARENT'">
             <v-flex xs12 sm12 md3>
-              <router-link :to="{ name:'Students' }">
+              <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-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' }">
+              <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 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-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' }">
+              <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-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' }">
+              <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-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>
@@ -226,9 +319,11 @@
           <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>
+          >
+            You have no student registered with school
+          </p>
           <!-- ACCOUNT -->
-          <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
+          <v-layout v-if="role == 'SUPERADMIN' || role == 'ADMIN'">
             <v-flex xs12>
               <v-card class="card mt-2 account-Card">
                 <h4>
@@ -240,35 +335,48 @@
                       <template>
                         <v-list-tile>
                           <v-list-tile-avatar>
-                            <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
+                            <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-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-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-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-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-title
+                              >Rs. {{ expenseData.sum }}</v-list-tile-title
+                            >
                           </v-list-tile-content>
                         </v-list-tile>
                       </template>
@@ -293,30 +401,40 @@
           </v-layout>
 
           <!-- FOR ADMIN,TEACHER ROLE  -->
-          <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
+          <v-layout row wrap v-if="role == 'ADMIN' || role == 'TEACHER'">
             <!-- NOTICE -->
             <v-flex xs12 sm6>
               <v-card class="card">
                 <v-container>
-                  <v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title>
+                  <v-card-title class="justify-center title font-weight-bold"
+                    >Notice Board</v-card-title
+                  >
                   <v-layout column>
                     <v-flex
-                      v-for="(item,index) in noticeData"
+                      v-for="(item, index) in noticeData"
                       :key="index"
-                      style="cursor: pointer;"
+                      style="cursor: pointer"
                     >
                       <v-layout column>
                         <!--Date-->
                         <v-flex class="pb-2 pl-2 pr-2">
                           <v-chip
-                            :color="colorsArray[index%colorsArray.length]"
+                            :color="colorsArray[index % colorsArray.length]"
                             text-color="white"
                             class="ma-0"
-                          >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
+                            >{{
+                              moment(item.created).format("DD MMMM, YYYY")
+                            }}</v-chip
+                          >
                         </v-flex>
                         <!-- title -->
                         <v-flex class="pa-2">
-                          <div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>
+                          <div
+                            class="body-1 font-weight-bold px-2"
+                            @click="profile"
+                          >
+                            {{ item.title }}
+                          </div>
                         </v-flex>
 
                         <!-- divider -->
@@ -377,33 +495,55 @@
                 <v-flex>
                   <v-card class="card">
                     <v-container>
-                      <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
+                      <v-card-title
+                        class="justify-center title font-weight-bold"
+                        >School Events</v-card-title
+                      >
                       <div
-                        v-for="(schoolEvent,index) in schoolEvents"
+                        v-for="(schoolEvent, index) in schoolEvents"
                         :key="schoolEvent.title"
                         class="mt-2"
-                        style="cursor: pointer;"
-                        @click="seeEventDetails(schoolEvent,'schoolEvent')"
+                        style="cursor: pointer"
+                        @click="seeEventDetails(schoolEvent, 'schoolEvent')"
                       >
                         <!-- color dot-->
                         <span
-                          :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                          style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                          :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 style="display: inline-block" class="ml-2">
                           <div>
                             <!-- date of event -->
                             <div
                               class="grey--text lighten-1 caption"
                               v-if="schoolEvent.dateOfEvent"
-                            >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                            >
+                              {{
+                                moment(schoolEvent.dateOfEvent).format(
+                                  "DD MMMM, YYYY"
+                                )
+                              }}
+                            </div>
                             <!-- event title-->
-                            <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
+                            <div class="body-1" v-if="schoolEvent.title">
+                              {{ schoolEvent.title }}
+                            </div>
                           </div>
                         </div>
                       </div>
                       <div v-if="schoolEvents.length == 0">
-                        <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                        <p class="text-center title grey lighten-4 error--text">
+                          No Data Found!
+                        </p>
                       </div>
                     </v-container>
                   </v-card>
@@ -411,7 +551,9 @@
                 <!-- apex charts - Male Female data -->
                 <v-flex>
                   <v-card>
-                    <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>
+                    <v-card-title class="justify-center title font-weight-bold"
+                      >Students</v-card-title
+                    >
                     <div id="chart">
                       <apexcharts
                         type="donut"
@@ -430,18 +572,23 @@
             <v-flex xs12>
               <v-card class="elevation-3 card">
                 <v-container>
-                  <v-card-title class="title font-weight-bold justify-center">My Kids</v-card-title>
-                    <v-data-iterator
-                      :items="activeStudentsList"
-                      :rows-per-page-items="rowsPerPageItems"
-                      :pagination.sync="pagination"
-                      content-tag="v-layout"
-                      row
-                      wrap
-                    >
-                      <template v-slot:item="props">
-                        <v-flex xs12 sm6>
-                          <div style="height: 150px; width: 100% display: inline-block;">
+                  <v-card-title class="title font-weight-bold justify-center"
+                    >My Kids</v-card-title
+                  >
+                  <v-data-iterator
+                    :items="activeStudentsList"
+                    :rows-per-page-items="rowsPerPageItems"
+                    :pagination.sync="pagination"
+                    content-tag="v-layout"
+                    row
+                    wrap
+                  >
+                    <template v-slot:item="props">
+                      <v-flex xs12 sm6>
+                        <div
+                          style="height: 150px; width: 100% display: inline-block;"
+                        >
+                          <v-card>
                             <v-layout row wrap>
                               <!-- IMAGE OF ACTIVE STUDENT -->
                               <v-flex xs3 class="text-xs-center">
@@ -469,7 +616,9 @@
                                     <span class="left">Name:</span>
                                   </v-flex>
                                   <v-flex xs9 class="body-1 pa-0 ml-2">
-                                    <span class="left">{{props.item.name}}</span>
+                                    <span class="left">{{
+                                      props.item.name
+                                    }}</span>
                                   </v-flex>
                                 </v-layout>
                                 <!--ROLLNO -->
@@ -478,7 +627,9 @@
                                     <span class="left">Roll No:</span>
                                   </v-flex>
                                   <v-flex xs9 class="body-1 pa-0 ml-2">
-                                    <span class="left">{{props.item.rollNo}}</span>
+                                    <span class="left">{{
+                                      props.item.rollNo
+                                    }}</span>
                                   </v-flex>
                                 </v-layout>
                                 <!--GENDER -->
@@ -487,7 +638,9 @@
                                     <span class="left">Gender:</span>
                                   </v-flex>
                                   <v-flex xs9 class="body-1 pa-0 ml-2">
-                                    <span class="left">{{props.item.gender}}</span>
+                                    <span class="left">{{
+                                      props.item.gender
+                                    }}</span>
                                   </v-flex>
                                 </v-layout>
                                 <!--EMAIL -->
@@ -496,15 +649,18 @@
                                     <span class="left">Email:</span>
                                   </v-flex>
                                   <v-flex xs9 class="body-1 pa-0 ml-2">
-                                    <span class="left">{{props.item.email}}</span>
+                                    <span class="left">{{
+                                      props.item.email
+                                    }}</span>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
-                          </div>
-                        </v-flex>
-                      </template>
-                    </v-data-iterator>
+                          </v-card>
+                        </div>
+                      </v-flex>
+                    </template>
+                  </v-data-iterator>
                 </v-container>
               </v-card>
             </v-flex>
@@ -513,12 +669,17 @@
             <v-flex xs12>
               <v-card class="elevation-3 card">
                 <v-container>
-                  <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
+                  <v-card-title class="justify-center title font-weight-bold"
+                    >My Courses</v-card-title
+                  >
                   <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
+                            v-for="(course, i) in courseData"
+                            :key="i"
+                          >
                             <v-list-tile-avatar>
                               <!-- <v-icon
                               class="account-circle darkBlue-color"
@@ -529,7 +690,11 @@
                                 <v-tooltip top>
                                   <img
                                     slot="activator"
-                                    style="cursor:pointer; width:25px; height:25px; "
+                                    style="
+                                      cursor: pointer;
+                                      width: 25px;
+                                      height: 25px;
+                                    "
                                     src="/static/icon/view.png"
                                     @click="routeToCourseDetails(course._id)"
                                   />
@@ -539,9 +704,10 @@
                             </v-list-tile-avatar>
                             <v-list-tile-content>
                               <v-list-tile-title
-                                style="cursor: pointer;"
+                                style="cursor: pointer"
                                 @click="routeToCourseDetails(course._id)"
-                              >{{ course.courseName }}</v-list-tile-title>
+                                >{{ course.courseName }}</v-list-tile-title
+                              >
                             </v-list-tile-content>
                           </v-list-tile>
                         </template>
@@ -577,28 +743,34 @@
                 <v-container>
                   <v-card-title
                     class="justify-center subheading font-weight-bold"
-                  >Latest Announcements</v-card-title>
+                    >Latest Announcements</v-card-title
+                  >
                   <v-layout column>
                     <v-flex
-                      v-for="(item,index) in annoucementData"
+                      v-for="(item, index) in annoucementData"
                       :key="index"
-                      style="cursor: pointer;"
+                      style="cursor: pointer"
                     >
                       <v-layout column>
                         <!--Date-->
                         <v-flex class="pb-2 pl-2 pr-2">
                           <v-chip
-                            :color="colorsArray[index%colorsArray.length]"
+                            :color="colorsArray[index % colorsArray.length]"
                             text-color="white"
                             class="ma-0"
-                          >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
+                            >{{
+                              moment(item.created).format("DD MMMM, YYYY")
+                            }}</v-chip
+                          >
                         </v-flex>
                         <!-- title -->
                         <v-flex class="pa-2">
                           <div
                             class="body-1 font-weight-bold px-2"
                             @click="profile"
-                          >{{item.discussionType}}</div>
+                          >
+                            {{ item.discussionType }}
+                          </div>
                         </v-flex>
 
                         <!-- divider -->
@@ -618,33 +790,55 @@
                 <v-flex>
                   <v-card class="elevation-3 card">
                     <v-container>
-                      <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
+                      <v-card-title
+                        class="justify-center subheading font-weight-bold"
+                        >School Events</v-card-title
+                      >
                       <div
-                        v-for="(schoolEvent,index) in schoolEvents"
+                        v-for="(schoolEvent, index) in schoolEvents"
                         :key="schoolEvent.title"
                         class="mt-2"
-                        style="cursor: pointer;"
-                        @click="seeEventDetails(schoolEvent,'schoolEvent')"
+                        style="cursor: pointer"
+                        @click="seeEventDetails(schoolEvent, 'schoolEvent')"
                       >
                         <!-- color dot-->
                         <span
-                          :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                          style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                          :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 style="display: inline-block" class="ml-2">
                           <div>
                             <!-- date of event -->
                             <div
                               class="grey--text lighten-1 caption"
                               v-if="schoolEvent.dateOfEvent"
-                            >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                            >
+                              {{
+                                moment(schoolEvent.dateOfEvent).format(
+                                  "DD MMMM, YYYY"
+                                )
+                              }}
+                            </div>
                             <!-- event title-->
-                            <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
+                            <div class="body-1" v-if="schoolEvent.title">
+                              {{ schoolEvent.title }}
+                            </div>
                           </div>
                         </div>
                       </div>
                       <div v-if="schoolEvents.length == 0">
-                        <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                        <p class="text-center title grey lighten-4 error--text">
+                          No Data Found!
+                        </p>
                       </div>
                     </v-container>
                   </v-card>
@@ -689,72 +883,114 @@
                   </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>
+                  <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>
+            <div class="text-xs-center py-3 subheading font-weight-bold">
+              Calender
+            </div>
 
-            <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
+            <vue-event-calendar
+              :events="activityEvents"
+              @day-changed="handleDayChanged($event)"
+            ></vue-event-calendar>
 
             <!-- MEETING EVENTS -->
             <!-- IF ROLE IS ADMIN -->
             <v-card class="my-3 elevation-0">
-              <v-card-text v-if="$store.state.role === 'ADMIN' ">
+              <v-card-text v-if="$store.state.role === 'ADMIN'">
                 <!-- MEETING EVENTS -->
-                <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
+                <v-card-title class="justify-center subheading font-weight-bold"
+                  >Meeting Events</v-card-title
+                >
                 <div
-                  v-for="(activity,index) in activityList"
+                  v-for="(activity, index) in activityList"
                   :key="index"
                   class="mt-2"
-                  style="cursor: pointer;"
+                  style="cursor: pointer"
                   @click="seeEventDetails(activity)"
                 >
                   <span
-                    :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                    style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                    :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 style="display: inline-block" class="ml-2">
                     <div>
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.dateOfEvent"
-                      >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                      <div class="body-1" v-if="activity.title">{{activity.title}}</div>
+                      >
+                        {{
+                          moment(activity.dateOfEvent).format("DD MMMM, YYYY")
+                        }}
+                      </div>
+                      <div class="body-1" v-if="activity.title">
+                        {{ activity.title }}
+                      </div>
                     </div>
                   </div>
                 </div>
                 <div v-if="activityList.length == 0">
-                  <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                  <p class="text-center title grey lighten-4 error--text">
+                    No Data Found!
+                  </p>
                 </div>
               </v-card-text>
 
               <!-- ROLE IS NOT ADMIN -->
               <v-card-text v-if="$store.state.role != 'ADMIN'">
-                <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
+                <v-card-title class="justify-center subheading font-weight-bold"
+                  >Meeting Events</v-card-title
+                >
                 <div
-                  v-for="(activity,index) in activityList"
+                  v-for="(activity, index) in activityList"
                   :key="index"
                   class="mt-2"
-                  style="cursor: pointer;"
+                  style="cursor: pointer"
                   @click="seeEventDetails(activity)"
                 >
                   <span
-                    :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                    style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                    :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 style="display: inline-block" class="ml-2">
                     <!-- MEETING EVENTS FOR PARENT -->
-                    <div v-if="$store.state.role === 'PARENT' ">
+                    <div v-if="$store.state.role === 'PARENT'">
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.meetingEvent"
-                      >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                      <div
-                        class="body-2"
-                        v-if="activity.meetingEvent"
-                      >{{activity.meetingEvent.title}}</div>
+                      >
+                        {{
+                          moment(activity.meetingEvent.dateOfEvent).format(
+                            "DD MMMM, YYYY"
+                          )
+                        }}
+                      </div>
+                      <div class="body-2" v-if="activity.meetingEvent">
+                        {{ activity.meetingEvent.title }}
+                      </div>
                     </div>
 
                     <!-- MEETING EVENTS FOR TEACHER -->
@@ -762,12 +998,20 @@
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.dateOfEvent"
-                      >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                      <div class="body-2" v-if="activity.title">{{activity.title}}</div>
+                      >
+                        {{
+                          moment(activity.dateOfEvent).format("DD MMMM, YYYY")
+                        }}
+                      </div>
+                      <div class="body-2" v-if="activity.title">
+                        {{ activity.title }}
+                      </div>
                     </div>
                   </div>
                   <div v-if="activityList.length == 0">
-                    <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                    <p class="text-center title grey lighten-4 error--text">
+                      No Data Found!
+                    </p>
                   </div>
                 </div>
               </v-card-text>
@@ -781,7 +1025,7 @@
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
           <v-spacer></v-spacer>
-          <v-btn icon @click="dialog= false">
+          <v-btn icon @click="dialog = false">
             <v-icon>close</v-icon>
           </v-btn>
         </v-toolbar>
@@ -799,7 +1043,7 @@
               <v-icon>access_time</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
-              <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
+              <v-list-tile-title>{{ date(selected.start) }}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
-- 
2.0.0