viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 4fb0af78fa6ac74ba8c0846d5d1fbe75e87c67bf

Authored by Amber Dev
1 parent f31c3fd76f
Exists in master and in 2 other branches amber-development, ui-design

added school events to teacher role

Showing 1 changed file with 25 additions and 23 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style elevation-0" height="600" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <v-layout> 74 <v-layout>
75 <v-flex xs12> 75 <v-flex xs12>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false" 79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80 >cancel</v-icon> 80 >cancel</v-icon>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0"> 83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
84 <v-tabs-slider color="yellow"></v-tabs-slider> 84 <v-tabs-slider color="yellow"></v-tabs-slider>
85 <v-tab v-for="(tab,index) in tabs" :key="index"> 85 <v-tab v-for="(tab,index) in tabs" :key="index">
86 <div class="subheading py-1">{{ tab.name }}</div> 86 <div class="subheading py-1">{{ tab.name }}</div>
87 </v-tab> 87 </v-tab>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab> 88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>--> 89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
90 90
91 <!-- SCHOOL EVENTS--> 91 <!-- SCHOOL EVENTS-->
92 <v-tab-item> 92 <v-tab-item>
93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0"> 93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
94 <v-container fluid> 94 <v-container fluid>
95 <v-divider class="white"></v-divider> 95 <v-divider class="white"></v-divider>
96 <v-card 96 <v-card
97 v-for="(particularEvent,index) in dialogSchoolEvents" 97 v-for="(particularEvent,index) in dialogSchoolEvents"
98 :key="index" 98 :key="index"
99 class="mt-3 pa-2 card-style white--text elevation-0" 99 class="mt-3 pa-2 card-style white--text elevation-0"
100 > 100 >
101 <div> 101 <div>
102 <div class="headline">{{particularEvent.title}}</div> 102 <div class="headline">{{particularEvent.title}}</div>
103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
106 <div v-if="particularEvent.link"> 106 <div v-if="particularEvent.link">
107 Link : 107 Link :
108 <a :href="particularEvent.link">{{particularEvent.link}}</a> 108 <a :href="particularEvent.link">{{particularEvent.link}}</a>
109 </div> 109 </div>
110 <div 110 <div
111 v-if="particularEvent.description" 111 v-if="particularEvent.description"
112 >Description : {{particularEvent.description}}</div> 112 >Description : {{particularEvent.description}}</div>
113 </div> 113 </div>
114 <v-divider class="white mt-3"></v-divider> 114 <v-divider class="white mt-3"></v-divider>
115 </v-card> 115 </v-card>
116 </v-container> 116 </v-container>
117 </v-card> 117 </v-card>
118 </v-tab-item> 118 </v-tab-item>
119 119
120 <!-- MEETING EVENTS --> 120 <!-- MEETING EVENTS -->
121 <v-tab-item> 121 <v-tab-item>
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark> 122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
123 <v-container fluid> 123 <v-container fluid>
124 <v-divider class="white"></v-divider> 124 <v-divider class="white"></v-divider>
125 <v-card 125 <v-card
126 v-for="(particularEvent,index) in dialogMeetingEvents" 126 v-for="(particularEvent,index) in dialogMeetingEvents"
127 :key="index" 127 :key="index"
128 class="mt-3 pa-2 card-style white--text elevation-0" 128 class="mt-3 pa-2 card-style white--text elevation-0"
129 > 129 >
130 <div> 130 <div>
131 <div class="headline">{{particularEvent.title}}</div> 131 <div class="headline">{{particularEvent.title}}</div>
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
135 <div v-if="particularEvent.link"> 135 <div v-if="particularEvent.link">
136 Link : 136 Link :
137 <a :href="particularEvent.link">{{particularEvent.link}}</a> 137 <a :href="particularEvent.link">{{particularEvent.link}}</a>
138 </div> 138 </div>
139 <div 139 <div
140 v-if="particularEvent.description" 140 v-if="particularEvent.description"
141 >Description : {{particularEvent.description}}</div> 141 >Description : {{particularEvent.description}}</div>
142 </div> 142 </div>
143 <v-divider class="white mt-3"></v-divider> 143 <v-divider class="white mt-3"></v-divider>
144 </v-card> 144 </v-card>
145 </v-container> 145 </v-container>
146 </v-card> 146 </v-card>
147 </v-tab-item> 147 </v-tab-item>
148 </v-tabs> 148 </v-tabs>
149 149
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE --> 150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else> 151 <v-card flat class="card-style pa-2 elevation-0" dark v-else>
152 <v-container fluid> 152 <v-container fluid>
153 <v-divider class="white"></v-divider> 153 <v-divider class="white"></v-divider>
154 <v-card 154 <v-card
155 v-for="(particularEvent,index) in displayEventsList" 155 v-for="(particularEvent,index) in displayEventsList"
156 :key="index" 156 :key="index"
157 class="mt-3 pa-2 card-style white--text elevation-0" 157 class="mt-3 pa-2 card-style white--text elevation-0"
158 > 158 >
159 <div> 159 <div>
160 <div class="headline">{{particularEvent.title}}</div> 160 <div class="headline">{{particularEvent.title}}</div>
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
164 <div v-if="particularEvent.link"> 164 <div v-if="particularEvent.link">
165 Link : 165 Link :
166 <a :href="particularEvent.link">{{particularEvent.link}}</a> 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
167 </div> 167 </div>
168 <div 168 <div
169 v-if="particularEvent.description" 169 v-if="particularEvent.description"
170 >Description : {{particularEvent.description}}</div> 170 >Description : {{particularEvent.description}}</div>
171 </div> 171 </div>
172 <v-divider class="white mt-3"></v-divider> 172 <v-divider class="white mt-3"></v-divider>
173 </v-card> 173 </v-card>
174 </v-container> 174 </v-container>
175 </v-card> 175 </v-card>
176 </v-card> 176 </v-card>
177 </v-dialog> 177 </v-dialog>
178 178
179 <v-layout wrap row> 179 <v-layout wrap row>
180 <v-flex xs12 sm12 md8> 180 <v-flex xs12 sm12 md8>
181 <v-container fluid grid-list-xl> 181 <v-container fluid grid-list-xl>
182 <!-- ***** Total Students ***** --> 182 <!-- ***** Total Students ***** -->
183 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
184 <v-flex xs12 sm12 md3> 184 <v-flex xs12 sm12 md3>
185 <router-link :to="{ name:'Students' }"> 185 <router-link :to="{ name:'Students' }">
186 <v-card class="card pink-bgcolor"> 186 <v-card class="card pink-bgcolor">
187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
190 </v-card> 190 </v-card>
191 </router-link> 191 </router-link>
192 </v-flex> 192 </v-flex>
193 <!-- ***** Total Teachers***** --> 193 <!-- ***** Total Teachers***** -->
194 <v-flex xs12 sm12 md3> 194 <v-flex xs12 sm12 md3>
195 <router-link :to="{ name:'Teachers' }"> 195 <router-link :to="{ name:'Teachers' }">
196 <v-card flat class="card elevation-2 firozi-bgcolor"> 196 <v-card flat class="card elevation-2 firozi-bgcolor">
197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
199 199
200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
201 </v-card> 201 </v-card>
202 </router-link> 202 </router-link>
203 </v-flex> 203 </v-flex>
204 <!-- ***** Total Parents ***** --> 204 <!-- ***** Total Parents ***** -->
205 <v-flex xs12 sm12 md3> 205 <v-flex xs12 sm12 md3>
206 <router-link :to="{ name:'Parents' }"> 206 <router-link :to="{ name:'Parents' }">
207 <v-card flat class="card yellow darken-3"> 207 <v-card flat class="card yellow darken-3">
208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
211 </v-card> 211 </v-card>
212 </router-link> 212 </router-link>
213 </v-flex> 213 </v-flex>
214 <!-- ***** Total Class***** --> 214 <!-- ***** Total Class***** -->
215 <v-flex xs12 sm12 md3> 215 <v-flex xs12 sm12 md3>
216 <router-link :to="{ name:'Class' }"> 216 <router-link :to="{ name:'Class' }">
217 <v-card flat class="card darkBlue-bgcolor"> 217 <v-card flat class="card darkBlue-bgcolor">
218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
221 </v-card> 221 </v-card>
222 </router-link> 222 </router-link>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 225
226 <p 226 <p
227 v-if="studentsData.length === 0 && role == 'PARENT'" 227 v-if="studentsData.length === 0 && role == 'PARENT'"
228 class="text-center title grey lighten-4 error--text" 228 class="text-center title grey lighten-4 error--text"
229 >You have no student registered with school</p> 229 >You have no student registered with school</p>
230 <!-- ACCOUNT --> 230 <!-- ACCOUNT -->
231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
232 <v-flex xs12> 232 <v-flex xs12>
233 <v-card class="card mt-2 account-Card"> 233 <v-card class="card mt-2 account-Card">
234 <h4> 234 <h4>
235 <b>Account</b> 235 <b>Account</b>
236 </h4> 236 </h4>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm12 md3> 238 <v-flex xs12 sm12 md3>
239 <v-list two-line> 239 <v-list two-line>
240 <template> 240 <template>
241 <v-list-tile> 241 <v-list-tile>
242 <v-list-tile-avatar> 242 <v-list-tile-avatar>
243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
244 </v-list-tile-avatar> 244 </v-list-tile-avatar>
245 <v-list-tile-content> 245 <v-list-tile-content>
246 <v-list-tile-title class="mt-2"> 246 <v-list-tile-title class="mt-2">
247 <p class="subheading font-color">Fees</p> 247 <p class="subheading font-color">Fees</p>
248 </v-list-tile-title> 248 </v-list-tile-title>
249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
250 </v-list-tile-content> 250 </v-list-tile-content>
251 </v-list-tile> 251 </v-list-tile>
252 <v-list-tile> 252 <v-list-tile>
253 <v-list-tile-avatar> 253 <v-list-tile-avatar>
254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
255 </v-list-tile-avatar> 255 </v-list-tile-avatar>
256 <v-list-tile-content> 256 <v-list-tile-content>
257 <v-list-tile-title class="mt-2"> 257 <v-list-tile-title class="mt-2">
258 <p class="subheading font-color">Collection</p> 258 <p class="subheading font-color">Collection</p>
259 </v-list-tile-title> 259 </v-list-tile-title>
260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
261 </v-list-tile-content> 261 </v-list-tile-content>
262 </v-list-tile> 262 </v-list-tile>
263 <v-list-tile> 263 <v-list-tile>
264 <v-list-tile-avatar> 264 <v-list-tile-avatar>
265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
266 </v-list-tile-avatar> 266 </v-list-tile-avatar>
267 <v-list-tile-content> 267 <v-list-tile-content>
268 <v-list-tile-title class="mt-2"> 268 <v-list-tile-title class="mt-2">
269 <p class="subheading font-color">Expences</p> 269 <p class="subheading font-color">Expences</p>
270 </v-list-tile-title> 270 </v-list-tile-title>
271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
272 </v-list-tile-content> 272 </v-list-tile-content>
273 </v-list-tile> 273 </v-list-tile>
274 </template> 274 </template>
275 </v-list> 275 </v-list>
276 </v-flex> 276 </v-flex>
277 <v-flex xs12 sm12 md9 lg9> 277 <v-flex xs12 sm12 md9 lg9>
278 <div id="chart"> 278 <div id="chart">
279 <div v-if="showChart"> 279 <div v-if="showChart">
280 <apexchart 280 <apexchart
281 type="bar" 281 type="bar"
282 height="250" 282 height="250"
283 style="max-width: 800px !important" 283 style="max-width: 800px !important"
284 :options="chartOptions" 284 :options="chartOptions"
285 :series="series" 285 :series="series"
286 ></apexchart> 286 ></apexchart>
287 </div> 287 </div>
288 </div> 288 </div>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-card> 291 </v-card>
292 </v-flex> 292 </v-flex>
293 </v-layout> 293 </v-layout>
294 294
295 <!-- FOR ADMIN ROLE --> 295 <!-- FOR ADMIN ROLE -->
296 <v-layout row wrap> 296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
297 <!-- NOTICE --> 297 <!-- NOTICE -->
298 <v-flex xs12 sm6> 298 <v-flex xs12 sm6>
299 <v-card class="card" v-if="role == 'ADMIN'"> 299 <v-card class="card">
300 <v-container> 300 <v-container>
301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title> 301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
302 302
303 <v-data-table 303 <v-data-table
304 :items="noticeData" 304 :items="noticeData"
305 class="elevation-0" 305 class="elevation-0"
306 flat 306 flat
307 hide-actions 307 hide-actions
308 hide-headers 308 hide-headers
309 style="border-spacing: 0 !important;" 309 style="border-spacing: 0 !important;"
310 > 310 >
311 <template 311 <template
312 slot="items" 312 slot="items"
313 slot-scope="props" 313 slot-scope="props"
314 v-if="props.index < 5" 314 v-if="props.index < 5"
315 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
316 > 316 >
317 <tr class="td-notice"> 317 <tr class="td-notice">
318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
319 <td> 319 <td>
320 <span class="grey--text caption">{{ date(props.item.created) }}</span> 320 <span class="grey--text caption">{{ date(props.item.created) }}</span>
321 <br /> 321 <br />
322 <span class="body-2">{{ props.item.title}}</span> 322 <span class="body-2">{{ props.item.title}}</span>
323 </td> 323 </td>
324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> --> 324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325 325
326 <td class="text-xs-center"> 326 <td class="text-xs-center">
327 <span> 327 <span>
328 <v-tooltip top> 328 <v-tooltip top>
329 <img 329 <img
330 slot="activator" 330 slot="activator"
331 style="cursor:pointer; width:25px; height:25px; " 331 style="cursor:pointer; width:25px; height:25px; "
332 @click="profile" 332 @click="profile"
333 src="/static/icon/view.png" 333 src="/static/icon/view.png"
334 /> 334 />
335 <span>View</span> 335 <span>View</span>
336 </v-tooltip> 336 </v-tooltip>
337 </span> 337 </span>
338 </td> 338 </td>
339 </tr> 339 </tr>
340 </template> 340 </template>
341 </v-data-table> 341 </v-data-table>
342 </v-container> 342 </v-container>
343 </v-card> 343 </v-card>
344 </v-flex> 344 </v-flex>
345 345
346 <!-- SCHOOL EVENTS --> 346 <!-- SCHOOL EVENTS -->
347 <v-flex xs12 sm6> 347 <v-flex xs12 sm6>
348 <v-card class="card"> 348 <v-card class="card">
349 <v-container> 349 <v-container>
350 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 350 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
351 <div 351 <div
352 v-for="(schoolEvent,index) in schoolEvents" 352 v-for="(schoolEvent,index) in schoolEvents"
353 :key="schoolEvent.title" 353 :key="schoolEvent.title"
354 class="mt-2" 354 class="mt-2"
355 style="cursor: pointer;" 355 style="cursor: pointer;"
356 @click="seeEventDetails(schoolEvent,'schoolEvent')" 356 @click="seeEventDetails(schoolEvent,'schoolEvent')"
357 > 357 >
358 <!-- color dot--> 358 <!-- color dot-->
359 <span 359 <span
360 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 360 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
361 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 361 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
362 ></span> 362 ></span>
363 <div style="display: inline-block;" class="ml-2"> 363 <div style="display: inline-block;" class="ml-2">
364 <div> 364 <div>
365 <!-- date of event --> 365 <!-- date of event -->
366 <div 366 <div
367 class="grey--text lighten-1 caption" 367 class="grey--text lighten-1 caption"
368 v-if="schoolEvent.dateOfEvent" 368 v-if="schoolEvent.dateOfEvent"
369 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 369 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
370 <!-- event title--> 370 <!-- event title-->
371 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 371 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
372 </div> 372 </div>
373 </div> 373 </div>
374 </div> 374 </div>
375 <div v-if="schoolEvents.length == 0"> 375 <div v-if="schoolEvents.length == 0">
376 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 376 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
377 </div> 377 </div>
378 </v-container> 378 </v-container>
379 </v-card> 379 </v-card>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 382
383 <!-- SCHOOL EVENTS --> 383
384 <div></div>
385 384
386 <!-- FOR TEACHER ROLE --> 385 <!-- FOR TEACHER ROLE -->
387 <v-card class="mt-2 card" v-if="role == 'TEACHER'"> 386 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
388 <v-layout> 387 <v-layout>
389 <v-flex xs6 sm6 md6> 388 <v-flex xs6 sm6 md6>
390 <h4 class="pa-3"> 389 <h4 class="pa-3">
391 <b>Notice</b> 390 <b>Notice</b>
392 </h4> 391 </h4>
393 <v-data-table 392 <v-data-table
394 :items="noticeData" 393 :items="noticeData"
395 class="elevation-0" 394 class="elevation-0"
396 flat 395 flat
397 hide-actions 396 hide-actions
398 hide-headers 397 hide-headers
399 style="border-spacing: 0 !important;" 398 style="border-spacing: 0 !important;"
400 > 399 >
401 <template 400 <template
402 slot="items" 401 slot="items"
403 slot-scope="props" 402 slot-scope="props"
404 v-if="props.index < 5" 403 v-if="props.index < 5"
405 style="border-spacing: 0 !important;" 404 style="border-spacing: 0 !important;"
406 > 405 >
407 <tr class="td-notice"> 406 <tr class="td-notice">
408 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 407 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
409 <td> 408 <td>
410 <span class="grey--text caption">{{ date(props.item.created) }}</span> 409 <span class="grey--text caption">{{ date(props.item.created) }}</span>
411 <br /> 410 <br />
412 <span class="body-2">{{ props.item.title}}</span> 411 <span class="body-2">{{ props.item.title}}</span>
413 </td> 412 </td>
414 <td class="grey--text mt-2">{{ props.item.description}}</td> 413 <td class="grey--text mt-2">{{ props.item.description}}</td>
415 414
416 <td class="text-xs-center"> 415 <td class="text-xs-center">
417 <span> 416 <span>
418 <v-tooltip top> 417 <v-tooltip top>
419 <img 418 <img
420 slot="activator" 419 slot="activator"
421 style="cursor:pointer; width:25px; height:25px; " 420 style="cursor:pointer; width:25px; height:25px; "
422 @click="profile" 421 @click="profile"
423 src="/static/icon/view.png" 422 src="/static/icon/view.png"
424 /> 423 />
425 <span>View</span> 424 <span>View</span>
426 </v-tooltip> 425 </v-tooltip>
427 </span> 426 </span>
428 </td> 427 </td>
429 </tr> 428 </tr>
430 </template> 429 </template>
431 </v-data-table> 430 </v-data-table>
432 </v-flex> 431 </v-flex>
433 432
434 <v-flex xs6 sm6 md6> 433 <v-flex xs6 sm6 md6>
435 <v-card-text> 434 <v-card-text>
436 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 435 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
437 <div 436 <div
438 v-for="(activity,index) in activityList" 437 v-for="(activity,index) in activityList"
439 :key="index" 438 :key="index"
440 class="mt-2" 439 class="mt-2"
441 style="cursor: pointer;" 440 style="cursor: pointer;"
442 @click="seeEventDetails(activity)" 441 @click="seeEventDetails(activity)"
443 > 442 >
444 <span 443 <span
445 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 444 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
446 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 445 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
447 ></span> 446 ></span>
448 <div style="display: inline-block;" class="ml-2"> 447 <div style="display: inline-block;" class="ml-2">
449 <div> 448 <div>
450 <div 449 <div
451 class="grey--text lighten-1 caption" 450 class="grey--text lighten-1 caption"
452 v-if="activity.dateOfEvent" 451 v-if="activity.dateOfEvent"
453 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 452 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
454 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 453 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
455 </div> 454 </div>
456 </div> 455 </div>
457 </div> 456 </div>
458 <div v-if="activityList.length == 0"> 457 <div v-if="activityList.length == 0">
459 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 458 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
460 </div> 459 </div>
461 </v-card-text> 460 </v-card-text>
462 </v-flex> 461 </v-flex>
463 </v-layout> 462 </v-layout>
464 </v-card> 463 </v-card> -->
465 464
466 <!-- COURSES --> 465 <!-- COURSES -->
467 <v-layout v-if="role == 'PARENT'"> 466 <v-layout v-if="role == 'PARENT'">
468 <v-flex xs12> 467 <v-flex xs12>
469 <v-card class="card mt-2 account-Card"> 468 <v-card class="card mt-2 account-Card">
470 <h4> 469 <h4>
471 <b>My Courses</b> 470 <b>My Courses</b>
472 </h4> 471 </h4>
473 <v-layout wrap> 472 <v-layout wrap>
474 <v-flex xs12 sm12> 473 <v-flex xs12 sm12>
475 <v-list two-line> 474 <v-list two-line>
476 <template> 475 <template>
477 <v-list-tile v-for="(course,i) in courseData" :key="i"> 476 <v-list-tile v-for="(course,i) in courseData" :key="i">
478 <v-list-tile-avatar> 477 <v-list-tile-avatar>
479 <!-- <v-icon 478 <!-- <v-icon
480 class="account-circle darkBlue-color" 479 class="account-circle darkBlue-color"
481 style="cursor: pointer;" 480 style="cursor: pointer;"
482 @click="routeToCourseDetails(course._id)" 481 @click="routeToCourseDetails(course._id)"
483 >panorama_fish_eye</v-icon>--> 482 >panorama_fish_eye</v-icon>-->
484 <span> 483 <span>
485 <v-tooltip top> 484 <v-tooltip top>
486 <img 485 <img
487 slot="activator" 486 slot="activator"
488 style="cursor:pointer; width:25px; height:25px; " 487 style="cursor:pointer; width:25px; height:25px; "
489 src="/static/icon/view.png" 488 src="/static/icon/view.png"
490 @click="routeToCourseDetails(course._id)" 489 @click="routeToCourseDetails(course._id)"
491 /> 490 />
492 <span>View</span> 491 <span>View</span>
493 </v-tooltip> 492 </v-tooltip>
494 </span> 493 </span>
495 </v-list-tile-avatar> 494 </v-list-tile-avatar>
496 <v-list-tile-content> 495 <v-list-tile-content>
497 <v-list-tile-title 496 <v-list-tile-title
498 style="cursor: pointer;" 497 style="cursor: pointer;"
499 @click="routeToCourseDetails(course._id)" 498 @click="routeToCourseDetails(course._id)"
500 >{{ course.courseName }}</v-list-tile-title> 499 >{{ course.courseName }}</v-list-tile-title>
501 </v-list-tile-content> 500 </v-list-tile-content>
502 </v-list-tile> 501 </v-list-tile>
503 </template> 502 </template>
504 </v-list> 503 </v-list>
505 </v-flex> 504 </v-flex>
506 </v-layout> 505 </v-layout>
507 </v-card> 506 </v-card>
508 </v-flex> 507 </v-flex>
509 </v-layout> 508 </v-layout>
510 <v-layout v-if="role == 'PARENT'"> 509 <v-layout v-if="role == 'PARENT'">
511 <v-flex xs6> 510 <v-flex xs6>
512 <v-card class="mt-2 card"> 511 <v-card class="mt-2 card">
513 <h4 class="pa-3"> 512 <h4 class="pa-3">
514 <b>Latest Annoucements</b> 513 <b>Latest Annoucements</b>
515 </h4> 514 </h4>
516 515
517 <v-data-table 516 <v-data-table
518 :items="annoucementData" 517 :items="annoucementData"
519 class="elevation-0" 518 class="elevation-0"
520 flat 519 flat
521 hide-actions 520 hide-actions
522 hide-headers 521 hide-headers
523 style="border-spacing: 0 !important;" 522 style="border-spacing: 0 !important;"
524 > 523 >
525 <template 524 <template
526 slot="items" 525 slot="items"
527 slot-scope="props" 526 slot-scope="props"
528 v-if="props.index < 5" 527 v-if="props.index < 5"
529 style="border-spacing: 0 !important;" 528 style="border-spacing: 0 !important;"
530 > 529 >
531 <tr class="td-notice"> 530 <tr class="td-notice">
532 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 531 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
533 <td> 532 <td>
534 <span class="grey--text caption">{{ date(props.item.created) }}</span> 533 <span class="grey--text caption">{{ date(props.item.created) }}</span>
535 <br /> 534 <br />
536 <span class="body-2">{{ props.item.discussionType}}</span> 535 <span class="body-2">{{ props.item.discussionType}}</span>
537 </td> 536 </td>
538 <td class="text-xs-center"> 537 <td class="text-xs-center">
539 <span> 538 <span>
540 <v-tooltip top> 539 <v-tooltip top>
541 <img 540 <img
542 slot="activator" 541 slot="activator"
543 style="cursor:pointer; width:25px; height:25px; " 542 style="cursor:pointer; width:25px; height:25px; "
544 src="/static/icon/view.png" 543 src="/static/icon/view.png"
545 /> 544 />
546 <span>View</span> 545 <span>View</span>
547 </v-tooltip> 546 </v-tooltip>
548 </span> 547 </span>
549 </td> 548 </td>
550 </tr> 549 </tr>
551 </template> 550 </template>
552 </v-data-table> 551 </v-data-table>
553 </v-card> 552 </v-card>
554 </v-flex> 553 </v-flex>
555 <v-flex xs6> 554 <v-flex xs6>
556 <v-card class="mt-2 card"> 555 <v-card class="mt-2 card">
557 <h4 class="pa-3"> 556 <h4 class="pa-3">
558 <b>Online User</b> 557 <b>Online User</b>
559 </h4> 558 </h4>
560 559
561 <v-data-table 560 <v-data-table
562 :items="onlineUser" 561 :items="onlineUser"
563 class="elevation-0" 562 class="elevation-0"
564 flat 563 flat
565 hide-actions 564 hide-actions
566 hide-headers 565 hide-headers
567 style="border-spacing: 0 !important;" 566 style="border-spacing: 0 !important;"
568 > 567 >
569 <template 568 <template
570 slot="items" 569 slot="items"
571 slot-scope="props" 570 slot-scope="props"
572 v-if="props.index < 5" 571 v-if="props.index < 5"
573 style="border-spacing: 0 !important;" 572 style="border-spacing: 0 !important;"
574 > 573 >
575 <tr class="td-notice"> 574 <tr class="td-notice">
576 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 575 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
577 <td> 576 <td>
578 <span class="body-2">{{ props.item.user }}</span> 577 <span class="body-2">{{ props.item.user }}</span>
579 </td> 578 </td>
580 <td class="text-xs-center"> 579 <td class="text-xs-center">
581 <span> 580 <span>
582 <v-tooltip top> 581 <v-tooltip top>
583 <img 582 <img
584 slot="activator" 583 slot="activator"
585 style="cursor:pointer; width:25px; height:25px; " 584 style="cursor:pointer; width:25px; height:25px; "
586 src="/static/icon/view.png" 585 src="/static/icon/view.png"
587 /> 586 />
588 <span>View</span> 587 <span>View</span>
589 </v-tooltip> 588 </v-tooltip>
590 </span> 589 </span>
591 </td> 590 </td>
592 </tr> 591 </tr>
593 </template> 592 </template>
594 </v-data-table> 593 </v-data-table>
595 </v-card> 594 </v-card>
596 </v-flex> 595 </v-flex>
597 </v-layout> 596 </v-layout>
598 </v-container> 597 </v-container>
599 </v-flex> 598 </v-flex>
600 <v-spacer></v-spacer> 599 <v-spacer></v-spacer>
601 <!-- SIDE BAR --> 600 <!-- SIDE BAR -->
602 <v-flex xs12 sm12 md4> 601 <v-flex xs12 sm12 md4>
603 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 602 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
604 <v-card-text class="px-2"> 603 <v-card-text class="px-2">
605 <h4 class="text-xs-center py-3"> 604 <h4 class="text-xs-center py-3">
606 <b>Profile</b> 605 <b>Profile</b>
607 </h4> 606 </h4>
608 <v-flex xs12 class="py-3"> 607 <v-flex xs12 class="py-3">
609 <v-layout wrap> 608 <v-layout wrap>
610 <v-flex xs12 sm12 md4> 609 <v-flex xs12 sm12 md4>
611 <img 610 <img
612 src="/static/icon/user.png" 611 src="/static/icon/user.png"
613 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 612 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
614 width="80" 613 width="80"
615 /> 614 />
616 <img 615 <img
617 :src="userData.profilePicUrl" 616 :src="userData.profilePicUrl"
618 onerror="this.src='/static/icon/user.png';" 617 onerror="this.src='/static/icon/user.png';"
619 v-if="userData.profilePicUrl" 618 v-if="userData.profilePicUrl"
620 width="80" 619 width="80"
621 /> 620 />
622 <img 621 <img
623 :src="userData.schoolLogoUrl" 622 :src="userData.schoolLogoUrl"
624 onerror="this.src='/static/icon/user.png';" 623 onerror="this.src='/static/icon/user.png';"
625 v-if="userData.schoolLogoUrl" 624 v-if="userData.schoolLogoUrl"
626 width="80" 625 width="80"
627 /> 626 />
628 </v-flex> 627 </v-flex>
629 <v-flex xs12 sm12 md6> 628 <v-flex xs12 sm12 md6>
630 <p class="mb-0 body-1"> 629 <p class="mb-0 body-1">
631 <i>{{ userData.name }}</i> 630 <i>{{ userData.name }}</i>
632 </p> 631 </p>
633 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 632 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
634 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 633 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
635 <address class="caption grey--text mb-3">{{ userData.address }}</address> 634 <address class="caption grey--text mb-3">{{ userData.address }}</address>
636 </v-flex> 635 </v-flex>
637 </v-layout> 636 </v-layout>
638 </v-flex> 637 </v-flex>
639 <hr /> 638 <hr />
640 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 639 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
641 640
642 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 641 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
643 642
644 <!-- LATEST EVENTS --> 643 <!-- MEETING EVENTS -->
645 <!-- IF ROLE IS ADMIN --> 644 <!-- IF ROLE IS ADMIN -->
646 <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'"> 645 <v-card class="my-3 elevation-0">
647 <v-card-text v-if="$store.state.role === 'ADMIN' "> 646 <v-card-text v-if="$store.state.role === 'ADMIN' ">
648 <!-- MEETING EVENTS --> 647 <!-- MEETING EVENTS -->
649 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 648 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
650 <div 649 <div
651 v-for="(activity,index) in activityList" 650 v-for="(activity,index) in activityList"
652 :key="index" 651 :key="index"
653 class="mt-2" 652 class="mt-2"
654 style="cursor: pointer;" 653 style="cursor: pointer;"
655 @click="seeEventDetails(activity)" 654 @click="seeEventDetails(activity)"
656 > 655 >
657 <span 656 <span
658 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 657 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
659 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 658 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
660 ></span> 659 ></span>
661 <div style="display: inline-block;" class="ml-2"> 660 <div style="display: inline-block;" class="ml-2">
662 <div> 661 <div>
663 <div 662 <div
664 class="grey--text lighten-1 caption" 663 class="grey--text lighten-1 caption"
665 v-if="activity.dateOfEvent" 664 v-if="activity.dateOfEvent"
666 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 665 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
667 <div class="body-1" v-if="activity.title">{{activity.title}}</div> 666 <div class="body-1" v-if="activity.title">{{activity.title}}</div>
668 </div> 667 </div>
669 </div> 668 </div>
670 </div> 669 </div>
671 <div v-if="activityList.length == 0"> 670 <div v-if="activityList.length == 0">
672 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 671 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
673 </div> 672 </div>
674 </v-card-text> 673 </v-card-text>
675 674
676 <!-- ROLE IS NOT ADMIN --> 675 <!-- ROLE IS NOT ADMIN -->
677 <v-card-text v-if="$store.state.role != 'ADMIN'"> 676 <v-card-text v-if="$store.state.role != 'ADMIN'">
678 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 677 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
679 <div 678 <div
680 v-for="(activity,index) in activityList" 679 v-for="(activity,index) in activityList"
681 :key="index" 680 :key="index"
682 class="mt-2" 681 class="mt-2"
683 style="cursor: pointer;" 682 style="cursor: pointer;"
684 @click="seeEventDetails(activity)" 683 @click="seeEventDetails(activity)"
685 > 684 >
686 <span 685 <span
687 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 686 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
688 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 687 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
689 ></span> 688 ></span>
690 <div style="display: inline-block;" class="ml-2"> 689 <div style="display: inline-block;" class="ml-2">
691 <!-- LATEST EVENTS FOR PARENT --> 690 <!-- MEETING EVENTS FOR PARENT -->
692 <div v-if="$store.state.role === 'PARENT' "> 691 <div v-if="$store.state.role === 'PARENT' ">
693 <div 692 <div
694 class="grey--text lighten-1 caption" 693 class="grey--text lighten-1 caption"
695 v-if="activity.meetingEvent" 694 v-if="activity.meetingEvent"
696 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 695 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
697 <div 696 <div
698 class="body-2" 697 class="body-2"
699 v-if="activity.meetingEvent" 698 v-if="activity.meetingEvent"
700 >{{activity.meetingEvent.title}}</div> 699 >{{activity.meetingEvent.title}}</div>
701 </div> 700 </div>
702 701
703 <!-- LATEST EVENTS FOR TEACHER --> 702 <!-- MEETING EVENTS FOR TEACHER -->
704 <div v-if="role === 'TEACHER'"> 703 <div v-if="role === 'TEACHER'">
705 <div 704 <div
706 class="grey--text lighten-1 caption" 705 class="grey--text lighten-1 caption"
707 v-if="activity.dateOfEvent" 706 v-if="activity.dateOfEvent"
708 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 707 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
709 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 708 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
710 </div> 709 </div>
711 </div> 710 </div>
712 <div v-if="activityList.length == 0"> 711 <div v-if="activityList.length == 0">
713 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 712 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
714 </div> 713 </div>
715 </div> 714 </div>
716 </v-card-text> 715 </v-card-text>
717 </v-card> 716 </v-card>
718 </v-card-text> 717 </v-card-text>
719 </v-card> 718 </v-card>
720 </v-flex> 719 </v-flex>
721 </v-layout> 720 </v-layout>
722 721
723 <v-dialog v-model="dialog" max-width="500" persistent> 722 <v-dialog v-model="dialog" max-width="500" persistent>
724 <v-card color="grey lighten-4" flat> 723 <v-card color="grey lighten-4" flat>
725 <v-toolbar dark color="fixcolors"> 724 <v-toolbar dark color="fixcolors">
726 <v-spacer></v-spacer> 725 <v-spacer></v-spacer>
727 <v-btn icon @click="dialog= false"> 726 <v-btn icon @click="dialog= false">
728 <v-icon>close</v-icon> 727 <v-icon>close</v-icon>
729 </v-btn> 728 </v-btn>
730 </v-toolbar> 729 </v-toolbar>
731 <v-flex class="py-4"> 730 <v-flex class="py-4">
732 <v-list-tile> 731 <v-list-tile>
733 <v-list-tile-action> 732 <v-list-tile-action>
734 <v-icon>edit</v-icon> 733 <v-icon>edit</v-icon>
735 </v-list-tile-action> 734 </v-list-tile-action>
736 <v-list-tile-content> 735 <v-list-tile-content>
737 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 736 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
738 </v-list-tile-content> 737 </v-list-tile-content>
739 </v-list-tile> 738 </v-list-tile>
740 <v-list-tile> 739 <v-list-tile>
741 <v-list-tile-action> 740 <v-list-tile-action>
742 <v-icon>access_time</v-icon> 741 <v-icon>access_time</v-icon>
743 </v-list-tile-action> 742 </v-list-tile-action>
744 <v-list-tile-content> 743 <v-list-tile-content>
745 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 744 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
746 </v-list-tile-content> 745 </v-list-tile-content>
747 </v-list-tile> 746 </v-list-tile>
748 </v-flex> 747 </v-flex>
749 </v-card> 748 </v-card>
750 </v-dialog> 749 </v-dialog>
751 </v-app> 750 </v-app>
752 </template> 751 </template>
753 752
754 <script> 753 <script>
755 import http from "@/Services/http.js"; 754 import http from "@/Services/http.js";
756 import moment from "moment"; 755 import moment from "moment";
757 import AllApiCalls from "@/Services/AllApiCalls.js"; 756 import AllApiCalls from "@/Services/AllApiCalls.js";
758 // import { FunctionalCalendar } from "vue-functional-calendar"; 757 // import { FunctionalCalendar } from "vue-functional-calendar";
759 758
760 export default { 759 export default {
761 components: { 760 components: {
762 // FunctionalCalendar 761 // FunctionalCalendar
763 }, 762 },
764 mixins: [AllApiCalls], 763 mixins: [AllApiCalls],
765 data() { 764 data() {
766 return { 765 return {
767 // data: { 766 // data: {
768 // clieckedToday: false 767 // clieckedToday: false
769 // }, 768 // },
770 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 769 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
771 // calendarData: {}, 770 // calendarData: {},
772 // calendar: {}, 771 // calendar: {},
773 772
774 // DIALOG BOX EVENT DETAILS 773 // DIALOG BOX EVENT DETAILS
775 tabs: [ 774 tabs: [
776 { name: "School Events", icon: "mdi-account" }, 775 { name: "School Events", icon: "mdi-account" },
777 { name: "Meeting Events", icon: "mdi-account-outline" }, 776 { name: "Meeting Events", icon: "mdi-account-outline" },
778 ], 777 ],
779 viewEventDetails: false, 778 viewEventDetails: false,
780 active: 0, 779 active: 0,
781 particularEvent: [], 780 particularEvent: [],
782 displayEventsList: [], 781 displayEventsList: [],
783 dialogSchoolEvents: [], 782 dialogSchoolEvents: [],
784 dialogMeetingEvents: [], 783 dialogMeetingEvents: [],
785 784
786 // CALENDER 785 // CALENDER
787 moment: moment, 786 moment: moment,
788 activityEvents: [], 787 activityEvents: [],
789 onlineUser: [ 788 onlineUser: [
790 { 789 {
791 user: "Student Demo", 790 user: "Student Demo",
792 }, 791 },
793 { 792 {
794 user: "Teacher Demo", 793 user: "Teacher Demo",
795 }, 794 },
796 { 795 {
797 user: "Priyansh Gupta", 796 user: "Priyansh Gupta",
798 }, 797 },
799 { 798 {
800 user: "Gaurav Aggarwal", 799 user: "Gaurav Aggarwal",
801 }, 800 },
802 { 801 {
803 user: "Approve Arorra", 802 user: "Approve Arorra",
804 }, 803 },
805 ], 804 ],
806 showLoader: false, 805 showLoader: false,
807 calendarData: {}, 806 calendarData: {},
808 dialog: false, 807 dialog: false,
809 dialogNotice: false, 808 dialogNotice: false,
810 HolidaysList: [], 809 HolidaysList: [],
811 EventsList: [], 810 EventsList: [],
812 events: [], 811 events: [],
813 config: { 812 config: {
814 eventClick: (event) => { 813 eventClick: (event) => {
815 this.selected = event; 814 this.selected = event;
816 this.dialog = true; 815 this.dialog = true;
817 }, 816 },
818 }, 817 },
819 selected: {}, 818 selected: {},
820 barGraph: [], 819 barGraph: [],
821 // notice: {}, 820 // notice: {},
822 userData: {}, 821 userData: {},
823 dated: new Date(2018, 0, 9), 822 dated: new Date(2018, 0, 9),
824 userList: [], 823 userList: [],
825 sectionList: [], 824 sectionList: [],
826 students: "", 825 students: "",
827 parents: "", 826 parents: "",
828 teachers: "", 827 teachers: "",
829 classes: "", 828 classes: "",
830 noticeData: [], 829 noticeData: [],
831 expenseData: [], 830 expenseData: [],
832 feeData: [], 831 feeData: [],
833 collectionData: [], 832 collectionData: [],
834 courseData: [], 833 courseData: [],
835 studentsData: [], 834 studentsData: [],
836 annoucementData: [], 835 annoucementData: [],
837 role: "", 836 role: "",
838 attrs: [ 837 attrs: [
839 { 838 {
840 key: "today", 839 key: "today",
841 highlight: true, 840 highlight: true,
842 dates: new Date(), 841 dates: new Date(),
843 }, 842 },
844 ], 843 ],
845 drawer: true, 844 drawer: true,
846 items: [ 845 items: [
847 { title: "Home", icon: "dashboard" }, 846 { title: "Home", icon: "dashboard" },
848 { title: "About", icon: "question_answer" }, 847 { title: "About", icon: "question_answer" },
849 ], 848 ],
850 right: null, 849 right: null,
851 850
852 series: [ 851 series: [
853 { 852 {
854 name: "Total", 853 name: "Total",
855 data: [], 854 data: [],
856 }, 855 },
857 ], 856 ],
858 showChart: false, 857 showChart: false,
859 chartOptions: { 858 chartOptions: {
860 chart: { 859 chart: {
861 type: "bar", 860 type: "bar",
862 height: 150, 861 height: 150,
863 stacked: true, 862 stacked: true,
864 // animations: { 863 // animations: {
865 // enabled: true, 864 // enabled: true,
866 // easing: "easeinout", 865 // easing: "easeinout",
867 // speed: 1200, 866 // speed: 1200,
868 // animateGradually: { 867 // animateGradually: {
869 // enabled: true, 868 // enabled: true,
870 // delay: 450 869 // delay: 450
871 // }, 870 // },
872 // dynamicAnimation: { 871 // dynamicAnimation: {
873 // enabled: true, 872 // enabled: true,
874 // speed: 450 873 // speed: 450
875 // } 874 // }
876 // } 875 // }
877 }, 876 },
878 plotOptions: { 877 plotOptions: {
879 bar: { 878 bar: {
880 horizontal: false, 879 horizontal: false,
881 columnWidth: "25%", 880 columnWidth: "25%",
882 // endingShape: "rounded", 881 // endingShape: "rounded",
883 distributed: true, 882 distributed: true,
884 }, 883 },
885 }, 884 },
886 responsive: [ 885 responsive: [
887 { 886 {
888 breakpoint: 480, 887 breakpoint: 480,
889 options: { 888 options: {
890 legend: { 889 legend: {
891 position: "bottom", 890 position: "bottom",
892 offsetX: -10, 891 offsetX: -10,
893 offsetY: 0, 892 offsetY: 0,
894 }, 893 },
895 }, 894 },
896 }, 895 },
897 ], 896 ],
898 legend: { 897 legend: {
899 show: false, 898 show: false,
900 }, 899 },
901 colors: ["#7852cc", "#f9a825", "#ff8a89"], 900 colors: ["#7852cc", "#f9a825", "#ff8a89"],
902 dataLabels: { 901 dataLabels: {
903 enabled: false, 902 enabled: false,
904 }, 903 },
905 stroke: { 904 stroke: {
906 show: true, 905 show: true,
907 width: 2, 906 width: 2,
908 colors: ["transparent"], 907 colors: ["transparent"],
909 }, 908 },
910 xaxis: { 909 xaxis: {
911 categories: ["Fee", "Collections", "Expences"], 910 categories: ["Fee", "Collections", "Expences"],
912 }, 911 },
913 yaxis: { 912 yaxis: {
914 title: { 913 title: {
915 text: "", 914 text: "",
916 }, 915 },
917 }, 916 },
918 fill: { 917 fill: {
919 opacity: 1, 918 opacity: 1,
920 }, 919 },
921 tooltip: { 920 tooltip: {
922 y: { 921 y: {
923 formatter: function (val, opts) { 922 formatter: function (val, opts) {
924 return "" + val + " "; 923 return "" + val + " ";
925 }, 924 },
926 }, 925 },
927 }, 926 },
928 }, 927 },
929 928
930 // LATEST ACTIVITY 929 // LATEST ACTIVITY
931 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 930 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
932 activityList: [], 931 activityList: [],
933 }; 932 };
934 }, 933 },
935 934
936 methods: { 935 methods: {
937 test(e) { 936 test(e) {
938 console.log(" test - ", e); 937 console.log(" test - ", e);
939 }, 938 },
940 async handleDayChanged(e) { 939 async handleDayChanged(e) {
941 console.log("event calender - ", e); 940 console.log("event calender - ", e);
942 /*the list of events that will be used in dialog box to display events */ 941 /*the list of events that will be used in dialog box to display events */
943 // this.displayEventsList = []; 942 // this.displayEventsList = [];
944 this.dialogMeetingEvents = []; 943 this.dialogMeetingEvents = [];
945 this.dialogSchoolEvents = []; 944 this.dialogSchoolEvents = [];
946 945
947 for (var i = 0; i < e.events.length; i++) { 946 for (var i = 0; i < e.events.length; i++) {
948 if (e.events[i].eventType == "meetingEvent") { 947 if (e.events[i].eventType == "meetingEvent") {
949 let meetingEventResponse = await this.getParticularMeetingEvent({ 948 let meetingEventResponse = await this.getParticularMeetingEvent({
950 meetingEventId: e.events[i]._id, 949 meetingEventId: e.events[i]._id,
951 }); 950 });
952 this.dialogMeetingEvents.push(meetingEventResponse.data.data); 951 this.dialogMeetingEvents.push(meetingEventResponse.data.data);
953 } 952 }
954 if (e.events[i].eventType == "schoolEvent") { 953 if (e.events[i].eventType == "schoolEvent") {
955 let schoolEventResponse = await this.getParticularSchoolEvent({ 954 let schoolEventResponse = await this.getParticularSchoolEvent({
956 schoolEventId: e.events[i]._id, 955 schoolEventId: e.events[i]._id,
957 }); 956 });
958 this.dialogSchoolEvents.push(schoolEventResponse.data.data); 957 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
959 } 958 }
960 } 959 }
961 960
962 this.viewEventDetails = true; 961 this.viewEventDetails = true;
963 }, 962 },
964 async seeEventDetails(activity, message) { 963 async seeEventDetails(activity, message) {
965 if (this.$store.state.role === "TEACHER") { 964 // if (this.$store.state.role === "TEACHER") {
966 let response = await this.getParticularMeetingEvent({ 965 // let response = await this.getParticularMeetingEvent({
967 meetingEventId: activity._id, 966 // meetingEventId: activity._id,
968 }); 967 // });
969 this.displayEventsList = []; 968 // this.displayEventsList = [];
970 this.displayEventsList.push(response.data.data); 969 // this.displayEventsList.push(response.data.data);
971 this.viewEventDetails = true; 970 // this.viewEventDetails = true;
972 } 971 // }
973 if (this.$store.state.role === "PARENT") { 972 if (this.$store.state.role === "PARENT") {
974 let response = await this.getParticularMeetingEvent({ 973 let response = await this.getParticularMeetingEvent({
975 meetingEventId: activity.meetingEvent._id, 974 meetingEventId: activity.meetingEvent._id,
976 }); 975 });
977 this.displayEventsList = []; 976 this.displayEventsList = [];
978 this.displayEventsList.push(response.data.data); 977 this.displayEventsList.push(response.data.data);
979 this.viewEventDetails = true; 978 this.viewEventDetails = true;
980 } 979 }
981 if (this.$store.state.role === "ADMIN") { 980 if (this.$store.state.role === "ADMIN" || this.$store.state.role === "TEACHER") {
982 if (message == "schoolEvent") { 981 if (message == "schoolEvent") {
983 let response = await this.getParticularSchoolEvent({ 982 let response = await this.getParticularSchoolEvent({
984 schoolEventId: activity._id, 983 schoolEventId: activity._id,
985 }); 984 });
986 this.displayEventsList = []; 985 this.displayEventsList = [];
987 this.displayEventsList.push(response.data.data); 986 this.displayEventsList.push(response.data.data);
988 } else { 987 } else {
989 let response = await this.getParticularMeetingEvent({ 988 let response = await this.getParticularMeetingEvent({
990 meetingEventId: activity._id, 989 meetingEventId: activity._id,
991 }); 990 });
992 this.displayEventsList = []; 991 this.displayEventsList = [];
993 this.displayEventsList.push(response.data.data); 992 this.displayEventsList.push(response.data.data);
994 } 993 }
995 this.viewEventDetails = true; 994 this.viewEventDetails = true;
996 } 995 }
997 }, 996 },
998 async routeToCourseDetails(courseId) { 997 async routeToCourseDetails(courseId) {
999 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 998 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
1000 let response = await this.getParticularCourseDetail(courseId); 999 let response = await this.getParticularCourseDetail(courseId);
1001 1000
1002 /* If the response is null then dont route */ 1001 /* If the response is null then dont route */
1003 if (response.data.data.length > 0) { 1002 if (response.data.data.length > 0) {
1004 this.$router.push({ 1003 this.$router.push({
1005 name: "Course Details", 1004 name: "Course Details",
1006 query: { courseId: courseId }, 1005 query: { courseId: courseId },
1007 }); 1006 });
1008 } else { 1007 } else {
1009 this.seeSnackbar("No Data Available", "warning"); 1008 this.seeSnackbar("No Data Available", "warning");
1010 } 1009 }
1011 }, 1010 },
1012 1011
1013 closeNotice() { 1012 closeNotice() {
1014 this.dialogNotice = false; 1013 this.dialogNotice = false;
1015 }, 1014 },
1016 profile() { 1015 profile() {
1017 // this.editedIndex = this.desserts.indexOf(item); 1016 // this.editedIndex = this.desserts.indexOf(item);
1018 // this.notice = Object.assign({}, item); 1017 // this.notice = Object.assign({}, item);
1019 // this.dialogNotice = true; 1018 // this.dialogNotice = true;
1020 this.$router.push("/noticeBoard"); 1019 this.$router.push("/noticeBoard");
1021 }, 1020 },
1022 date: function (date) { 1021 date: function (date) {
1023 return moment(date).format("MMMM DD, YYYY HH:mm"); 1022 return moment(date).format("MMMM DD, YYYY HH:mm");
1024 }, 1023 },
1025 activityDate(date) { 1024 activityDate(date) {
1026 return moment(date).format("MMMM DD, YYYY"); 1025 return moment(date).format("MMMM DD, YYYY");
1027 }, 1026 },
1028 refreshEvents() { 1027 refreshEvents() {
1029 this.$refs.calendar.$emit("refetch-events"); 1028 this.$refs.calendar.$emit("refetch-events");
1030 }, 1029 },
1031 removeEvent() { 1030 removeEvent() {
1032 this.$refs.calendar.$emit("remove-event", this.selected); 1031 this.$refs.calendar.$emit("remove-event", this.selected);
1033 this.selected = {}; 1032 this.selected = {};
1034 }, 1033 },
1035 eventSelected(event) { 1034 eventSelected(event) {
1036 this.selected = event; 1035 this.selected = event;
1037 }, 1036 },
1038 // eventDropStart: function(event) { 1037 // eventDropStart: function(event) {
1039 // event.editable = false; 1038 // event.editable = false;
1040 // }, 1039 // },
1041 eventCreated(...test) { 1040 eventCreated(...test) {
1042 console.log(test); 1041 console.log(test);
1043 }, 1042 },
1044 getStudents() { 1043 getStudents() {
1045 http() 1044 http()
1046 .get("/getStudentsList") 1045 .get("/getStudentsList")
1047 .then((response) => { 1046 .then((response) => {
1048 this.students = response.data.data; 1047 this.students = response.data.data;
1049 this.showLoader = false; 1048 this.showLoader = false;
1050 }) 1049 })
1051 .catch((error) => { 1050 .catch((error) => {
1052 // console.log("err====>", err); 1051 // console.log("err====>", err);
1053 this.showLoader = false; 1052 this.showLoader = false;
1054 if (error.response.status === 401) { 1053 if (error.response.status === 401) {
1055 this.$router.replace({ path: "/" }); 1054 this.$router.replace({ path: "/" });
1056 this.$store.dispatch("setToken", null); 1055 this.$store.dispatch("setToken", null);
1057 this.$store.dispatch("Id", null); 1056 this.$store.dispatch("Id", null);
1058 } 1057 }
1059 }); 1058 });
1060 }, 1059 },
1061 getParents() { 1060 getParents() {
1062 http() 1061 http()
1063 .get("/getParentsList") 1062 .get("/getParentsList")
1064 .then((response) => { 1063 .then((response) => {
1065 this.parents = response.data.data; 1064 this.parents = response.data.data;
1066 this.showLoader = false; 1065 this.showLoader = false;
1067 }) 1066 })
1068 .catch((error) => { 1067 .catch((error) => {
1069 // console.log("err====>", err); 1068 // console.log("err====>", err);
1070 this.showLoader = false; 1069 this.showLoader = false;
1071 }); 1070 });
1072 }, 1071 },
1073 getTeachers() { 1072 getTeachers() {
1074 http() 1073 http()
1075 .get("/getTeachersList") 1074 .get("/getTeachersList")
1076 .then((response) => { 1075 .then((response) => {
1077 this.teachers = response.data.data; 1076 this.teachers = response.data.data;
1078 this.showLoader = false; 1077 this.showLoader = false;
1079 }) 1078 })
1080 .catch((error) => { 1079 .catch((error) => {
1081 // console.log("err====>", err); 1080 // console.log("err====>", err);
1082 this.showLoader = false; 1081 this.showLoader = false;
1083 }); 1082 });
1084 }, 1083 },
1085 getClasses() { 1084 getClasses() {
1086 http() 1085 http()
1087 .get("/getClassesList") 1086 .get("/getClassesList")
1088 .then((response) => { 1087 .then((response) => {
1089 this.classes = response.data.data; 1088 this.classes = response.data.data;
1090 this.showLoader = false; 1089 this.showLoader = false;
1091 }) 1090 })
1092 .catch((error) => { 1091 .catch((error) => {
1093 this.showLoader = false; 1092 this.showLoader = false;
1094 }); 1093 });
1095 }, 1094 },
1096 getNoticeData() { 1095 getNoticeData() {
1097 this.showLoader = true; 1096 this.showLoader = true;
1098 http() 1097 http()
1099 .get("/getEventsList") 1098 .get("/getEventsList")
1100 .then((response) => { 1099 .then((response) => {
1101 this.noticeData = response.data.data; 1100 this.noticeData = response.data.data;
1102 this.showLoader = false; 1101 this.showLoader = false;
1103 }) 1102 })
1104 .catch((error) => { 1103 .catch((error) => {
1105 this.showLoader = false; 1104 this.showLoader = false;
1106 }); 1105 });
1107 }, 1106 },
1108 getUserData() { 1107 getUserData() {
1109 // this.showLoader = true; 1108 // this.showLoader = true;
1110 if (this.$store.state.role === "PARENT") { 1109 if (this.$store.state.role === "PARENT") {
1111 http() 1110 http()
1112 .get("/getParticularUserDetail", { 1111 .get("/getParticularUserDetail", {
1113 params: { 1112 params: {
1114 studentId: localStorage.getItem("parentStudentId"), 1113 studentId: localStorage.getItem("parentStudentId"),
1115 }, 1114 },
1116 }) 1115 })
1117 .then((response) => { 1116 .then((response) => {
1118 this.userData = response.data.data; 1117 this.userData = response.data.data;
1119 this.showLoader = false; 1118 this.showLoader = false;
1120 }) 1119 })
1121 .catch((error) => { 1120 .catch((error) => {
1122 this.showLoader = false; 1121 this.showLoader = false;
1123 }); 1122 });
1124 } else { 1123 } else {
1125 http() 1124 http()
1126 .get("/getParticularUserDetail") 1125 .get("/getParticularUserDetail")
1127 .then((response) => { 1126 .then((response) => {
1128 this.userData = response.data.data; 1127 this.userData = response.data.data;
1129 this.showLoader = false; 1128 this.showLoader = false;
1130 }) 1129 })
1131 .catch((error) => { 1130 .catch((error) => {
1132 this.showLoader = false; 1131 this.showLoader = false;
1133 }); 1132 });
1134 } 1133 }
1135 }, 1134 },
1136 1135
1137 getFeesAndCollectionsData() { 1136 getFeesAndCollectionsData() {
1138 http() 1137 http()
1139 .get("/getTotalFeesAndCollections") 1138 .get("/getTotalFeesAndCollections")
1140 .then((response) => { 1139 .then((response) => {
1141 this.feeData = response.data.data; 1140 this.feeData = response.data.data;
1142 // this.collectionData = response.data.data; 1141 // this.collectionData = response.data.data;
1143 this.series[0].data[0] = this.feeData.totalFees; 1142 this.series[0].data[0] = this.feeData.totalFees;
1144 this.series[0].data[1] = this.feeData.totalCollection; 1143 this.series[0].data[1] = this.feeData.totalCollection;
1145 this.showLoader = false; 1144 this.showLoader = false;
1146 }) 1145 })
1147 .catch((error) => { 1146 .catch((error) => {
1148 this.showLoader = false; 1147 this.showLoader = false;
1149 }); 1148 });
1150 }, 1149 },
1151 getExpensesData() { 1150 getExpensesData() {
1152 http() 1151 http()
1153 .get("/getTotalExpenses") 1152 .get("/getTotalExpenses")
1154 .then((response) => { 1153 .then((response) => {
1155 this.expenseData = response.data.data; 1154 this.expenseData = response.data.data;
1156 // var array = response.data.data.sum; 1155 // var array = response.data.data.sum;
1157 this.series[0].data[2] = this.expenseData.sum; 1156 this.series[0].data[2] = this.expenseData.sum;
1158 this.showChart = true; 1157 this.showChart = true;
1159 // this.series = [ 1158 // this.series = [
1160 // { 1159 // {
1161 // name: "Total", 1160 // name: "Total",
1162 // data: array 1161 // data: array
1163 // } 1162 // }
1164 // ]; 1163 // ];
1165 this.showLoader = false; 1164 this.showLoader = false;
1166 }) 1165 })
1167 .catch((error) => { 1166 .catch((error) => {
1168 this.showLoader = false; 1167 this.showLoader = false;
1169 }); 1168 });
1170 }, 1169 },
1171 // async getparentStudents() { 1170 // async getparentStudents() {
1172 // this.showLoader = true; 1171 // this.showLoader = true;
1173 // await http() 1172 // await http()
1174 // .get("/parentStudentsList") 1173 // .get("/parentStudentsList")
1175 // .then((response) => { 1174 // .then((response) => {
1176 1175
1177 // /* set values in local storage */ 1176 // /* set values in local storage */
1178 // this.studentsData = response.data.data.students; 1177 // this.studentsData = response.data.data.students;
1179 // this.showLoader = false; 1178 // this.showLoader = false;
1180 // }) 1179 // })
1181 // .catch((err) => { 1180 // .catch((err) => {
1182 // console.log("err====>", err); 1181 // console.log("err====>", err);
1183 // this.showLoader = false; 1182 // this.showLoader = false;
1184 // }); 1183 // });
1185 // await this.getCourses(parentStudentsId, classId); 1184 // await this.getCourses(parentStudentsId, classId);
1186 // await this.getAnnoucementes(classId); 1185 // await this.getAnnoucementes(classId);
1187 // }, 1186 // },
1188 async getCourses(parentStudentsId, classId) { 1187 async getCourses(parentStudentsId, classId) {
1189 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 1188 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1190 await this.getStudentCourses({ 1189 await this.getStudentCourses({
1191 classId: localStorage.getItem("parentClassId"), 1190 classId: localStorage.getItem("parentClassId"),
1192 studentId: localStorage.getItem("parentStudentId"), 1191 studentId: localStorage.getItem("parentStudentId"),
1193 }); 1192 });
1194 }, 1193 },
1195 getAnnoucementes(classId) { 1194 getAnnoucementes(classId) {
1196 this.showLoader = true; 1195 this.showLoader = true;
1197 http() 1196 http()
1198 .get("/getAnnoucementesList", { 1197 .get("/getAnnoucementesList", {
1199 params: { 1198 params: {
1200 classId: localStorage.getItem("parentClassId"), 1199 classId: localStorage.getItem("parentClassId"),
1201 }, 1200 },
1202 }) 1201 })
1203 .then((response) => { 1202 .then((response) => {
1204 this.annoucementData = response.data.data; 1203 this.annoucementData = response.data.data;
1205 this.showLoader = false; 1204 this.showLoader = false;
1206 }) 1205 })
1207 .catch((err) => { 1206 .catch((err) => {
1208 console.log("err====>", err); 1207 console.log("err====>", err);
1209 this.showLoader = false; 1208 this.showLoader = false;
1210 }); 1209 });
1211 }, 1210 },
1212 async getMeetingEventes() { 1211 async getMeetingEventes() {
1213 if (this.role == "TEACHER" || this.role === "ADMIN") { 1212 if (this.role == "TEACHER" || this.role === "ADMIN") {
1214 this.showLoader = true; 1213 this.showLoader = true;
1215 await http() 1214 await http()
1216 .get("/getMeetingEventesList") 1215 .get("/getMeetingEventesList")
1217 .then((response) => { 1216 .then((response) => {
1218 var activityList = response.data.data; 1217 var activityList = response.data.data;
1219 this.activityList = activityList; 1218 this.activityList = activityList;
1220 this.showLoader = false; 1219 this.showLoader = false;
1221 1220
1222 /* set meetingEvents array to highlight event dates in calender */ 1221 /* set meetingEvents in activityEvents array to highlight event dates in calender */
1223 for (var i = 0; i < this.activityList.length; i++) { 1222 for (var i = 0; i < this.activityList.length; i++) {
1224 let obj = {}; 1223 let obj = {};
1225 obj.date = moment(this.activityList[i].dateOfEvent).format( 1224 obj.date = moment(this.activityList[i].dateOfEvent).format(
1226 "YYYY/MM/DD" 1225 "YYYY/MM/DD"
1227 ); 1226 );
1228 obj.title = this.activityList[i].title; 1227 obj.title = this.activityList[i].title;
1229 obj._id = this.activityList[i]._id; 1228 obj._id = this.activityList[i]._id;
1230 obj.eventType = "meetingEvent"; 1229 obj.eventType = "meetingEvent";
1230 /* activityEvents is an array used to display events in calender on particular dates */
1231 this.activityEvents.push(obj); 1231 this.activityEvents.push(obj);
1232 } 1232 }
1233 }) 1233 })
1234 .catch((error) => { 1234 .catch((error) => {
1235 this.showLoader = false; 1235 this.showLoader = false;
1236 }); 1236 });
1237 } 1237 }
1238 if (this.role === "ADMIN") { 1238 /* If role is ADMIN or TEACHER then school events need to be displayed too */
1239 if (this.role === "ADMIN" || this.role === "TEACHER") {
1239 await this.getSchoolEventsList(); 1240 await this.getSchoolEventsList();
1240 /* set schoolEvents array to highlight event dates in calender */ 1241 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1241 for (var i = 0; i < this.schoolEvents.length; i++) { 1242 for (var i = 0; i < this.schoolEvents.length; i++) {
1242 let obj = {}; 1243 let obj = {};
1243 obj.date = moment(this.schoolEvents[i].dateOfEvent).format( 1244 obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1244 "YYYY/MM/DD" 1245 "YYYY/MM/DD"
1245 ); 1246 );
1246 obj.title = this.schoolEvents[i].title; 1247 obj.title = this.schoolEvents[i].title;
1247 obj._id = this.schoolEvents[i]._id; 1248 obj._id = this.schoolEvents[i]._id;
1248 obj.eventType = "schoolEvent"; 1249 obj.eventType = "schoolEvent";
1250 /* activityEvents is an array used to display events in calender on particular dates */
1249 this.activityEvents.push(obj); 1251 this.activityEvents.push(obj);
1250 } 1252 }
1251 } 1253 }
1252 }, 1254 },
1253 }, 1255 },
1254 1256
1255 mounted() { 1257 mounted() {
1256 // = this.$store.state.schoolToken; 1258 // = this.$store.state.schoolToken;
1257 // console.log("this.$store.state.role", this.token); 1259 // console.log("this.$store.state.role", this.token);
1258 // this.getUsersList(); 1260 // this.getUsersList();
1259 }, 1261 },
1260 1262
1261 async created() { 1263 async created() {
1262 if (this.$store.state.role === "ADMIN") { 1264 if (this.$store.state.role === "ADMIN") {
1263 // this.token = this.$store.state.token; 1265 // this.token = this.$store.state.token;
1264 await this.getFeesAndCollectionsData(); 1266 await this.getFeesAndCollectionsData();
1265 await this.getExpensesData(); 1267 await this.getExpensesData();
1266 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1268 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1267 // this.token = this.$store.state.schoolToken; 1269 // this.token = this.$store.state.schoolToken;
1268 await this.getFeesAndCollectionsData(); 1270 await this.getFeesAndCollectionsData();
1269 await this.getExpensesData(); 1271 await this.getExpensesData();
1270 } else if (this.$store.state.role === "TEACHER") { 1272 } else if (this.$store.state.role === "TEACHER") {
1271 // this.token = this.$store.state.token; 1273 // this.token = this.$store.state.token;
1272 } else if (this.$store.state.role === "ACCOUNTANT") { 1274 } else if (this.$store.state.role === "ACCOUNTANT") {
1273 // this.token = this.$store.state.token; 1275 // this.token = this.$store.state.token;
1274 } else if (this.$store.state.role === "LIBRARIAN") { 1276 } else if (this.$store.state.role === "LIBRARIAN") {
1275 // this.token = this.$store.state.token; 1277 // this.token = this.$store.state.token;
1276 } else if (this.$store.state.role === "PARENT") { 1278 } else if (this.$store.state.role === "PARENT") {
1277 // this.token = this.$store.state.token; 1279 // this.token = this.$store.state.token;
1278 // await this.getparentStudents(); 1280 // await this.getparentStudents();
1279 this.studentsData = this.$store.getters.GET_STUDENTS_DATA; 1281 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1280 console.log("students data - ", this.studentsData); 1282 console.log("students data - ", this.studentsData);
1281 await this.getCourses(); 1283 await this.getCourses();
1282 await this.getAnnoucementes(); 1284 await this.getAnnoucementes();
1283 } 1285 }
1284 this.role = this.$store.state.role; 1286 this.role = this.$store.state.role;
1285 1287
1286 await this.getStudents(); 1288 await this.getStudents();
1287 await this.getTeachers(); 1289 await this.getTeachers();
1288 await this.getParents(); 1290 await this.getParents();
1289 await this.getClasses(); 1291 await this.getClasses();
1290 await this.getNoticeData(); 1292 await this.getNoticeData();
1291 await this.getUserData(); 1293 await this.getUserData();
1292 1294
1293 /* get Latest events list for student login*/ 1295 /* get Latest events list for student login*/
1294 if (this.$store.state.role == "PARENT") { 1296 if (this.$store.state.role == "PARENT") {
1295 let response = await this.studentMeetingEvents({ 1297 let response = await this.studentMeetingEvents({
1296 studentId: localStorage.getItem("parentStudentId"), 1298 studentId: localStorage.getItem("parentStudentId"),
1297 }); 1299 });
1298 this.activityList = response.data.data; 1300 this.activityList = response.data.data;
1299 1301
1300 /* set activityEvents array to highlight event dates in calender */ 1302 /* set activityEvents array to highlight event dates in calender */
1301 for (var i = 0; i < this.activityList.length; i++) { 1303 for (var i = 0; i < this.activityList.length; i++) {
1302 let obj = {}; 1304 let obj = {};
1303 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1305 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1304 "YYYY/MM/DD" 1306 "YYYY/MM/DD"
1305 ); 1307 );
1306 obj.title = this.activityList[i].meetingEvent.title; 1308 obj.title = this.activityList[i].meetingEvent.title;
1307 obj._id = this.activityList[i].meetingEvent._id; 1309 obj._id = this.activityList[i].meetingEvent._id;
1308 this.activityEvents.push(obj); 1310 this.activityEvents.push(obj);
1309 } 1311 }
1310 } 1312 }
1311 1313
1312 /* get Latest events list for teacher login*/ 1314 /* get Latest events list for teacher login*/
1313 if (this.role == "TEACHER" || this.role == "ADMIN") { 1315 if (this.role == "TEACHER" || this.role == "ADMIN") {
1314 await this.getMeetingEventes(); 1316 await this.getMeetingEventes();
1315 } 1317 }
1316 }, 1318 },
1317 }; 1319 };
1318 </script> 1320 </script>
1319 1321
1320 <style scoped> 1322 <style scoped>
1321 @import "fullcalendar/dist/fullcalendar.css"; 1323 @import "fullcalendar/dist/fullcalendar.css";
1322 .wrap-text { 1324 .wrap-text {
1323 -webkit-line-clamp: unset !important; 1325 -webkit-line-clamp: unset !important;
1324 } 1326 }
1325 1327
1326 a { 1328 a {
1327 color: white; 1329 color: white;
1328 } 1330 }