viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 32fcd6960d80b4b108fbdd93938d480e303c33af

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

added logout if all students disabled

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