viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 019880b6fb2ab5ed46406e7570a9fe5188f203ff

Authored by Amber Dev
1 parent 898c80f271
Exists in master and in 1 other branch ui-design

added students list

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