viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit e8965626ff9107d062a6e4561ae04e1d7bbba7c7

Authored by Shikha Mishra
1 parent d5fcb1cd16
Exists in master and in 3 other branches amber-development, development, ui-design

set login design and issues solve in other pages

Showing 3 changed files with 11 additions and 7 deletions   Show diff stats
src/pages/Authentication/Login.vue
Diff comments   View file @e896562
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 md6 lg4> 14 <v-flex xs12 sm10 md6 lg4>
15 <v-toolbar dense flat class="transparent mb-4"> 15 <!-- <v-toolbar dense flat class="transparent mb-4">
16 <v-toolbar-items class="mx-auto"> 16 <v-toolbar-items class="mx-auto">
17 <img src="/static/icon.png" height="40" width="140" alt="logo" class="logo" /> 17 <img src="/static/icon.png" height="40" width="140" alt="logo" class="logo" />
18 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> --> 18 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3>
19 </v-toolbar-items> 19 </v-toolbar-items>
20 </v-toolbar> 20 </v-toolbar> -->
21 21
22 <v-card class="elevation-1 pa-1 card" style="background-color: #7852cc" dark> 22 <v-card class="elevation-1 pa-1 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="400" 27 width="300"
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 my-4 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 v-model.trim="userLogincredentials.email" 35 v-model.trim="userLogincredentials.email"
36 :rules="nameRules" 36 :rules="nameRules"
37 placeholder="Enter your email" 37 placeholder="Enter your email"
38 required 38 required
39 ></v-text-field> 39 ></v-text-field>
40 <label class="title">Password</label> 40 <label class="title">Password</label>
41 <v-text-field 41 <v-text-field
42 :rules="[rules.required]" 42 :rules="[rules.required]"
43 v-model.trim="userLogincredentials.password" 43 v-model.trim="userLogincredentials.password"
44 :append-icon="e1 ? 'visibility_off' : 'visibility'" 44 :append-icon="e1 ? 'visibility_off' : 'visibility'"
45 :append-icon-cb="() => (e1 = !e1)" 45 :append-icon-cb="() => (e1 = !e1)"
46 :type="e1 ? 'password' : 'text'" 46 :type="e1 ? 'password' : 'text'"
47 name="input-10-1" 47 name="input-10-1"
48 placeholder="Enter Your password" 48 placeholder="Enter Your password"
49 @keyup.enter="login" 49 @keyup.enter="login"
50 counter 50 counter
51 ></v-text-field> 51 ></v-text-field>
52 </v-form> 52 </v-form>
53 <v-layout row wrap> 53 <v-layout row wrap>
54 <v-flex xs6> 54 <v-flex xs6>
55 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 55 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
56 </v-flex> 56 </v-flex>
57 <v-flex xs6> 57 <v-flex xs6>
58 <h5 class="right mt-4"> 58 <h5 class="right mt-4">
59 <router-link class="link" to="/forgetpassword">Forgot password</router-link> 59 <router-link class="link" to="/forgetpassword">Forgot password</router-link>
60 </h5> 60 </h5>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-flex> 63 </v-flex>
64 </v-card-text> 64 </v-card-text>
65 <v-layout> 65 <v-layout>
66 <v-flex sm12 class="my-3"> 66 <v-flex sm12 class="my-3">
67 <v-btn 67 <v-btn
68 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;" 68 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
69 dark 69 dark
70 flat 70 flat
71 @click="login" 71 @click="login"
72 :loading="loading" 72 :loading="loading"
73 >Login</v-btn> 73 >Login</v-btn>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 <v-layout></v-layout> 76 <v-layout></v-layout>
77 </v-card> 77 </v-card>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-container> 80 </v-container>
81 </v-content> 81 </v-content>
82 </v-app> 82 </v-app>
83 </template> 83 </template>
84 84
85 <script> 85 <script>
86 import http from "@/Services/http.js"; 86 import http from "@/Services/http.js";
87 export default { 87 export default {
88 data() { 88 data() {
89 return { 89 return {
90 snackbar: false, 90 snackbar: false,
91 y: "top", 91 y: "top",
92 x: "right", 92 x: "right",
93 mode: "", 93 mode: "",
94 timeout: 3000, 94 timeout: 3000,
95 text: "", 95 text: "",
96 append: "", 96 append: "",
97 e1: true, 97 e1: true,
98 loading: false, 98 loading: false,
99 remember: false, 99 remember: false,
100 valid: false, 100 valid: false,
101 userLogincredentials: {}, 101 userLogincredentials: {},
102 nameRules: [v => !!v || "Username is required"], 102 nameRules: [v => !!v || "Username is required"],
103 password: "", 103 password: "",
104 email: "", 104 email: "",
105 rules: { 105 rules: {
106 required: value => !!value || "password is Required." 106 required: value => !!value || "password is Required."
107 } 107 }
108 }; 108 };
109 }, 109 },
110 methods: { 110 methods: {
111 login() { 111 login() {
112 this.loading = true; 112 this.loading = true;
113 var userdata = { 113 var userdata = {
114 email: this.userLogincredentials.email, 114 email: this.userLogincredentials.email,
115 password: this.userLogincredentials.password 115 password: this.userLogincredentials.password
116 }; 116 };
117 http() 117 http()
118 .post("/schoolLogin", userdata) 118 .post("/schoolLogin", userdata)
119 .then(response => { 119 .then(response => {
120 // console.log("token",response.data.data); 120 // console.log("token",response.data.data);
121 this.loading = false; 121 this.loading = false;
122 if (response.data.data.role === "ADMIN") { 122 if (response.data.data.role === "ADMIN") {
123 this.$store.dispatch("setToken", response.data.data.token); 123 this.$store.dispatch("setToken", response.data.data.token);
124 this.$store.dispatch("Id", response.data.data.id); 124 this.$store.dispatch("Id", response.data.data.id);
125 this.$store.dispatch("Role", response.data.data.role); 125 this.$store.dispatch("Role", response.data.data.role);
126 this.$router.push("/dashboard"); 126 this.$router.push("/dashboard");
127 } else if (response.data.data.role === "SUPERADMIN") { 127 } else if (response.data.data.role === "SUPERADMIN") {
128 this.$store.dispatch("setSchoolRole", response.data.data.role); 128 this.$store.dispatch("setSchoolRole", response.data.data.role);
129 this.$store.dispatch("setSchoolToken", response.data.data.token); 129 this.$store.dispatch("setSchoolToken", response.data.data.token);
130 this.$router.push("/schooldashboard"); 130 this.$router.push("/schooldashboard");
131 } else if (response.data.data.role === "TEACHER") { 131 } else if (response.data.data.role === "TEACHER") {
132 // console.log("teacher", response.data.data.role); 132 // console.log("teacher", response.data.data.role);
133 this.$store.dispatch("setToken", response.data.data.token); 133 this.$store.dispatch("setToken", response.data.data.token);
134 this.$store.dispatch("Id", response.data.data.id); 134 this.$store.dispatch("Id", response.data.data.id);
135 this.$store.dispatch("Role", response.data.data.role); 135 this.$store.dispatch("Role", response.data.data.role);
136 this.$router.push("/dashboard"); 136 this.$router.push("/dashboard");
137 } else if (response.data.data.role === "LIBRARIAN") { 137 } else if (response.data.data.role === "LIBRARIAN") {
138 this.$store.dispatch("setToken", response.data.data.token); 138 this.$store.dispatch("setToken", response.data.data.token);
139 this.$store.dispatch("Id", response.data.data.id); 139 this.$store.dispatch("Id", response.data.data.id);
140 this.$store.dispatch("Role", response.data.data.role); 140 this.$store.dispatch("Role", response.data.data.role);
141 this.$router.push("/dashboard"); 141 this.$router.push("/dashboard");
142 } else if (response.data.data.role === "ACCOUNTANT") { 142 } else if (response.data.data.role === "ACCOUNTANT") {
143 this.$store.dispatch("setToken", response.data.data.token); 143 this.$store.dispatch("setToken", response.data.data.token);
144 this.$store.dispatch("Id", response.data.data.id); 144 this.$store.dispatch("Id", response.data.data.id);
145 this.$store.dispatch("Role", response.data.data.role); 145 this.$store.dispatch("Role", response.data.data.role);
146 this.$router.push("/dashboard"); 146 this.$router.push("/dashboard");
147 } 147 }
148 }) 148 })
149 .catch(error => { 149 .catch(error => {
150 if (error) { 150 if (error) {
151 this.text = "Server appears to be offline"; 151 this.text = "Server appears to be offline";
152 this.snackbar = true; 152 this.snackbar = true;
153 this.loading = false; 153 this.loading = false;
154 } 154 }
155 if (error.response.data.message) { 155 if (error.response.data.message) {
156 this.text = error.response.data.message; 156 this.text = error.response.data.message;
157 this.snackbar = true; 157 this.snackbar = true;
158 } 158 }
159 this.loading = false; 159 this.loading = false;
160 }); 160 });
161 } 161 }
162 }, 162 },
163 mounted() { 163 mounted() {
164 // if (this.$store.state.isUserLoggedIn == true) { 164 // if (this.$store.state.isUserLoggedIn == true) {
165 // this.$router.push("/dashboard"); 165 // this.$router.push("/dashboard");
166 // } 166 // }
167 // else if (this.$store.state.isSchoolLoggedIn == true) { 167 // else if (this.$store.state.isSchoolLoggedIn == true) {
168 // this.$router.push("/dashboard"); 168 // this.$router.push("/dashboard");
169 // } 169 // }
170 }, 170 },
171 computed: { 171 computed: {
172 color() { 172 color() {
173 return this.loading ? "success" : "error"; 173 return this.loading ? "success" : "error";
174 } 174 }
175 } 175 }
176 }; 176 };
177 </script> 177 </script>
178 178
179 <style scoped lang="css"> 179 <style scoped lang="css">
180 #login { 180 #login {
181 width: 100%; 181 width: 100%;
182 position: absolute; 182 position: absolute;
183 top: 0; 183 top: 0;
184 left: 0; 184 left: 0;
185 content: ""; 185 content: "";
186 z-index: 0; 186 z-index: 0;
187 } 187 }
188 </style> 188 </style>
189 <style scoped> 189 <style scoped>
190 .schoolLogo { 190 .schoolLogo {
191 height: 60%; 191 height: 60%;
192 padding-left: 31%; 192 padding-left: 31%;
193 } 193 }
194 /* img { 194 /* img {
195 position: absolute; 195 position: absolute;
196 top: 13px; 196 top: 13px;
197 left: 8px; 197 left: 8px;
198 } */ 198 } */
199 .v-btn--large { 199 .v-btn--large {
200 padding: 0px 84px; 200 padding: 0px 84px;
201 } 201 }
202 .link { 202 .link {
203 text-decoration: none; 203 text-decoration: none;
204 } 204 }
205 a { 205 a {
206 color: #fff; 206 color: #fff;
207 } 207 }
208 .mt-4 { 208 .mt-4 {
209 margin-top: 21px !important; 209 margin-top: 21px !important;
210 } 210 }
211 @media screen and (max-width: 600px) { 211 @media screen and (max-width: 600px) {
212 img { 212 img {
213 left: 10px; 213 left: 10px;
214 height: 34px; 214 height: 34px;
215 width: 120px; 215 width: 120px;
216 } 216 }
217 .logo { 217 .logo {
218 height: 56px; 218 height: 56px;
219 left: 10px; 219 left: 10px;
220 width: 120px; 220 width: 120px;
221 } 221 }
222 .logoSchool { 222 .logoSchool {
223 height: 87px; 223 height: 87px;
224 left: 10px; 224 left: 10px;
225 width: 120px; 225 width: 120px;
226 } 226 }
227 } 227 }
228 </style> 228 </style>
src/pages/Exam/examSchedule.vue
Diff comments   View file @e896562
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Exam Schedule****** --> 3 <!-- ****** Edit Exam Schedule****** -->
4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable> 4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Exam Schedule</label> 8 <label class="title text-xs-center">Edit Exam Schedule</label>
9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12> 16 <v-flex xs12 sm12>
17 <v-layout> 17 <v-layout>
18 <v-flex xs4 class="pt-4 subheading"> 18 <v-flex xs4 class="pt-4 subheading">
19 <label class="right">Exam Name:</label> 19 <label class="right">Exam Name:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs7 class="ml-3"> 21 <v-flex xs7 class="ml-3">
22 <v-select 22 <v-select
23 :rules="examRules" 23 :rules="examRules"
24 :items="examList" 24 :items="examList"
25 v-model="editedItem.examId" 25 v-model="editedItem.examId"
26 label="Select your Exam Name" 26 label="Select your Exam Name"
27 item-text="examName" 27 item-text="examName"
28 item-value="_id" 28 item-value="_id"
29 ></v-select> 29 ></v-select>
30 </v-flex> 30 </v-flex>
31 </v-layout> 31 </v-layout>
32 </v-flex> 32 </v-flex>
33 <v-flex xs12 sm12> 33 <v-flex xs12 sm12>
34 <v-layout> 34 <v-layout>
35 <v-flex xs4 class="pt-4 subheading"> 35 <v-flex xs4 class="pt-4 subheading">
36 <label class="right">Class:</label> 36 <label class="right">Class:</label>
37 </v-flex> 37 </v-flex>
38 <v-flex xs7 class="ml-3"> 38 <v-flex xs7 class="ml-3">
39 <v-select 39 <v-select
40 v-model="editedItem.classId" 40 v-model="editedItem.classId"
41 label="Select your Class" 41 label="Select your Class"
42 type="text" 42 type="text"
43 :items="classList" 43 :items="classList"
44 item-text="classNum" 44 item-text="classNum"
45 item-value="_id" 45 item-value="_id"
46 @change="getSections(editedItem.classId)" 46 @change="getSections(editedItem.classId)"
47 required 47 required
48 ></v-select> 48 ></v-select>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-flex> 51 </v-flex>
52 <v-flex xs12 sm12> 52 <v-flex xs12 sm12>
53 <v-layout> 53 <v-layout>
54 <v-flex xs4 class="pt-4 subheading"> 54 <v-flex xs4 class="pt-4 subheading">
55 <label class="right">Subject Name:</label> 55 <label class="right">Subject Name:</label>
56 </v-flex> 56 </v-flex>
57 <v-flex xs7 class="ml-3"> 57 <v-flex xs7 class="ml-3">
58 <v-select 58 <v-select
59 :items="subjects" 59 :items="subjects"
60 label="Select your Subject" 60 label="Select your Subject"
61 v-model="editedItem.subjectName" 61 v-model="editedItem.subjectName"
62 item-text="subjectName" 62 item-text="subjectName"
63 item-value="subjectName" 63 item-value="subjectName"
64 name="Select Subject" 64 name="Select Subject"
65 required 65 required
66 ></v-select> 66 ></v-select>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Date:</label> 73 <label class="right">Date:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs7 class="ml-3"> 75 <v-flex xs7 class="ml-3">
76 <v-menu 76 <v-menu
77 ref="editDate" 77 ref="editDate"
78 :close-on-content-click="false" 78 :close-on-content-click="false"
79 v-model="editDate" 79 v-model="editDate"
80 :nudge-right="40" 80 :nudge-right="40"
81 :return-value.sync="editDate" 81 :return-value.sync="editDate"
82 lazy 82 lazy
83 transition="scale-transition" 83 transition="scale-transition"
84 offset-y 84 offset-y
85 full-width 85 full-width
86 min-width="290px" 86 min-width="290px"
87 > 87 >
88 <v-text-field 88 <v-text-field
89 slot="activator" 89 slot="activator"
90 v-model="editedItem.date" 90 v-model="editedItem.date"
91 label="Select Date" 91 label="Select Date"
92 append-icon="event" 92 append-icon="event"
93 readonly 93 readonly
94 ></v-text-field> 94 ></v-text-field>
95 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> 95 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
96 </v-menu> 96 </v-menu>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 </v-flex> 99 </v-flex>
100 <v-flex xs12 sm12> 100 <v-flex xs12 sm12>
101 <v-layout> 101 <v-layout>
102 <v-flex xs4 class="pt-4 subheading"> 102 <v-flex xs4 class="pt-4 subheading">
103 <label class="right">Time From:</label> 103 <label class="right">Time From:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs7 class="ml-3"> 105 <v-flex xs7 class="ml-3">
106 <v-menu 106 <v-menu
107 ref="menuEdit" 107 ref="menuEdit"
108 :close-on-content-click="false" 108 :close-on-content-click="false"
109 v-model="menuEdit" 109 v-model="menuEdit"
110 :nudge-right="40" 110 :nudge-right="40"
111 :return-value.sync="editedItem.timeFrom" 111 :return-value.sync="editedItem.timeFrom"
112 lazy 112 lazy
113 transition="scale-transition" 113 transition="scale-transition"
114 offset-y 114 offset-y
115 full-width 115 full-width
116 max-width="290px" 116 max-width="290px"
117 min-width="290px" 117 min-width="290px"
118 > 118 >
119 <v-text-field 119 <v-text-field
120 slot="activator" 120 slot="activator"
121 v-model="editedItem.timeFrom" 121 v-model="editedItem.timeFrom"
122 label="Select your time From" 122 label="Select your time From"
123 append-icon="access_time" 123 append-icon="access_time"
124 readonly 124 readonly
125 ></v-text-field> 125 ></v-text-field>
126 <v-time-picker 126 <v-time-picker
127 v-model="editedItem.timeIn" 127 v-model="editedItem.timeIn"
128 @change="$refs.menuEdit.save(editedItem.timeIn)" 128 @change="$refs.menuEdit.save(editedItem.timeIn)"
129 ></v-time-picker> 129 ></v-time-picker>
130 </v-menu> 130 </v-menu>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex> 133 </v-flex>
134 <v-flex xs12 sm12> 134 <v-flex xs12 sm12>
135 <v-layout> 135 <v-layout>
136 <v-flex xs4 class="pt-4 subheading"> 136 <v-flex xs4 class="pt-4 subheading">
137 <label class="right">Time To:</label> 137 <label class="right">Time To:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs7 class="ml-3"> 139 <v-flex xs7 class="ml-3">
140 <v-menu 140 <v-menu
141 ref="timeToEdit" 141 ref="timeToEdit"
142 :close-on-content-click="false" 142 :close-on-content-click="false"
143 v-model="timeToEdit" 143 v-model="timeToEdit"
144 :nudge-right="40" 144 :nudge-right="40"
145 :return-value.sync="editedItem.timeTo" 145 :return-value.sync="editedItem.timeTo"
146 lazy 146 lazy
147 transition="scale-transition" 147 transition="scale-transition"
148 offset-y 148 offset-y
149 full-width 149 full-width
150 max-width="290px" 150 max-width="290px"
151 min-width="290px" 151 min-width="290px"
152 > 152 >
153 <v-text-field 153 <v-text-field
154 slot="activator" 154 slot="activator"
155 v-model="editedItem.timeTo" 155 v-model="editedItem.timeTo"
156 label="Select your Time To" 156 label="Select your Time To"
157 append-icon="access_time" 157 append-icon="access_time"
158 readonly 158 readonly
159 ></v-text-field> 159 ></v-text-field>
160 <v-time-picker 160 <v-time-picker
161 v-model="editedItem.timeTo" 161 v-model="editedItem.timeTo"
162 @change="$refs.timeToEdit.save(editedItem.timeTo)" 162 @change="$refs.timeToEdit.save(editedItem.timeTo)"
163 ></v-time-picker> 163 ></v-time-picker>
164 </v-menu> 164 </v-menu>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 <v-flex xs12 sm12> 168 <v-flex xs12 sm12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right">Room:</label> 171 <label class="right">Room:</label>
172 </v-flex> 172 </v-flex>
173 <v-flex xs7 class="ml-3"> 173 <v-flex xs7 class="ml-3">
174 <v-text-field 174 <v-text-field
175 placeholder="fill your room" 175 placeholder="fill your room"
176 v-model="editedItem.room" 176 v-model="editedItem.room"
177 @keyup.enter="save" 177 @keyup.enter="save"
178 ></v-text-field> 178 ></v-text-field>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs12> 184 <v-flex xs12>
185 <v-card-actions> 185 <v-card-actions>
186 <v-spacer></v-spacer> 186 <v-spacer></v-spacer>
187 <v-btn round dark @click="save" class="add-button">Save</v-btn> 187 <v-btn round dark @click="update" class="add-button">Save</v-btn>
188 </v-card-actions> 188 </v-card-actions>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-container> 191 </v-container>
192 </v-form> 192 </v-form>
193 </v-card-text> 193 </v-card-text>
194 </v-card> 194 </v-card>
195 </v-dialog> 195 </v-dialog>
196 196
197 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 197 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
198 198
199 <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> 199 <v-dialog v-model="profileExamScheduleDialog" max-width="600px">
200 <v-card flat class="card-style pa-3" dark> 200 <v-card flat class="card-style pa-3" dark>
201 <v-layout> 201 <v-layout>
202 <v-flex xs12> 202 <v-flex xs12>
203 <label class="title text-xs-center">View Exam Schedule</label> 203 <label class="title text-xs-center">View Exam Schedule</label>
204 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> 204 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 <v-card-text> 207 <v-card-text>
208 <v-container grid-list-md> 208 <v-container grid-list-md>
209 <v-layout wrap> 209 <v-layout wrap>
210 <v-flex> 210 <v-flex>
211 <v-layout> 211 <v-layout>
212 <v-flex xs5 sm6> 212 <v-flex xs5 sm6>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Exam Name:</b> 214 <b>Exam Name:</b>
215 </h5> 215 </h5>
216 </v-flex> 216 </v-flex>
217 <v-flex sm6 xs8> 217 <v-flex sm6 xs8>
218 <h5 class="my-1">{{ editedItem.examId}}</h5> 218 <h5 class="my-1">{{ editedItem.examId}}</h5>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 <v-layout> 221 <v-layout>
222 <v-flex xs5 sm6> 222 <v-flex xs5 sm6>
223 <h5 class="right my-1"> 223 <h5 class="right my-1">
224 <b>Class:</b> 224 <b>Class:</b>
225 </h5> 225 </h5>
226 </v-flex> 226 </v-flex>
227 <v-flex sm6 xs8> 227 <v-flex sm6 xs8>
228 <h5 class="my-1">{{ editedItem.classId }}</h5> 228 <h5 class="my-1">{{ editedItem.classId }}</h5>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 <v-layout> 231 <v-layout>
232 <v-flex xs5 sm6> 232 <v-flex xs5 sm6>
233 <h5 class="right my-1"> 233 <h5 class="right my-1">
234 <b>Section:</b> 234 <b>Section:</b>
235 </h5> 235 </h5>
236 </v-flex> 236 </v-flex>
237 <v-flex sm6 xs8> 237 <v-flex sm6 xs8>
238 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 238 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 <v-layout> 241 <v-layout>
242 <v-flex xs5 sm6> 242 <v-flex xs5 sm6>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Subject Name:</b> 244 <b>Subject Name:</b>
245 </h5> 245 </h5>
246 </v-flex> 246 </v-flex>
247 <v-flex sm6 xs8> 247 <v-flex sm6 xs8>
248 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 248 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 <v-layout> 251 <v-layout>
252 <v-flex xs5 sm6> 252 <v-flex xs5 sm6>
253 <h5 class="right my-1"> 253 <h5 class="right my-1">
254 <b>Date:</b> 254 <b>Date:</b>
255 </h5> 255 </h5>
256 </v-flex> 256 </v-flex>
257 <v-flex sm6 xs8> 257 <v-flex sm6 xs8>
258 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 258 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 <v-layout> 261 <v-layout>
262 <v-flex xs5 sm6> 262 <v-flex xs5 sm6>
263 <h5 class="right my-1"> 263 <h5 class="right my-1">
264 <b>Time From:</b> 264 <b>Time From:</b>
265 </h5> 265 </h5>
266 </v-flex> 266 </v-flex>
267 <v-flex sm6 xs8> 267 <v-flex sm6 xs8>
268 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 268 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 <v-layout> 271 <v-layout>
272 <v-flex xs5 sm6> 272 <v-flex xs5 sm6>
273 <h5 class="right my-1"> 273 <h5 class="right my-1">
274 <b>Time To:</b> 274 <b>Time To:</b>
275 </h5> 275 </h5>
276 </v-flex> 276 </v-flex>
277 <v-flex sm6 xs8> 277 <v-flex sm6 xs8>
278 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 278 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
279 </v-flex> 279 </v-flex>
280 </v-layout> 280 </v-layout>
281 <v-layout> 281 <v-layout>
282 <v-flex xs5 sm6> 282 <v-flex xs5 sm6>
283 <h5 class="right my-1"> 283 <h5 class="right my-1">
284 <b>Room:</b> 284 <b>Room:</b>
285 </h5> 285 </h5>
286 </v-flex> 286 </v-flex>
287 <v-flex sm6 xs8> 287 <v-flex sm6 xs8>
288 <h5 class="my-1">{{ editedItem.room }}</h5> 288 <h5 class="my-1">{{ editedItem.room }}</h5>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-flex> 291 </v-flex>
292 </v-layout> 292 </v-layout>
293 </v-container> 293 </v-container>
294 </v-card-text> 294 </v-card-text>
295 </v-card> 295 </v-card>
296 </v-dialog> 296 </v-dialog>
297 <!-- ***** Exam Schedule TABLE****** --> 297 <!-- ***** Exam Schedule TABLE****** -->
298 <v-toolbar color="transparent" flat> 298 <v-toolbar color="transparent" flat>
299 <v-btn 299 <v-btn
300 fab 300 fab
301 dark 301 dark
302 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 302 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
303 small 303 small
304 @click="addExamScheduleDialog = true" 304 @click="addExamScheduleDialog = true"
305 > 305 >
306 <v-icon dark>add</v-icon> 306 <v-icon dark>add</v-icon>
307 </v-btn> 307 </v-btn>
308 <v-btn 308 <v-btn
309 v-if="role != 'TEACHER' " 309 v-if="role != 'TEACHER' "
310 round 310 round
311 class="open-dialog-button hidden-sm-only hidden-xs-only" 311 class="open-dialog-button hidden-sm-only hidden-xs-only"
312 dark 312 dark
313 @click="addExamScheduleDialog = true" 313 @click="addExamScheduleDialog = true"
314 > 314 >
315 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule 315 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
316 </v-btn> 316 </v-btn>
317 <v-spacer></v-spacer> 317 <v-spacer></v-spacer>
318 <v-flex xs8 sm3 md2 class="mr-3"> 318 <v-flex xs8 sm3 md2 class="mr-3">
319 <v-select 319 <v-select
320 v-model="getScheduleData.classId" 320 v-model="getScheduleData.classId"
321 label="Select your class" 321 label="Select your class"
322 type="text" 322 type="text"
323 :items="classList" 323 :items="classList"
324 item-text="classNum" 324 item-text="classNum"
325 item-value="_id" 325 item-value="_id"
326 @change="getSchedulesList()" 326 @change="getSchedulesList()"
327 required 327 required
328 ></v-select> 328 ></v-select>
329 </v-flex> 329 </v-flex>
330 <v-card-title class="body-1" v-show="show"> 330 <v-card-title class="body-1" v-show="show">
331 <v-btn icon large flat @click="displaySearch"> 331 <v-btn icon large flat @click="displaySearch">
332 <v-avatar size="27"> 332 <v-avatar size="27">
333 <img src="/static/icon/search.png" alt="icon" /> 333 <img src="/static/icon/search.png" alt="icon" />
334 </v-avatar> 334 </v-avatar>
335 </v-btn> 335 </v-btn>
336 </v-card-title> 336 </v-card-title>
337 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 337 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
338 <v-layout> 338 <v-layout>
339 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 339 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
340 <v-icon @click="closeSearch" color="error">close</v-icon> 340 <v-icon @click="closeSearch" color="error">close</v-icon>
341 </v-layout> 341 </v-layout>
342 </v-flex> 342 </v-flex>
343 </v-toolbar> 343 </v-toolbar>
344 <v-data-table 344 <v-data-table
345 :headers="headers" 345 :headers="headers"
346 :items="ScheduleData" 346 :items="ScheduleData"
347 :pagination.sync="pagination" 347 :pagination.sync="pagination"
348 :search="search" 348 :search="search"
349 > 349 >
350 <template slot="items" slot-scope="props"> 350 <template slot="items" slot-scope="props">
351 <tr class="tr"> 351 <tr class="tr">
352 <td class="td td-row">{{ props.index + 1}}</td> 352 <td class="td td-row">{{ props.index + 1}}</td>
353 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> 353 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>
354 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> 354 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
355 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> 355 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
356 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 356 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
357 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 357 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
358 <td class="td td-row text-xs-center">{{ props.item.room }}</td> 358 <td class="td td-row text-xs-center">{{ props.item.room }}</td>
359 <td class="td td-row text-xs-center"> 359 <td class="td td-row text-xs-center">
360 <span> 360 <span>
361 <v-tooltip top > 361 <v-tooltip top >
362 <img 362 <img
363 slot="activator" 363 slot="activator"
364 style="cursor:pointer; width:25px; height:25px; " 364 style="cursor:pointer; width:25px; height:25px; "
365 class="mr-3" 365 class="mr-3"
366 @click="profile(props.item)" 366 @click="profile(props.item)"
367 src="/static/icon/view.png" 367 src="/static/icon/view.png"
368 /> 368 />
369 <span>View</span> 369 <span>View</span>
370 </v-tooltip> 370 </v-tooltip>
371 <v-tooltip top v-if="role != 'TEACHER' "> 371 <v-tooltip top v-if="role != 'TEACHER' ">
372 <img 372 <img
373 slot="activator" 373 slot="activator"
374 style="cursor:pointer; width:20px; height:18px; " 374 style="cursor:pointer; width:20px; height:18px; "
375 class="mr-3" 375 class="mr-3"
376 @click="editItem(props.item)" 376 @click="editItem(props.item)"
377 src="/static/icon/edit.png" 377 src="/static/icon/edit.png"
378 /> 378 />
379 <span>Edit</span> 379 <span>Edit</span>
380 </v-tooltip> 380 </v-tooltip>
381 <v-tooltip top v-if="role != 'TEACHER' "> 381 <v-tooltip top v-if="role != 'TEACHER' ">
382 <img 382 <img
383 slot="activator" 383 slot="activator"
384 style="cursor:pointer; width:20px; height:20px; " 384 style="cursor:pointer; width:20px; height:20px; "
385 @click="deleteSchedule(props.item)" 385 @click="deleteSchedule(props.item)"
386 src="/static/icon/delete.png" 386 src="/static/icon/delete.png"
387 /> 387 />
388 <span>Delete</span> 388 <span>Delete</span>
389 </v-tooltip> 389 </v-tooltip>
390 </span> 390 </span>
391 </td> 391 </td>
392 </tr> 392 </tr>
393 </template> 393 </template>
394 <v-alert 394 <v-alert
395 slot="no-results" 395 slot="no-results"
396 :value="true" 396 :value="true"
397 color="error" 397 color="error"
398 icon="warning" 398 icon="warning"
399 >Your search for "{{ search }}" found no results.</v-alert> 399 >Your search for "{{ search }}" found no results.</v-alert>
400 </v-data-table> 400 </v-data-table>
401 401
402 <!-- ****** ADD Exam Schedule ****** --> 402 <!-- ****** ADD Exam Schedule ****** -->
403 <v-dialog v-model="addExamScheduleDialog" max-width="600"> 403 <v-dialog v-model="addExamScheduleDialog" max-width="600">
404 <v-card flat class="card-style pa-2" dark> 404 <v-card flat class="card-style pa-2" dark>
405 <v-layout> 405 <v-layout>
406 <v-flex xs12> 406 <v-flex xs12>
407 <label class="title text-xs-center">Add Exam Schedule</label> 407 <label class="title text-xs-center">Add Exam Schedule</label>
408 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> 408 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-form ref="form" v-model="valid" lazy-validation> 411 <v-form ref="form" v-model="valid" lazy-validation>
412 <v-container fluid> 412 <v-container fluid>
413 <v-flex xs12> 413 <v-flex xs12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs5 class="pt-4 subheading"> 415 <v-flex xs5 class="pt-4 subheading">
416 <label class="right">Exam Name:</label> 416 <label class="right">Exam Name:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs7 sm7 md6 class="ml-3"> 418 <v-flex xs7 sm7 md6 class="ml-3">
419 <v-select 419 <v-select
420 label="Select your Exam Name" 420 label="Select your Exam Name"
421 :rules="examRules" 421 :rules="examRules"
422 :items="examList" 422 :items="examList"
423 v-model="addSchedule.examId" 423 v-model="addSchedule.examId"
424 item-text="examName" 424 item-text="examName"
425 item-value="_id" 425 item-value="_id"
426 ></v-select> 426 ></v-select>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 </v-flex> 429 </v-flex>
430 <v-flex xs12> 430 <v-flex xs12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 class="pt-4 subheading"> 432 <v-flex xs5 class="pt-4 subheading">
433 <label class="right">Class:</label> 433 <label class="right">Class:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs7 sm7 md6 class="ml-3"> 435 <v-flex xs7 sm7 md6 class="ml-3">
436 <v-select 436 <v-select
437 v-model="addSchedule.classId" 437 v-model="addSchedule.classId"
438 label="Select your class" 438 label="Select your class"
439 type="text" 439 type="text"
440 :items="classList" 440 :items="classList"
441 item-text="classNum" 441 item-text="classNum"
442 item-value="_id" 442 item-value="_id"
443 :rules="classRules" 443 :rules="classRules"
444 @change="getSections(addSchedule.classId)" 444 @change="getSections(addSchedule.classId)"
445 required 445 required
446 ></v-select> 446 ></v-select>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 </v-flex> 449 </v-flex>
450 <v-flex xs12> 450 <v-flex xs12>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 class="pt-4 subheading"> 452 <v-flex xs5 class="pt-4 subheading">
453 <label class="right">Section:</label> 453 <label class="right">Section:</label>
454 </v-flex> 454 </v-flex>
455 <v-flex xs7 sm7 md6 class="ml-3"> 455 <v-flex xs7 sm7 md6 class="ml-3">
456 <v-select 456 <v-select
457 :items="addSection" 457 :items="addSection"
458 label="Select Section" 458 label="Select Section"
459 v-model="addSchedule.sectionId" 459 v-model="addSchedule.sectionId"
460 item-text="name" 460 item-text="name"
461 item-value="_id" 461 item-value="_id"
462 name="Select Section" 462 name="Select Section"
463 :rules="sectionRules" 463 :rules="sectionRules"
464 required 464 required
465 ></v-select> 465 ></v-select>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 <v-flex xs12> 469 <v-flex xs12>
470 <v-layout> 470 <v-layout>
471 <v-flex xs5 class="pt-4 subheading"> 471 <v-flex xs5 class="pt-4 subheading">
472 <label class="right">Subject Name:</label> 472 <label class="right">Subject Name:</label>
473 </v-flex> 473 </v-flex>
474 <v-flex xs7 sm7 md6 class="ml-3"> 474 <v-flex xs7 sm7 md6 class="ml-3">
475 <v-select 475 <v-select
476 :items="subjects" 476 :items="subjects"
477 label="Select Subject" 477 label="Select Subject"
478 v-model="addSchedule.subjectName" 478 v-model="addSchedule.subjectName"
479 item-text="subjectName" 479 item-text="subjectName"
480 item-value="subjectName" 480 item-value="subjectName"
481 name="Select Section" 481 name="Select Section"
482 :rules="subjectRules" 482 :rules="subjectRules"
483 required 483 required
484 ></v-select> 484 ></v-select>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-flex xs12> 488 <v-flex xs12>
489 <v-layout> 489 <v-layout>
490 <v-flex xs5 class="pt-4 subheading"> 490 <v-flex xs5 class="pt-4 subheading">
491 <label class="right">Date:</label> 491 <label class="right">Date:</label>
492 </v-flex> 492 </v-flex>
493 <v-flex xs7 sm7 md6 class="ml-3"> 493 <v-flex xs7 sm7 md6 class="ml-3">
494 <v-menu 494 <v-menu
495 ref="menu2" 495 ref="menu2"
496 :close-on-content-click="false" 496 :close-on-content-click="false"
497 v-model="menu2" 497 v-model="menu2"
498 :nudge-right="40" 498 :nudge-right="40"
499 :return-value.sync="addSchedule.date" 499 :return-value.sync="addSchedule.date"
500 lazy 500 lazy
501 transition="scale-transition" 501 transition="scale-transition"
502 offset-y 502 offset-y
503 full-width 503 full-width
504 min-width="290px" 504 min-width="290px"
505 > 505 >
506 <v-text-field 506 <v-text-field
507 slot="activator" 507 slot="activator"
508 v-model="addSchedule.date" 508 v-model="addSchedule.date"
509 :rules="examScheduleDateRules" 509 :rules="examScheduleDateRules"
510 label="Select Date" 510 label="Select Date"
511 append-icon="event" 511 append-icon="event"
512 readonly 512 readonly
513 ></v-text-field> 513 ></v-text-field>
514 <v-date-picker 514 <v-date-picker
515 v-model="addSchedule.date" 515 v-model="addSchedule.date"
516 @input="$refs.menu2.save(addSchedule.date)" 516 @input="$refs.menu2.save(addSchedule.date)"
517 ></v-date-picker> 517 ></v-date-picker>
518 </v-menu> 518 </v-menu>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 <v-flex xs12> 522 <v-flex xs12>
523 <v-layout> 523 <v-layout>
524 <v-flex xs5 class="pt-4 subheading"> 524 <v-flex xs5 class="pt-4 subheading">
525 <label class="right">Time From:</label> 525 <label class="right">Time From:</label>
526 </v-flex> 526 </v-flex>
527 <v-flex xs7 sm7 md6 class="ml-3"> 527 <v-flex xs7 sm7 md6 class="ml-3">
528 <v-menu 528 <v-menu
529 ref="menuA" 529 ref="menuA"
530 :close-on-content-click="false" 530 :close-on-content-click="false"
531 v-model="menuB" 531 v-model="menuB"
532 :nudge-right="40" 532 :nudge-right="40"
533 :return-value.sync="addSchedule.timeFrom" 533 :return-value.sync="addSchedule.timeFrom"
534 lazy 534 lazy
535 transition="scale-transition" 535 transition="scale-transition"
536 offset-y 536 offset-y
537 full-width 537 full-width
538 max-width="290px" 538 max-width="290px"
539 min-width="290px" 539 min-width="290px"
540 > 540 >
541 <v-text-field 541 <v-text-field
542 slot="activator" 542 slot="activator"
543 v-model="addSchedule.timeIn" 543 v-model="addSchedule.timeIn"
544 label="Select your time From" 544 label="Select your time From"
545 append-icon="access_time" 545 append-icon="access_time"
546 :rules="timeInRules" 546 :rules="timeInRules"
547 readonly 547 readonly
548 ></v-text-field> 548 ></v-text-field>
549 <v-time-picker 549 <v-time-picker
550 v-model="addSchedule.timeIn" 550 v-model="addSchedule.timeIn"
551 @change="$refs.menuA.save(addSchedule.timeIn)" 551 @change="$refs.menuA.save(addSchedule.timeIn)"
552 ></v-time-picker> 552 ></v-time-picker>
553 </v-menu> 553 </v-menu>
554 </v-flex> 554 </v-flex>
555 </v-layout> 555 </v-layout>
556 </v-flex> 556 </v-flex>
557 <v-flex xs12> 557 <v-flex xs12>
558 <v-layout> 558 <v-layout>
559 <v-flex xs5 class="pt-4 subheading"> 559 <v-flex xs5 class="pt-4 subheading">
560 <label class="right">Time To:</label> 560 <label class="right">Time To:</label>
561 </v-flex> 561 </v-flex>
562 <v-flex xs7 sm7 md6 class="ml-3"> 562 <v-flex xs7 sm7 md6 class="ml-3">
563 <v-menu 563 <v-menu
564 ref="menu" 564 ref="menu"
565 :close-on-content-click="false" 565 :close-on-content-click="false"
566 v-model="menu1" 566 v-model="menu1"
567 :nudge-right="40" 567 :nudge-right="40"
568 :return-value.sync="addSchedule.timeTo" 568 :return-value.sync="addSchedule.timeTo"
569 lazy 569 lazy
570 transition="scale-transition" 570 transition="scale-transition"
571 offset-y 571 offset-y
572 full-width 572 full-width
573 max-width="290px" 573 max-width="290px"
574 min-width="290px" 574 min-width="290px"
575 > 575 >
576 <v-text-field 576 <v-text-field
577 slot="activator" 577 slot="activator"
578 v-model="addSchedule.timeTo" 578 v-model="addSchedule.timeTo"
579 label="Select your Time To" 579 label="Select your Time To"
580 append-icon="access_time" 580 append-icon="access_time"
581 :rules="timeOutRules" 581 :rules="timeOutRules"
582 readonly 582 readonly
583 ></v-text-field> 583 ></v-text-field>
584 <v-time-picker 584 <v-time-picker
585 v-model="addSchedule.timeTo" 585 v-model="addSchedule.timeTo"
586 @change="$refs.menu.save(addSchedule.timeTo)" 586 @change="$refs.menu.save(addSchedule.timeTo)"
587 ></v-time-picker> 587 ></v-time-picker>
588 </v-menu> 588 </v-menu>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 </v-flex> 591 </v-flex>
592 <v-flex xs12> 592 <v-flex xs12>
593 <v-layout> 593 <v-layout>
594 <v-flex xs5 class="pt-4 subheading"> 594 <v-flex xs5 class="pt-4 subheading">
595 <label class="right">Room:</label> 595 <label class="right">Room:</label>
596 </v-flex> 596 </v-flex>
597 <v-flex xs7 sm7 md6 class="ml-3"> 597 <v-flex xs7 sm7 md6 class="ml-3">
598 <v-text-field 598 <v-text-field
599 placeholder="fill your room" 599 placeholder="fill your room"
600 :rules="roomRules" 600 :rules="roomRules"
601 v-model="addSchedule.room" 601 v-model="addSchedule.room"
602 @keyup.enter="submit" 602 @keyup.enter="submit"
603 ></v-text-field> 603 ></v-text-field>
604 </v-flex> 604 </v-flex>
605 </v-layout> 605 </v-layout>
606 </v-flex> 606 </v-flex>
607 <v-layout> 607 <v-layout>
608 <v-flex xs12> 608 <v-flex xs12>
609 <v-card-actions> 609 <v-card-actions>
610 <v-spacer class="hidden-xs-only"></v-spacer> 610 <v-spacer class="hidden-xs-only"></v-spacer>
611 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 611 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
612 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 612 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
613 </v-card-actions> 613 </v-card-actions>
614 </v-flex> 614 </v-flex>
615 </v-layout> 615 </v-layout>
616 </v-container> 616 </v-container>
617 </v-form> 617 </v-form>
618 </v-card> 618 </v-card>
619 </v-dialog> 619 </v-dialog>
620 <v-snackbar 620 <v-snackbar
621 :timeout="timeout" 621 :timeout="timeout"
622 :top="y === 'top'" 622 :top="y === 'top'"
623 :right="x === 'right'" 623 :right="x === 'right'"
624 :vertical="mode === 'vertical'" 624 :vertical="mode === 'vertical'"
625 v-model="snackbar" 625 v-model="snackbar"
626 :color="color" 626 :color="color"
627 >{{ text }}</v-snackbar> 627 >{{ text }}</v-snackbar>
628 <div class="loader" v-if="showLoader"> 628 <div class="loader" v-if="showLoader">
629 <v-progress-circular indeterminate color="white"></v-progress-circular> 629 <v-progress-circular indeterminate color="white"></v-progress-circular>
630 </div> 630 </div>
631 </v-container> 631 </v-container>
632 </template> 632 </template>
633 633
634 <script> 634 <script>
635 import http from "@/Services/http.js"; 635 import http from "@/Services/http.js";
636 import moment from "moment"; 636 import moment from "moment";
637 637
638 export default { 638 export default {
639 data: () => ({ 639 data: () => ({
640 snackbar: false, 640 snackbar: false,
641 date: null, 641 date: null,
642 editDate: false, 642 editDate: false,
643 menu1: false, 643 menu1: false,
644 menuB: false, 644 menuB: false,
645 menu2: false, 645 menu2: false,
646 menuEdit: false, 646 menuEdit: false,
647 timeToEdit: false, 647 timeToEdit: false,
648 show: true, 648 show: true,
649 showSearch: false, 649 showSearch: false,
650 addExamScheduleDialog: false, 650 addExamScheduleDialog: false,
651 color: "", 651 color: "",
652 y: "top", 652 y: "top",
653 x: "right", 653 x: "right",
654 mode: "", 654 mode: "",
655 timeout: 10000, 655 timeout: 10000,
656 text: "", 656 text: "",
657 loading: false, 657 loading: false,
658 date: null, 658 date: null,
659 search: "", 659 search: "",
660 showLoader: false, 660 showLoader: false,
661 editExamScheduleDialog: false, 661 editExamScheduleDialog: false,
662 profileExamScheduleDialog: false, 662 profileExamScheduleDialog: false,
663 valid: true, 663 valid: true,
664 role: "", 664 role: "",
665 pagination: { 665 pagination: {
666 rowsPerPage: 10 666 rowsPerPage: 10
667 }, 667 },
668 examRules: [v => !!v || "Exam Name is required"], 668 examRules: [v => !!v || "Exam Name is required"],
669 classRules: [v => !!v || "Class Name is required"], 669 classRules: [v => !!v || "Class Name is required"],
670 sectionRules: [v => !!v || "section is required"], 670 sectionRules: [v => !!v || "section is required"],
671 subjectRules: [v => !!v || "Subject is required"], 671 subjectRules: [v => !!v || "Subject is required"],
672 timeInRules: [v => !!v || "Time In is required"], 672 timeInRules: [v => !!v || "Time In is required"],
673 timeOutRules: [v => !!v || "time Out s is required"], 673 timeOutRules: [v => !!v || "time Out s is required"],
674 roomRules: [v => !!v || "Room is required"], 674 roomRules: [v => !!v || "Room is required"],
675 examScheduleDateRules: [v => !!v || "Date is required"], 675 examScheduleDateRules: [v => !!v || "Date is required"],
676 headers: [ 676 headers: [
677 { 677 {
678 align: "", 678 align: "",
679 text: "No", 679 text: "No",
680 sortable: false, 680 sortable: false,
681 value: "No" 681 value: "No"
682 }, 682 },
683 { 683 {
684 text: "Exam Name", 684 text: "Exam Name",
685 vaue: "examId.examName", 685 vaue: "examId.examName",
686 sortable: false, 686 sortable: false,
687 align: "center" 687 align: "center"
688 }, 688 },
689 { 689 {
690 text: "Class", 690 text: "Class",
691 value: "classId.classNum", 691 value: "classId.classNum",
692 sortable: false, 692 sortable: false,
693 align: "center" 693 align: "center"
694 }, 694 },
695 // { 695 // {
696 // text: "Section", 696 // text: "Section",
697 // value: "sectionId.name", 697 // value: "sectionId.name",
698 // sortable: false, 698 // sortable: false,
699 // align: "center" 699 // align: "center"
700 // }, 700 // },
701 { 701 {
702 text: "Subject Name", 702 text: "Subject Name",
703 value: "subjectName", 703 value: "subjectName",
704 sortable: false, 704 sortable: false,
705 align: "center" 705 align: "center"
706 }, 706 },
707 { 707 {
708 text: "Date", 708 text: "Date",
709 value: "date", 709 value: "date",
710 sortable: false, 710 sortable: false,
711 align: "center" 711 align: "center"
712 }, 712 },
713 { 713 {
714 text: "Time", 714 text: "Time",
715 value: "timeFrom", 715 value: "timeFrom",
716 sortable: false, 716 sortable: false,
717 align: "center" 717 align: "center"
718 }, 718 },
719 { 719 {
720 text: "Room", 720 text: "Room",
721 value: "room", 721 value: "room",
722 sortable: false, 722 sortable: false,
723 align: "center" 723 align: "center"
724 }, 724 },
725 { text: "Action", value: "", sortable: false, align: "center"} 725 { text: "Action", value: "", sortable: false, align: "center"}
726 ], 726 ],
727 classList: [], 727 classList: [],
728 addSection: [], 728 addSection: [],
729 examList: [], 729 examList: [],
730 subjects: [], 730 subjects: [],
731 addSchedule: {}, 731 addSchedule: {},
732 editedItem: { 732 editedItem: {
733 sectionId: { 733 sectionId: {
734 name: "" 734 name: ""
735 } 735 }
736 }, 736 },
737 getScheduleData: {}, 737 getScheduleData: {},
738 ScheduleData: [], 738 ScheduleData: [],
739 token: "" 739 token: ""
740 }), 740 }),
741 methods: { 741 methods: {
742 dates: function(date) { 742 dates: function(date) {
743 return moment(date).format("MMMM DD, YYYY"); 743 return moment(date).format("MMMM DD, YYYY");
744 }, 744 },
745 pickFile() { 745 pickFile() {
746 this.$refs.image.click(); 746 this.$refs.image.click();
747 }, 747 },
748 getSchedulesList() { 748 getSchedulesList() {
749 this.showLoader = true; 749 this.showLoader = true;
750 http() 750 http()
751 .get("/getSchedulesList", { 751 .get("/getSchedulesList", {
752 params: { classId: this.getScheduleData.classId }, 752 params: { classId: this.getScheduleData.classId },
753 headers: { Authorization: "Bearer " + this.token } 753 headers: { Authorization: "Bearer " + this.token }
754 }) 754 })
755 .then(response => { 755 .then(response => {
756 this.ScheduleData = response.data.data; 756 this.ScheduleData = response.data.data;
757 // console.log("this.ScheduleData", this.ScheduleData); 757 // console.log("this.ScheduleData", this.ScheduleData);
758 this.showLoader = false; 758 this.showLoader = false;
759 }) 759 })
760 .catch(error => { 760 .catch(error => {
761 // console.log("err====>", err); 761 // console.log("err====>", err);
762 this.showLoader = false; 762 this.showLoader = false;
763 this.loadingSearch = false; 763 this.loadingSearch = false;
764 this.snackbar = true; 764 this.snackbar = true;
765 this.text = error.response.data.message; 765 this.text = error.response.data.message;
766 if (error.response.status === 401) { 766 if (error.response.status === 401) {
767 this.$router.replace({ path: "/" }); 767 this.$router.replace({ path: "/" });
768 this.$store.dispatch("setToken", null); 768 this.$store.dispatch("setToken", null);
769 this.$store.dispatch("Id", null); 769 this.$store.dispatch("Id", null);
770 } 770 }
771 }); 771 });
772 }, 772 },
773 editItem(item) { 773 editItem(item) {
774 // console.log("item", item); 774 // console.log("item", item);
775 this.editedIndex = this.ScheduleData.indexOf(item); 775 this.editedIndex = this.ScheduleData.indexOf(item);
776 this.editedItem = Object.assign({}, item); 776 this.editedItem = Object.assign({}, item);
777 this.editedItem.examId = this.editedItem.examId._id; 777 this.editedItem.examId = this.editedItem.examId._id;
778 this.editedItem.classId = this.editedItem.classId._id; 778 this.editedItem.classId = this.editedItem.classId._id;
779 this.editedItem.sectionId = this.editedItem.sectionId._id; 779 this.editedItem.sectionId = this.editedItem.sectionId._id;
780 this.editedItem.date = 780 this.editedItem.date =
781 this.editedItem.date != undefined 781 this.editedItem.date != undefined
782 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 782 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
783 : (this.editedItem.date = ""); 783 : (this.editedItem.date = "");
784 this.editExamScheduleDialog = true; 784 this.editExamScheduleDialog = true;
785 }, 785 },
786 profile(item) { 786 profile(item) {
787 this.editedIndex = this.ScheduleData.indexOf(item); 787 this.editedIndex = this.ScheduleData.indexOf(item);
788 this.editedItem = Object.assign({}, item); 788 this.editedItem = Object.assign({}, item);
789 this.editedItem.examId = this.editedItem.examId.examName; 789 this.editedItem.examId = this.editedItem.examId.examName;
790 this.editedItem.classId = this.editedItem.classId.classNum; 790 this.editedItem.classId = this.editedItem.classId.classNum;
791 this.editedItem.sectionId = this.editedItem.sectionId.name; 791 this.editedItem.sectionId = this.editedItem.sectionId.name;
792 this.profileExamScheduleDialog = true; 792 this.profileExamScheduleDialog = true;
793 }, 793 },
794 deleteSchedule(item) { 794 deleteSchedule(item) {
795 let deleteSchedule = { 795 let deleteSchedule = {
796 scheduleId: item._id 796 scheduleId: item._id
797 }; 797 };
798 http() 798 http()
799 .delete( 799 .delete(
800 "/deleteSchedule", 800 "/deleteSchedule",
801 confirm("Are you sure you want to Delete this?") && { 801 confirm("Are you sure you want to Delete this?") && {
802 params: deleteSchedule 802 params: deleteSchedule
803 } 803 }
804 ) 804 )
805 .then(response => { 805 .then(response => {
806 this.snackbar = true; 806 this.snackbar = true;
807 this.text = response.data.message; 807 this.text = response.data.message;
808 this.color = "green"; 808 this.color = "green";
809 this.getSchedulesList(); 809 this.getSchedulesList();
810 }) 810 })
811 .catch(error => { 811 .catch(error => {
812 this.snackbar = true; 812 this.snackbar = true;
813 this.color = "error"; 813 this.color = "error";
814 this.text = error.response.data.message; 814 this.text = error.response.data.message;
815 }); 815 });
816 }, 816 },
817 close() { 817 close() {
818 this.dialog = false; 818 this.dialog = false;
819 }, 819 },
820 submit() { 820 submit() {
821 if (this.$refs.form.validate()) { 821 if (this.$refs.form.validate()) {
822 this.loading = true; 822 this.loading = true;
823 http() 823 http()
824 .post("/createSchedule", this.addSchedule) 824 .post("/createSchedule", this.addSchedule)
825 .then(response => { 825 .then(response => {
826 this.snackbar = true; 826 this.snackbar = true;
827 this.text = response.data.message; 827 this.text = response.data.message;
828 this.addExamScheduleDialog = false; 828 this.addExamScheduleDialog = false;
829 this.color = "green"; 829 this.color = "green";
830 this.loading = false; 830 this.loading = false;
831 this.clear(); 831 this.clear();
832 }) 832 })
833 .catch(error => { 833 .catch(error => {
834 this.snackbar = true; 834 this.snackbar = true;
835 this.text = error.response.data.message; 835 this.text = error.response.data.message;
836 this.color = "red"; 836 this.color = "red";
837 this.loading = false; 837 this.loading = false;
838 }); 838 });
839 } 839 }
840 }, 840 },
841 clear() { 841 clear() {
842 this.$refs.form.reset(); 842 this.$refs.form.reset();
843 this.disable = false; 843 this.disable = false;
844 this.loading = false; 844 this.loading = false;
845 }, 845 },
846 save() { 846 update() {
847 this.editedItem.scheduleId = this.editedItem._id; 847 this.editedItem.scheduleId = this.editedItem._id;
848 http() 848 http()
849 .put("/updateSchedule", this.editedItem) 849 .put("/updateSchedule", this.editedItem)
850 .then(response => { 850 .then(response => {
851 this.snackbar = true; 851 this.snackbar = true;
852 this.text = "Successfully Edit Exam Schedule"; 852 this.text = "Successfully Edit Exam Schedule";
853 this.color = "green"; 853 this.color = "green";
854 this.editExamScheduleDialog = false 854 this.editExamScheduleDialog = false
855 this.getSchedulesList(); 855 this.getSchedulesList();
856 this.close(); 856 this.close();
857 }) 857 })
858 .catch(error => { 858 .catch(error => {
859 this.snackbar = true; 859 this.snackbar = true;
860 this.text = error.response.data.message; 860 this.text = error.response.data.message;
861 this.color = "red"; 861 this.color = "red";
862 }); 862 });
863 }, 863 },
864 getClass() { 864 getClass() {
865 http() 865 http()
866 .get("/getClassesList", { 866 .get("/getClassesList", {
867 headers: { Authorization: "Bearer " + this.token } 867 headers: { Authorization: "Bearer " + this.token }
868 }) 868 })
869 .then(response => { 869 .then(response => {
870 this.classList = response.data.data; 870 this.classList = response.data.data;
871 }) 871 })
872 .catch(err => { 872 .catch(err => {
873 // console.log("err====>", err); 873 // console.log("err====>", err);
874 }); 874 });
875 }, 875 },
876 getSections(_id) { 876 getSections(_id) {
877 for (let i = 0; i < this.classList.length; i++) { 877 for (let i = 0; i < this.classList.length; i++) {
878 if (_id == this.classList[i]._id) { 878 if (_id == this.classList[i]._id) {
879 this.subjects = this.classList[i].subjects; 879 this.subjects = this.classList[i].subjects;
880 } 880 }
881 } 881 }
882 http() 882 http()
883 .get( 883 .get(
884 "/getSectionsList", 884 "/getSectionsList",
885 { params: { classId: _id } }, 885 { params: { classId: _id } },
886 { 886 {
887 headers: { Authorization: "Bearer " + this.token } 887 headers: { Authorization: "Bearer " + this.token }
888 } 888 }
889 ) 889 )
890 .then(response => { 890 .then(response => {
891 this.addSection = response.data.data; 891 this.addSection = response.data.data;
892 }) 892 })
893 .catch(err => { 893 .catch(err => {
894 }); 894 });
895 }, 895 },
896 getExamList() { 896 getExamList() {
897 this.showLoader = true; 897 this.showLoader = true;
898 this.loadingSearch = true; 898 this.loadingSearch = true;
899 http() 899 http()
900 .get("/getExamsList", { 900 .get("/getExamsList", {
901 headers: { Authorization: "Bearer " + this.token } 901 headers: { Authorization: "Bearer " + this.token }
902 }) 902 })
903 .then(response => { 903 .then(response => {
904 this.examList = response.data.data; 904 this.examList = response.data.data;
905 this.showLoader = false; 905 this.showLoader = false;
906 this.loadingSearch = false; 906 this.loadingSearch = false;
907 }) 907 })
908 .catch(error => { 908 .catch(error => {
909 this.showLoader = false; 909 this.showLoader = false;
910 this.loadingSearch = false; 910 this.loadingSearch = false;
911 this.snackbar = true; 911 this.snackbar = true;
912 this.text = error.response.data.message; 912 this.text = error.response.data.message;
913 if (error.response.status === 401) { 913 if (error.response.status === 401) {
914 this.$router.replace({ path: "/" }); 914 this.$router.replace({ path: "/" });
915 this.$store.dispatch("setToken", null); 915 this.$store.dispatch("setToken", null);
916 this.$store.dispatch("Id", null); 916 this.$store.dispatch("Id", null);
917 } 917 }
918 }); 918 });
919 }, 919 },
920 displaySearch() { 920 displaySearch() {
921 (this.show = false), (this.showSearch = true); 921 (this.show = false), (this.showSearch = true);
922 }, 922 },
923 closeSearch() { 923 closeSearch() {
924 this.showSearch = false; 924 this.showSearch = false;
925 this.show = true; 925 this.show = true;
926 this.search = ""; 926 this.search = "";
927 } 927 }
928 }, 928 },
929 mounted() { 929 mounted() {
930 this.token = this.$store.state.token; 930 this.token = this.$store.state.token;
931 this.getClass(); 931 this.getClass();
932 this.getExamList(); 932 this.getExamList();
933 this.role = this.$store.state.role; 933 this.role = this.$store.state.role;
934 934
935 } 935 }
936 }; 936 };
937 </script> 937 </script>
src/pages/Mark/markDistribution.vue
Diff comments   View file @e896562
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Mark Distribution ****** --> 3 <!-- ****** EDIT Mark Distribution ****** -->
4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px"> 4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Mark Distribution</label> 8 <label class="title text-xs-center">Edit Mark Distribution</label>
9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs4 class="pt-4 subheading"> 16 <v-flex xs4 class="pt-4 subheading">
17 <label class="right">Mark Distribution:</label> 17 <label class="right">Mark Distribution:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm6 class="ml-3"> 19 <v-flex xs8 sm6 class="ml-3">
20 <v-text-field 20 <v-text-field
21 v-model="editedItem.distributionType" 21 v-model="editedItem.distributionType"
22 placeholder="fill your Distribution Type" 22 placeholder="fill your Distribution Type"
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12> 27 <v-flex xs12 sm12>
28 <v-layout> 28 <v-layout>
29 <v-flex xs4 class="pt-4 subheading"> 29 <v-flex xs4 class="pt-4 subheading">
30 <label class="right">Mark Value:</label> 30 <label class="right">Mark Value:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs8 sm6 class="ml-3"> 32 <v-flex xs8 sm6 class="ml-3">
33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> 33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field>
34 </v-flex> 34 </v-flex>
35 </v-layout> 35 </v-layout>
36 </v-flex> 36 </v-flex>
37 <v-layout> 37 <v-layout>
38 <v-flex xs12 sm11> 38 <v-flex xs12 sm11>
39 <v-card-actions> 39 <v-card-actions>
40 <v-spacer></v-spacer> 40 <v-spacer></v-spacer>
41 <v-btn round dark @click="save" class="add-button">Save</v-btn> 41 <v-btn round dark @click="save" class="add-button">Save</v-btn>
42 </v-card-actions> 42 </v-card-actions>
43 </v-flex> 43 </v-flex>
44 </v-layout> 44 </v-layout>
45 </v-container> 45 </v-container>
46 </v-form> 46 </v-form>
47 </v-card> 47 </v-card>
48 </v-dialog> 48 </v-dialog>
49 <!-- ****** MARK DISTRIBUTATION TABLE ****** --> 49 <!-- ****** MARK DISTRIBUTATION TABLE ****** -->
50 <v-toolbar color="transparent" flat> 50 <v-toolbar color="transparent" flat>
51 <v-btn 51 <v-btn
52 fab 52 fab
53 dark 53 dark
54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
55 small 55 small
56 @click="addMarkDistributionDialog = true" 56 @click="addMarkDistributionDialog = true"
57 > 57 >
58 <v-icon dark>add</v-icon> 58 <v-icon dark>add</v-icon>
59 </v-btn> 59 </v-btn>
60 <v-btn 60 <v-btn
61 round 61 round
62 class="open-dialog-button hidden-sm-only hidden-xs-only" 62 class="open-dialog-button hidden-sm-only hidden-xs-only"
63 dark 63 dark
64 @click="addMarkDistributionDialog = true" 64 @click="addMarkDistributionDialog = true"
65 > 65 >
66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution 66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution
67 </v-btn> 67 </v-btn>
68 <v-spacer></v-spacer> 68 <v-spacer></v-spacer>
69 <v-card-title class="body-1" v-show="show"> 69 <v-card-title class="body-1" v-show="show">
70 <v-btn icon large flat @click="displaySearch"> 70 <v-btn icon large flat @click="displaySearch">
71 <v-avatar size="27"> 71 <v-avatar size="27">
72 <img src="/static/icon/search.png" alt="icon" /> 72 <img src="/static/icon/search.png" alt="icon" />
73 </v-avatar> 73 </v-avatar>
74 </v-btn> 74 </v-btn>
75 </v-card-title> 75 </v-card-title>
76 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 76 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
77 <v-layout> 77 <v-layout>
78 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 78 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
79 <v-icon @click="closeSearch" color="error">close</v-icon> 79 <v-icon @click="closeSearch" color="error">close</v-icon>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 </v-toolbar> 82 </v-toolbar>
83 <v-data-table 83 <v-data-table
84 :headers="headers" 84 :headers="headers"
85 :items="markList" 85 :items="markList"
86 :pagination.sync="pagination" 86 :pagination.sync="pagination"
87 :search="search" 87 :search="search"
88 > 88 >
89 <template slot="items" slot-scope="props"> 89 <template slot="items" slot-scope="props">
90 <tr class="tr"> 90 <tr class="tr">
91 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> 91 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
92 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> 92 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td>
93 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> 93 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td>
94 <td class="td td-row text-xs-center"> 94 <td class="td td-row text-xs-center">
95 <span> 95 <span>
96 <img 96 <img
97 style="cursor:pointer; width:20px; height:18px; " 97 style="cursor:pointer; width:20px; height:18px; "
98 class="mr-3" 98 class="mr-3"
99 @click="editItem(props.item)" 99 @click="editItem(props.item)"
100 src="/static/icon/edit.png" 100 src="/static/icon/edit.png"
101 /> 101 />
102 <img 102 <img
103 style="cursor:pointer; width:20px; height:20px; " 103 style="cursor:pointer; width:20px; height:20px; "
104 @click="deleteItem(props.item)" 104 @click="deleteItem(props.item)"
105 src="/static/icon/delete.png" 105 src="/static/icon/delete.png"
106 /> 106 />
107 </span> 107 </span>
108 </td> 108 </td>
109 </tr> 109 </tr>
110 </template> 110 </template>
111 <v-alert 111 <v-alert
112 slot="no-results" 112 slot="no-results"
113 :value="true" 113 :value="true"
114 color="error" 114 color="error"
115 icon="warning" 115 icon="warning"
116 >Your search for "{{ search }}" found no results.</v-alert> 116 >Your search for "{{ search }}" found no results.</v-alert>
117 </v-data-table> 117 </v-data-table>
118 <!-- ****** ADD MULTIPLE REMINDER ****** --> 118 <!-- ****** ADD MULTIPLE REMINDER ****** -->
119 <v-dialog v-model="addMarkDistributionDialog" max-width="500px"> 119 <v-dialog v-model="addMarkDistributionDialog" max-width="500px">
120 <v-card flat class="card-style pa-2" dark> 120 <v-card flat class="card-style pa-2" dark>
121 <v-layout> 121 <v-layout>
122 <v-flex xs12> 122 <v-flex xs12>
123 <label class="title text-xs-center">Add Mark Distribution</label> 123 <label class="title text-xs-center">Add Mark Distribution</label>
124 <v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon> 124 <v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 <v-form ref="form" v-model="valid" lazy-validation> 127 <v-form ref="form" v-model="valid" lazy-validation>
128 <v-container fluid> 128 <v-container fluid>
129 <v-flex xs12> 129 <v-flex xs12>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 131 <v-flex xs12 sm12 md4 class="pt-4 subheading">
132 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> 132 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label>
133 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> 133 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label>
134 </v-flex> 134 </v-flex>
135 <v-flex xs12 sm12 md7 class="ml-3"> 135 <v-flex xs12 sm12 md7 class="ml-3">
136 <v-text-field 136 <v-text-field
137 v-model="mark.distributionType" 137 v-model="mark.distributionType"
138 placeholder="fill your Mark Distribution" 138 placeholder="fill your Mark Distribution"
139 :rules="markDistributionRules" 139 :rules="markDistributionRules"
140 ></v-text-field> 140 ></v-text-field>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12> 144 <v-flex xs12>
145 <v-layout wrap> 145 <v-layout wrap>
146 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 146 <v-flex xs12 sm12 md4 class="pt-4 subheading">
147 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> 147 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label>
148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> 148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm12 md7 class="ml-3"> 150 <v-flex xs12 sm12 md7 class="ml-3">
151 <v-text-field 151 <v-text-field
152 placeholder="fill your Mark Value" 152 placeholder="fill your Mark Value"
153 :rules="markValueRules" 153 :rules="markValueRules"
154 v-model="mark.markValue" 154 v-model="mark.markValue"
155 type="text" 155 type="text"
156 required 156 required
157 ></v-text-field> 157 ></v-text-field>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-layout> 161 <v-layout>
162 <v-flex xs12 sm12> 162 <v-flex xs12 sm12>
163 <v-layout> 163 <v-layout>
164 <v-spacer></v-spacer> 164 <v-spacer></v-spacer>
165 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 165 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
166 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 166 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
167 </v-layout> 167 </v-layout>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-container> 170 </v-container>
171 </v-form> 171 </v-form>
172 </v-card> 172 </v-card>
173 </v-dialog> 173 </v-dialog>
174 <v-snackbar 174 <v-snackbar
175 :timeout="timeout" 175 :timeout="timeout"
176 :top="y === 'top'" 176 :top="y === 'top'"
177 :right="x === 'right'" 177 :right="x === 'right'"
178 :vertical="mode === 'vertical'" 178 :vertical="mode === 'vertical'"
179 v-model="snackbar" 179 v-model="snackbar"
180 :color="color" 180 :color="color"
181 >{{ text }}</v-snackbar> 181 >{{ text }}</v-snackbar>
182 <div class="loader" v-if="showLoader"> 182 <div class="loader" v-if="showLoader">
183 <v-progress-circular indeterminate color="white"></v-progress-circular> 183 <v-progress-circular indeterminate color="white"></v-progress-circular>
184 </div> 184 </div>
185 </v-container> 185 </v-container>
186 </template> 186 </template>
187 187
188 <script> 188 <script>
189 import http from "@/Services/http.js"; 189 import http from "@/Services/http.js";
190 import Util from "@/util"; 190 import Util from "@/util";
191 191
192 export default { 192 export default {
193 data: () => ({ 193 data: () => ({
194 snackbar: false, 194 snackbar: false,
195 y: "top", 195 y: "top",
196 x: "right", 196 x: "right",
197 mode: "", 197 mode: "",
198 color: "", 198 color: "",
199 timeout: 5000, 199 timeout: 5000,
200 text: "", 200 text: "",
201 loading: false, 201 loading: false,
202 search: "", 202 search: "",
203 showLoader: false, 203 showLoader: false,
204 show: true, 204 show: true,
205 showSearch: false, 205 showSearch: false,
206 editMarkDistributionDialog: false, 206 editMarkDistributionDialog: false,
207 addMarkDistributionDialog: false, 207 addMarkDistributionDialog: false,
208 valid: true, 208 valid: true,
209 isActive: true, 209 isActive: true,
210 newActive: false, 210 newActive: false,
211 pagination: { 211 pagination: {
212 rowsPerPage: 15 212 rowsPerPage: 15
213 }, 213 },
214 markDistributionRules: [v => !!v || " Mark Distribution type is required"], 214 markDistributionRules: [v => !!v || " Mark Distribution type is required"],
215 markValueRules: [v => !!v || "Mark Value is required"], 215 markValueRules: [v => !!v || "Mark Value is required"],
216 headers: [ 216 headers: [
217 { 217 {
218 text: "No", 218 text: "No",
219 align: "center", 219 align: "center",
220 sortable: false, 220 sortable: false,
221 value: "No" 221 value: "No"
222 }, 222 },
223 { 223 {
224 text: " Mark Distribution Type", 224 text: " Mark Distribution Type",
225 value: " distributionType", 225 value: " distributionType",
226 sortable: false, 226 sortable: false,
227 align: "center" 227 align: "center"
228 }, 228 },
229 { 229 {
230 text: " Mark Value", 230 text: " Mark Value",
231 value: "markValue", 231 value: "markValue",
232 sortable: false, 232 sortable: false,
233 align: "center" 233 align: "center"
234 }, 234 },
235 { text: "Action", value: "", sortable: false, align: "center" } 235 { text: "Action", value: "", sortable: false, align: "center" }
236 ], 236 ],
237 markList: [], 237 markList: [],
238 editedIndex: -1, 238 editedIndex: -1,
239 mark: {}, 239 mark: {},
240 editedItem: {}, 240 editedItem: {},
241 token: "" 241 token: ""
242 }), 242 }),
243 methods: { 243 methods: {
244 getMarkDistributions() { 244 getMarkDistributions() {
245 this.showLoader = true; 245 this.showLoader = true;
246 http() 246 http()
247 .get("/getMarkDistributionsList", { 247 .get("/getMarkDistributionsList", {
248 headers: { Authorization: "Bearer " + this.token } 248 headers: { Authorization: "Bearer " + this.token }
249 }) 249 })
250 .then(response => { 250 .then(response => {
251 this.markList = response.data.data; 251 this.markList = response.data.data;
252 this.showLoader = false; 252 this.showLoader = false;
253 }) 253 })
254 .catch(error => { 254 .catch(error => {
255 this.showLoader = false; 255 this.showLoader = false;
256 // if (error.response.status === 401) { 256 // if (error.response.status === 401) {
257 // this.$router.replace({ path: "/" }); 257 // this.$router.replace({ path: "/" });
258 // this.$store.dispatch("setToken", null); 258 // this.$store.dispatch("setToken", null);
259 // this.$store.dispatch("Id", null); 259 // this.$store.dispatch("Id", null);
260 // } 260 // }
261 }); 261 });
262 }, 262 },
263 editItem(item) { 263 editItem(item) {
264 this.editedIndex = this.markList.indexOf(item); 264 this.editedIndex = this.markList.indexOf(item);
265 this.editedItem = Object.assign({}, item); 265 this.editedItem = Object.assign({}, item);
266 this.editMarkDistributionDialog = true; 266 this.editMarkDistributionDialog = true;
267 }, 267 },
268 deleteItem(item) { 268 deleteItem(item) {
269 let deleteParticularMark = { 269 let deleteParticularMark = {
270 markDistributionId: item._id 270 markDistributionId: item._id
271 }; 271 };
272 http() 272 http()
273 .delete( 273 .delete(
274 "/deleteMarkDistribution", 274 "/deleteMarkDistribution",
275 confirm("Are you sure you want to delete this?") && { 275 confirm("Are you sure you want to delete this?") && {
276 params: deleteParticularMark 276 params: deleteParticularMark
277 } 277 }
278 ) 278 )
279 .then(response => { 279 .then(response => {
280 this.snackbar = true; 280 this.snackbar = true;
281 this.text = response.data.message; 281 this.text = response.data.message;
282 this.getMarkDistributions(); 282 this.getMarkDistributions();
283 }) 283 })
284 .catch(error => { 284 .catch(error => {
285 console.log(error); 285 console.log(error);
286 }); 286 });
287 }, 287 },
288 close() { 288 close() {
289 this.editMarkDistributionDialog = false; 289 this.editMarkDistributionDialog = false;
290 }, 290 },
291 submit() { 291 submit() {
292 if (this.$refs.form.validate()) { 292 if (this.$refs.form.validate()) {
293 this.loading = true; 293 this.loading = true;
294 http() 294 http()
295 .post("/createMarkDistribution", this.mark) 295 .post("/createMarkDistribution", this.mark)
296 .then(response => { 296 .then(response => {
297 this.snackbar = true; 297 this.snackbar = true;
298 this.text = response.data.message; 298 this.text = response.data.message;
299 this.getMarkDistributions(); 299 this.getMarkDistributions();
300 this.clear(); 300 this.clear();
301 this.addMarkDistributionDialog = false; 301 this.addMarkDistributionDialog = false;
302 this.loading = false; 302 this.loading = false;
303 }) 303 })
304 .catch(error => { 304 .catch(error => {
305 this.snackbar = true; 305 this.snackbar = true;
306 this.text = error.response.data.message; 306 this.text = error.response.data.message;
307 this.loading = false; 307 this.loading = false;
308 }); 308 });
309 } 309 }
310 }, 310 },
311 clear() { 311 clear() {
312 this.$refs.form.reset(); 312 this.$refs.form.reset();
313 }, 313 },
314 save() { 314 save() {
315 (this.editedItem.markDistributionId = this.editedItem._id), 315 (this.editedItem.markDistributionId = this.editedItem._id),
316 http() 316 http()
317 .put("/updateMarkDistribution", this.editedItem) 317 .put("/updateMarkDistribution", this.editedItem)
318 .then(response => { 318 .then(response => {
319 this.snackbar = true; 319 this.snackbar = true;
320 this.text = "Successfully Edit Notification"; 320 this.text = "Successfully Edit Notification";
321 this.color = "green";
321 this.getMarkDistributions(); 322 this.getMarkDistributions();
322 this.close(); 323 this.close();
323 }) 324 })
324 .catch(error => { 325 .catch(error => {
325 console.log(error); 326 console.log(error);
327 this.snackbar = true;
328 this.text = error.response.data.message;
329 this.color = "red";
326 }); 330 });
327 }, 331 },
328 displaySearch() { 332 displaySearch() {
329 (this.show = false), (this.showSearch = true); 333 (this.show = false), (this.showSearch = true);
330 }, 334 },
331 closeSearch() { 335 closeSearch() {
332 this.showSearch = false; 336 this.showSearch = false;
333 this.show = true; 337 this.show = true;
334 this.search = ""; 338 this.search = "";
335 } 339 }
336 }, 340 },
337 mounted() { 341 mounted() {
338 this.token = this.$store.state.token; 342 this.token = this.$store.state.token;
339 this.getMarkDistributions(); 343 this.getMarkDistributions();
340 } 344 }
341 }; 345 };
342 </script> 346 </script>
343 <style scoped> 347 <style scoped>