viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 610e873a0ea41183ed55b0a5a325dd1f1cea9ae7

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

solved bug regarding getting courses and latest events

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