viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit a26ba60ed36b5093386abb1ebf9cc105b069a54b

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

Added event dialog box

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