viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit bbd60612f52d5ed6c7602bbe596a93a5613413ec

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

apis to admin

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