viithiisys / School-Management-dashboard

Compare View

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