viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit e5699315cd8e31dbf038aa32a45b1804e079ba9e

Authored by Shikha Mishra
1 parent d23a27a41e
Exists in master and in 2 other branches amber-development, ui-design

Show latest event in dashboard while admin login

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