viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 00e4bc4e16dd33a9719371e0ca7ea14da5bc9d0b

Authored by Neeraj Sharma
1 parent 37150e7c18
Exists in master and in 3 other branches amber-development, development, ui-design

fixed auntentication

Showing 26 changed files with 117 additions and 58 deletions   Show diff stats
src/pages/Account/editInvoice.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** Edit multiple INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
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="success" 11 color="success"
12 >{{ text }}</v-snackbar> 12 >{{ text }}</v-snackbar>
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 md5 class="mt-4"> 16 <v-flex xs12 sm12 md5 class="mt-4">
17 <v-card flat> 17 <v-card flat>
18 <v-toolbar dark class="fixcolors" flat> 18 <v-toolbar dark class="fixcolors" flat>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-toolbar-title> 20 <v-toolbar-title>
21 <h3>Invoice</h3> 21 <h3>Invoice</h3>
22 </v-toolbar-title> 22 </v-toolbar-title>
23 <v-spacer></v-spacer> 23 <v-spacer></v-spacer>
24 </v-toolbar> 24 </v-toolbar>
25 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 25 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
26 <v-layout> 26 <v-layout>
27 <v-flex xs4 class="pt-4 subheading"> 27 <v-flex xs4 class="pt-4 subheading">
28 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 28 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
29 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 29 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
30 </v-flex> 30 </v-flex>
31 <v-flex xs6 class="ml-3"> 31 <v-flex xs6 class="ml-3">
32 <v-select 32 <v-select
33 :items="addclass" 33 :items="addclass"
34 label="Select Class" 34 label="Select Class"
35 v-model="invoiceData.classId" 35 v-model="invoiceData.classId"
36 item-text="classNum" 36 item-text="classNum"
37 item-value="_id" 37 item-value="_id"
38 @change="getAllStudents()" 38 @change="getAllStudents()"
39 ></v-select> 39 ></v-select>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs6 class="ml-3"> 47 <v-flex xs6 class="ml-3">
48 <v-select 48 <v-select
49 :items="studentList" 49 :items="studentList"
50 label="Select Incharge" 50 label="Select Incharge"
51 v-model="invoiceData.studentId" 51 v-model="invoiceData.studentId"
52 item-text="name" 52 item-text="name"
53 item-value="_id" 53 item-value="_id"
54 ></v-select> 54 ></v-select>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 <v-layout> 57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading"> 58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Date:</label> 59 <label class="right">Date:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs6 class="ml-3"> 61 <v-flex xs6 class="ml-3">
62 <v-menu 62 <v-menu
63 ref="menu1" 63 ref="menu1"
64 :close-on-content-click="false" 64 :close-on-content-click="false"
65 v-model="menu1" 65 v-model="menu1"
66 :nudge-right="40" 66 :nudge-right="40"
67 lazy 67 lazy
68 :return-value.sync="invoiceData.date" 68 :return-value.sync="invoiceData.date"
69 transition="scale-transition" 69 transition="scale-transition"
70 offset-y 70 offset-y
71 full-width 71 full-width
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field 74 <v-text-field
75 slot="activator" 75 slot="activator"
76 v-model="invoiceData.date" 76 v-model="invoiceData.date"
77 placeholder="Select date" 77 placeholder="Select date"
78 ></v-text-field> 78 ></v-text-field>
79 <v-date-picker 79 <v-date-picker
80 v-model="invoiceData.date" 80 v-model="invoiceData.date"
81 @input="$refs.menu1.save(invoiceData.date)" 81 @input="$refs.menu1.save(invoiceData.date)"
82 ></v-date-picker> 82 ></v-date-picker>
83 </v-menu> 83 </v-menu>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 class="pt-4 subheading"> 87 <v-flex xs4 class="pt-4 subheading">
88 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs6 class="ml-3"> 91 <v-flex xs6 class="ml-3">
92 <v-select 92 <v-select
93 :items="paymentStatus" 93 :items="paymentStatus"
94 v-model="invoiceData.paymentStatus" 94 v-model="invoiceData.paymentStatus"
95 item-text="name" 95 item-text="name"
96 item-value="value" 96 item-value="value"
97 label="Select Payment Status" 97 label="Select Payment Status"
98 @change="getPayMethodList" 98 @change="getPayMethodList"
99 ></v-select> 99 ></v-select>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 <v-layout v-show="showPayMethods"> 102 <v-layout v-show="showPayMethods">
103 <v-flex xs4 class="pt-4 subheading"> 103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right">Payment Method:</label> 104 <label class="right">Payment Method:</label>
105 </v-flex> 105 </v-flex>
106 <v-flex xs6 class="ml-3"> 106 <v-flex xs6 class="ml-3">
107 <v-select 107 <v-select
108 :items="paymentMethods" 108 :items="paymentMethods"
109 v-model="invoiceData.paymentMethod" 109 v-model="invoiceData.paymentMethod"
110 label="Select Payment Method" 110 label="Select Payment Method"
111 ></v-select> 111 ></v-select>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm10 offset-sm1> 115 <v-flex xs12 sm10 offset-sm1>
116 <v-card-actions> 116 <v-card-actions>
117 <v-btn @click="clear" round dark>clear</v-btn> 117 <v-btn @click="clear" round dark>clear</v-btn>
118 <v-spacer></v-spacer> 118 <v-spacer></v-spacer>
119 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 119 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
120 </v-card-actions> 120 </v-card-actions>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 </v-form> 123 </v-form>
124 </v-card> 124 </v-card>
125 </v-flex> 125 </v-flex>
126 <v-flex xs12 sm12 md7 class="mt-4"> 126 <v-flex xs12 sm12 md7 class="mt-4">
127 <v-card> 127 <v-card>
128 <v-toolbar dark class="fixcolors" flat> 128 <v-toolbar dark class="fixcolors" flat>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-toolbar-title> 130 <v-toolbar-title>
131 <h3>Fee Type List</h3> 131 <h3>Fee Type List</h3>
132 </v-toolbar-title> 132 </v-toolbar-title>
133 <v-spacer></v-spacer> 133 <v-spacer></v-spacer>
134 </v-toolbar> 134 </v-toolbar>
135 <v-layout> 135 <v-layout>
136 <v-flex xs4 sm2 class="mt-4"> 136 <v-flex xs4 sm2 class="mt-4">
137 <label class="right title">Fee Type:</label> 137 <label class="right title">Fee Type:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs4 sm4> 139 <v-flex xs4 sm4>
140 <v-select 140 <v-select
141 :items="feeTypes" 141 :items="feeTypes"
142 v-model="feeType.feeTypeName" 142 v-model="feeType.feeTypeName"
143 item-text="feeType" 143 item-text="feeType"
144 item-value="feeType" 144 item-value="feeType"
145 label="Select Fee Type" 145 label="Select Fee Type"
146 ></v-select> 146 ></v-select>
147 </v-flex> 147 </v-flex>
148 <v-flex xs4 sm6> 148 <v-flex xs4 sm6>
149 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 149 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <table class="feeTypeTable tableRsponsive"> 152 <table class="feeTypeTable tableRsponsive">
153 <tr class="info white--text"> 153 <tr class="info white--text">
154 <th>#</th> 154 <th>#</th>
155 <th>Fee Type</th> 155 <th>Fee Type</th>
156 <th>Amount</th> 156 <th>Amount</th>
157 <th>Discount(%)</th> 157 <th>Discount(%)</th>
158 <th>Subtotal</th> 158 <th>Subtotal</th>
159 <th>Paid Amount</th> 159 <th>Paid Amount</th>
160 <th>Action</th> 160 <th>Action</th>
161 </tr> 161 </tr>
162 <tr 162 <tr
163 v-for="(feeType, index) in feeTypeData" 163 v-for="(feeType, index) in feeTypeData"
164 :key="index" 164 :key="index"
165 v-on:keyup="getAmmountDetails(feeType)" 165 v-on:keyup="getAmmountDetails(feeType)"
166 > 166 >
167 <td style="width:40px">{{ index + 1 }}</td> 167 <td style="width:40px">{{ index + 1 }}</td>
168 <td style="width:120px">{{ feeType.feeTypeName }}</td> 168 <td style="width:120px">{{ feeType.feeTypeName }}</td>
169 <td> 169 <td>
170 <v-text-field 170 <v-text-field
171 placeholder="fill your Amount" 171 placeholder="fill your Amount"
172 v-model="feeType.amount" 172 v-model="feeType.amount"
173 type="number" 173 type="number"
174 ></v-text-field> 174 ></v-text-field>
175 </td> 175 </td>
176 <td> 176 <td>
177 <v-text-field 177 <v-text-field
178 placeholder="fill your Discount" 178 placeholder="fill your Discount"
179 v-model="feeType.discount" 179 v-model="feeType.discount"
180 type="number" 180 type="number"
181 ></v-text-field> 181 ></v-text-field>
182 </td> 182 </td>
183 <td>{{ feeType.subTotal }}</td> 183 <td>{{ feeType.subTotal }}</td>
184 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 184 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
185 <v-text-field 185 <v-text-field
186 placeholder="fill your Paid Amount" 186 placeholder="fill your Paid Amount"
187 v-model="feeType.paidAmount" 187 v-model="feeType.paidAmount"
188 type="number" 188 type="number"
189 :disabled="disabled" 189 :disabled="disabled"
190 ></v-text-field> 190 ></v-text-field>
191 </td> 191 </td>
192 <td v-if="invoiceData.paymentStatus != 'NOT_PAID'"> 192 <td v-if="invoiceData.paymentStatus != 'NOT_PAID'">
193 <v-text-field 193 <v-text-field
194 placeholder="fill your Paid Amount" 194 placeholder="fill your Paid Amount"
195 v-model="feeType.paidAmount" 195 v-model="feeType.paidAmount"
196 type="number" 196 type="number"
197 ></v-text-field> 197 ></v-text-field>
198 </td> 198 </td>
199 <td> 199 <td>
200 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 200 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
201 </td> 201 </td>
202 </tr> 202 </tr>
203 <tfoot> 203 <tfoot>
204 <tr> 204 <tr>
205 <td colspan="2">Total:</td> 205 <td colspan="2">Total:</td>
206 <td>{{ feeType.amount }}</td> 206 <td>{{ feeType.amount }}</td>
207 <td>{{ feeType.discount }}</td> 207 <td>{{ feeType.discount }}</td>
208 <td>{{ feeType.subTotal }}</td> 208 <td>{{ feeType.subTotal }}</td>
209 <td>{{ feeType.paidAmount }}</td> 209 <td>{{ feeType.paidAmount }}</td>
210 </tr> 210 </tr>
211 </tfoot> 211 </tfoot>
212 </table> 212 </table>
213 </v-card> 213 </v-card>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-container> 216 </v-container>
217 </v-flex> 217 </v-flex>
218 </v-container> 218 </v-container>
219 <div class="loader" v-if="showLoader"> 219 <div class="loader" v-if="showLoader">
220 <v-progress-circular indeterminate color="white"></v-progress-circular> 220 <v-progress-circular indeterminate color="white"></v-progress-circular>
221 </div> 221 </div>
222 </v-app> 222 </v-app>
223 </template> 223 </template>
224 224
225 <script> 225 <script>
226 import http from "@/Services/http.js"; 226 import http from "@/Services/http.js";
227 import moment from "moment"; 227 import moment from "moment";
228 228
229 export default { 229 export default {
230 data: () => ({ 230 data: () => ({
231 snackbar: false, 231 snackbar: false,
232 showPayMethods: false, 232 showPayMethods: false,
233 y: "top", 233 y: "top",
234 x: "right", 234 x: "right",
235 mode: "", 235 mode: "",
236 timeout: 3000, 236 timeout: 3000,
237 text: "", 237 text: "",
238 showLoader: false, 238 showLoader: false,
239 loading: false, 239 loading: false,
240 date: null, 240 date: null,
241 search: "", 241 search: "",
242 // dialog: false, 242 // dialog: false,
243 // dialog1: false, 243 // dialog1: false,
244 valid: true, 244 valid: true,
245 validEdit: true, 245 validEdit: true,
246 // isActive: true, 246 // isActive: true,
247 // newActive: false, 247 // newActive: false,
248 showFeeType: false, 248 showFeeType: false,
249 disabled: true, 249 disabled: true,
250 details: [], 250 details: [],
251 feeTypes: [], 251 feeTypes: [],
252 menu1: false, 252 menu1: false,
253 invoiceData: {}, 253 invoiceData: {},
254 paymentMethods: ["Cash", "Cheque"], 254 paymentMethods: ["Cash", "Cheque"],
255 feeType: { 255 feeType: {
256 amount: "0.00", 256 amount: "0.00",
257 discount: "0.00", 257 discount: "0.00",
258 paidAmount: "0.00", 258 paidAmount: "0.00",
259 subTotal: "0.00", 259 subTotal: "0.00",
260 feeTypeName: "" 260 feeTypeName: ""
261 }, 261 },
262 feeTypeData: [], 262 feeTypeData: [],
263 pagination: { 263 pagination: {
264 rowsPerPage: 15 264 rowsPerPage: 15
265 }, 265 },
266 token: "", 266 token: "",
267 editedItem: {}, 267 editedItem: {},
268 invoiceParticularData: {}, 268 invoiceParticularData: {},
269 addclass: [], 269 addclass: [],
270 studentList: [], 270 studentList: [],
271 paymentStatus: [ 271 paymentStatus: [
272 { 272 {
273 name: "Not Paid", 273 name: "Not Paid",
274 value: "NOT_PAID" 274 value: "NOT_PAID"
275 }, 275 },
276 { 276 {
277 name: "Partially Paid", 277 name: "Partially Paid",
278 value: "PARTIALLY_PAID" 278 value: "PARTIALLY_PAID"
279 }, 279 },
280 { 280 {
281 name: "Fully Paid", 281 name: "Fully Paid",
282 value: "FULLY_PAID" 282 value: "FULLY_PAID"
283 } 283 }
284 ] 284 ]
285 }), 285 }),
286 // watch: { 286 // watch: {
287 // menu1(val) { 287 // menu1(val) {
288 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 288 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
289 // } 289 // }
290 // }, 290 // },
291 methods: { 291 methods: {
292 save(date) { 292 save(date) {
293 this.$refs.menu1.save(date); 293 this.$refs.menu1.save(date);
294 }, 294 },
295 dates: function(date) { 295 dates: function(date) {
296 return moment(date).format("MMMM DD, YYYY"); 296 return moment(date).format("MMMM DD, YYYY");
297 }, 297 },
298 deleteItem(item) { 298 deleteItem(item) {
299 let deleteInvoice = { 299 let deleteInvoice = {
300 invoiceId: item._id 300 invoiceId: item._id
301 }; 301 };
302 http() 302 http()
303 .delete( 303 .delete(
304 "/deleteInvoice", 304 "/deleteInvoice",
305 confirm("Are you sure you want to delete this?") && { 305 confirm("Are you sure you want to delete this?") && {
306 params: deleteInvoice 306 params: deleteInvoice
307 } 307 }
308 ) 308 )
309 .then(response => { 309 .then(response => {
310 if ((this.snackbar = true)) { 310 if ((this.snackbar = true)) {
311 this.text = "Successfully delete Existing Invoice"; 311 this.text = "Successfully delete Existing Invoice";
312 } 312 }
313 this.getInvoiceList(); 313 this.getInvoiceList();
314 }) 314 })
315 .catch(error => { 315 .catch(error => {
316 // console.log(error); 316 // console.log(error);
317 }); 317 });
318 }, 318 },
319 submit() { 319 submit() {
320 // console.log("this.feeType", this.feeType); 320 // console.log("this.feeType", this.feeType);
321 let feeTypeId = ""; 321 let feeTypeId = "";
322 for (let i = 0; i < this.feeTypes.length; i++) { 322 for (let i = 0; i < this.feeTypes.length; i++) {
323 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 323 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
324 feeTypeId = this.feeTypes[i]._id; 324 feeTypeId = this.feeTypes[i]._id;
325 } 325 }
326 } 326 }
327 if (this.$refs.form.validate()) { 327 if (this.$refs.form.validate()) {
328 let invoiceData = { 328 let invoiceData = {
329 invoiceId: this.invoiceData._id, 329 invoiceId: this.invoiceData._id,
330 classId: this.invoiceData.classNum, 330 classId: this.invoiceData.classNum,
331 studentId: this.invoiceData.sectionId, 331 studentId: this.invoiceData.sectionId,
332 date: this.invoiceData.date, 332 date: this.invoiceData.date,
333 paymentStatus: this.invoiceData.paymentStatus, 333 paymentStatus: this.invoiceData.paymentStatus,
334 paymentMethod: this.invoiceData.paymentMethod, 334 paymentMethod: this.invoiceData.paymentMethod,
335 feeType: this.feeTypeData, 335 feeType: this.feeTypeData,
336 totalAmount: this.feeType.amount, 336 totalAmount: this.feeType.amount,
337 totalDiscount: this.feeType.discount, 337 totalDiscount: this.feeType.discount,
338 totalSubTotal: this.feeType.subTotal, 338 totalSubTotal: this.feeType.subTotal,
339 totalPaidAmount: this.feeType.paidAmount 339 totalPaidAmount: this.feeType.paidAmount
340 }; 340 };
341 if (invoiceData.paymentStatus == "NOT_PAID") { 341 if (invoiceData.paymentStatus == "NOT_PAID") {
342 delete invoiceData.totalPaidAmount; 342 delete invoiceData.totalPaidAmount;
343 } 343 }
344 if (feeTypeId == "") { 344 if (feeTypeId == "") {
345 delete invoiceData.feeType[0].feeTypeId; 345 delete invoiceData.feeType[0].feeTypeId;
346 } 346 }
347 if (this.invoiceData.paymentStatus == "NOT_PAID") { 347 if (this.invoiceData.paymentStatus == "NOT_PAID") {
348 delete invoiceData.paymentMethod; 348 delete invoiceData.paymentMethod;
349 } 349 }
350 http() 350 http()
351 .put("/updateInvoice", invoiceData) 351 .put("/updateInvoice", invoiceData)
352 .then(response => { 352 .then(response => {
353 this.getInvoiceList(); 353 this.getInvoiceList();
354 this.snackbar = true; 354 this.snackbar = true;
355 this.text = "New Invoice added successfully"; 355 this.text = "New Invoice added successfully";
356 this.loading = false; 356 this.loading = false;
357 }) 357 })
358 .catch(error => { 358 .catch(error => {
359 console.log(error); 359 console.log(error);
360 if ((this.snackbar = true)) { 360 if ((this.snackbar = true)) {
361 this.text = error.response.data.message; 361 this.text = error.response.data.message;
362 } 362 }
363 this.loading = false; 363 this.loading = false;
364 }); 364 });
365 } 365 }
366 }, 366 },
367 clear() { 367 clear() {
368 this.$refs.form.reset(); 368 this.$refs.form.reset();
369 }, 369 },
370 getInvoiceList() { 370 getInvoiceList() {
371 http() 371 http()
372 .get("/getParticularInvoice", { 372 .get("/getParticularInvoice", {
373 params: { invoiceId: this.$route.params.invoiceid }, 373 params: { invoiceId: this.$route.params.invoiceid },
374 headers: { Authorization: "Bearer " + this.token } 374 headers: { Authorization: "Bearer " + this.token }
375 }) 375 })
376 .then(response => { 376 .then(response => {
377 this.invoiceParticularData = response.data.data; 377 this.invoiceParticularData = response.data.data;
378 this.invoiceData = this.invoiceParticularData; 378 this.invoiceData = this.invoiceParticularData;
379 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 379 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
380 this.feeTypeData = this.invoiceParticularData.feeType; 380 this.feeTypeData = this.invoiceParticularData.feeType;
381 (this.feeType.amount = response.data.data.totalAmount), 381 (this.feeType.amount = response.data.data.totalAmount),
382 (this.feeType.discount = response.data.data.totalDiscount), 382 (this.feeType.discount = response.data.data.totalDiscount),
383 (this.feeType.subTotal = response.data.data.totalSubTotal), 383 (this.feeType.subTotal = response.data.data.totalSubTotal),
384 (this.showLoader = false); 384 (this.showLoader = false);
385 }) 385 })
386 .catch(err => { 386 .catch(error => {
387 this.showLoader = false; 387 this.showLoader = false;
388 if (error.response.status === 401) {
389 this.$router.replace({ path: "/" });
390 this.$store.dispatch("setToken", null);
391 this.$store.dispatch("Id", null);
392 this.$store.dispatch("Role", null);
393 }
388 }); 394 });
389 }, 395 },
390 selectFeeType() { 396 selectFeeType() {
391 this.showFeeType = true; 397 this.showFeeType = true;
392 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 398 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
393 }, 399 },
394 deleteSelectFee: function(index) { 400 deleteSelectFee: function(index) {
395 this.feeTypeData.splice(index, 1); 401 this.feeTypeData.splice(index, 1);
396 for (let i = 0; i < this.feeTypeData.length; i++) { 402 for (let i = 0; i < this.feeTypeData.length; i++) {
397 this.feeType = this.feeTypeData[i]; 403 this.feeType = this.feeTypeData[i];
398 } 404 }
399 if (this.feeTypeData.length == 0) { 405 if (this.feeTypeData.length == 0) {
400 this.feeType = { 406 this.feeType = {
401 amount: "0.00", 407 amount: "0.00",
402 discount: "0.00", 408 discount: "0.00",
403 paidAmount: "0.00", 409 paidAmount: "0.00",
404 subTotal: "0.00", 410 subTotal: "0.00",
405 feeTypeList: "" 411 feeTypeList: ""
406 }; 412 };
407 } 413 }
408 }, 414 },
409 getAllClasses() { 415 getAllClasses() {
410 http() 416 http()
411 .get("/getClassesList", { 417 .get("/getClassesList", {
412 headers: { Authorization: "Bearer " + this.token } 418 headers: { Authorization: "Bearer " + this.token }
413 }) 419 })
414 .then(response => { 420 .then(response => {
415 this.addclass = response.data.data; 421 this.addclass = response.data.data;
416 }) 422 })
417 .catch(err => { 423 .catch(error => {
418 // console.log("err====>", err); 424 // console.log("err====>", err);
425 this.showLoader = false;
426 if (error.response.status === 401) {
427 this.$router.replace({ path: "/" });
428 this.$store.dispatch("setToken", null);
429 this.$store.dispatch("Id", null);
430 this.$store.dispatch("Role", null);
431 }
419 }); 432 });
420 }, 433 },
421 getAllStudents() { 434 getAllStudents() {
422 http() 435 http()
423 .get("/getStudentsList", { 436 .get("/getStudentsList", {
424 params: { classId: this.invoiceData.classNum }, 437 params: { classId: this.invoiceData.classNum },
425 headers: { Authorization: "Bearer " + this.token } 438 headers: { Authorization: "Bearer " + this.token }
426 }) 439 })
427 .then(response => { 440 .then(response => {
428 this.studentList = response.data.data; 441 this.studentList = response.data.data;
429 }) 442 })
430 .catch(err => { 443 .catch(err => {
431 // console.log("err====>", err); 444 // console.log("err====>", err);
432 }); 445 });
433 }, 446 },
434 getfeeType() { 447 getfeeType() {
435 http() 448 http()
436 .get("/getFeesList", { 449 .get("/getFeesList", {
437 headers: { Authorization: "Bearer " + this.token } 450 headers: { Authorization: "Bearer " + this.token }
438 }) 451 })
439 .then(response => { 452 .then(response => {
440 this.feeTypes = response.data.data; 453 this.feeTypes = response.data.data;
441 }) 454 })
442 .catch(err => { 455 .catch(err => {
443 // console.log("err====>", err); 456 // console.log("err====>", err);
444 }); 457 });
445 }, 458 },
446 getAmmountDetails(feeTyp) { 459 getAmmountDetails(feeTyp) {
447 let feeType = { 460 let feeType = {
448 amount: "", 461 amount: "",
449 discount: "", 462 discount: "",
450 subTotal: "", 463 subTotal: "",
451 subParticularTotal: "", 464 subParticularTotal: "",
452 paidAmount: "" 465 paidAmount: ""
453 }; 466 };
454 for (let i = 0; i < this.feeTypeData.length; i++) { 467 for (let i = 0; i < this.feeTypeData.length; i++) {
455 // *********** AMOUNT *********** 468 // *********** AMOUNT ***********
456 feeType.amount = 469 feeType.amount =
457 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 470 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
458 console.log("feeType.amount ", feeType.amount); 471 console.log("feeType.amount ", feeType.amount);
459 this.feeType.amount = feeType.amount; 472 this.feeType.amount = feeType.amount;
460 this.feeType.subTotal = feeType.amount; 473 this.feeType.subTotal = feeType.amount;
461 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 474 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
462 // *********** DISCOUNT *********** 475 // *********** DISCOUNT ***********
463 if (this.feeTypeData[i].discount) { 476 if (this.feeTypeData[i].discount) {
464 feeType.discount = 477 feeType.discount =
465 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 478 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
466 console.log("feeType.discount", feeType.discount); 479 console.log("feeType.discount", feeType.discount);
467 this.feeType.discount = feeType.discount; 480 this.feeType.discount = feeType.discount;
468 feeType.subParticularTotal = 481 feeType.subParticularTotal =
469 this.feeTypeData[i].amount - 482 this.feeTypeData[i].amount -
470 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 483 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
471 console.log("feeType.subTotal", feeType.subTotal); 484 console.log("feeType.subTotal", feeType.subTotal);
472 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 485 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
473 } 486 }
474 // *********** SUBTOTAL *********** 487 // *********** SUBTOTAL ***********
475 feeType.subTotal = 488 feeType.subTotal =
476 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 489 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
477 this.feeType.subTotal = feeType.subTotal.toFixed(2); 490 this.feeType.subTotal = feeType.subTotal.toFixed(2);
478 // *********** PAID-AMOUNT *********** 491 // *********** PAID-AMOUNT ***********
479 feeType.paidAmount = 492 feeType.paidAmount =
480 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 493 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
481 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 494 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
482 } 495 }
483 }, 496 },
484 getPayMethodList() { 497 getPayMethodList() {
485 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 498 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
486 this.showPayMethods = true; 499 this.showPayMethods = true;
487 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 500 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
488 this.showPayMethods = true; 501 this.showPayMethods = true;
489 } else { 502 } else {
490 this.showPayMethods = false; 503 this.showPayMethods = false;
491 } 504 }
492 } 505 }
493 }, 506 },
494 mounted() { 507 mounted() {
495 this.token = this.$store.state.token; 508 this.token = this.$store.state.token;
496 this.getInvoiceList(); 509 this.getInvoiceList();
497 this.getAllClasses(); 510 this.getAllClasses();
498 this.getfeeType(); 511 this.getfeeType();
499 }, 512 },
500 created() { 513 created() {
501 this.$root.$on("app:search", search => { 514 this.$root.$on("app:search", search => {
502 this.search = search; 515 this.search = search;
503 }); 516 });
504 }, 517 },
505 beforeDestroy() { 518 beforeDestroy() {
506 // dont forget to remove the listener 519 // dont forget to remove the listener
507 this.$root.$off("app:search"); 520 this.$root.$off("app:search");
508 } 521 }
509 }; 522 };
510 </script> 523 </script>
511 524
512 525
513 <style scoped> 526 <style scoped>
514 .active { 527 .active {
515 background-color: gray; 528 background-color: gray;
516 color: white !important; 529 color: white !important;
517 } 530 }
518 .activebtn { 531 .activebtn {
519 color: black !important; 532 color: black !important;
520 } 533 }
521 table { 534 table {
522 border-collapse: collapse; 535 border-collapse: collapse;
523 border: 1px solid #e2e7eb; 536 border: 1px solid #e2e7eb;
524 } 537 }
525 538
526 th, 539 th,
527 td { 540 td {
528 border: 1px solid #e2e7eb; 541 border: 1px solid #e2e7eb;
529 padding: 10px; 542 padding: 10px;
530 text-align: center; 543 text-align: center;
531 } 544 }
532 table.feeTypeTable { 545 table.feeTypeTable {
533 table-layout: auto !important; 546 table-layout: auto !important;
534 width: 100% !important; 547 width: 100% !important;
535 } 548 }
536 @media screen and (max-width: 380px) { 549 @media screen and (max-width: 380px) {
537 .tableRsponsive { 550 .tableRsponsive {
538 display: block; 551 display: block;
539 position: relative; 552 position: relative;
540 overflow: scroll; 553 overflow: scroll;
541 } 554 }
542 } 555 }
543 </style> 556 </style>
src/pages/Account/feeTypes.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Fee Type</v-tab> 10 >Existing Fee Type</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Fee Type</v-tab> 18 >Add New Fee Type</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Fee Type</h3> 34 <h3>Edit Fee Type</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-container fluid> 39 <v-container fluid>
40 <v-layout wrap justify-center> 40 <v-layout wrap justify-center>
41 <v-flex xs12 sm9> 41 <v-flex xs12 sm9>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right pr-3">Fee Type:</label> 44 <label class="right pr-3">Fee Type:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8> 46 <v-flex xs8>
47 <v-text-field 47 <v-text-field
48 v-model="editedItem.feeType" 48 v-model="editedItem.feeType"
49 placeholder="fill your Fee Type" 49 placeholder="fill your Fee Type"
50 :rules="feetTypeRules" 50 :rules="feetTypeRules"
51 required 51 required
52 ></v-text-field> 52 ></v-text-field>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right pr-3">Note:</label> 57 <label class="right pr-3">Note:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8> 59 <v-flex xs8>
60 <v-textarea 60 <v-textarea
61 name="input-7-1" 61 name="input-7-1"
62 v-model="editedItem.note" 62 v-model="editedItem.note"
63 placeholder="fill your Note" 63 placeholder="fill your Note"
64 :rules="noteRules" 64 :rules="noteRules"
65 multi-line 65 multi-line
66 required 66 required
67 ></v-textarea> 67 ></v-textarea>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 <v-card-actions> 70 <v-card-actions>
71 <v-btn round dark @click.native="close">Cancel</v-btn> 71 <v-btn round dark @click.native="close">Cancel</v-btn>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 <v-btn round dark @click="save">Save</v-btn> 73 <v-btn round dark @click="save">Save</v-btn>
74 </v-card-actions> 74 </v-card-actions>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-container> 77 </v-container>
78 </v-card> 78 </v-card>
79 </v-dialog> 79 </v-dialog>
80 80
81 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 81 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
82 82
83 <v-dialog v-model="dialog1" max-width="600px"> 83 <v-dialog v-model="dialog1" max-width="600px">
84 <v-toolbar color="grey lighten-2"> 84 <v-toolbar color="grey lighten-2">
85 <v-spacer></v-spacer> 85 <v-spacer></v-spacer>
86 <v-toolbar-title> 86 <v-toolbar-title>
87 <h3>Fee Type</h3> 87 <h3>Fee Type</h3>
88 </v-toolbar-title> 88 </v-toolbar-title>
89 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
90 <v-icon @click="close1">close</v-icon> 90 <v-icon @click="close1">close</v-icon>
91 </v-toolbar> 91 </v-toolbar>
92 <v-card> 92 <v-card>
93 <v-card-text> 93 <v-card-text>
94 <v-container grid-list-md> 94 <v-container grid-list-md>
95 <v-layout wrap> 95 <v-layout wrap>
96 <v-flex> 96 <v-flex>
97 <v-layout> 97 <v-layout>
98 <v-flex xs5 sm6> 98 <v-flex xs5 sm6>
99 <h5 class="right my-1"> 99 <h5 class="right my-1">
100 <b>Fee Type:</b> 100 <b>Fee Type:</b>
101 </h5> 101 </h5>
102 </v-flex> 102 </v-flex>
103 <v-flex sm6 xs8> 103 <v-flex sm6 xs8>
104 <h5 class="my-1">{{ editedItem.feeType }}</h5> 104 <h5 class="my-1">{{ editedItem.feeType }}</h5>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs5 sm6> 108 <v-flex xs5 sm6>
109 <h5 class="right my-1"> 109 <h5 class="right my-1">
110 <b>Note:</b> 110 <b>Note:</b>
111 </h5> 111 </h5>
112 </v-flex> 112 </v-flex>
113 <v-flex sm6 xs8> 113 <v-flex sm6 xs8>
114 <h5 class="my-1">{{ editedItem.note }}</h5> 114 <h5 class="my-1">{{ editedItem.note }}</h5>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 </v-container> 119 </v-container>
120 </v-card-text> 120 </v-card-text>
121 </v-card> 121 </v-card>
122 </v-dialog> 122 </v-dialog>
123 123
124 <v-snackbar 124 <v-snackbar
125 :timeout="timeout" 125 :timeout="timeout"
126 :top="y === 'top'" 126 :top="y === 'top'"
127 :right="x === 'right'" 127 :right="x === 'right'"
128 :vertical="mode === 'vertical'" 128 :vertical="mode === 'vertical'"
129 v-model="snackbar" 129 v-model="snackbar"
130 color="success" 130 color="success"
131 >{{ text }}</v-snackbar> 131 >{{ text }}</v-snackbar>
132 132
133 <!-- ****** EXISTING-FEETYPE TABLE ****** --> 133 <!-- ****** EXISTING-FEETYPE TABLE ****** -->
134 134
135 <v-data-table 135 <v-data-table
136 :headers="headers" 136 :headers="headers"
137 :items="feeTypeList" 137 :items="feeTypeList"
138 :pagination.sync="pagination" 138 :pagination.sync="pagination"
139 :search="search" 139 :search="search"
140 > 140 >
141 <template slot="items" slot-scope="props"> 141 <template slot="items" slot-scope="props">
142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td> 143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
144 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 144 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
146 146
147 <td class="text-xs-center"> 147 <td class="text-xs-center">
148 <!-- <span> --> 148 <!-- <span> -->
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:18px; " 152 style="cursor:pointer; width:25px; height:18px; "
153 class="mr-5" 153 class="mr-5"
154 @click="profile(props.item)" 154 @click="profile(props.item)"
155 src="/static/icon/eye1.png" 155 src="/static/icon/eye1.png"
156 /> 156 />
157 <span>View</span> 157 <span>View</span>
158 </v-tooltip> 158 </v-tooltip>
159 <v-tooltip top> 159 <v-tooltip top>
160 <img 160 <img
161 slot="activator" 161 slot="activator"
162 style="cursor:pointer; width:20px; height:18px; " 162 style="cursor:pointer; width:20px; height:18px; "
163 class="mr-5" 163 class="mr-5"
164 @click="editItem(props.item)" 164 @click="editItem(props.item)"
165 src="/static/icon/edit1.png" 165 src="/static/icon/edit1.png"
166 /> 166 />
167 <span>Edit</span> 167 <span>Edit</span>
168 </v-tooltip> 168 </v-tooltip>
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; " 172 style="cursor:pointer; width:20px; height:20px; "
173 class="mr-5" 173 class="mr-5"
174 @click="deleteItem(props.item)" 174 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png" 175 src="/static/icon/delete1.png"
176 /> 176 />
177 <span>Delete</span> 177 <span>Delete</span>
178 </v-tooltip> 178 </v-tooltip>
179 <!-- </span> --> 179 <!-- </span> -->
180 </td> 180 </td>
181 </template> 181 </template>
182 <v-alert 182 <v-alert
183 slot="no-results" 183 slot="no-results"
184 :value="true" 184 :value="true"
185 color="error" 185 color="error"
186 icon="warning" 186 icon="warning"
187 >Your search for "{{ search }}" found no results.</v-alert> 187 >Your search for "{{ search }}" found no results.</v-alert>
188 </v-data-table> 188 </v-data-table>
189 </v-tab-item> 189 </v-tab-item>
190 190
191 <!-- ****** ADD Fee Type ****** --> 191 <!-- ****** ADD Fee Type ****** -->
192 192
193 <v-tab-item> 193 <v-tab-item>
194 <v-container> 194 <v-container>
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 <v-flex xs12 sm8 offset-sm2 class="top"> 203 <v-flex xs12 sm8 offset-sm2 class="top">
204 <v-card flat> 204 <v-card flat>
205 <v-container fluid fill-height> 205 <v-container fluid fill-height>
206 <v-layout align-center> 206 <v-layout align-center>
207 <v-flex xs12 class="mt-4"> 207 <v-flex xs12 class="mt-4">
208 <v-form ref="form" v-model="valid" lazy-validation> 208 <v-form ref="form" v-model="valid" lazy-validation>
209 <v-layout> 209 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 210 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">Fee Type:</label> 211 <label class="right">Fee Type:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs6 class="ml-3"> 213 <v-flex xs6 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="feeTypeData.feeType" 215 v-model="feeTypeData.feeType"
216 placeholder="fill your Fee Type" 216 placeholder="fill your Fee Type"
217 type="text" 217 type="text"
218 :rules="feetTypeRules" 218 :rules="feetTypeRules"
219 required 219 required
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 <v-layout> 223 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 224 <v-flex xs4 class="pt-4 subheading">
225 <label class="right">Note:</label> 225 <label class="right">Note:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs6 class="ml-3"> 227 <v-flex xs6 class="ml-3">
228 <v-textarea 228 <v-textarea
229 name="input-7-1" 229 name="input-7-1"
230 v-model="feeTypeData.note" 230 v-model="feeTypeData.note"
231 placeholder="fill your Note" 231 placeholder="fill your Note"
232 type="text" 232 type="text"
233 :rules="noteRules" 233 :rules="noteRules"
234 multi-line 234 multi-line
235 required 235 required
236 ></v-textarea> 236 ></v-textarea>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 <!-- <v-layout> 239 <!-- <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
241 <label class="right">Monthly:</label> 241 <label class="right">Monthly:</label>
242 </v-flex> 242 </v-flex>
243 <v-flex xs6 class="ml-3"> 243 <v-flex xs6 class="ml-3">
244 <v-checkbox 244 <v-checkbox
245 v-model="feeTypeData.monthly" 245 v-model="feeTypeData.monthly"
246 :rules="monthlyRules" 246 :rules="monthlyRules"
247 multi-line 247 multi-line
248 required 248 required
249 ></v-checkbox> 249 ></v-checkbox>
250 </v-flex> 250 </v-flex>
251 </v-layout>--> 251 </v-layout>-->
252 <v-layout> 252 <v-layout>
253 <v-flex xs12 sm9 offset-sm2> 253 <v-flex xs12 sm9 offset-sm2>
254 <v-card-actions> 254 <v-card-actions>
255 <v-btn @click="clear" round dark>clear</v-btn> 255 <v-btn @click="clear" round dark>clear</v-btn>
256 <v-spacer></v-spacer> 256 <v-spacer></v-spacer>
257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
258 </v-card-actions> 258 </v-card-actions>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 </v-form> 261 </v-form>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-container> 264 </v-container>
265 </v-card> 265 </v-card>
266 </v-flex> 266 </v-flex>
267 </v-container> 267 </v-container>
268 </v-tab-item> 268 </v-tab-item>
269 </v-tabs> 269 </v-tabs>
270 <div class="loader" v-if="showLoader"> 270 <div class="loader" v-if="showLoader">
271 <v-progress-circular indeterminate color="white"></v-progress-circular> 271 <v-progress-circular indeterminate color="white"></v-progress-circular>
272 </div> 272 </div>
273 </v-app> 273 </v-app>
274 </template> 274 </template>
275 275
276 <script> 276 <script>
277 import http from "@/Services/http.js"; 277 import http from "@/Services/http.js";
278 import Util from "@/util"; 278 import Util from "@/util";
279 279
280 export default { 280 export default {
281 data: () => ({ 281 data: () => ({
282 snackbar: false, 282 snackbar: false,
283 y: "top", 283 y: "top",
284 x: "right", 284 x: "right",
285 mode: "", 285 mode: "",
286 timeout: 3000, 286 timeout: 3000,
287 text: "", 287 text: "",
288 showLoader: false, 288 showLoader: false,
289 loading: false, 289 loading: false,
290 date: null, 290 date: null,
291 search: "", 291 search: "",
292 dialog: false, 292 dialog: false,
293 dialog1: false, 293 dialog1: false,
294 valid: true, 294 valid: true,
295 validEdit: true, 295 validEdit: true,
296 isActive: true, 296 isActive: true,
297 newActive: false, 297 newActive: false,
298 AddUsercredentials: {}, 298 AddUsercredentials: {},
299 pagination: { 299 pagination: {
300 rowsPerPage: 15 300 rowsPerPage: 15
301 }, 301 },
302 feetTypeRules: [v => !!v || " Fee Type Name is required"], 302 feetTypeRules: [v => !!v || " Fee Type Name is required"],
303 monthlyRules: [v => !!v || " Select Monthly"], 303 monthlyRules: [v => !!v || " Select Monthly"],
304 noteRules: [v => !!v || " Note is required"], 304 noteRules: [v => !!v || " Note is required"],
305 headers: [ 305 headers: [
306 { 306 {
307 text: "No", 307 text: "No",
308 align: "center", 308 align: "center",
309 sortable: false, 309 sortable: false,
310 value: "No" 310 value: "No"
311 }, 311 },
312 { 312 {
313 text: "fee Type", 313 text: "fee Type",
314 value: "feeType", 314 value: "feeType",
315 sortable: false, 315 sortable: false,
316 align: "center" 316 align: "center"
317 }, 317 },
318 { text: "Note", value: "note", sortable: false, align: "center" }, 318 { text: "Note", value: "note", sortable: false, align: "center" },
319 // { text: "Session", value: "session", sortable: false, align: "center" }, 319 // { text: "Session", value: "session", sortable: false, align: "center" },
320 { text: "Action", value: "", sortable: false, align: "center" } 320 { text: "Action", value: "", sortable: false, align: "center" }
321 ], 321 ],
322 feeTypeList: [], 322 feeTypeList: [],
323 select: "", 323 select: "",
324 token: "", 324 token: "",
325 editedItem: {}, 325 editedItem: {},
326 feeTypeData: {} 326 feeTypeData: {}
327 }), 327 }),
328 methods: { 328 methods: {
329 getFeeTypeList() { 329 getFeeTypeList() {
330 this.showLoader = true; 330 this.showLoader = true;
331 http() 331 http()
332 .get("/getFeesList", { 332 .get("/getFeesList", {
333 headers: { Authorization: "Bearer " + this.token } 333 headers: { Authorization: "Bearer " + this.token }
334 }) 334 })
335 .then(response => { 335 .then(response => {
336 this.feeTypeList = response.data.data; 336 this.feeTypeList = response.data.data;
337 this.showLoader = false; 337 this.showLoader = false;
338 // console.log("getAllfeetypes=====>",response.data.data) 338 // console.log("getAllfeetypes=====>",response.data.data)
339 }) 339 })
340 .catch(err => { 340 .catch(error => {
341 // console.log("err====>", err); 341 // console.log("err====>", err);
342 this.showLoader = false; 342 this.showLoader = false;
343 if (error.response.status === 401) { 343 if (error.response.status === 401) {
344 this.$router.replace({ path: "/" }); 344 this.$router.replace({ path: "/" });
345 this.$store.dispatch("setToken", null); 345 this.$store.dispatch("setToken", null);
346 this.$store.dispatch("Id", null); 346 this.$store.dispatch("Id", null);
347 this.$store.dispatch("Role", null);
347 } 348 }
348 }); 349 });
349 }, 350 },
350 editItem(item) { 351 editItem(item) {
351 this.editedIndex = this.feeTypeList.indexOf(item); 352 this.editedIndex = this.feeTypeList.indexOf(item);
352 this.editedItem = Object.assign({}, item); 353 this.editedItem = Object.assign({}, item);
353 console.log(this.editedItem);
354 this.dialog = true; 354 this.dialog = true;
355 }, 355 },
356 profile(item) { 356 profile(item) {
357 this.editedIndex = this.feeTypeList.indexOf(item); 357 this.editedIndex = this.feeTypeList.indexOf(item);
358 this.editedItem = Object.assign({}, item); 358 this.editedItem = Object.assign({}, item);
359 this.dialog1 = true; 359 this.dialog1 = true;
360 }, 360 },
361 deleteItem(item) { 361 deleteItem(item) {
362 let deleteFeeType = { 362 let deleteFeeType = {
363 feeId: item._id 363 feeId: item._id
364 }; 364 };
365 http() 365 http()
366 .delete( 366 .delete(
367 "/deleteFee", 367 "/deleteFee",
368 confirm("Are you sure you want to delete this?") && { 368 confirm("Are you sure you want to delete this?") && {
369 params: deleteFeeType 369 params: deleteFeeType
370 } 370 }
371 ) 371 )
372 .then(response => { 372 .then(response => {
373 if ((this.snackbar = true)) { 373 if ((this.snackbar = true)) {
374 this.text = "Successfully delete Existing feetype"; 374 this.text = "Successfully delete Existing feetype";
375 } 375 }
376 this.getFeeTypeList(); 376 this.getFeeTypeList();
377 }) 377 })
378 .catch(error => { 378 .catch(error => {
379 // console.log(error); 379 // console.log(error);
380 }); 380 });
381 }, 381 },
382 activeTab(type) { 382 activeTab(type) {
383 switch (type) { 383 switch (type) {
384 case "existing": 384 case "existing":
385 this.newActive = false; 385 this.newActive = false;
386 this.isActive = true; 386 this.isActive = true;
387 break; 387 break;
388 388
389 default: 389 default:
390 this.newActive = true; 390 this.newActive = true;
391 this.isActive = false; 391 this.isActive = false;
392 break; 392 break;
393 } 393 }
394 }, 394 },
395 close() { 395 close() {
396 this.dialog = false; 396 this.dialog = false;
397 setTimeout(() => { 397 setTimeout(() => {
398 this.editedItem = Object.assign({}, this.defaultItem); 398 this.editedItem = Object.assign({}, this.defaultItem);
399 this.editedIndex = -1; 399 this.editedIndex = -1;
400 }, 300); 400 }, 300);
401 }, 401 },
402 close1() { 402 close1() {
403 this.dialog1 = false; 403 this.dialog1 = false;
404 }, 404 },
405 close2() { 405 close2() {
406 this.dialog2 = false; 406 this.dialog2 = false;
407 }, 407 },
408 submit() { 408 submit() {
409 if (this.$refs.form.validate()) { 409 if (this.$refs.form.validate()) {
410 this.loading = true; 410 this.loading = true;
411 http() 411 http()
412 .post("/createFee", this.feeTypeData) 412 .post("/createFee", this.feeTypeData)
413 .then(response => { 413 .then(response => {
414 console.log(response); 414 console.log(response);
415 this.getFeeTypeList(); 415 this.getFeeTypeList();
416 if ((this.snackbar = true)) { 416 if ((this.snackbar = true)) {
417 this.text = "New feetype added successfully"; 417 this.text = "New feetype added successfully";
418 } 418 }
419 419
420 this.clear(); 420 this.clear();
421 this.loading = false; 421 this.loading = false;
422 }) 422 })
423 .catch(error => { 423 .catch(error => {
424 // console.log(error); 424 // console.log(error);
425 if ((this.snackbar = true)) { 425 if ((this.snackbar = true)) {
426 this.text = error.response.data.message; 426 this.text = error.response.data.message;
427 } 427 }
428 this.loading = false; 428 this.loading = false;
429 }); 429 });
430 } 430 }
431 }, 431 },
432 clear() { 432 clear() {
433 this.$refs.form.reset(); 433 this.$refs.form.reset();
434 }, 434 },
435 save() { 435 save() {
436 this.editedItem.feeId = this.editedItem._id; 436 this.editedItem.feeId = this.editedItem._id;
437 http() 437 http()
438 .put("/updateFee", this.editedItem) 438 .put("/updateFee", this.editedItem)
439 .then(response => { 439 .then(response => {
440 if ((this.snackbar = true)) { 440 if ((this.snackbar = true)) {
441 this.text = "Successfully Edit Existing Fee Type"; 441 this.text = "Successfully Edit Existing Fee Type";
442 } 442 }
443 this.getFeeTypeList(); 443 this.getFeeTypeList();
444 this.close(); 444 this.close();
445 }) 445 })
446 .catch(error => { 446 .catch(error => {
447 this.text = error.response.data.message; 447 this.text = error.response.data.message;
448 // console.log(error); 448 // console.log(error);
449 }); 449 });
450 } 450 }
451 }, 451 },
452 mounted() { 452 mounted() {
453 this.token = this.$store.state.token; 453 this.token = this.$store.state.token;
454 this.getFeeTypeList(); 454 this.getFeeTypeList();
455 }, 455 },
456 created() { 456 created() {
457 this.$root.$on("app:search", search => { 457 this.$root.$on("app:search", search => {
458 this.search = search; 458 this.search = search;
459 }); 459 });
460 }, 460 },
461 beforeDestroy() { 461 beforeDestroy() {
462 // dont forget to remove the listener 462 // dont forget to remove the listener
463 this.$root.$off("app:search"); 463 this.$root.$off("app:search");
464 } 464 }
465 }; 465 };
466 </script> 466 </script>
467 467
468 <style scoped> 468 <style scoped>
469 .active { 469 .active {
470 background-color: gray; 470 background-color: gray;
471 color: white !important; 471 color: white !important;
472 } 472 }
473 .activebtn { 473 .activebtn {
474 color: black !important; 474 color: black !important;
475 } 475 }
src/pages/Account/paymentHistory.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** EXISTING-USER TABLE DATA****** --> 3 <!-- ****** EXISTING-USER TABLE DATA****** -->
4 <v-card flat> 4 <v-card flat>
5 <v-card-actions> 5 <v-card-actions>
6 <v-layout> 6 <v-layout>
7 <h4 class="right mt-2 ml-2">Payment History</h4> 7 <h4 class="right mt-2 ml-2">Payment History</h4>
8 </v-layout> 8 </v-layout>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-card-actions> 10 </v-card-actions>
11 </v-card> 11 </v-card>
12 <v-data-table 12 <v-data-table
13 :headers="headers" 13 :headers="headers"
14 :items="paymentHistory" 14 :items="paymentHistory"
15 :pagination.sync="pagination" 15 :pagination.sync="pagination"
16 :search="search" 16 :search="search"
17 > 17 >
18 <template slot="items" slot-scope="props"> 18 <template slot="items" slot-scope="props">
19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 19 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
20 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td> 20 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
21 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 21 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
22 <td id="td" class="text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td> 22 <td id="td" class="text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td>
23 <td id="td" class="text-xs-center">{{ props.item.paymentMethod }}</td> 23 <td id="td" class="text-xs-center">{{ props.item.paymentMethod }}</td>
24 <!-- <td id="td" class="text-xs-center">{{ props.item.feeType[0].discount }}</td> --> 24 <!-- <td id="td" class="text-xs-center">{{ props.item.feeType[0].discount }}</td> -->
25 <td id="td" class="text-xs-center">{{ props.item.totalPaidAmount }}</td> 25 <td id="td" class="text-xs-center">{{ props.item.totalPaidAmount }}</td>
26 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 26 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
27 <!-- <td class="text-xs-center"> 27 <!-- <td class="text-xs-center">
28 <span> 28 <span>
29 <v-tooltip top> 29 <v-tooltip top>
30 <img 30 <img
31 slot="activator" 31 slot="activator"
32 style="cursor:pointer; width:20px; height:18px; " 32 style="cursor:pointer; width:20px; height:18px; "
33 class="mr-5" 33 class="mr-5"
34 @click="editItem(props.item)" 34 @click="editItem(props.item)"
35 src="/static/icon/edit1.png" 35 src="/static/icon/edit1.png"
36 /> 36 />
37 <span>Edit</span> 37 <span>Edit</span>
38 </v-tooltip> 38 </v-tooltip>
39 <v-tooltip top> 39 <v-tooltip top>
40 <img 40 <img
41 slot="activator" 41 slot="activator"
42 style="cursor:pointer;width:20px; height:20px; " 42 style="cursor:pointer;width:20px; height:20px; "
43 class="mr-5" 43 class="mr-5"
44 @click="deleteItem(props.item)" 44 @click="deleteItem(props.item)"
45 src="/static/icon/delete1.png" 45 src="/static/icon/delete1.png"
46 /> 46 />
47 <span>Delete</span> 47 <span>Delete</span>
48 </v-tooltip> 48 </v-tooltip>
49 </span> 49 </span>
50 </td> --> 50 </td> -->
51 </template> 51 </template>
52 <v-alert 52 <v-alert
53 slot="no-results" 53 slot="no-results"
54 :value="true" 54 :value="true"
55 color="error" 55 color="error"
56 icon="warning" 56 icon="warning"
57 >Your search for "{{ search }}" found no results.</v-alert> 57 >Your search for "{{ search }}" found no results.</v-alert>
58 </v-data-table> 58 </v-data-table>
59 <div class="loader" v-if="showLoader"> 59 <div class="loader" v-if="showLoader">
60 <v-progress-circular indeterminate color="white"></v-progress-circular> 60 <v-progress-circular indeterminate color="white"></v-progress-circular>
61 </div> 61 </div>
62 </v-app> 62 </v-app>
63 </template> 63 </template>
64 64
65 <script> 65 <script>
66 import http from "@/Services/http.js"; 66 import http from "@/Services/http.js";
67 import moment from "moment"; 67 import moment from "moment";
68 68
69 export default { 69 export default {
70 data: () => ({ 70 data: () => ({
71 showLoader: false, 71 showLoader: false,
72 search: "", 72 search: "",
73 pagination: { 73 pagination: {
74 rowsPerPage: 15 74 rowsPerPage: 15
75 }, 75 },
76 headers: [ 76 headers: [
77 { 77 {
78 text: "No", 78 text: "No",
79 align: "center", 79 align: "center",
80 sortable: false, 80 sortable: false,
81 value: "No" 81 value: "No"
82 }, 82 },
83 { 83 {
84 text: "Student", 84 text: "Student",
85 value: "student", 85 value: "student",
86 sortable: false, 86 sortable: false,
87 align: "center" 87 align: "center"
88 }, 88 },
89 { text: "Class", value: "class", sortable: false, align: "center" }, 89 { text: "Class", value: "class", sortable: false, align: "center" },
90 { 90 {
91 text: "Fee Type", 91 text: "Fee Type",
92 value: "feeTypeName", 92 value: "feeTypeName",
93 sortable: false, 93 sortable: false,
94 align: "center" 94 align: "center"
95 }, 95 },
96 { 96 {
97 text: "Method", 97 text: "Method",
98 value: "paymentMethod", 98 value: "paymentMethod",
99 sortable: false, 99 sortable: false,
100 align: "center" 100 align: "center"
101 }, 101 },
102 { 102 {
103 text: "Paid Amount", 103 text: "Paid Amount",
104 value: "totalPaidAmount", 104 value: "totalPaidAmount",
105 sortable: false, 105 sortable: false,
106 align: "center" 106 align: "center"
107 }, 107 },
108 { 108 {
109 text: "Date", 109 text: "Date",
110 value: "date", 110 value: "date",
111 sortable: false, 111 sortable: false,
112 align: "center" 112 align: "center"
113 }, 113 },
114 // { text: "Action", value: "", sortable: false, align: "center" } 114 // { text: "Action", value: "", sortable: false, align: "center" }
115 ], 115 ],
116 paymentHistory: [] 116 paymentHistory: []
117 }), 117 }),
118 methods: { 118 methods: {
119 dates: function(date) { 119 dates: function(date) {
120 return moment(date).format("MMMM DD, YYYY"); 120 return moment(date).format("MMMM DD, YYYY");
121 }, 121 },
122 getPaymentHistory() { 122 getPaymentHistory() {
123 this.showLoader = true; 123 this.showLoader = true;
124 var token = this.$store.state.token; 124 var token = this.$store.state.token;
125 http() 125 http()
126 .get("/getInvoicesList", { 126 .get("/getInvoicesList", {
127 params: { paymentStatus: "FULLY_PAID" }, 127 params: { paymentStatus: "FULLY_PAID" },
128 headers: { Authorization: "Bearer " + token } 128 headers: { Authorization: "Bearer " + token }
129 }) 129 })
130 .then(response => { 130 .then(response => {
131 this.paymentHistory = response.data.data; 131 this.paymentHistory = response.data.data;
132 this.showLoader = false; 132 this.showLoader = false;
133 }) 133 })
134 .catch(error => { 134 .catch(error => {
135 this.showLoader = false; 135 this.showLoader = false;
136 if (error.response.status === 401) { 136 if (error.response.status === 401) {
137 this.$router.replace({ path: "/" }); 137 this.$router.replace({ path: "/" });
138 this.$store.dispatch("setToken", null); 138 this.$store.dispatch("setToken", null);
139 this.$store.dispatch("Id", null); 139 this.$store.dispatch("Id", null);
140 this.$store.dispatch("Role", null);
140 } 141 }
141 }); 142 });
142 } 143 }
143 // getRole() { 144 // getRole() {
144 // this.showLoader = true; 145 // this.showLoader = true;
145 // var token = this.$store.state.token; 146 // var token = this.$store.state.token;
146 // http() 147 // http()
147 // .get("/getRolesList", { 148 // .get("/getRolesList", {
148 // headers: { Authorization: "Bearer " + token } 149 // headers: { Authorization: "Bearer " + token }
149 // }) 150 // })
150 // .then(response => { 151 // .then(response => {
151 // this.userRole = response.data.data; 152 // this.userRole = response.data.data;
152 // this.showLoader = false; 153 // this.showLoader = false;
153 // // console.log("UserList=====>",this.desserts) 154 // // console.log("UserList=====>",this.desserts)
154 // }) 155 // })
155 // .catch(error => { 156 // .catch(error => {
156 // this.showLoader = false; 157 // this.showLoader = false;
157 // if (error.response.status === 401) { 158 // if (error.response.status === 401) {
158 // this.$router.replace({ path: "/" }); 159 // this.$router.replace({ path: "/" });
159 // this.$store.dispatch("setToken", null); 160 // this.$store.dispatch("setToken", null);
160 // this.$store.dispatch("Id", null); 161 // this.$store.dispatch("Id", null);
161 // } 162 // }
162 // }); 163 // });
163 // } 164 // }
164 }, 165 },
165 mounted() { 166 mounted() {
166 this.getPaymentHistory(); 167 this.getPaymentHistory();
167 // this.getRole(); 168 // this.getRole();
168 }, 169 },
169 created() { 170 created() {
170 this.$root.$on("app:search", search => { 171 this.$root.$on("app:search", search => {
171 this.search = search; 172 this.search = search;
172 }); 173 });
173 }, 174 },
174 beforeDestroy() { 175 beforeDestroy() {
175 // dont forget to remove the listener 176 // dont forget to remove the listener
176 this.$root.$off("app:search"); 177 this.$root.$off("app:search");
177 } 178 }
178 }; 179 };
179 </script> 180 </script>
180 <style scoped> 181 <style scoped>
181 .active { 182 .active {
182 background-color: gray; 183 background-color: gray;
183 color: white !important; 184 color: white !important;
184 } 185 }
185 .activebtn { 186 .activebtn {
186 color: black !important; 187 color: black !important;
187 } 188 }
188 </style> 189 </style>
src/pages/Account/viewInvoice.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit multiple INVOICE ****** --> 3 <!-- ****** Edit multiple INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-card> 5 <v-card>
6 <v-layout wrap> 6 <v-layout wrap>
7 <v-flex 12> 7 <v-flex 12>
8 <br /> 8 <br />
9 <v-layout wrap> 9 <v-layout wrap>
10 <v-flex xs12 sm6> 10 <v-flex xs12 sm6>
11 <v-layout> 11 <v-layout>
12 <v-flex xs4 sm2> 12 <v-flex xs4 sm2>
13 <h5 class="right my-1"> 13 <h5 class="right my-1">
14 <b>invoice:</b> 14 <b>invoice:</b>
15 </h5> 15 </h5>
16 </v-flex> 16 </v-flex>
17 <v-flex sm11 xs8> 17 <v-flex sm11 xs8>
18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 18 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-layout> 21 <v-layout>
22 <v-flex xs4 sm2> 22 <v-flex xs4 sm2>
23 <h5 class="right my-1"> 23 <h5 class="right my-1">
24 <b>Name:</b> 24 <b>Name:</b>
25 </h5> 25 </h5>
26 </v-flex> 26 </v-flex>
27 <v-flex sm11 xs8> 27 <v-flex sm11 xs8>
28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 28 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm2> 32 <v-flex xs4 sm2>
33 <h5 class="right my-1"> 33 <h5 class="right my-1">
34 <b>Class:</b> 34 <b>Class:</b>
35 </h5> 35 </h5>
36 </v-flex> 36 </v-flex>
37 <v-flex sm11 xs8> 37 <v-flex sm11 xs8>
38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 38 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm6> 42 <v-flex xs12 sm6>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 sm2> 44 <v-flex xs4 sm2>
45 <h5 class="right my-1"> 45 <h5 class="right my-1">
46 <b>Roll No:</b> 46 <b>Roll No:</b>
47 </h5> 47 </h5>
48 </v-flex> 48 </v-flex>
49 <v-flex sm6 xs8> 49 <v-flex sm6 xs8>
50 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 50 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 <v-layout> 53 <v-layout>
54 <v-flex xs4 sm2> 54 <v-flex xs4 sm2>
55 <h5 class="right my-1"> 55 <h5 class="right my-1">
56 <b>email:</b> 56 <b>email:</b>
57 </h5> 57 </h5>
58 </v-flex> 58 </v-flex>
59 <v-flex sm6 xs8> 59 <v-flex sm6 xs8>
60 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 60 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs4 sm2> 64 <v-flex xs4 sm2>
65 <h5 class="right my-1"> 65 <h5 class="right my-1">
66 <b>Status :</b> 66 <b>Status :</b>
67 </h5> 67 </h5>
68 </v-flex> 68 </v-flex>
69 <v-flex sm6 xs8> 69 <v-flex sm6 xs8>
70 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5> 70 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 </v-layout> 74 </v-layout>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-card> 77 </v-card>
78 <table class="feeTypeTable tableRsponsive"> 78 <table class="feeTypeTable tableRsponsive">
79 <tr class="info white--text"> 79 <tr class="info white--text">
80 <th>#</th> 80 <th>#</th>
81 <th>Fee Type</th> 81 <th>Fee Type</th>
82 <th>Amount</th> 82 <th>Amount</th>
83 <th>Discount</th> 83 <th>Discount</th>
84 <th>Subtotal</th> 84 <th>Subtotal</th>
85 </tr> 85 </tr>
86 <tr 86 <tr
87 v-for="(feeType, index) in feeTypeData" 87 v-for="(feeType, index) in feeTypeData"
88 :key="index" 88 :key="index"
89 v-on:keyup="getAmmountDetails(feeType)" 89 v-on:keyup="getAmmountDetails(feeType)"
90 > 90 >
91 <td style="width:40px">{{ index + 1 }}</td> 91 <td style="width:40px">{{ index + 1 }}</td>
92 <td style="width:120px">{{ feeType.feeTypeName }}</td> 92 <td style="width:120px">{{ feeType.feeTypeName }}</td>
93 <td style="width:120px">{{ feeType.amount }}</td> 93 <td style="width:120px">{{ feeType.amount }}</td>
94 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 94 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
95 <td style="width:120px">{{ feeType.subTotal }}</td> 95 <td style="width:120px">{{ feeType.subTotal }}</td>
96 </tr> 96 </tr>
97 <tfoot> 97 <tfoot>
98 <tr> 98 <tr>
99 <td colspan="4"> 99 <td colspan="4">
100 <span class="right subheding">Total Amount (RS) :</span> 100 <span class="right subheding">Total Amount (RS) :</span>
101 </td> 101 </td>
102 <td>{{ feeType.subTotal }}</td> 102 <td>{{ feeType.subTotal }}</td>
103 </tr> 103 </tr>
104 <tr> 104 <tr>
105 <td colspan="4"> 105 <td colspan="4">
106 <span class="right subheding">Paid (RS) :</span> 106 <span class="right subheding">Paid (RS) :</span>
107 </td> 107 </td>
108 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 108 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
109 </tr> 109 </tr>
110 <tr> 110 <tr>
111 <td colspan="4"> 111 <td colspan="4">
112 <span class="right subheding">Balance (RS) :</span> 112 <span class="right subheding">Balance (RS) :</span>
113 </td> 113 </td>
114 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 114 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
115 </tr> 115 </tr>
116 </tfoot> 116 </tfoot>
117 </table> 117 </table>
118 <!-- </v-card> --> 118 <!-- </v-card> -->
119 <!-- </v-flex> --> 119 <!-- </v-flex> -->
120 <!-- </v-layout> --> 120 <!-- </v-layout> -->
121 <!-- </v-container> --> 121 <!-- </v-container> -->
122 <!-- </v-flex> --> 122 <!-- </v-flex> -->
123 </v-container> 123 </v-container>
124 <div class="loader" v-if="showLoader"> 124 <div class="loader" v-if="showLoader">
125 <v-progress-circular indeterminate color="white"></v-progress-circular> 125 <v-progress-circular indeterminate color="white"></v-progress-circular>
126 </div> 126 </div>
127 </v-app> 127 </v-app>
128 </template> 128 </template>
129 129
130 <script> 130 <script>
131 import http from "@/Services/http.js"; 131 import http from "@/Services/http.js";
132 import Util from "@/util"; 132 import Util from "@/util";
133 import moment from "moment"; 133 import moment from "moment";
134 134
135 export default { 135 export default {
136 data: () => ({ 136 data: () => ({
137 showLoader: false, 137 showLoader: false,
138 feeTypes: [], 138 feeTypes: [],
139 invoiceData: {}, 139 invoiceData: {},
140 feeType: { 140 feeType: {
141 amount: "", 141 amount: "",
142 discount: "", 142 discount: "",
143 totalPaidAmount: "", 143 totalPaidAmount: "",
144 subTotal: "", 144 subTotal: "",
145 feeTypeName: "" 145 feeTypeName: ""
146 }, 146 },
147 feeTypeData: [], 147 feeTypeData: [],
148 token: "", 148 token: "",
149 invoiceParticularData: {} 149 invoiceParticularData: {}
150 }), 150 }),
151 151
152 methods: { 152 methods: {
153 getInvoiceList() { 153 getInvoiceList() {
154 http() 154 http()
155 .get("/getParticularInvoice", { 155 .get("/getParticularInvoice", {
156 params: { invoiceId: this.$route.params.viewInvoiceId }, 156 params: { invoiceId: this.$route.params.viewInvoiceId },
157 headers: { Authorization: "Bearer " + this.token } 157 headers: { Authorization: "Bearer " + this.token }
158 }) 158 })
159 .then(response => { 159 .then(response => {
160 this.invoiceParticularData = response.data.data; 160 this.invoiceParticularData = response.data.data;
161 this.invoiceData = this.invoiceParticularData; 161 this.invoiceData = this.invoiceParticularData;
162 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 162 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
163 this.feeTypeData = this.invoiceParticularData.feeType; 163 this.feeTypeData = this.invoiceParticularData.feeType;
164 (this.feeType.amount = response.data.data.totalAmount), 164 (this.feeType.amount = response.data.data.totalAmount),
165 (this.feeType.discount = response.data.data.totalDiscount), 165 (this.feeType.discount = response.data.data.totalDiscount),
166 (this.feeType.subTotal = response.data.data.totalSubTotal), 166 (this.feeType.subTotal = response.data.data.totalSubTotal),
167 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount( 167 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount(
168 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount) 168 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount)
169 (this.showLoader = false) 169 (this.showLoader = false)
170 )); 170 ));
171 }) 171 })
172 .catch(err => { 172 .catch(error => {
173 this.showLoader = false; 173 this.showLoader = false;
174 if (error.response.status === 401) {
175 this.$router.replace({ path: "/" });
176 this.$store.dispatch("setToken", null);
177 this.$store.dispatch("Id", null);
178 this.$store.dispatch("Role", null);
179 }
174 }); 180 });
175 }, 181 },
176 getfeeType() { 182 getfeeType() {
177 http() 183 http()
178 .get("/getFeesList", { 184 .get("/getFeesList", {
179 headers: { Authorization: "Bearer " + this.token } 185 headers: { Authorization: "Bearer " + this.token }
180 }) 186 })
181 .then(response => { 187 .then(response => {
182 this.feeTypes = response.data.data; 188 this.feeTypes = response.data.data;
183 }) 189 })
184 .catch(err => { 190 .catch(err => {
185 // console.log("err====>", err); 191 // console.log("err====>", err);
186 }); 192 });
187 }, 193 },
188 getAmmountDetails(feeTyp) { 194 getAmmountDetails(feeTyp) {
189 let feeType = { 195 let feeType = {
190 subTotal: "", 196 subTotal: "",
191 subParticularTotal: "", 197 subParticularTotal: "",
192 paidAmount: "" 198 paidAmount: ""
193 }; 199 };
194 // *********** SUBTOTAL *********** 200 // *********** SUBTOTAL ***********
195 feeType.subTotal = 201 feeType.subTotal =
196 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 202 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
197 this.feeType.subTotal = feeType.subTotal.toFixed(2); 203 this.feeType.subTotal = feeType.subTotal.toFixed(2);
198 // *********** PAID-AMOUNT *********** 204 // *********** PAID-AMOUNT ***********
199 feeType.paidAmount = 205 feeType.paidAmount =
200 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 206 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
201 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 207 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
202 } 208 }
203 }, 209 },
204 mounted() { 210 mounted() {
205 this.token = this.$store.state.token; 211 this.token = this.$store.state.token;
206 this.getInvoiceList(); 212 this.getInvoiceList();
207 this.getfeeType(); 213 this.getfeeType();
208 }, 214 },
209 created() { 215 created() {
210 this.$root.$on("app:search", search => { 216 this.$root.$on("app:search", search => {
211 this.search = search; 217 this.search = search;
212 }); 218 });
213 }, 219 },
214 beforeDestroy() { 220 beforeDestroy() {
215 // dont forget to remove the listener 221 // dont forget to remove the listener
216 this.$root.$off("app:search"); 222 this.$root.$off("app:search");
217 } 223 }
218 }; 224 };
219 </script> 225 </script>
220 226
221 227
222 <style scoped> 228 <style scoped>
223 .active { 229 .active {
224 background-color: gray; 230 background-color: gray;
225 color: white !important; 231 color: white !important;
226 } 232 }
227 .activebtn { 233 .activebtn {
228 color: black !important; 234 color: black !important;
229 } 235 }
230 table { 236 table {
231 border-collapse: collapse; 237 border-collapse: collapse;
232 border: 1px solid #e2e7eb; 238 border: 1px solid #e2e7eb;
233 } 239 }
234 240
235 th, 241 th,
236 td { 242 td {
237 border: 1px solid #e2e7eb; 243 border: 1px solid #e2e7eb;
238 padding: 10px; 244 padding: 10px;
239 text-align: center; 245 text-align: center;
240 } 246 }
241 table.feeTypeTable { 247 table.feeTypeTable {
242 table-layout: auto !important; 248 table-layout: auto !important;
243 width: 100% !important; 249 width: 100% !important;
244 } 250 }
245 @media screen and (max-width: 380px) { 251 @media screen and (max-width: 380px) {
246 .tableRsponsive { 252 .tableRsponsive {
247 display: block; 253 display: block;
248 position: relative; 254 position: relative;
249 overflow: scroll; 255 overflow: scroll;
250 } 256 }
251 } 257 }
252 </style> 258 </style>
src/pages/Administrator/role.vue
Diff comments   View file @00e4bc4
1 =<template> 1 =<template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Role</v-tab> 10 >Existing Role</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Role</v-tab> 18 >Add New Role</v-tab>
19 19
20 <!-- ****** EDITS Role Distribution DETAILS ****** --> 20 <!-- ****** EDITS Role Distribution DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Role</h3> 36 <h3>Edit Role</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-flex xs12 sm12> 43 <v-flex xs12 sm12>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Role:</label> 46 <label class="right">Role:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs8 sm6 class="ml-3"> 48 <v-flex xs8 sm6 class="ml-3">
49 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> 49 <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 <v-layout> 53 <v-layout>
54 <v-flex xs12 sm10 offset-sm1> 54 <v-flex xs12 sm10 offset-sm1>
55 <v-card-actions> 55 <v-card-actions>
56 <v-btn round dark @click.native="close">Cancel</v-btn> 56 <v-btn round dark @click.native="close">Cancel</v-btn>
57 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
58 <v-btn round dark @click="save">Save</v-btn> 58 <v-btn round dark @click="save">Save</v-btn>
59 </v-card-actions> 59 </v-card-actions>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 </v-container> 62 </v-container>
63 </v-form> 63 </v-form>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-dialog> 66 </v-dialog>
67 67
68 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 68 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
69 69
70 <v-data-table 70 <v-data-table
71 :headers="headers" 71 :headers="headers"
72 :items="getRoles" 72 :items="getRoles"
73 :pagination.sync="pagination" 73 :pagination.sync="pagination"
74 :search="search" 74 :search="search"
75 > 75 >
76 <template slot="items" slot-scope="props"> 76 <template slot="items" slot-scope="props">
77 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td> 77 <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
78 <td id="tabeleData" class="text-xs-center">{{ props.item.name}}</td> 78 <td id="tabeleData" class="text-xs-center">{{ props.item.name}}</td>
79 <td id="tabeleData" class="text-xs-center"> 79 <td id="tabeleData" class="text-xs-center">
80 <span> 80 <span>
81 <v-tooltip top> 81 <v-tooltip top>
82 <img 82 <img
83 slot="activator" 83 slot="activator"
84 style="cursor:pointer; width:20px; height:18px; " 84 style="cursor:pointer; width:20px; height:18px; "
85 class="mr5" 85 class="mr5"
86 @click="editItem(props.item)" 86 @click="editItem(props.item)"
87 src="/static/icon/edit1.png" 87 src="/static/icon/edit1.png"
88 /> 88 />
89 <span>Edit</span> 89 <span>Edit</span>
90 </v-tooltip> 90 </v-tooltip>
91 <v-tooltip top> 91 <v-tooltip top>
92 <img 92 <img
93 slot="activator" 93 slot="activator"
94 style="cursor:pointer; width:20px; height:20px; " 94 style="cursor:pointer; width:20px; height:20px; "
95 class="mr5" 95 class="mr5"
96 @click="deleteItem(props.item)" 96 @click="deleteItem(props.item)"
97 src="/static/icon/delete1.png" 97 src="/static/icon/delete1.png"
98 /> 98 />
99 <span>Delete</span> 99 <span>Delete</span>
100 </v-tooltip> 100 </v-tooltip>
101 </span> 101 </span>
102 </td> 102 </td>
103 </template> 103 </template>
104 <v-alert 104 <v-alert
105 slot="no-results" 105 slot="no-results"
106 :value="true" 106 :value="true"
107 color="error" 107 color="error"
108 icon="warning" 108 icon="warning"
109 >Your search for "{{ search }}" found no results.</v-alert> 109 >Your search for "{{ search }}" found no results.</v-alert>
110 </v-data-table> 110 </v-data-table>
111 </v-tab-item> 111 </v-tab-item>
112 112
113 <!-- ****** ADD ROLE ****** --> 113 <!-- ****** ADD ROLE ****** -->
114 114
115 <v-tab-item> 115 <v-tab-item>
116 <v-container> 116 <v-container>
117 <v-snackbar 117 <v-snackbar
118 :timeout="timeout" 118 :timeout="timeout"
119 :top="y === 'top'" 119 :top="y === 'top'"
120 :right="x === 'right'" 120 :right="x === 'right'"
121 :vertical="mode === 'vertical'" 121 :vertical="mode === 'vertical'"
122 v-model="snackbar" 122 v-model="snackbar"
123 color="success" 123 color="success"
124 >{{ text }}</v-snackbar> 124 >{{ text }}</v-snackbar>
125 <v-flex xs12 sm8 class="top" offset-sm2> 125 <v-flex xs12 sm8 class="top" offset-sm2>
126 <v-card flat> 126 <v-card flat>
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> 130 <v-layout>
131 <v-flex xs4 class="pt-4 subheading"> 131 <v-flex xs4 class="pt-4 subheading">
132 <label class="right">Role:</label> 132 <label class="right">Role:</label>
133 </v-flex> 133 </v-flex>
134 <v-flex xs8 sm4 class="ml-3"> 134 <v-flex xs8 sm4 class="ml-3">
135 <v-text-field 135 <v-text-field
136 v-model="addrole.name" 136 v-model="addrole.name"
137 placeholder="fill your Role" 137 placeholder="fill your Role"
138 :rules="roleRules" 138 :rules="roleRules"
139 ></v-text-field> 139 ></v-text-field>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 <v-layout> 143 <v-layout>
144 <v-flex xs12 sm12> 144 <v-flex xs12 sm12>
145 <v-layout> 145 <v-layout>
146 <v-flex xs5> 146 <v-flex xs5>
147 <v-btn @click="clear" round class="right" dark>clear</v-btn> 147 <v-btn @click="clear" round class="right" dark>clear</v-btn>
148 </v-flex> 148 </v-flex>
149 <v-flex xs8 sm4> 149 <v-flex xs8 sm4>
150 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 150 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 </v-layout> 154 </v-layout>
155 </v-container> 155 </v-container>
156 </v-form> 156 </v-form>
157 </v-card> 157 </v-card>
158 </v-flex> 158 </v-flex>
159 </v-container> 159 </v-container>
160 </v-tab-item> 160 </v-tab-item>
161 </v-tabs> 161 </v-tabs>
162 <div class="loader" v-if="showLoader"> 162 <div class="loader" v-if="showLoader">
163 <v-progress-circular indeterminate color="white"></v-progress-circular> 163 <v-progress-circular indeterminate color="white"></v-progress-circular>
164 </div> 164 </div>
165 </v-app> 165 </v-app>
166 </template> 166 </template>
167 167
168 <script> 168 <script>
169 import http from "@/Services/http.js"; 169 import http from "@/Services/http.js";
170 import Util from "@/util"; 170 import Util from "@/util";
171 171
172 export default { 172 export default {
173 data: () => ({ 173 data: () => ({
174 snackbar: false, 174 snackbar: false,
175 y: "top", 175 y: "top",
176 x: "right", 176 x: "right",
177 mode: "", 177 mode: "",
178 timeout: 3000, 178 timeout: 3000,
179 text: "", 179 text: "",
180 loading: false, 180 loading: false,
181 search: "", 181 search: "",
182 showLoader: false, 182 showLoader: false,
183 dialog: false, 183 dialog: false,
184 valid: true, 184 valid: true,
185 isActive: true, 185 isActive: true,
186 newActive: false, 186 newActive: false,
187 pagination: { 187 pagination: {
188 rowsPerPage: 15 188 rowsPerPage: 15
189 }, 189 },
190 roleRules: [v => !!v || "Role is required"], 190 roleRules: [v => !!v || "Role is required"],
191 headers: [ 191 headers: [
192 { 192 {
193 text: "No", 193 text: "No",
194 align: "center", 194 align: "center",
195 sortable: false, 195 sortable: false,
196 value: "No" 196 value: "No"
197 }, 197 },
198 { text: "Role", value: "role", sortable: false, align: "center" }, 198 { text: "Role", value: "role", sortable: false, align: "center" },
199 { text: "Action", value: "", sortable: false, align: "center" } 199 { text: "Action", value: "", sortable: false, align: "center" }
200 ], 200 ],
201 getRoles: [], 201 getRoles: [],
202 editedIndex: -1, 202 editedIndex: -1,
203 token: "", 203 token: "",
204 addrole: {}, 204 addrole: {},
205 editedItem: {} 205 editedItem: {}
206 }), 206 }),
207 methods: { 207 methods: {
208 getRole() { 208 getRole() {
209 this.showLoader = true; 209 this.showLoader = true;
210 http() 210 http()
211 .get("/getRolesList", { 211 .get("/getRolesList", {
212 headers: { Authorization: "Bearer " + this.token } 212 headers: { Authorization: "Bearer " + this.token }
213 }) 213 })
214 .then(response => { 214 .then(response => {
215 this.getRoles = response.data.data; 215 this.getRoles = response.data.data;
216 this.showLoader = false; 216 this.showLoader = false;
217 }) 217 })
218 .catch(error => { 218 .catch(error => {
219 this.showLoader = false; 219 this.showLoader = false;
220 if (error.response.status === 401) { 220 if (error.response.status === 401) {
221 this.$router.replace({ path: "/" }); 221 this.$router.replace({ path: "/" });
222 this.$store.dispatch("setToken", null); 222 this.$store.dispatch("setToken", null);
223 this.$store.dispatch("Id", null); 223 this.$store.dispatch("Id", null);
224 this.$store.dispatch("Role", null);
224 } 225 }
225 }); 226 });
226 }, 227 },
227 editItem(item) { 228 editItem(item) {
228 this.editedIndex = this.getRoles.indexOf(item); 229 this.editedIndex = this.getRoles.indexOf(item);
229 this.editedItem = Object.assign({}, item); 230 this.editedItem = Object.assign({}, item);
230 this.dialog = true; 231 this.dialog = true;
231 }, 232 },
232 deleteItem(item) { 233 deleteItem(item) {
233 let deleteRoleId = { 234 let deleteRoleId = {
234 roleId: item._id 235 roleId: item._id
235 }; 236 };
236 http() 237 http()
237 .delete( 238 .delete(
238 "/deleteRole", 239 "/deleteRole",
239 confirm("Are you sure you want to delete this?") && { 240 confirm("Are you sure you want to delete this?") && {
240 params: deleteRoleId 241 params: deleteRoleId
241 }, 242 },
242 { 243 {
243 headers: { 244 headers: {
244 Authorization: "Bearer " + this.token 245 Authorization: "Bearer " + this.token
245 } 246 }
246 } 247 }
247 ) 248 )
248 .then(response => { 249 .then(response => {
249 this.text = response.data.message; 250 this.text = response.data.message;
250 this.getRole(); 251 this.getRole();
251 }) 252 })
252 .catch(error => { 253 .catch(error => {
253 console.log(error); 254 console.log(error);
254 }); 255 });
255 }, 256 },
256 activeTab(type) { 257 activeTab(type) {
257 switch (type) { 258 switch (type) {
258 case "existing": 259 case "existing":
259 this.newActive = false; 260 this.newActive = false;
260 this.isActive = true; 261 this.isActive = true;
261 break; 262 break;
262 263
263 default: 264 default:
264 this.newActive = true; 265 this.newActive = true;
265 this.isActive = false; 266 this.isActive = false;
266 break; 267 break;
267 } 268 }
268 }, 269 },
269 close() { 270 close() {
270 this.dialog = false; 271 this.dialog = false;
271 setTimeout(() => { 272 setTimeout(() => {
272 this.editedItem = Object.assign({}, this.defaultItem); 273 this.editedItem = Object.assign({}, this.defaultItem);
273 this.editedIndex = -1; 274 this.editedIndex = -1;
274 }, 300); 275 }, 300);
275 }, 276 },
276 // close1() { 277 // close1() {
277 // this.dialog1 = false; 278 // this.dialog1 = false;
278 // }, 279 // },
279 submit() { 280 submit() {
280 if (this.$refs.form.validate()) { 281 if (this.$refs.form.validate()) {
281 this.loading = true; 282 this.loading = true;
282 http() 283 http()
283 .post("/createRole", this.addrole) 284 .post("/createRole", this.addrole)
284 .then(response => { 285 .then(response => {
285 this.snackbar = true; 286 this.snackbar = true;
286 this.text = response.data.message; 287 this.text = response.data.message;
287 this.getRole(); 288 this.getRole();
288 this.clear(); 289 this.clear();
289 this.loading = false; 290 this.loading = false;
290 }) 291 })
291 .catch(error => { 292 .catch(error => {
292 this.snackbar = true; 293 this.snackbar = true;
293 this.text = error.response.data.message; 294 this.text = error.response.data.message;
294 this.loading = false; 295 this.loading = false;
295 }); 296 });
296 } 297 }
297 }, 298 },
298 clear() { 299 clear() {
299 this.$refs.form.reset(); 300 this.$refs.form.reset();
300 }, 301 },
301 save() { 302 save() {
302 (this.editedItem.roleId = this.editedItem._id), 303 (this.editedItem.roleId = this.editedItem._id),
303 http() 304 http()
304 .put("/updateRole", this.editedItem, { 305 .put("/updateRole", this.editedItem, {
305 headers: { 306 headers: {
306 Authorization: "Bearer " + this.token 307 Authorization: "Bearer " + this.token
307 } 308 }
308 }) 309 })
309 .then(response => { 310 .then(response => {
310 this.text = "Successfully Edit Notification"; 311 this.text = "Successfully Edit Notification";
311 this.getRole(); 312 this.getRole();
312 this.close(); 313 this.close();
313 }) 314 })
314 .catch(error => { 315 .catch(error => {
315 console.log(error); 316 console.log(error);
316 }); 317 });
317 } 318 }
318 }, 319 },
319 mounted() { 320 mounted() {
320 this.token = this.$store.state.token; 321 this.token = this.$store.state.token;
321 this.getRole(); 322 this.getRole();
322 }, 323 },
323 created() { 324 created() {
324 this.$root.$on("app:search", search => { 325 this.$root.$on("app:search", search => {
325 this.search = search; 326 this.search = search;
326 }); 327 });
327 }, 328 },
328 beforeDestroy() { 329 beforeDestroy() {
329 // dont forget to remove the listener 330 // dont forget to remove the listener
330 this.$root.$off("app:search"); 331 this.$root.$off("app:search");
331 } 332 }
332 }; 333 };
333 </script> 334 </script>
334 <style scoped> 335 <style scoped>
335 #tabeleData { 336 #tabeleData {
336 border: 1px solid #dddddd; 337 border: 1px solid #dddddd;
337 text-align: left; 338 text-align: left;
338 padding: 8px 0px; 339 padding: 8px 0px;
339 max-width: 200px !important; 340 max-width: 200px !important;
340 } 341 }
341 .active { 342 .active {
342 background-color: gray; 343 background-color: gray;
343 color: white !important; 344 color: white !important;
344 } 345 }
345 .activebtn { 346 .activebtn {
346 color: black !important; 347 color: black !important;
347 } 348 }
348 </style> 349 </style>
src/pages/Attendence/viewStudentsAttendence.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-container fluid grid-list-md> 2 <v-container fluid grid-list-md>
3 <div v-show="hideData"> 3 <div v-show="hideData">
4 <v-layout row> 4 <v-layout row>
5 <v-btn color="grey" @click="exportPdf" class="right" dark> 5 <v-btn color="grey" @click="exportPdf" class="right" dark>
6 Export Pdf 6 Export Pdf
7 <v-icon dark right size="20">save_alt</v-icon> 7 <v-icon dark right size="20">save_alt</v-icon>
8 </v-btn> 8 </v-btn>
9 <v-dialog v-model="dialogExport" max-width="500px"> 9 <v-dialog v-model="dialogExport" max-width="500px">
10 <v-btn slot="activator" color="grey" class="right" dark> 10 <v-btn slot="activator" color="grey" class="right" dark>
11 Export csv 11 Export csv
12 <v-icon dark right size="20">save_alt</v-icon> 12 <v-icon dark right size="20">save_alt</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-card> 14 <v-card>
15 <h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3> 15 <h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>
16 <v-card-text> 16 <v-card-text>
17 <v-container grid-list-md> 17 <v-container grid-list-md>
18 <v-layout wrap> 18 <v-layout wrap>
19 <v-flex xs12> 19 <v-flex xs12>
20 <v-menu 20 <v-menu
21 ref="menuStartDate" 21 ref="menuStartDate"
22 :close-on-content-click="false" 22 :close-on-content-click="false"
23 v-model="menuStartDate" 23 v-model="menuStartDate"
24 :nudge-right="40" 24 :nudge-right="40"
25 :return-value.sync="startDate" 25 :return-value.sync="startDate"
26 lazy 26 lazy
27 transition="scale-transition" 27 transition="scale-transition"
28 offset-y 28 offset-y
29 full-width 29 full-width
30 min-width="290px" 30 min-width="290px"
31 > 31 >
32 <v-text-field 32 <v-text-field
33 slot="activator" 33 slot="activator"
34 v-model="startDate" 34 v-model="startDate"
35 label="Select Start Date" 35 label="Select Start Date"
36 prepend-icon="event" 36 prepend-icon="event"
37 readonly 37 readonly
38 ></v-text-field> 38 ></v-text-field>
39 <v-date-picker 39 <v-date-picker
40 v-model="startDate" 40 v-model="startDate"
41 @input="$refs.menuStartDate.save(startDate)" 41 @input="$refs.menuStartDate.save(startDate)"
42 ></v-date-picker> 42 ></v-date-picker>
43 </v-menu> 43 </v-menu>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12> 45 <v-flex xs12>
46 <v-menu 46 <v-menu
47 ref="menuEndDate" 47 ref="menuEndDate"
48 :close-on-content-click="false" 48 :close-on-content-click="false"
49 v-model="menuEndDate" 49 v-model="menuEndDate"
50 :nudge-right="40" 50 :nudge-right="40"
51 :return-value.sync="endDate" 51 :return-value.sync="endDate"
52 lazy 52 lazy
53 transition="scale-transition" 53 transition="scale-transition"
54 offset-y 54 offset-y
55 full-width 55 full-width
56 min-width="290px" 56 min-width="290px"
57 > 57 >
58 <v-text-field 58 <v-text-field
59 slot="activator" 59 slot="activator"
60 v-model="endDate" 60 v-model="endDate"
61 label="Select End Date" 61 label="Select End Date"
62 prepend-icon="event" 62 prepend-icon="event"
63 readonly 63 readonly
64 ></v-text-field> 64 ></v-text-field>
65 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> 65 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
66 </v-menu> 66 </v-menu>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-container> 69 </v-container>
70 </v-card-text> 70 </v-card-text>
71 <v-card-actions> 71 <v-card-actions>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 <v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn> 73 <v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>
74 <download-csv :data="json_data"> 74 <download-csv :data="json_data">
75 <v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn> 75 <v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>
76 </download-csv> 76 </download-csv>
77 </v-card-actions> 77 </v-card-actions>
78 </v-card> 78 </v-card>
79 </v-dialog> 79 </v-dialog>
80 </v-layout> 80 </v-layout>
81 <v-layout wrap> 81 <v-layout wrap>
82 <v-flex xs12 sm12 md4> 82 <v-flex xs12 sm12 md4>
83 <v-card flat> 83 <v-card flat>
84 <h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3> 84 <h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3>
85 <v-card-text> 85 <v-card-text>
86 <v-container> 86 <v-container>
87 <v-layout wrap> 87 <v-layout wrap>
88 <v-flex xs12> 88 <v-flex xs12>
89 <v-layout> 89 <v-layout>
90 <v-flex 90 <v-flex
91 xs12 91 xs12
92 class="text-xs-center text-sm-center text-md-center text-lg-center" 92 class="text-xs-center text-sm-center text-md-center text-lg-center"
93 > 93 >
94 <v-avatar size="160px"> 94 <v-avatar size="160px">
95 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> 95 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
96 <img 96 <img
97 :src="studentData.profilePicUrl" 97 :src="studentData.profilePicUrl"
98 v-else-if="studentData.profilePicUrl" 98 v-else-if="studentData.profilePicUrl"
99 /> 99 />
100 </v-avatar> 100 </v-avatar>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-layout> 103 <v-layout>
104 <v-flex xs12 sm12> 104 <v-flex xs12 sm12>
105 <h3 class="text-xs-center"> 105 <h3 class="text-xs-center">
106 <b>{{ studentData.name }}</b> 106 <b>{{ studentData.name }}</b>
107 </h3> 107 </h3>
108 <p class="text-xs-center grey--text">Student</p> 108 <p class="text-xs-center grey--text">Student</p>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-layout style="border: 1px solid lightgrey;"> 111 <v-layout style="border: 1px solid lightgrey;">
112 <v-flex xs6 sm6 class="pa-0"> 112 <v-flex xs6 sm6 class="pa-0">
113 <h4 class="right"> 113 <h4 class="right">
114 <b>Roll No :</b> 114 <b>Roll No :</b>
115 </h4> 115 </h4>
116 </v-flex> 116 </v-flex>
117 <v-flex sm6 xs6 class="pa-0"> 117 <v-flex sm6 xs6 class="pa-0">
118 <h4>{{ studentData.rollNo }}</h4> 118 <h4>{{ studentData.rollNo }}</h4>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 <v-layout style="border: 1px solid lightgrey;"> 121 <v-layout style="border: 1px solid lightgrey;">
122 <v-flex xs6 sm6 class="pa-0"> 122 <v-flex xs6 sm6 class="pa-0">
123 <h4 class="right"> 123 <h4 class="right">
124 <b>Class :</b> 124 <b>Class :</b>
125 </h4> 125 </h4>
126 </v-flex> 126 </v-flex>
127 <v-flex sm6 xs6 class="right pa-0"> 127 <v-flex sm6 xs6 class="right pa-0">
128 <h4>{{ studentData.classId.classNum }}</h4> 128 <h4>{{ studentData.classId.classNum }}</h4>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 <v-layout style="border: 1px solid lightgrey;"> 131 <v-layout style="border: 1px solid lightgrey;">
132 <v-flex xs6 sm6 class="right pa-0"> 132 <v-flex xs6 sm6 class="right pa-0">
133 <h4 class="right"> 133 <h4 class="right">
134 <b>Section :</b> 134 <b>Section :</b>
135 </h4> 135 </h4>
136 </v-flex> 136 </v-flex>
137 <v-flex sm6 xs6 class="right pa-0"> 137 <v-flex sm6 xs6 class="right pa-0">
138 <h4>{{ studentData.sectionId.name}}</h4> 138 <h4>{{ studentData.sectionId.name}}</h4>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-container> 143 </v-container>
144 </v-card-text> 144 </v-card-text>
145 </v-card> 145 </v-card>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md8> 147 <v-flex xs12 sm12 md8>
148 <v-card flat> 148 <v-card flat>
149 <h3 class="py-2 text-xs-center grey lighten-1 white--text"> 149 <h3 class="py-2 text-xs-center grey lighten-1 white--text">
150 Attendence 150 Attendence
151 <span class="ml-4"> 151 <span class="ml-4">
152 <v-avatar class="green caption" size="12"></v-avatar> 152 <v-avatar class="green caption" size="12"></v-avatar>
153 <span class="subheading">Present</span> 153 <span class="subheading">Present</span>
154 </span> 154 </span>
155 <span class="ml-4"> 155 <span class="ml-4">
156 <v-avatar color="red caption" size="12" class></v-avatar> 156 <v-avatar color="red caption" size="12" class></v-avatar>
157 <span class="subheading">Absent</span> 157 <span class="subheading">Absent</span>
158 </span> 158 </span>
159 </h3> 159 </h3>
160 <YearCalendar 160 <YearCalendar
161 v-model="year" 161 v-model="year"
162 :activeDates="activeDates" 162 :activeDates="activeDates"
163 prefixClass="your_customized_wrapper_class" 163 prefixClass="your_customized_wrapper_class"
164 :activeClass="activeClass" 164 :activeClass="activeClass"
165 ></YearCalendar> 165 ></YearCalendar>
166 </v-card> 166 </v-card>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </div> 169 </div>
170 <v-layout v-show="showPdfData"> 170 <v-layout v-show="showPdfData">
171 <v-container> 171 <v-container>
172 <v-flex xs12 sm12 md8 offset-sm2> 172 <v-flex xs12 sm12 md8 offset-sm2>
173 <v-btn 173 <v-btn
174 color="grey" 174 color="grey"
175 @click="generatePDF2Canvas()" 175 @click="generatePDF2Canvas()"
176 :loading="loadingPdf" 176 :loading="loadingPdf"
177 class="right" 177 class="right"
178 dark 178 dark
179 > 179 >
180 Download 180 Download
181 <v-icon dark right size="20">save_alt</v-icon> 181 <v-icon dark right size="20">save_alt</v-icon>
182 </v-btn> 182 </v-btn>
183 </v-flex> 183 </v-flex>
184 </v-container> 184 </v-container>
185 </v-layout> 185 </v-layout>
186 <v-layout v-show="showPdfData"> 186 <v-layout v-show="showPdfData">
187 <v-container> 187 <v-container>
188 <v-layout v-show="showPdfData"> 188 <v-layout v-show="showPdfData">
189 <v-flex xs12 sm12 md8 offset-sm2> 189 <v-flex xs12 sm12 md8 offset-sm2>
190 <div ref="printMe"> 190 <div ref="printMe">
191 <v-flex xs12 class="pl-3"> 191 <v-flex xs12 class="pl-3">
192 <v-layout> 192 <v-layout>
193 <v-flex xs6 sm2 class="pa-0 mb-1"> 193 <v-flex xs6 sm2 class="pa-0 mb-1">
194 <h4> 194 <h4>
195 <b>Name</b> 195 <b>Name</b>
196 </h4> 196 </h4>
197 </v-flex> 197 </v-flex>
198 <v-flex sm10 xs6 class="pa-0"> 198 <v-flex sm10 xs6 class="pa-0">
199 <h4>: {{ studentData.name }}</h4> 199 <h4>: {{ studentData.name }}</h4>
200 </v-flex> 200 </v-flex>
201 </v-layout> 201 </v-layout>
202 <v-layout> 202 <v-layout>
203 <v-flex xs6 sm2 class="pa-0 mb-1"> 203 <v-flex xs6 sm2 class="pa-0 mb-1">
204 <h4> 204 <h4>
205 <b>Type</b> 205 <b>Type</b>
206 </h4> 206 </h4>
207 </v-flex> 207 </v-flex>
208 <v-flex sm10 xs6 class="pa-0 mb-1"> 208 <v-flex sm10 xs6 class="pa-0 mb-1">
209 <h4>: Student</h4> 209 <h4>: Student</h4>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 <v-layout> 212 <v-layout>
213 <v-flex xs6 sm2 class="pa-0 mb-1"> 213 <v-flex xs6 sm2 class="pa-0 mb-1">
214 <h4> 214 <h4>
215 <b>Roll No</b> 215 <b>Roll No</b>
216 </h4> 216 </h4>
217 </v-flex> 217 </v-flex>
218 <v-flex sm10 xs6 class="pa-0 mb-1"> 218 <v-flex sm10 xs6 class="pa-0 mb-1">
219 <h4>: {{ studentData.rollNo }}</h4> 219 <h4>: {{ studentData.rollNo }}</h4>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 <v-layout> 222 <v-layout>
223 <v-flex xs6 sm2 class="pa-0 mb-1"> 223 <v-flex xs6 sm2 class="pa-0 mb-1">
224 <h4> 224 <h4>
225 <b>Class</b> 225 <b>Class</b>
226 </h4> 226 </h4>
227 </v-flex> 227 </v-flex>
228 <v-flex sm10 xs6 class="pa-0 mb-1"> 228 <v-flex sm10 xs6 class="pa-0 mb-1">
229 <h4>: {{ studentData.classId.classNum }}</h4> 229 <h4>: {{ studentData.classId.classNum }}</h4>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 <v-layout> 232 <v-layout>
233 <v-flex xs6 sm2 class="pa-0 mb-1"> 233 <v-flex xs6 sm2 class="pa-0 mb-1">
234 <h4> 234 <h4>
235 <b>Section</b> 235 <b>Section</b>
236 </h4> 236 </h4>
237 </v-flex> 237 </v-flex>
238 <v-flex sm10 xs6 class="pa-0 mb-3"> 238 <v-flex sm10 xs6 class="pa-0 mb-3">
239 <h4>: {{ studentData.sectionId.name}}</h4> 239 <h4>: {{ studentData.sectionId.name}}</h4>
240 </v-flex> 240 </v-flex>
241 </v-layout> 241 </v-layout>
242 </v-flex> 242 </v-flex>
243 <v-card flat> 243 <v-card flat>
244 <h3 class="py-2 text-xs-center grey lighten-1 white--text"> 244 <h3 class="py-2 text-xs-center grey lighten-1 white--text">
245 Attendence 245 Attendence
246 <span class="ml-4"> 246 <span class="ml-4">
247 <v-avatar class="green caption" size="12"></v-avatar> 247 <v-avatar class="green caption" size="12"></v-avatar>
248 <span class="subheading">Present</span> 248 <span class="subheading">Present</span>
249 </span> 249 </span>
250 <span class="ml-4"> 250 <span class="ml-4">
251 <v-avatar color="red caption" size="12" class></v-avatar> 251 <v-avatar color="red caption" size="12" class></v-avatar>
252 <span class="subheading">Absent</span> 252 <span class="subheading">Absent</span>
253 </span> 253 </span>
254 </h3> 254 </h3>
255 <YearCalendar 255 <YearCalendar
256 v-model="year" 256 v-model="year"
257 :activeDates="activeDates" 257 :activeDates="activeDates"
258 prefixClass="your_customized_wrapper_class" 258 prefixClass="your_customized_wrapper_class"
259 :activeClass="activeClass" 259 :activeClass="activeClass"
260 ></YearCalendar> 260 ></YearCalendar>
261 </v-card> 261 </v-card>
262 </div> 262 </div>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 </v-container> 265 </v-container>
266 </v-layout> 266 </v-layout>
267 <img :src="output" v-show="false"/> 267 <img :src="output" v-show="false"/>
268 <div class="loader" v-if="showLoader"> 268 <div class="loader" v-if="showLoader">
269 <v-progress-circular indeterminate color="white"></v-progress-circular> 269 <v-progress-circular indeterminate color="white"></v-progress-circular>
270 </div> 270 </div>
271 </v-container> 271 </v-container>
272 </template> 272 </template>
273 273
274 <script lang="js"> 274 <script lang="js">
275 import moment from "moment"; 275 import moment from "moment";
276 import http from "@/Services/http.js"; 276 import http from "@/Services/http.js";
277 import YearCalendar from "vue-material-year-calendar"; 277 import YearCalendar from "vue-material-year-calendar";
278 import jsPDF from 'jspdf'; 278 import jsPDF from 'jspdf';
279 // eslint-disable-next-line 279 // eslint-disable-next-line
280 import autoTable from 'jspdf-autotable'; 280 import autoTable from 'jspdf-autotable';
281 281
282 export default { 282 export default {
283 components: { YearCalendar }, 283 components: { YearCalendar },
284 data() { 284 data() {
285 return { 285 return {
286 showPdfData:false, 286 showPdfData:false,
287 hideData:true, 287 hideData:true,
288 loadingPdf:false, 288 loadingPdf:false,
289 output:null, 289 output:null,
290 studentsList: [], 290 studentsList: [],
291 json_data: [], 291 json_data: [],
292 dialogExport: false, 292 dialogExport: false,
293 startDate: "", 293 startDate: "",
294 endDate: "", 294 endDate: "",
295 menuEndDate: false, 295 menuEndDate: false,
296 menuStartDate: false, 296 menuStartDate: false,
297 showLoader: false, 297 showLoader: false,
298 token: "", 298 token: "",
299 year: new Date().getFullYear(), 299 year: new Date().getFullYear(),
300 activeDates: [], 300 activeDates: [],
301 activeClass: "", 301 activeClass: "",
302 studentData: {} 302 studentData: {}
303 }; 303 };
304 }, 304 },
305 mounted() { 305 mounted() {
306 this.token = this.$store.state.token; 306 this.token = this.$store.state.token;
307 this.getStudentAttendence(); 307 this.getStudentAttendence();
308 this.getStudentData(); 308 this.getStudentData();
309 }, 309 },
310 methods: { 310 methods: {
311 dates: function(date) { 311 dates: function(date) {
312 return moment(date).format("MMMM DD, YYYY"); 312 return moment(date).format("MMMM DD, YYYY");
313 }, 313 },
314 getStudentAttendence() { 314 getStudentAttendence() {
315 this.showLoader = true; 315 this.showLoader = true;
316 http() 316 http()
317 .get( 317 .get(
318 "/studentAttendance", 318 "/studentAttendance",
319 { params: { studentId: this.$route.params.id } }, 319 { params: { studentId: this.$route.params.id } },
320 { 320 {
321 headers: { Authorization: "Bearer " + this.token } 321 headers: { Authorization: "Bearer " + this.token }
322 } 322 }
323 ) 323 )
324 .then(response => { 324 .then(response => {
325 this.showLoader = false; 325 this.showLoader = false;
326 let array = []; 326 let array = [];
327 for (let i = 0; i < response.data.data.length; i++) { 327 for (let i = 0; i < response.data.data.length; i++) {
328 if (response.data.data[i].students[0].isPresent == true) { 328 if (response.data.data[i].students[0].isPresent == true) {
329 array.push({ 329 array.push({
330 date: response.data.data[i].date, 330 date: response.data.data[i].date,
331 className: "green" 331 className: "green"
332 }); 332 });
333 } else if (response.data.data[i].students[0].isPresent == false) { 333 } else if (response.data.data[i].students[0].isPresent == false) {
334 array.push({ 334 array.push({
335 date: response.data.data[i].date, 335 date: response.data.data[i].date,
336 className: "red" 336 className: "red"
337 }); 337 });
338 } 338 }
339 } 339 }
340 this.activeDates = array; 340 this.activeDates = array;
341 }) 341 })
342 .catch(error => { 342 .catch(error => {
343 console.log("err====>", err);
344 this.showLoader = false; 343 this.showLoader = false;
345 if (error.response.status === 401) { 344 if (error.response.status === 401) {
346 this.$router.replace({ path: "/" }); 345 this.$router.replace({ path: "/" });
347 this.$store.dispatch("setToken", null); 346 this.$store.dispatch("setToken", null);
348 this.$store.dispatch("Id", null); 347 this.$store.dispatch("Id", null);
348 this.$store.dispatch("Role", null);
349 } 349 }
350 }); 350 });
351 }, 351 },
352 getStudentData() { 352 getStudentData() {
353 http() 353 http()
354 .get( 354 .get(
355 "/getParticularStudentDetail", 355 "/getParticularStudentDetail",
356 { params: { studentId: this.$route.params.id } }, 356 { params: { studentId: this.$route.params.id } },
357 { 357 {
358 headers: { Authorization: "Bearer " + this.token } 358 headers: { Authorization: "Bearer " + this.token }
359 } 359 }
360 ) 360 )
361 .then(response => { 361 .then(response => {
362 this.studentData = response.data.data; 362 this.studentData = response.data.data;
363 }) 363 })
364 .catch(err => { 364 .catch(err => {
365 console.log("err====>", err); 365 console.log("err====>", err);
366 // this.$router.replace({ path: '/' }); 366 // this.$router.replace({ path: '/' });
367 }); 367 });
368 }, 368 },
369 exportData() { 369 exportData() {
370 http() 370 http()
371 .get( 371 .get(
372 "/studentAttendanceByMonth", 372 "/studentAttendanceByMonth",
373 { 373 {
374 params: { 374 params: {
375 studentId: this.$route.params.id, 375 studentId: this.$route.params.id,
376 startDate: this.startDate, 376 startDate: this.startDate,
377 endDate: this.endDate 377 endDate: this.endDate
378 } 378 }
379 }, 379 },
380 { 380 {
381 headers: { Authorization: "Bearer " + this.token } 381 headers: { Authorization: "Bearer " + this.token }
382 } 382 }
383 ) 383 )
384 .then(response => { 384 .then(response => {
385 this.json_data = response.data.data; 385 this.json_data = response.data.data;
386 this.dialogExport = true; 386 this.dialogExport = true;
387 }) 387 })
388 .catch(err => { 388 .catch(err => {
389 console.log("err====>", err); 389 console.log("err====>", err);
390 // this.$router.replace({ path: '/' }); 390 // this.$router.replace({ path: '/' });
391 }); 391 });
392 }, 392 },
393 exportPdf(){ 393 exportPdf(){
394 this.hideData = false; 394 this.hideData = false;
395 this.showPdfData = true 395 this.showPdfData = true
396 }, 396 },
397 async generatePDF2Canvas(){ 397 async generatePDF2Canvas(){
398 this.loadingPdf = true 398 this.loadingPdf = true
399 const el = this.$refs.printMe; 399 const el = this.$refs.printMe;
400 // add option type to get the image version 400 // add option type to get the image version
401 // if not provided the promise will return 401 // if not provided the promise will return
402 // the canvas. 402 // the canvas.
403 const options = { 403 const options = {
404 type: 'dataURL' 404 type: 'dataURL'
405 } 405 }
406 this.output = await this.$html2canvas(el, options); 406 this.output = await this.$html2canvas(el, options);
407 console.log(this.output); 407 console.log(this.output);
408 if(this.output) { 408 if(this.output) {
409 this.loadingPdf = false 409 this.loadingPdf = false
410 } 410 }
411 let doc = new jsPDF(); 411 let doc = new jsPDF();
412 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); 412 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
413 doc.save("Attendance.pdf"); 413 doc.save("Attendance.pdf");
414 } 414 }
415 } 415 }
416 }; 416 };
417 </script> 417 </script>
418 418
419 <style lang="stylus"> 419 <style lang="stylus">
420 .your_customized_wrapper_class { 420 .your_customized_wrapper_class {
421 background-color: #0aa; 421 background-color: #0aa;
422 color: white; 422 color: white;
423 423
424 &.red { 424 &.red {
425 background-color: red; 425 background-color: red;
426 color: white; 426 color: white;
427 427
428 &:after { 428 &:after {
429 background-size: 100% 100%; 429 background-size: 100% 100%;
430 } 430 }
431 } 431 }
432 432
433 &.blue { 433 &.blue {
434 background-color: #0000aa; 434 background-color: #0000aa;
435 color: white; 435 color: white;
436 } 436 }
437 437
438 &.your_customized_classname { 438 &.your_customized_classname {
439 background-color: yellow; 439 background-color: yellow;
440 color: black; 440 color: black;
441 } 441 }
442 } 442 }
src/pages/Authentication/changepassword.vue
Diff comments   View file @00e4bc4
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-toolbar class="fixcolors mt-5" dark> 6 <v-toolbar class="fixcolors mt-5" dark>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title>Technology Succes</v-toolbar-title> 8 <v-toolbar-title>Technology Succes</v-toolbar-title>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-toolbar> 10 </v-toolbar>
11 <v-card class="elevation-1 pa-3" id="form"> 11 <v-card class="elevation-1 pa-3" id="form">
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-text-field 15 <v-text-field
16 :rules="[rules.required]" 16 :rules="[rules.required]"
17 v-model="adminChangePasswordcredentials.oldPassword" 17 v-model="adminChangePasswordcredentials.oldPassword"
18 label="Old Password" 18 label="Old Password"
19 ></v-text-field> 19 ></v-text-field>
20 <v-text-field 20 <v-text-field
21 v-model="adminChangePasswordcredentials.newPassword" 21 v-model="adminChangePasswordcredentials.newPassword"
22 :rules="[rules.required]" 22 :rules="[rules.required]"
23 label="New Password" 23 label="New Password"
24 ></v-text-field> 24 ></v-text-field>
25 </v-form> 25 </v-form>
26 </v-flex> 26 </v-flex>
27 </v-card-text> 27 </v-card-text>
28 <v-card-actions> 28 <v-card-actions>
29 <v-flex text-xs-center> 29 <v-flex text-xs-center>
30 <v-btn 30 <v-btn
31 class="mt-3" 31 class="mt-3"
32 round 32 round
33 color="black" 33 color="black"
34 dark 34 dark
35 large 35 large
36 :loading="loading" 36 :loading="loading"
37 @click="reset" 37 @click="reset"
38 >Reset Password</v-btn> 38 >Reset Password</v-btn>
39 </v-flex> 39 </v-flex>
40 </v-card-actions> 40 </v-card-actions>
41 <v-snackbar 41 <v-snackbar
42 :timeout="timeout" 42 :timeout="timeout"
43 :top="y === 'top'" 43 :top="y === 'top'"
44 :right="x === 'right'" 44 :right="x === 'right'"
45 :vertical="mode === 'vertical'" 45 :vertical="mode === 'vertical'"
46 v-model="snackbar" 46 v-model="snackbar"
47 :color="color" 47 :color="color"
48 >{{ text }}</v-snackbar> 48 >{{ text }}</v-snackbar>
49 </v-card> 49 </v-card>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-container> 52 </v-container>
53 </v-app> 53 </v-app>
54 </template> 54 </template>
55 <script> 55 <script>
56 import http from "@/Services/http.js"; 56 import http from "@/Services/http.js";
57 57
58 export default { 58 export default {
59 data() { 59 data() {
60 return { 60 return {
61 snackbar: false, 61 snackbar: false,
62 y: "top", 62 y: "top",
63 x: "right", 63 x: "right",
64 mode: "", 64 mode: "",
65 timeout: 4000, 65 timeout: 4000,
66 text: "", 66 text: "",
67 adminChangePasswordcredentials: {}, 67 adminChangePasswordcredentials: {},
68 e1: true, 68 e1: true,
69 e2: true, 69 e2: true,
70 e3: true, 70 e3: true,
71 loading: false, 71 loading: false,
72 valid: false, 72 valid: false,
73 text: "Password Changed", 73 text: "Password Changed",
74 currentPassword: "", 74 currentPassword: "",
75 newPassword: "", 75 newPassword: "",
76 confirmPassword: "", 76 confirmPassword: "",
77 rules: { 77 rules: {
78 required: value => !!value || "This password field is Required." 78 required: value => !!value || "This password field is Required."
79 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required' 79 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
80 } 80 }
81 }; 81 };
82 }, 82 },
83 methods: { 83 methods: {
84 reset() { 84 reset() {
85 var token = this.$store.state.token; 85 var token = this.$store.state.token;
86 var userdata = { 86 var userdata = {
87 oldPassword: this.adminChangePasswordcredentials.oldPassword, 87 oldPassword: this.adminChangePasswordcredentials.oldPassword,
88 newPassword: this.adminChangePasswordcredentials.newPassword 88 newPassword: this.adminChangePasswordcredentials.newPassword
89 }; 89 };
90 http() 90 http()
91 .put("/schoolChangePassword", userdata, { 91 .put("/schoolChangePassword", userdata, {
92 headers: { Authorization: "Bearer " + token } 92 headers: { Authorization: "Bearer " + token }
93 }) 93 })
94 .then(response => { 94 .then(response => {
95 this.loading = true; 95 this.loading = true;
96 if ((this.snackbar = true)) { 96 if ((this.snackbar = true)) {
97 this.text = "Successfully changed password !!"; 97 this.text = "Successfully changed password !!";
98 console.log("snackbar", response.data.message); 98 console.log("snackbar", response.data.message);
99 } 99 }
100 setTimeout(() => { 100 setTimeout(() => {
101 this.$router.push("/dashboard"); 101 this.$router.push("/dashboard");
102 }, 2000); 102 }, 2000);
103 }) 103 })
104 .catch(err => { 104 .catch(error => {
105 // console.log("err====>",err); 105 // console.log("err====>",err);
106 this.text = "User Not Found or Incorrect currentPassword"; 106 this.text = "User Not Found or Incorrect currentPassword";
107 this.snackbar = true; 107 this.snackbar = true;
108 this.loading = false; 108 this.loading = false;
109 if (error.response.status === 401) {
110 this.$router.replace({ path: "/" });
111 this.$store.dispatch("setToken", null);
112 this.$store.dispatch("Id", null);
113 this.$store.dispatch("Role", null);
114 }
109 }); 115 });
110 } 116 }
111 }, 117 },
112 computed: { 118 computed: {
113 color() { 119 color() {
114 return this.loading ? "success" : "error"; 120 return this.loading ? "success" : "error";
115 } 121 }
116 } 122 }
117 }; 123 };
118 </script> 124 </script>
119 <style scoped> 125 <style scoped>
120 img { 126 img {
121 position: absolute; 127 position: absolute;
122 top: 13px; 128 top: 13px;
123 left: 50px; 129 left: 50px;
124 } 130 }
125 .v-btn--large { 131 .v-btn--large {
126 padding: 0px 74px; 132 padding: 0px 74px;
127 } 133 }
128 @media screen and (max-width: 769px) { 134 @media screen and (max-width: 769px) {
129 .v-btn--large { 135 .v-btn--large {
130 font-size: 14px; 136 font-size: 14px;
131 height: 44px; 137 height: 44px;
132 padding: 0 32px; 138 padding: 0 32px;
133 } 139 }
134 } 140 }
135 </style> 141 </style>
136 142
src/pages/Class/addclass.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Class</v-tab> 10 >Existing Class</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Class</v-tab> 18 >Add New Class</v-tab>
19 19
20 <!-- ****** EDIT ClASS ****** --> 20 <!-- ****** EDIT ClASS ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="500px"> 30 <v-dialog v-model="dialog" max-width="500px">
31 <v-flex xs12 sm12 class> 31 <v-flex xs12 sm12 class>
32 <v-toolbar color="grey lighten-2"> 32 <v-toolbar color="grey lighten-2">
33 <v-spacer></v-spacer> 33 <v-spacer></v-spacer>
34 <v-toolbar-title> 34 <v-toolbar-title>
35 <h3>Edit Class</h3> 35 <h3>Edit Class</h3>
36 </v-toolbar-title> 36 </v-toolbar-title>
37 <v-spacer></v-spacer> 37 <v-spacer></v-spacer>
38 </v-toolbar> 38 </v-toolbar>
39 <v-card> 39 <v-card>
40 <v-container fluid> 40 <v-container fluid>
41 <v-layout justify-center> 41 <v-layout justify-center>
42 <v-flex xs12 sm9> 42 <v-flex xs12 sm9>
43 <v-layout style="position:relative;"> 43 <v-layout style="position:relative;">
44 <v-flex xs3 lg2 class="pt-4 subheading"> 44 <v-flex xs3 lg2 class="pt-4 subheading">
45 <label class="right">Class:</label> 45 <label class="right">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs9 class="ml-2"> 47 <v-flex xs9 class="ml-2">
48 <v-autocomplete 48 <v-autocomplete
49 v-model="editedItem.classNum" 49 v-model="editedItem.classNum"
50 :label="editedItem.classNum" 50 :label="editedItem.classNum"
51 :items="classList" 51 :items="classList"
52 :rules="nameRules" 52 :rules="nameRules"
53 ></v-autocomplete> 53 ></v-autocomplete>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 <v-card-actions> 56 <v-card-actions>
57 <v-btn round dark @click.native="close">Cancel</v-btn> 57 <v-btn round dark @click.native="close">Cancel</v-btn>
58 <v-spacer></v-spacer> 58 <v-spacer></v-spacer>
59 <v-btn round dark @click="save">Save</v-btn> 59 <v-btn round dark @click="save">Save</v-btn>
60 </v-card-actions> 60 </v-card-actions>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-container> 63 </v-container>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-dialog> 66 </v-dialog>
67 67
68 <!-- ****** PROFILE VIEW STUDENTS ****** --> 68 <!-- ****** PROFILE VIEW STUDENTS ****** -->
69 <v-dialog v-model="dialog1" max-width="600px"> 69 <v-dialog v-model="dialog1" max-width="600px">
70 <v-toolbar color="grey lighten-2"> 70 <v-toolbar color="grey lighten-2">
71 <v-spacer></v-spacer> 71 <v-spacer></v-spacer>
72 <v-toolbar-title> 72 <v-toolbar-title>
73 <h3>Class</h3> 73 <h3>Class</h3>
74 </v-toolbar-title> 74 </v-toolbar-title>
75 <v-spacer></v-spacer> 75 <v-spacer></v-spacer>
76 <v-icon @click="close1">close</v-icon> 76 <v-icon @click="close1">close</v-icon>
77 </v-toolbar> 77 </v-toolbar>
78 <v-card> 78 <v-card>
79 <v-card-text> 79 <v-card-text>
80 <v-container grid-list-md> 80 <v-container grid-list-md>
81 <v-layout wrap> 81 <v-layout wrap>
82 <v-flex> 82 <v-flex>
83 <v-layout> 83 <v-layout>
84 <v-flex xs6 sm6> 84 <v-flex xs6 sm6>
85 <h5 class="right my-1"> 85 <h5 class="right my-1">
86 <b>Class Name:</b> 86 <b>Class Name:</b>
87 </h5> 87 </h5>
88 </v-flex> 88 </v-flex>
89 <v-flex sm6 xs6> 89 <v-flex sm6 xs6>
90 <h5 class="my-1">{{ editedItem.classNum }}</h5> 90 <h5 class="my-1">{{ editedItem.classNum }}</h5>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-container> 95 </v-container>
96 </v-card-text> 96 </v-card-text>
97 </v-card> 97 </v-card>
98 </v-dialog> 98 </v-dialog>
99 99
100 <v-snackbar 100 <v-snackbar
101 :timeout="timeout" 101 :timeout="timeout"
102 :top="y === 'top'" 102 :top="y === 'top'"
103 :right="x === 'right'" 103 :right="x === 'right'"
104 :vertical="mode === 'vertical'" 104 :vertical="mode === 'vertical'"
105 v-model="snackbar" 105 v-model="snackbar"
106 color="success" 106 color="success"
107 >{{ text }}</v-snackbar> 107 >{{ text }}</v-snackbar>
108 108
109 <!-- ****** EXISTING-USERS Classess Table ****** --> 109 <!-- ****** EXISTING-USERS Classess Table ****** -->
110 <v-data-table 110 <v-data-table
111 :headers="headers" 111 :headers="headers"
112 :items="desserts" 112 :items="desserts"
113 :pagination.sync="pagination" 113 :pagination.sync="pagination"
114 :search="search" 114 :search="search"
115 > 115 >
116 <template slot="items" slot-scope="props"> 116 <template slot="items" slot-scope="props">
117 <td>{{ props.index + 1 }}</td> 117 <td>{{ props.index + 1 }}</td>
118 <td class="text-xs-center">{{ props.item.classNum}}</td> 118 <td class="text-xs-center">{{ props.item.classNum}}</td>
119 <td class="text-xs-center"> 119 <td class="text-xs-center">
120 <span> 120 <span>
121 <v-tooltip top> 121 <v-tooltip top>
122 <img 122 <img
123 slot="activator" 123 slot="activator"
124 style="cursor:pointer; width:25px; height:18px; " 124 style="cursor:pointer; width:25px; height:18px; "
125 class="mr5" 125 class="mr5"
126 @click="profile(props.item)" 126 @click="profile(props.item)"
127 src="/static/icon/eye1.png" 127 src="/static/icon/eye1.png"
128 /> 128 />
129 <span>View</span> 129 <span>View</span>
130 </v-tooltip> 130 </v-tooltip>
131 <v-tooltip top> 131 <v-tooltip top>
132 <img 132 <img
133 slot="activator" 133 slot="activator"
134 style="cursor:pointer; width:20px; height:18px; " 134 style="cursor:pointer; width:20px; height:18px; "
135 class="mr5" 135 class="mr5"
136 @click="editItem(props.item)" 136 @click="editItem(props.item)"
137 src="/static/icon/edit1.png" 137 src="/static/icon/edit1.png"
138 /> 138 />
139 <span>Edit</span> 139 <span>Edit</span>
140 </v-tooltip> 140 </v-tooltip>
141 <v-tooltip top> 141 <v-tooltip top>
142 <img 142 <img
143 slot="activator" 143 slot="activator"
144 style="cursor:pointer; width:20px; height:20px; " 144 style="cursor:pointer; width:20px; height:20px; "
145 class="mr5" 145 class="mr5"
146 @click="deleteItem(props.item)" 146 @click="deleteItem(props.item)"
147 src="/static/icon/delete1.png" 147 src="/static/icon/delete1.png"
148 /> 148 />
149 <span>Delete</span> 149 <span>Delete</span>
150 </v-tooltip> 150 </v-tooltip>
151 </span> 151 </span>
152 </td> 152 </td>
153 </template> 153 </template>
154 <v-alert 154 <v-alert
155 slot="no-results" 155 slot="no-results"
156 :value="true" 156 :value="true"
157 color="error" 157 color="error"
158 icon="warning" 158 icon="warning"
159 >Your search for "{{ search }}" found no results.</v-alert> 159 >Your search for "{{ search }}" found no results.</v-alert>
160 </v-data-table> 160 </v-data-table>
161 </v-tab-item> 161 </v-tab-item>
162 162
163 <!-- ****** ADD multiple Classess ****** --> 163 <!-- ****** ADD multiple Classess ****** -->
164 <v-tab-item> 164 <v-tab-item>
165 <v-container> 165 <v-container>
166 <v-snackbar 166 <v-snackbar
167 :timeout="timeout" 167 :timeout="timeout"
168 :top="y === 'top'" 168 :top="y === 'top'"
169 :right="x === 'right'" 169 :right="x === 'right'"
170 :vertical="mode === 'vertical'" 170 :vertical="mode === 'vertical'"
171 v-model="snackbar" 171 v-model="snackbar"
172 color="success" 172 color="success"
173 >{{ text }}</v-snackbar> 173 >{{ text }}</v-snackbar>
174 <v-flex xs12 sm8 offset-sm2 class="top"> 174 <v-flex xs12 sm8 offset-sm2 class="top">
175 <v-card flat> 175 <v-card flat>
176 <v-container fluid fill-height> 176 <v-container fluid fill-height>
177 <v-layout align-center> 177 <v-layout align-center>
178 <v-flex xs12 class="mt-4"> 178 <v-flex xs12 class="mt-4">
179 <v-form ref="form" v-model="valid" lazy-validation> 179 <v-form ref="form" v-model="valid" lazy-validation>
180 <v-layout> 180 <v-layout>
181 <v-flex xs4 class="pt-4 subheading"> 181 <v-flex xs4 class="pt-4 subheading">
182 <label class="right">Class :</label> 182 <label class="right">Class :</label>
183 </v-flex> 183 </v-flex>
184 <v-flex xs6 class="ml-3"> 184 <v-flex xs6 class="ml-3">
185 <v-autocomplete 185 <v-autocomplete
186 v-model="addclasses.classNum" 186 v-model="addclasses.classNum"
187 placeholder="fill your class Name" 187 placeholder="fill your class Name"
188 type="text" 188 type="text"
189 :items="classList" 189 :items="classList"
190 :rules="nameRules" 190 :rules="nameRules"
191 required 191 required
192 ></v-autocomplete> 192 ></v-autocomplete>
193 </v-flex> 193 </v-flex>
194 </v-layout> 194 </v-layout>
195 <v-layout> 195 <v-layout>
196 <v-flex xs12 sm9 offset-sm2> 196 <v-flex xs12 sm9 offset-sm2>
197 <v-card-actions> 197 <v-card-actions>
198 <v-spacer></v-spacer> 198 <v-spacer></v-spacer>
199 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 199 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
200 <v-spacer></v-spacer> 200 <v-spacer></v-spacer>
201 </v-card-actions> 201 </v-card-actions>
202 </v-flex> 202 </v-flex>
203 </v-layout> 203 </v-layout>
204 </v-form> 204 </v-form>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 </v-container> 207 </v-container>
208 </v-card> 208 </v-card>
209 </v-flex> 209 </v-flex>
210 </v-container> 210 </v-container>
211 </v-tab-item> 211 </v-tab-item>
212 </v-tabs> 212 </v-tabs>
213 <div class="loader" v-if="showLoader"> 213 <div class="loader" v-if="showLoader">
214 <v-progress-circular indeterminate color="white"></v-progress-circular> 214 <v-progress-circular indeterminate color="white"></v-progress-circular>
215 </div> 215 </div>
216 </div> 216 </div>
217 </template> 217 </template>
218 218
219 <script> 219 <script>
220 import http from "@/Services/http.js"; 220 import http from "@/Services/http.js";
221 import Util from "@/util"; 221 import Util from "@/util";
222 222
223 export default { 223 export default {
224 data: () => ({ 224 data: () => ({
225 snackbar: false, 225 snackbar: false,
226 y: "top", 226 y: "top",
227 x: "right", 227 x: "right",
228 mode: "", 228 mode: "",
229 timeout: 3000, 229 timeout: 3000,
230 text: "", 230 text: "",
231 showLoader: false, 231 showLoader: false,
232 loading: false, 232 loading: false,
233 date: null, 233 date: null,
234 search: "", 234 search: "",
235 dialog: false, 235 dialog: false,
236 dialog1: false, 236 dialog1: false,
237 valid: true, 237 valid: true,
238 isActive: true, 238 isActive: true,
239 newActive: false, 239 newActive: false,
240 AddUsercredentials: {}, 240 AddUsercredentials: {},
241 pagination: { 241 pagination: {
242 rowsPerPage: 15 242 rowsPerPage: 15
243 }, 243 },
244 nameRules: [v => !!v || " Class Name is required"], 244 nameRules: [v => !!v || " Class Name is required"],
245 headers: [ 245 headers: [
246 { 246 {
247 text: "No", 247 text: "No",
248 align: "left", 248 align: "left",
249 sortable: false, 249 sortable: false,
250 value: "No" 250 value: "No"
251 }, 251 },
252 { text: "Class No", value: "classNum", sortable: false, align: "center" }, 252 { text: "Class No", value: "classNum", sortable: false, align: "center" },
253 253
254 { text: "Action", value: "", sortable: false, align: "center" } 254 { text: "Action", value: "", sortable: false, align: "center" }
255 ], 255 ],
256 desserts: [], 256 desserts: [],
257 classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], 257 classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
258 editedIndex: -1, 258 editedIndex: -1,
259 editedItem: { 259 editedItem: {
260 classNum: "" 260 classNum: ""
261 }, 261 },
262 addclasses: { 262 addclasses: {
263 classNum: "" 263 classNum: ""
264 } 264 }
265 }), 265 }),
266 methods: { 266 methods: {
267 getClassList() { 267 getClassList() {
268 this.showLoader = true; 268 this.showLoader = true;
269 var token = this.$store.state.token; 269 var token = this.$store.state.token;
270 http() 270 http()
271 .get("/getClassesList") 271 .get("/getClassesList")
272 .then(response => { 272 .then(response => {
273 this.desserts = response.data.data; 273 this.desserts = response.data.data;
274 this.showLoader = false; 274 this.showLoader = false;
275 }) 275 })
276 .catch(err => { 276 .catch(error => {
277 console.log("err====>", err);
278 this.showLoader = false; 277 this.showLoader = false;
279 if (error.response.status === 401) { 278 if (error.response.status === 401) {
280 this.$router.replace({ path: "/" }); 279 this.$router.replace({ path: "/" });
281 this.$store.dispatch("setToken", null); 280 this.$store.dispatch("setToken", null);
282 this.$store.dispatch("Id", null); 281 this.$store.dispatch("Id", null);
283 } 282 }
284 }); 283 });
285 }, 284 },
286 editItem(item) { 285 editItem(item) {
287 this.editedIndex = this.desserts.indexOf(item); 286 this.editedIndex = this.desserts.indexOf(item);
288 this.editedItem = Object.assign({}, item); 287 this.editedItem = Object.assign({}, item);
289 this.dialog = true; 288 this.dialog = true;
290 }, 289 },
291 profile(item) { 290 profile(item) {
292 this.editedIndex = this.desserts.indexOf(item); 291 this.editedIndex = this.desserts.indexOf(item);
293 this.editedItem = Object.assign({}, item); 292 this.editedItem = Object.assign({}, item);
294 this.dialog1 = true; 293 this.dialog1 = true;
295 }, 294 },
296 deleteItem(item) { 295 deleteItem(item) {
297 let deleteStudent = { 296 let deleteStudent = {
298 classId: item._id 297 classId: item._id
299 }; 298 };
300 http() 299 http()
301 .delete( 300 .delete(
302 "/deleteClass", 301 "/deleteClass",
303 confirm("Are you sure you want to delete this?") && { 302 confirm("Are you sure you want to delete this?") && {
304 params: deleteStudent 303 params: deleteStudent
305 } 304 }
306 ) 305 )
307 .then(response => { 306 .then(response => {
308 // console.log("deleteUers",deleteStudent) 307 // console.log("deleteUers",deleteStudent)
309 if ((this.snackbar = true)) { 308 if ((this.snackbar = true)) {
310 this.text = "Successfully delete Existing Class"; 309 this.text = "Successfully delete Existing Class";
311 } 310 }
312 this.getClassList(); 311 this.getClassList();
313 }) 312 })
314 .catch(error => { 313 .catch(error => {
315 // console.log(error); 314 // console.log(error);
316 }); 315 });
317 }, 316 },
318 activeTab(type) { 317 activeTab(type) {
319 switch (type) { 318 switch (type) {
320 case "existing": 319 case "existing":
321 this.newActive = false; 320 this.newActive = false;
322 this.isActive = true; 321 this.isActive = true;
323 break; 322 break;
324 323
325 default: 324 default:
326 this.newActive = true; 325 this.newActive = true;
327 this.isActive = false; 326 this.isActive = false;
328 break; 327 break;
329 } 328 }
330 }, 329 },
331 close() { 330 close() {
332 this.dialog = false; 331 this.dialog = false;
333 setTimeout(() => { 332 setTimeout(() => {
334 this.editedItem = Object.assign({}, this.defaultItem); 333 this.editedItem = Object.assign({}, this.defaultItem);
335 this.editedIndex = -1; 334 this.editedIndex = -1;
336 }, 300); 335 }, 300);
337 }, 336 },
338 close1() { 337 close1() {
339 this.dialog1 = false; 338 this.dialog1 = false;
340 }, 339 },
341 submit() { 340 submit() {
342 if (this.$refs.form.validate()) { 341 if (this.$refs.form.validate()) {
343 let addClass = { 342 let addClass = {
344 classNum: this.addclasses.classNum 343 classNum: this.addclasses.classNum
345 }; 344 };
346 console.log(addClass); 345 console.log(addClass);
347 this.loading = true; 346 this.loading = true;
348 http() 347 http()
349 .post("/createClass", addClass) 348 .post("/createClass", addClass)
350 .then(response => { 349 .then(response => {
351 this.getClassList(); 350 this.getClassList();
352 if ((this.snackbar = true)) { 351 if ((this.snackbar = true)) {
353 this.text = "New class added successfully"; 352 this.text = "New class added successfully";
354 } 353 }
355 this.clear(); 354 this.clear();
356 this.loading = false; 355 this.loading = false;
357 }) 356 })
358 .catch(error => { 357 .catch(error => {
359 // console.log(error); 358 // console.log(error);
360 this.loading = false; 359 this.loading = false;
361 if ((this.snackbar = true)) { 360 if ((this.snackbar = true)) {
362 this.text = error.response.data.message; 361 this.text = error.response.data.message;
363 } 362 }
364 }); 363 });
365 } 364 }
366 }, 365 },
367 clear() { 366 clear() {
368 this.$refs.form.reset(); 367 this.$refs.form.reset();
369 }, 368 },
370 save() { 369 save() {
371 let editClass = { 370 let editClass = {
372 classId: this.editedItem._id, 371 classId: this.editedItem._id,
373 classNum: this.editedItem.classNum 372 classNum: this.editedItem.classNum
374 }; 373 };
375 http() 374 http()
376 .put("/updateClass", editClass) 375 .put("/updateClass", editClass)
377 .then(response => { 376 .then(response => {
378 if ((this.snackbar = true)) { 377 if ((this.snackbar = true)) {
379 this.text = "Successfully Edit Existing Class"; 378 this.text = "Successfully Edit Existing Class";
380 } 379 }
381 this.getClassList(); 380 this.getClassList();
382 }) 381 })
383 .catch(error => { 382 .catch(error => {
384 // console.log(error); 383 // console.log(error);
385 }); 384 });
386 this.close(); 385 this.close();
387 } 386 }
388 }, 387 },
389 mounted() { 388 mounted() {
390 this.getClassList(); 389 this.getClassList();
391 // console.log("this.search",this.search) 390 // console.log("this.search",this.search)
392 }, 391 },
393 created() { 392 created() {
394 this.$root.$on("app:search", search => { 393 this.$root.$on("app:search", search => {
395 this.search = search; 394 this.search = search;
396 }); 395 });
397 }, 396 },
398 beforeDestroy() { 397 beforeDestroy() {
399 // dont forget to remove the listener 398 // dont forget to remove the listener
400 this.$root.$off("app:search"); 399 this.$root.$off("app:search");
401 } 400 }
402 }; 401 };
403 </script> 402 </script>
404 <style> 403 <style>
405 .active { 404 .active {
406 background-color: gray; 405 background-color: gray;
407 color: white !important; 406 color: white !important;
408 } 407 }
409 .activebtn { 408 .activebtn {
410 color: black !important; 409 color: black !important;
411 } 410 }
412 </style> 411 </style>
src/pages/Dashboard/dashboard.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-container fluid grid-list-xl> 3 <v-container fluid grid-list-xl>
4 <!-- <v-card flat class="dashCard"> --> 4 <!-- <v-card flat class="dashCard"> -->
5 <v-layout row wrap class="pt-3"> 5 <v-layout row wrap class="pt-3">
6 <!-- ***** Total Students ***** --> 6 <!-- ***** Total Students ***** -->
7 <v-flex xs12 class="pt-2"> 7 <v-flex xs12 class="pt-2">
8 <v-layout row wrap> 8 <v-layout row wrap>
9 <v-flex xs12 sm12 lg3 md4> 9 <v-flex xs12 sm12 lg3 md4>
10 <v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark> 10 <v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark>
11 <img 11 <img
12 src="/static/schoolIcons/Students.png" 12 src="/static/schoolIcons/Students.png"
13 class="iconOfDashboard" 13 class="iconOfDashboard"
14 width="80" 14 width="80"
15 alt="Students" 15 alt="Students"
16 /> 16 />
17 </v-card> 17 </v-card>
18 <v-card class="pa-3" style="margin-top: -44px;"> 18 <v-card class="pa-3" style="margin-top: -44px;">
19 <div class="body-2 grey--text text-xs-right">Students</div> 19 <div class="body-2 grey--text text-xs-right">Students</div>
20 <br /> 20 <br />
21 <h3 class="headline text-xs-right pb-4">{{ students.length }}</h3> 21 <h3 class="headline text-xs-right pb-4">{{ students.length }}</h3>
22 </v-card> 22 </v-card>
23 </v-flex> 23 </v-flex>
24 <!-- ***** Total Parents ***** --> 24 <!-- ***** Total Parents ***** -->
25 <v-flex xs12 sm12 lg3 md4> 25 <v-flex xs12 sm12 lg3 md4>
26 <v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark> 26 <v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark>
27 <img 27 <img
28 src="/static/schoolIcons/Parents.png" 28 src="/static/schoolIcons/Parents.png"
29 width="80" 29 width="80"
30 class="iconOfDashboard" 30 class="iconOfDashboard"
31 alt="Parents" 31 alt="Parents"
32 /> 32 />
33 </v-card> 33 </v-card>
34 <v-card class="pa-3" style="margin-top: -44px;"> 34 <v-card class="pa-3" style="margin-top: -44px;">
35 <div class="body-2 grey--text text-xs-right">Parents</div> 35 <div class="body-2 grey--text text-xs-right">Parents</div>
36 <br /> 36 <br />
37 <h3 class="headline text-xs-right pb-4">{{ parents.length }}</h3> 37 <h3 class="headline text-xs-right pb-4">{{ parents.length }}</h3>
38 </v-card> 38 </v-card>
39 </v-flex> 39 </v-flex>
40 <!-- ***** Total Teachers***** --> 40 <!-- ***** Total Teachers***** -->
41 <v-flex xs12 sm12 lg3 md4> 41 <v-flex xs12 sm12 lg3 md4>
42 <v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark> 42 <v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark>
43 <img 43 <img
44 src="/static/schoolIcons/Teachers.png" 44 src="/static/schoolIcons/Teachers.png"
45 width="80" 45 width="80"
46 class="iconOfDashboard" 46 class="iconOfDashboard"
47 alt="Teachers" 47 alt="Teachers"
48 /> 48 />
49 </v-card> 49 </v-card>
50 <v-card class="pa-3" style="margin-top: -44px;"> 50 <v-card class="pa-3" style="margin-top: -44px;">
51 <div class="body-2 grey--text text-xs-right">Teachers</div> 51 <div class="body-2 grey--text text-xs-right">Teachers</div>
52 <br /> 52 <br />
53 <h3 class="headline text-xs-right pb-4">{{ teachers.length }}</h3> 53 <h3 class="headline text-xs-right pb-4">{{ teachers.length }}</h3>
54 </v-card> 54 </v-card>
55 </v-flex> 55 </v-flex>
56 <!-- ***** Total Class***** --> 56 <!-- ***** Total Class***** -->
57 <v-flex xs12 sm12 lg3 md4> 57 <v-flex xs12 sm12 lg3 md4>
58 <v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark> 58 <v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark>
59 <img src="/static/schoolIcons/Class.png" width="80" class="iconOfDashboard" alt="class" /> 59 <img
60 src="/static/schoolIcons/Class.png"
61 width="80"
62 class="iconOfDashboard"
63 alt="class"
64 />
60 </v-card> 65 </v-card>
61 <v-card class="pa-3" style="margin-top: -44px;"> 66 <v-card class="pa-3" style="margin-top: -44px;">
62 <div class="body-2 grey--text text-xs-right">Class</div> 67 <div class="body-2 grey--text text-xs-right">Class</div>
63 <br /> 68 <br />
64 <h3 class="headline text-xs-right pb-4">{{ classes.length}}</h3> 69 <h3 class="headline text-xs-right pb-4">{{ classes.length}}</h3>
65 </v-card> 70 </v-card>
66 </v-flex> 71 </v-flex>
67 </v-layout> 72 </v-layout>
68 </v-flex> 73 </v-flex>
69 </v-layout> 74 </v-layout>
70 <v-card class="pt-4 mt-3" flat> 75 <v-card class="pt-4 mt-3" flat>
71 <full-calendar 76 <full-calendar
72 ref="calendar" 77 ref="calendar"
73 defaultView="month" 78 defaultView="month"
74 droppable="false" 79 droppable="false"
75 :events="events" 80 :events="events"
76 :config="config" 81 :config="config"
77 ></full-calendar> 82 ></full-calendar>
78 </v-card> 83 </v-card>
79 </v-container> 84 </v-container>
80 <v-dialog v-model="dialog" max-width="500"> 85 <v-dialog v-model="dialog" max-width="500">
81 <v-card color="grey lighten-4" flat> 86 <v-card color="grey lighten-4" flat>
82 <v-toolbar dark color="fixcolors"> 87 <v-toolbar dark color="fixcolors">
83 <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> --> 88 <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
84 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
85 <v-btn icon @click="dialog= false"> 90 <v-btn icon @click="dialog= false">
86 <v-icon>close</v-icon> 91 <v-icon>close</v-icon>
87 </v-btn> 92 </v-btn>
88 </v-toolbar> 93 </v-toolbar>
89 <v-flex class="py-4"> 94 <v-flex class="py-4">
90 <v-list-tile> 95 <v-list-tile>
91 <v-list-tile-action> 96 <v-list-tile-action>
92 <v-icon>edit</v-icon> 97 <v-icon>edit</v-icon>
93 </v-list-tile-action> 98 </v-list-tile-action>
94 <v-list-tile-content> 99 <v-list-tile-content>
95 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 100 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
96 </v-list-tile-content> 101 </v-list-tile-content>
97 </v-list-tile> 102 </v-list-tile>
98 <v-list-tile> 103 <v-list-tile>
99 <v-list-tile-action> 104 <v-list-tile-action>
100 <v-icon>access_time</v-icon> 105 <v-icon>access_time</v-icon>
101 </v-list-tile-action> 106 </v-list-tile-action>
102 <v-list-tile-content> 107 <v-list-tile-content>
103 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 108 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
104 <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> --> 109 <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
105 </v-list-tile-content> 110 </v-list-tile-content>
106 </v-list-tile> 111 </v-list-tile>
107 </v-flex> 112 </v-flex>
108 </v-card> 113 </v-card>
109 </v-dialog> 114 </v-dialog>
110 <div class="loader" v-if="showLoader"> 115 <div class="loader" v-if="showLoader">
111 <v-progress-circular indeterminate color="white"></v-progress-circular> 116 <v-progress-circular indeterminate color="white"></v-progress-circular>
112 </div> 117 </div>
113 </v-app> 118 </v-app>
114 </template> 119 </template>
115 120
116 <script> 121 <script>
117 import http from "@/Services/http.js"; 122 import http from "@/Services/http.js";
118 import Util from "@/util"; 123 import Util from "@/util";
119 import moment from "moment"; 124 import moment from "moment";
120 125
121 export default { 126 export default {
122 data() { 127 data() {
123 return { 128 return {
124 showLoader: false, 129 showLoader: false,
125 dialog: false, 130 dialog: false,
126 HolidaysList: [], 131 HolidaysList: [],
127 EventsList: [], 132 EventsList: [],
128 events: [], 133 events: [],
129 config: { 134 config: {
130 eventClick: event => { 135 eventClick: event => {
131 this.selected = event; 136 this.selected = event;
132 this.dialog = true; 137 this.dialog = true;
133 } 138 }
134 }, 139 },
135 selected: {}, 140 selected: {},
136 students: "", 141 students: "",
137 parents: "", 142 parents: "",
138 teachers: "", 143 teachers: "",
139 classes: "" 144 classes: ""
140 }; 145 };
141 }, 146 },
142 mounted() { 147 mounted() {
143 this.token = this.$store.state.token; 148 this.token = this.$store.state.token;
144 this.getData(); 149 this.getData();
145 this.getStudents(); 150 this.getStudents();
146 this.getTeachers(); 151 this.getTeachers();
147 this.getParents(); 152 this.getParents();
148 this.getClasses(); 153 this.getClasses();
149 }, 154 },
150 methods: { 155 methods: {
151 date: function(date) { 156 date: function(date) {
152 return moment(date).format("MMMM DD, YYYY HH:mm:ss"); 157 return moment(date).format("MMMM DD, YYYY HH:mm:ss");
153 }, 158 },
154 refreshEvents() { 159 refreshEvents() {
155 this.$refs.calendar.$emit("refetch-events"); 160 this.$refs.calendar.$emit("refetch-events");
156 }, 161 },
157 removeEvent() { 162 removeEvent() {
158 this.$refs.calendar.$emit("remove-event", this.selected); 163 this.$refs.calendar.$emit("remove-event", this.selected);
159 this.selected = {}; 164 this.selected = {};
160 }, 165 },
161 eventSelected(event) { 166 eventSelected(event) {
162 this.selected = event; 167 this.selected = event;
163 console.log("this.selected", this.selected); 168 console.log("this.selected", this.selected);
164 }, 169 },
165 // eventDropStart: function(event) { 170 // eventDropStart: function(event) {
166 // event.editable = false; 171 // event.editable = false;
167 // }, 172 // },
168 eventCreated(...test) { 173 eventCreated(...test) {
169 console.log(test); 174 console.log(test);
170 }, 175 },
171 getData() { 176 getData() {
172 this.showLoader = true; 177 this.showLoader = true;
173 var token = this.$store.state.token; 178 var token = this.$store.state.token;
174 http() 179 http()
175 .get("/getHolidaysList", { 180 .get("/getHolidaysList", {
176 headers: { Authorization: "Bearer " + token } 181 headers: { Authorization: "Bearer " + token }
177 }) 182 })
178 .then(response => { 183 .then(response => {
179 this.HolidaysList = response.data.data; 184 this.HolidaysList = response.data.data;
180 // this.events = response.data.data; 185 // this.events = response.data.data;
181 this.showLoader = false; 186 this.showLoader = false;
182 }) 187 })
183 .catch(err => { 188 .catch(err => {
184 // console.log("err====>", err); 189 // console.log("err====>", err);
185 this.showLoader = false; 190 this.showLoader = false;
186 if (error.response.status === 401) { 191 if (error.response.status === 401) {
187 this.$router.replace({ path: "/" }); 192 this.$router.replace({ path: "/" });
188 this.$store.dispatch("setToken", null); 193 this.$store.dispatch("setToken", null);
189 this.$store.dispatch("Id", null); 194 this.$store.dispatch("Id", null);
195 this.$store.dispatch("Role", null);
190 } 196 }
191 }); 197 });
192 http() 198 http()
193 .get("/getSchoolEventsList", { 199 .get("/getSchoolEventsList", {
194 headers: { Authorization: "Bearer " + token } 200 headers: { Authorization: "Bearer " + token }
195 }) 201 })
196 .then(response => { 202 .then(response => {
197 this.EventsList = response.data.data; 203 this.EventsList = response.data.data;
198 let allData = []; 204 let allData = [];
199 allData = this.HolidaysList.concat(this.EventsList); 205 allData = this.HolidaysList.concat(this.EventsList);
200 this.events = allData; 206 this.events = allData;
201 this.showLoader = false; 207 this.showLoader = false;
202 }) 208 })
203 .catch(error => { 209 .catch(error => {
204 // console.log("err====>", err); 210 // console.log("err====>", err);
205 this.showLoader = false; 211 this.showLoader = false;
206 if (error.response.status === 401) { 212 if (error.response.status === 401) {
207 this.$router.replace({ path: "/" }); 213 this.$router.replace({ path: "/" });
208 this.$store.dispatch("setToken", null); 214 this.$store.dispatch("setToken", null);
209 this.$store.dispatch("Id", null); 215 this.$store.dispatch("Id", null);
216 this.$store.dispatch("Role", null);
210 } 217 }
211 }); 218 });
212 }, 219 },
213 getStudents() { 220 getStudents() {
214 http() 221 http()
215 .get("/getStudentsList", { 222 .get("/getStudentsList", {
216 headers: { Authorization: "Bearer " + this.token } 223 headers: { Authorization: "Bearer " + this.token }
217 }) 224 })
218 .then(response => { 225 .then(response => {
219 this.students = response.data.data; 226 this.students = response.data.data;
220 this.showLoader = false; 227 this.showLoader = false;
221 }) 228 })
222 .catch(err => { 229 .catch(error => {
223 // console.log("err====>", err); 230 // console.log("err====>", err);
224 this.showLoader = false; 231 this.showLoader = false;
225 if (error.response.status === 401) { 232 if (error.response.status === 401) {
226 this.$router.replace({ path: "/" }); 233 this.$router.replace({ path: "/" });
227 this.$store.dispatch("setToken", null); 234 this.$store.dispatch("setToken", null);
228 this.$store.dispatch("Id", null); 235 this.$store.dispatch("Id", null);
229 } 236 }
230 }); 237 });
231 }, 238 },
232 getParents() { 239 getParents() {
233 http() 240 http()
234 .get("/getParentsList", { 241 .get("/getParentsList", {
235 headers: { Authorization: "Bearer " + this.token } 242 headers: { Authorization: "Bearer " + this.token }
236 }) 243 })
237 .then(response => { 244 .then(response => {
238 this.parents = response.data.data; 245 this.parents = response.data.data;
239 this.showLoader = false; 246 this.showLoader = false;
240 }) 247 })
241 .catch(err => { 248 .catch(error => {
242 // console.log("err====>", err); 249 // console.log("err====>", err);
243 this.showLoader = false; 250 this.showLoader = false;
244 if (error.response.status === 401) { 251 if (error.response.status === 401) {
245 this.$router.replace({ path: "/" }); 252 this.$router.replace({ path: "/" });
246 this.$store.dispatch("setToken", null); 253 this.$store.dispatch("setToken", null);
247 this.$store.dispatch("Id", null); 254 this.$store.dispatch("Id", null);
248 } 255 }
249 }); 256 });
250 }, 257 },
251 getTeachers() { 258 getTeachers() {
252 http() 259 http()
253 .get("/getTeachersList", { 260 .get("/getTeachersList", {
254 headers: { Authorization: "Bearer " + this.token } 261 headers: { Authorization: "Bearer " + this.token }
255 }) 262 })
256 .then(response => { 263 .then(response => {
257 this.teachers = response.data.data; 264 this.teachers = response.data.data;
258 this.showLoader = false; 265 this.showLoader = false;
259 }) 266 })
260 .catch(err => { 267 .catch(error => {
261 // console.log("err====>", err); 268 // console.log("err====>", err);
262 this.showLoader = false; 269 this.showLoader = false;
263 if (error.response.status === 401) { 270 if (error.response.status === 401) {
264 this.$router.replace({ path: "/" }); 271 this.$router.replace({ path: "/" });
265 this.$store.dispatch("setToken", null); 272 this.$store.dispatch("setToken", null);
266 this.$store.dispatch("Id", null); 273 this.$store.dispatch("Id", null);
267 } 274 }
268 }); 275 });
269 }, 276 },
270 getClasses() { 277 getClasses() {
271 http() 278 http()
272 .get("/getClassesList", { 279 .get("/getClassesList", {
273 headers: { Authorization: "Bearer " + this.token } 280 headers: { Authorization: "Bearer " + this.token }
274 }) 281 })
275 .then(response => { 282 .then(response => {
276 this.classes = response.data.data; 283 this.classes = response.data.data;
277 this.showLoader = false; 284 this.showLoader = false;
278 }) 285 })
279 .catch(err => { 286 .catch(error => {
280 // console.log("err====>", err);
281 this.showLoader = false; 287 this.showLoader = false;
282 if (error.response.status === 401) { 288 if (error.response.status === 401) {
283 this.$router.replace({ path: "/" }); 289 this.$router.replace({ path: "/" });
284 this.$store.dispatch("setToken", null); 290 this.$store.dispatch("setToken", null);
285 this.$store.dispatch("Id", null); 291 this.$store.dispatch("Id", null);
292 this.$store.dispatch("Role", null);
286 } 293 }
287 }); 294 });
288 } 295 }
289 // eventSources() { 296 // eventSources() {
290 // const self = this; 297 // const self = this;
291 // return [ 298 // return [
292 // { 299 // {
293 // events(start, end, timezone, callback) { 300 // events(start, end, timezone, callback) {
294 // setTimeout(() => { 301 // setTimeout(() => {
295 // callback(self.events.filter(() => Math.random() > 0.5)); 302 // callback(self.events.filter(() => Math.random() > 0.5));
296 // }, 1000); 303 // }, 1000);
297 // } 304 // }
298 // } 305 // }
299 // ]; 306 // ];
300 // } 307 // }
301 } 308 }
302 }; 309 };
303 </script> 310 </script>
304 311
305 <style> 312 <style>
306 @import "fullcalendar/dist/fullcalendar.css"; 313 @import "fullcalendar/dist/fullcalendar.css";
307 .fc button { 314 .fc button {
308 background: grey !important; 315 background: grey !important;
309 border: none; 316 border: none;
310 border-radius: 4px; 317 border-radius: 4px;
311 color: white; 318 color: white;
312 padding: 6px 32px; 319 padding: 6px 32px;
313 text-align: center; 320 text-align: center;
314 text-decoration: none; 321 text-decoration: none;
315 display: inline-block; 322 display: inline-block;
316 font-size: 18px; 323 font-size: 18px;
317 margin: 8px 2px !important; 324 margin: 8px 2px !important;
318 cursor: pointer; 325 cursor: pointer;
319 -webkit-transition-duration: 0.4s; 326 -webkit-transition-duration: 0.4s;
320 transition-duration: 0.4s; 327 transition-duration: 0.4s;
321 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 328 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
322 } 329 }
323 .iconCard { 330 .iconCard {
324 position: relative !important; 331 position: relative !important;
325 border-radius: 4px; 332 border-radius: 4px;
326 z-index: 1; 333 z-index: 1;
327 } 334 }
328 .agentIcon { 335 .agentIcon {
329 position: relative !important; 336 position: relative !important;
330 border-radius: 4px; 337 border-radius: 4px;
331 z-index: 1; 338 z-index: 1;
332 } 339 }
333 .farmerIcon { 340 .farmerIcon {
334 position: relative !important; 341 position: relative !important;
335 border-radius: 4px; 342 border-radius: 4px;
336 z-index: 1; 343 z-index: 1;
337 } 344 }
338 .khasraIcon { 345 .khasraIcon {
339 position: relative !important; 346 position: relative !important;
340 border-radius: 4px; 347 border-radius: 4px;
341 z-index: 1; 348 z-index: 1;
342 } 349 }
343 .maleFarmerIcon { 350 .maleFarmerIcon {
344 position: relative !important; 351 position: relative !important;
345 border-radius: 4px; 352 border-radius: 4px;
346 z-index: 1; 353 z-index: 1;
347 } 354 }
src/pages/Event/event.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Event</v-tab> 10 >Existing Event</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Event</v-tab> 18 >Add New Event</v-tab>
19 19
20 <!-- ****** EDITS EVENT DETAILS ****** --> 20 <!-- ****** EDITS EVENT DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Event</h3> 36 <h3>Edit Event</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-container fluid> 41 <v-container fluid>
42 <v-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Title:</label> 45 <label class="right">Title:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.title" 49 v-model="editedItem.title"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Date:</label> 60 <label class="right">Date:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu" 64 ref="menu"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 v-model="menu" 66 v-model="menu"
67 :nudge-right="40" 67 :nudge-right="40"
68 lazy 68 lazy
69 transition="scale-transition" 69 transition="scale-transition"
70 offset-y 70 offset-y
71 full-width 71 full-width
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field 74 <v-text-field
75 slot="activator" 75 slot="activator"
76 :rules="dateRules" 76 :rules="dateRules"
77 v-model="editedItem.dateOfEvent" 77 v-model="editedItem.dateOfEvent"
78 placeholder="Select date" 78 placeholder="Select date"
79 ></v-text-field> 79 ></v-text-field>
80 <v-date-picker 80 <v-date-picker
81 color="info" 81 color="info"
82 ref="picker" 82 ref="picker"
83 v-model="editedItem.dateOfEvent" 83 v-model="editedItem.dateOfEvent"
84 @input="$refs.menu.save(editedItem.dateOfEvent)" 84 @input="$refs.menu.save(editedItem.dateOfEvent)"
85 ></v-date-picker> 85 ></v-date-picker>
86 </v-menu> 86 </v-menu>
87 </v-flex> 87 </v-flex>
88 </v-layout> 88 </v-layout>
89 </v-flex> 89 </v-flex>
90 <v-flex xs12 sm12> 90 <v-flex xs12 sm12>
91 <v-layout> 91 <v-layout>
92 <v-flex xs4 class="pt-4 subheading"> 92 <v-flex xs4 class="pt-4 subheading">
93 <label class="right">Description:</label> 93 <label class="right">Description:</label>
94 </v-flex> 94 </v-flex>
95 <v-flex xs8 sm5 class="ml-3"> 95 <v-flex xs8 sm5 class="ml-3">
96 <v-text-field 96 <v-text-field
97 placeholder="fill your Description" 97 placeholder="fill your Description"
98 v-model="editedItem.description" 98 v-model="editedItem.description"
99 type="text" 99 type="text"
100 ></v-text-field> 100 ></v-text-field>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 </v-flex> 103 </v-flex>
104 <v-layout> 104 <v-layout>
105 <v-flex xs12 sm10 offset-sm1> 105 <v-flex xs12 sm10 offset-sm1>
106 <v-card-actions> 106 <v-card-actions>
107 <v-btn round dark @click.native="close">Cancel</v-btn> 107 <v-btn round dark @click.native="close">Cancel</v-btn>
108 <v-spacer></v-spacer> 108 <v-spacer></v-spacer>
109 <v-btn round dark @click="save">Save</v-btn> 109 <v-btn round dark @click="save">Save</v-btn>
110 </v-card-actions> 110 </v-card-actions>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-container> 113 </v-container>
114 </v-card> 114 </v-card>
115 </v-flex> 115 </v-flex>
116 </v-dialog> 116 </v-dialog>
117 117
118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** --> 118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** -->
119 119
120 <v-dialog v-model="dialog1" max-width="700px"> 120 <v-dialog v-model="dialog1" max-width="700px">
121 <v-toolbar color="white"> 121 <v-toolbar color="white">
122 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
123 <v-toolbar-title> 123 <v-toolbar-title>
124 <h3>Event</h3> 124 <h3>Event</h3>
125 </v-toolbar-title> 125 </v-toolbar-title>
126 <v-spacer></v-spacer> 126 <v-spacer></v-spacer>
127 <v-icon @click="close1">close</v-icon> 127 <v-icon @click="close1">close</v-icon>
128 </v-toolbar> 128 </v-toolbar>
129 <v-card> 129 <v-card>
130 <v-card-text> 130 <v-card-text>
131 <v-container grid-list-md> 131 <v-container grid-list-md>
132 <v-layout wrap> 132 <v-layout wrap>
133 <v-flex> 133 <v-flex>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1"> 136 <h5 class="right my-1">
137 <b>Title:</b> 137 <b>Title:</b>
138 </h5> 138 </h5>
139 </v-flex> 139 </v-flex>
140 <v-flex sm6 xs8> 140 <v-flex sm6 xs8>
141 <h5 class="my-1">{{ editedItem.title }}</h5> 141 <h5 class="my-1">{{ editedItem.title }}</h5>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 <v-layout> 144 <v-layout>
145 <v-flex xs5 sm6> 145 <v-flex xs5 sm6>
146 <h5 class="right my-1"> 146 <h5 class="right my-1">
147 <b>Date:</b> 147 <b>Date:</b>
148 </h5> 148 </h5>
149 </v-flex> 149 </v-flex>
150 <v-flex sm6 xs8> 150 <v-flex sm6 xs8>
151 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> 151 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 <v-layout> 154 <v-layout>
155 <v-flex xs5 sm6> 155 <v-flex xs5 sm6>
156 <h5 class="right my-1"> 156 <h5 class="right my-1">
157 <b>Description:</b> 157 <b>Description:</b>
158 </h5> 158 </h5>
159 </v-flex> 159 </v-flex>
160 <v-flex sm6 xs8> 160 <v-flex sm6 xs8>
161 <h5 class="my-1">{{ editedItem.description }}</h5> 161 <h5 class="my-1">{{ editedItem.description }}</h5>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 </v-container> 166 </v-container>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 <v-snackbar 170 <v-snackbar
171 :timeout="timeout" 171 :timeout="timeout"
172 :top="y === 'top'" 172 :top="y === 'top'"
173 :right="x === 'right'" 173 :right="x === 'right'"
174 :vertical="mode === 'vertical'" 174 :vertical="mode === 'vertical'"
175 v-model="snackbar" 175 v-model="snackbar"
176 color="success" 176 color="success"
177 >{{ text }}</v-snackbar> 177 >{{ text }}</v-snackbar>
178 178
179 <!-- ****** EXISTING-USERS EVENT TABLE ****** --> 179 <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
180 180
181 <v-data-table 181 <v-data-table
182 :headers="headers" 182 :headers="headers"
183 :items="desserts" 183 :items="desserts"
184 :pagination.sync="pagination" 184 :pagination.sync="pagination"
185 :search="search" 185 :search="search"
186 > 186 >
187 <template slot="items" slot-scope="props"> 187 <template slot="items" slot-scope="props">
188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
189 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 189 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> 190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
191 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
192 192
193 <td id="td" class="text-xs-center"> 193 <td id="td" class="text-xs-center">
194 <span> 194 <span>
195 <v-tooltip top> 195 <v-tooltip top>
196 <img 196 <img
197 slot="activator" 197 slot="activator"
198 style="cursor:pointer; width:25px; height:18px; " 198 style="cursor:pointer; width:25px; height:18px; "
199 class="mr5" 199 class="mr5"
200 @click="profile(props.item)" 200 @click="profile(props.item)"
201 src="/static/icon/eye1.png" 201 src="/static/icon/eye1.png"
202 /> 202 />
203 <span>View</span> 203 <span>View</span>
204 </v-tooltip> 204 </v-tooltip>
205 <v-tooltip top> 205 <v-tooltip top>
206 <img 206 <img
207 slot="activator" 207 slot="activator"
208 style="cursor:pointer; width:20px; height:18px; " 208 style="cursor:pointer; width:20px; height:18px; "
209 class="mr5" 209 class="mr5"
210 @click="editItem(props.item)" 210 @click="editItem(props.item)"
211 src="/static/icon/edit1.png" 211 src="/static/icon/edit1.png"
212 /> 212 />
213 <span>Edit</span> 213 <span>Edit</span>
214 </v-tooltip> 214 </v-tooltip>
215 <v-tooltip top> 215 <v-tooltip top>
216 <img 216 <img
217 slot="activator" 217 slot="activator"
218 style="cursor:pointer; width:20px; height:20px; " 218 style="cursor:pointer; width:20px; height:20px; "
219 class="mr5" 219 class="mr5"
220 @click="deleteItem(props.item)" 220 @click="deleteItem(props.item)"
221 src="/static/icon/delete1.png" 221 src="/static/icon/delete1.png"
222 /> 222 />
223 <span>Delete</span> 223 <span>Delete</span>
224 </v-tooltip> 224 </v-tooltip>
225 </span> 225 </span>
226 </td> 226 </td>
227 </template> 227 </template>
228 <v-alert 228 <v-alert
229 slot="no-results" 229 slot="no-results"
230 :value="true" 230 :value="true"
231 color="error" 231 color="error"
232 icon="warning" 232 icon="warning"
233 >Your search for "{{ search }}" found no results.</v-alert> 233 >Your search for "{{ search }}" found no results.</v-alert>
234 </v-data-table> 234 </v-data-table>
235 </v-tab-item> 235 </v-tab-item>
236 236
237 <!-- ****** ADD MULTIPLE EVENT ****** --> 237 <!-- ****** ADD MULTIPLE EVENT ****** -->
238 238
239 <v-tab-item> 239 <v-tab-item>
240 <v-container> 240 <v-container>
241 <v-snackbar 241 <v-snackbar
242 :timeout="timeout" 242 :timeout="timeout"
243 :top="y === 'top'" 243 :top="y === 'top'"
244 :right="x === 'right'" 244 :right="x === 'right'"
245 :vertical="mode === 'vertical'" 245 :vertical="mode === 'vertical'"
246 v-model="snackbar" 246 v-model="snackbar"
247 color="success" 247 color="success"
248 >{{ text }}</v-snackbar> 248 >{{ text }}</v-snackbar>
249 <v-flex xs12 sm12 md8 offset-md2 class="top"> 249 <v-flex xs12 sm12 md8 offset-md2 class="top">
250 <v-card flat> 250 <v-card flat>
251 <v-form ref="form" v-model="valid" lazy-validation> 251 <v-form ref="form" v-model="valid" lazy-validation>
252 <v-container fluid> 252 <v-container fluid>
253 <v-flex xs12> 253 <v-flex xs12>
254 <v-layout> 254 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Title:</label> 256 <label class="right">Title:</label>
257 </v-flex> 257 </v-flex>
258 <v-flex xs8 sm6 class="ml-3"> 258 <v-flex xs8 sm6 class="ml-3">
259 <v-text-field 259 <v-text-field
260 v-model="addEvent.title" 260 v-model="addEvent.title"
261 placeholder="fill your Title" 261 placeholder="fill your Title"
262 type="text" 262 type="text"
263 :rules="titleRules" 263 :rules="titleRules"
264 required 264 required
265 ></v-text-field> 265 ></v-text-field>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 </v-flex> 268 </v-flex>
269 <v-flex xs12> 269 <v-flex xs12>
270 <v-layout> 270 <v-layout>
271 <v-flex xs4 class="pt-4 subheading"> 271 <v-flex xs4 class="pt-4 subheading">
272 <label class="right">Date:</label> 272 <label class="right">Date:</label>
273 </v-flex> 273 </v-flex>
274 <v-flex xs8 sm6 class="ml-3"> 274 <v-flex xs8 sm6 class="ml-3">
275 <v-menu 275 <v-menu
276 ref="menu1" 276 ref="menu1"
277 :close-on-content-click="false" 277 :close-on-content-click="false"
278 v-model="menu1" 278 v-model="menu1"
279 :nudge-right="40" 279 :nudge-right="40"
280 :return-value.sync="addEvent.dateOfEvent" 280 :return-value.sync="addEvent.dateOfEvent"
281 app 281 app
282 lazy 282 lazy
283 transition="scale-transition" 283 transition="scale-transition"
284 offset-y 284 offset-y
285 full-width 285 full-width
286 min-width="290px" 286 min-width="290px"
287 > 287 >
288 <v-text-field 288 <v-text-field
289 slot="activator" 289 slot="activator"
290 :rules="dateRules" 290 :rules="dateRules"
291 v-model="addEvent.dateOfEvent" 291 v-model="addEvent.dateOfEvent"
292 append-icon="event" 292 append-icon="event"
293 placeholder="Select date" 293 placeholder="Select date"
294 ></v-text-field> 294 ></v-text-field>
295 <v-date-picker 295 <v-date-picker
296 color="info" 296 color="info"
297 v-model="addEvent.dateOfEvent" 297 v-model="addEvent.dateOfEvent"
298 @input="$refs.menu1.save(addEvent.dateOfEvent)" 298 @input="$refs.menu1.save(addEvent.dateOfEvent)"
299 ></v-date-picker> 299 ></v-date-picker>
300 </v-menu> 300 </v-menu>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 </v-flex> 303 </v-flex>
304 <v-flex xs12> 304 <v-flex xs12>
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
307 <label class="right">Description:</label> 307 <label class="right">Description:</label>
308 </v-flex> 308 </v-flex>
309 <v-flex xs8 sm6 class="ml-3"> 309 <v-flex xs8 sm6 class="ml-3">
310 <v-text-field 310 <v-text-field
311 placeholder="fill your Description" 311 placeholder="fill your Description"
312 :rules="descriptionRules" 312 :rules="descriptionRules"
313 v-model="addEvent.description" 313 v-model="addEvent.description"
314 type="text" 314 type="text"
315 required 315 required
316 ></v-text-field> 316 ></v-text-field>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 </v-flex> 319 </v-flex>
320 <v-layout> 320 <v-layout>
321 <v-flex xs12 sm9 offset-sm2> 321 <v-flex xs12 sm9 offset-sm2>
322 <v-layout> 322 <v-layout>
323 <v-flex xs6> 323 <v-flex xs6>
324 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 324 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
325 </v-flex> 325 </v-flex>
326 <v-flex xs6> 326 <v-flex xs6>
327 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 </v-container> 332 </v-container>
333 </v-form> 333 </v-form>
334 </v-card> 334 </v-card>
335 </v-flex> 335 </v-flex>
336 </v-container> 336 </v-container>
337 </v-tab-item> 337 </v-tab-item>
338 </v-tabs> 338 </v-tabs>
339 <div class="loader" v-if="showLoader"> 339 <div class="loader" v-if="showLoader">
340 <v-progress-circular indeterminate color="white"></v-progress-circular> 340 <v-progress-circular indeterminate color="white"></v-progress-circular>
341 </div> 341 </div>
342 </v-app> 342 </v-app>
343 </template> 343 </template>
344 344
345 <script> 345 <script>
346 import http from "@/Services/http.js"; 346 import http from "@/Services/http.js";
347 import Util from "@/util"; 347 import Util from "@/util";
348 import moment from "moment"; 348 import moment from "moment";
349 349
350 export default { 350 export default {
351 data: () => ({ 351 data: () => ({
352 snackbar: false, 352 snackbar: false,
353 y: "top", 353 y: "top",
354 x: "right", 354 x: "right",
355 mode: "", 355 mode: "",
356 timeout: 3000, 356 timeout: 3000,
357 text: "", 357 text: "",
358 loading: false, 358 loading: false,
359 date: null, 359 date: null,
360 search: "", 360 search: "",
361 showLoader: false, 361 showLoader: false,
362 dialog: false, 362 dialog: false,
363 dialog1: false, 363 dialog1: false,
364 valid: true, 364 valid: true,
365 isActive: true, 365 isActive: true,
366 newActive: false, 366 newActive: false,
367 pagination: { 367 pagination: {
368 rowsPerPage: 15 368 rowsPerPage: 15
369 }, 369 },
370 date: null, 370 date: null,
371 menu1: false, 371 menu1: false,
372 menu: false, 372 menu: false,
373 titleRules: [v => !!v || " Tilte is required"], 373 titleRules: [v => !!v || " Tilte is required"],
374 descriptionRules: [v => !!v || " Discription is required"], 374 descriptionRules: [v => !!v || " Discription is required"],
375 dateRules: [v => !!v || "Date is required"], 375 dateRules: [v => !!v || "Date is required"],
376 headers: [ 376 headers: [
377 { 377 {
378 text: "No", 378 text: "No",
379 align: "center", 379 align: "center",
380 sortable: false, 380 sortable: false,
381 value: "No" 381 value: "No"
382 }, 382 },
383 { text: "Title", value: "title", sortable: false, align: "center" }, 383 { text: "Title", value: "title", sortable: false, align: "center" },
384 { text: "Date", value: "date", sortable: false, align: "center" }, 384 { text: "Date", value: "date", sortable: false, align: "center" },
385 385
386 { 386 {
387 text: "Description", 387 text: "Description",
388 value: "description", 388 value: "description",
389 sortable: false, 389 sortable: false,
390 align: "center" 390 align: "center"
391 }, 391 },
392 { text: "Action", value: "", sortable: false, align: "center" } 392 { text: "Action", value: "", sortable: false, align: "center" }
393 ], 393 ],
394 desserts: [], 394 desserts: [],
395 editedIndex: -1, 395 editedIndex: -1,
396 addEvent: {}, 396 addEvent: {},
397 editedItem: {} 397 editedItem: {}
398 }), 398 }),
399 methods: { 399 methods: {
400 dates: function(date) { 400 dates: function(date) {
401 return moment(date).format("MMMM DD, YYYY"); 401 return moment(date).format("MMMM DD, YYYY");
402 }, 402 },
403 getEvents() { 403 getEvents() {
404 this.showLoader = true; 404 this.showLoader = true;
405 var token = this.$store.state.token; 405 var token = this.$store.state.token;
406 http() 406 http()
407 .get("/getSchoolEventsList", { 407 .get("/getSchoolEventsList", {
408 headers: { Authorization: "Bearer " + token } 408 headers: { Authorization: "Bearer " + token }
409 }) 409 })
410 .then(response => { 410 .then(response => {
411 this.desserts = response.data.data; 411 this.desserts = response.data.data;
412 this.showLoader = false; 412 this.showLoader = false;
413 }) 413 })
414 .catch(err => { 414 .catch(error => {
415 // console.log("err====>", err); 415 // console.log("err====>", err);
416 this.showLoader = false; 416 this.showLoader = false;
417 if (error.response.status === 401) { 417 if (error.response.status === 401) {
418 this.$router.replace({ path: "/" }); 418 this.$router.replace({ path: "/" });
419 this.$store.dispatch("setToken", null); 419 this.$store.dispatch("setToken", null);
420 this.$store.dispatch("Id", null); 420 this.$store.dispatch("Id", null);
421 } 421 }
422 }); 422 });
423 }, 423 },
424 editItem(item) { 424 editItem(item) {
425 this.editedIndex = this.desserts.indexOf(item); 425 this.editedIndex = this.desserts.indexOf(item);
426 this.editedItem = Object.assign({}, item); 426 this.editedItem = Object.assign({}, item);
427 this.editedItem.schoolEventId = item._id; 427 this.editedItem.schoolEventId = item._id;
428 this.dialog = true; 428 this.dialog = true;
429 }, 429 },
430 profile(item) { 430 profile(item) {
431 this.editedIndex = this.desserts.indexOf(item); 431 this.editedIndex = this.desserts.indexOf(item);
432 this.editedItem = Object.assign({}, item); 432 this.editedItem = Object.assign({}, item);
433 this.dialog1 = true; 433 this.dialog1 = true;
434 }, 434 },
435 435
436 deleteItem(item) { 436 deleteItem(item) {
437 let deleteEvent = { 437 let deleteEvent = {
438 schoolEventId: item._id 438 schoolEventId: item._id
439 }; 439 };
440 http() 440 http()
441 .delete( 441 .delete(
442 "/deleteSchoolEvent", 442 "/deleteSchoolEvent",
443 confirm("Are you sure you want to delete this?") && { 443 confirm("Are you sure you want to delete this?") && {
444 params: deleteEvent 444 params: deleteEvent
445 } 445 }
446 ) 446 )
447 .then(response => { 447 .then(response => {
448 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
449 this.text = response.data.message; 449 this.text = response.data.message;
450 } 450 }
451 this.getEvents(); 451 this.getEvents();
452 }) 452 })
453 .catch(error => { 453 .catch(error => {
454 console.log(error); 454 console.log(error);
455 }); 455 });
456 }, 456 },
457 activeTab(type) { 457 activeTab(type) {
458 switch (type) { 458 switch (type) {
459 case "existing": 459 case "existing":
460 this.newActive = false; 460 this.newActive = false;
461 this.isActive = true; 461 this.isActive = true;
462 break; 462 break;
463 463
464 default: 464 default:
465 this.newActive = true; 465 this.newActive = true;
466 this.isActive = false; 466 this.isActive = false;
467 break; 467 break;
468 } 468 }
469 }, 469 },
470 close() { 470 close() {
471 this.dialog = false; 471 this.dialog = false;
472 setTimeout(() => { 472 setTimeout(() => {
473 this.editedItem = Object.assign({}, this.defaultItem); 473 this.editedItem = Object.assign({}, this.defaultItem);
474 this.editedIndex = -1; 474 this.editedIndex = -1;
475 }, 300); 475 }, 300);
476 }, 476 },
477 close1() { 477 close1() {
478 this.dialog1 = false; 478 this.dialog1 = false;
479 }, 479 },
480 submit() { 480 submit() {
481 if (this.$refs.form.validate()) { 481 if (this.$refs.form.validate()) {
482 this.loading = true; 482 this.loading = true;
483 http() 483 http()
484 .post("/createSchoolEvent", this.addEvent) 484 .post("/createSchoolEvent", this.addEvent)
485 .then(response => { 485 .then(response => {
486 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
487 this.text = response.data.message; 487 this.text = response.data.message;
488 } 488 }
489 this.getEvents(); 489 this.getEvents();
490 this.clear(); 490 this.clear();
491 this.loading = false; 491 this.loading = false;
492 }) 492 })
493 .catch(error => { 493 .catch(error => {
494 if ((this.snackbar = true)) { 494 if ((this.snackbar = true)) {
495 this.text = error.response.data.message; 495 this.text = error.response.data.message;
496 } 496 }
497 this.loading = false; 497 this.loading = false;
498 }); 498 });
499 } 499 }
500 }, 500 },
501 clear() { 501 clear() {
502 this.$refs.form.reset(); 502 this.$refs.form.reset();
503 }, 503 },
504 save() { 504 save() {
505 http() 505 http()
506 .put("/updateSchoolEvent", this.editedItem) 506 .put("/updateSchoolEvent", this.editedItem)
507 .then(response => { 507 .then(response => {
508 this.snackbar = true; 508 this.snackbar = true;
509 this.text = response.data.message; 509 this.text = response.data.message;
510 this.getEvents(); 510 this.getEvents();
511 this.close(); 511 this.close();
512 }) 512 })
513 .catch(error => { 513 .catch(error => {
514 // console.log(error); 514 // console.log(error);
515 }); 515 });
516 } 516 }
517 }, 517 },
518 mounted() { 518 mounted() {
519 this.getEvents(); 519 this.getEvents();
520 }, 520 },
521 created() { 521 created() {
522 this.$root.$on("app:search", search => { 522 this.$root.$on("app:search", search => {
523 this.search = search; 523 this.search = search;
524 }); 524 });
525 }, 525 },
526 beforeDestroy() { 526 beforeDestroy() {
527 // dont forget to remove the listener 527 // dont forget to remove the listener
528 this.$root.$off("app:search"); 528 this.$root.$off("app:search");
529 } 529 }
530 }; 530 };
531 </script> 531 </script>
532 <style scoped> 532 <style scoped>
533 #td { 533 #td {
534 max-width: 200px; 534 max-width: 200px;
535 } 535 }
536 .active { 536 .active {
537 background-color: gray; 537 background-color: gray;
538 color: white !important; 538 color: white !important;
539 } 539 }
540 .activebtn { 540 .activebtn {
541 color: black !important; 541 color: black !important;
542 } 542 }
543 </style> 543 </style>
src/pages/Library/eBook.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing E-Books</v-tab> 10 >Existing E-Books</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add E-Books</v-tab> 18 >Add E-Books</v-tab>
19 19
20 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 20 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit E-Books</h3> 36 <h3>Edit E-Books</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:760px;"> 40 <v-card-text style="height:760px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onImagePicked" 54 @change="onImagePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex v-if="files != ''"> 57 <v-flex v-if="files != ''">
58 <img :src="files" height="450" width="500;" /> 58 <img :src="files" height="450" width="500;" />
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <img 61 <img
62 v-if="editedItem.coverPhotoUrl && files == '' " 62 v-if="editedItem.coverPhotoUrl && files == '' "
63 :src="editedItem.coverPhotoUrl" 63 :src="editedItem.coverPhotoUrl"
64 height="450" 64 height="450"
65 width="500" 65 width="500"
66 alt="eBooks" 66 alt="eBooks"
67 class="pa-2" 67 class="pa-2"
68 /> 68 />
69 <!-- <v-layout justify-center> 69 <!-- <v-layout justify-center>
70 <v-flex 70 <v-flex
71 xs3 71 xs3
72 v-for="Image in editedItem.newsImageUrl" 72 v-for="Image in editedItem.newsImageUrl"
73 :key="Image._id" 73 :key="Image._id"
74 v-if="editedItem.newsImageUrl" 74 v-if="editedItem.newsImageUrl"
75 class="profile-image-wrapper" 75 class="profile-image-wrapper"
76 > 76 >
77 77
78 <v-icon 78 <v-icon
79 class="red edit-profile-icon" 79 class="red edit-profile-icon"
80 dark 80 dark
81 @click="deleteImage(Image._id,editedItem._id)" 81 @click="deleteImage(Image._id,editedItem._id)"
82 >close</v-icon> 82 >close</v-icon>
83 </v-flex> 83 </v-flex>
84 <v-flex v-for="(file, index) in files" :key="index"> 84 <v-flex v-for="(file, index) in files" :key="index">
85 <img :src="file" height="160" width="160" class="pa-2" /> 85 <img :src="file" height="160" width="160" class="pa-2" />
86 </v-flex> 86 </v-flex>
87 </v-layout>--> 87 </v-layout>-->
88 <img 88 <img
89 src="/static/icon/user.png" 89 src="/static/icon/user.png"
90 v-if="editedItem.coverPhotoUrl == ''" 90 v-if="editedItem.coverPhotoUrl == ''"
91 height="160" 91 height="160"
92 width="160" 92 width="160"
93 alt="Books" 93 alt="Books"
94 /> 94 />
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout> 97 <v-layout>
98 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
101 <label class="right">Name:</label> 101 <label class="right">Name:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs5 class="ml-3"> 103 <v-flex xs5 class="ml-3">
104 <v-text-field 104 <v-text-field
105 v-model="editedItem.name" 105 v-model="editedItem.name"
106 placeholder="fill your Name" 106 placeholder="fill your Name"
107 type="text" 107 type="text"
108 ></v-text-field> 108 ></v-text-field>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12> 112 <v-flex xs12 sm12>
113 <v-layout> 113 <v-layout>
114 <v-flex xs4 class="pt-4 subheading"> 114 <v-flex xs4 class="pt-4 subheading">
115 <label class="right">Author:</label> 115 <label class="right">Author:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs5 class="ml-3"> 117 <v-flex xs5 class="ml-3">
118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field> 118 <v-text-field placeholder="fill your Author" v-model="editedItem.author"></v-text-field>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 <v-flex xs12 sm12> 122 <v-flex xs12 sm12>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs5 class="ml-3"> 127 <v-flex xs5 class="ml-3">
128 <v-text-field 128 <v-text-field
129 v-model="editedItem.className" 129 v-model="editedItem.className"
130 :items="addClass" 130 :items="addClass"
131 label="Select Class" 131 label="Select Class"
132 item-text="classNum" 132 item-text="classNum"
133 item-value="_id" 133 item-value="_id"
134 ></v-text-field> 134 ></v-text-field>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 <v-flex xs12 sm12> 138 <v-flex xs12 sm12>
139 <v-layout> 139 <v-layout>
140 <v-flex xs4 class="pt-4 subheading"> 140 <v-flex xs4 class="pt-4 subheading">
141 <label class="right">Upload Image:</label> 141 <label class="right">Upload Image:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs5 class="ml-3"> 143 <v-flex xs5 class="ml-3">
144 <v-text-field 144 <v-text-field
145 label="Select Image" 145 label="Select Image"
146 @click="pickImage" 146 @click="pickImage"
147 v-model="imageName" 147 v-model="imageName"
148 append-icon="attach_file" 148 append-icon="attach_file"
149 multiple 149 multiple
150 ></v-text-field> 150 ></v-text-field>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Upload File:</label> 157 <label class="right">Upload File:</label>
158 </v-flex> 158 </v-flex>
159 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
160 <input 160 <input
161 type="file" 161 type="file"
162 style="display: none" 162 style="display: none"
163 ref="file" 163 ref="file"
164 @change="onFilePicked" 164 @change="onFilePicked"
165 /> 165 />
166 <v-text-field 166 <v-text-field
167 label="Select File" 167 label="Select File"
168 @click="pickFile" 168 @click="pickFile"
169 v-model="fileName" 169 v-model="fileName"
170 append-icon="attach_file" 170 append-icon="attach_file"
171 multiple 171 multiple
172 ></v-text-field> 172 ></v-text-field>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12> 176 <v-flex xs12 sm12>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Private:</label> 179 <label class="right">Private:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs5 class="ml-3"> 181 <v-flex xs5 class="ml-3">
182 <v-checkbox v-model="editedItem.private"></v-checkbox> 182 <v-checkbox v-model="editedItem.private"></v-checkbox>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 <v-layout> 187 <v-layout>
188 <v-flex xs12 sm8 offset-sm2> 188 <v-flex xs12 sm8 offset-sm2>
189 <v-card-actions> 189 <v-card-actions>
190 <v-btn round dark @click.native="close">Cancel</v-btn> 190 <v-btn round dark @click.native="close">Cancel</v-btn>
191 <v-spacer></v-spacer> 191 <v-spacer></v-spacer>
192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn> 192 <v-btn round dark @click="save" :loading="loadingUpadte">Save</v-btn>
193 </v-card-actions> 193 </v-card-actions>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-container> 196 </v-container>
197 </v-form> 197 </v-form>
198 </v-card-text> 198 </v-card-text>
199 </v-card> 199 </v-card>
200 </v-dialog> 200 </v-dialog>
201 201
202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 202 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
203 203
204 <v-dialog v-model="dialog1" max-width="800px" scrollable> 204 <v-dialog v-model="dialog1" max-width="800px" scrollable>
205 <v-card style="height: 700px;"> 205 <v-card style="height: 700px;">
206 <v-toolbar color="grey lighten-2" flat> 206 <v-toolbar color="grey lighten-2" flat>
207 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
208 <v-toolbar-title> 208 <v-toolbar-title>
209 <h3>E-Books</h3> 209 <h3>E-Books</h3>
210 </v-toolbar-title> 210 </v-toolbar-title>
211 <v-spacer></v-spacer> 211 <v-spacer></v-spacer>
212 <v-icon @click="close1">close</v-icon> 212 <v-icon @click="close1">close</v-icon>
213 </v-toolbar> 213 </v-toolbar>
214 <v-card-text> 214 <v-card-text>
215 <v-container> 215 <v-container>
216 <v-layout wrap> 216 <v-layout wrap>
217 <v-flex sm12 xs12> 217 <v-flex sm12 xs12>
218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe> 218 <iframe :src="editedItem.fileUrl" height="600" width="100%"></iframe>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 </v-container> 221 </v-container>
222 </v-card-text> 222 </v-card-text>
223 </v-card> 223 </v-card>
224 </v-dialog> 224 </v-dialog>
225 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 225 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
226 <v-data-table 226 <v-data-table
227 :headers="headers" 227 :headers="headers"
228 :items="eBookData" 228 :items="eBookData"
229 :pagination.sync="pagination" 229 :pagination.sync="pagination"
230 :search="search" 230 :search="search"
231 > 231 >
232 <template slot="items" slot-scope="props"> 232 <template slot="items" slot-scope="props">
233 <td class="text-xs-center">{{ props.index + 1}}</td> 233 <td class="text-xs-center">{{ props.index + 1}}</td>
234 <td id="td" class="text-xs-center"> 234 <td id="td" class="text-xs-center">
235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" /> 235 <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
236 </td> 236 </td>
237 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 237 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
238 <td id="td" class="text-xs-center">{{ props.item.author}}</td> 238 <td id="td" class="text-xs-center">{{ props.item.author}}</td>
239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td> 239 <td id="td" class="text-xs-center">{{ props.item.classId.classNum}}</td>
240 240
241 <td class="text-xs-center"> 241 <td class="text-xs-center">
242 <span> 242 <span>
243 <v-tooltip top> 243 <v-tooltip top>
244 <img 244 <img
245 slot="activator" 245 slot="activator"
246 style="cursor:pointer; width:25px; height:18px; " 246 style="cursor:pointer; width:25px; height:18px; "
247 class="mr5" 247 class="mr5"
248 @click="profile(props.item)" 248 @click="profile(props.item)"
249 src="/static/icon/eye1.png" 249 src="/static/icon/eye1.png"
250 /> 250 />
251 <span>View</span> 251 <span>View</span>
252 </v-tooltip> 252 </v-tooltip>
253 <v-tooltip top> 253 <v-tooltip top>
254 <img 254 <img
255 slot="activator" 255 slot="activator"
256 style="cursor:pointer; width:20px; height:18px; " 256 style="cursor:pointer; width:20px; height:18px; "
257 class="mr5" 257 class="mr5"
258 @click="editItem(props.item)" 258 @click="editItem(props.item)"
259 src="/static/icon/edit1.png" 259 src="/static/icon/edit1.png"
260 /> 260 />
261 <span>Edit</span> 261 <span>Edit</span>
262 </v-tooltip> 262 </v-tooltip>
263 <v-tooltip top> 263 <v-tooltip top>
264 <img 264 <img
265 slot="activator" 265 slot="activator"
266 style="cursor:pointer; width:20px; height:20px; " 266 style="cursor:pointer; width:20px; height:20px; "
267 class="mr5" 267 class="mr5"
268 @click="deleteItem(props.item)" 268 @click="deleteItem(props.item)"
269 src="/static/icon/delete1.png" 269 src="/static/icon/delete1.png"
270 /> 270 />
271 <span>Delete</span> 271 <span>Delete</span>
272 </v-tooltip> 272 </v-tooltip>
273 </span> 273 </span>
274 </td> 274 </td>
275 </template> 275 </template>
276 <v-alert 276 <v-alert
277 slot="no-results" 277 slot="no-results"
278 :value="true" 278 :value="true"
279 color="error" 279 color="error"
280 icon="warning" 280 icon="warning"
281 >Your search for "{{ search }}" found no results.</v-alert> 281 >Your search for "{{ search }}" found no results.</v-alert>
282 </v-data-table> 282 </v-data-table>
283 </v-tab-item> 283 </v-tab-item>
284 284
285 <!-- ****** ADD MULTIPLE E-BOOK ****** --> 285 <!-- ****** ADD MULTIPLE E-BOOK ****** -->
286 286
287 <v-tab-item> 287 <v-tab-item>
288 <v-container> 288 <v-container>
289 <v-snackbar 289 <v-snackbar
290 :timeout="timeout" 290 :timeout="timeout"
291 :top="y === 'top'" 291 :top="y === 'top'"
292 :right="x === 'right'" 292 :right="x === 'right'"
293 :vertical="mode === 'vertical'" 293 :vertical="mode === 'vertical'"
294 v-model="snackbar" 294 v-model="snackbar"
295 color="success" 295 color="success"
296 >{{ text }}</v-snackbar> 296 >{{ text }}</v-snackbar>
297 <v-flex xs12 sm12 class="my-4"> 297 <v-flex xs12 sm12 class="my-4">
298 <v-card flat> 298 <v-card flat>
299 <v-form ref="form" v-model="valid" lazy-validation> 299 <v-form ref="form" v-model="valid" lazy-validation>
300 <v-container fluid> 300 <v-container fluid>
301 <v-layout> 301 <v-layout>
302 <v-flex 302 <v-flex
303 xs12 303 xs12
304 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 304 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
305 > 305 >
306 <input 306 <input
307 type="file" 307 type="file"
308 style="display: none" 308 style="display: none"
309 ref="image" 309 ref="image"
310 accept="image/*" 310 accept="image/*"
311 @change="onImagePicked" 311 @change="onImagePicked"
312 /> 312 />
313 <v-layout justify-center> 313 <v-layout justify-center>
314 <v-flex v-if="files != ''"> 314 <v-flex v-if="files != ''">
315 <img :src="files" height="240" width="260px;" /> 315 <img :src="files" height="240" width="260px;" />
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <img 318 <img
319 src="/static/icon/user.png" 319 src="/static/icon/user.png"
320 v-if="files ==''" 320 v-if="files ==''"
321 height="140" 321 height="140"
322 width="180px;" 322 width="180px;"
323 /> 323 />
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 <v-flex xs12> 326 <v-flex xs12>
327 <v-layout> 327 <v-layout>
328 <v-flex xs4 class="pt-4 subheading"> 328 <v-flex xs4 class="pt-4 subheading">
329 <label class="right">Name:</label> 329 <label class="right">Name:</label>
330 </v-flex> 330 </v-flex>
331 <v-flex xs4 class="ml-3"> 331 <v-flex xs4 class="ml-3">
332 <v-text-field 332 <v-text-field
333 v-model="addEBooks.name" 333 v-model="addEBooks.name"
334 placeholder="fill your Title" 334 placeholder="fill your Title"
335 name="name" 335 name="name"
336 type="text" 336 type="text"
337 :rules="titleRules" 337 :rules="titleRules"
338 required 338 required
339 ></v-text-field> 339 ></v-text-field>
340 </v-flex> 340 </v-flex>
341 </v-layout> 341 </v-layout>
342 </v-flex> 342 </v-flex>
343 <v-flex xs12> 343 <v-flex xs12>
344 <v-layout> 344 <v-layout>
345 <v-flex xs4 class="pt-4 subheading"> 345 <v-flex xs4 class="pt-4 subheading">
346 <label class="right">Author:</label> 346 <label class="right">Author:</label>
347 </v-flex> 347 </v-flex>
348 <v-flex xs4 class="ml-3"> 348 <v-flex xs4 class="ml-3">
349 <v-text-field 349 <v-text-field
350 v-model="addEBooks.author" 350 v-model="addEBooks.author"
351 placeholder="fill your Author Name" 351 placeholder="fill your Author Name"
352 name="name" 352 name="name"
353 type="text" 353 type="text"
354 :rules="titleRules" 354 :rules="titleRules"
355 required 355 required
356 ></v-text-field> 356 ></v-text-field>
357 </v-flex> 357 </v-flex>
358 </v-layout> 358 </v-layout>
359 </v-flex> 359 </v-flex>
360 <v-flex xs12> 360 <v-flex xs12>
361 <v-layout> 361 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Class:</label> 363 <label class="right">Class:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs4 class="ml-3"> 365 <v-flex xs4 class="ml-3">
366 <v-select 366 <v-select
367 v-model="addEBooks.classId" 367 v-model="addEBooks.classId"
368 :items="addClass" 368 :items="addClass"
369 label="Select Class" 369 label="Select Class"
370 item-text="classNum" 370 item-text="classNum"
371 item-value="_id" 371 item-value="_id"
372 :rules="titleRules" 372 :rules="titleRules"
373 required 373 required
374 ></v-select> 374 ></v-select>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 </v-flex> 377 </v-flex>
378 <v-flex xs12> 378 <v-flex xs12>
379 <v-layout> 379 <v-layout>
380 <v-flex xs4 class="pt-4 subheading"> 380 <v-flex xs4 class="pt-4 subheading">
381 <label class="right">Upload Image:</label> 381 <label class="right">Upload Image:</label>
382 </v-flex> 382 </v-flex>
383 <v-flex xs4 class="ml-3"> 383 <v-flex xs4 class="ml-3">
384 <v-text-field 384 <v-text-field
385 label="Select Image" 385 label="Select Image"
386 @click="pickImage" 386 @click="pickImage"
387 v-model="imageName" 387 v-model="imageName"
388 append-icon="attach_file" 388 append-icon="attach_file"
389 multiple 389 multiple
390 ></v-text-field> 390 ></v-text-field>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 </v-flex> 393 </v-flex>
394 <v-flex xs12> 394 <v-flex xs12>
395 <v-layout> 395 <v-layout>
396 <v-flex xs4 class="pt-4 subheading"> 396 <v-flex xs4 class="pt-4 subheading">
397 <label class="right">Upload File:</label> 397 <label class="right">Upload File:</label>
398 </v-flex> 398 </v-flex>
399 <v-flex xs4 class="ml-3"> 399 <v-flex xs4 class="ml-3">
400 <input type="file" style="display: none" ref="file" @change="onFilePicked" /> 400 <input type="file" style="display: none" ref="file" @change="onFilePicked" />
401 <v-text-field 401 <v-text-field
402 label="Select File" 402 label="Select File"
403 @click="pickFile" 403 @click="pickFile"
404 v-model="fileName" 404 v-model="fileName"
405 append-icon="attach_file" 405 append-icon="attach_file"
406 multiple 406 multiple
407 ></v-text-field> 407 ></v-text-field>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 </v-flex> 410 </v-flex>
411 <v-flex xs12> 411 <v-flex xs12>
412 <v-layout> 412 <v-layout>
413 <v-flex xs4 class="pt-3 subheading"> 413 <v-flex xs4 class="pt-3 subheading">
414 <label class="right">Private:</label> 414 <label class="right">Private:</label>
415 </v-flex> 415 </v-flex>
416 <v-flex xs4 class="ml-3"> 416 <v-flex xs4 class="ml-3">
417 <v-checkbox v-model="addEBooks.private"></v-checkbox> 417 <v-checkbox v-model="addEBooks.private"></v-checkbox>
418 </v-flex> 418 </v-flex>
419 </v-layout> 419 </v-layout>
420 </v-flex> 420 </v-flex>
421 <v-layout> 421 <v-layout>
422 <v-flex xs12 sm7 offset-sm2> 422 <v-flex xs12 sm7 offset-sm2>
423 <v-card-actions> 423 <v-card-actions>
424 <v-btn @click="clear" round dark>clear</v-btn> 424 <v-btn @click="clear" round dark>clear</v-btn>
425 <v-spacer></v-spacer> 425 <v-spacer></v-spacer>
426 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 426 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
427 </v-card-actions> 427 </v-card-actions>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 </v-container> 430 </v-container>
431 </v-form> 431 </v-form>
432 </v-card> 432 </v-card>
433 </v-flex> 433 </v-flex>
434 </v-container> 434 </v-container>
435 </v-tab-item> 435 </v-tab-item>
436 </v-tabs> 436 </v-tabs>
437 <div class="loader" v-if="showLoader"> 437 <div class="loader" v-if="showLoader">
438 <v-progress-circular indeterminate color="white"></v-progress-circular> 438 <v-progress-circular indeterminate color="white"></v-progress-circular>
439 </div> 439 </div>
440 </v-app> 440 </v-app>
441 </template> 441 </template>
442 442
443 <script> 443 <script>
444 import http from "@/Services/http.js"; 444 import http from "@/Services/http.js";
445 import Util from "@/util"; 445 import Util from "@/util";
446 446
447 export default { 447 export default {
448 data: () => ({ 448 data: () => ({
449 snackbar: false, 449 snackbar: false,
450 y: "top", 450 y: "top",
451 x: "right", 451 x: "right",
452 mode: "", 452 mode: "",
453 timeout: 3000, 453 timeout: 3000,
454 text: "", 454 text: "",
455 loading: false, 455 loading: false,
456 loadingUpadte: false, 456 loadingUpadte: false,
457 date: null, 457 date: null,
458 search: "", 458 search: "",
459 showLoader: false, 459 showLoader: false,
460 dialog: false, 460 dialog: false,
461 dialog1: false, 461 dialog1: false,
462 valid: true, 462 valid: true,
463 isActive: true, 463 isActive: true,
464 newActive: false, 464 newActive: false,
465 addClass: [], 465 addClass: [],
466 addSection: [], 466 addSection: [],
467 AddUsercredentials: {}, 467 AddUsercredentials: {},
468 pagination: { 468 pagination: {
469 rowsPerPage: 15 469 rowsPerPage: 15
470 }, 470 },
471 imageName: "", 471 imageName: "",
472 fileName: "", 472 fileName: "",
473 imageUrl: "", 473 imageUrl: "",
474 imageFile: "", 474 imageFile: "",
475 image: [], 475 image: [],
476 upload: "", 476 upload: "",
477 files: "", 477 files: "",
478 anyFile: "", 478 anyFile: "",
479 titleRules: [v => !!v || " Tilte is required"], 479 titleRules: [v => !!v || " Tilte is required"],
480 descriptionRules: [v => !!v || " Description is required"], 480 descriptionRules: [v => !!v || " Description is required"],
481 headers: [ 481 headers: [
482 { 482 {
483 align: "justify-center", 483 align: "justify-center",
484 text: "No", 484 text: "No",
485 sortable: false, 485 sortable: false,
486 value: "No" 486 value: "No"
487 }, 487 },
488 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, 488 { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
489 { text: "Name", vaue: "name", sortable: false, align: "center" }, 489 { text: "Name", vaue: "name", sortable: false, align: "center" },
490 { text: "Author", value: "author", sortable: false, align: "center" }, 490 { text: "Author", value: "author", sortable: false, align: "center" },
491 { 491 {
492 text: "Class", 492 text: "Class",
493 value: "classId", 493 value: "classId",
494 sortable: false, 494 sortable: false,
495 align: "center" 495 align: "center"
496 }, 496 },
497 { text: "Action", value: "", sortable: false, align: "center" } 497 { text: "Action", value: "", sortable: false, align: "center" }
498 ], 498 ],
499 eBookData: [], 499 eBookData: [],
500 editedIndex: -1, 500 editedIndex: -1,
501 addEBooks: { 501 addEBooks: {
502 private: false 502 private: false
503 }, 503 },
504 editedItem: {}, 504 editedItem: {},
505 token: "" 505 token: ""
506 }), 506 }),
507 methods: { 507 methods: {
508 pickImage() { 508 pickImage() {
509 this.$refs.image.click(); 509 this.$refs.image.click();
510 }, 510 },
511 pickFile() { 511 pickFile() {
512 this.$refs.file.click(); 512 this.$refs.file.click();
513 }, 513 },
514 onImagePicked(e) { 514 onImagePicked(e) {
515 // console.log(e) 515 // console.log(e)
516 const files = e.target.files; 516 const files = e.target.files;
517 /** fetch Image Name **/ 517 /** fetch Image Name **/
518 if (files[0] !== undefined) { 518 if (files[0] !== undefined) {
519 this.imageName = files[0].name; 519 this.imageName = files[0].name;
520 if (this.imageName.lastIndexOf(".") <= 0) { 520 if (this.imageName.lastIndexOf(".") <= 0) {
521 return; 521 return;
522 } 522 }
523 /** Select many image and showing many image add to news card **/ 523 /** Select many image and showing many image add to news card **/
524 const fr = new FileReader(); 524 const fr = new FileReader();
525 fr.readAsDataURL(files[0]); 525 fr.readAsDataURL(files[0]);
526 fr.addEventListener("load", () => { 526 fr.addEventListener("load", () => {
527 this.files = fr.result; 527 this.files = fr.result;
528 }); 528 });
529 } else { 529 } else {
530 this.imageName = ""; 530 this.imageName = "";
531 this.imageFile = ""; 531 this.imageFile = "";
532 this.files = ""; 532 this.files = "";
533 this.imageUrl = ""; 533 this.imageUrl = "";
534 } 534 }
535 }, 535 },
536 getEBooksList() { 536 getEBooksList() {
537 this.showLoader = true; 537 this.showLoader = true;
538 http() 538 http()
539 .get("/getEBooksList", { 539 .get("/getEBooksList", {
540 headers: { Authorization: "Bearer " + this.token } 540 headers: { Authorization: "Bearer " + this.token }
541 }) 541 })
542 .then(response => { 542 .then(response => {
543 this.eBookData = response.data.data; 543 this.eBookData = response.data.data;
544 this.showLoader = false; 544 this.showLoader = false;
545 }) 545 })
546 .catch(err => { 546 .catch(error => {
547 // console.log("err====>", err); 547 // console.log("err====>", err);
548 this.showLoader = false; 548 this.showLoader = false;
549 if (error.response.status === 401) { 549 if (error.response.status === 401) {
550 this.$router.replace({ path: "/" }); 550 this.$router.replace({ path: "/" });
551 this.$store.dispatch("setToken", null); 551 this.$store.dispatch("setToken", null);
552 this.$store.dispatch("Id", null); 552 this.$store.dispatch("Id", null);
553 } 553 }
554 }); 554 });
555 }, 555 },
556 onFilePicked(e) { 556 onFilePicked(e) {
557 // console.log(e) 557 // console.log(e)
558 const files = e.target.files; 558 const files = e.target.files;
559 /** fetch Image Name **/ 559 /** fetch Image Name **/
560 if (files[0] !== undefined) { 560 if (files[0] !== undefined) {
561 this.fileName = files[0].name; 561 this.fileName = files[0].name;
562 if (this.fileName.lastIndexOf(".") <= 0) { 562 if (this.fileName.lastIndexOf(".") <= 0) {
563 return; 563 return;
564 } 564 }
565 const fr = new FileReader(); 565 const fr = new FileReader();
566 fr.readAsDataURL(files[0]); 566 fr.readAsDataURL(files[0]);
567 fr.addEventListener("load", () => { 567 fr.addEventListener("load", () => {
568 this.anyFile = fr.result; 568 this.anyFile = fr.result;
569 // console.log(" this.anyFile Url", this.anyFile ) 569 // console.log(" this.anyFile Url", this.anyFile )
570 }); 570 });
571 } else { 571 } else {
572 this.anyFile = ""; 572 this.anyFile = "";
573 this.fileName = ""; 573 this.fileName = "";
574 } 574 }
575 }, 575 },
576 editItem(item) { 576 editItem(item) {
577 this.files = []; 577 this.files = [];
578 this.editedIndex = this.eBookData.indexOf(item); 578 this.editedIndex = this.eBookData.indexOf(item);
579 this.editedItem = Object.assign({}, item); 579 this.editedItem = Object.assign({}, item);
580 this.editedItem.className = item.classId.classNum; 580 this.editedItem.className = item.classId.classNum;
581 this.dialog = true; 581 this.dialog = true;
582 }, 582 },
583 profile(item) { 583 profile(item) {
584 this.editedIndex = this.eBookData.indexOf(item); 584 this.editedIndex = this.eBookData.indexOf(item);
585 this.editedItem = Object.assign({}, item); 585 this.editedItem = Object.assign({}, item);
586 this.dialog1 = true; 586 this.dialog1 = true;
587 }, 587 },
588 deleteItem(item) { 588 deleteItem(item) {
589 let deleteEBooks = { 589 let deleteEBooks = {
590 ebookId: item._id 590 ebookId: item._id
591 }; 591 };
592 http() 592 http()
593 .delete( 593 .delete(
594 "/deleteEBook", 594 "/deleteEBook",
595 confirm("Are you sure you want to delete this?") && { 595 confirm("Are you sure you want to delete this?") && {
596 params: deleteEBooks 596 params: deleteEBooks
597 } 597 }
598 ) 598 )
599 .then(response => { 599 .then(response => {
600 this.snackbar = true; 600 this.snackbar = true;
601 this.text = "Successfully delete Existing News"; 601 this.text = "Successfully delete Existing News";
602 this.getEBooksList(); 602 this.getEBooksList();
603 }) 603 })
604 .catch(error => { 604 .catch(error => {
605 this.snackbar = true; 605 this.snackbar = true;
606 this.text = error.response.data.message; 606 this.text = error.response.data.message;
607 }); 607 });
608 }, 608 },
609 activeTab(type) { 609 activeTab(type) {
610 switch (type) { 610 switch (type) {
611 case "existing": 611 case "existing":
612 this.newActive = false; 612 this.newActive = false;
613 this.isActive = true; 613 this.isActive = true;
614 break; 614 break;
615 615
616 default: 616 default:
617 this.newActive = true; 617 this.newActive = true;
618 this.isActive = false; 618 this.isActive = false;
619 break; 619 break;
620 } 620 }
621 }, 621 },
622 close() { 622 close() {
623 this.dialog = false; 623 this.dialog = false;
624 setTimeout(() => { 624 setTimeout(() => {
625 this.editedItem = Object.assign({}, this.defaultItem); 625 this.editedItem = Object.assign({}, this.defaultItem);
626 this.editedIndex = -1; 626 this.editedIndex = -1;
627 }, 300); 627 }, 300);
628 }, 628 },
629 close1() { 629 close1() {
630 this.dialog1 = false; 630 this.dialog1 = false;
631 }, 631 },
632 submit() { 632 submit() {
633 this.loading = true; 633 this.loading = true;
634 if (this.$refs.form.validate()) { 634 if (this.$refs.form.validate()) {
635 if (this.files) { 635 if (this.files) {
636 const [baseUrl, imageUrl] = this.files.split(/,/); 636 const [baseUrl, imageUrl] = this.files.split(/,/);
637 this.addEBooks.uploadCover = imageUrl; 637 this.addEBooks.uploadCover = imageUrl;
638 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 638 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
639 } 639 }
640 if (this.anyFile) { 640 if (this.anyFile) {
641 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 641 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
642 this.addEBooks.uploadFile = fileUrl; 642 this.addEBooks.uploadFile = fileUrl;
643 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 643 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
644 } 644 }
645 http() 645 http()
646 .post("/createEBook", this.addEBooks) 646 .post("/createEBook", this.addEBooks)
647 .then(response => { 647 .then(response => {
648 this.snackbar = true; 648 this.snackbar = true;
649 this.text = "New E-Book added successfully"; 649 this.text = "New E-Book added successfully";
650 this.addEBooks.uploadCover = ""; 650 this.addEBooks.uploadCover = "";
651 this.addEBooks.uploadFile = ""; 651 this.addEBooks.uploadFile = "";
652 this.files = ""; 652 this.files = "";
653 this.getEBooksList(); 653 this.getEBooksList();
654 this.loading = false; 654 this.loading = false;
655 this.clear(); 655 this.clear();
656 }) 656 })
657 .catch(error => { 657 .catch(error => {
658 this.snackbar = true; 658 this.snackbar = true;
659 this.text = error.response.data.message; 659 this.text = error.response.data.message;
660 }); 660 });
661 } 661 }
662 }, 662 },
663 clear() { 663 clear() {
664 this.$refs.form.reset(); 664 this.$refs.form.reset();
665 this.addEBooks.uploadCover = ""; 665 this.addEBooks.uploadCover = "";
666 this.files = ""; 666 this.files = "";
667 }, 667 },
668 save() { 668 save() {
669 this.loadingUpadte = true; 669 this.loadingUpadte = true;
670 if (this.files.length > 0) { 670 if (this.files.length > 0) {
671 const [baseUrl, imageUrl] = this.files.split(/,/); 671 const [baseUrl, imageUrl] = this.files.split(/,/);
672 this.editedItem.uploadCover = imageUrl; 672 this.editedItem.uploadCover = imageUrl;
673 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); 673 // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
674 } 674 }
675 if (this.anyFile) { 675 if (this.anyFile) {
676 const [baseUrl, fileUrl] = this.anyFile.split(/,/); 676 const [baseUrl, fileUrl] = this.anyFile.split(/,/);
677 this.editedItem.uploadFile = fileUrl; 677 this.editedItem.uploadFile = fileUrl;
678 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); 678 // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
679 } 679 }
680 this.editedItem.ebookId = this.editedItem._id; 680 this.editedItem.ebookId = this.editedItem._id;
681 http() 681 http()
682 .put("/updateEBook", this.editedItem) 682 .put("/updateEBook", this.editedItem)
683 .then(response => { 683 .then(response => {
684 this.loadingUpadte = false; 684 this.loadingUpadte = false;
685 this.snackbar = true; 685 this.snackbar = true;
686 this.text = "Successfully Edit Existing E-Book"; 686 this.text = "Successfully Edit Existing E-Book";
687 this.getEBooksList(); 687 this.getEBooksList();
688 this.editedItem.uploadFile = ""; 688 this.editedItem.uploadFile = "";
689 this.editedItem.uploadCover = ""; 689 this.editedItem.uploadCover = "";
690 this.anyFile = ""; 690 this.anyFile = "";
691 this.files = ""; 691 this.files = "";
692 this.close(); 692 this.close();
693 }) 693 })
694 .catch(error => { 694 .catch(error => {
695 this.loadingUpadte = false; 695 this.loadingUpadte = false;
696 this.snackbar = true; 696 this.snackbar = true;
697 this.text = error.response.data.message; 697 this.text = error.response.data.message;
698 // console.log(error); 698 // console.log(error);
699 }); 699 });
700 }, 700 },
701 getAllClass() { 701 getAllClass() {
702 http() 702 http()
703 .get("/getClassesList", { 703 .get("/getClassesList", {
704 headers: { Authorization: "Bearer " + this.token } 704 headers: { Authorization: "Bearer " + this.token }
705 }) 705 })
706 .then(response => { 706 .then(response => {
707 this.addClass = response.data.data; 707 this.addClass = response.data.data;
708 }) 708 })
709 .catch(err => { 709 .catch(err => {
710 // console.log("err====>", err); 710 // console.log("err====>", err);
711 // this.$router.replace({ path: "/" }); 711 // this.$router.replace({ path: "/" });
712 }); 712 });
713 } 713 }
714 }, 714 },
715 mounted() { 715 mounted() {
716 this.token = this.$store.state.token; 716 this.token = this.$store.state.token;
717 this.getEBooksList(); 717 this.getEBooksList();
718 this.getAllClass(); 718 this.getAllClass();
719 // this.getBookData(); 719 // this.getBookData();
720 // this.editItem; 720 // this.editItem;
721 }, 721 },
722 created() { 722 created() {
723 this.$root.$on("app:search", search => { 723 this.$root.$on("app:search", search => {
724 this.search = search; 724 this.search = search;
725 }); 725 });
726 }, 726 },
727 beforeDestroy() { 727 beforeDestroy() {
728 // dont forget to remove the listener 728 // dont forget to remove the listener
729 this.$root.$off("app:search"); 729 this.$root.$off("app:search");
730 } 730 }
731 }; 731 };
732 </script> 732 </script>
733 <style scoped> 733 <style scoped>
734 .active { 734 .active {
735 background-color: gray; 735 background-color: gray;
736 color: white !important; 736 color: white !important;
737 } 737 }
738 .activebtn { 738 .activebtn {
739 color: black !important; 739 color: black !important;
740 } 740 }
741 </style> 741 </style>
src/pages/Library/issue.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Issue</v-tab> 10 >Existing Issue</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add Issue a book</v-tab> 18 >Add Issue a book</v-tab>
19 19
20 <!-- ****** EDIT ISSUE A BOOK ****** --> 20 <!-- ****** EDIT ISSUE A BOOK ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Issue</h3> 36 <h3>Edit Issue</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:600px;"> 40 <v-card-text style="height:600px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex xs12 sm12> 44 <v-flex xs12 sm12>
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 class="pt-4 subheading"> 46 <v-flex xs4 class="pt-4 subheading">
47 <label class="right">Library Id:</label> 47 <label class="right">Library Id:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs5 class="ml-3"> 49 <v-flex xs5 class="ml-3">
50 <v-text-field 50 <v-text-field
51 v-model="editedItem.libraryId" 51 v-model="editedItem.libraryId"
52 placeholder="fill your Library Id" 52 placeholder="fill your Library Id"
53 name="name" 53 name="name"
54 type="text" 54 type="text"
55 ></v-text-field> 55 ></v-text-field>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12 sm12> 59 <v-flex xs12 sm12>
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 class="pt-4 subheading"> 61 <v-flex xs4 class="pt-4 subheading">
62 <label class="right">Book:</label> 62 <label class="right">Book:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs5 class="ml-3"> 64 <v-flex xs5 class="ml-3">
65 <v-text-field 65 <v-text-field
66 v-model="editedItem.name" 66 v-model="editedItem.name"
67 placeholder="fill your Book name" 67 placeholder="fill your Book name"
68 name="name" 68 name="name"
69 type="text" 69 type="text"
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm12> 74 <v-flex xs12 sm12>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right">Author:</label> 77 <label class="right">Author:</label>
78 </v-flex> 78 </v-flex>
79 <v-flex xs5 class="ml-3"> 79 <v-flex xs5 class="ml-3">
80 <v-text-field 80 <v-text-field
81 placeholder="fill your Author Name" 81 placeholder="fill your Author Name"
82 v-model="editedItem.author" 82 v-model="editedItem.author"
83 type="text" 83 type="text"
84 ></v-text-field> 84 ></v-text-field>
85 </v-flex> 85 </v-flex>
86 </v-layout> 86 </v-layout>
87 </v-flex> 87 </v-flex>
88 <v-flex xs12 sm12> 88 <v-flex xs12 sm12>
89 <v-layout> 89 <v-layout>
90 <v-flex xs4 class="pt-4 subheading"> 90 <v-flex xs4 class="pt-4 subheading">
91 <label class="right">Subject Code:</label> 91 <label class="right">Subject Code:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs5 class="ml-3"> 93 <v-flex xs5 class="ml-3">
94 <v-text-field 94 <v-text-field
95 placeholder="fill your Subject Codes" 95 placeholder="fill your Subject Codes"
96 v-model="editedItem.subjectCode" 96 v-model="editedItem.subjectCode"
97 type="text" 97 type="text"
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 <v-flex xs12 sm12> 102 <v-flex xs12 sm12>
103 <v-layout> 103 <v-layout>
104 <v-flex xs4 class="pt-4 subheading"> 104 <v-flex xs4 class="pt-4 subheading">
105 <label class="right">Serial Number:</label> 105 <label class="right">Serial Number:</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs5 class="ml-3"> 107 <v-flex xs5 class="ml-3">
108 <v-text-field 108 <v-text-field
109 placeholder="fill your Serial Number" 109 placeholder="fill your Serial Number"
110 v-model="editedItem.serialNumber" 110 v-model="editedItem.serialNumber"
111 type="text" 111 type="text"
112 ></v-text-field> 112 ></v-text-field>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm12> 116 <v-flex xs12 sm12>
117 <v-layout> 117 <v-layout>
118 <v-flex xs4 class="pt-4 subheading"> 118 <v-flex xs4 class="pt-4 subheading">
119 <label class="right">due Date:</label> 119 <label class="right">due Date:</label>
120 </v-flex> 120 </v-flex>
121 <v-flex xs5 class="ml-3"> 121 <v-flex xs5 class="ml-3">
122 <v-menu 122 <v-menu
123 ref="menu1" 123 ref="menu1"
124 :close-on-content-click="false" 124 :close-on-content-click="false"
125 v-model="menu1" 125 v-model="menu1"
126 :nudge-right="40" 126 :nudge-right="40"
127 :return-value.sync="menu1" 127 :return-value.sync="menu1"
128 lazy 128 lazy
129 transition="scale-transition" 129 transition="scale-transition"
130 offset-y 130 offset-y
131 full-width 131 full-width
132 min-width="290px" 132 min-width="290px"
133 > 133 >
134 <v-text-field 134 <v-text-field
135 slot="activator" 135 slot="activator"
136 v-model="editedItem.dueDate" 136 v-model="editedItem.dueDate"
137 label="Select Due Date" 137 label="Select Due Date"
138 append-icon="event" 138 append-icon="event"
139 readonly 139 readonly
140 ></v-text-field> 140 ></v-text-field>
141 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> 141 <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker>
142 </v-menu> 142 </v-menu>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
147 <v-layout> 147 <v-layout>
148 <v-flex xs4 class="pt-4 subheading"> 148 <v-flex xs4 class="pt-4 subheading">
149 <label class="right">Note:</label> 149 <label class="right">Note:</label>
150 </v-flex> 150 </v-flex>
151 <v-flex xs5 class="ml-3"> 151 <v-flex xs5 class="ml-3">
152 <v-text-field 152 <v-text-field
153 placeholder="fill your Serial Number" 153 placeholder="fill your Serial Number"
154 v-model="editedItem.note" 154 v-model="editedItem.note"
155 type="text" 155 type="text"
156 ></v-text-field> 156 ></v-text-field>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-flex> 159 </v-flex>
160 </v-layout> 160 </v-layout>
161 <v-layout> 161 <v-layout>
162 <v-flex xs12 sm8 offset-sm2> 162 <v-flex xs12 sm8 offset-sm2>
163 <v-card-actions> 163 <v-card-actions>
164 <v-btn round dark @click.native="close">Cancel</v-btn> 164 <v-btn round dark @click.native="close">Cancel</v-btn>
165 <v-spacer></v-spacer> 165 <v-spacer></v-spacer>
166 <v-btn round dark @click="save">Save</v-btn> 166 <v-btn round dark @click="save">Save</v-btn>
167 </v-card-actions> 167 </v-card-actions>
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-text> 172 </v-card-text>
173 </v-card> 173 </v-card>
174 </v-dialog> 174 </v-dialog>
175 175
176 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> 176 <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** -->
177 177
178 <v-dialog v-model="dialog1" max-width="800px"> 178 <v-dialog v-model="dialog1" max-width="800px">
179 <v-card> 179 <v-card>
180 <v-toolbar color="grey lighten-2" flat> 180 <v-toolbar color="grey lighten-2" flat>
181 <v-spacer></v-spacer> 181 <v-spacer></v-spacer>
182 <v-toolbar-title> 182 <v-toolbar-title>
183 <h3>Issue a Book</h3> 183 <h3>Issue a Book</h3>
184 </v-toolbar-title> 184 </v-toolbar-title>
185 <v-spacer></v-spacer> 185 <v-spacer></v-spacer>
186 <v-icon @click="close1">close</v-icon> 186 <v-icon @click="close1">close</v-icon>
187 </v-toolbar> 187 </v-toolbar>
188 <v-card-text> 188 <v-card-text>
189 <v-container grid-list-md> 189 <v-container grid-list-md>
190 <v-layout wrap> 190 <v-layout wrap>
191 <v-flex> 191 <v-flex>
192 <v-layout> 192 <v-layout>
193 <v-flex xs5 sm6> 193 <v-flex xs5 sm6>
194 <h5 class="right my-1"> 194 <h5 class="right my-1">
195 <b>Book:</b> 195 <b>Book:</b>
196 </h5> 196 </h5>
197 </v-flex> 197 </v-flex>
198 <v-flex sm6 xs8> 198 <v-flex sm6 xs8>
199 <h5 class="my-1">{{ editedItem.name }}</h5> 199 <h5 class="my-1">{{ editedItem.name }}</h5>
200 </v-flex> 200 </v-flex>
201 </v-layout> 201 </v-layout>
202 <v-layout> 202 <v-layout>
203 <v-flex xs5 sm6> 203 <v-flex xs5 sm6>
204 <h5 class="right my-1"> 204 <h5 class="right my-1">
205 <b>Serial Number:</b> 205 <b>Serial Number:</b>
206 </h5> 206 </h5>
207 </v-flex> 207 </v-flex>
208 <v-flex sm6 xs8> 208 <v-flex sm6 xs8>
209 <h5 class="my-1">{{ editedItem.serialNumber }}</h5> 209 <h5 class="my-1">{{ editedItem.serialNumber }}</h5>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 <v-layout> 212 <v-layout>
213 <v-flex xs5 sm6> 213 <v-flex xs5 sm6>
214 <h5 class="right my-1"> 214 <h5 class="right my-1">
215 <b>Issue date:</b> 215 <b>Issue date:</b>
216 </h5> 216 </h5>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs8> 218 <v-flex sm6 xs8>
219 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> 219 <h5 class="my-1">{{ dates(editedItem.creted) }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 <v-layout> 222 <v-layout>
223 <v-flex xs5 sm6> 223 <v-flex xs5 sm6>
224 <h5 class="right my-1"> 224 <h5 class="right my-1">
225 <b>Due date:</b> 225 <b>Due date:</b>
226 </h5> 226 </h5>
227 </v-flex> 227 </v-flex>
228 <v-flex sm6 xs8> 228 <v-flex sm6 xs8>
229 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> 229 <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 <v-layout> 232 <v-layout>
233 <v-flex xs5 sm6> 233 <v-flex xs5 sm6>
234 <h5 class="right my-1"> 234 <h5 class="right my-1">
235 <b>Status:</b> 235 <b>Status:</b>
236 </h5> 236 </h5>
237 </v-flex> 237 </v-flex>
238 <v-flex sm6 xs8> 238 <v-flex sm6 xs8>
239 <h5 class="my-1">{{ editedItem.status }}</h5> 239 <h5 class="my-1">{{ editedItem.status }}</h5>
240 </v-flex> 240 </v-flex>
241 </v-layout> 241 </v-layout>
242 </v-flex> 242 </v-flex>
243 </v-layout> 243 </v-layout>
244 </v-container> 244 </v-container>
245 </v-card-text> 245 </v-card-text>
246 </v-card> 246 </v-card>
247 </v-dialog> 247 </v-dialog>
248 248
249 <v-snackbar 249 <v-snackbar
250 :timeout="timeout" 250 :timeout="timeout"
251 :top="y === 'top'" 251 :top="y === 'top'"
252 :right="x === 'right'" 252 :right="x === 'right'"
253 :vertical="mode === 'vertical'" 253 :vertical="mode === 'vertical'"
254 v-model="snackbar" 254 v-model="snackbar"
255 color="success" 255 color="success"
256 >{{ text }}</v-snackbar> 256 >{{ text }}</v-snackbar>
257 257
258 <!-- ****** EXISTING ISSUE TABLE****** --> 258 <!-- ****** EXISTING ISSUE TABLE****** -->
259 <v-card> 259 <v-card>
260 <v-layout> 260 <v-layout>
261 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> 261 <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only">
262 <label class="right pt-4">Library ID:</label> 262 <label class="right pt-4">Library ID:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex lg2 md3 xs7> 264 <v-flex lg2 md3 xs7>
265 <v-text-field 265 <v-text-field
266 class="pl-3" 266 class="pl-3"
267 @keyup.enter="getIssueList" 267 @keyup.enter="getIssueList"
268 v-model="libraryId" 268 v-model="libraryId"
269 placeholder="fill your library Id" 269 placeholder="fill your library Id"
270 ></v-text-field> 270 ></v-text-field>
271 </v-flex> 271 </v-flex>
272 <v-flex lg9 md3 xs5> 272 <v-flex lg9 md3 xs5>
273 <v-btn 273 <v-btn
274 round 274 round
275 class="black mt-1 right hidden-xs-only" 275 class="black mt-1 right hidden-xs-only"
276 @click="getIssueList" 276 @click="getIssueList"
277 :loading="loadingSearch" 277 :loading="loadingSearch"
278 dark 278 dark
279 >Search</v-btn> 279 >Search</v-btn>
280 <v-btn 280 <v-btn
281 round 281 round
282 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" 282 class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
283 :loading="loadingSearch" 283 :loading="loadingSearch"
284 @click="getIssueList" 284 @click="getIssueList"
285 small 285 small
286 dark 286 dark
287 >Search</v-btn> 287 >Search</v-btn>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 </v-card> 290 </v-card>
291 <v-data-table 291 <v-data-table
292 :headers="headers" 292 :headers="headers"
293 :items="desserts" 293 :items="desserts"
294 :pagination.sync="pagination" 294 :pagination.sync="pagination"
295 :search="search" 295 :search="search"
296 > 296 >
297 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> 297 <template slot="items" slot-scope="props" v-if="props.item.isReturn != true">
298 <td class="text-xs-center">{{ props.index + 1}}</td> 298 <td class="text-xs-center">{{ props.index + 1}}</td>
299 <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> 299 <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td>
300 <td id="td" class="text-xs-center">{{ props.item.serialNumber}}</td> 300 <td id="td" class="text-xs-center">{{ props.item.serialNumber}}</td>
301 <td id="td" class="text-xs-center">{{ dates(props.item.created) }}</td> 301 <td id="td" class="text-xs-center">{{ dates(props.item.created) }}</td>
302 <td id="td" class="text-xs-center">{{ dates(props.item.dueDate) }}</td> 302 <td id="td" class="text-xs-center">{{ dates(props.item.dueDate) }}</td>
303 <td id="td" class="text-xs-center"> 303 <td id="td" class="text-xs-center">
304 <span 304 <span
305 class="green lighten-1 pa-2 white--text paymentStatus" 305 class="green lighten-1 pa-2 white--text paymentStatus"
306 >{{ props.item.bookId.status}}</span> 306 >{{ props.item.bookId.status}}</span>
307 </td> 307 </td>
308 <td class="text-xs-center"> 308 <td class="text-xs-center">
309 <span> 309 <span>
310 <v-tooltip top> 310 <v-tooltip top>
311 <img 311 <img
312 slot="activator" 312 slot="activator"
313 style="cursor:pointer; width:25px; height:18px; " 313 style="cursor:pointer; width:25px; height:18px; "
314 class="mr5" 314 class="mr5"
315 @click="profile(props.item)" 315 @click="profile(props.item)"
316 src="/static/icon/eye1.png" 316 src="/static/icon/eye1.png"
317 /> 317 />
318 <span>View</span> 318 <span>View</span>
319 </v-tooltip> 319 </v-tooltip>
320 <v-tooltip top> 320 <v-tooltip top>
321 <img 321 <img
322 slot="activator" 322 slot="activator"
323 style="cursor:pointer; width:20px; height:18px; " 323 style="cursor:pointer; width:20px; height:18px; "
324 class="mr5" 324 class="mr5"
325 @click="editItem(props.item)" 325 @click="editItem(props.item)"
326 src="/static/icon/edit1.png" 326 src="/static/icon/edit1.png"
327 /> 327 />
328 <span>Edit</span> 328 <span>Edit</span>
329 </v-tooltip> 329 </v-tooltip>
330 <v-tooltip top> 330 <v-tooltip top>
331 <img 331 <img
332 slot="activator" 332 slot="activator"
333 style="cursor:pointer; width:20px; height:20px; " 333 style="cursor:pointer; width:20px; height:20px; "
334 class="mr5" 334 class="mr5"
335 @click="deleteItem(props.item)" 335 @click="deleteItem(props.item)"
336 src="/static/icon/delete1.png" 336 src="/static/icon/delete1.png"
337 /> 337 />
338 <span>Delete</span> 338 <span>Delete</span>
339 </v-tooltip> 339 </v-tooltip>
340 </span> 340 </span>
341 </td> 341 </td>
342 </template> 342 </template>
343 <v-alert 343 <v-alert
344 slot="no-results" 344 slot="no-results"
345 :value="true" 345 :value="true"
346 color="error" 346 color="error"
347 icon="warning" 347 icon="warning"
348 >Your search for "{{ search }}" found no results.</v-alert> 348 >Your search for "{{ search }}" found no results.</v-alert>
349 </v-data-table> 349 </v-data-table>
350 </v-tab-item> 350 </v-tab-item>
351 351
352 <!-- ****** ADD Issue ****** --> 352 <!-- ****** ADD Issue ****** -->
353 353
354 <v-tab-item> 354 <v-tab-item>
355 <v-container> 355 <v-container>
356 <v-snackbar 356 <v-snackbar
357 :timeout="timeout" 357 :timeout="timeout"
358 :top="y === 'top'" 358 :top="y === 'top'"
359 :right="x === 'right'" 359 :right="x === 'right'"
360 :vertical="mode === 'vertical'" 360 :vertical="mode === 'vertical'"
361 v-model="snackbar" 361 v-model="snackbar"
362 :color="color" 362 :color="color"
363 >{{ text }}</v-snackbar> 363 >{{ text }}</v-snackbar>
364 <v-flex xs12 sm12 class="my-4"> 364 <v-flex xs12 sm12 class="my-4">
365 <v-card flat> 365 <v-card flat>
366 <v-form ref="form" v-model="valid" lazy-validation> 366 <v-form ref="form" v-model="valid" lazy-validation>
367 <v-container fluid> 367 <v-container fluid>
368 <v-flex xs12> 368 <v-flex xs12>
369 <v-layout> 369 <v-layout>
370 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
371 <label class="right">Library ID:</label> 371 <label class="right">Library ID:</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs4 class="ml-3"> 373 <v-flex xs4 class="ml-3">
374 <v-text-field 374 <v-text-field
375 v-model="libraryID" 375 v-model="libraryID"
376 placeholder="fill your Library ID" 376 placeholder="fill your Library ID"
377 :rules="libraryIDRules" 377 :rules="libraryIDRules"
378 required 378 required
379 ></v-text-field> 379 ></v-text-field>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 </v-flex> 382 </v-flex>
383 <v-flex xs12> 383 <v-flex xs12>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 class="pt-4 subheading"> 385 <v-flex xs4 class="pt-4 subheading">
386 <label class="right">Book:</label> 386 <label class="right">Book:</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs4 class="ml-3"> 388 <v-flex xs4 class="ml-3">
389 <v-select 389 <v-select
390 label="Select Book Name" 390 label="Select Book Name"
391 :rules="bookRules" 391 :rules="bookRules"
392 :items="books" 392 :items="books"
393 item-text="name" 393 item-text="name"
394 item-value="_id" 394 item-value="_id"
395 v-model="bookId" 395 v-model="bookId"
396 @change="getParticularBookData(bookId)" 396 @change="getParticularBookData(bookId)"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 </v-flex> 401 </v-flex>
402 <v-flex xs12> 402 <v-flex xs12>
403 <v-layout> 403 <v-layout>
404 <v-flex xs4 class="pt-4 subheading"> 404 <v-flex xs4 class="pt-4 subheading">
405 <label class="right">Author:</label> 405 <label class="right">Author:</label>
406 </v-flex> 406 </v-flex>
407 <v-flex xs4 class="ml-3"> 407 <v-flex xs4 class="ml-3">
408 <v-text-field 408 <v-text-field
409 placeholder="fill your Author" 409 placeholder="fill your Author"
410 :rules="authorRules" 410 :rules="authorRules"
411 v-model="addIssue.author" 411 v-model="addIssue.author"
412 ></v-text-field> 412 ></v-text-field>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <v-flex xs12> 416 <v-flex xs12>
417 <v-layout> 417 <v-layout>
418 <v-flex xs4 class="pt-4 subheading"> 418 <v-flex xs4 class="pt-4 subheading">
419 <label class="right">Subject Code:</label> 419 <label class="right">Subject Code:</label>
420 </v-flex> 420 </v-flex>
421 <v-flex xs4 class="ml-3"> 421 <v-flex xs4 class="ml-3">
422 <v-text-field 422 <v-text-field
423 placeholder="fill your Subject Code" 423 placeholder="fill your Subject Code"
424 :rules="subjectCodeRules" 424 :rules="subjectCodeRules"
425 v-model="addIssue.subjectCode" 425 v-model="addIssue.subjectCode"
426 ></v-text-field> 426 ></v-text-field>
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 xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right">Serial No:</label> 433 <label class="right">Serial No:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs4 class="ml-3"> 435 <v-flex xs4 class="ml-3">
436 <v-text-field 436 <v-text-field
437 placeholder="fill your Serial No" 437 placeholder="fill your Serial No"
438 :rules="authorRules" 438 :rules="authorRules"
439 v-model="serialNo" 439 v-model="serialNo"
440 ></v-text-field> 440 ></v-text-field>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 </v-flex> 443 </v-flex>
444 <v-flex xs12> 444 <v-flex xs12>
445 <v-layout> 445 <v-layout>
446 <v-flex xs4 class="pt-4 subheading"> 446 <v-flex xs4 class="pt-4 subheading">
447 <label class="right">Due Date:</label> 447 <label class="right">Due Date:</label>
448 </v-flex> 448 </v-flex>
449 <v-flex xs4 class="ml-3"> 449 <v-flex xs4 class="ml-3">
450 <v-menu 450 <v-menu
451 ref="menu2" 451 ref="menu2"
452 :close-on-content-click="false" 452 :close-on-content-click="false"
453 v-model="menu2" 453 v-model="menu2"
454 :nudge-right="40" 454 :nudge-right="40"
455 :return-value.sync="date" 455 :return-value.sync="date"
456 lazy 456 lazy
457 transition="scale-transition" 457 transition="scale-transition"
458 offset-y 458 offset-y
459 full-width 459 full-width
460 min-width="290px" 460 min-width="290px"
461 > 461 >
462 <v-text-field 462 <v-text-field
463 slot="activator" 463 slot="activator"
464 v-model="date" 464 v-model="date"
465 label="Select Due Date" 465 label="Select Due Date"
466 append-icon="event" 466 append-icon="event"
467 readonly 467 readonly
468 ></v-text-field> 468 ></v-text-field>
469 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> 469 <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
470 </v-menu> 470 </v-menu>
471 </v-flex> 471 </v-flex>
472 </v-layout> 472 </v-layout>
473 </v-flex> 473 </v-flex>
474 <v-flex xs12> 474 <v-flex xs12>
475 <v-layout> 475 <v-layout>
476 <v-flex xs4 class="pt-4 subheading"> 476 <v-flex xs4 class="pt-4 subheading">
477 <label class="right">Note:</label> 477 <label class="right">Note:</label>
478 </v-flex> 478 </v-flex>
479 <v-flex xs4 class="ml-3"> 479 <v-flex xs4 class="ml-3">
480 <v-text-field 480 <v-text-field
481 placeholder="fill your Note" 481 placeholder="fill your Note"
482 :rules="noteRules" 482 :rules="noteRules"
483 v-model="note" 483 v-model="note"
484 ></v-text-field> 484 ></v-text-field>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-layout> 488 <v-layout>
489 <v-flex xs12 sm6 offset-sm3> 489 <v-flex xs12 sm6 offset-sm3>
490 <v-card-actions> 490 <v-card-actions>
491 <v-btn @click="clear" round dark>clear</v-btn> 491 <v-btn @click="clear" round dark>clear</v-btn>
492 <v-spacer></v-spacer> 492 <v-spacer></v-spacer>
493 <v-btn @click="submit" round dark :loading="loading" :disabled="disable">Add</v-btn> 493 <v-btn @click="submit" round dark :loading="loading" :disabled="disable">Add</v-btn>
494 </v-card-actions> 494 </v-card-actions>
495 </v-flex> 495 </v-flex>
496 </v-layout> 496 </v-layout>
497 </v-container> 497 </v-container>
498 </v-form> 498 </v-form>
499 </v-card> 499 </v-card>
500 </v-flex> 500 </v-flex>
501 </v-container> 501 </v-container>
502 </v-tab-item> 502 </v-tab-item>
503 </v-tabs> 503 </v-tabs>
504 <div class="loader" v-if="showLoader"> 504 <div class="loader" v-if="showLoader">
505 <v-progress-circular indeterminate color="white"></v-progress-circular> 505 <v-progress-circular indeterminate color="white"></v-progress-circular>
506 </div> 506 </div>
507 </v-app> 507 </v-app>
508 </template> 508 </template>
509 509
510 <script> 510 <script>
511 import http from "@/Services/http.js"; 511 import http from "@/Services/http.js";
512 import moment from "moment"; 512 import moment from "moment";
513 513
514 export default { 514 export default {
515 data: () => ({ 515 data: () => ({
516 snackbar: false, 516 snackbar: false,
517 date: null, 517 date: null,
518 menu1: false, 518 menu1: false,
519 menu2: false, 519 menu2: false,
520 color: "", 520 color: "",
521 dueDate: null, 521 dueDate: null,
522 y: "top", 522 y: "top",
523 x: "right", 523 x: "right",
524 mode: "", 524 mode: "",
525 timeout: 10000, 525 timeout: 10000,
526 text: "", 526 text: "",
527 libraryId: "", 527 libraryId: "",
528 loading: false, 528 loading: false,
529 loadingSearch: false, 529 loadingSearch: false,
530 date: null, 530 date: null,
531 search: "", 531 search: "",
532 showLoader: false, 532 showLoader: false,
533 dialog: false, 533 dialog: false,
534 dialog1: false, 534 dialog1: false,
535 valid: true, 535 valid: true,
536 isActive: true, 536 isActive: true,
537 newActive: false, 537 newActive: false,
538 addclass: [], 538 addclass: [],
539 addSection: [], 539 addSection: [],
540 pagination: { 540 pagination: {
541 rowsPerPage: 15 541 rowsPerPage: 15
542 }, 542 },
543 libraryIDRules: [v => !!v || " Library ID is required"], 543 libraryIDRules: [v => !!v || " Library ID is required"],
544 bookRules: [v => !!v || " book Name is required"], 544 bookRules: [v => !!v || " book Name is required"],
545 authorRules: [v => !!v || "Author Name is required"], 545 authorRules: [v => !!v || "Author Name is required"],
546 subjectCodeRules: [v => !!v || "Subject Code is required"], 546 subjectCodeRules: [v => !!v || "Subject Code is required"],
547 authorRules: [v => !!v || "Author is required"], 547 authorRules: [v => !!v || "Author is required"],
548 noteRules: [v => !!v || "Note is required"], 548 noteRules: [v => !!v || "Note is required"],
549 headers: [ 549 headers: [
550 { 550 {
551 align: "justify-center", 551 align: "justify-center",
552 text: "No", 552 text: "No",
553 sortable: false, 553 sortable: false,
554 value: "No" 554 value: "No"
555 }, 555 },
556 { text: "Book", vaue: "name", sortable: false, align: "center" }, 556 { text: "Book", vaue: "name", sortable: false, align: "center" },
557 { 557 {
558 text: "Serial Number", 558 text: "Serial Number",
559 value: "serialNumber", 559 value: "serialNumber",
560 sortable: false, 560 sortable: false,
561 align: "center" 561 align: "center"
562 }, 562 },
563 { 563 {
564 text: "Issue Date", 564 text: "Issue Date",
565 value: "created", 565 value: "created",
566 sortable: false, 566 sortable: false,
567 align: "center" 567 align: "center"
568 }, 568 },
569 { 569 {
570 text: "Due Date", 570 text: "Due Date",
571 value: "dueDate", 571 value: "dueDate",
572 sortable: false, 572 sortable: false,
573 align: "center" 573 align: "center"
574 }, 574 },
575 { 575 {
576 text: "Status", 576 text: "Status",
577 value: "status", 577 value: "status",
578 sortable: false, 578 sortable: false,
579 align: "center" 579 align: "center"
580 }, 580 },
581 { text: "Action", value: "", sortable: false, align: "center" } 581 { text: "Action", value: "", sortable: false, align: "center" }
582 ], 582 ],
583 desserts: [], 583 desserts: [],
584 addIssue: {}, 584 addIssue: {},
585 bookId: "", 585 bookId: "",
586 libraryID: "", 586 libraryID: "",
587 serialNo: "", 587 serialNo: "",
588 note: "", 588 note: "",
589 editedItem: {}, 589 editedItem: {},
590 books: [], 590 books: [],
591 token: "", 591 token: "",
592 disable: false 592 disable: false
593 }), 593 }),
594 methods: { 594 methods: {
595 dates: function(date) { 595 dates: function(date) {
596 return moment(date).format("MMMM DD, YYYY"); 596 return moment(date).format("MMMM DD, YYYY");
597 }, 597 },
598 pickFile() { 598 pickFile() {
599 this.$refs.image.click(); 599 this.$refs.image.click();
600 }, 600 },
601 getIssueList() { 601 getIssueList() {
602 this.showLoader = true; 602 this.showLoader = true;
603 this.loadingSearch = true; 603 this.loadingSearch = true;
604 http() 604 http()
605 .get( 605 .get(
606 "/getBooksIssueList", 606 "/getBooksIssueList",
607 { 607 {
608 params: { libraryId: this.libraryId } 608 params: { libraryId: this.libraryId }
609 }, 609 },
610 { 610 {
611 headers: { Authorization: "Bearer " + this.token } 611 headers: { Authorization: "Bearer " + this.token }
612 } 612 }
613 ) 613 )
614 .then(response => { 614 .then(response => {
615 this.desserts = response.data.data; 615 this.desserts = response.data.data;
616 this.showLoader = false; 616 this.showLoader = false;
617 this.loadingSearch = false; 617 this.loadingSearch = false;
618 }) 618 })
619 .catch(error => { 619 .catch(error => {
620 // console.log("err====>", err); 620 // console.log("err====>", err);
621 this.showLoader = false; 621 this.showLoader = false;
622 this.loadingSearch = false; 622 this.loadingSearch = false;
623 this.snackbar = true; 623 this.snackbar = true;
624 this.text = error.response.data.message; 624 this.text = error.response.data.message;
625 if (error.response.status === 401) { 625 if (error.response.status === 401) {
626 this.$router.replace({ path: "/" }); 626 this.$router.replace({ path: "/" });
627 this.$store.dispatch("setToken", null); 627 this.$store.dispatch("setToken", null);
628 this.$store.dispatch("Id", null); 628 this.$store.dispatch("Id", null);
629 this.$store.dispatch("Role", null);
629 } 630 }
630 }); 631 });
631 }, 632 },
632 editItem(item) { 633 editItem(item) {
633 console.log("item", item); 634 console.log("item", item);
634 this.editedIndex = this.desserts.indexOf(item); 635 this.editedIndex = this.desserts.indexOf(item);
635 this.editedItem = Object.assign({}, item); 636 this.editedItem = Object.assign({}, item);
636 this.editedItem.name = item.bookId.name; 637 this.editedItem.name = item.bookId.name;
637 this.editedItem.status = item.bookId.status; 638 this.editedItem.status = item.bookId.status;
638 this.editedItem.dueDate = 639 this.editedItem.dueDate =
639 this.editedItem.dueDate != undefined 640 this.editedItem.dueDate != undefined
640 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) 641 ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10))
641 : (this.editedItem.dueDate = ""); 642 : (this.editedItem.dueDate = "");
642 this.dialog = true; 643 this.dialog = true;
643 }, 644 },
644 profile(item) { 645 profile(item) {
645 this.editedIndex = this.desserts.indexOf(item); 646 this.editedIndex = this.desserts.indexOf(item);
646 this.editedItem = Object.assign({}, item); 647 this.editedItem = Object.assign({}, item);
647 this.editedItem.name = item.bookId.name; 648 this.editedItem.name = item.bookId.name;
648 this.editedItem.status = item.bookId.status; 649 this.editedItem.status = item.bookId.status;
649 650
650 this.dialog1 = true; 651 this.dialog1 = true;
651 }, 652 },
652 returnBook(item) { 653 returnBook(item) {
653 let returnBook = { 654 let returnBook = {
654 bookIssueId: item._id 655 bookIssueId: item._id
655 }; 656 };
656 http() 657 http()
657 .put( 658 .put(
658 "/returnBook", 659 "/returnBook",
659 confirm("Are you sure you want to return this?") && returnBook 660 confirm("Are you sure you want to return this?") && returnBook
660 ) 661 )
661 .then(response => { 662 .then(response => {
662 this.snackbar = true; 663 this.snackbar = true;
663 this.text = "Successfully return Issue a Book "; 664 this.text = "Successfully return Issue a Book ";
664 this.getIssueList(); 665 this.getIssueList();
665 }) 666 })
666 .catch(error => { 667 .catch(error => {
667 // console.log(error); 668 // console.log(error);
668 }); 669 });
669 }, 670 },
670 activeTab(type) { 671 activeTab(type) {
671 switch (type) { 672 switch (type) {
672 case "existing": 673 case "existing":
673 this.newActive = false; 674 this.newActive = false;
674 this.isActive = true; 675 this.isActive = true;
675 break; 676 break;
676 677
677 default: 678 default:
678 this.newActive = true; 679 this.newActive = true;
679 this.isActive = false; 680 this.isActive = false;
680 break; 681 break;
681 } 682 }
682 }, 683 },
683 close() { 684 close() {
684 this.dialog = false; 685 this.dialog = false;
685 }, 686 },
686 close1() { 687 close1() {
687 this.dialog1 = false; 688 this.dialog1 = false;
688 }, 689 },
689 submit() { 690 submit() {
690 this.loading = true; 691 this.loading = true;
691 if (this.$refs.form.validate()) { 692 if (this.$refs.form.validate()) {
692 let createBook = { 693 let createBook = {
693 bookId: this.bookId, 694 bookId: this.bookId,
694 author: this.addIssue.author, 695 author: this.addIssue.author,
695 subjectCode: this.addIssue.subjectCode, 696 subjectCode: this.addIssue.subjectCode,
696 libraryId: this.libraryID, 697 libraryId: this.libraryID,
697 serialNumber: this.serialNo, 698 serialNumber: this.serialNo,
698 note: this.note, 699 note: this.note,
699 dueDate: this.date 700 dueDate: this.date
700 }; 701 };
701 console.log("====================", createBook); 702 console.log("====================", createBook);
702 http() 703 http()
703 .post("/createBookIssue", createBook) 704 .post("/createBookIssue", createBook)
704 .then(response => { 705 .then(response => {
705 this.snackbar = true; 706 this.snackbar = true;
706 this.text = "New Issue a Book added successfully"; 707 this.text = "New Issue a Book added successfully";
707 this.getIssueList(); 708 this.getIssueList();
708 this.color = "succses"; 709 this.color = "succses";
709 this.loading = false; 710 this.loading = false;
710 this.clear(); 711 this.clear();
711 }) 712 })
712 .catch(error => { 713 .catch(error => {
713 if ((this.snackbar = true)) { 714 if ((this.snackbar = true)) {
714 this.text = error.response.data.message; 715 this.text = error.response.data.message;
715 this.color = "red"; 716 this.color = "red";
716 } 717 }
717 }); 718 });
718 } 719 }
719 }, 720 },
720 clear() { 721 clear() {
721 this.$refs.form.reset(); 722 this.$refs.form.reset();
722 this.disable = false; 723 this.disable = false;
723 }, 724 },
724 save() { 725 save() {
725 this.editedItem.bookIssueId = this.editedItem._id; 726 this.editedItem.bookIssueId = this.editedItem._id;
726 this.editedItem.bookId = this.editedItem.bookId._id 727 this.editedItem.bookId = this.editedItem.bookId._id
727 http() 728 http()
728 .put("/updateBookIssue", this.editedItem) 729 .put("/updateBookIssue", this.editedItem)
729 .then(response => { 730 .then(response => {
730 console.log("updateIssue", response); 731 console.log("updateIssue", response);
731 this.snackbar = true; 732 this.snackbar = true;
732 this.text = "Successfully Edit Issue a Book"; 733 this.text = "Successfully Edit Issue a Book";
733 this.color = "green"; 734 this.color = "green";
734 this.getIssueList(); 735 this.getIssueList();
735 this.close(); 736 this.close();
736 }) 737 })
737 .catch(error => { 738 .catch(error => {
738 // console.log(error); 739 // console.log(error);
739 if ((this.snackbar = true)) { 740 if ((this.snackbar = true)) {
740 this.text = error.response.data.message; 741 this.text = error.response.data.message;
741 this.color = "red"; 742 this.color = "red";
742 } 743 }
743 }); 744 });
744 }, 745 },
745 getBookData() { 746 getBookData() {
746 this.showLoader = true; 747 this.showLoader = true;
747 http() 748 http()
748 .get("/getBooksList", { 749 .get("/getBooksList", {
749 headers: { Authorization: "Bearer " + this.token } 750 headers: { Authorization: "Bearer " + this.token }
750 }) 751 })
751 .then(response => { 752 .then(response => {
752 this.books = response.data.data; 753 this.books = response.data.data;
753 this.showLoader = false; 754 this.showLoader = false;
754 // console.log("getAllfeetypes=====>",response.data.data) 755 // console.log("getAllfeetypes=====>",response.data.data)
755 }) 756 })
756 .catch(error => { 757 .catch(error => {
757 // console.log("err====>", err); 758 // console.log("err====>", err);
758 this.showLoader = false; 759 this.showLoader = false;
759 if (error.response.status === 401) { 760 if (error.response.status === 401) {
760 this.$router.replace({ path: "/" }); 761 this.$router.replace({ path: "/" });
761 this.$store.dispatch("setToken", null); 762 this.$store.dispatch("setToken", null);
762 this.$store.dispatch("Id", null); 763 this.$store.dispatch("Id", null);
763 } 764 }
764 }); 765 });
765 }, 766 },
766 getParticularBookData(books) { 767 getParticularBookData(books) {
767 console.log("books", books); 768 console.log("books", books);
768 for (let i = 0; i < this.books.length; i++) { 769 for (let i = 0; i < this.books.length; i++) {
769 if (books == this.books[i]._id) { 770 if (books == this.books[i]._id) {
770 console.log("books", this.books[i].remaining); 771 console.log("books", this.books[i].remaining);
771 if (this.books[i].remaining <= 0) { 772 if (this.books[i].remaining <= 0) {
772 this.snackbar = true; 773 this.snackbar = true;
773 this.text = "Book is unavailable"; 774 this.text = "Book is unavailable";
774 this.color = "red"; 775 this.color = "red";
775 this.disable = true; 776 this.disable = true;
776 } else if (this.books[i].remaining > 0) { 777 } else if (this.books[i].remaining > 0) {
777 this.disable = false; 778 this.disable = false;
778 } 779 }
779 this.addIssue = { 780 this.addIssue = {
780 author: this.books[i].author, 781 author: this.books[i].author,
781 subjectCode: this.books[i].subjectCode 782 subjectCode: this.books[i].subjectCode
782 }; 783 };
783 } 784 }
784 } 785 }
785 this.addIssue.boojk = books; 786 this.addIssue.boojk = books;
786 } 787 }
787 }, 788 },
788 mounted() { 789 mounted() {
789 this.token = this.$store.state.token; 790 this.token = this.$store.state.token;
790 this.getBookData(); 791 this.getBookData();
791 }, 792 },
792 created() { 793 created() {
793 this.$root.$on("app:search", search => { 794 this.$root.$on("app:search", search => {
794 this.search = search; 795 this.search = search;
795 }); 796 });
796 }, 797 },
797 beforeDestroy() { 798 beforeDestroy() {
798 // dont forget to remove the listener 799 // dont forget to remove the listener
799 this.$root.$off("app:search"); 800 this.$root.$off("app:search");
800 } 801 }
801 }; 802 };
802 </script> 803 </script>
803 <style scoped> 804 <style scoped>
804 .active { 805 .active {
805 background-color: gray; 806 background-color: gray;
806 color: white !important; 807 color: white !important;
807 } 808 }
808 .activebtn { 809 .activebtn {
809 color: black !important; 810 color: black !important;
810 } 811 }
811 </style> 812 </style>
src/pages/Library/member.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 11
12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> 12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** -->
13 13
14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable> 14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable>
15 <v-card> 15 <v-card>
16 <v-toolbar color="grey lighten-2" flat> 16 <v-toolbar color="grey lighten-2" flat>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 <v-toolbar-title>Student Profile</v-toolbar-title> 18 <v-toolbar-title>Student Profile</v-toolbar-title>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-icon @click="closeViewStudent">close</v-icon> 20 <v-icon @click="closeViewStudent">close</v-icon>
21 </v-toolbar> 21 </v-toolbar>
22 <v-card-text style="height: 700px;"> 22 <v-card-text style="height: 700px;">
23 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 23 <v-flex align-center justify-center layout text-xs-center class="mt-3">
24 <v-avatar size="160px"> 24 <v-avatar size="160px">
25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
27 </v-avatar> 27 </v-avatar>
28 </v-flex> 28 </v-flex>
29 <v-container grid-list-md> 29 <v-container grid-list-md>
30 <v-layout wrap> 30 <v-layout wrap>
31 <v-flex xs12> 31 <v-flex xs12>
32 <v-layout wrap> 32 <v-layout wrap>
33 <v-flex xs12 sm6> 33 <v-flex xs12 sm6>
34 <v-layout> 34 <v-layout>
35 <v-flex xs6 sm5> 35 <v-flex xs6 sm5>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Full Name:</b> 37 <b>Full Name:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm7 xs6> 40 <v-flex sm7 xs6>
41 <h5 class="my-1 left">{{ editedItem.name }}</h5> 41 <h5 class="my-1 left">{{ editedItem.name }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm6> 45 <v-flex xs12 sm6>
46 <v-layout> 46 <v-layout>
47 <v-flex xs6 sm4> 47 <v-flex xs6 sm4>
48 <h5 class="right my-1"> 48 <h5 class="right my-1">
49 <b>Email:</b> 49 <b>Email:</b>
50 </h5> 50 </h5>
51 </v-flex> 51 </v-flex>
52 <v-flex sm8 xs6> 52 <v-flex sm8 xs6>
53 <h5 class="my-1 left">{{ editedItem.email }}</h5> 53 <h5 class="my-1 left">{{ editedItem.email }}</h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 <v-layout wrap> 58 <v-layout wrap>
59 <v-flex xs12 sm6> 59 <v-flex xs12 sm6>
60 <v-layout> 60 <v-layout>
61 <v-flex xs6 sm5> 61 <v-flex xs6 sm5>
62 <b> 62 <b>
63 <h5 class="right my-1"> 63 <h5 class="right my-1">
64 <b>Gender:</b> 64 <b>Gender:</b>
65 </h5> 65 </h5>
66 </b> 66 </b>
67 </v-flex> 67 </v-flex>
68 <v-flex sm7 xs6> 68 <v-flex sm7 xs6>
69 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 69 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12 sm6> 73 <v-flex xs12 sm6>
74 <v-layout> 74 <v-layout>
75 <v-flex xs6 sm4> 75 <v-flex xs6 sm4>
76 <b> 76 <b>
77 <h5 class="right my-1"> 77 <h5 class="right my-1">
78 <b>D.O.B:</b> 78 <b>D.O.B:</b>
79 </h5> 79 </h5>
80 </b> 80 </b>
81 </v-flex> 81 </v-flex>
82 <v-flex sm7 xs6> 82 <v-flex sm7 xs6>
83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 <v-layout wrap> 88 <v-layout wrap>
89 <v-flex xs12 sm6> 89 <v-flex xs12 sm6>
90 <v-layout> 90 <v-layout>
91 <v-flex xs6 sm5> 91 <v-flex xs6 sm5>
92 <b> 92 <b>
93 <h5 class="right my-1"> 93 <h5 class="right my-1">
94 <b>Blood Group:</b> 94 <b>Blood Group:</b>
95 </h5> 95 </h5>
96 </b> 96 </b>
97 </v-flex> 97 </v-flex>
98 <v-flex sm7 xs6> 98 <v-flex sm7 xs6>
99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm6> 103 <v-flex xs12 sm6>
104 <v-layout> 104 <v-layout>
105 <v-flex xs6 sm4> 105 <v-flex xs6 sm4>
106 <b> 106 <b>
107 <h5 class="right my-1"> 107 <h5 class="right my-1">
108 <b>Allergies:</b> 108 <b>Allergies:</b>
109 </h5> 109 </h5>
110 </b> 110 </b>
111 </v-flex> 111 </v-flex>
112 <v-flex sm8 xs6> 112 <v-flex sm8 xs6>
113 <h5 class="my-1">{{ editedItem.allergies }}</h5> 113 <h5 class="my-1">{{ editedItem.allergies }}</h5>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-layout wrap> 118 <v-layout wrap>
119 <v-flex xs12 sm6> 119 <v-flex xs12 sm6>
120 <v-layout> 120 <v-layout>
121 <v-flex xs6 sm5> 121 <v-flex xs6 sm5>
122 <b> 122 <b>
123 <h5 class="right my-1"> 123 <h5 class="right my-1">
124 <b>Height:</b> 124 <b>Height:</b>
125 </h5> 125 </h5>
126 </b> 126 </b>
127 </v-flex> 127 </v-flex>
128 <v-flex sm7 xs6> 128 <v-flex sm7 xs6>
129 <h5 class="my-1 left">{{ editedItem.height }}</h5> 129 <h5 class="my-1 left">{{ editedItem.height }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm6> 133 <v-flex xs12 sm6>
134 <v-layout> 134 <v-layout>
135 <v-flex xs6 sm4> 135 <v-flex xs6 sm4>
136 <b> 136 <b>
137 <h5 class="right my-1"> 137 <h5 class="right my-1">
138 <b>Weight:</b> 138 <b>Weight:</b>
139 </h5> 139 </h5>
140 </b> 140 </b>
141 </v-flex> 141 </v-flex>
142 <v-flex sm8 xs6> 142 <v-flex sm8 xs6>
143 <h5 class="my-1">{{ editedItem.weight }}</h5> 143 <h5 class="my-1">{{ editedItem.weight }}</h5>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout wrap> 148 <v-layout wrap>
149 <v-flex xs12 sm6> 149 <v-flex xs12 sm6>
150 <v-layout> 150 <v-layout>
151 <v-flex xs6 sm5> 151 <v-flex xs6 sm5>
152 <b> 152 <b>
153 <h5 class="right my-1"> 153 <h5 class="right my-1">
154 <b>City:</b> 154 <b>City:</b>
155 </h5> 155 </h5>
156 </b> 156 </b>
157 </v-flex> 157 </v-flex>
158 <v-flex sm7 xs6> 158 <v-flex sm7 xs6>
159 <h5 class="my-1 left">{{ editedItem.city }}</h5> 159 <h5 class="my-1 left">{{ editedItem.city }}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 <v-flex xs12 sm6> 163 <v-flex xs12 sm6>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <b> 166 <b>
167 <h5 class="right my-1"> 167 <h5 class="right my-1">
168 <b>State:</b> 168 <b>State:</b>
169 </h5> 169 </h5>
170 </b> 170 </b>
171 </v-flex> 171 </v-flex>
172 <v-flex sm8 xs6> 172 <v-flex sm8 xs6>
173 <h5 class="my-1">{{ editedItem.state }}</h5> 173 <h5 class="my-1">{{ editedItem.state }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-layout wrap> 178 <v-layout wrap>
179 <v-flex xs12 sm6> 179 <v-flex xs12 sm6>
180 <v-layout> 180 <v-layout>
181 <v-flex xs6 sm5> 181 <v-flex xs6 sm5>
182 <b> 182 <b>
183 <h5 class="right my-1"> 183 <h5 class="right my-1">
184 <b>Pincode:</b> 184 <b>Pincode:</b>
185 </h5> 185 </h5>
186 </b> 186 </b>
187 </v-flex> 187 </v-flex>
188 <v-flex sm7 xs6> 188 <v-flex sm7 xs6>
189 <h5 class="my-1">{{ editedItem.pincode }}</h5> 189 <h5 class="my-1">{{ editedItem.pincode }}</h5>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm5> 193 <v-flex xs12 sm5>
194 <v-layout> 194 <v-layout>
195 <v-flex xs6 sm5> 195 <v-flex xs6 sm5>
196 <b> 196 <b>
197 <h5 class="right my-1"> 197 <h5 class="right my-1">
198 <b>Country:</b> 198 <b>Country:</b>
199 </h5> 199 </h5>
200 </b> 200 </b>
201 </v-flex> 201 </v-flex>
202 <v-flex sm7 xs6> 202 <v-flex sm7 xs6>
203 <h5 class="my-1">{{ editedItem.country }}</h5> 203 <h5 class="my-1">{{ editedItem.country }}</h5>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 <v-layout wrap> 208 <v-layout wrap>
209 <v-flex xs12 sm6> 209 <v-flex xs12 sm6>
210 <v-layout> 210 <v-layout>
211 <v-flex sm5 xs6> 211 <v-flex sm5 xs6>
212 <b> 212 <b>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Mobile No:</b> 214 <b>Mobile No:</b>
215 </h5> 215 </h5>
216 </b> 216 </b>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs6> 218 <v-flex sm6 xs6>
219 <h5 class="my-1">{{ editedItem.mobile }}</h5> 219 <h5 class="my-1">{{ editedItem.mobile }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 </v-flex> 222 </v-flex>
223 <v-flex xs12 sm6> 223 <v-flex xs12 sm6>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <b> 226 <b>
227 <h5 class="right my-1"> 227 <h5 class="right my-1">
228 <b>Library ID :</b> 228 <b>Library ID :</b>
229 </h5> 229 </h5>
230 </b> 230 </b>
231 </v-flex> 231 </v-flex>
232 <v-flex sm8 xs6> 232 <v-flex sm8 xs6>
233 <h5 class="my-1">{{ editedItem.libraryId }}</h5> 233 <h5 class="my-1">{{ editedItem.libraryId }}</h5>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 </v-layout> 237 </v-layout>
238 <v-layout wrap> 238 <v-layout wrap>
239 <v-flex xs12 sm5> 239 <v-flex xs12 sm5>
240 <v-layout> 240 <v-layout>
241 <v-flex xs6 sm6> 241 <v-flex xs6 sm6>
242 <b> 242 <b>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Library Fee:</b> 244 <b>Library Fee:</b>
245 </h5> 245 </h5>
246 </b> 246 </b>
247 </v-flex> 247 </v-flex>
248 <v-flex sm6 xs6> 248 <v-flex sm6 xs6>
249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5> 249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm6> 253 <v-flex xs12 sm6>
254 <v-layout> 254 <v-layout>
255 <v-flex xs6 sm6> 255 <v-flex xs6 sm6>
256 <b> 256 <b>
257 <h5 class="my-1 right"> 257 <h5 class="my-1 right">
258 <b>Academic Year:</b> 258 <b>Academic Year:</b>
259 </h5> 259 </h5>
260 </b> 260 </b>
261 </v-flex> 261 </v-flex>
262 <v-flex sm5 xs6> 262 <v-flex sm5 xs6>
263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout wrap> 268 <v-layout wrap>
269 <v-flex xs12 sm5> 269 <v-flex xs12 sm5>
270 <v-layout> 270 <v-layout>
271 <v-flex xs6 sm6> 271 <v-flex xs6 sm6>
272 <b> 272 <b>
273 <h5 class="my-1 right"> 273 <h5 class="my-1 right">
274 <b>Medical Notes:</b> 274 <b>Medical Notes:</b>
275 </h5> 275 </h5>
276 </b> 276 </b>
277 </v-flex> 277 </v-flex>
278 <v-flex sm5 xs6> 278 <v-flex sm5 xs6>
279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-flex> 282 </v-flex>
283 <v-flex xs12 sm6> 283 <v-flex xs12 sm6>
284 <v-layout> 284 <v-layout>
285 <v-flex xs6 sm6> 285 <v-flex xs6 sm6>
286 <b> 286 <b>
287 <h5 class="right my-1"> 287 <h5 class="right my-1">
288 <b>Roll No. :</b> 288 <b>Roll No. :</b>
289 </h5> 289 </h5>
290 </b> 290 </b>
291 </v-flex> 291 </v-flex>
292 <v-flex sm6 xs8> 292 <v-flex sm6 xs8>
293 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 293 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout wrap> 298 <v-layout wrap>
299 <v-flex xs12 sm5> 299 <v-flex xs12 sm5>
300 <v-layout> 300 <v-layout>
301 <v-flex xs6 sm6> 301 <v-flex xs6 sm6>
302 <b> 302 <b>
303 <h5 class="my-1 right"> 303 <h5 class="my-1 right">
304 <b>present Address:</b> 304 <b>present Address:</b>
305 </h5> 305 </h5>
306 </b> 306 </b>
307 </v-flex> 307 </v-flex>
308 <v-flex sm5 xs6> 308 <v-flex sm5 xs6>
309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-flex> 312 </v-flex>
313 <v-flex xs12 sm6> 313 <v-flex xs12 sm6>
314 <v-layout> 314 <v-layout>
315 <v-flex xs6 sm6> 315 <v-flex xs6 sm6>
316 <b> 316 <b>
317 <h5 class="right my-1"> 317 <h5 class="right my-1">
318 <b>present Address:</b> 318 <b>present Address:</b>
319 </h5> 319 </h5>
320 </b> 320 </b>
321 </v-flex> 321 </v-flex>
322 <v-flex sm6 xs8> 322 <v-flex sm6 xs8>
323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-container> 330 </v-container>
331 </v-card-text> 331 </v-card-text>
332 </v-card> 332 </v-card>
333 </v-dialog> 333 </v-dialog>
334 334
335 <!-- Edit Student Library Member Dialog --> 335 <!-- Edit Student Library Member Dialog -->
336 336
337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable> 337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable>
338 <v-card flat> 338 <v-card flat>
339 <v-toolbar color="grey lighten-2" flat> 339 <v-toolbar color="grey lighten-2" flat>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 <v-toolbar-title> 341 <v-toolbar-title>
342 <h3>Edit Student Profile</h3> 342 <h3>Edit Student Profile</h3>
343 </v-toolbar-title> 343 </v-toolbar-title>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 </v-toolbar> 345 </v-toolbar>
346 <v-card-text style="height: 426px;"> 346 <v-card-text style="height: 426px;">
347 <v-form ref="form"> 347 <v-form ref="form">
348 <v-container fluid> 348 <v-container fluid>
349 <v-layout> 349 <v-layout>
350 <v-flex 350 <v-flex
351 xs12 351 xs12
352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
353 > 353 >
354 <v-avatar size="160px"> 354 <v-avatar size="160px">
355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
356 <img 356 <img
357 :src="editedItem.profilePicUrl" 357 :src="editedItem.profilePicUrl"
358 v-else-if="editedItem.profilePicUrl && !imageUrl" 358 v-else-if="editedItem.profilePicUrl && !imageUrl"
359 /> 359 />
360 <img 360 <img
361 v-if="imageUrl" 361 v-if="imageUrl"
362 :src="imageUrl" 362 :src="imageUrl"
363 height="150" 363 height="150"
364 style="border-radius:50%; width:200px" 364 style="border-radius:50%; width:200px"
365 /> 365 />
366 </v-avatar> 366 </v-avatar>
367 </v-flex> 367 </v-flex>
368 </v-layout> 368 </v-layout>
369 <v-layout wrap> 369 <v-layout wrap>
370 <v-flex xs12 sm12 md10> 370 <v-flex xs12 sm12 md10>
371 <v-layout> 371 <v-layout>
372 <v-flex xs4 class="pt-4 subheading"> 372 <v-flex xs4 class="pt-4 subheading">
373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> 373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> 374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 class="ml-3"> 376 <v-flex xs8 class="ml-3">
377 <v-text-field 377 <v-text-field
378 v-model="editedItem.libraryId" 378 v-model="editedItem.libraryId"
379 placeholder="fill your Library ID" 379 placeholder="fill your Library ID"
380 ></v-text-field> 380 ></v-text-field>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-flex> 383 </v-flex>
384 <v-flex xs12 sm12 md10> 384 <v-flex xs12 sm12 md10>
385 <v-layout> 385 <v-layout>
386 <v-flex xs4 class="pt-4 subheading"> 386 <v-flex xs4 class="pt-4 subheading">
387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> 387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> 388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs8 class="ml-3"> 390 <v-flex xs8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 v-model="editedItem.libraryFee" 392 v-model="editedItem.libraryFee"
393 placeholder="fill your Library Fee" 393 placeholder="fill your Library Fee"
394 ></v-text-field> 394 ></v-text-field>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 <v-layout> 399 <v-layout>
400 <v-flex xs12 sm12> 400 <v-flex xs12 sm12>
401 <v-layout> 401 <v-layout>
402 <v-flex xs6> 402 <v-flex xs6>
403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn> 403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn>
404 </v-flex> 404 </v-flex>
405 <v-flex xs6> 405 <v-flex xs6>
406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card-text> 413 </v-card-text>
414 </v-card> 414 </v-card>
415 </v-dialog> 415 </v-dialog>
416 <!-- Add Student Library Member Dialog --> 416 <!-- Add Student Library Member Dialog -->
417 417
418 <v-dialog v-model="addLibrary" max-width="600px"> 418 <v-dialog v-model="addLibrary" max-width="600px">
419 <v-toolbar color="grey lighten-2"> 419 <v-toolbar color="grey lighten-2">
420 <v-spacer></v-spacer> 420 <v-spacer></v-spacer>
421 <v-toolbar-title> 421 <v-toolbar-title>
422 <h3>Library Member</h3> 422 <h3>Library Member</h3>
423 </v-toolbar-title> 423 </v-toolbar-title>
424 <v-spacer></v-spacer> 424 <v-spacer></v-spacer>
425 </v-toolbar> 425 </v-toolbar>
426 <v-card> 426 <v-card>
427 <v-card-text> 427 <v-card-text>
428 <v-layout wrap justify-center> 428 <v-layout wrap justify-center>
429 <v-flex xs12 sm12 md10> 429 <v-flex xs12 sm12 md10>
430 <v-form ref="form" v-model="valid" lazy-validation> 430 <v-form ref="form" v-model="valid" lazy-validation>
431 <v-layout> 431 <v-layout>
432 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right pr-3">Library Id:</label> 433 <label class="right pr-3">Library Id:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs8> 435 <v-flex xs8>
436 <v-text-field 436 <v-text-field
437 v-model="addBook.libraryId" 437 v-model="addBook.libraryId"
438 :rules="libraryIdRules" 438 :rules="libraryIdRules"
439 type="number" 439 type="number"
440 placeholder="fill your Library ID" 440 placeholder="fill your Library ID"
441 ></v-text-field> 441 ></v-text-field>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 <v-layout> 444 <v-layout>
445 <v-flex xs4 class="pt-4 subheading"> 445 <v-flex xs4 class="pt-4 subheading">
446 <label class="right pr-3">Library Fee:</label> 446 <label class="right pr-3">Library Fee:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8> 448 <v-flex xs8>
449 <v-text-field 449 <v-text-field
450 v-model="addBook.libraryFee" 450 v-model="addBook.libraryFee"
451 type="number" 451 type="number"
452 :rules="libraryFeeRules" 452 :rules="libraryFeeRules"
453 placeholder="fill your Library Fee" 453 placeholder="fill your Library Fee"
454 ></v-text-field> 454 ></v-text-field>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 <v-card-actions> 457 <v-card-actions>
458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn> 458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn>
459 <v-spacer></v-spacer> 459 <v-spacer></v-spacer>
460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn> 460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn>
461 </v-card-actions> 461 </v-card-actions>
462 </v-form> 462 </v-form>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 </v-card-text> 465 </v-card-text>
466 </v-card> 466 </v-card>
467 </v-dialog> 467 </v-dialog>
468 <!-- ****** EXISTING MEMBER TABLE ****** --> 468 <!-- ****** EXISTING MEMBER TABLE ****** -->
469 <v-card flat> 469 <v-card flat>
470 <h4 470 <h4
471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
472 >Library Member</h4> 472 >Library Member</h4>
473 <v-card-actions> 473 <v-card-actions>
474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> 474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3>
475 <v-spacer></v-spacer> 475 <v-spacer></v-spacer>
476 <v-flex xs12 sm4 md2> 476 <v-flex xs12 sm4 md2>
477 <v-select 477 <v-select
478 outline 478 outline
479 small 479 small
480 :items="addclass" 480 :items="addclass"
481 label="Select Class" 481 label="Select Class"
482 v-model="selectStudents" 482 v-model="selectStudents"
483 item-text="classNum" 483 item-text="classNum"
484 item-value="_id" 484 item-value="_id"
485 name="Select Class" 485 name="Select Class"
486 @change="getAllStudents(selectStudents)" 486 @change="getAllStudents(selectStudents)"
487 class="px-2" 487 class="px-2"
488 required 488 required
489 ></v-select> 489 ></v-select>
490 </v-flex> 490 </v-flex>
491 </v-card-actions> 491 </v-card-actions>
492 </v-card> 492 </v-card>
493 <v-data-table 493 <v-data-table
494 :headers="headers" 494 :headers="headers"
495 :items="studentData" 495 :items="studentData"
496 :pagination.sync="pagination" 496 :pagination.sync="pagination"
497 :search="search" 497 :search="search"
498 > 498 >
499 <template slot="items" slot-scope="props"> 499 <template slot="items" slot-scope="props">
500 <td id="td" class="text-xs-center">{{ props.index}}</td> 500 <td id="td" class="text-xs-center">{{ props.index}}</td>
501 <td id="td" class="text-xs-center"> 501 <td id="td" class="text-xs-center">
502 <v-avatar> 502 <v-avatar>
503 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 503 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
504 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 504 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
505 </v-avatar> 505 </v-avatar>
506 </td> 506 </td>
507 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 507 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
508 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 508 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
509 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 509 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
510 <td class="text-xs-center"> 510 <td class="text-xs-center">
511 <v-tooltip top> 511 <v-tooltip top>
512 <img 512 <img
513 slot="activator" 513 slot="activator"
514 v-if="!props.item.libraryId" 514 v-if="!props.item.libraryId"
515 style="cursor:pointer; width:25px; height:18px; " 515 style="cursor:pointer; width:25px; height:18px; "
516 @click="addLibraryData(props.item)" 516 @click="addLibraryData(props.item)"
517 src="/static/icon/add.png" 517 src="/static/icon/add.png"
518 /> 518 />
519 <span>Add</span> 519 <span>Add</span>
520 </v-tooltip> 520 </v-tooltip>
521 <span v-if="props.item.libraryId"> 521 <span v-if="props.item.libraryId">
522 <v-tooltip top> 522 <v-tooltip top>
523 <img 523 <img
524 slot="activator" 524 slot="activator"
525 style="cursor:pointer; width:25px; height:18px; " 525 style="cursor:pointer; width:25px; height:18px; "
526 class="mr5" 526 class="mr5"
527 @click="profile(props.item)" 527 @click="profile(props.item)"
528 src="/static/icon/eye1.png" 528 src="/static/icon/eye1.png"
529 /> 529 />
530 <span>View</span> 530 <span>View</span>
531 </v-tooltip> 531 </v-tooltip>
532 <v-tooltip top> 532 <v-tooltip top>
533 <img 533 <img
534 slot="activator" 534 slot="activator"
535 style="cursor:pointer; width:20px; height:18px; " 535 style="cursor:pointer; width:20px; height:18px; "
536 class="mr5" 536 class="mr5"
537 @click="editItem(props.item)" 537 @click="editItem(props.item)"
538 src="/static/icon/edit1.png" 538 src="/static/icon/edit1.png"
539 /> 539 />
540 <span>Edit</span> 540 <span>Edit</span>
541 </v-tooltip> 541 </v-tooltip>
542 <v-tooltip top> 542 <v-tooltip top>
543 <img 543 <img
544 slot="activator" 544 slot="activator"
545 style="cursor:pointer; width:20px; height:20px; " 545 style="cursor:pointer; width:20px; height:20px; "
546 class="mr5" 546 class="mr5"
547 @click="deleteItem(props.item)" 547 @click="deleteItem(props.item)"
548 src="/static/icon/delete1.png" 548 src="/static/icon/delete1.png"
549 /> 549 />
550 <span>Delete</span> 550 <span>Delete</span>
551 </v-tooltip> 551 </v-tooltip>
552 </span> 552 </span>
553 </td> 553 </td>
554 </template> 554 </template>
555 <v-alert 555 <v-alert
556 slot="no-results" 556 slot="no-results"
557 :value="true" 557 :value="true"
558 color="error" 558 color="error"
559 icon="warning" 559 icon="warning"
560 >Your search for "{{ search }}" found no results.</v-alert> 560 >Your search for "{{ search }}" found no results.</v-alert>
561 </v-data-table> 561 </v-data-table>
562 <div class="loader" v-if="showLoader"> 562 <div class="loader" v-if="showLoader">
563 <v-progress-circular indeterminate color="white"></v-progress-circular> 563 <v-progress-circular indeterminate color="white"></v-progress-circular>
564 </div> 564 </div>
565 </div> 565 </div>
566 </template> 566 </template>
567 567
568 <script> 568 <script>
569 import http from "@/Services/http.js"; 569 import http from "@/Services/http.js";
570 import Util from "@/util"; 570 import Util from "@/util";
571 import moment from "moment"; 571 import moment from "moment";
572 572
573 export default { 573 export default {
574 data: () => ({ 574 data: () => ({
575 snackbar: false, 575 snackbar: false,
576 y: "top", 576 y: "top",
577 x: "right", 577 x: "right",
578 mode: "", 578 mode: "",
579 timeout: 3000, 579 timeout: 3000,
580 text: "", 580 text: "",
581 showLoader: false, 581 showLoader: false,
582 loading: false, 582 loading: false,
583 addLibrary: false, 583 addLibrary: false,
584 dialogStudents: false, 584 dialogStudents: false,
585 editStudentdialog: false, 585 editStudentdialog: false,
586 valid: true, 586 valid: true,
587 libraryIdRules: [v => !!v || "Library Id Fee is required"], 587 libraryIdRules: [v => !!v || "Library Id Fee is required"],
588 libraryFeeRules: [v => !!v || "Library Fee is required"], 588 libraryFeeRules: [v => !!v || "Library Fee is required"],
589 date: null, 589 date: null,
590 search: "", 590 search: "",
591 addclass: [], 591 addclass: [],
592 pagination: { 592 pagination: {
593 rowsPerPage: 15 593 rowsPerPage: 15
594 }, 594 },
595 addBook: {}, 595 addBook: {},
596 imageName: "", 596 imageName: "",
597 imageUrl: "", 597 imageUrl: "",
598 imageFile: "", 598 imageFile: "",
599 headers: [ 599 headers: [
600 { 600 {
601 text: "No", 601 text: "No",
602 align: "center", 602 align: "center",
603 sortable: false, 603 sortable: false,
604 value: "index" 604 value: "index"
605 }, 605 },
606 { 606 {
607 text: "Photo", 607 text: "Photo",
608 value: "uploadCover", 608 value: "uploadCover",
609 sortable: false, 609 sortable: false,
610 align: "center" 610 align: "center"
611 }, 611 },
612 { text: "Name", value: "name", sortable: false, align: "center" }, 612 { text: "Name", value: "name", sortable: false, align: "center" },
613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
614 { text: "Email", value: "email", sortable: false, align: "center" }, 614 { text: "Email", value: "email", sortable: false, align: "center" },
615 { text: "Action", value: "", sortable: false, align: "center" } 615 { text: "Action", value: "", sortable: false, align: "center" }
616 ], 616 ],
617 studentData: [], 617 studentData: [],
618 editedItem: {}, 618 editedItem: {},
619 parentId: "", 619 parentId: "",
620 token: "", 620 token: "",
621 selectStudents: {}, 621 selectStudents: {},
622 editedIndex: -1 622 editedIndex: -1
623 }), 623 }),
624 methods: { 624 methods: {
625 getAllStudents() { 625 getAllStudents() {
626 this.showLoader = true; 626 this.showLoader = true;
627 http() 627 http()
628 .get("/getStudentsList", { 628 .get("/getStudentsList", {
629 params: { classId: this.selectStudents }, 629 params: { classId: this.selectStudents },
630 headers: { Authorization: "Bearer " + this.token } 630 headers: { Authorization: "Bearer " + this.token }
631 }) 631 })
632 .then(response => { 632 .then(response => {
633 this.studentData = response.data.data; 633 this.studentData = response.data.data;
634 this.showLoader = false; 634 this.showLoader = false;
635 }) 635 })
636 .catch(err => { 636 .catch(error => {
637 // console.log("err====>", err); 637 // console.log("err====>", err);
638 if (error.response.status === 401) { 638 if (error.response.status === 401) {
639 this.$router.replace({ path: "/" }); 639 this.$router.replace({ path: "/" });
640 this.$store.dispatch("setToken", null); 640 this.$store.dispatch("setToken", null);
641 this.$store.dispatch("Id", null); 641 this.$store.dispatch("Id", null);
642 this.$store.dispatch("Role", null);
642 } 643 }
643 }); 644 });
644 }, 645 },
645 addLibraryData(item) { 646 addLibraryData(item) {
646 this.addBook.studentId = item._id; 647 this.addBook.studentId = item._id;
647 this.addLibrary = true; 648 this.addLibrary = true;
648 }, 649 },
649 editItem(item) { 650 editItem(item) {
650 this.editedIndex = this.studentData.indexOf(item); 651 this.editedIndex = this.studentData.indexOf(item);
651 this.editedItem = Object.assign({}, item); 652 this.editedItem = Object.assign({}, item);
652 this.editStudentdialog = true; 653 this.editStudentdialog = true;
653 }, 654 },
654 dates: function(date) { 655 dates: function(date) {
655 return moment(date).format("MMMM DD, YYYY"); 656 return moment(date).format("MMMM DD, YYYY");
656 }, 657 },
657 profile(item) { 658 profile(item) {
658 console.log("item", item); 659 console.log("item", item);
659 this.editedIndex = this.studentData.indexOf(item); 660 this.editedIndex = this.studentData.indexOf(item);
660 this.editedItem = Object.assign({}, item); 661 this.editedItem = Object.assign({}, item);
661 this.dialogStudents = true; 662 this.dialogStudents = true;
662 }, 663 },
663 deleteItem(item) { 664 deleteItem(item) {
664 let deleteStudentLibraryData = { 665 let deleteStudentLibraryData = {
665 studentId: item._id, 666 studentId: item._id,
666 libraryId: item.libraryId 667 libraryId: item.libraryId
667 }; 668 };
668 http() 669 http()
669 .put( 670 .put(
670 "/deleteLibrary", 671 "/deleteLibrary",
671 confirm("Are you sure you want to delete this?") && 672 confirm("Are you sure you want to delete this?") &&
672 deleteStudentLibraryData 673 deleteStudentLibraryData
673 ) 674 )
674 .then(response => { 675 .then(response => {
675 this.snackbar = true; 676 this.snackbar = true;
676 this.text = "Delete Successfully"; 677 this.text = "Delete Successfully";
677 this.getAllStudents(); 678 this.getAllStudents();
678 }) 679 })
679 .catch(error => { 680 .catch(error => {
680 // console.log(error); 681 // console.log(error);
681 }); 682 });
682 }, 683 },
683 close() { 684 close() {
684 this.dialog = false; 685 this.dialog = false;
685 }, 686 },
686 closeEditStudentDialog() { 687 closeEditStudentDialog() {
687 this.editStudentdialog = false; 688 this.editStudentdialog = false;
688 }, 689 },
689 closeViewStudent() { 690 closeViewStudent() {
690 this.dialogStudents = false; 691 this.dialogStudents = false;
691 }, 692 },
692 submit() { 693 submit() {
693 if (this.$refs.form.validate()) { 694 if (this.$refs.form.validate()) {
694 this.loading = true; 695 this.loading = true;
695 http() 696 http()
696 .put("/addLibrary", this.addBook) 697 .put("/addLibrary", this.addBook)
697 .then(response => { 698 .then(response => {
698 this.snackbar = true; 699 this.snackbar = true;
699 this.text = "New Library Member added successfully"; 700 this.text = "New Library Member added successfully";
700 this.getAllStudents(); 701 this.getAllStudents();
701 this.clear(); 702 this.clear();
702 this.addLibrary = false; 703 this.addLibrary = false;
703 this.loading = false; 704 this.loading = false;
704 }) 705 })
705 .catch(error => { 706 .catch(error => {
706 // console.log(error); 707 // console.log(error);
707 this.snackbar = true; 708 this.snackbar = true;
708 this.text = error.response.data.message; 709 this.text = error.response.data.message;
709 this.loading = false; 710 this.loading = false;
710 }); 711 });
711 } 712 }
712 }, 713 },
713 clear() { 714 clear() {
714 this.$refs.form.reset(); 715 this.$refs.form.reset();
715 }, 716 },
716 save() { 717 save() {
717 this.editedItem.studentId = this.editedItem._id; 718 this.editedItem.studentId = this.editedItem._id;
718 http() 719 http()
719 .put("/updateLibrary", this.editedItem) 720 .put("/updateLibrary", this.editedItem)
720 .then(response => { 721 .then(response => {
721 this.snackbar = true; 722 this.snackbar = true;
722 this.text = "Edit Library Member Successfully"; 723 this.text = "Edit Library Member Successfully";
723 this.getAllStudents(); 724 this.getAllStudents();
724 this.closeEditStudentDialog(); 725 this.closeEditStudentDialog();
725 }) 726 })
726 .catch(error => { 727 .catch(error => {
727 this.snackbar = true; 728 this.snackbar = true;
728 this.text = error.response.data.statusText; 729 this.text = error.response.data.statusText;
729 }); 730 });
730 }, 731 },
731 getAllClass() { 732 getAllClass() {
732 http() 733 http()
733 .get("/getClassesList", { 734 .get("/getClassesList", {
734 headers: { Authorization: "Bearer " + this.token } 735 headers: { Authorization: "Bearer " + this.token }
735 }) 736 })
736 .then(response => { 737 .then(response => {
737 this.addclass = response.data.data; 738 this.addclass = response.data.data;
738 }) 739 })
739 .catch(err => { 740 .catch(err => {
740 // console.log("err====>", err); 741 // console.log("err====>", err);
741 this.$router.replace({ path: "/" }); 742 this.$router.replace({ path: "/" });
742 }); 743 });
743 } 744 }
744 }, 745 },
745 mounted() { 746 mounted() {
746 // this.getStudentList(); 747 // this.getStudentList();
747 this.token = this.$store.state.token; 748 this.token = this.$store.state.token;
748 this.getAllClass(); 749 this.getAllClass();
749 }, 750 },
750 created() { 751 created() {
751 this.$root.$on("app:search", search => { 752 this.$root.$on("app:search", search => {
752 this.search = search; 753 this.search = search;
753 }); 754 });
754 }, 755 },
755 beforeDestroy() { 756 beforeDestroy() {
756 // dont forget to remove the listener 757 // dont forget to remove the listener
757 this.$root.$off("app:search"); 758 this.$root.$off("app:search");
758 } 759 }
759 }; 760 };
760 </script> 761 </script>
761 <style scoped> 762 <style scoped>
762 .active { 763 .active {
763 background-color: gray; 764 background-color: gray;
764 color: white !important; 765 color: white !important;
765 } 766 }
766 .activebtn { 767 .activebtn {
767 color: black !important; 768 color: black !important;
768 } 769 }
769 </style> 770 </style>
src/pages/Mark/mark.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Mark</v-tab> 10 >Existing Mark</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add Mark</v-tab> 18 >Add Mark</v-tab>
19 19
20 <!-- ****** Edit Mark ****** --> 20 <!-- ****** Edit Mark ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 31
32 <!-- ****** EXISTING MARK TABLE ****** --> 32 <!-- ****** EXISTING MARK TABLE ****** -->
33 33
34 <v-card flat> 34 <v-card flat>
35 <v-flex xs12 sm12 lg12> 35 <v-flex xs12 sm12 lg12>
36 <v-layout wrap> 36 <v-layout wrap>
37 <v-flex xs12 sm12 lg3> 37 <v-flex xs12 sm12 lg3>
38 <v-layout> 38 <v-layout>
39 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 39 <v-flex xs3 sm6 lg2 class="subheading mt-4">
40 <label class="right">Class:</label> 40 <label class="right">Class:</label>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm12 lg8 class="ml-2"> 42 <v-flex xs12 sm12 lg8 class="ml-2">
43 <v-select 43 <v-select
44 v-model="getMark.classId" 44 v-model="getMark.classId"
45 label="Select your class" 45 label="Select your class"
46 type="text" 46 type="text"
47 :items="classList" 47 :items="classList"
48 item-text="classNum" 48 item-text="classNum"
49 item-value="_id" 49 item-value="_id"
50 @change="getSections(getMark.classId)" 50 @change="getSections(getMark.classId)"
51 required 51 required
52 ></v-select> 52 ></v-select>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <v-flex xs12 sm12 lg3> 56 <v-flex xs12 sm12 lg3>
57 <v-layout> 57 <v-layout>
58 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 58 <v-flex xs3 sm6 lg2 class="subheading mt-4">
59 <label class="right">Section:</label> 59 <label class="right">Section:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm12 lg8 class="ml-2"> 61 <v-flex xs12 sm12 lg8 class="ml-2">
62 <v-select 62 <v-select
63 :items="addSection" 63 :items="addSection"
64 label="Select your Section" 64 label="Select your Section"
65 v-model="getMark.sectionId" 65 v-model="getMark.sectionId"
66 item-text="name" 66 item-text="name"
67 item-value="_id" 67 item-value="_id"
68 name="Select Section" 68 name="Select Section"
69 required 69 required
70 ></v-select> 70 ></v-select>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm12 lg6> 74 <v-flex xs12 sm12 lg6>
75 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-4">Mark</v-btn> 75 <v-btn @click="getStudents" round dark :loading="loading" class="right mt-4">Mark</v-btn>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 </v-flex> 78 </v-flex>
79 </v-card> 79 </v-card>
80 <v-data-table 80 <v-data-table
81 :headers="headers" 81 :headers="headers"
82 :items="getStudentsList" 82 :items="getStudentsList"
83 :pagination.sync="pagination" 83 :pagination.sync="pagination"
84 :search="search" 84 :search="search"
85 > 85 >
86 <template slot="items" slot-scope="props"> 86 <template slot="items" slot-scope="props">
87 <td class="text-xs-center">{{ props.index + 1}}</td> 87 <td class="text-xs-center">{{ props.index + 1}}</td>
88 <td id="td" class="text-xs-center"> 88 <td id="td" class="text-xs-center">
89 <v-avatar> 89 <v-avatar>
90 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 90 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
91 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 91 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
92 </v-avatar> 92 </v-avatar>
93 </td> 93 </td>
94 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 94 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
95 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 95 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
96 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 96 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
97 <td class="text-xs-center"> 97 <td class="text-xs-center">
98 <span> 98 <span>
99 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }"> 99 <router-link :to="{ name:'viewMark',params: { markId:props.item._id } }">
100 <v-tooltip top> 100 <v-tooltip top>
101 <img 101 <img
102 slot="activator" 102 slot="activator"
103 style="cursor:pointer; width:20px; height:18px; " 103 style="cursor:pointer; width:20px; height:18px; "
104 class="mr-5" 104 class="mr-5"
105 src="/static/icon/edit1.png" 105 src="/static/icon/edit1.png"
106 /> 106 />
107 <span>Edit</span> 107 <span>Edit</span>
108 </v-tooltip> 108 </v-tooltip>
109 </router-link> 109 </router-link>
110 </span> 110 </span>
111 </td> 111 </td>
112 </template> 112 </template>
113 <v-alert 113 <v-alert
114 slot="no-results" 114 slot="no-results"
115 :value="true" 115 :value="true"
116 color="error" 116 color="error"
117 icon="warning" 117 icon="warning"
118 >Your search for "{{ search }}" found no results.</v-alert> 118 >Your search for "{{ search }}" found no results.</v-alert>
119 </v-data-table> 119 </v-data-table>
120 </v-tab-item> 120 </v-tab-item>
121 121
122 <!-- ****** ADD Mark Schedule ****** --> 122 <!-- ****** ADD Mark Schedule ****** -->
123 123
124 <v-tab-item> 124 <v-tab-item>
125 <v-snackbar 125 <v-snackbar
126 :timeout="timeout" 126 :timeout="timeout"
127 :top="y === 'top'" 127 :top="y === 'top'"
128 :right="x === 'right'" 128 :right="x === 'right'"
129 :vertical="mode === 'vertical'" 129 :vertical="mode === 'vertical'"
130 v-model="snackbar" 130 v-model="snackbar"
131 :color="color" 131 :color="color"
132 >{{ text }}</v-snackbar> 132 >{{ text }}</v-snackbar>
133 <v-form ref="form" v-model="valid" lazy-validation> 133 <v-form ref="form" v-model="valid" lazy-validation>
134 <v-container fluid> 134 <v-container fluid>
135 <v-flex xs12 sm12 lg12> 135 <v-flex xs12 sm12 lg12>
136 <v-layout wrap> 136 <v-layout wrap>
137 <v-flex xs12 sm12 lg10> 137 <v-flex xs12 sm12 lg10>
138 <v-layout wrap> 138 <v-layout wrap>
139 <v-flex xs12 sm12 lg3> 139 <v-flex xs12 sm12 lg3>
140 <v-flex xs3 sm2 lg2 class="subheading"> 140 <v-flex xs3 sm2 lg2 class="subheading">
141 <label>Exam:</label> 141 <label>Exam:</label>
142 </v-flex> 142 </v-flex>
143 <v-flex xs12 sm12 lg10> 143 <v-flex xs12 sm12 lg10>
144 <v-select 144 <v-select
145 label="Select your Exam Name" 145 label="Select your Exam Name"
146 :items="examList" 146 :items="examList"
147 v-model="addMark.examId" 147 v-model="addMark.examId"
148 :rules="examRules" 148 :rules="examRules"
149 item-text="examName" 149 item-text="examName"
150 item-value="_id" 150 item-value="_id"
151 ></v-select> 151 ></v-select>
152 </v-flex> 152 </v-flex>
153 </v-flex> 153 </v-flex>
154 <v-flex xs12 sm12 lg3> 154 <v-flex xs12 sm12 lg3>
155 <v-flex xs3 sm6 lg2 class="subheading"> 155 <v-flex xs3 sm6 lg2 class="subheading">
156 <label>Class:</label> 156 <label>Class:</label>
157 </v-flex> 157 </v-flex>
158 <v-flex xs12 sm12 lg10 class> 158 <v-flex xs12 sm12 lg10 class>
159 <v-select 159 <v-select
160 v-model="addMark.classId" 160 v-model="addMark.classId"
161 label="Select your class" 161 label="Select your class"
162 type="text" 162 type="text"
163 :items="classList" 163 :items="classList"
164 item-text="classNum" 164 item-text="classNum"
165 item-value="_id" 165 item-value="_id"
166 :rules="classRules" 166 :rules="classRules"
167 @change="getSections(addMark.classId)" 167 @change="getSections(addMark.classId)"
168 required 168 required
169 ></v-select> 169 ></v-select>
170 </v-flex> 170 </v-flex>
171 </v-flex> 171 </v-flex>
172 <v-flex xs12 sm12 lg3> 172 <v-flex xs12 sm12 lg3>
173 <v-flex xs3 sm6 lg2 class="subheading"> 173 <v-flex xs3 sm6 lg2 class="subheading">
174 <label>Section:</label> 174 <label>Section:</label>
175 </v-flex> 175 </v-flex>
176 <v-flex xs12 sm12 lg10 class> 176 <v-flex xs12 sm12 lg10 class>
177 <v-select 177 <v-select
178 :items="addSection" 178 :items="addSection"
179 label="Select your Section" 179 label="Select your Section"
180 v-model="addMark.sectionId" 180 v-model="addMark.sectionId"
181 item-text="name" 181 item-text="name"
182 item-value="_id" 182 item-value="_id"
183 name="Select Section" 183 name="Select Section"
184 :rules="sectionRules" 184 :rules="sectionRules"
185 required 185 required
186 ></v-select> 186 ></v-select>
187 </v-flex> 187 </v-flex>
188 </v-flex> 188 </v-flex>
189 <v-flex xs12 sm12 lg3> 189 <v-flex xs12 sm12 lg3>
190 <v-flex xs3 sm6 lg2 class="subheading"> 190 <v-flex xs3 sm6 lg2 class="subheading">
191 <label>Subject:</label> 191 <label>Subject:</label>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm12 lg10 class> 193 <v-flex xs12 sm12 lg10 class>
194 <v-select 194 <v-select
195 :items="subjects" 195 :items="subjects"
196 label="Select your Subject" 196 label="Select your Subject"
197 v-model="addMark.subjectId" 197 v-model="addMark.subjectId"
198 item-text="subjectName" 198 item-text="subjectName"
199 item-value="_id" 199 item-value="_id"
200 name="Select Section" 200 name="Select Section"
201 :rules="subjectRules" 201 :rules="subjectRules"
202 required 202 required
203 ></v-select> 203 ></v-select>
204 </v-flex> 204 </v-flex>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm12 lg2> 208 <v-flex xs12 sm12 lg2>
209 <v-flex xs12 sm12 lg12> 209 <v-flex xs12 sm12 lg12>
210 <v-btn 210 <v-btn
211 @click="findStudents" 211 @click="findStudents"
212 round 212 round
213 dark 213 dark
214 :loading="loading" 214 :loading="loading"
215 class="right mt-4" 215 class="right mt-4"
216 >Mark</v-btn> 216 >Mark</v-btn>
217 </v-flex> 217 </v-flex>
218 </v-flex> 218 </v-flex>
219 </v-layout> 219 </v-layout>
220 </v-flex> 220 </v-flex>
221 <v-card class="mt-4"> 221 <v-card class="mt-4">
222 <v-data-table 222 <v-data-table
223 :headers="headerOfMark" 223 :headers="headerOfMark"
224 :items="getStudentData" 224 :items="getStudentData"
225 :pagination.sync="pagination" 225 :pagination.sync="pagination"
226 :search="search" 226 :search="search"
227 > 227 >
228 <template slot="items" slot-scope="props"> 228 <template slot="items" slot-scope="props">
229 <td class="text-xs-center">{{ props.index + 1}}</td> 229 <td class="text-xs-center">{{ props.index + 1}}</td>
230 <td id="td" class="text-xs-center"> 230 <td id="td" class="text-xs-center">
231 <v-avatar> 231 <v-avatar>
232 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 232 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
233 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 233 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
234 </v-avatar> 234 </v-avatar>
235 </td> 235 </td>
236 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 236 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
237 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 237 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
238 <td 238 <td
239 id="td" 239 id="td"
240 class="text-xs-center markTable" 240 class="text-xs-center markTable"
241 v-for="(marks, index) in props.item.marksObtained" 241 v-for="(marks, index) in props.item.marksObtained"
242 :key="'A'+ index" 242 :key="'A'+ index"
243 > 243 >
244 <v-text-field v-model="marks.marksScored"></v-text-field> 244 <v-text-field v-model="marks.marksScored"></v-text-field>
245 </td> 245 </td>
246 </template> 246 </template>
247 <v-alert 247 <v-alert
248 slot="no-results" 248 slot="no-results"
249 :value="true" 249 :value="true"
250 color="error" 250 color="error"
251 icon="warning" 251 icon="warning"
252 >Your search for "{{ search }}" found no results.</v-alert> 252 >Your search for "{{ search }}" found no results.</v-alert>
253 </v-data-table> 253 </v-data-table>
254 </v-card> 254 </v-card>
255 <v-layout class="mt-2"> 255 <v-layout class="mt-2">
256 <v-flex xs12 sm12> 256 <v-flex xs12 sm12>
257 <v-layout> 257 <v-layout>
258 <v-flex xs12> 258 <v-flex xs12>
259 <v-btn @click="submit" round dark :loading="loading" class="right">Add Mark</v-btn> 259 <v-btn @click="submit" round dark :loading="loading" class="right">Add Mark</v-btn>
260 </v-flex> 260 </v-flex>
261 </v-layout> 261 </v-layout>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-container> 264 </v-container>
265 </v-form> 265 </v-form>
266 </v-tab-item> 266 </v-tab-item>
267 </v-tabs> 267 </v-tabs>
268 <div class="loader" v-if="showLoader"> 268 <div class="loader" v-if="showLoader">
269 <v-progress-circular indeterminate color="white"></v-progress-circular> 269 <v-progress-circular indeterminate color="white"></v-progress-circular>
270 </div> 270 </div>
271 </v-app> 271 </v-app>
272 </template> 272 </template>
273 273
274 <script> 274 <script>
275 import http from "@/Services/http.js"; 275 import http from "@/Services/http.js";
276 import moment from "moment"; 276 import moment from "moment";
277 277
278 export default { 278 export default {
279 data: () => ({ 279 data: () => ({
280 snackbar: false, 280 snackbar: false,
281 date: null, 281 date: null,
282 color: "", 282 color: "",
283 y: "top", 283 y: "top",
284 x: "right", 284 x: "right",
285 mode: "", 285 mode: "",
286 timeout: 10000, 286 timeout: 10000,
287 text: "", 287 text: "",
288 loading: false, 288 loading: false,
289 search: "", 289 search: "",
290 showLoader: false, 290 showLoader: false,
291 dialog: false, 291 dialog: false,
292 dialog1: false, 292 dialog1: false,
293 valid: true, 293 valid: true,
294 isActive: true, 294 isActive: true,
295 newActive: false, 295 newActive: false,
296 addSection: [], 296 addSection: [],
297 pagination: { 297 pagination: {
298 rowsPerPage: 15 298 rowsPerPage: 15
299 }, 299 },
300 classRules: [v => !!v || "Class is required"], 300 classRules: [v => !!v || "Class is required"],
301 sectionRules: [v => !!v || "section is required"], 301 sectionRules: [v => !!v || "section is required"],
302 subjectRules: [v => !!v || "Subject is required"], 302 subjectRules: [v => !!v || "Subject is required"],
303 examRules: [v => !!v || "Exam is required"], 303 examRules: [v => !!v || "Exam is required"],
304 304
305 headerOfMark: [ 305 headerOfMark: [
306 { 306 {
307 align: "justify-center", 307 align: "justify-center",
308 text: "No", 308 text: "No",
309 sortable: false, 309 sortable: false,
310 value: "No" 310 value: "No"
311 }, 311 },
312 { 312 {
313 text: "Profile Pic", 313 text: "Profile Pic",
314 vaue: "profilePicUrl", 314 vaue: "profilePicUrl",
315 sortable: false, 315 sortable: false,
316 align: "center" 316 align: "center"
317 }, 317 },
318 { 318 {
319 text: "Name", 319 text: "Name",
320 vaue: "name", 320 vaue: "name",
321 sortable: false, 321 sortable: false,
322 align: "center" 322 align: "center"
323 }, 323 },
324 { 324 {
325 text: "Roll No.", 325 text: "Roll No.",
326 value: "rollNo", 326 value: "rollNo",
327 sortable: false, 327 sortable: false,
328 align: "center" 328 align: "center"
329 } 329 }
330 ], 330 ],
331 headers: [ 331 headers: [
332 { 332 {
333 align: "justify-center", 333 align: "justify-center",
334 text: "No", 334 text: "No",
335 sortable: false, 335 sortable: false,
336 value: "No" 336 value: "No"
337 }, 337 },
338 { 338 {
339 text: "Profile Pic", 339 text: "Profile Pic",
340 vaue: "profilePicUrl", 340 vaue: "profilePicUrl",
341 sortable: false, 341 sortable: false,
342 align: "center" 342 align: "center"
343 }, 343 },
344 { 344 {
345 text: "Name", 345 text: "Name",
346 vaue: "name", 346 vaue: "name",
347 sortable: false, 347 sortable: false,
348 align: "center" 348 align: "center"
349 }, 349 },
350 { 350 {
351 text: "Roll No.", 351 text: "Roll No.",
352 value: "rollNo", 352 value: "rollNo",
353 sortable: false, 353 sortable: false,
354 align: "center" 354 align: "center"
355 }, 355 },
356 { 356 {
357 text: "Email", 357 text: "Email",
358 value: "email", 358 value: "email",
359 sortable: false, 359 sortable: false,
360 align: "center" 360 align: "center"
361 }, 361 },
362 { text: "Action", value: "", sortable: false, align: "center" } 362 { text: "Action", value: "", sortable: false, align: "center" }
363 ], 363 ],
364 classList: [], 364 classList: [],
365 examList: [], 365 examList: [],
366 subjects: [], 366 subjects: [],
367 addMark: {}, 367 addMark: {},
368 getMark: {}, 368 getMark: {},
369 getScheduleData: {}, 369 getScheduleData: {},
370 markData: [], 370 markData: [],
371 getStudentData: [], 371 getStudentData: [],
372 getStudentsList: [], 372 getStudentsList: [],
373 token: "" 373 token: ""
374 }), 374 }),
375 methods: { 375 methods: {
376 activeTab(type) { 376 activeTab(type) {
377 switch (type) { 377 switch (type) {
378 case "existing": 378 case "existing":
379 this.newActive = false; 379 this.newActive = false;
380 this.isActive = true; 380 this.isActive = true;
381 break; 381 break;
382 382
383 default: 383 default:
384 this.newActive = true; 384 this.newActive = true;
385 this.isActive = false; 385 this.isActive = false;
386 break; 386 break;
387 } 387 }
388 }, 388 },
389 getClass() { 389 getClass() {
390 this.showLoader = true; 390 this.showLoader = true;
391 http() 391 http()
392 .get("/getClassesList", { 392 .get("/getClassesList", {
393 headers: { Authorization: "Bearer " + this.token } 393 headers: { Authorization: "Bearer " + this.token }
394 }) 394 })
395 .then(response => { 395 .then(response => {
396 this.classList = response.data.data; 396 this.classList = response.data.data;
397 this.showLoader = false; 397 this.showLoader = false;
398 }) 398 })
399 .catch(err => { 399 .catch(err => {
400 // console.log("err====>", err); 400 // console.log("err====>", err);
401 this.showLoader = false; 401 this.showLoader = false;
402 }); 402 });
403 }, 403 },
404 getSections(_id) { 404 getSections(_id) {
405 this.showLoader = true; 405 this.showLoader = true;
406 for (let i = 0; i < this.classList.length; i++) { 406 for (let i = 0; i < this.classList.length; i++) {
407 if (_id == this.classList[i]._id) { 407 if (_id == this.classList[i]._id) {
408 this.subjects = this.classList[i].subjects; 408 this.subjects = this.classList[i].subjects;
409 } 409 }
410 } 410 }
411 http() 411 http()
412 .get( 412 .get(
413 "/getSectionsList", 413 "/getSectionsList",
414 { params: { classId: _id } }, 414 { params: { classId: _id } },
415 { 415 {
416 headers: { Authorization: "Bearer " + this.token } 416 headers: { Authorization: "Bearer " + this.token }
417 } 417 }
418 ) 418 )
419 .then(response => { 419 .then(response => {
420 this.addSection = response.data.data; 420 this.addSection = response.data.data;
421 this.showLoader = false; 421 this.showLoader = false;
422 }) 422 })
423 .catch(err => { 423 .catch(err => {
424 // console.log("err====>", err); 424 // console.log("err====>", err);
425 }); 425 });
426 }, 426 },
427 getExamList() { 427 getExamList() {
428 this.showLoader = true; 428 this.showLoader = true;
429 this.loadingSearch = true; 429 this.loadingSearch = true;
430 http() 430 http()
431 .get("/getExamsList", { 431 .get("/getExamsList", {
432 headers: { Authorization: "Bearer " + this.token } 432 headers: { Authorization: "Bearer " + this.token }
433 }) 433 })
434 .then(response => { 434 .then(response => {
435 this.examList = response.data.data; 435 this.examList = response.data.data;
436 this.showLoader = false; 436 this.showLoader = false;
437 this.loadingSearch = false; 437 this.loadingSearch = false;
438 }) 438 })
439 .catch(error => { 439 .catch(error => {
440 // console.log("err====>", err); 440 // console.log("err====>", err);
441 this.showLoader = false; 441 this.showLoader = false;
442 this.loadingSearch = false; 442 this.loadingSearch = false;
443 this.snackbar = true; 443 this.snackbar = true;
444 this.text = error.response.data.message; 444 this.text = error.response.data.message;
445 if (error.response.status === 401) { 445 if (error.response.status === 401) {
446 this.$router.replace({ path: "/" }); 446 this.$router.replace({ path: "/" });
447 this.$store.dispatch("setToken", null); 447 this.$store.dispatch("setToken", null);
448 this.$store.dispatch("Id", null); 448 this.$store.dispatch("Id", null);
449 this.$store.dispatch("Role", null);
449 } 450 }
450 }); 451 });
451 }, 452 },
452 clear() { 453 clear() {
453 this.$refs.form.reset(); 454 this.$refs.form.reset();
454 }, 455 },
455 findStudents() { 456 findStudents() {
456 this.getStudentData = []; 457 this.getStudentData = [];
457 // for (let k = 0; k < this.headerOfMark.length; k++) { 458 // for (let k = 0; k < this.headerOfMark.length; k++) {
458 // this.headerOfMark[k].slice(5); 459 // this.headerOfMark[k].slice(5);
459 // console.log(this.headerOfMark); 460 // console.log(this.headerOfMark);
460 // } 461 // }
461 // console.log(this.headerOfMark); 462 // console.log(this.headerOfMark);
462 463
463 if (this.$refs.form.validate()) { 464 if (this.$refs.form.validate()) {
464 this.showLoader = true; 465 this.showLoader = true;
465 http() 466 http()
466 .get("/getStudentWithClass", { 467 .get("/getStudentWithClass", {
467 params: { 468 params: {
468 classId: this.addMark.classId, 469 classId: this.addMark.classId,
469 sectionId: this.addMark.sectionId 470 sectionId: this.addMark.sectionId
470 } 471 }
471 }) 472 })
472 .then(response => { 473 .then(response => {
473 console.log(" bbbbbbbbbbbbbbbbbbb", this.headerOfMark); 474 console.log(" bbbbbbbbbbbbbbbbbbb", this.headerOfMark);
474 475
475 this.getStudentData = response.data.data; 476 this.getStudentData = response.data.data;
476 this.showLoader = false; 477 this.showLoader = false;
477 this.showLoader = true; 478 this.showLoader = true;
478 http() 479 http()
479 .get("/getMarkDistributionsList", { 480 .get("/getMarkDistributionsList", {
480 params: this.addMark 481 params: this.addMark
481 }) 482 })
482 .then(response => { 483 .then(response => {
483 this.showLoader = false; 484 this.showLoader = false;
484 this.headerOfMark.length = 4; 485 this.headerOfMark.length = 4;
485 // console.log("getSectionsList=====>", response.data.data); 486 // console.log("getSectionsList=====>", response.data.data);
486 for (var i = 0; i < response.data.data.length; i++) { 487 for (var i = 0; i < response.data.data.length; i++) {
487 this.headerOfMark.push({ 488 this.headerOfMark.push({
488 text: 489 text:
489 response.data.data[i].distributionType + 490 response.data.data[i].distributionType +
490 " (" + 491 " (" +
491 response.data.data[i].markValue + 492 response.data.data[i].markValue +
492 ")", 493 ")",
493 sortable: false, 494 sortable: false,
494 align: "center" 495 align: "center"
495 }); 496 });
496 } 497 }
497 for (var n = 0; n < this.getStudentData.length; n++) { 498 for (var n = 0; n < this.getStudentData.length; n++) {
498 this.getStudentData[n].marksObtained = []; 499 this.getStudentData[n].marksObtained = [];
499 for (var j = 0; j < response.data.data.length; j++) { 500 for (var j = 0; j < response.data.data.length; j++) {
500 this.getStudentData[n].marksObtained.push({ 501 this.getStudentData[n].marksObtained.push({
501 markDistributionId: response.data.data[j]._id, 502 markDistributionId: response.data.data[j]._id,
502 marksScored: 0 503 marksScored: 0
503 }); 504 });
504 } 505 }
505 } 506 }
506 }) 507 })
507 .catch(error => { 508 .catch(error => {
508 console.log("err====>", error); 509 console.log("err====>", error);
509 this.showLoader = false; 510 this.showLoader = false;
510 }); 511 });
511 }) 512 })
512 .catch(error => { 513 .catch(error => {
513 console.log("err====>", error); 514 console.log("err====>", error);
514 this.showLoader = false; 515 this.showLoader = false;
515 }); 516 });
516 } 517 }
517 }, 518 },
518 submit() { 519 submit() {
519 for (var j = 0; j < this.getStudentData.length; j++) { 520 for (var j = 0; j < this.getStudentData.length; j++) {
520 let data = { 521 let data = {
521 examId: this.addMark.examId, 522 examId: this.addMark.examId,
522 classId: this.addMark.classId, 523 classId: this.addMark.classId,
523 sectionId: this.addMark.sectionId, 524 sectionId: this.addMark.sectionId,
524 subjectId: this.addMark.subjectId, 525 subjectId: this.addMark.subjectId,
525 studentId: this.getStudentData[j]._id, 526 studentId: this.getStudentData[j]._id,
526 studentsMarks: this.getStudentData[j].marksObtained 527 studentsMarks: this.getStudentData[j].marksObtained
527 }; 528 };
528 http() 529 http()
529 .post("/createMark", data) 530 .post("/createMark", data)
530 .then(response => { 531 .then(response => {
531 this.getStudentData = []; 532 this.getStudentData = [];
532 this.snackbar = true; 533 this.snackbar = true;
533 this.text = response.data.message; 534 this.text = response.data.message;
534 this.color = "green"; 535 this.color = "green";
535 this.loading = false; 536 this.loading = false;
536 this.clear(); 537 this.clear();
537 }) 538 })
538 .catch(error => { 539 .catch(error => {
539 this.snackbar = true; 540 this.snackbar = true;
540 this.text = error.response.data.message; 541 this.text = error.response.data.message;
541 this.color = "red"; 542 this.color = "red";
542 }); 543 });
543 } 544 }
544 }, 545 },
545 getStudents() { 546 getStudents() {
546 this.showLoader = true; 547 this.showLoader = true;
547 http() 548 http()
548 .get("/getStudentWithClass", { 549 .get("/getStudentWithClass", {
549 params: { 550 params: {
550 classId: this.getMark.classId, 551 classId: this.getMark.classId,
551 sectionId: this.getMark.sectionId 552 sectionId: this.getMark.sectionId
552 } 553 }
553 }) 554 })
554 .then(response => { 555 .then(response => {
555 this.getStudentsList = response.data.data; 556 this.getStudentsList = response.data.data;
556 this.showLoader = false; 557 this.showLoader = false;
557 // console.log("getSectionsList=====>", response.data.data); 558 // console.log("getSectionsList=====>", response.data.data);
558 }) 559 })
559 .catch(error => { 560 .catch(error => {
560 console.log("err====>", error); 561 console.log("err====>", error);
561 this.showLoader = false; 562 this.showLoader = false;
562 }); 563 });
563 } 564 }
564 }, 565 },
565 mounted() { 566 mounted() {
566 this.token = this.$store.state.token; 567 this.token = this.$store.state.token;
567 this.getClass(); 568 this.getClass();
568 this.getExamList(); 569 this.getExamList();
569 }, 570 },
570 created() { 571 created() {
571 this.$root.$on("app:search", search => { 572 this.$root.$on("app:search", search => {
572 this.search = search; 573 this.search = search;
573 }); 574 });
574 }, 575 },
575 beforeDestroy() { 576 beforeDestroy() {
576 // dont forget to remove the listener 577 // dont forget to remove the listener
577 this.$root.$off("app:search"); 578 this.$root.$off("app:search");
578 } 579 }
579 }; 580 };
580 </script> 581 </script>
581 <style scoped> 582 <style scoped>
582 .active { 583 .active {
583 background-color: gray; 584 background-color: gray;
584 color: white !important; 585 color: white !important;
585 } 586 }
586 .activebtn { 587 .activebtn {
587 color: black !important; 588 color: black !important;
588 } 589 }
589 .markTable { 590 .markTable {
590 max-width: 80px !important; 591 max-width: 80px !important;
591 } 592 }
592 </style> 593 </style>
593 594
594 595
595 596
596 597
597 598
598 599
599 600
600 601
601 602
602 603
603 604
604 605
605 606
606 607
607 608
608 609
609 610
610 611
611 612
612 613
613 614
614 615
src/pages/Mark/promotion.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-container fluid> 3 <v-container fluid>
4 <v-layout> 4 <v-layout>
5 <v-card-actions> 5 <v-card-actions>
6 <v-layout> 6 <v-layout>
7 <h3 class="right">Promotion</h3> 7 <h3 class="right">Promotion</h3>
8 </v-layout> 8 </v-layout>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 </v-card-actions> 10 </v-card-actions>
11 </v-layout> 11 </v-layout>
12 <v-card class="px-3 grey lighten-2" flat> 12 <v-card class="px-3 grey lighten-2" flat>
13 <v-flex xs12> 13 <v-flex xs12>
14 <v-layout wrap> 14 <v-layout wrap>
15 <v-flex xs12 sm12 md3> 15 <v-flex xs12 sm12 md3>
16 <v-flex md12 class="mt-4 body-1"> 16 <v-flex md12 class="mt-4 body-1">
17 <label>Academic Year :</label> 17 <label>Academic Year :</label>
18 </v-flex> 18 </v-flex>
19 <v-flex md10> 19 <v-flex md10>
20 <v-select 20 <v-select
21 :items="acedemicYear" 21 :items="acedemicYear"
22 v-model="promotion.year" 22 v-model="promotion.year"
23 item-value="year" 23 item-value="year"
24 item-text="year" 24 item-text="year"
25 label="promotion.year" 25 label="promotion.year"
26 ></v-select> 26 ></v-select>
27 </v-flex> 27 </v-flex>
28 </v-flex> 28 </v-flex>
29 <v-flex xs12 sm12 md3> 29 <v-flex xs12 sm12 md3>
30 <v-flex md12 class="mt-4 body-1"> 30 <v-flex md12 class="mt-4 body-1">
31 <label class>Class :</label> 31 <label class>Class :</label>
32 </v-flex> 32 </v-flex>
33 <v-flex md10 class="ml-2"> 33 <v-flex md10 class="ml-2">
34 <v-select 34 <v-select
35 v-model="promotion.classId" 35 v-model="promotion.classId"
36 label="Select your class" 36 label="Select your class"
37 type="text" 37 type="text"
38 :items="classList" 38 :items="classList"
39 item-text="classNum" 39 item-text="classNum"
40 item-value="_id" 40 item-value="_id"
41 required 41 required
42 ></v-select> 42 ></v-select>
43 </v-flex> 43 </v-flex>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm12 md3> 45 <v-flex xs12 sm12 md3>
46 <v-flex md12 class="mt-4 body-1"> 46 <v-flex md12 class="mt-4 body-1">
47 <label>Promotion Academic Year :</label> 47 <label>Promotion Academic Year :</label>
48 </v-flex> 48 </v-flex>
49 <v-flex md10> 49 <v-flex md10>
50 <v-select 50 <v-select
51 :items="acedemicYear" 51 :items="acedemicYear"
52 v-model="promotion.year" 52 v-model="promotion.year"
53 item-text="year" 53 item-text="year"
54 label="Select Promotion Academic Year" 54 label="Select Promotion Academic Year"
55 ></v-select> 55 ></v-select>
56 </v-flex> 56 </v-flex>
57 </v-flex> 57 </v-flex>
58 <v-flex xs12 sm12 md3> 58 <v-flex xs12 sm12 md3>
59 <v-flex md12 class="mt-4 body-1"> 59 <v-flex md12 class="mt-4 body-1">
60 <label class>Promotion Class :</label> 60 <label class>Promotion Class :</label>
61 </v-flex> 61 </v-flex>
62 <v-flex md10 class="ml-2"> 62 <v-flex md10 class="ml-2">
63 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select> 63 <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
64 </v-flex> 64 </v-flex>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-flex> 67 </v-flex>
68 </v-card> 68 </v-card>
69 <!-- <v-container class="pb-0"> 69 <!-- <v-container class="pb-0">
70 <v-card class="px-3 grey lighten-2" flat> 70 <v-card class="px-3 grey lighten-2" flat>
71 <v-flex xs12> 71 <v-flex xs12>
72 <v-layout> 72 <v-layout>
73 <v-flex xs12 sm12 md12> 73 <v-flex xs12 sm12 md12>
74 <v-layout> 74 <v-layout>
75 <v-radio-group v-model="radios" :mandatory="false"> 75 <v-radio-group v-model="radios" :mandatory="false">
76 <v-layout> 76 <v-layout>
77 <v-flex xs12 sm12 md6> 77 <v-flex xs12 sm12 md6>
78 <v-layout> 78 <v-layout>
79 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio> 79 <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 <v-flex xs12 sm12 md6> 82 <v-flex xs12 sm12 md6>
83 <v-layout> 83 <v-layout>
84 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio> 84 <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 </v-radio-group> 88 </v-radio-group>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 </v-flex> 92 </v-flex>
93 </v-card> 93 </v-card>
94 </v-container> 94 </v-container>
95 <v-container fluid> 95 <v-container fluid>
96 <v-layout wrap> 96 <v-layout wrap>
97 <v-flex xs12 sm12 md6> 97 <v-flex xs12 sm12 md6>
98 <v-layout> 98 <v-layout>
99 <v-flex xs12 sm12 md11> 99 <v-flex xs12 sm12 md11>
100 <v-card class="px-3 grey lighten-2" flat> 100 <v-card class="px-3 grey lighten-2" flat>
101 <v-layout wrap> 101 <v-layout wrap>
102 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 102 <v-flex xs12 sm12 md5 class="mt-4 body-1">
103 <label>Exam</label> 103 <label>Exam</label>
104 </v-flex> 104 </v-flex>
105 <v-flex sm12 xs12 md7> 105 <v-flex sm12 xs12 md7>
106 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox> 106 <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox>
107 <v-checkbox 107 <v-checkbox
108 v-model="selected" 108 v-model="selected"
109 label="SECOND TERMINAL" 109 label="SECOND TERMINAL"
110 value="Jacob" 110 value="Jacob"
111 class="mt-0" 111 class="mt-0"
112 ></v-checkbox> 112 ></v-checkbox>
113 <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox> 113 <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-card> 116 </v-card>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 </v-flex> 119 </v-flex>
120 <v-flex xs12 sm12 md6> 120 <v-flex xs12 sm12 md6>
121 <v-layout wrap> 121 <v-layout wrap>
122 <v-flex xs12 sm12 md12> 122 <v-flex xs12 sm12 md12>
123 <v-card class="px-3 grey lighten-2" flat height="160"> 123 <v-card class="px-3 grey lighten-2" flat height="160">
124 <v-layout wrap> 124 <v-layout wrap>
125 <v-flex xs12 sm12 md5 class="mt-4 body-1"> 125 <v-flex xs12 sm12 md5 class="mt-4 body-1">
126 <label>Mark Percentage</label> 126 <label>Mark Percentage</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm12 md7> 128 <v-flex xs12 sm12 md7>
129 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox> 129 <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox>
130 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox> 130 <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-card> 133 </v-card>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-container> 138 </v-container>
139 <v-card class="px-3 grey lighten-2" flat> 139 <v-card class="px-3 grey lighten-2" flat>
140 <v-flex xs12> 140 <v-flex xs12>
141 <v-layout wrap> 141 <v-layout wrap>
142 <v-flex xs12 sm12 md3> 142 <v-flex xs12 sm12 md3>
143 <v-flex md12 class="mt-4 body-1"> 143 <v-flex md12 class="mt-4 body-1">
144 <label>HINDI Pass Mark :</label> 144 <label>HINDI Pass Mark :</label>
145 </v-flex> 145 </v-flex>
146 <v-flex md10> 146 <v-flex md10>
147 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field> 147 <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field>
148 </v-flex> 148 </v-flex>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm12 md3> 150 <v-flex xs12 sm12 md3>
151 <v-flex md12 class="mt-4 body-1"> 151 <v-flex md12 class="mt-4 body-1">
152 <label class>ENGLISH Pass Mark :</label> 152 <label class>ENGLISH Pass Mark :</label>
153 </v-flex> 153 </v-flex>
154 <v-flex md10 class="ml-2"> 154 <v-flex md10 class="ml-2">
155 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field> 155 <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field>
156 </v-flex> 156 </v-flex>
157 </v-flex> 157 </v-flex>
158 <v-flex xs12 sm12 md3> 158 <v-flex xs12 sm12 md3>
159 <v-flex md12 class="mt-4 body-1"> 159 <v-flex md12 class="mt-4 body-1">
160 <label>MATHEMATICS Pass Mark :</label> 160 <label>MATHEMATICS Pass Mark :</label>
161 </v-flex> 161 </v-flex>
162 <v-flex md10> 162 <v-flex md10>
163 <v-text-field 163 <v-text-field
164 v-model="passmark.mathematics" 164 v-model="passmark.mathematics"
165 placeholder="fill Mathematics Pass Mark" 165 placeholder="fill Mathematics Pass Mark"
166 ></v-text-field> 166 ></v-text-field>
167 </v-flex> 167 </v-flex>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-flex> 170 </v-flex>
171 </v-card>--> 171 </v-card>-->
172 <v-layout> 172 <v-layout>
173 <v-flex xs10 sm10 md4 class="mx-auto mt-4"> 173 <v-flex xs10 sm10 md4 class="mx-auto mt-4">
174 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn> 174 <v-btn class="black" dark block round>Promotion Mark Setting</v-btn>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-container> 177 </v-container>
178 </v-app> 178 </v-app>
179 </template> 179 </template>
180 180
181 <script> 181 <script>
182 import http from "@/Services/http.js"; 182 import http from "@/Services/http.js";
183 183
184 export default { 184 export default {
185 data() { 185 data() {
186 return { 186 return {
187 radios: "radio-1", 187 radios: "radio-1",
188 acedemicYear: [], 188 acedemicYear: [],
189 classList: [], 189 classList: [],
190 promotion: { 190 promotion: {
191 // academicYear: "" 191 // academicYear: ""
192 }, 192 },
193 passmark: { 193 passmark: {
194 hindi: "40", 194 hindi: "40",
195 english: "40", 195 english: "40",
196 mathematics: "40" 196 mathematics: "40"
197 }, 197 },
198 selected: ["John", "Jacob", "Jacobs"], 198 selected: ["John", "Jacob", "Jacobs"],
199 token: "" 199 token: ""
200 }; 200 };
201 }, 201 },
202 mounted() { 202 mounted() {
203 var year = new Date().getFullYear() + 1; 203 var year = new Date().getFullYear() + 1;
204 // this.promotion.acedemicYear = new Date().getFullYear() + "-" + year; 204 // this.promotion.acedemicYear = new Date().getFullYear() + "-" + year;
205 this.acedemicYear.push({ year: new Date().getFullYear() + "-" + year }); 205 this.acedemicYear.push({ year: new Date().getFullYear() + "-" + year });
206 console.log(" this.promotion.acedemicYear ", this.acedemicYear); 206 console.log(" this.promotion.acedemicYear ", this.acedemicYear);
207 this.token = this.$store.state.token; 207 this.token = this.$store.state.token;
208 this.getClass(); 208 this.getClass();
209 }, 209 },
210 methods: { 210 methods: {
211 getClass() { 211 getClass() {
212 http() 212 http()
213 .get("/getClassesList", { 213 .get("/getClassesList", {
214 headers: { Authorization: "Bearer " + this.token } 214 headers: { Authorization: "Bearer " + this.token }
215 }) 215 })
216 .then(response => { 216 .then(response => {
217 this.classList = response.data.data; 217 this.classList = response.data.data;
218 }) 218 })
219 .catch(err => { 219 .catch(error => {
220 // console.log("err====>", err); 220 this.showLoader = false;
221 if (error.response.status === 401) {
222 this.$router.replace({ path: "/" });
223 this.$store.dispatch("setToken", null);
224 this.$store.dispatch("Id", null);
225 this.$store.dispatch("Role", null);
226 }
221 }); 227 });
222 } 228 }
223 } 229 }
224 }; 230 };
225 </script> 231 </script>
src/pages/News/news.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing News</v-tab> 10 >Existing News</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add News</v-tab> 18 >Add News</v-tab>
19 19
20 <!-- ****** EDIT NEWS ****** --> 20 <!-- ****** EDIT NEWS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit News</h3> 36 <h3>Edit News</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height:520px;"> 40 <v-card-text style="height:520px;">
41 <!-- <v-form ref="form"> 41 <!-- <v-form ref="form">
42 <v-container fluid>--> 42 <v-container fluid>-->
43 <v-layout row> 43 <v-layout row>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
47 > 47 >
48 <input 48 <input
49 type="file" 49 type="file"
50 style="display: none" 50 style="display: none"
51 ref="image" 51 ref="image"
52 accept="image/*" 52 accept="image/*"
53 multiple 53 multiple
54 @change="onFilePicked" 54 @change="onFilePicked"
55 /> 55 />
56 <v-layout justify-center> 56 <v-layout justify-center>
57 <v-flex 57 <v-flex
58 xs12 58 xs12
59 sm12 59 sm12
60 md3 60 md3
61 v-for="Image in editedItem.newsImageUrl" 61 v-for="Image in editedItem.newsImageUrl"
62 :key="Image._id" 62 :key="Image._id"
63 v-if="editedItem.newsImageUrl" 63 v-if="editedItem.newsImageUrl"
64 class="profile-image-wrapper" 64 class="profile-image-wrapper"
65 > 65 >
66 <img 66 <img
67 :src="Image.imageUrl" 67 :src="Image.imageUrl"
68 height="160" 68 height="160"
69 width="160" 69 width="160"
70 alt="News" 70 alt="News"
71 class="pa-2 imgNews" 71 class="pa-2 imgNews"
72 /> 72 />
73 <v-icon 73 <v-icon
74 class="red edit-profile-icon" 74 class="red edit-profile-icon"
75 dark 75 dark
76 @click="deleteImage(Image._id,editedItem._id)" 76 @click="deleteImage(Image._id,editedItem._id)"
77 >close</v-icon> 77 >close</v-icon>
78 </v-flex> 78 </v-flex>
79 <v-flex v-for="(file, index) in files" :key="index"> 79 <v-flex v-for="(file, index) in files" :key="index">
80 <img :src="file" height="160" width="160" class="pa-2" /> 80 <img :src="file" height="160" width="160" class="pa-2" />
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <img 83 <img
84 src="/static/icon/user.png" 84 src="/static/icon/user.png"
85 v-if="editedItem.newsImageUrl ==''" 85 v-if="editedItem.newsImageUrl ==''"
86 height="160" 86 height="160"
87 width="160" 87 width="160"
88 alt="News" 88 alt="News"
89 /> 89 />
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <!-- </v-layout> --> 92 <!-- </v-layout> -->
93 <v-layout wrap> 93 <v-layout wrap>
94 <v-flex xs12 sm12> 94 <v-flex xs12 sm12>
95 <v-layout> 95 <v-layout>
96 <v-flex xs4 class="pt-4 subheading"> 96 <v-flex xs4 class="pt-4 subheading">
97 <label class="right">Title:</label> 97 <label class="right">Title:</label>
98 </v-flex> 98 </v-flex>
99 <v-flex sm5 xs8 class="ml-3"> 99 <v-flex sm5 xs8 class="ml-3">
100 <v-text-field 100 <v-text-field
101 v-model="editedItem.title" 101 v-model="editedItem.title"
102 placeholder="fill your Title" 102 placeholder="fill your Title"
103 name="name" 103 name="name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-flex xs12 sm12> 110 <v-flex xs12 sm12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">Description:</label> 113 <label class="right">Description:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex sm5 xs8 class="ml-3"> 115 <v-flex sm5 xs8 class="ml-3">
116 <v-text-field 116 <v-text-field
117 placeholder="fill your Description" 117 placeholder="fill your Description"
118 v-model="editedItem.description" 118 v-model="editedItem.description"
119 type="text" 119 type="text"
120 name="email" 120 name="email"
121 required 121 required
122 ></v-text-field> 122 ></v-text-field>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-flex> 125 </v-flex>
126 <v-flex xs12> 126 <v-flex xs12>
127 <v-layout> 127 <v-layout>
128 <v-flex xs4 class="pt-4 subheading"> 128 <v-flex xs4 class="pt-4 subheading">
129 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 129 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
130 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 130 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
131 </v-flex> 131 </v-flex>
132 <v-flex sm5 xs8 class="ml-3"> 132 <v-flex sm5 xs8 class="ml-3">
133 <v-text-field 133 <v-text-field
134 label="Select Image" 134 label="Select Image"
135 @click="pickFile" 135 @click="pickFile"
136 v-model="imageName" 136 v-model="imageName"
137 append-icon="attach_file" 137 append-icon="attach_file"
138 multiple 138 multiple
139 ></v-text-field> 139 ></v-text-field>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 <v-layout> 144 <v-layout>
145 <v-flex xs12 sm8 offset-sm2> 145 <v-flex xs12 sm8 offset-sm2>
146 <v-card-actions> 146 <v-card-actions>
147 <v-btn round dark @click.native="close">Cancel</v-btn> 147 <v-btn round dark @click.native="close">Cancel</v-btn>
148 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
149 <v-btn round dark @click="save">Save</v-btn> 149 <v-btn round dark @click="save">Save</v-btn>
150 </v-card-actions> 150 </v-card-actions>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 </v-card-text> 153 </v-card-text>
154 </v-card> 154 </v-card>
155 </v-dialog> 155 </v-dialog>
156 156
157 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 157 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
158 158
159 <v-dialog v-model="dialog1" max-width="800px"> 159 <v-dialog v-model="dialog1" max-width="800px">
160 <v-card> 160 <v-card>
161 <v-toolbar color="grey lighten-2" flat> 161 <v-toolbar color="grey lighten-2" flat>
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-toolbar-title> 163 <v-toolbar-title>
164 <h3>News</h3> 164 <h3>News</h3>
165 </v-toolbar-title> 165 </v-toolbar-title>
166 <v-spacer></v-spacer> 166 <v-spacer></v-spacer>
167 <v-icon @click="close1">close</v-icon> 167 <v-icon @click="close1">close</v-icon>
168 </v-toolbar> 168 </v-toolbar>
169 <v-flex align-center justify-center layout text-xs-center> 169 <v-flex align-center justify-center layout text-xs-center>
170 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2"> 170 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
171 <img :src="image.imageUrl" alt="News" width="240" height="180" class="imgNews" /> 171 <img :src="image.imageUrl" alt="News" width="240" height="180" class="imgNews" />
172 </span> 172 </span>
173 </v-flex> 173 </v-flex>
174 <v-card-text> 174 <v-card-text>
175 <v-container grid-list-md> 175 <v-container grid-list-md>
176 <v-layout wrap> 176 <v-layout wrap>
177 <v-flex> 177 <v-flex>
178 <v-layout> 178 <v-layout>
179 <v-flex xs5 sm6> 179 <v-flex xs5 sm6>
180 <h5 class="right my-1"> 180 <h5 class="right my-1">
181 <b>Title:</b> 181 <b>Title:</b>
182 </h5> 182 </h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.title }}</h5> 185 <h5 class="my-1">{{ editedItem.title }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 <v-layout> 188 <v-layout>
189 <v-flex xs5 sm6> 189 <v-flex xs5 sm6>
190 <h5 class="right my-1"> 190 <h5 class="right my-1">
191 <b>Description:</b> 191 <b>Description:</b>
192 </h5> 192 </h5>
193 </v-flex> 193 </v-flex>
194 <v-flex sm6 xs8> 194 <v-flex sm6 xs8>
195 <h5 class="my-1">{{ editedItem.description }}</h5> 195 <h5 class="my-1">{{ editedItem.description }}</h5>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 </v-container> 200 </v-container>
201 </v-card-text> 201 </v-card-text>
202 </v-card> 202 </v-card>
203 </v-dialog> 203 </v-dialog>
204 204
205 <v-snackbar 205 <v-snackbar
206 :timeout="timeout" 206 :timeout="timeout"
207 :top="y === 'top'" 207 :top="y === 'top'"
208 :right="x === 'right'" 208 :right="x === 'right'"
209 :vertical="mode === 'vertical'" 209 :vertical="mode === 'vertical'"
210 v-model="snackbar" 210 v-model="snackbar"
211 color="success" 211 color="success"
212 >{{ text }}</v-snackbar> 212 >{{ text }}</v-snackbar>
213 213
214 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 214 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
215 <v-data-table 215 <v-data-table
216 :headers="headers" 216 :headers="headers"
217 :items="desserts" 217 :items="desserts"
218 :pagination.sync="pagination" 218 :pagination.sync="pagination"
219 :search="search" 219 :search="search"
220 > 220 >
221 <template slot="items" slot-scope="props"> 221 <template slot="items" slot-scope="props">
222 <td class="text-xs-center">{{ props.index + 1}}</td> 222 <td class="text-xs-center">{{ props.index + 1}}</td>
223 <td id="td" class="text-xs-center"> 223 <td id="td" class="text-xs-center">
224 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> 224 <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
225 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" /> 225 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
226 </span> 226 </span>
227 </td> 227 </td>
228 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 228 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
229 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 229 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
230 230
231 <td class="text-xs-center"> 231 <td class="text-xs-center">
232 <span> 232 <span>
233 <v-tooltip top> 233 <v-tooltip top>
234 <img 234 <img
235 slot="activator" 235 slot="activator"
236 style="cursor:pointer; width:25px; height:18px; " 236 style="cursor:pointer; width:25px; height:18px; "
237 class="mr5" 237 class="mr5"
238 @click="profile(props.item)" 238 @click="profile(props.item)"
239 src="/static/icon/eye1.png" 239 src="/static/icon/eye1.png"
240 /> 240 />
241 <span>View</span> 241 <span>View</span>
242 </v-tooltip> 242 </v-tooltip>
243 <v-tooltip top> 243 <v-tooltip top>
244 <img 244 <img
245 slot="activator" 245 slot="activator"
246 style="cursor:pointer; width:20px; height:18px; " 246 style="cursor:pointer; width:20px; height:18px; "
247 class="mr5" 247 class="mr5"
248 @click="editItem(props.item)" 248 @click="editItem(props.item)"
249 src="/static/icon/edit1.png" 249 src="/static/icon/edit1.png"
250 /> 250 />
251 <span>Edit</span> 251 <span>Edit</span>
252 </v-tooltip> 252 </v-tooltip>
253 <v-tooltip top> 253 <v-tooltip top>
254 <img 254 <img
255 slot="activator" 255 slot="activator"
256 style="cursor:pointer; width:20px; height:20px; " 256 style="cursor:pointer; width:20px; height:20px; "
257 class="mr5" 257 class="mr5"
258 @click="deleteItem(props.item)" 258 @click="deleteItem(props.item)"
259 src="/static/icon/delete1.png" 259 src="/static/icon/delete1.png"
260 /> 260 />
261 <span>Delete</span> 261 <span>Delete</span>
262 </v-tooltip> 262 </v-tooltip>
263 </span> 263 </span>
264 </td> 264 </td>
265 </template> 265 </template>
266 <v-alert 266 <v-alert
267 slot="no-results" 267 slot="no-results"
268 :value="true" 268 :value="true"
269 color="error" 269 color="error"
270 icon="warning" 270 icon="warning"
271 >Your search for "{{ search }}" found no results.</v-alert> 271 >Your search for "{{ search }}" found no results.</v-alert>
272 </v-data-table> 272 </v-data-table>
273 </v-tab-item> 273 </v-tab-item>
274 274
275 <!-- ****** ADD MULTIPLE NEWS ****** --> 275 <!-- ****** ADD MULTIPLE NEWS ****** -->
276 276
277 <v-tab-item> 277 <v-tab-item>
278 <v-container> 278 <v-container>
279 <v-snackbar 279 <v-snackbar
280 :timeout="timeout" 280 :timeout="timeout"
281 :top="y === 'top'" 281 :top="y === 'top'"
282 :right="x === 'right'" 282 :right="x === 'right'"
283 :vertical="mode === 'vertical'" 283 :vertical="mode === 'vertical'"
284 v-model="snackbar" 284 v-model="snackbar"
285 color="success" 285 color="success"
286 >{{ text }}</v-snackbar> 286 >{{ text }}</v-snackbar>
287 <v-flex xs12 sm12 class="my-4"> 287 <v-flex xs12 sm12 class="my-4">
288 <v-card flat> 288 <v-card flat>
289 <v-form ref="form" v-model="valid" lazy-validation> 289 <v-form ref="form" v-model="valid" lazy-validation>
290 <v-container fluid> 290 <v-container fluid>
291 <v-layout> 291 <v-layout>
292 <v-flex 292 <v-flex
293 xs12 293 xs12
294 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 294 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
295 > 295 >
296 <input 296 <input
297 type="file" 297 type="file"
298 style="display: none" 298 style="display: none"
299 ref="image" 299 ref="image"
300 accept="image/*" 300 accept="image/*"
301 multiple 301 multiple
302 @change="onFilePicked" 302 @change="onFilePicked"
303 /> 303 />
304 <v-layout justify-center> 304 <v-layout justify-center>
305 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 305 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
306 <img :src="file" height="160" width="160px;" class="imgNews" /> 306 <img :src="file" height="160" width="160px;" class="imgNews" />
307 </v-flex> 307 </v-flex>
308 </v-layout> 308 </v-layout>
309 <img 309 <img
310 src="/static/icon/user.png" 310 src="/static/icon/user.png"
311 v-if="files ==''" 311 v-if="files ==''"
312 height="140" 312 height="140"
313 width="180px;" 313 width="180px;"
314 /> 314 />
315 </v-flex> 315 </v-flex>
316 </v-layout> 316 </v-layout>
317 <v-flex xs12> 317 <v-flex xs12>
318 <v-layout> 318 <v-layout>
319 <v-flex xs4 sm4 class="pt-4 subheading"> 319 <v-flex xs4 sm4 class="pt-4 subheading">
320 <label class="right">Title:</label> 320 <label class="right">Title:</label>
321 </v-flex> 321 </v-flex>
322 <v-flex sm4 xs8 class="ml-3"> 322 <v-flex sm4 xs8 class="ml-3">
323 <v-text-field 323 <v-text-field
324 v-model="addNews.title" 324 v-model="addNews.title"
325 placeholder="fill your Title" 325 placeholder="fill your Title"
326 name="name" 326 name="name"
327 type="text" 327 type="text"
328 :rules="titleRules" 328 :rules="titleRules"
329 required 329 required
330 ></v-text-field> 330 ></v-text-field>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 </v-flex> 333 </v-flex>
334 <v-flex xs12> 334 <v-flex xs12>
335 <v-layout> 335 <v-layout>
336 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
337 <label class="right">Description:</label> 337 <label class="right">Description:</label>
338 </v-flex> 338 </v-flex>
339 <v-flex sm4 xs8 class="ml-3"> 339 <v-flex sm4 xs8 class="ml-3">
340 <v-text-field 340 <v-text-field
341 placeholder="fill your Description" 341 placeholder="fill your Description"
342 :rules="descriptionRules" 342 :rules="descriptionRules"
343 v-model="addNews.description" 343 v-model="addNews.description"
344 type="text" 344 type="text"
345 name="email" 345 name="email"
346 required 346 required
347 ></v-text-field> 347 ></v-text-field>
348 </v-flex> 348 </v-flex>
349 </v-layout> 349 </v-layout>
350 </v-flex> 350 </v-flex>
351 <v-flex xs12> 351 <v-flex xs12>
352 <v-layout> 352 <v-layout>
353 <v-flex xs4 class="pt-4 subheading"> 353 <v-flex xs4 class="pt-4 subheading">
354 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 354 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
355 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 355 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
356 </v-flex> 356 </v-flex>
357 <v-flex xs8 sm4 class="ml-3"> 357 <v-flex xs8 sm4 class="ml-3">
358 <v-text-field 358 <v-text-field
359 label="Select Image" 359 label="Select Image"
360 @click="pickFile" 360 @click="pickFile"
361 v-model="imageName" 361 v-model="imageName"
362 append-icon="attach_file" 362 append-icon="attach_file"
363 multiple 363 multiple
364 ></v-text-field> 364 ></v-text-field>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 </v-flex> 367 </v-flex>
368 <v-layout> 368 <v-layout>
369 <v-flex xs12 sm5 offset-sm3> 369 <v-flex xs12 sm5 offset-sm3>
370 <v-layout> 370 <v-layout>
371 <v-flex xs6> 371 <v-flex xs6>
372 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 372 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
373 </v-flex> 373 </v-flex>
374 <v-flex xs6> 374 <v-flex xs6>
375 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 375 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-container> 380 </v-container>
381 </v-form> 381 </v-form>
382 </v-card> 382 </v-card>
383 </v-flex> 383 </v-flex>
384 </v-container> 384 </v-container>
385 </v-tab-item> 385 </v-tab-item>
386 </v-tabs> 386 </v-tabs>
387 <div class="loader" v-if="showLoader"> 387 <div class="loader" v-if="showLoader">
388 <v-progress-circular indeterminate color="white"></v-progress-circular> 388 <v-progress-circular indeterminate color="white"></v-progress-circular>
389 </div> 389 </div>
390 </v-app> 390 </v-app>
391 </template> 391 </template>
392 392
393 <script> 393 <script>
394 import http from "@/Services/http.js"; 394 import http from "@/Services/http.js";
395 import Util from "@/util"; 395 import Util from "@/util";
396 396
397 export default { 397 export default {
398 data: () => ({ 398 data: () => ({
399 snackbar: false, 399 snackbar: false,
400 y: "top", 400 y: "top",
401 x: "right", 401 x: "right",
402 mode: "", 402 mode: "",
403 timeout: 3000, 403 timeout: 3000,
404 text: "", 404 text: "",
405 loading: false, 405 loading: false,
406 date: null, 406 date: null,
407 search: "", 407 search: "",
408 showLoader: false, 408 showLoader: false,
409 dialog: false, 409 dialog: false,
410 dialog1: false, 410 dialog1: false,
411 valid: true, 411 valid: true,
412 isActive: true, 412 isActive: true,
413 newActive: false, 413 newActive: false,
414 addclass: [], 414 addclass: [],
415 addSection: [], 415 addSection: [],
416 AddUsercredentials: {}, 416 AddUsercredentials: {},
417 pagination: { 417 pagination: {
418 rowsPerPage: 15 418 rowsPerPage: 15
419 }, 419 },
420 imageName: "", 420 imageName: "",
421 imageUrl: "", 421 imageUrl: "",
422 imageFile: "", 422 imageFile: "",
423 image: [], 423 image: [],
424 upload: "", 424 upload: "",
425 files: [], 425 files: [],
426 titleRules: [v => !!v || " Tilte is required"], 426 titleRules: [v => !!v || " Tilte is required"],
427 descriptionRules: [v => !!v || " Description is required"], 427 descriptionRules: [v => !!v || " Description is required"],
428 headers: [ 428 headers: [
429 { 429 {
430 align: "justify-center", 430 align: "justify-center",
431 text: "No", 431 text: "No",
432 sortable: false, 432 sortable: false,
433 value: "No" 433 value: "No"
434 }, 434 },
435 { text: "Image", vaue: "image", sortable: false, align: "center" }, 435 { text: "Image", vaue: "image", sortable: false, align: "center" },
436 { text: "Title", value: "title", sortable: false, align: "center" }, 436 { text: "Title", value: "title", sortable: false, align: "center" },
437 { 437 {
438 text: "Description", 438 text: "Description",
439 value: "description", 439 value: "description",
440 sortable: false, 440 sortable: false,
441 align: "center" 441 align: "center"
442 }, 442 },
443 { text: "Action", value: "", sortable: false, align: "center" } 443 { text: "Action", value: "", sortable: false, align: "center" }
444 ], 444 ],
445 desserts: [], 445 desserts: [],
446 editedIndex: -1, 446 editedIndex: -1,
447 addNews: { 447 addNews: {
448 title: "", 448 title: "",
449 description: "" 449 description: ""
450 }, 450 },
451 editedItem: { 451 editedItem: {
452 title: "", 452 title: "",
453 description: "" 453 description: ""
454 }, 454 },
455 defaultItem: { 455 defaultItem: {
456 title: "", 456 title: "",
457 description: "" 457 description: ""
458 } 458 }
459 }), 459 }),
460 methods: { 460 methods: {
461 getSections(_id) { 461 getSections(_id) {
462 console.log("_id", _id); 462 console.log("_id", _id);
463 var token = this.$store.state.token; 463 var token = this.$store.state.token;
464 http() 464 http()
465 .get( 465 .get(
466 "/getSectionsList", 466 "/getSectionsList",
467 { params: { classId: _id } }, 467 { params: { classId: _id } },
468 { 468 {
469 headers: { Authorization: "Bearer " + token } 469 headers: { Authorization: "Bearer " + token }
470 } 470 }
471 ) 471 )
472 .then(response => { 472 .then(response => {
473 this.addSection = response.data.data; 473 this.addSection = response.data.data;
474 // console.log("getSectionsList=====>", this.addSection); 474 // console.log("getSectionsList=====>", this.addSection);
475 }) 475 })
476 .catch(err => { 476 .catch(err => {
477 console.log("err====>", err); 477 console.log("err====>", err);
478 // this.$router.replace({ path: '/' }); 478 // this.$router.replace({ path: '/' });
479 }); 479 });
480 }, 480 },
481 pickFile() { 481 pickFile() {
482 this.$refs.image.click(); 482 this.$refs.image.click();
483 }, 483 },
484 onFilePicked(e) { 484 onFilePicked(e) {
485 // console.log(e) 485 // console.log(e)
486 const files = e.target.files; 486 const files = e.target.files;
487 /** fetch Image Name **/ 487 /** fetch Image Name **/
488 if (files[0] !== undefined) { 488 if (files[0] !== undefined) {
489 this.imageName = files[0].name; 489 this.imageName = files[0].name;
490 if (this.imageName.lastIndexOf(".") <= 0) { 490 if (this.imageName.lastIndexOf(".") <= 0) {
491 return; 491 return;
492 } 492 }
493 this.files = []; 493 this.files = [];
494 // console.log("files", this.files); 494 // console.log("files", this.files);
495 /** Select many image and showing many image add to news card **/ 495 /** Select many image and showing many image add to news card **/
496 const test = Array.from(files).forEach((file, idx) => { 496 const test = Array.from(files).forEach((file, idx) => {
497 const fr = new FileReader(); 497 const fr = new FileReader();
498 const getResult = new Promise(resolve => { 498 const getResult = new Promise(resolve => {
499 fr.onload = e => { 499 fr.onload = e => {
500 this.files.push( 500 this.files.push(
501 // id: idx, 501 // id: idx,
502 e.target.result 502 e.target.result
503 ); 503 );
504 }; 504 };
505 }); 505 });
506 fr.readAsDataURL(file); 506 fr.readAsDataURL(file);
507 return getResult.then(file => { 507 return getResult.then(file => {
508 return file; 508 return file;
509 }); 509 });
510 }); 510 });
511 const fr = new FileReader(); 511 const fr = new FileReader();
512 fr.readAsDataURL(files[0]); 512 fr.readAsDataURL(files[0]);
513 fr.addEventListener("load", () => { 513 fr.addEventListener("load", () => {
514 this.imageFile = files; // this is an image file that can be sent to server... 514 this.imageFile = files; // this is an image file that can be sent to server...
515 // console.log("uploadImage=======>", this.imageFile ); 515 // console.log("uploadImage=======>", this.imageFile );
516 }); 516 });
517 } else { 517 } else {
518 this.imageName = ""; 518 this.imageName = "";
519 this.imageFile = ""; 519 this.imageFile = "";
520 this.imageUrl = ""; 520 this.imageUrl = "";
521 } 521 }
522 }, 522 },
523 getNewsList() { 523 getNewsList() {
524 this.showLoader = true; 524 this.showLoader = true;
525 var token = this.$store.state.token; 525 var token = this.$store.state.token;
526 http() 526 http()
527 .get("/getNewsList", { 527 .get("/getNewsList", {
528 headers: { Authorization: "Bearer " + token } 528 headers: { Authorization: "Bearer " + token }
529 }) 529 })
530 .then(response => { 530 .then(response => {
531 this.desserts = response.data.data; 531 this.desserts = response.data.data;
532 this.showLoader = false; 532 this.showLoader = false;
533 // console.log("getNewsList=====>",this.desserts) 533 // console.log("getNewsList=====>",this.desserts)
534 }) 534 })
535 .catch(err => { 535 .catch(error => {
536 // console.log("err====>", err); 536 // console.log("err====>", err);
537 this.showLoader = false; 537 this.showLoader = false;
538 if (error.response.status === 401) { 538 if (error.response.status === 401) {
539 this.$router.replace({ path: "/" }); 539 this.$router.replace({ path: "/" });
540 this.$store.dispatch("setToken", null); 540 this.$store.dispatch("setToken", null);
541 this.$store.dispatch("Id", null); 541 this.$store.dispatch("Id", null);
542 } 542 }
543 }); 543 });
544 }, 544 },
545 editItem(item) { 545 editItem(item) {
546 this.files = []; 546 this.files = [];
547 this.editedIndex = this.desserts.indexOf(item); 547 this.editedIndex = this.desserts.indexOf(item);
548 this.editedItem = Object.assign({}, item); 548 this.editedItem = Object.assign({}, item);
549 this.dialog = true; 549 this.dialog = true;
550 }, 550 },
551 profile(item) { 551 profile(item) {
552 this.editedIndex = this.desserts.indexOf(item); 552 this.editedIndex = this.desserts.indexOf(item);
553 this.editedItem = Object.assign({}, item); 553 this.editedItem = Object.assign({}, item);
554 this.dialog1 = true; 554 this.dialog1 = true;
555 }, 555 },
556 deleteItem(item) { 556 deleteItem(item) {
557 let deleteNews = { 557 let deleteNews = {
558 newsId: item._id 558 newsId: item._id
559 }; 559 };
560 http() 560 http()
561 .delete( 561 .delete(
562 "/deleteNews", 562 "/deleteNews",
563 confirm("Are you sure you want to delete this?") && { 563 confirm("Are you sure you want to delete this?") && {
564 params: deleteNews 564 params: deleteNews
565 } 565 }
566 ) 566 )
567 .then(response => { 567 .then(response => {
568 // console.log("deleteNews",deleteNews) 568 // console.log("deleteNews",deleteNews)
569 if ((this.snackbar = true)) { 569 if ((this.snackbar = true)) {
570 this.text = "Successfully delete Existing News"; 570 this.text = "Successfully delete Existing News";
571 } 571 }
572 this.getNewsList(); 572 this.getNewsList();
573 }) 573 })
574 .catch(error => { 574 .catch(error => {
575 // console.log(error); 575 // console.log(error);
576 }); 576 });
577 }, 577 },
578 deleteImage(imageId, newsId) { 578 deleteImage(imageId, newsId) {
579 console.log(imageId, newsId); 579 console.log(imageId, newsId);
580 let deleteImages = { 580 let deleteImages = {
581 newsId: newsId, 581 newsId: newsId,
582 imageId: imageId 582 imageId: imageId
583 }; 583 };
584 http() 584 http()
585 .put("/deleteImages", deleteImages) 585 .put("/deleteImages", deleteImages)
586 .then(response => { 586 .then(response => {
587 console.log("deleteNews", deleteImages); 587 console.log("deleteNews", deleteImages);
588 if ((this.snackbar = true)) { 588 if ((this.snackbar = true)) {
589 this.text = "Image deleted Successfully"; 589 this.text = "Image deleted Successfully";
590 } 590 }
591 this.getNewsList(); 591 this.getNewsList();
592 this.close(); 592 this.close();
593 }) 593 })
594 .catch(error => { 594 .catch(error => {
595 console.log(error); 595 console.log(error);
596 }); 596 });
597 }, 597 },
598 activeTab(type) { 598 activeTab(type) {
599 switch (type) { 599 switch (type) {
600 case "existing": 600 case "existing":
601 this.newActive = false; 601 this.newActive = false;
602 this.isActive = true; 602 this.isActive = true;
603 break; 603 break;
604 604
605 default: 605 default:
606 this.newActive = true; 606 this.newActive = true;
607 this.isActive = false; 607 this.isActive = false;
608 break; 608 break;
609 } 609 }
610 }, 610 },
611 close() { 611 close() {
612 this.dialog = false; 612 this.dialog = false;
613 setTimeout(() => { 613 setTimeout(() => {
614 this.editedItem = Object.assign({}, this.defaultItem); 614 this.editedItem = Object.assign({}, this.defaultItem);
615 this.editedIndex = -1; 615 this.editedIndex = -1;
616 }, 300); 616 }, 300);
617 }, 617 },
618 close1() { 618 close1() {
619 this.dialog1 = false; 619 this.dialog1 = false;
620 }, 620 },
621 submit() { 621 submit() {
622 this.loading = true; 622 this.loading = true;
623 if (this.$refs.form.validate()) { 623 if (this.$refs.form.validate()) {
624 let newsData = { 624 let newsData = {
625 title: this.addNews.title, 625 title: this.addNews.title,
626 description: this.addNews.description 626 description: this.addNews.description
627 }; 627 };
628 if (this.files) { 628 if (this.files) {
629 var ary = []; 629 var ary = [];
630 var imageData = []; 630 var imageData = [];
631 ary = this.files; 631 ary = this.files;
632 for (let i = 0; i < ary.length; i++) { 632 for (let i = 0; i < ary.length; i++) {
633 const [baseUrl, imageUrl] = ary[i].split(/,/); 633 const [baseUrl, imageUrl] = ary[i].split(/,/);
634 imageData.push(imageUrl); 634 imageData.push(imageUrl);
635 newsData.upload = imageData; 635 newsData.upload = imageData;
636 } 636 }
637 } 637 }
638 http() 638 http()
639 .post("/createNews", newsData) 639 .post("/createNews", newsData)
640 .then(response => { 640 .then(response => {
641 this.files = []; 641 this.files = [];
642 this.snackbar = true; 642 this.snackbar = true;
643 this.text = "New News added successfully"; 643 this.text = "New News added successfully";
644 this.getNewsList(); 644 this.getNewsList();
645 this.loading = false; 645 this.loading = false;
646 this.clear(); 646 this.clear();
647 }) 647 })
648 .catch(error => { 648 .catch(error => {
649 this.snackbar = true; 649 this.snackbar = true;
650 this.text = error.response.data.message; 650 this.text = error.response.data.message;
651 }); 651 });
652 } 652 }
653 }, 653 },
654 clear() { 654 clear() {
655 this.$refs.form.reset(); 655 this.$refs.form.reset();
656 this.files = []; 656 this.files = [];
657 }, 657 },
658 save() { 658 save() {
659 let editNews = { 659 let editNews = {
660 title: this.editedItem.title, 660 title: this.editedItem.title,
661 description: this.editedItem.description, 661 description: this.editedItem.description,
662 newsId: this.editedItem._id 662 newsId: this.editedItem._id
663 }; 663 };
664 if (this.files) { 664 if (this.files) {
665 var ary = []; 665 var ary = [];
666 var imageData = []; 666 var imageData = [];
667 ary = this.files; 667 ary = this.files;
668 for (let i = 0; i < ary.length; i++) { 668 for (let i = 0; i < ary.length; i++) {
669 const [baseUrl, imageUrl] = ary[i].split(/,/); 669 const [baseUrl, imageUrl] = ary[i].split(/,/);
670 imageData.push(imageUrl); 670 imageData.push(imageUrl);
671 editNews.upload = imageData; 671 editNews.upload = imageData;
672 } 672 }
673 } 673 }
674 http() 674 http()
675 .put("/updateNews", editNews) 675 .put("/updateNews", editNews)
676 .then(response => { 676 .then(response => {
677 // console.log("updateNews",updateNews); 677 // console.log("updateNews",updateNews);
678 if ((this.snackbar = true)) { 678 if ((this.snackbar = true)) {
679 this.text = "Successfully Edit Existing News"; 679 this.text = "Successfully Edit Existing News";
680 } 680 }
681 this.getNewsList(); 681 this.getNewsList();
682 this.close(); 682 this.close();
683 }) 683 })
684 .catch(error => { 684 .catch(error => {
685 // console.log(error); 685 // console.log(error);
686 }); 686 });
687 } 687 }
688 }, 688 },
689 mounted() { 689 mounted() {
690 this.getNewsList(); 690 this.getNewsList();
691 this.editItem; 691 this.editItem;
692 }, 692 },
693 created() { 693 created() {
694 this.$root.$on("app:search", search => { 694 this.$root.$on("app:search", search => {
695 this.search = search; 695 this.search = search;
696 }); 696 });
697 }, 697 },
698 beforeDestroy() { 698 beforeDestroy() {
699 // dont forget to remove the listener 699 // dont forget to remove the listener
700 this.$root.$off("app:search"); 700 this.$root.$off("app:search");
701 } 701 }
702 }; 702 };
703 </script> 703 </script>
704 <style scoped> 704 <style scoped>
705 .active { 705 .active {
706 background-color: gray; 706 background-color: gray;
707 color: white !important; 707 color: white !important;
708 } 708 }
709 .activebtn { 709 .activebtn {
710 color: black !important; 710 color: black !important;
711 } 711 }
712 </style> 712 </style>
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Notice Board</v-tab> 10 >Existing Notice Board</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Notice Board</v-tab> 18 >Add New Notice Board</v-tab>
19 19
20 <!-- ****** Edit Notice Board ****** --> 20 <!-- ****** Edit Notice Board ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="640px" scrollable> 31 <v-dialog v-model="dialog" max-width="640px" scrollable>
32 <v-card> 32 <v-card>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Notice Board</h3> 36 <h3>Edit Notice Board</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text> 40 <v-card-text>
41 <v-layout> 41 <v-layout>
42 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 42 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
43 <img 43 <img
44 src="/static/icon/user.png" 44 src="/static/icon/user.png"
45 v-if="!editedItem.eventImageUrl && !imageUrl" 45 v-if="!editedItem.eventImageUrl && !imageUrl"
46 width="150px" 46 width="150px"
47 /> 47 />
48 <img 48 <img
49 :src="editedItem.eventImageUrl" 49 :src="editedItem.eventImageUrl"
50 height="150" 50 height="150"
51 v-else-if="editedItem.eventImageUrl && !imageUrl" 51 v-else-if="editedItem.eventImageUrl && !imageUrl"
52 width="180px" 52 width="180px"
53 /> 53 />
54 <img 54 <img
55 v-if="imageUrl" 55 v-if="imageUrl"
56 :src="imageUrl" 56 :src="imageUrl"
57 height="150" 57 height="150"
58 style="border-radius:50%; width:200px" 58 style="border-radius:50%; width:200px"
59 /> 59 />
60 <input 60 <input
61 type="file" 61 type="file"
62 style="display: none" 62 style="display: none"
63 ref="image" 63 ref="image"
64 accept="image/*" 64 accept="image/*"
65 @change="onFilePicked" 65 @change="onFilePicked"
66 /> 66 />
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 <v-layout wrap> 69 <v-layout wrap>
70 <v-flex xs12> 70 <v-flex xs12>
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">Title:</label> 73 <label class="right">Title:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs6 class="ml-3"> 75 <v-flex xs6 class="ml-3">
76 <v-text-field 76 <v-text-field
77 v-model="editedItem.title" 77 v-model="editedItem.title"
78 placeholder="fill your Title" 78 placeholder="fill your Title"
79 name="name" 79 name="name"
80 type="text" 80 type="text"
81 required 81 required
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-flex xs12> 86 <v-flex xs12>
87 <v-layout> 87 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Description:</label> 89 <label class="right">Description:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs6 class="ml-3"> 91 <v-flex xs6 class="ml-3">
92 <v-text-field 92 <v-text-field
93 placeholder="fill your Description" 93 placeholder="fill your Description"
94 v-model="editedItem.description" 94 v-model="editedItem.description"
95 type="text" 95 type="text"
96 name="email" 96 name="email"
97 required 97 required
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-layout> 103 <v-layout>
104 <v-flex xs4 class="pt-4 subheading"> 104 <v-flex xs4 class="pt-4 subheading">
105 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 105 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
106 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 106 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
107 </v-flex> 107 </v-flex>
108 <v-flex xs6 class="ml-3"> 108 <v-flex xs6 class="ml-3">
109 <v-text-field 109 <v-text-field
110 label="Select Image" 110 label="Select Image"
111 @click="pickFile" 111 @click="pickFile"
112 v-model="imageName" 112 v-model="imageName"
113 append-icon="attach_file" 113 append-icon="attach_file"
114 ></v-text-field> 114 ></v-text-field>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-flex> 117 </v-flex>
118 <v-flex xs12 sm9 offset-sm2> 118 <v-flex xs12 sm9 offset-sm2>
119 <v-card-actions> 119 <v-card-actions>
120 <v-btn round dark @click.native="close">Cancel</v-btn> 120 <v-btn round dark @click.native="close">Cancel</v-btn>
121 <v-spacer></v-spacer> 121 <v-spacer></v-spacer>
122 <v-btn round dark @click="save">Save</v-btn> 122 <v-btn round dark @click="save">Save</v-btn>
123 </v-card-actions> 123 </v-card-actions>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-card-text> 126 </v-card-text>
127 </v-card> 127 </v-card>
128 </v-dialog> 128 </v-dialog>
129 129
130 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 130 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
131 131
132 <v-dialog v-model="dialog1" max-width="640px" scrollable> 132 <v-dialog v-model="dialog1" max-width="640px" scrollable>
133 <v-card> 133 <v-card>
134 <v-toolbar color="grey lighten-2" flat> 134 <v-toolbar color="grey lighten-2" flat>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-toolbar-title> 136 <v-toolbar-title>
137 <h3>Notice Board</h3> 137 <h3>Notice Board</h3>
138 </v-toolbar-title> 138 </v-toolbar-title>
139 <v-spacer></v-spacer> 139 <v-spacer></v-spacer>
140 <v-icon @click="close1">close</v-icon> 140 <v-icon @click="close1">close</v-icon>
141 </v-toolbar> 141 </v-toolbar>
142 <v-card-text> 142 <v-card-text>
143 <v-layout> 143 <v-layout>
144 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 144 <v-flex align-center justify-center layout text-xs-center class="mt-2">
145 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" /> 145 <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />
146 <img 146 <img
147 :src="editedItem.eventImageUrl" 147 :src="editedItem.eventImageUrl"
148 v-else-if="editedItem.eventImageUrl" 148 v-else-if="editedItem.eventImageUrl"
149 class="img" 149 class="img"
150 width="200" 150 width="200"
151 /> 151 />
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 <v-container grid-list-md> 154 <v-container grid-list-md>
155 <v-layout wrap> 155 <v-layout wrap>
156 <v-flex> 156 <v-flex>
157 <v-layout> 157 <v-layout>
158 <v-flex xs5 sm6> 158 <v-flex xs5 sm6>
159 <h5 class="right my-1"> 159 <h5 class="right my-1">
160 <b>Title:</b> 160 <b>Title:</b>
161 </h5> 161 </h5>
162 </v-flex> 162 </v-flex>
163 <v-flex sm6 xs8> 163 <v-flex sm6 xs8>
164 <h5 class="my-1">{{ editedItem.title }}</h5> 164 <h5 class="my-1">{{ editedItem.title }}</h5>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-layout> 167 <v-layout>
168 <v-flex xs5 sm6> 168 <v-flex xs5 sm6>
169 <h5 class="right my-1"> 169 <h5 class="right my-1">
170 <b>Description:</b> 170 <b>Description:</b>
171 </h5> 171 </h5>
172 </v-flex> 172 </v-flex>
173 <v-flex sm6 xs8> 173 <v-flex sm6 xs8>
174 <h5 class="my-1">{{ editedItem.description }}</h5> 174 <h5 class="my-1">{{ editedItem.description }}</h5>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-container> 179 </v-container>
180 </v-card-text> 180 </v-card-text>
181 </v-card> 181 </v-card>
182 </v-dialog> 182 </v-dialog>
183 183
184 <v-snackbar 184 <v-snackbar
185 :timeout="timeout" 185 :timeout="timeout"
186 :top="y === 'top'" 186 :top="y === 'top'"
187 :right="x === 'right'" 187 :right="x === 'right'"
188 :vertical="mode === 'vertical'" 188 :vertical="mode === 'vertical'"
189 v-model="snackbar" 189 v-model="snackbar"
190 color="success" 190 color="success"
191 >{{ text }}</v-snackbar> 191 >{{ text }}</v-snackbar>
192 192
193 <!-- ****** EXISTING-USERS Notice Board TABLE ****** --> 193 <!-- ****** EXISTING-USERS Notice Board TABLE ****** -->
194 194
195 <v-data-table 195 <v-data-table
196 :headers="headers" 196 :headers="headers"
197 :items="desserts" 197 :items="desserts"
198 :pagination.sync="pagination" 198 :pagination.sync="pagination"
199 :search="search" 199 :search="search"
200 > 200 >
201 <template slot="items" slot-scope="props"> 201 <template slot="items" slot-scope="props">
202 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 202 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
203 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 203 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
204 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 204 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
205 205
206 <td class="text-xs-center"> 206 <td class="text-xs-center">
207 <span> 207 <span>
208 <v-tooltip top> 208 <v-tooltip top>
209 <img 209 <img
210 slot="activator" 210 slot="activator"
211 style="cursor:pointer; width:25px; height:18px; " 211 style="cursor:pointer; width:25px; height:18px; "
212 class="mr5" 212 class="mr5"
213 @click="profile(props.item)" 213 @click="profile(props.item)"
214 src="/static/icon/eye1.png" 214 src="/static/icon/eye1.png"
215 /> 215 />
216 <span>View</span> 216 <span>View</span>
217 </v-tooltip> 217 </v-tooltip>
218 <v-tooltip top> 218 <v-tooltip top>
219 <img 219 <img
220 slot="activator" 220 slot="activator"
221 style="cursor:pointer; width:20px; height:18px; " 221 style="cursor:pointer; width:20px; height:18px; "
222 class="mr5" 222 class="mr5"
223 @click="editItem(props.item)" 223 @click="editItem(props.item)"
224 src="/static/icon/edit1.png" 224 src="/static/icon/edit1.png"
225 /> 225 />
226 <span>Edit</span> 226 <span>Edit</span>
227 </v-tooltip> 227 </v-tooltip>
228 <v-tooltip top> 228 <v-tooltip top>
229 <img 229 <img
230 slot="activator" 230 slot="activator"
231 style="cursor:pointer; width:20px; height:20px; " 231 style="cursor:pointer; width:20px; height:20px; "
232 class="mr5" 232 class="mr5"
233 @click="deleteItem(props.item)" 233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png" 234 src="/static/icon/delete1.png"
235 /> 235 />
236 <span>Delete</span> 236 <span>Delete</span>
237 </v-tooltip> 237 </v-tooltip>
238 </span> 238 </span>
239 </td> 239 </td>
240 </template> 240 </template>
241 <v-alert 241 <v-alert
242 slot="no-results" 242 slot="no-results"
243 :value="true" 243 :value="true"
244 color="error" 244 color="error"
245 icon="warning" 245 icon="warning"
246 >Your search for "{{ search }}" found no results.</v-alert> 246 >Your search for "{{ search }}" found no results.</v-alert>
247 </v-data-table> 247 </v-data-table>
248 </v-tab-item> 248 </v-tab-item>
249 249
250 <!-- ****** ADD MULTIPLE Notice Board ****** --> 250 <!-- ****** ADD MULTIPLE Notice Board ****** -->
251 251
252 <v-tab-item> 252 <v-tab-item>
253 <v-container> 253 <v-container>
254 <v-snackbar 254 <v-snackbar
255 :timeout="timeout" 255 :timeout="timeout"
256 :top="y === 'top'" 256 :top="y === 'top'"
257 :right="x === 'right'" 257 :right="x === 'right'"
258 :vertical="mode === 'vertical'" 258 :vertical="mode === 'vertical'"
259 v-model="snackbar" 259 v-model="snackbar"
260 color="success" 260 color="success"
261 >{{ text }}</v-snackbar> 261 >{{ text }}</v-snackbar>
262 <v-flex xs12 sm8 offset-sm2 class="top"> 262 <v-flex xs12 sm8 offset-sm2 class="top">
263 <v-card flat> 263 <v-card flat>
264 <v-container fluid fill-height> 264 <v-container fluid fill-height>
265 <v-layout align-center> 265 <v-layout align-center>
266 <v-flex xs12> 266 <v-flex xs12>
267 <v-form ref="form" v-model="valid" lazy-validation> 267 <v-form ref="form" v-model="valid" lazy-validation>
268 <v-layout> 268 <v-layout>
269 <v-flex 269 <v-flex
270 xs12 270 xs12
271 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 271 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
272 > 272 >
273 <v-avatar size="100px"> 273 <v-avatar size="100px">
274 <img src="/static/icon/user.png" v-if="!imageUrl" /> 274 <img src="/static/icon/user.png" v-if="!imageUrl" />
275 </v-avatar> 275 </v-avatar>
276 <input 276 <input
277 type="file" 277 type="file"
278 style="display: none" 278 style="display: none"
279 ref="image" 279 ref="image"
280 accept="image/*" 280 accept="image/*"
281 @change="onFilePicked" 281 @change="onFilePicked"
282 /> 282 />
283 <img 283 <img
284 :src="imageUrl" 284 :src="imageUrl"
285 height="150" 285 height="150"
286 v-if="imageUrl" 286 v-if="imageUrl"
287 style="border-radius:50%; width:200px" 287 style="border-radius:50%; width:200px"
288 /> 288 />
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Title:</label> 293 <label class="right">Title:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs6 class="ml-3"> 295 <v-flex xs6 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="addNoticeBoard.title" 297 v-model="addNoticeBoard.title"
298 placeholder="fill your Title" 298 placeholder="fill your Title"
299 name="name" 299 name="name"
300 type="text" 300 type="text"
301 :rules="titleRules" 301 :rules="titleRules"
302 required 302 required
303 ></v-text-field> 303 ></v-text-field>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 <v-layout> 306 <v-layout>
307 <v-flex xs4 class="pt-4 subheading"> 307 <v-flex xs4 class="pt-4 subheading">
308 <label class="right">Description:</label> 308 <label class="right">Description:</label>
309 </v-flex> 309 </v-flex>
310 <v-flex xs6 class="ml-3"> 310 <v-flex xs6 class="ml-3">
311 <v-text-field 311 <v-text-field
312 v-model="addNoticeBoard.description" 312 v-model="addNoticeBoard.description"
313 placeholder="fill your Description" 313 placeholder="fill your Description"
314 name="name" 314 name="name"
315 type="text" 315 type="text"
316 :rules="descriptionRules" 316 :rules="descriptionRules"
317 required 317 required
318 ></v-text-field> 318 ></v-text-field>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs4 class="pt-4 subheading"> 322 <v-flex xs4 class="pt-4 subheading">
323 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 323 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
324 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 324 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
325 </v-flex> 325 </v-flex>
326 <v-flex xs6 class="ml-3"> 326 <v-flex xs6 class="ml-3">
327 <v-text-field 327 <v-text-field
328 label="Select Image" 328 label="Select Image"
329 @click="pickFile" 329 @click="pickFile"
330 v-model="imageName" 330 v-model="imageName"
331 append-icon="attach_file" 331 append-icon="attach_file"
332 ></v-text-field> 332 ></v-text-field>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 <v-layout> 335 <v-layout>
336 <v-flex xs12 sm9 offset-sm2> 336 <v-flex xs12 sm9 offset-sm2>
337 <v-card-actions> 337 <v-card-actions>
338 <v-btn @click="clear" round dark>clear</v-btn> 338 <v-btn @click="clear" round dark>clear</v-btn>
339 <v-spacer></v-spacer> 339 <v-spacer></v-spacer>
340 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 340 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
341 </v-card-actions> 341 </v-card-actions>
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 </v-form> 344 </v-form>
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 </v-container> 347 </v-container>
348 </v-card> 348 </v-card>
349 </v-flex> 349 </v-flex>
350 </v-container> 350 </v-container>
351 </v-tab-item> 351 </v-tab-item>
352 </v-tabs> 352 </v-tabs>
353 <div class="loader" v-if="showLoader"> 353 <div class="loader" v-if="showLoader">
354 <v-progress-circular indeterminate color="white"></v-progress-circular> 354 <v-progress-circular indeterminate color="white"></v-progress-circular>
355 </div> 355 </div>
356 </v-app> 356 </v-app>
357 </template> 357 </template>
358 358
359 <script> 359 <script>
360 import http from "@/Services/http.js"; 360 import http from "@/Services/http.js";
361 import Util from "@/util"; 361 import Util from "@/util";
362 362
363 export default { 363 export default {
364 data: () => ({ 364 data: () => ({
365 snackbar: false, 365 snackbar: false,
366 y: "top", 366 y: "top",
367 x: "right", 367 x: "right",
368 mode: "", 368 mode: "",
369 timeout: 3000, 369 timeout: 3000,
370 text: "", 370 text: "",
371 showLoader: false, 371 showLoader: false,
372 loading: false, 372 loading: false,
373 date: null, 373 date: null,
374 search: "", 374 search: "",
375 dialog: false, 375 dialog: false,
376 dialog1: false, 376 dialog1: false,
377 valid: true, 377 valid: true,
378 isActive: true, 378 isActive: true,
379 newActive: false, 379 newActive: false,
380 addclass: [], 380 addclass: [],
381 addSection: [], 381 addSection: [],
382 gender: ["Male", "Female"], 382 gender: ["Male", "Female"],
383 AddUsercredentials: {}, 383 AddUsercredentials: {},
384 pagination: { 384 pagination: {
385 rowsPerPage: 19 385 rowsPerPage: 19
386 }, 386 },
387 imageName: "", 387 imageName: "",
388 imageUrl: "", 388 imageUrl: "",
389 imageFile: "", 389 imageFile: "",
390 upload: "", 390 upload: "",
391 titleRules: [v => !!v || " Title is required"], 391 titleRules: [v => !!v || " Title is required"],
392 descriptionRules: [v => !!v || " Description is required"], 392 descriptionRules: [v => !!v || " Description is required"],
393 headers: [ 393 headers: [
394 { 394 {
395 text: "No", 395 text: "No",
396 align: "center", 396 align: "center",
397 sortable: false, 397 sortable: false,
398 value: "No" 398 value: "No"
399 }, 399 },
400 { text: "Title", value: "title", sortable: false, align: "center" }, 400 { text: "Title", value: "title", sortable: false, align: "center" },
401 { 401 {
402 text: "Description", 402 text: "Description",
403 value: "description", 403 value: "description",
404 sortable: false, 404 sortable: false,
405 align: "center" 405 align: "center"
406 }, 406 },
407 { text: "Action", value: "", sortable: false, align: "center" } 407 { text: "Action", value: "", sortable: false, align: "center" }
408 ], 408 ],
409 desserts: [], 409 desserts: [],
410 editedIndex: -1, 410 editedIndex: -1,
411 addNoticeBoard: {}, 411 addNoticeBoard: {},
412 editedItem: { 412 editedItem: {
413 title: "", 413 title: "",
414 description: "" 414 description: ""
415 }, 415 },
416 defaultItem: { 416 defaultItem: {
417 title: "", 417 title: "",
418 description: "" 418 description: ""
419 } 419 }
420 }), 420 }),
421 methods: { 421 methods: {
422 pickFile() { 422 pickFile() {
423 this.$refs.image.click(); 423 this.$refs.image.click();
424 }, 424 },
425 425
426 onFilePicked(e) { 426 onFilePicked(e) {
427 // console.log(e) 427 // console.log(e)
428 const files = e.target.files; 428 const files = e.target.files;
429 this.upload = e.target.files[0]; 429 this.upload = e.target.files[0];
430 console.log("thisupload==>", this.upload); 430 console.log("thisupload==>", this.upload);
431 if (files[0] !== undefined) { 431 if (files[0] !== undefined) {
432 this.imageName = files[0].name; 432 this.imageName = files[0].name;
433 if (this.imageName.lastIndexOf(".") <= 0) { 433 if (this.imageName.lastIndexOf(".") <= 0) {
434 return; 434 return;
435 } 435 }
436 const fr = new FileReader(); 436 const fr = new FileReader();
437 fr.readAsDataURL(files[0]); 437 fr.readAsDataURL(files[0]);
438 fr.addEventListener("load", () => { 438 fr.addEventListener("load", () => {
439 this.imageUrl = fr.result; 439 this.imageUrl = fr.result;
440 this.imageFile = files[0]; // this is an image file that can be sent to server... 440 this.imageFile = files[0]; // this is an image file that can be sent to server...
441 }); 441 });
442 } else { 442 } else {
443 this.imageName = ""; 443 this.imageName = "";
444 this.imageFile = ""; 444 this.imageFile = "";
445 this.imageUrl = ""; 445 this.imageUrl = "";
446 } 446 }
447 }, 447 },
448 getNoticeDataList() { 448 getNoticeDataList() {
449 this.showLoader = true; 449 this.showLoader = true;
450 var token = this.$store.state.token; 450 var token = this.$store.state.token;
451 http() 451 http()
452 .get("/getEventsList", { 452 .get("/getEventsList", {
453 headers: { Authorization: "Bearer " + token } 453 headers: { Authorization: "Bearer " + token }
454 }) 454 })
455 .then(response => { 455 .then(response => {
456 this.desserts = response.data.data; 456 this.desserts = response.data.data;
457 this.showLoader = false; 457 this.showLoader = false;
458 }) 458 })
459 .catch(err => { 459 .catch(error => {
460 this.showLoader = false; 460 this.showLoader = false;
461 if (error.response.status === 401) { 461 if (error.response.status === 401) {
462 this.$router.replace({ path: "/" }); 462 this.$router.replace({ path: "/" });
463 this.$store.dispatch("setToken", null); 463 this.$store.dispatch("setToken", null);
464 this.$store.dispatch("Id", null); 464 this.$store.dispatch("Id", null);
465 } 465 }
466 }); 466 });
467 }, 467 },
468 editItem(item) { 468 editItem(item) {
469 this.editedIndex = this.desserts.indexOf(item); 469 this.editedIndex = this.desserts.indexOf(item);
470 this.editedItem = Object.assign({}, item); 470 this.editedItem = Object.assign({}, item);
471 this.dialog = true; 471 this.dialog = true;
472 }, 472 },
473 profile(item) { 473 profile(item) {
474 this.editedIndex = this.desserts.indexOf(item); 474 this.editedIndex = this.desserts.indexOf(item);
475 this.editedItem = Object.assign({}, item); 475 this.editedItem = Object.assign({}, item);
476 this.dialog1 = true; 476 this.dialog1 = true;
477 }, 477 },
478 deleteItem(item) { 478 deleteItem(item) {
479 let deleteEvent = { 479 let deleteEvent = {
480 eventId: item._id 480 eventId: item._id
481 }; 481 };
482 http() 482 http()
483 .delete( 483 .delete(
484 "/deleteEvent", 484 "/deleteEvent",
485 confirm("Are you sure you want to delete this?") && { 485 confirm("Are you sure you want to delete this?") && {
486 params: deleteEvent 486 params: deleteEvent
487 } 487 }
488 ) 488 )
489 .then(response => { 489 .then(response => {
490 // console.log("deleteUers",deleteEvent) 490 // console.log("deleteUers",deleteEvent)
491 if ((this.snackbar = true)) { 491 if ((this.snackbar = true)) {
492 this.text = "Successfully delete Existing Notice Data"; 492 this.text = "Successfully delete Existing Notice Data";
493 } 493 }
494 this.getNoticeDataList(); 494 this.getNoticeDataList();
495 }) 495 })
496 .catch(error => { 496 .catch(error => {
497 // console.log(error); 497 // console.log(error);
498 }); 498 });
499 }, 499 },
500 activeTab(type) { 500 activeTab(type) {
501 switch (type) { 501 switch (type) {
502 case "existing": 502 case "existing":
503 this.newActive = false; 503 this.newActive = false;
504 this.isActive = true; 504 this.isActive = true;
505 break; 505 break;
506 506
507 default: 507 default:
508 this.newActive = true; 508 this.newActive = true;
509 this.isActive = false; 509 this.isActive = false;
510 break; 510 break;
511 } 511 }
512 }, 512 },
513 close() { 513 close() {
514 this.dialog = false; 514 this.dialog = false;
515 setTimeout(() => { 515 setTimeout(() => {
516 this.editedItem = Object.assign({}, this.defaultItem); 516 this.editedItem = Object.assign({}, this.defaultItem);
517 this.editedIndex = -1; 517 this.editedIndex = -1;
518 }, 300); 518 }, 300);
519 }, 519 },
520 close1() { 520 close1() {
521 this.dialog1 = false; 521 this.dialog1 = false;
522 }, 522 },
523 submit() { 523 submit() {
524 if (this.$refs.form.validate()) { 524 if (this.$refs.form.validate()) {
525 if (this.imageUrl) { 525 if (this.imageUrl) {
526 var str = this.imageUrl; 526 var str = this.imageUrl;
527 const [baseUrl, imageUrl] = str.split(/,/); 527 const [baseUrl, imageUrl] = str.split(/,/);
528 this.addNoticeBoard.upload = imageUrl; 528 this.addNoticeBoard.upload = imageUrl;
529 } 529 }
530 http() 530 http()
531 .post("/createEvent", this.addNoticeBoard) 531 .post("/createEvent", this.addNoticeBoard)
532 .then(response => { 532 .then(response => {
533 this.imageUrl = ""; 533 this.imageUrl = "";
534 this.snackbar = true; 534 this.snackbar = true;
535 this.text = "New Notice added successfully"; 535 this.text = "New Notice added successfully";
536 this.getNoticeDataList(); 536 this.getNoticeDataList();
537 this.clear(); 537 this.clear();
538 }) 538 })
539 .catch(error => { 539 .catch(error => {
540 // console.log(error); 540 // console.log(error);
541 this.snackbar = true; 541 this.snackbar = true;
542 this.text = error.response.data.message; 542 this.text = error.response.data.message;
543 }); 543 });
544 } 544 }
545 }, 545 },
546 clear() { 546 clear() {
547 this.$refs.form.reset(); 547 this.$refs.form.reset();
548 this.imageUrl = ""; 548 this.imageUrl = "";
549 }, 549 },
550 save() { 550 save() {
551 let editNoticeBoard = { 551 let editNoticeBoard = {
552 eventId: this.editedItem._id, 552 eventId: this.editedItem._id,
553 title: this.editedItem.title, 553 title: this.editedItem.title,
554 description: this.editedItem.description 554 description: this.editedItem.description
555 }; 555 };
556 if (this.imageUrl) { 556 if (this.imageUrl) {
557 var str = this.imageUrl; 557 var str = this.imageUrl;
558 const [baseUrl, imageUrl] = str.split(/,/); 558 const [baseUrl, imageUrl] = str.split(/,/);
559 editNoticeBoard.upload = imageUrl; 559 editNoticeBoard.upload = imageUrl;
560 } 560 }
561 http() 561 http()
562 .put("/updateEvent", editNoticeBoard) 562 .put("/updateEvent", editNoticeBoard)
563 .then(response => { 563 .then(response => {
564 if ((this.snackbar = true)) { 564 if ((this.snackbar = true)) {
565 this.text = "Successfully Edit Existing Notice Data"; 565 this.text = "Successfully Edit Existing Notice Data";
566 } 566 }
567 this.getNoticeDataList(); 567 this.getNoticeDataList();
568 this.close(); 568 this.close();
569 }) 569 })
570 .catch(error => { 570 .catch(error => {
571 // console.log(error); 571 // console.log(error);
572 }); 572 });
573 } 573 }
574 }, 574 },
575 mounted() { 575 mounted() {
576 this.getNoticeDataList(); 576 this.getNoticeDataList();
577 }, 577 },
578 created() { 578 created() {
579 this.$root.$on("app:search", search => { 579 this.$root.$on("app:search", search => {
580 this.search = search; 580 this.search = search;
581 }); 581 });
582 }, 582 },
583 beforeDestroy() { 583 beforeDestroy() {
584 // dont forget to remove the listener 584 // dont forget to remove the listener
585 this.$root.$off("app:search"); 585 this.$root.$off("app:search");
586 } 586 }
587 }; 587 };
588 </script> 588 </script>
589 <style scoped> 589 <style scoped>
590 .active { 590 .active {
591 background-color: gray; 591 background-color: gray;
592 color: white !important; 592 color: white !important;
593 } 593 }
594 .activebtn { 594 .activebtn {
595 color: black !important; 595 color: black !important;
596 } 596 }
597 </style> 597 </style>
src/pages/Notification/notification.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Notifictaion</v-tab> 10 >Existing Notifictaion</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Notifictaion</v-tab> 18 >Add New Notifictaion</v-tab>
19 19
20 <!-- ****** EDITS NOTIFICATION DETAILS ****** --> 20 <!-- ****** EDITS NOTIFICATION DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Notifictaion</h3> 36 <h3>Edit Notifictaion</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat class="pa-3"> 40 <v-card flat class="pa-3">
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right">Title:</label> 44 <label class="right">Title:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs8 sm5 class="ml-3"> 46 <v-flex xs8 sm5 class="ml-3">
47 <v-text-field 47 <v-text-field
48 v-model="editedItem.title" 48 v-model="editedItem.title"
49 placeholder="fill your Title" 49 placeholder="fill your Title"
50 name="name" 50 name="name"
51 type="text" 51 type="text"
52 ></v-text-field> 52 ></v-text-field>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <v-flex xs12 sm12> 56 <v-flex xs12 sm12>
57 <v-layout> 57 <v-layout>
58 <v-flex xs4 class="pt-4 subheading"> 58 <v-flex xs4 class="pt-4 subheading">
59 <label class="right">Description:</label> 59 <label class="right">Description:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs8 sm5 class="ml-3"> 61 <v-flex xs8 sm5 class="ml-3">
62 <v-text-field 62 <v-text-field
63 placeholder="fill your Description" 63 placeholder="fill your Description"
64 v-model="editedItem.description" 64 v-model="editedItem.description"
65 type="text" 65 type="text"
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-layout> 70 <v-layout>
71 <v-flex xs12 sm10 offset-sm1> 71 <v-flex xs12 sm10 offset-sm1>
72 <v-card-actions> 72 <v-card-actions>
73 <v-btn round dark @click.native="close">Cancel</v-btn> 73 <v-btn round dark @click.native="close">Cancel</v-btn>
74 <v-spacer></v-spacer> 74 <v-spacer></v-spacer>
75 <v-btn round dark @click="save">Save</v-btn> 75 <v-btn round dark @click="save">Save</v-btn>
76 </v-card-actions> 76 </v-card-actions>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-card> 79 </v-card>
80 </v-flex> 80 </v-flex>
81 </v-dialog> 81 </v-dialog>
82 82
83 <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> 83 <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** -->
84 84
85 <v-dialog v-model="dialog1" max-width="700px"> 85 <v-dialog v-model="dialog1" max-width="700px">
86 <v-toolbar color="v-toolbar"> 86 <v-toolbar color="v-toolbar">
87 <v-spacer></v-spacer> 87 <v-spacer></v-spacer>
88 <v-toolbar-title> 88 <v-toolbar-title>
89 <h3>Notification</h3> 89 <h3>Notification</h3>
90 </v-toolbar-title> 90 </v-toolbar-title>
91 <v-spacer></v-spacer> 91 <v-spacer></v-spacer>
92 <v-icon @click="close1">close</v-icon> 92 <v-icon @click="close1">close</v-icon>
93 </v-toolbar> 93 </v-toolbar>
94 <v-card> 94 <v-card>
95 <v-card-text> 95 <v-card-text>
96 <v-container grid-list-md> 96 <v-container grid-list-md>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12> 98 <v-flex xs12>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm6> 100 <v-flex xs4 sm6>
101 <h5 class="right my-1"> 101 <h5 class="right my-1">
102 <b>Title:</b> 102 <b>Title:</b>
103 </h5> 103 </h5>
104 </v-flex> 104 </v-flex>
105 <v-flex sm6 xs8> 105 <v-flex sm6 xs8>
106 <h5 class="my-1">{{ editedItem.title }}</h5> 106 <h5 class="my-1">{{ editedItem.title }}</h5>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 sm6> 111 <v-flex xs4 sm6>
112 <h5 class="right my-1"> 112 <h5 class="right my-1">
113 <b>Description:</b> 113 <b>Description:</b>
114 </h5> 114 </h5>
115 </v-flex> 115 </v-flex>
116 <v-flex sm6 xs8> 116 <v-flex sm6 xs8>
117 <h5 class="my-1">{{ editedItem.description }}</h5> 117 <h5 class="my-1">{{ editedItem.description }}</h5>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-layout> 120 </v-layout>
121 </v-container> 121 </v-container>
122 </v-card-text> 122 </v-card-text>
123 </v-card> 123 </v-card>
124 </v-dialog> 124 </v-dialog>
125 <v-snackbar 125 <v-snackbar
126 :timeout="timeout" 126 :timeout="timeout"
127 :top="y === 'top'" 127 :top="y === 'top'"
128 :right="x === 'right'" 128 :right="x === 'right'"
129 :vertical="mode === 'vertical'" 129 :vertical="mode === 'vertical'"
130 v-model="snackbar" 130 v-model="snackbar"
131 color="success" 131 color="success"
132 >{{ text }}</v-snackbar> 132 >{{ text }}</v-snackbar>
133 133
134 <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** --> 134 <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** -->
135 135
136 <v-data-table 136 <v-data-table
137 :headers="headers" 137 :headers="headers"
138 :items="desserts" 138 :items="desserts"
139 :pagination.sync="pagination" 139 :pagination.sync="pagination"
140 :search="search" 140 :search="search"
141 > 141 >
142 <template slot="items" slot-scope="props"> 142 <template slot="items" slot-scope="props">
143 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 143 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
144 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 144 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
145 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 145 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
146 146
147 <td id="td" class="text-xs-center"> 147 <td id="td" class="text-xs-center">
148 <span> 148 <span>
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:18px; " 152 style="cursor:pointer; width:25px; height:18px; "
153 class="mr5" 153 class="mr5"
154 @click="profile(props.item)" 154 @click="profile(props.item)"
155 src="/static/icon/eye1.png" 155 src="/static/icon/eye1.png"
156 /> 156 />
157 <span>View</span> 157 <span>View</span>
158 </v-tooltip> 158 </v-tooltip>
159 <v-tooltip top> 159 <v-tooltip top>
160 <img 160 <img
161 slot="activator" 161 slot="activator"
162 style="cursor:pointer; width:20px; height:18px; " 162 style="cursor:pointer; width:20px; height:18px; "
163 class="mr5" 163 class="mr5"
164 @click="editItem(props.item)" 164 @click="editItem(props.item)"
165 src="/static/icon/edit1.png" 165 src="/static/icon/edit1.png"
166 /> 166 />
167 <span>Edit</span> 167 <span>Edit</span>
168 </v-tooltip> 168 </v-tooltip>
169 <v-tooltip top> 169 <v-tooltip top>
170 <img 170 <img
171 slot="activator" 171 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; " 172 style="cursor:pointer; width:20px; height:20px; "
173 class="mr5" 173 class="mr5"
174 @click="deleteItem(props.item)" 174 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png" 175 src="/static/icon/delete1.png"
176 /> 176 />
177 <span>Delete</span> 177 <span>Delete</span>
178 </v-tooltip> 178 </v-tooltip>
179 </span> 179 </span>
180 </td> 180 </td>
181 </template> 181 </template>
182 <v-alert 182 <v-alert
183 slot="no-results" 183 slot="no-results"
184 :value="true" 184 :value="true"
185 color="error" 185 color="error"
186 icon="warning" 186 icon="warning"
187 >Your search for "{{ search }}" found no results.</v-alert> 187 >Your search for "{{ search }}" found no results.</v-alert>
188 </v-data-table> 188 </v-data-table>
189 </v-tab-item> 189 </v-tab-item>
190 190
191 <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> 191 <!-- ****** ADD MULTIPLE NOTIFICATION ****** -->
192 192
193 <v-tab-item> 193 <v-tab-item>
194 <v-container> 194 <v-container>
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 <v-flex xs12 sm8 class="top" offset-sm2> 203 <v-flex xs12 sm8 class="top" offset-sm2>
204 <v-card flat> 204 <v-card flat>
205 <v-form ref="form" v-model="valid" lazy-validation> 205 <v-form ref="form" v-model="valid" lazy-validation>
206 <v-container> 206 <v-container>
207 <v-flex xs12> 207 <v-flex xs12>
208 <v-layout> 208 <v-layout>
209 <v-flex xs4 class="pt-4 subheading"> 209 <v-flex xs4 class="pt-4 subheading">
210 <label class="right">Title:</label> 210 <label class="right">Title:</label>
211 </v-flex> 211 </v-flex>
212 <v-flex xs8 sm6 class="ml-3"> 212 <v-flex xs8 sm6 class="ml-3">
213 <v-text-field 213 <v-text-field
214 v-model="addNotification.title" 214 v-model="addNotification.title"
215 placeholder="fill your Title" 215 placeholder="fill your Title"
216 type="text" 216 type="text"
217 :rules="titleRules" 217 :rules="titleRules"
218 required 218 required
219 ></v-text-field> 219 ></v-text-field>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 </v-flex> 222 </v-flex>
223 <v-flex xs12> 223 <v-flex xs12>
224 <v-layout> 224 <v-layout>
225 <v-flex xs4 class="pt-4 subheading"> 225 <v-flex xs4 class="pt-4 subheading">
226 <label class="right">Description:</label> 226 <label class="right">Description:</label>
227 </v-flex> 227 </v-flex>
228 <v-flex xs10 sm6 class="ml-3"> 228 <v-flex xs10 sm6 class="ml-3">
229 <v-text-field 229 <v-text-field
230 placeholder="fill your Description" 230 placeholder="fill your Description"
231 :rules="descriptionRules" 231 :rules="descriptionRules"
232 v-model="addNotification.description" 232 v-model="addNotification.description"
233 type="text" 233 type="text"
234 required 234 required
235 ></v-text-field> 235 ></v-text-field>
236 </v-flex> 236 </v-flex>
237 </v-layout> 237 </v-layout>
238 </v-flex> 238 </v-flex>
239 <v-layout> 239 <v-layout>
240 <v-flex xs12 sm9 offset-sm2> 240 <v-flex xs12 sm9 offset-sm2>
241 <v-layout> 241 <v-layout>
242 <v-flex xs6> 242 <v-flex xs6>
243 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 243 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
244 </v-flex> 244 </v-flex>
245 <v-flex xs6> 245 <v-flex xs6>
246 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 246 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 </v-container> 251 </v-container>
252 </v-form> 252 </v-form>
253 </v-card> 253 </v-card>
254 </v-flex> 254 </v-flex>
255 </v-container> 255 </v-container>
256 </v-tab-item> 256 </v-tab-item>
257 </v-tabs> 257 </v-tabs>
258 <div class="loader" v-if="showLoader"> 258 <div class="loader" v-if="showLoader">
259 <v-progress-circular indeterminate color="white"></v-progress-circular> 259 <v-progress-circular indeterminate color="white"></v-progress-circular>
260 </div> 260 </div>
261 </v-app> 261 </v-app>
262 </template> 262 </template>
263 263
264 <script> 264 <script>
265 import http from "@/Services/http.js"; 265 import http from "@/Services/http.js";
266 import Util from "@/util"; 266 import Util from "@/util";
267 267
268 export default { 268 export default {
269 data: () => ({ 269 data: () => ({
270 snackbar: false, 270 snackbar: false,
271 y: "top", 271 y: "top",
272 x: "right", 272 x: "right",
273 mode: "", 273 mode: "",
274 timeout: 3000, 274 timeout: 3000,
275 text: "", 275 text: "",
276 loading: false, 276 loading: false,
277 date: null, 277 date: null,
278 search: "", 278 search: "",
279 showLoader: false, 279 showLoader: false,
280 dialog: false, 280 dialog: false,
281 dialog1: false, 281 dialog1: false,
282 valid: true, 282 valid: true,
283 isActive: true, 283 isActive: true,
284 newActive: false, 284 newActive: false,
285 pagination: { 285 pagination: {
286 rowsPerPage: 15 286 rowsPerPage: 15
287 }, 287 },
288 imageData: {}, 288 imageData: {},
289 imageName: "", 289 imageName: "",
290 imageUrl: "", 290 imageUrl: "",
291 imageFile: "", 291 imageFile: "",
292 titleRules: [v => !!v || " Tilte is required"], 292 titleRules: [v => !!v || " Tilte is required"],
293 descriptionRules: [v => !!v || " Description is required"], 293 descriptionRules: [v => !!v || " Description is required"],
294 headers: [ 294 headers: [
295 { 295 {
296 text: "No", 296 text: "No",
297 align: "center", 297 align: "center",
298 sortable: false, 298 sortable: false,
299 value: "No" 299 value: "No"
300 }, 300 },
301 { text: "Title", value: "title", sortable: false, align: "center" }, 301 { text: "Title", value: "title", sortable: false, align: "center" },
302 { 302 {
303 text: "Description", 303 text: "Description",
304 value: "description", 304 value: "description",
305 sortable: false, 305 sortable: false,
306 align: "center" 306 align: "center"
307 }, 307 },
308 { text: "Action", value: "", sortable: false, align: "center" } 308 { text: "Action", value: "", sortable: false, align: "center" }
309 ], 309 ],
310 desserts: [], 310 desserts: [],
311 editedIndex: -1, 311 editedIndex: -1,
312 addNotification: { 312 addNotification: {
313 title: "", 313 title: "",
314 description: "" 314 description: ""
315 }, 315 },
316 editedItem: { 316 editedItem: {
317 title: "", 317 title: "",
318 description: "" 318 description: ""
319 }, 319 },
320 defaultItem: { 320 defaultItem: {
321 title: "", 321 title: "",
322 description: "" 322 description: ""
323 } 323 }
324 }), 324 }),
325 methods: { 325 methods: {
326 pickFile() { 326 pickFile() {
327 this.$refs.image.click(); 327 this.$refs.image.click();
328 }, 328 },
329 329
330 onFilePicked(e) { 330 onFilePicked(e) {
331 // console.log(e) 331 // console.log(e)
332 const files = e.target.files; 332 const files = e.target.files;
333 this.imageData.upload = e.target.files[0]; 333 this.imageData.upload = e.target.files[0];
334 if (files[0] !== undefined) { 334 if (files[0] !== undefined) {
335 this.imageName = files[0].name; 335 this.imageName = files[0].name;
336 if (this.imageName.lastIndexOf(".") <= 0) { 336 if (this.imageName.lastIndexOf(".") <= 0) {
337 return; 337 return;
338 } 338 }
339 const fr = new FileReader(); 339 const fr = new FileReader();
340 fr.readAsDataURL(files[0]); 340 fr.readAsDataURL(files[0]);
341 fr.addEventListener("load", () => { 341 fr.addEventListener("load", () => {
342 this.imageUrl = fr.result; 342 this.imageUrl = fr.result;
343 this.imageFile = files[0]; // this is an image file that can be sent to server... 343 this.imageFile = files[0]; // this is an image file that can be sent to server...
344 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 344 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
345 console.log("upload=======>", this.imageData.imageUrl); 345 console.log("upload=======>", this.imageData.imageUrl);
346 console.log("imageFile", this.imageFile); 346 console.log("imageFile", this.imageFile);
347 }); 347 });
348 } else { 348 } else {
349 this.imageName = ""; 349 this.imageName = "";
350 this.imageFile = ""; 350 this.imageFile = "";
351 this.imageUrl = ""; 351 this.imageUrl = "";
352 } 352 }
353 }, 353 },
354 getNotifications() { 354 getNotifications() {
355 this.showLoader = true; 355 this.showLoader = true;
356 var token = this.$store.state.token; 356 var token = this.$store.state.token;
357 http() 357 http()
358 .get("/getNotificationsList", { 358 .get("/getNotificationsList", {
359 headers: { Authorization: "Bearer " + token } 359 headers: { Authorization: "Bearer " + token }
360 }) 360 })
361 .then(response => { 361 .then(response => {
362 this.desserts = response.data.data; 362 this.desserts = response.data.data;
363 this.showLoader = false; 363 this.showLoader = false;
364 // console.log("getNotifications=====>",this.desserts) 364 // console.log("getNotifications=====>",this.desserts)
365 }) 365 })
366 .catch(err => { 366 .catch(error => {
367 // console.log("err====>", err); 367 // console.log("err====>", err);
368 this.showLoader = false; 368 this.showLoader = false;
369 if (error.response.status === 401) { 369 if (error.response.status === 401) {
370 this.$router.replace({ path: "/" }); 370 this.$router.replace({ path: "/" });
371 this.$store.dispatch("setToken", null); 371 this.$store.dispatch("setToken", null);
372 this.$store.dispatch("Id", null); 372 this.$store.dispatch("Id", null);
373 } 373 }
374 }); 374 });
375 }, 375 },
376 editItem(item) { 376 editItem(item) {
377 this.editedIndex = this.desserts.indexOf(item); 377 this.editedIndex = this.desserts.indexOf(item);
378 this.editedItem = Object.assign({}, item); 378 this.editedItem = Object.assign({}, item);
379 this.dialog = true; 379 this.dialog = true;
380 }, 380 },
381 profile(item) { 381 profile(item) {
382 this.editedIndex = this.desserts.indexOf(item); 382 this.editedIndex = this.desserts.indexOf(item);
383 this.editedItem = Object.assign({}, item); 383 this.editedItem = Object.assign({}, item);
384 this.dialog1 = true; 384 this.dialog1 = true;
385 }, 385 },
386 386
387 deleteItem(item) { 387 deleteItem(item) {
388 let deleteNotification = { 388 let deleteNotification = {
389 notificationId: item._id 389 notificationId: item._id
390 }; 390 };
391 http() 391 http()
392 .delete( 392 .delete(
393 "/deleteNotification", 393 "/deleteNotification",
394 confirm("Are you sure you want to delete this?") && { 394 confirm("Are you sure you want to delete this?") && {
395 params: deleteNotification 395 params: deleteNotification
396 } 396 }
397 ) 397 )
398 .then(response => { 398 .then(response => {
399 // console.log("deleteNotification",deleteNotification) 399 // console.log("deleteNotification",deleteNotification)
400 if ((this.snackbar = true)) { 400 if ((this.snackbar = true)) {
401 this.text = "Successfully Delete Notification"; 401 this.text = "Successfully Delete Notification";
402 } 402 }
403 this.getNotifications(); 403 this.getNotifications();
404 }) 404 })
405 .catch(error => { 405 .catch(error => {
406 console.log(error); 406 console.log(error);
407 }); 407 });
408 }, 408 },
409 activeTab(type) { 409 activeTab(type) {
410 switch (type) { 410 switch (type) {
411 case "existing": 411 case "existing":
412 this.newActive = false; 412 this.newActive = false;
413 this.isActive = true; 413 this.isActive = true;
414 break; 414 break;
415 415
416 default: 416 default:
417 this.newActive = true; 417 this.newActive = true;
418 this.isActive = false; 418 this.isActive = false;
419 break; 419 break;
420 } 420 }
421 }, 421 },
422 close() { 422 close() {
423 this.dialog = false; 423 this.dialog = false;
424 setTimeout(() => { 424 setTimeout(() => {
425 this.editedItem = Object.assign({}, this.defaultItem); 425 this.editedItem = Object.assign({}, this.defaultItem);
426 this.editedIndex = -1; 426 this.editedIndex = -1;
427 }, 300); 427 }, 300);
428 }, 428 },
429 close1() { 429 close1() {
430 this.dialog1 = false; 430 this.dialog1 = false;
431 }, 431 },
432 submit() { 432 submit() {
433 if (this.$refs.form.validate()) { 433 if (this.$refs.form.validate()) {
434 let imageData = new FormData(); 434 let imageData = new FormData();
435 imageData.append("upload", this.imageFile); 435 imageData.append("upload", this.imageFile);
436 console.log(imageData); 436 console.log(imageData);
437 let create = { 437 let create = {
438 title: this.addNotification.title, 438 title: this.addNotification.title,
439 description: this.addNotification.description 439 description: this.addNotification.description
440 // imageData 440 // imageData
441 }; 441 };
442 console.log(create); 442 console.log(create);
443 this.loading = true; 443 this.loading = true;
444 http() 444 http()
445 .post("/createNotification", create) 445 .post("/createNotification", create)
446 .then(response => { 446 .then(response => {
447 console.log(create); 447 console.log(create);
448 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
449 this.text = "New Notification added successfully"; 449 this.text = "New Notification added successfully";
450 } 450 }
451 this.getNotifications(); 451 this.getNotifications();
452 this.clear(); 452 this.clear();
453 this.loading = false; 453 this.loading = false;
454 }) 454 })
455 .catch(error => { 455 .catch(error => {
456 // console.log(error); 456 // console.log(error);
457 if ((this.snackbar = true)) { 457 if ((this.snackbar = true)) {
458 this.text = error.response.data.message; 458 this.text = error.response.data.message;
459 } 459 }
460 this.loading = false; 460 this.loading = false;
461 }); 461 });
462 } 462 }
463 }, 463 },
464 clear() { 464 clear() {
465 this.$refs.form.reset(); 465 this.$refs.form.reset();
466 }, 466 },
467 save() { 467 save() {
468 let imageData = new FormData(); 468 let imageData = new FormData();
469 imageData.append("upload", this.imageFile); 469 imageData.append("upload", this.imageFile);
470 console.log(imageData); 470 console.log(imageData);
471 let editNotification = { 471 let editNotification = {
472 notificationId: this.editedItem._id, 472 notificationId: this.editedItem._id,
473 title: this.editedItem.title, 473 title: this.editedItem.title,
474 description: this.editedItem.description 474 description: this.editedItem.description
475 // imageData 475 // imageData
476 }; 476 };
477 http() 477 http()
478 .put("/updateNotification", editNotification) 478 .put("/updateNotification", editNotification)
479 .then(response => { 479 .then(response => {
480 // console.log("editNotification",editNotification); 480 // console.log("editNotification",editNotification);
481 if ((this.snackbar = true)) { 481 if ((this.snackbar = true)) {
482 this.text = "Successfully Edit Notification"; 482 this.text = "Successfully Edit Notification";
483 } 483 }
484 this.getNotifications(); 484 this.getNotifications();
485 }) 485 })
486 .catch(error => { 486 .catch(error => {
487 // console.log(error); 487 // console.log(error);
488 }); 488 });
489 this.close(); 489 this.close();
490 } 490 }
491 }, 491 },
492 mounted() { 492 mounted() {
493 this.getNotifications(); 493 this.getNotifications();
494 }, 494 },
495 created() { 495 created() {
496 this.$root.$on("app:search", search => { 496 this.$root.$on("app:search", search => {
497 this.search = search; 497 this.search = search;
498 }); 498 });
499 }, 499 },
500 beforeDestroy() { 500 beforeDestroy() {
501 // dont forget to remove the listener 501 // dont forget to remove the listener
502 this.$root.$off("app:search"); 502 this.$root.$off("app:search");
503 } 503 }
504 }; 504 };
505 </script> 505 </script>
506 <style scoped> 506 <style scoped>
507 #td { 507 #td {
508 max-width: 200px; 508 max-width: 200px;
509 } 509 }
510 .active { 510 .active {
511 background-color: gray; 511 background-color: gray;
512 color: white !important; 512 color: white !important;
513 } 513 }
514 .activebtn { 514 .activebtn {
515 color: black !important; 515 color: black !important;
516 } 516 }
517 </style> 517 </style>
src/pages/Parent/parents.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Parents</v-tab> 10 >Existing Parents</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Parents</v-tab> 18 >Add New Parents</v-tab>
19 19
20 <!-- ****** EDITS Parents DETAILS ****** --> 20 <!-- ****** EDITS Parents DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px" scrollable> 31 <v-dialog v-model="dialog" max-width="600px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3 class="hidden-xs-only">Edit Parent Profile</h3> 36 <h3 class="hidden-xs-only">Edit Parent Profile</h3>
37 <h5 37 <h5
38 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" 38 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
39 >Edit Parent Profile</h5> 39 >Edit Parent Profile</h5>
40 </v-toolbar-title> 40 </v-toolbar-title>
41 <v-spacer></v-spacer> 41 <v-spacer></v-spacer>
42 <v-icon @click="close" class="hidden-xs-only pr-2">close</v-icon> 42 <v-icon @click="close" class="hidden-xs-only pr-2">close</v-icon>
43 <v-icon 43 <v-icon
44 @click="close" 44 @click="close"
45 size="26" 45 size="26"
46 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" 46 class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
47 >close</v-icon> 47 >close</v-icon>
48 </v-toolbar> 48 </v-toolbar>
49 <v-card-text style="height: 410px;"> 49 <v-card-text style="height: 410px;">
50 <v-flex xs12> 50 <v-flex xs12>
51 <v-layout> 51 <v-layout>
52 <v-flex xs3 sm4 class="pt-4 subheading"> 52 <v-flex xs3 sm4 class="pt-4 subheading">
53 <label class="right">Email ID:</label> 53 <label class="right">Email ID:</label>
54 </v-flex> 54 </v-flex>
55 <v-flex xs8 sm6 class="ml-3"> 55 <v-flex xs8 sm6 class="ml-3">
56 <v-text-field 56 <v-text-field
57 placeholder="fill your email" 57 placeholder="fill your email"
58 v-model="editedItem.email" 58 v-model="editedItem.email"
59 type="text" 59 type="text"
60 name="email" 60 name="email"
61 required 61 required
62 ></v-text-field> 62 ></v-text-field>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12> 66 <v-flex xs12>
67 <v-layout> 67 <v-layout>
68 <v-flex xs3 sm4 class="pt-4 subheading"> 68 <v-flex xs3 sm4 class="pt-4 subheading">
69 <label class="right">Father Name:</label> 69 <label class="right">Father Name:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs8 sm6 class="ml-3"> 71 <v-flex xs8 sm6 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.fatherName" 73 v-model="editedItem.fatherName"
74 placeholder="fill your father Name" 74 placeholder="fill your father Name"
75 required 75 required
76 ></v-text-field> 76 ></v-text-field>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-layout> 81 <v-layout>
82 <v-flex xs3 sm4 class="pt-4 subheading"> 82 <v-flex xs3 sm4 class="pt-4 subheading">
83 <label class="right">Father Cell No:</label> 83 <label class="right">Father Cell No:</label>
84 </v-flex> 84 </v-flex>
85 <v-flex xs8 sm6 class="ml-3"> 85 <v-flex xs8 sm6 class="ml-3">
86 <v-text-field 86 <v-text-field
87 v-model="editedItem.fatherCellNo" 87 v-model="editedItem.fatherCellNo"
88 placeholder="fill your father Cell Number" 88 placeholder="fill your father Cell Number"
89 type="number" 89 type="number"
90 required 90 required
91 ></v-text-field> 91 ></v-text-field>
92 </v-flex> 92 </v-flex>
93 </v-layout> 93 </v-layout>
94 </v-flex> 94 </v-flex>
95 <v-flex xs12> 95 <v-flex xs12>
96 <v-layout> 96 <v-layout>
97 <v-flex xs3 sm4 class="pt-4 subheading"> 97 <v-flex xs3 sm4 class="pt-4 subheading">
98 <label class="right">Mother Name:</label> 98 <label class="right">Mother Name:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 sm6 class="ml-3"> 100 <v-flex xs8 sm6 class="ml-3">
101 <v-text-field 101 <v-text-field
102 v-model="editedItem.motherName" 102 v-model="editedItem.motherName"
103 placeholder="fill your Mother Name" 103 placeholder="fill your Mother Name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-flex xs12> 110 <v-flex xs12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs3 sm4 class="pt-4 subheading"> 112 <v-flex xs3 sm4 class="pt-4 subheading">
113 <label class="right">Mother Cell No:</label> 113 <label class="right">Mother Cell No:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex xs8 sm6 class="ml-3"> 115 <v-flex xs8 sm6 class="ml-3">
116 <v-text-field 116 <v-text-field
117 v-model="editedItem.motherCellNo" 117 v-model="editedItem.motherCellNo"
118 placeholder="fill your Mother Cell Number" 118 placeholder="fill your Mother Cell Number"
119 type="number" 119 type="number"
120 required 120 required
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-layout> 125 <v-layout>
126 <v-flex xs12 sm12> 126 <v-flex xs12 sm12>
127 <v-card-actions> 127 <v-card-actions>
128 <v-spacer></v-spacer> 128 <v-spacer></v-spacer>
129 <v-btn round dark @click="save">Save</v-btn> 129 <v-btn round dark @click="save">Save</v-btn>
130 <v-spacer></v-spacer> 130 <v-spacer></v-spacer>
131 </v-card-actions> 131 </v-card-actions>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 <!-- </v-container> 134 <!-- </v-container>
135 </v-form>--> 135 </v-form>-->
136 </v-card-text> 136 </v-card-text>
137 </v-card> 137 </v-card>
138 </v-dialog> 138 </v-dialog>
139 139
140 <!-- ****** PROFILE VIEW Parents DEATILS ****** --> 140 <!-- ****** PROFILE VIEW Parents DEATILS ****** -->
141 141
142 <v-dialog v-model="dialog1" max-width="600px" scrollable> 142 <v-dialog v-model="dialog1" max-width="600px" scrollable>
143 <v-card> 143 <v-card>
144 <v-toolbar color="grey lighten-2" flat> 144 <v-toolbar color="grey lighten-2" flat>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-toolbar-title>Parent Profile</v-toolbar-title> 146 <v-toolbar-title>Parent Profile</v-toolbar-title>
147 <v-spacer></v-spacer> 147 <v-spacer></v-spacer>
148 <v-icon @click="close1">close</v-icon> 148 <v-icon @click="close1">close</v-icon>
149 </v-toolbar> 149 </v-toolbar>
150 <v-container grid-list-md> 150 <v-container grid-list-md>
151 <v-layout wrap> 151 <v-layout wrap>
152 <v-flex xs12> 152 <v-flex xs12>
153 <v-layout> 153 <v-layout>
154 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
155 <v-layout> 155 <v-layout>
156 <v-flex xs6> 156 <v-flex xs6>
157 <h5 class="right my-1"> 157 <h5 class="right my-1">
158 <b>Email:</b> 158 <b>Email:</b>
159 </h5> 159 </h5>
160 </v-flex> 160 </v-flex>
161 <v-flex xs6> 161 <v-flex xs6>
162 <h5 class="my-1">{{ editedItem.email }}</h5> 162 <h5 class="my-1">{{ editedItem.email }}</h5>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-layout> 167 <v-layout>
168 <v-flex xs12> 168 <v-flex xs12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs6> 170 <v-flex xs6>
171 <b> 171 <b>
172 <h5 class="right my-1"> 172 <h5 class="right my-1">
173 <b>Fahter Name:</b> 173 <b>Fahter Name:</b>
174 </h5> 174 </h5>
175 </b> 175 </b>
176 </v-flex> 176 </v-flex>
177 <v-flex xs6> 177 <v-flex xs6>
178 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 178 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
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-layout> 185 <v-layout>
186 <v-flex xs6> 186 <v-flex xs6>
187 <b> 187 <b>
188 <h5 class="right my-1"> 188 <h5 class="right my-1">
189 <b>Mother Name:</b> 189 <b>Mother Name:</b>
190 </h5> 190 </h5>
191 </b> 191 </b>
192 </v-flex> 192 </v-flex>
193 <v-flex xs6> 193 <v-flex xs6>
194 <h5 class="my-1">{{ editedItem.motherName }}</h5> 194 <h5 class="my-1">{{ editedItem.motherName }}</h5>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12> 200 <v-flex xs12>
201 <v-layout> 201 <v-layout>
202 <v-flex sm6> 202 <v-flex sm6>
203 <b> 203 <b>
204 <h5 class="right my-1"> 204 <h5 class="right my-1">
205 <b>Father Cell No:</b> 205 <b>Father Cell No:</b>
206 </h5> 206 </h5>
207 </b> 207 </b>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6> 209 <v-flex sm6>
210 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 210 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 <v-layout> 215 <v-layout>
216 <v-flex xs12> 216 <v-flex xs12>
217 <v-layout> 217 <v-layout>
218 <v-flex xs6> 218 <v-flex xs6>
219 <b> 219 <b>
220 <h5 class="right my-1"> 220 <h5 class="right my-1">
221 <b>Mother Cell No:</b> 221 <b>Mother Cell No:</b>
222 </h5> 222 </h5>
223 </b> 223 </b>
224 </v-flex> 224 </v-flex>
225 <v-flex xs6> 225 <v-flex xs6>
226 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 226 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 </v-layout> 232 </v-layout>
233 </v-container> 233 </v-container>
234 <!-- </v-card-text> --> 234 <!-- </v-card-text> -->
235 </v-card> 235 </v-card>
236 </v-dialog> 236 </v-dialog>
237 237
238 <v-snackbar 238 <v-snackbar
239 :timeout="timeout" 239 :timeout="timeout"
240 :top="y === 'top'" 240 :top="y === 'top'"
241 :right="x === 'right'" 241 :right="x === 'right'"
242 :vertical="mode === 'vertical'" 242 :vertical="mode === 'vertical'"
243 v-model="snackbar" 243 v-model="snackbar"
244 color="success" 244 color="success"
245 >{{ text }}</v-snackbar> 245 >{{ text }}</v-snackbar>
246 246
247 <!-- ****** EXISTING-USERS Parents TABLE ****** --> 247 <!-- ****** EXISTING-USERS Parents TABLE ****** -->
248 <v-data-table 248 <v-data-table
249 :headers="headers" 249 :headers="headers"
250 :items="parentsList" 250 :items="parentsList"
251 :pagination.sync="pagination" 251 :pagination.sync="pagination"
252 :search="search" 252 :search="search"
253 > 253 >
254 <template slot="items" slot-scope="props"> 254 <template slot="items" slot-scope="props">
255 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 255 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
256 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 256 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
257 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td> 257 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
258 <td id="td" class="text-xs-center">{{ props.item.fatherCellNo }}</td> 258 <td id="td" class="text-xs-center">{{ props.item.fatherCellNo }}</td>
259 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td> 259 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
260 <td id="td" class="text-xs-center">{{ props.item.motherCellNo }}</td> 260 <td id="td" class="text-xs-center">{{ props.item.motherCellNo }}</td>
261 <td class="text-xs-center"> 261 <td class="text-xs-center">
262 <span> 262 <span>
263 <v-tooltip top> 263 <v-tooltip top>
264 <img 264 <img
265 slot="activator" 265 slot="activator"
266 style="cursor:pointer; width:25px; height:18px; " 266 style="cursor:pointer; width:25px; height:18px; "
267 class="mr5" 267 class="mr5"
268 @click="profile(props.item)" 268 @click="profile(props.item)"
269 src="/static/icon/eye1.png" 269 src="/static/icon/eye1.png"
270 /> 270 />
271 <span>View</span> 271 <span>View</span>
272 </v-tooltip> 272 </v-tooltip>
273 <v-tooltip top> 273 <v-tooltip top>
274 <img 274 <img
275 slot="activator" 275 slot="activator"
276 style="cursor:pointer; width:20px; height:18px; " 276 style="cursor:pointer; width:20px; height:18px; "
277 class="mr5" 277 class="mr5"
278 @click="editItem(props.item)" 278 @click="editItem(props.item)"
279 src="/static/icon/edit1.png" 279 src="/static/icon/edit1.png"
280 /> 280 />
281 <span>Edit</span> 281 <span>Edit</span>
282 </v-tooltip> 282 </v-tooltip>
283 </span> 283 </span>
284 </td> 284 </td>
285 </template> 285 </template>
286 <v-alert 286 <v-alert
287 slot="no-results" 287 slot="no-results"
288 :value="true" 288 :value="true"
289 color="error" 289 color="error"
290 icon="warning" 290 icon="warning"
291 >Your search for "{{ search }}" found no results.</v-alert> 291 >Your search for "{{ search }}" found no results.</v-alert>
292 </v-data-table> 292 </v-data-table>
293 </v-tab-item> 293 </v-tab-item>
294 294
295 <!-- ****** ADD PARENTS DETAILS****** --> 295 <!-- ****** ADD PARENTS DETAILS****** -->
296 <v-tab-item> 296 <v-tab-item>
297 <v-container fluid class="mt-5"> 297 <v-container fluid class="mt-5">
298 <v-layout align-center justify-center fill-height> 298 <v-layout align-center justify-center fill-height>
299 <v-flex xs12 sm12 md10 lg11> 299 <v-flex xs12 sm12 md10 lg11>
300 <v-card> 300 <v-card>
301 <v-container fluid class> 301 <v-container fluid class>
302 <v-layout> 302 <v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <v-snackbar 304 <v-snackbar
305 :timeout="timeout" 305 :timeout="timeout"
306 :top="y === 'top'" 306 :top="y === 'top'"
307 :right="x === 'right'" 307 :right="x === 'right'"
308 :vertical="mode === 'vertical'" 308 :vertical="mode === 'vertical'"
309 v-model="snackbar" 309 v-model="snackbar"
310 color="success" 310 color="success"
311 >{{ text }}</v-snackbar> 311 >{{ text }}</v-snackbar>
312 <v-flex xs12 sm12> 312 <v-flex xs12 sm12>
313 <v-form ref="parentForm" v-model="valid" lazy-validation> 313 <v-form ref="parentForm" v-model="valid" lazy-validation>
314 <v-container fluid> 314 <v-container fluid>
315 <v-layout> 315 <v-layout>
316 <v-flex xs12 sm6> 316 <v-flex xs12 sm6>
317 <v-layout> 317 <v-layout>
318 <v-flex xs4 class="pt-4 subheading"> 318 <v-flex xs4 class="pt-4 subheading">
319 <label class="right">Parent Email Id:</label> 319 <label class="right">Parent Email Id:</label>
320 </v-flex> 320 </v-flex>
321 <v-flex xs8 class="ml-3"> 321 <v-flex xs8 class="ml-3">
322 <v-text-field 322 <v-text-field
323 placeholder="fill Parent email" 323 placeholder="fill Parent email"
324 :rules="emailRules" 324 :rules="emailRules"
325 v-model="parentData.email" 325 v-model="parentData.email"
326 type="text" 326 type="text"
327 v-on:keyup="getParentDetails" 327 v-on:keyup="getParentDetails"
328 name="email" 328 name="email"
329 required 329 required
330 ></v-text-field> 330 ></v-text-field>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 </v-flex> 333 </v-flex>
334 <v-flex xs12 sm6> 334 <v-flex xs12 sm6>
335 <v-layout> 335 <v-layout>
336 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
337 <label class="right">Father Name:</label> 337 <label class="right">Father Name:</label>
338 </v-flex> 338 </v-flex>
339 <v-flex xs8 class="ml-3"> 339 <v-flex xs8 class="ml-3">
340 <v-text-field 340 <v-text-field
341 v-model="parentData.fatherName" 341 v-model="parentData.fatherName"
342 :rules="fatherNameRules" 342 :rules="fatherNameRules"
343 placeholder="Fill your father Name" 343 placeholder="Fill your father Name"
344 required 344 required
345 ></v-text-field> 345 ></v-text-field>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 </v-flex> 348 </v-flex>
349 </v-layout> 349 </v-layout>
350 <v-layout> 350 <v-layout>
351 <v-flex xs12 sm6> 351 <v-flex xs12 sm6>
352 <v-layout> 352 <v-layout>
353 <v-flex xs4 class="pt-4 subheading"> 353 <v-flex xs4 class="pt-4 subheading">
354 <label class="right">Father Cell No:</label> 354 <label class="right">Father Cell No:</label>
355 </v-flex> 355 </v-flex>
356 <v-flex xs8 class="ml-3"> 356 <v-flex xs8 class="ml-3">
357 <v-text-field 357 <v-text-field
358 v-model="parentData.fatherCellNo" 358 v-model="parentData.fatherCellNo"
359 placeholder="fill your father Cell Number" 359 placeholder="fill your father Cell Number"
360 name="state" 360 name="state"
361 type="number" 361 type="number"
362 :rules="fatheCellNoRules" 362 :rules="fatheCellNoRules"
363 required 363 required
364 ></v-text-field> 364 ></v-text-field>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 </v-flex> 367 </v-flex>
368 <v-flex xs12 sm6> 368 <v-flex xs12 sm6>
369 <v-layout> 369 <v-layout>
370 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
371 <label class="right">Mother Name:</label> 371 <label class="right">Mother Name:</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs8 class="ml-3"> 373 <v-flex xs8 class="ml-3">
374 <v-text-field 374 <v-text-field
375 v-model="parentData.motherName" 375 v-model="parentData.motherName"
376 placeholder="fill your Mother Name" 376 placeholder="fill your Mother Name"
377 name="state" 377 name="state"
378 type="text" 378 type="text"
379 :rules="motherNameRules" 379 :rules="motherNameRules"
380 required 380 required
381 ></v-text-field> 381 ></v-text-field>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 </v-flex> 384 </v-flex>
385 </v-layout> 385 </v-layout>
386 <v-layout> 386 <v-layout>
387 <v-flex xs12 sm6> 387 <v-flex xs12 sm6>
388 <v-layout> 388 <v-layout>
389 <v-flex xs4 class="pt-4 subheading"> 389 <v-flex xs4 class="pt-4 subheading">
390 <label class="right">Mother Cell No:</label> 390 <label class="right">Mother Cell No:</label>
391 </v-flex> 391 </v-flex>
392 <v-flex xs8 class="ml-3"> 392 <v-flex xs8 class="ml-3">
393 <v-text-field 393 <v-text-field
394 v-model="parentData.motherCellNo" 394 v-model="parentData.motherCellNo"
395 placeholder="fill your Mother Cell Number" 395 placeholder="fill your Mother Cell Number"
396 name="state" 396 name="state"
397 type="number" 397 type="number"
398 :rules="motherCellNoRules" 398 :rules="motherCellNoRules"
399 required 399 required
400 ></v-text-field> 400 ></v-text-field>
401 </v-flex> 401 </v-flex>
402 </v-layout> 402 </v-layout>
403 </v-flex> 403 </v-flex>
404 </v-layout> 404 </v-layout>
405 <v-flex xs12 sm12> 405 <v-flex xs12 sm12>
406 <v-layout> 406 <v-layout>
407 <v-flex xs6 sm6 offset-sm1> 407 <v-flex xs6 sm6 offset-sm1>
408 <v-btn @click="clear" round dark class="ml-4">clear</v-btn> 408 <v-btn @click="clear" round dark class="ml-4">clear</v-btn>
409 </v-flex> 409 </v-flex>
410 <v-flex xs6 sm6> 410 <v-flex xs6 sm6>
411 <v-btn 411 <v-btn
412 class="right" 412 class="right"
413 @click="submitParentDetails" 413 @click="submitParentDetails"
414 round 414 round
415 dark 415 dark
416 :loading="loading" 416 :loading="loading"
417 v-show="showParent" 417 v-show="showParent"
418 >Add</v-btn> 418 >Add</v-btn>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 </v-flex> 421 </v-flex>
422 </v-container> 422 </v-container>
423 </v-form> 423 </v-form>
424 </v-flex> 424 </v-flex>
425 </v-flex> 425 </v-flex>
426 </v-layout> 426 </v-layout>
427 </v-container> 427 </v-container>
428 </v-card> 428 </v-card>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 </v-container> 431 </v-container>
432 </v-tab-item> 432 </v-tab-item>
433 </v-tabs> 433 </v-tabs>
434 <div class="loader" v-if="showLoader"> 434 <div class="loader" v-if="showLoader">
435 <v-progress-circular indeterminate color="white"></v-progress-circular> 435 <v-progress-circular indeterminate color="white"></v-progress-circular>
436 </div> 436 </div>
437 </v-app> 437 </v-app>
438 </template> 438 </template>
439 439
440 <script> 440 <script>
441 import http from "@/Services/http.js"; 441 import http from "@/Services/http.js";
442 import Util from "@/util"; 442 import Util from "@/util";
443 import moment from "moment"; 443 import moment from "moment";
444 444
445 export default { 445 export default {
446 data: () => ({ 446 data: () => ({
447 showParent: true, 447 showParent: true,
448 snackbar: false, 448 snackbar: false,
449 y: "top", 449 y: "top",
450 x: "right", 450 x: "right",
451 mode: "", 451 mode: "",
452 timeout: 3000, 452 timeout: 3000,
453 text: "", 453 text: "",
454 showLoader: false, 454 showLoader: false,
455 loading: false, 455 loading: false,
456 date: null, 456 date: null,
457 search: "", 457 search: "",
458 menu: false, 458 menu: false,
459 menu1: false, 459 menu1: false,
460 dialog: false, 460 dialog: false,
461 dialog1: false, 461 dialog1: false,
462 valid: true, 462 valid: true,
463 isActive: true, 463 isActive: true,
464 newActive: false, 464 newActive: false,
465 AddUsercredentials: {}, 465 AddUsercredentials: {},
466 pagination: { 466 pagination: {
467 rowsPerPage: 15 467 rowsPerPage: 15
468 }, 468 },
469 fatherNameRules: [v => !!v || " Father Name is required"], 469 fatherNameRules: [v => !!v || " Father Name is required"],
470 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 470 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
471 motherNameRules: [v => !!v || " Mother Name is required"], 471 motherNameRules: [v => !!v || " Mother Name is required"],
472 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 472 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
473 errorMessages: "", 473 errorMessages: "",
474 emailRules: [ 474 emailRules: [
475 v => !!v || "E-mail is required", 475 v => !!v || "E-mail is required",
476 v => 476 v =>
477 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 477 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
478 "E-mail must be valid" 478 "E-mail must be valid"
479 ], 479 ],
480 headers: [ 480 headers: [
481 { 481 {
482 text: "No", 482 text: "No",
483 align: "center", 483 align: "center",
484 sortable: false, 484 sortable: false,
485 value: "No" 485 value: "No"
486 }, 486 },
487 { text: "Email", value: "email", sortable: false, align: "center" }, 487 { text: "Email", value: "email", sortable: false, align: "center" },
488 { 488 {
489 text: "Father Name", 489 text: "Father Name",
490 value: "fatherName", 490 value: "fatherName",
491 sortable: false, 491 sortable: false,
492 align: "center" 492 align: "center"
493 }, 493 },
494 { 494 {
495 text: "Father Cell No", 495 text: "Father Cell No",
496 value: "fatherName", 496 value: "fatherName",
497 sortable: false, 497 sortable: false,
498 align: "center" 498 align: "center"
499 }, 499 },
500 { 500 {
501 text: "Mother Name", 501 text: "Mother Name",
502 value: "motherName", 502 value: "motherName",
503 sortable: false, 503 sortable: false,
504 align: "center" 504 align: "center"
505 }, 505 },
506 { 506 {
507 text: "Mother Cell No", 507 text: "Mother Cell No",
508 value: "motherCellNo", 508 value: "motherCellNo",
509 sortable: false, 509 sortable: false,
510 align: "center" 510 align: "center"
511 }, 511 },
512 { text: "Action", value: "", sortable: false, align: "center" } 512 { text: "Action", value: "", sortable: false, align: "center" }
513 ], 513 ],
514 parentsList: [], 514 parentsList: [],
515 editedIndex: -1, 515 editedIndex: -1,
516 parentData: {}, 516 parentData: {},
517 editedItem: { 517 editedItem: {
518 fatherName: "", 518 fatherName: "",
519 fatherCellNo: "", 519 fatherCellNo: "",
520 motherName: "", 520 motherName: "",
521 motherCellNo: "", 521 motherCellNo: "",
522 email: "" 522 email: ""
523 } 523 }
524 }), 524 }),
525 watch: { 525 watch: {
526 menu(val) { 526 menu(val) {
527 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 527 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
528 }, 528 },
529 menu1(val) { 529 menu1(val) {
530 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 530 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
531 } 531 }
532 }, 532 },
533 methods: { 533 methods: {
534 editItem(item) { 534 editItem(item) {
535 this.editedIndex = this.parentsList.indexOf(item); 535 this.editedIndex = this.parentsList.indexOf(item);
536 this.editedItem = Object.assign({}, item); 536 this.editedItem = Object.assign({}, item);
537 this.dialog = true; 537 this.dialog = true;
538 }, 538 },
539 profile(item) { 539 profile(item) {
540 console.log("item", item); 540 console.log("item", item);
541 this.editedIndex = this.parentsList.indexOf(item); 541 this.editedIndex = this.parentsList.indexOf(item);
542 this.editedItem = Object.assign({}, item); 542 this.editedItem = Object.assign({}, item);
543 this.dialog1 = true; 543 this.dialog1 = true;
544 }, 544 },
545 activeTab(type) { 545 activeTab(type) {
546 switch (type) { 546 switch (type) {
547 case "existing": 547 case "existing":
548 this.newActive = false; 548 this.newActive = false;
549 this.isActive = true; 549 this.isActive = true;
550 break; 550 break;
551 551
552 default: 552 default:
553 this.newActive = true; 553 this.newActive = true;
554 this.isActive = false; 554 this.isActive = false;
555 break; 555 break;
556 } 556 }
557 }, 557 },
558 close() { 558 close() {
559 this.dialog = false; 559 this.dialog = false;
560 setTimeout(() => { 560 setTimeout(() => {
561 this.editedItem = Object.assign({}, this.defaultItem); 561 this.editedItem = Object.assign({}, this.defaultItem);
562 this.editedIndex = -1; 562 this.editedIndex = -1;
563 }, 300); 563 }, 300);
564 }, 564 },
565 close1() { 565 close1() {
566 this.dialog1 = false; 566 this.dialog1 = false;
567 }, 567 },
568 clear() { 568 clear() {
569 this.$refs.parentForm.reset(); 569 this.$refs.parentForm.reset();
570 }, 570 },
571 save() { 571 save() {
572 this.editedItem.parentId = this.editedItem._id; 572 this.editedItem.parentId = this.editedItem._id;
573 http() 573 http()
574 .put("/updateParent", this.editedItem) 574 .put("/updateParent", this.editedItem)
575 .then(response => { 575 .then(response => {
576 if ((this.snackbar = true)) { 576 if ((this.snackbar = true)) {
577 this.text = "Successfully Student Existing User"; 577 this.text = "Successfully Student Existing User";
578 } 578 }
579 this.getParentDetails(); 579 this.getParentDetails();
580 this.close(); 580 this.close();
581 }) 581 })
582 .catch(error => { 582 .catch(error => {
583 if ((this.snackbar = true)) { 583 if ((this.snackbar = true)) {
584 this.text = error.response.data.statusText; 584 this.text = error.response.data.statusText;
585 } 585 }
586 }); 586 });
587 }, 587 },
588 submitParentDetails() { 588 submitParentDetails() {
589 if (this.$refs.parentForm.validate()) { 589 if (this.$refs.parentForm.validate()) {
590 let addparentDetails = { 590 let addparentDetails = {
591 email: this.parentData.email, 591 email: this.parentData.email,
592 fatherName: this.parentData.fatherName, 592 fatherName: this.parentData.fatherName,
593 fatherCellNo: this.parentData.fatherCellNo, 593 fatherCellNo: this.parentData.fatherCellNo,
594 motherName: this.parentData.motherName, 594 motherName: this.parentData.motherName,
595 motherCellNo: this.parentData.motherCellNo, 595 motherCellNo: this.parentData.motherCellNo,
596 role: "PARENT" 596 role: "PARENT"
597 }; 597 };
598 this.loading = true; 598 this.loading = true;
599 http() 599 http()
600 .post("/createParent", addparentDetails) 600 .post("/createParent", addparentDetails)
601 .then(response => { 601 .then(response => {
602 this.parentId = response.data.data.id; 602 this.parentId = response.data.data.id;
603 if ((this.snackbar = true)) { 603 if ((this.snackbar = true)) {
604 this.text = "successfully"; 604 this.text = "successfully";
605 } 605 }
606 this.getParentDetails(); 606 this.getParentDetails();
607 this.clear(); 607 this.clear();
608 this.loading = false; 608 this.loading = false;
609 }) 609 })
610 .catch(error => { 610 .catch(error => {
611 console.log(error.response.data); 611 console.log(error.response.data);
612 if ((this.snackbar = true)) { 612 if ((this.snackbar = true)) {
613 this.text = error.response.data.message; 613 this.text = error.response.data.message;
614 this.text = error.response.data.statusText; 614 this.text = error.response.data.statusText;
615 } 615 }
616 this.loading = false; 616 this.loading = false;
617 }); 617 });
618 } 618 }
619 }, 619 },
620 getParentDetails() { 620 getParentDetails() {
621 http() 621 http()
622 .get("getParentsList", { 622 .get("getParentsList", {
623 headers: { 623 headers: {
624 Authorization: "Bearer " + this.$store.state.token 624 Authorization: "Bearer " + this.$store.state.token
625 } 625 }
626 }) 626 })
627 .then(response => { 627 .then(response => {
628 this.parentsList = response.data.data; 628 this.parentsList = response.data.data;
629 }) 629 })
630 .catch(error => { 630 .catch(error => {
631 console.log("err====>", error.response.data.message); 631 // console.log("err====>", error.response.data.message);
632 this.showLoader = false;
633 if (error.response.status === 401) {
634 this.$router.replace({ path: "/" });
635 this.$store.dispatch("setToken", null);
636 this.$store.dispatch("Id", null);
637 this.$store.dispatch("Role", null);
638 }
632 }); 639 });
633 } 640 }
634 }, 641 },
635 mounted() { 642 mounted() {
636 this.getParentDetails(); 643 this.getParentDetails();
637 }, 644 },
638 created() { 645 created() {
639 this.$root.$on("app:search", search => { 646 this.$root.$on("app:search", search => {
640 this.search = search; 647 this.search = search;
641 }); 648 });
642 }, 649 },
643 beforeDestroy() { 650 beforeDestroy() {
644 // dont forget to remove the listener 651 // dont forget to remove the listener
645 this.$root.$off("app:search"); 652 this.$root.$off("app:search");
646 } 653 }
647 }; 654 };
648 </script> 655 </script>
649 <style scoped> 656 <style scoped>
650 .active { 657 .active {
651 background-color: gray; 658 background-color: gray;
652 color: white !important; 659 color: white !important;
653 } 660 }
654 .activebtn { 661 .activebtn {
655 color: black !important; 662 color: black !important;
656 } 663 }
657 </style> 664 </style>
src/pages/Reminder/reminder.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> 7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Reminder Data" 12 label="Find your Reminder Data"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="gray"> 47 <v-tabs grow slider-color="gray">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Reminder</v-tab> 54 >Existing Reminder</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Reminder</v-tab> 62 >Add New Reminder</v-tab>
63 63
64 <!-- ****** EDITS REMINDER DETAILS ****** --> 64 <!-- ****** EDITS REMINDER DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class=""> 76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Reminder</v-toolbar-title> 79 <v-toolbar-title>Edit Reminder</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">Title:</label> 111 <label class="right">Title:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs5 class="ml-3"> 113 <v-flex xs5 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.title" 115 v-model="editedItem.title"
116 placeholder="fill your Title" 116 placeholder="fill your Title"
117 name="name" 117 name="name"
118 type="text" 118 type="text"
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm12> 123 <v-flex xs12 sm12>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Description:</label> 126 <label class="right">Description:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs5 class="ml-3"> 128 <v-flex xs5 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your Description" 130 placeholder="fill your Description"
131 v-model="editedItem.description" 131 v-model="editedItem.description"
132 type="text" 132 type="text"
133 ></v-text-field> 133 ></v-text-field>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 <v-layout> 137 <v-layout>
138 <v-flex xs12 sm10 offset-sm1> 138 <v-flex xs12 sm10 offset-sm1>
139 <v-card-actions> 139 <v-card-actions>
140 <v-btn round dark @click.native="close">Cancel</v-btn> 140 <v-btn round dark @click.native="close">Cancel</v-btn>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <v-btn round dark @click="save">Save</v-btn> 142 <v-btn round dark @click="save">Save</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-container> 146 </v-container>
147 </v-form> 147 </v-form>
148 </v-card> 148 </v-card>
149 </v-flex> 149 </v-flex>
150 </v-dialog> 150 </v-dialog>
151 151
152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
153 <v-dialog v-model="dialog1" max-width="600px"> 153 <v-dialog v-model="dialog1" max-width="600px">
154 <v-toolbar color="white"> 154 <v-toolbar color="white">
155 <v-spacer></v-spacer> 155 <v-spacer></v-spacer>
156 <v-toolbar-title>Profile</v-toolbar-title> 156 <v-toolbar-title>Profile</v-toolbar-title>
157 <v-spacer></v-spacer> 157 <v-spacer></v-spacer>
158 <v-icon @click="close1">close</v-icon> 158 <v-icon @click="close1">close</v-icon>
159 </v-toolbar> 159 </v-toolbar>
160 <v-card> 160 <v-card>
161 <v-flex align-center justify-center layout text-xs-center> 161 <v-flex align-center justify-center layout text-xs-center>
162 <v-avatar size="50px" style="position:absolute; top:20px;"> 162 <v-avatar size="50px" style="position:absolute; top:20px;">
163 <img src="/static/icon/user.png"> 163 <img src="/static/icon/user.png">
164 </v-avatar> 164 </v-avatar>
165 </v-flex> 165 </v-flex>
166 <v-card-text> 166 <v-card-text>
167 <v-container grid-list-md> 167 <v-container grid-list-md>
168 <v-layout wrap> 168 <v-layout wrap>
169 <v-flex> 169 <v-flex>
170 <br> 170 <br>
171 <br> 171 <br>
172 <v-layout> 172 <v-layout>
173 <v-flex xs5 sm6> 173 <v-flex xs5 sm6>
174 <h5 class="right my-1">Title:</h5> 174 <h5 class="right my-1">Title:</h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.title }}</h5> 177 <h5 class="my-1">{{ editedItem.title }}</h5>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout> 180 <v-layout>
181 <v-flex xs5 sm6> 181 <v-flex xs5 sm6>
182 <h5 class="right my-1">Description:</h5> 182 <h5 class="right my-1">Description:</h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.description }}</h5> 185 <h5 class="my-1">{{ editedItem.description }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 203
204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
205 <v-data-table 205 <v-data-table
206 :headers="headers" 206 :headers="headers"
207 :items="desserts" 207 :items="desserts"
208 :pagination.sync="pagination" 208 :pagination.sync="pagination"
209 :search="search" 209 :search="search"
210 > 210 >
211 <template slot="items" slot-scope="props"> 211 <template slot="items" slot-scope="props">
212 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 212 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215 215
216 <td class="text-xs-center"> 216 <td class="text-xs-center">
217 <span> 217 <span>
218 <img 218 <img
219 style="cursor:pointer; width:25px; height:18px; " 219 style="cursor:pointer; width:25px; height:18px; "
220 class="mr-5" 220 class="mr-5"
221 @click="profile(props.item)" 221 @click="profile(props.item)"
222 src="/static/icon/eye1.png" 222 src="/static/icon/eye1.png"
223 > 223 >
224 <img 224 <img
225 style="cursor:pointer; width:20px; height:18px; " 225 style="cursor:pointer; width:20px; height:18px; "
226 class="mr-5" 226 class="mr-5"
227 @click="editItem(props.item)" 227 @click="editItem(props.item)"
228 src="/static/icon/edit1.png" 228 src="/static/icon/edit1.png"
229 > 229 >
230 <img 230 <img
231 style="cursor:pointer; width:20px;height:20px; " 231 style="cursor:pointer; width:20px;height:20px; "
232 class="mr-5" 232 class="mr-5"
233 @click="deleteItem(props.item)" 233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png" 234 src="/static/icon/delete1.png"
235 > 235 >
236 </span> 236 </span>
237 </td> 237 </td>
238 </template> 238 </template>
239 <v-alert 239 <v-alert
240 slot="no-results" 240 slot="no-results"
241 :value="true" 241 :value="true"
242 color="error" 242 color="error"
243 icon="warning" 243 icon="warning"
244 >Your search for "{{ search }}" found no results.</v-alert> 244 >Your search for "{{ search }}" found no results.</v-alert>
245 </v-data-table> 245 </v-data-table>
246 </v-tab-item> 246 </v-tab-item>
247 247
248 <!-- ****** ADD MULTIPLE REMINDER ****** --> 248 <!-- ****** ADD MULTIPLE REMINDER ****** -->
249 249
250 <v-tab-item> 250 <v-tab-item>
251 <v-container> 251 <v-container>
252 <v-snackbar 252 <v-snackbar
253 :timeout="timeout" 253 :timeout="timeout"
254 :top="y === 'top'" 254 :top="y === 'top'"
255 :right="x === 'right'" 255 :right="x === 'right'"
256 :vertical="mode === 'vertical'" 256 :vertical="mode === 'vertical'"
257 v-model="snackbar" 257 v-model="snackbar"
258 color="success" 258 color="success"
259 >{{ text }}</v-snackbar> 259 >{{ text }}</v-snackbar>
260 <v-flex xs12 sm12 class="my-4"> 260 <v-flex xs12 sm12 class="my-4">
261 <v-card flat> 261 <v-card flat>
262 <v-form ref="form" v-model="valid" lazy-validation> 262 <v-form ref="form" v-model="valid" lazy-validation>
263 <v-container fluid> 263 <v-container fluid>
264 <v-layout> 264 <v-layout>
265 <v-flex 265 <v-flex
266 xs12 266 xs12
267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
268 > 268 >
269 <v-avatar size="100px"> 269 <v-avatar size="100px">
270 <img src="/static/icon/user.png" v-if="!imageUrl"> 270 <img src="/static/icon/user.png" v-if="!imageUrl">
271 </v-avatar> 271 </v-avatar>
272 <input 272 <input
273 type="file" 273 type="file"
274 style="display: none" 274 style="display: none"
275 ref="image" 275 ref="image"
276 accept="image/*" 276 accept="image/*"
277 @change="onFilePicked" 277 @change="onFilePicked"
278 > 278 >
279 <img 279 <img
280 :src="imageData.imageUrl" 280 :src="imageData.imageUrl"
281 height="150" 281 height="150"
282 v-if="imageUrl" 282 v-if="imageUrl"
283 style="border-radius:50%; width:200px" 283 style="border-radius:50%; width:200px"
284 > 284 >
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 <v-flex xs12> 287 <v-flex xs12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Title:</label> 290 <label class="right">Title:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs4 class="ml-3"> 292 <v-flex xs4 class="ml-3">
293 <v-text-field 293 <v-text-field
294 v-model="addRemind.title" 294 v-model="addRemind.title"
295 placeholder="fill your Title" 295 placeholder="fill your Title"
296 type="text" 296 type="text"
297 :rules="titleRules" 297 :rules="titleRules"
298 required 298 required
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 <v-flex xs12> 303 <v-flex xs12>
304 <v-layout> 304 <v-layout>
305 <v-flex xs4 class="pt-4 subheading"> 305 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label> 306 <label class="right">Description:</label>
307 </v-flex> 307 </v-flex>
308 <v-flex xs4 class="ml-3"> 308 <v-flex xs4 class="ml-3">
309 <v-text-field 309 <v-text-field
310 placeholder="fill your Description" 310 placeholder="fill your Description"
311 :rules="descriptionRules" 311 :rules="descriptionRules"
312 v-model="addRemind.description" 312 v-model="addRemind.description"
313 type="text" 313 type="text"
314 required 314 required
315 ></v-text-field> 315 ></v-text-field>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-flex> 318 </v-flex>
319 <v-layout> 319 <v-layout>
320 <v-flex xs12 sm6 offset-sm3> 320 <v-flex xs12 sm6 offset-sm3>
321 <v-card-actions> 321 <v-card-actions>
322 <v-btn @click="clear" round dark>clear</v-btn> 322 <v-btn @click="clear" round dark>clear</v-btn>
323 <v-spacer></v-spacer> 323 <v-spacer></v-spacer>
324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
325 </v-card-actions> 325 </v-card-actions>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-container> 328 </v-container>
329 </v-form> 329 </v-form>
330 </v-card> 330 </v-card>
331 </v-flex> 331 </v-flex>
332 </v-container> 332 </v-container>
333 </v-tab-item> 333 </v-tab-item>
334 </v-tabs> 334 </v-tabs>
335 <div class="loader" v-if="showLoader"> 335 <div class="loader" v-if="showLoader">
336 <v-progress-circular indeterminate color="white"></v-progress-circular> 336 <v-progress-circular indeterminate color="white"></v-progress-circular>
337 </div> 337 </div>
338 </v-app> 338 </v-app>
339 </template> 339 </template>
340 340
341 <script> 341 <script>
342 import http from "@/Services/http.js"; 342 import http from "@/Services/http.js";
343 import Util from "@/util"; 343 import Util from "@/util";
344 344
345 export default { 345 export default {
346 data: () => ({ 346 data: () => ({
347 snackbar: false, 347 snackbar: false,
348 y: "top", 348 y: "top",
349 x: "right", 349 x: "right",
350 mode: "", 350 mode: "",
351 timeout: 3000, 351 timeout: 3000,
352 text: "", 352 text: "",
353 loading: false, 353 loading: false,
354 date: null, 354 date: null,
355 search: "", 355 search: "",
356 showLoader:false, 356 showLoader:false,
357 dialog: false, 357 dialog: false,
358 dialog1: false, 358 dialog1: false,
359 valid: true, 359 valid: true,
360 isActive: true, 360 isActive: true,
361 newActive: false, 361 newActive: false,
362 AddUsercredentials: {}, 362 AddUsercredentials: {},
363 pagination: { 363 pagination: {
364 rowsPerPage: 15 364 rowsPerPage: 15
365 }, 365 },
366 imageData: {}, 366 imageData: {},
367 imageName: "", 367 imageName: "",
368 imageUrl: "", 368 imageUrl: "",
369 imageFile: "", 369 imageFile: "",
370 titleRules: [v => !!v || " Tilte is required"], 370 titleRules: [v => !!v || " Tilte is required"],
371 descriptionRules: [v => !!v || " Description is required"], 371 descriptionRules: [v => !!v || " Description is required"],
372 headers: [ 372 headers: [
373 { 373 {
374 text: "No", 374 text: "No",
375 align: "center", 375 align: "center",
376 sortable: false, 376 sortable: false,
377 value: "No" 377 value: "No"
378 }, 378 },
379 { text: "Title", value: "title", sortable: false, align: "center" }, 379 { text: "Title", value: "title", sortable: false, align: "center" },
380 { text: "Description", value: "description", sortable: false, align: "center" }, 380 { text: "Description", value: "description", sortable: false, align: "center" },
381 { text: "Action", value: "", sortable: false, align: "center" } 381 { text: "Action", value: "", sortable: false, align: "center" }
382 ], 382 ],
383 desserts: [], 383 desserts: [],
384 editedIndex: -1, 384 editedIndex: -1,
385 addRemind:{ 385 addRemind:{
386 title:'', 386 title:'',
387 description:'' 387 description:''
388 }, 388 },
389 editedItem: { 389 editedItem: {
390 title:'', 390 title:'',
391 description:'' 391 description:''
392 }, 392 },
393 defaultItem: { 393 defaultItem: {
394 title:'', 394 title:'',
395 description:'' 395 description:''
396 }, 396 },
397 userName: "", 397 userName: "",
398 items: [ 398 items: [
399 { 399 {
400 href: "/changepassword", 400 href: "/changepassword",
401 title: "Change Password", 401 title: "Change Password",
402 click: e => { 402 click: e => {
403 console.log(e); 403 console.log(e);
404 } 404 }
405 }, 405 },
406 { 406 {
407 href: "#", 407 href: "#",
408 title: "Logout", 408 title: "Logout",
409 click: e => { 409 click: e => {
410 window.getApp.$emit("APP_LOGOUT"); 410 window.getApp.$emit("APP_LOGOUT");
411 } 411 }
412 } 412 }
413 ] 413 ]
414 }), 414 }),
415 methods: { 415 methods: {
416 pickFile() { 416 pickFile() {
417 this.$refs.image.click(); 417 this.$refs.image.click();
418 }, 418 },
419 419
420 onFilePicked(e) { 420 onFilePicked(e) {
421 // console.log(e) 421 // console.log(e)
422 const files = e.target.files; 422 const files = e.target.files;
423 this.imageData.upload = e.target.files[0]; 423 this.imageData.upload = e.target.files[0];
424 if (files[0] !== undefined) { 424 if (files[0] !== undefined) {
425 this.imageName = files[0].name; 425 this.imageName = files[0].name;
426 if (this.imageName.lastIndexOf(".") <= 0) { 426 if (this.imageName.lastIndexOf(".") <= 0) {
427 return; 427 return;
428 } 428 }
429 const fr = new FileReader(); 429 const fr = new FileReader();
430 fr.readAsDataURL(files[0]); 430 fr.readAsDataURL(files[0]);
431 fr.addEventListener("load", () => { 431 fr.addEventListener("load", () => {
432 this.imageUrl = fr.result; 432 this.imageUrl = fr.result;
433 this.imageFile = files[0]; // this is an image file that can be sent to server... 433 this.imageFile = files[0]; // this is an image file that can be sent to server...
434 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 434 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
435 console.log("upload=======>", this.imageData.imageUrl); 435 console.log("upload=======>", this.imageData.imageUrl);
436 console.log("imageFile", this.imageFile); 436 console.log("imageFile", this.imageFile);
437 }); 437 });
438 } else { 438 } else {
439 this.imageName = ""; 439 this.imageName = "";
440 this.imageFile = ""; 440 this.imageFile = "";
441 this.imageUrl = ""; 441 this.imageUrl = "";
442 } 442 }
443 }, 443 },
444 getReminderList() { 444 getReminderList() {
445 this.showLoader = true; 445 this.showLoader = true;
446 var token = this.$store.state.token; 446 var token = this.$store.state.token;
447 http() 447 http()
448 .get("/getRemindersList", { 448 .get("/getRemindersList", {
449 headers: { Authorization: "Bearer " + token } 449 headers: { Authorization: "Bearer " + token }
450 }) 450 })
451 .then(response => { 451 .then(response => {
452 this.desserts = response.data.data; 452 this.desserts = response.data.data;
453 this.showLoader = false; 453 this.showLoader = false;
454 // console.log("getRemindersList=====>",this.desserts) 454 // console.log("getRemindersList=====>",this.desserts)
455 }) 455 })
456 .catch(err => { 456 .catch(error => {
457 // console.log("err====>", err); 457 // console.log("err====>", err);
458 this.showLoader = false; 458 this.showLoader = false;
459 if (error.response.status === 401) { 459 if (error.response.status === 401) {
460 this.$router.replace({ path: "/" }); 460 this.$router.replace({ path: "/" });
461 this.$store.dispatch("setToken", null); 461 this.$store.dispatch("setToken", null);
462 this.$store.dispatch("Id", null); 462 this.$store.dispatch("Id", null);
463 } 463 }
464 }); 464 });
465 }, 465 },
466 editItem(item) { 466 editItem(item) {
467 this.editedIndex = this.desserts.indexOf(item); 467 this.editedIndex = this.desserts.indexOf(item);
468 this.editedItem = Object.assign({}, item); 468 this.editedItem = Object.assign({}, item);
469 this.dialog = true; 469 this.dialog = true;
470 }, 470 },
471 profile(item) { 471 profile(item) {
472 this.editedIndex = this.desserts.indexOf(item); 472 this.editedIndex = this.desserts.indexOf(item);
473 this.editedItem = Object.assign({}, item); 473 this.editedItem = Object.assign({}, item);
474 this.dialog1 = true; 474 this.dialog1 = true;
475 }, 475 },
476 476
477 deleteItem(item) { 477 deleteItem(item) {
478 let deleteReminder = { 478 let deleteReminder = {
479 reminderId: item._id 479 reminderId: item._id
480 }; 480 };
481 http() 481 http()
482 .delete( 482 .delete(
483 "/deleteReminder", 483 "/deleteReminder",
484 confirm("Are you sure you want to delete this?") && { 484 confirm("Are you sure you want to delete this?") && {
485 params: deleteReminder 485 params: deleteReminder
486 } 486 }
487 ) 487 )
488 .then(response => { 488 .then(response => {
489 // console.log("deleteReminder",deleteReminder) 489 // console.log("deleteReminder",deleteReminder)
490 if ((this.snackbar = true)) { 490 if ((this.snackbar = true)) {
491 this.text = "Successfully delete Existing User"; 491 this.text = "Successfully delete Existing User";
492 } 492 }
493 this.getReminderList(); 493 this.getReminderList();
494 }) 494 })
495 .catch(error => { 495 .catch(error => {
496 // console.log(error); 496 // console.log(error);
497 }); 497 });
498 }, 498 },
499 activeTab(type) { 499 activeTab(type) {
500 switch (type) { 500 switch (type) {
501 case "existing": 501 case "existing":
502 this.newActive = false; 502 this.newActive = false;
503 this.isActive = true; 503 this.isActive = true;
504 break; 504 break;
505 505
506 default: 506 default:
507 this.newActive = true; 507 this.newActive = true;
508 this.isActive = false; 508 this.isActive = false;
509 break; 509 break;
510 } 510 }
511 }, 511 },
512 close() { 512 close() {
513 this.dialog = false; 513 this.dialog = false;
514 setTimeout(() => { 514 setTimeout(() => {
515 this.editedItem = Object.assign({}, this.defaultItem); 515 this.editedItem = Object.assign({}, this.defaultItem);
516 this.editedIndex = -1; 516 this.editedIndex = -1;
517 }, 300); 517 }, 300);
518 }, 518 },
519 close1() { 519 close1() {
520 this.dialog1 = false; 520 this.dialog1 = false;
521 }, 521 },
522 submit() { 522 submit() {
523 if (this.$refs.form.validate()) { 523 if (this.$refs.form.validate()) {
524 let imageData = new FormData(); 524 let imageData = new FormData();
525 imageData.append("upload", this.imageFile); 525 imageData.append("upload", this.imageFile);
526 console.log(imageData); 526 console.log(imageData);
527 let addReminds = { 527 let addReminds = {
528 title: this.addRemind.title, 528 title: this.addRemind.title,
529 description: this.addRemind.description, 529 description: this.addRemind.description,
530 // imageData 530 // imageData
531 }; 531 };
532 http() 532 http()
533 .post("/createReminder", addReminds) 533 .post("/createReminder", addReminds)
534 .then(response => { 534 .then(response => {
535 // console.log(addReminds) 535 // console.log(addReminds)
536 if ((this.snackbar = true)) { 536 if ((this.snackbar = true)) {
537 this.text = "New user added successfully"; 537 this.text = "New user added successfully";
538 } 538 }
539 this.getReminderList(); 539 this.getReminderList();
540 this.clear(); 540 this.clear();
541 }) 541 })
542 .catch(error => { 542 .catch(error => {
543 // console.log(error); 543 // console.log(error);
544 if ((this.snackbar = true)) { 544 if ((this.snackbar = true)) {
545 this.text = error.response.data.message; 545 this.text = error.response.data.message;
546 } 546 }
547 }); 547 });
548 } 548 }
549 }, 549 },
550 mail() {}, 550 mail() {},
551 download() {}, 551 download() {},
552 clear() { 552 clear() {
553 this.$refs.form.reset(); 553 this.$refs.form.reset();
554 }, 554 },
555 save() { 555 save() {
556 let imageData = new FormData(); 556 let imageData = new FormData();
557 imageData.append("upload", this.imageFile); 557 imageData.append("upload", this.imageFile);
558 console.log(imageData); 558 console.log(imageData);
559 let editReminder = { 559 let editReminder = {
560 reminderId:this.editedItem._id, 560 reminderId:this.editedItem._id,
561 title: this.editedItem.title, 561 title: this.editedItem.title,
562 description: this.editedItem.description, 562 description: this.editedItem.description,
563 // imageData 563 // imageData
564 }; 564 };
565 http() 565 http()
566 .put("/updateReminder", editReminder) 566 .put("/updateReminder", editReminder)
567 .then(response => { 567 .then(response => {
568 // console.log("updateReminder",updateReminder); 568 // console.log("updateReminder",updateReminder);
569 if ((this.snackbar = true)) { 569 if ((this.snackbar = true)) {
570 this.text = "Successfully Edit Existing User"; 570 this.text = "Successfully Edit Existing User";
571 } 571 }
572 this.getReminderList(); 572 this.getReminderList();
573 }) 573 })
574 .catch(error => { 574 .catch(error => {
575 // console.log(error); 575 // console.log(error);
576 }); 576 });
577 this.close(); 577 this.close();
578 }, 578 },
579 handleDrawerToggle() { 579 handleDrawerToggle() {
580 window.getApp.$emit("APP_DRAWER_TOGGLED"); 580 window.getApp.$emit("APP_DRAWER_TOGGLED");
581 }, 581 },
582 handleFullScreen() { 582 handleFullScreen() {
583 Util.toggleFullScreen(); 583 Util.toggleFullScreen();
584 } 584 }
585 }, 585 },
586 mounted() { 586 mounted() {
587 this.getReminderList(); 587 this.getReminderList();
588 }, 588 },
589 computed: { 589 computed: {
590 toolbarColor() { 590 toolbarColor() {
591 return this.$vuetify.options.extra.mainNav; 591 return this.$vuetify.options.extra.mainNav;
592 } 592 }
593 } 593 }
594 }; 594 };
595 </script> 595 </script>
596 <style scoped> 596 <style scoped>
597 .v-tabs__div { 597 .v-tabs__div {
598 text-transform: none; 598 text-transform: none;
599 } 599 }
600 .v-input__prepend-outer { 600 .v-input__prepend-outer {
601 margin-right: 0px !important; 601 margin-right: 0px !important;
602 } 602 }
603 .v-card__actions .v-btn { 603 .v-card__actions .v-btn {
604 margin: 0 15px; 604 margin: 0 15px;
605 min-width: 120px; 605 min-width: 120px;
606 } 606 }
607 .primary { 607 .primary {
608 background-color: #aaa !important; 608 background-color: #aaa !important;
609 border-color: #aaa !important; 609 border-color: #aaa !important;
610 } 610 }
611 h4 { 611 h4 {
612 background-repeat: no-repeat; 612 background-repeat: no-repeat;
613 padding: 8px; 613 padding: 8px;
614 margin: auto; 614 margin: auto;
615 font-size: 25px; 615 font-size: 25px;
616 } 616 }
617 #name { 617 #name {
618 position: absolute; 618 position: absolute;
619 left: 100px; 619 left: 100px;
620 top: 17px; 620 top: 17px;
621 } 621 }
622 #icon { 622 #icon {
623 position: absolute; 623 position: absolute;
624 right: 8px; 624 right: 8px;
625 top: 8px; 625 top: 8px;
626 } 626 }
627 #m { 627 #m {
628 position: relative; 628 position: relative;
629 left: 135px; 629 left: 135px;
630 top: -15px; 630 top: -15px;
631 } 631 }
632 #G { 632 #G {
633 position: absolute; 633 position: absolute;
634 top: 38px; 634 top: 38px;
635 color: white; 635 color: white;
636 } 636 }
637 #bt { 637 #bt {
638 position: relative; 638 position: relative;
639 top: -20px; 639 top: -20px;
640 left: 115px; 640 left: 115px;
641 } 641 }
642 #e { 642 #e {
643 position: relative; 643 position: relative;
644 top: 5px; 644 top: 5px;
645 right: -30px; 645 right: -30px;
646 height: 17px; 646 height: 17px;
647 cursor: pointer; 647 cursor: pointer;
648 } 648 }
649 #d { 649 #d {
650 position: relative; 650 position: relative;
651 top: 5px; 651 top: 5px;
652 right: -70px; 652 right: -70px;
653 height: 17px; 653 height: 17px;
654 cursor: pointer; 654 cursor: pointer;
655 } 655 }
656 #td { 656 #td {
657 border: 1px solid #dddddd; 657 border: 1px solid #dddddd;
658 text-align: left; 658 text-align: left;
659 padding: 8px; 659 padding: 8px;
660 } 660 }
661 #dialog { 661 #dialog {
662 height: 550px; 662 height: 550px;
663 } 663 }
664 .active { 664 .active {
665 background-color: gray; 665 background-color: gray;
666 color: white !important; 666 color: white !important;
667 } 667 }
668 .activebtn { 668 .activebtn {
669 color: black !important; 669 color: black !important;
670 } 670 }
671 #flex { 671 #flex {
672 height: 300px; 672 height: 300px;
673 } 673 }
674 .top { 674 .top {
675 margin-top: 100px; 675 margin-top: 100px;
676 } 676 }
677 .v-tabs__item a { 677 .v-tabs__item a {
678 font-size: 16px !important; 678 font-size: 16px !important;
679 } 679 }
680 @media screen and (max-width: 769px) { 680 @media screen and (max-width: 769px) {
681 .top { 681 .top {
682 margin-top: 0 !important; 682 margin-top: 0 !important;
683 } 683 }
684 .userSearch .v-icon { 684 .userSearch .v-icon {
685 font-size: 20px !important; 685 font-size: 20px !important;
686 margin-left: 20px; 686 margin-left: 20px;
687 } 687 }
688 } 688 }
689 @media screen and (max-width: 380px) { 689 @media screen and (max-width: 380px) {
690 .pl-3 { 690 .pl-3 {
691 padding-left: 0px !important; 691 padding-left: 0px !important;
692 } 692 }
693 .right { 693 .right {
694 float: none !important; 694 float: none !important;
695 } 695 }
696 .subheading { 696 .subheading {
697 font-size: 14px !important; 697 font-size: 14px !important;
698 } 698 }
699 .v-card__actions .v-btn { 699 .v-card__actions .v-btn {
700 margin: 0 0px; 700 margin: 0 0px;
701 min-width: 100px; 701 min-width: 100px;
702 } 702 }
703 /* .searchIcon .v-icon { 703 /* .searchIcon .v-icon {
704 font-size: 20px; 704 font-size: 20px;
705 margin-left: 20px; 705 margin-left: 20px;
706 } */ 706 } */
707 .subheading { 707 .subheading {
708 font-size: 12px !important; 708 font-size: 12px !important;
709 } 709 }
710 h5 { 710 h5 {
711 font-size: 13px; 711 font-size: 13px;
712 } 712 }
713 } 713 }
714 .v-icon { 714 .v-icon {
715 font-size: 30px; 715 font-size: 30px;
716 } 716 }
717 @media screen and (min-width: 1270px) { 717 @media screen and (min-width: 1270px) {
718 .hide { 718 .hide {
719 display: none; 719 display: none;
720 } 720 }
721 /* } 721 /* }
722 @media screen and (max-width: 962px) { 722 @media screen and (max-width: 962px) {
723 .imglogo{ 723 .imglogo{
724 position: absolute; 724 position: absolute;
725 top: 13px; 725 top: 13px;
726 left: 13px !important; 726 left: 13px !important;
727 width: 70px; 727 width: 70px;
728 height: 24px; 728 height: 24px;
729 } */ 729 } */
730 } 730 }
731 @media screen and (max-width: 420px) { 731 @media screen and (max-width: 420px) {
732 .userSearch .v-text-field .v-label { 732 .userSearch .v-text-field .v-label {
733 line-height: 24px !important; 733 line-height: 24px !important;
734 } 734 }
735 .userSearch .v-label { 735 .userSearch .v-label {
736 font-size: 13px !important; 736 font-size: 13px !important;
737 } 737 }
738 .v-list__tile { 738 .v-list__tile {
739 font-size: 14px; 739 font-size: 14px;
740 padding: 0 10px; 740 padding: 0 10px;
741 } 741 }
742 .name { 742 .name {
743 font-size: 15px; 743 font-size: 15px;
744 } 744 }
745 } 745 }
746 </style> 746 </style>
src/pages/Report/studentReport.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 11
12 <!-- ****** Student Report TABLE****** --> 12 <!-- ****** Student Report TABLE****** -->
13 <v-card flat> 13 <v-card flat>
14 <v-card-actions> 14 <v-card-actions>
15 <v-layout> 15 <v-layout>
16 <h4 class="right mt-2 ml-2">Student Report</h4> 16 <h4 class="right mt-2 ml-2">Student Report</h4>
17 </v-layout> 17 </v-layout>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 </v-card-actions> 19 </v-card-actions>
20 </v-card> 20 </v-card>
21 <v-card flat class="elevation-0"> 21 <v-card flat class="elevation-0">
22 <v-form ref="form" v-model="valid" lazy-validation> 22 <v-form ref="form" v-model="valid" lazy-validation>
23 <v-flex xs12 sm12 lg12> 23 <v-flex xs12 sm12 lg12>
24 <v-layout wrap> 24 <v-layout wrap>
25 <v-flex xs12 sm12 lg4> 25 <v-flex xs12 sm12 lg4>
26 <v-layout> 26 <v-layout>
27 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 27 <v-flex xs4 sm4 lg3 class="subheading mt-4">
28 <label class="right">Report For :</label> 28 <label class="right">Report For :</label>
29 </v-flex> 29 </v-flex>
30 <v-flex xs7 sm6 lg8 class="ml-2"> 30 <v-flex xs7 sm6 lg8 class="ml-2">
31 <v-autocomplete 31 <v-autocomplete
32 v-model="report.form" 32 v-model="report.form"
33 label="Select your report for" 33 label="Select your report for"
34 :items="formList" 34 :items="formList"
35 item-text="name" 35 item-text="name"
36 item-value="value" 36 item-value="value"
37 @change="getReport(report.form)" 37 @change="getReport(report.form)"
38 :rules="formRules" 38 :rules="formRules"
39 required 39 required
40 ></v-autocomplete> 40 ></v-autocomplete>
41 </v-flex> 41 </v-flex>
42 </v-layout> 42 </v-layout>
43 </v-flex> 43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="bloodGroup"> 44 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 46 <v-flex xs4 sm4 lg4 class="subheading mt-4">
47 <label class="right">Blood Group :</label> 47 <label class="right">Blood Group :</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs7 sm6 lg8 class="ml-2"> 49 <v-flex xs7 sm6 lg8 class="ml-2">
50 <v-autocomplete 50 <v-autocomplete
51 v-model="report.bloodGroup" 51 v-model="report.bloodGroup"
52 label="Select your Blood Group " 52 label="Select your Blood Group "
53 :items="bloodGroupList" 53 :items="bloodGroupList"
54 :rules="bloodGroupRules" 54 :rules="bloodGroupRules"
55 required 55 required
56 ></v-autocomplete> 56 ></v-autocomplete>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 <v-flex xs12 sm12 lg4 v-if="genderShow"> 60 <v-flex xs12 sm12 lg4 v-if="genderShow">
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 62 <v-flex xs4 sm4 lg4 class="subheading mt-4">
63 <label class="right">Gender:</label> 63 <label class="right">Gender:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 sm6 lg8 class="ml-2"> 65 <v-flex xs7 sm6 lg8 class="ml-2">
66 <v-autocomplete 66 <v-autocomplete
67 v-model="report.gender" 67 v-model="report.gender"
68 label="Select your gender " 68 label="Select your gender "
69 :items="gender" 69 :items="gender"
70 :rules="genderRules" 70 :rules="genderRules"
71 required 71 required
72 ></v-autocomplete> 72 ></v-autocomplete>
73 </v-flex> 73 </v-flex>
74 </v-layout> 74 </v-layout>
75 </v-flex> 75 </v-flex>
76 <v-flex xs12 sm12 lg4 v-if="TransportShow"> 76 <v-flex xs12 sm12 lg4 v-if="TransportShow">
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 78 <v-flex xs4 sm4 lg4 class="subheading mt-4">
79 <label class="right">Route:</label> 79 <label class="right">Route:</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs7 sm6 lg8 class="ml-2"> 81 <v-flex xs7 sm6 lg8 class="ml-2">
82 <v-autocomplete 82 <v-autocomplete
83 v-model="report.route" 83 v-model="report.route"
84 label="Select your gender " 84 label="Select your gender "
85 :items="route" 85 :items="route"
86 :rules="routeRules" 86 :rules="routeRules"
87 required 87 required
88 ></v-autocomplete> 88 ></v-autocomplete>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-flex xs12 sm12 lg4 v-if="HostelShow"> 92 <v-flex xs12 sm12 lg4 v-if="HostelShow">
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 94 <v-flex xs4 sm4 lg4 class="subheading mt-4">
95 <label class="right">Hostel:</label> 95 <label class="right">Hostel:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs7 sm6 lg8 class="ml-2"> 97 <v-flex xs7 sm6 lg8 class="ml-2">
98 <v-autocomplete 98 <v-autocomplete
99 v-model="report.route" 99 v-model="report.route"
100 label="Select your hostel " 100 label="Select your hostel "
101 :items="hostelList" 101 :items="hostelList"
102 :rules="hostelRules" 102 :rules="hostelRules"
103 required 103 required
104 ></v-autocomplete> 104 ></v-autocomplete>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 <v-flex xs12 sm12 lg4 v-if="countryShow"> 108 <v-flex xs12 sm12 lg4 v-if="countryShow">
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 110 <v-flex xs4 sm4 lg4 class="subheading mt-4">
111 <label class="right">Country :</label> 111 <label class="right">Country :</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs7 sm6 lg8 class="ml-2"> 113 <v-flex xs7 sm6 lg8 class="ml-2">
114 <v-autocomplete 114 <v-autocomplete
115 v-model="report.country" 115 v-model="report.country"
116 label="Select your Country " 116 label="Select your Country "
117 :items="countryList" 117 :items="countryList"
118 :rules="countryRules" 118 :rules="countryRules"
119 required 119 required
120 ></v-autocomplete> 120 ></v-autocomplete>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow"> 124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
125 <v-layout> 125 <v-layout>
126 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 126 <v-flex xs3 sm6 lg4 class="subheading mt-4">
127 <label class="right">Country :</label> 127 <label class="right">Country :</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs12 sm12 lg8 class="ml-2"> 129 <v-flex xs12 sm12 lg8 class="ml-2">
130 <v-select 130 <v-select
131 v-model="report.country" 131 v-model="report.country"
132 label="Select your Country " 132 label="Select your Country "
133 :items="countryList" 133 :items="countryList"
134 required 134 required
135 ></v-select> 135 ></v-select>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex>--> 138 </v-flex>-->
139 <v-flex xs12 sm12 lg4 v-if="classShow"> 139 <v-flex xs12 sm12 lg4 v-if="classShow">
140 <v-layout> 140 <v-layout>
141 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 141 <v-flex xs4 sm4 lg3 class="subheading mt-4">
142 <label class="right">Class:</label> 142 <label class="right">Class:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs7 sm6 lg8 class="ml-2"> 144 <v-flex xs7 sm6 lg8 class="ml-2">
145 <v-autocomplete 145 <v-autocomplete
146 v-model="report.classId" 146 v-model="report.classId"
147 label="Select your class" 147 label="Select your class"
148 type="text" 148 type="text"
149 :rules="classRules" 149 :rules="classRules"
150 :items="classList" 150 :items="classList"
151 item-text="classNum" 151 item-text="classNum"
152 item-value="_id" 152 item-value="_id"
153 @change="getSections(report.classId)" 153 @change="getSections(report.classId)"
154 required 154 required
155 ></v-autocomplete> 155 ></v-autocomplete>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 <v-flex xs12 sm12 lg4 v-if="sectionShow"> 159 <v-flex xs12 sm12 lg4 v-if="sectionShow">
160 <v-layout> 160 <v-layout>
161 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 161 <v-flex xs4 sm4 lg3 class="subheading mt-4">
162 <label class="right">Section:</label> 162 <label class="right">Section:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs7 sm6 lg8 class="ml-2"> 164 <v-flex xs7 sm6 lg8 class="ml-2">
165 <v-autocomplete 165 <v-autocomplete
166 :items="addSection" 166 :items="addSection"
167 label="Select your Section" 167 label="Select your Section"
168 v-model="report.sectionId" 168 v-model="report.sectionId"
169 :rules="sectionRules" 169 :rules="sectionRules"
170 item-text="name" 170 item-text="name"
171 item-value="_id" 171 item-value="_id"
172 name="Select Section" 172 name="Select Section"
173 required 173 required
174 ></v-autocomplete> 174 ></v-autocomplete>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-flex> 177 </v-flex>
178 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only"> 178 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only">
179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn> 179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn>
180 </v-flex> 180 </v-flex>
181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only"> 181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
182 <v-btn 182 <v-btn
183 @click="getStudents" 183 @click="getStudents"
184 round 184 round
185 dark 185 dark
186 :loading="loading" 186 :loading="loading"
187 class="mt-3 right" 187 class="mt-3 right"
188 >Get Report</v-btn> 188 >Get Report</v-btn>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-flex> 191 </v-flex>
192 </v-form> 192 </v-form>
193 </v-card> 193 </v-card>
194 <v-data-table 194 <v-data-table
195 :headers="headers" 195 :headers="headers"
196 :items="getStudentsReportList" 196 :items="getStudentsReportList"
197 :pagination.sync="pagination" 197 :pagination.sync="pagination"
198 :search="search" 198 :search="search"
199 v-show="showTable" 199 v-show="showTable"
200 > 200 >
201 <template slot="items" slot-scope="props"> 201 <template slot="items" slot-scope="props">
202 <td class="text-xs-center">{{ props.index + 1}}</td> 202 <td class="text-xs-center">{{ props.index + 1}}</td>
203 <td id="td" class="text-xs-center"> 203 <td id="td" class="text-xs-center">
204 <v-avatar> 204 <v-avatar>
205 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 205 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
206 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 206 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
207 </v-avatar> 207 </v-avatar>
208 </td> 208 </td>
209 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 209 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
210 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 210 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
211 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 211 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
212 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 212 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
213 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td> 213 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
214 </template> 214 </template>
215 <v-alert 215 <v-alert
216 slot="no-results" 216 slot="no-results"
217 :value="true" 217 :value="true"
218 color="error" 218 color="error"
219 icon="warning" 219 icon="warning"
220 >Your search for "{{ search }}" found no results.</v-alert> 220 >Your search for "{{ search }}" found no results.</v-alert>
221 </v-data-table> 221 </v-data-table>
222 <div class="loader" v-if="showLoader"> 222 <div class="loader" v-if="showLoader">
223 <v-progress-circular indeterminate color="white"></v-progress-circular> 223 <v-progress-circular indeterminate color="white"></v-progress-circular>
224 </div> 224 </div>
225 </v-app> 225 </v-app>
226 </template> 226 </template>
227 227
228 <script> 228 <script>
229 import http from "@/Services/http.js"; 229 import http from "@/Services/http.js";
230 import countryList from "@/script/country.js"; 230 import countryList from "@/script/country.js";
231 231
232 import moment from "moment"; 232 import moment from "moment";
233 233
234 export default { 234 export default {
235 data: () => ({ 235 data: () => ({
236 snackbar: false, 236 snackbar: false,
237 color: "", 237 color: "",
238 y: "top", 238 y: "top",
239 x: "right", 239 x: "right",
240 mode: "", 240 mode: "",
241 timeout: 10000, 241 timeout: 10000,
242 text: "", 242 text: "",
243 loading: false, 243 loading: false,
244 valid: true, 244 valid: true,
245 search: "", 245 search: "",
246 showLoader: false, 246 showLoader: false,
247 bloodGroup: false, 247 bloodGroup: false,
248 genderShow: false, 248 genderShow: false,
249 countryShow: false, 249 countryShow: false,
250 TransportShow: false, 250 TransportShow: false,
251 HostelShow: false, 251 HostelShow: false,
252 BirthdayShow: false, 252 BirthdayShow: false,
253 sectionShow: false, 253 sectionShow: false,
254 showTable: false, 254 showTable: false,
255 ClassShow: true, 255 ClassShow: true,
256 addSection: [], 256 addSection: [],
257 pagination: { 257 pagination: {
258 rowsPerPage: 15 258 rowsPerPage: 15
259 }, 259 },
260 formRules: [v => !!v || "Form For is required"], 260 formRules: [v => !!v || "Form For is required"],
261 bloodGroupRules: [v => !!v || "Blood group is required"], 261 bloodGroupRules: [v => !!v || "Blood group is required"],
262 classRules: [v => !!v || "Class is required"], 262 classRules: [v => !!v || "Class is required"],
263 sectionRules: [v => !!v || "Class is required"], 263 sectionRules: [v => !!v || "Class is required"],
264 genderRules: [v => !!v || "Gender is required"], 264 genderRules: [v => !!v || "Gender is required"],
265 routeRules: [v => !!v || "RouteI is required"], 265 routeRules: [v => !!v || "RouteI is required"],
266 hostelRules: [v => !!v || "Hostel is required"], 266 hostelRules: [v => !!v || "Hostel is required"],
267 countryRules: [v => !!v || "Country is required"], 267 countryRules: [v => !!v || "Country is required"],
268 headers: [ 268 headers: [
269 { 269 {
270 align: "justify-center", 270 align: "justify-center",
271 text: "No", 271 text: "No",
272 sortable: false, 272 sortable: false,
273 value: "No" 273 value: "No"
274 }, 274 },
275 { 275 {
276 text: "Profile Pic", 276 text: "Profile Pic",
277 vaue: "profilePicUrl", 277 vaue: "profilePicUrl",
278 sortable: false, 278 sortable: false,
279 align: "center" 279 align: "center"
280 }, 280 },
281 { 281 {
282 text: "Name", 282 text: "Name",
283 vaue: "name", 283 vaue: "name",
284 sortable: false, 284 sortable: false,
285 align: "center" 285 align: "center"
286 }, 286 },
287 { 287 {
288 text: "Roll No.", 288 text: "Roll No.",
289 value: "rollNo", 289 value: "rollNo",
290 sortable: false, 290 sortable: false,
291 align: "center" 291 align: "center"
292 }, 292 },
293 { 293 {
294 text: "Email", 294 text: "Email",
295 value: "email", 295 value: "email",
296 sortable: false, 296 sortable: false,
297 align: "center" 297 align: "center"
298 }, 298 },
299 { 299 {
300 text: "Class", 300 text: "Class",
301 value: "classId", 301 value: "classId",
302 sortable: false, 302 sortable: false,
303 align: "center" 303 align: "center"
304 }, 304 },
305 { 305 {
306 text: "Section", 306 text: "Section",
307 value: "sectionId", 307 value: "sectionId",
308 sortable: false, 308 sortable: false,
309 align: "center" 309 align: "center"
310 } 310 }
311 ], 311 ],
312 classList: [], 312 classList: [],
313 report: {}, 313 report: {},
314 markData: [], 314 markData: [],
315 formList: [ 315 formList: [
316 { 316 {
317 name: "Blood Group", 317 name: "Blood Group",
318 value: "bloodGroup" 318 value: "bloodGroup"
319 }, 319 },
320 "Country", 320 "Country",
321 "Gender", 321 "Gender",
322 "Transport", 322 "Transport",
323 "Hostel" 323 "Hostel"
324 // "Birthday" 324 // "Birthday"
325 ], 325 ],
326 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"], 326 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
327 gender: ["Male", "female"], 327 gender: ["Male", "female"],
328 getStudentsReportList: [], 328 getStudentsReportList: [],
329 studentReort: "", 329 studentReort: "",
330 countryList: [], 330 countryList: [],
331 route: [], 331 route: [],
332 Hostel: [], 332 Hostel: [],
333 hostelList: [], 333 hostelList: [],
334 token: "" 334 token: ""
335 }), 335 }),
336 methods: { 336 methods: {
337 clear() { 337 clear() {
338 this.$refs.form.reset(); 338 this.$refs.form.reset();
339 }, 339 },
340 getClass() { 340 getClass() {
341 this.showLoader = true; 341 this.showLoader = true;
342 http() 342 http()
343 .get("/getClassesList", { 343 .get("/getClassesList", {
344 headers: { Authorization: "Bearer " + this.token } 344 headers: { Authorization: "Bearer " + this.token }
345 }) 345 })
346 .then(response => { 346 .then(response => {
347 this.classList = response.data.data; 347 this.classList = response.data.data;
348 this.showLoader = false; 348 this.showLoader = false;
349 }) 349 })
350 .catch(err => { 350 .catch(err => {
351 this.showLoader = false; 351 this.showLoader = false;
352 // console.log("err====>", err); 352 if (error.response.status === 401) {
353 this.$router.replace({ path: "/" });
354 this.$store.dispatch("setToken", null);
355 this.$store.dispatch("Id", null);
356 this.$store.dispatch("Role", null);
357 }
353 }); 358 });
354 }, 359 },
355 getReport() { 360 getReport() {
356 if (this.report.form === "bloodGroup") { 361 if (this.report.form === "bloodGroup") {
357 this.bloodGroup = true; 362 this.bloodGroup = true;
358 this.genderShow = false; 363 this.genderShow = false;
359 this.TransportShow = false; 364 this.TransportShow = false;
360 this.countryShow = false; 365 this.countryShow = false;
361 this.BirthdayShow = false; 366 this.BirthdayShow = false;
362 this.HostelShow = false; 367 this.HostelShow = false;
363 this.classShow = false; 368 this.classShow = false;
364 this.sectionShow = false; 369 this.sectionShow = false;
365 } 370 }
366 if (this.report.form === "Gender") { 371 if (this.report.form === "Gender") {
367 this.genderShow = true; 372 this.genderShow = true;
368 this.bloodGroup = false; 373 this.bloodGroup = false;
369 this.TransportShow = false; 374 this.TransportShow = false;
370 this.BirthdayShow = false; 375 this.BirthdayShow = false;
371 this.countryShow = false; 376 this.countryShow = false;
372 this.HostelShow = false; 377 this.HostelShow = false;
373 this.classShow = true; 378 this.classShow = true;
374 } 379 }
375 if (this.report.form === "Transport") { 380 if (this.report.form === "Transport") {
376 this.TransportShow = true; 381 this.TransportShow = true;
377 this.genderShow = false; 382 this.genderShow = false;
378 this.bloodGroup = false; 383 this.bloodGroup = false;
379 this.BirthdayShow = false; 384 this.BirthdayShow = false;
380 this.countryShow = false; 385 this.countryShow = false;
381 this.HostelShow = false; 386 this.HostelShow = false;
382 this.classShow = true; 387 this.classShow = true;
383 } 388 }
384 if (this.report.form === "Country") { 389 if (this.report.form === "Country") {
385 this.countryShow = true; 390 this.countryShow = true;
386 this.TransportShow = false; 391 this.TransportShow = false;
387 this.genderShow = false; 392 this.genderShow = false;
388 this.bloodGroup = false; 393 this.bloodGroup = false;
389 this.BirthdayShow = false; 394 this.BirthdayShow = false;
390 this.HostelShow = false; 395 this.HostelShow = false;
391 this.classShow = true; 396 this.classShow = true;
392 } 397 }
393 if (this.report.form === "Hostel") { 398 if (this.report.form === "Hostel") {
394 this.HostelShow = true; 399 this.HostelShow = true;
395 this.TransportShow = false; 400 this.TransportShow = false;
396 this.genderShow = false; 401 this.genderShow = false;
397 this.bloodGroup = false; 402 this.bloodGroup = false;
398 this.countryShow = false; 403 this.countryShow = false;
399 this.BirthdayShow = false; 404 this.BirthdayShow = false;
400 this.classShow = true; 405 this.classShow = true;
401 } 406 }
402 if (this.report.form === "Birthday") { 407 if (this.report.form === "Birthday") {
403 this.BirthdayShow = true; 408 this.BirthdayShow = true;
404 this.TransportShow = false; 409 this.TransportShow = false;
405 this.genderShow = false; 410 this.genderShow = false;
406 this.HostelShow = false; 411 this.HostelShow = false;
407 this.bloodGroup = false; 412 this.bloodGroup = false;
408 this.countryShow = false; 413 this.countryShow = false;
409 this.classShow = true; 414 this.classShow = true;
410 } 415 }
411 }, 416 },
412 getStudents() { 417 getStudents() {
413 if (this.$refs.form.validate()) { 418 if (this.$refs.form.validate()) {
414 this.showLoader = true; 419 this.showLoader = true;
415 http() 420 http()
416 .get("/getStudentReport", { 421 .get("/getStudentReport", {
417 params: { 422 params: {
418 bloodGroup: this.report.bloodGroup, 423 bloodGroup: this.report.bloodGroup,
419 country: this.report.country, 424 country: this.report.country,
420 gender: this.report.gender, 425 gender: this.report.gender,
421 classId: this.report.classId, 426 classId: this.report.classId,
422 sectionId: this.report.sectionId 427 sectionId: this.report.sectionId
423 }, 428 },
424 headers: { Authorization: "Bearer " + this.token } 429 headers: { Authorization: "Bearer " + this.token }
425 }) 430 })
426 .then(response => { 431 .then(response => {
427 this.getStudentsReportList = response.data.data; 432 this.getStudentsReportList = response.data.data;
428 this.showTable = true; 433 this.showTable = true;
429 this.showLoader = false; 434 this.showLoader = false;
430 this.clear(); 435 this.clear();
431 // console.log("getSectionsList=====>", response.data.data); 436 // console.log("getSectionsList=====>", response.data.data);
432 }) 437 })
433 .catch(error => { 438 .catch(error => {
434 console.log("err====>", error); 439 console.log("err====>", error);
435 this.showLoader = false; 440 this.showLoader = false;
436 }); 441 });
437 } 442 }
438 }, 443 },
439 getSections() { 444 getSections() {
440 this.sectionShow = true; 445 this.sectionShow = true;
441 this.showLoader = true; 446 this.showLoader = true;
442 http() 447 http()
443 .get( 448 .get(
444 "/getSectionsList", 449 "/getSectionsList",
445 { params: { classId: this.report.classId } }, 450 { params: { classId: this.report.classId } },
446 { 451 {
447 headers: { Authorization: "Bearer " + this.token } 452 headers: { Authorization: "Bearer " + this.token }
448 } 453 }
449 ) 454 )
450 .then(response => { 455 .then(response => {
451 this.addSection = response.data.data; 456 this.addSection = response.data.data;
452 this.showLoader = false; 457 this.showLoader = false;
453 }) 458 })
454 .catch(error => { 459 .catch(error => {
455 console.log("err====>", error); 460 console.log("err====>", error);
456 this.showLoader = false; 461 this.showLoader = false;
457 }); 462 });
458 } 463 }
459 // getFormList() { 464 // getFormList() {
460 // this.showLoader = true; 465 // this.showLoader = true;
461 // http() 466 // http()
462 // .get("/getExamsList", { 467 // .get("/getExamsList", {
463 // headers: { Authorization: "Bearer " + this.token } 468 // headers: { Authorization: "Bearer " + this.token }
464 // }) 469 // })
465 // .then(response => { 470 // .then(response => {
466 // this.formList = response.data.data; 471 // this.formList = response.data.data;
467 // this.showLoader = false; 472 // this.showLoader = false;
468 // }) 473 // })
469 // .catch(error => { 474 // .catch(error => {
470 // // console.log("err====>", err); 475 // // console.log("err====>", err);
471 // this.showLoader = false; 476 // this.showLoader = false;
472 // this.snackbar = true; 477 // this.snackbar = true;
473 // this.text = error.response.data.message; 478 // this.text = error.response.data.message;
474 // if (error.response.status === 401) { 479 // if (error.response.status === 401) {
475 // this.$router.replace({ path: "/" }); 480 // this.$router.replace({ path: "/" });
476 // this.$store.dispatch("setToken", null); 481 // this.$store.dispatch("setToken", null);
477 // this.$store.dispatch("Id", null); 482 // this.$store.dispatch("Id", null);
478 // } 483 // }
479 // }); 484 // });
480 // } 485 // }
481 }, 486 },
482 mounted() { 487 mounted() {
483 this.token = this.$store.state.token; 488 this.token = this.$store.state.token;
484 const getCountryList = countryList(); 489 const getCountryList = countryList();
485 this.countryList = getCountryList; 490 this.countryList = getCountryList;
486 // console.log("getindustryList", this.countryList); 491 // console.log("getindustryList", this.countryList);
487 // this.getExamList(); 492 // this.getExamList();
488 this.getClass(); 493 this.getClass();
489 }, 494 },
490 created() { 495 created() {
491 this.$root.$on("app:search", search => { 496 this.$root.$on("app:search", search => {
492 this.search = search; 497 this.search = search;
493 }); 498 });
494 }, 499 },
495 beforeDestroy() { 500 beforeDestroy() {
496 // dont forget to remove the listener 501 // dont forget to remove the listener
497 this.$root.$off("app:search"); 502 this.$root.$off("app:search");
498 } 503 }
499 }; 504 };
500 </script> 505 </script>
501 <style scoped> 506 <style scoped>
502 .active { 507 .active {
503 background-color: gray; 508 background-color: gray;
504 color: white !important; 509 color: white !important;
505 } 510 }
506 .activebtn { 511 .activebtn {
507 color: black !important; 512 color: black !important;
508 } 513 }
509 </style>s 514 </style>s
src/pages/School/school.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing School</v-tab> 10 >Existing School</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New School</v-tab> 18 >Add New School</v-tab>
19 19
20 <!-- ****** EDITS STUDENTS DETAILS ****** --> 20 <!-- ****** EDITS STUDENTS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1500px" scrollable> 31 <v-dialog v-model="dialog" max-width="1500px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit School</h3> 36 <h3>Edit School</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height: 686px;"> 40 <v-card-text style="height: 686px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center" 46 class="text-xs-center text-sm-center text-md-center text-lg-center"
47 > 47 >
48 <v-avatar size="160px"> 48 <v-avatar size="160px">
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="!editedItem.schoolLogoUrl && !imageUrl" 51 v-if="!editedItem.schoolLogoUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 :src="editedItem.schoolLogoUrl" 54 :src="editedItem.schoolLogoUrl"
55 v-else-if="editedItem.schoolLogoUrl && !imageUrl" 55 v-else-if="editedItem.schoolLogoUrl && !imageUrl"
56 /> 56 />
57 <img 57 <img
58 v-if="imageUrl" 58 v-if="imageUrl"
59 :src="imageUrl" 59 :src="imageUrl"
60 height="150" 60 height="150"
61 style="border-radius:50%; width:200px" 61 style="border-radius:50%; width:200px"
62 /> 62 />
63 </v-avatar> 63 </v-avatar>
64 <input 64 <input
65 type="file" 65 type="file"
66 style="display: none" 66 style="display: none"
67 ref="image" 67 ref="image"
68 accept="image/*" 68 accept="image/*"
69 @change="onFilePicked" 69 @change="onFilePicked"
70 /> 70 />
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12 sm4> 74 <v-flex xs12 sm4>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field> 81 <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 <v-flex xs12 sm4> 85 <v-flex xs12 sm4>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 class="pt-4 subheading"> 87 <v-flex xs4 class="pt-4 subheading">
88 <label class="right hidden-xs-only hidden-sm-only">Email ID:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Email ID:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 class="ml-3"> 91 <v-flex xs8 class="ml-3">
92 <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field> 92 <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 <v-flex xs12 sm4> 96 <v-flex xs12 sm4>
97 <v-layout> 97 <v-layout>
98 <v-flex xs4 class="pt-4 subheading"> 98 <v-flex xs4 class="pt-4 subheading">
99 <label>Society Name:</label> 99 <label>Society Name:</label>
100 </v-flex> 100 </v-flex>
101 <v-flex xs8 class="ml-3"> 101 <v-flex xs8 class="ml-3">
102 <v-text-field 102 <v-text-field
103 placeholder="fill your Society Name" 103 placeholder="fill your Society Name"
104 v-model="editedItem.societyName" 104 v-model="editedItem.societyName"
105 ></v-text-field> 105 ></v-text-field>
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <v-layout> 110 <v-layout>
111 <v-flex xs12 sm4> 111 <v-flex xs12 sm4>
112 <v-layout> 112 <v-layout>
113 <v-flex xs4 class="pt-4 subheading"> 113 <v-flex xs4 class="pt-4 subheading">
114 <label class="right">City:</label> 114 <label class="right">City:</label>
115 </v-flex> 115 </v-flex>
116 <v-flex xs8 class="ml-3"> 116 <v-flex xs8 class="ml-3">
117 <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field> 117 <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-flex> 120 </v-flex>
121 <v-flex xs12 sm4> 121 <v-flex xs12 sm4>
122 <v-layout> 122 <v-layout>
123 <v-flex xs4 class="pt-4 subheading"> 123 <v-flex xs4 class="pt-4 subheading">
124 <label class="right">State:</label> 124 <label class="right">State:</label>
125 </v-flex> 125 </v-flex>
126 <v-flex xs8 class="ml-3"> 126 <v-flex xs8 class="ml-3">
127 <v-text-field 127 <v-text-field
128 v-model="editedItem.state" 128 v-model="editedItem.state"
129 placeholder="fill your City Name" 129 placeholder="fill your City Name"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex> 133 </v-flex>
134 <v-flex xs12 sm4> 134 <v-flex xs12 sm4>
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">Pincode:</label> 137 <label class="right">Pincode:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs8 class="ml-3"> 139 <v-flex xs8 class="ml-3">
140 <v-text-field 140 <v-text-field
141 v-model="editedItem.pinCode" 141 v-model="editedItem.pinCode"
142 placeholder="fill your pincode" 142 placeholder="fill your pincode"
143 type="number" 143 type="number"
144 ></v-text-field> 144 ></v-text-field>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 <v-layout> 149 <v-layout>
150 <v-flex xs12 sm4> 150 <v-flex xs12 sm4>
151 <v-layout> 151 <v-layout>
152 <v-flex xs4 class="pt-4 subheading"> 152 <v-flex xs4 class="pt-4 subheading">
153 <label class="right">Fax No:</label> 153 <label class="right">Fax No:</label>
154 </v-flex> 154 </v-flex>
155 <v-flex xs8 class="ml-3"> 155 <v-flex xs8 class="ml-3">
156 <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field> 156 <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-flex> 159 </v-flex>
160 <v-flex xs12 sm4> 160 <v-flex xs12 sm4>
161 <v-layout> 161 <v-layout>
162 <v-flex xs4 class="pt-4 subheading"> 162 <v-flex xs4 class="pt-4 subheading">
163 <label class="right">Country:</label> 163 <label class="right">Country:</label>
164 </v-flex> 164 </v-flex>
165 <v-flex xs8 class="ml-3"> 165 <v-flex xs8 class="ml-3">
166 <v-text-field 166 <v-text-field
167 v-model="editedItem.country" 167 v-model="editedItem.country"
168 placeholder="fill your Country" 168 placeholder="fill your Country"
169 ></v-text-field> 169 ></v-text-field>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 <v-flex xs12 sm4> 173 <v-flex xs12 sm4>
174 <v-layout> 174 <v-layout>
175 <v-flex xs4 class="pt-4 subheading"> 175 <v-flex xs4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 176 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
178 </v-flex> 178 </v-flex>
179 <v-flex xs8 class="ml-3"> 179 <v-flex xs8 class="ml-3">
180 <v-text-field 180 <v-text-field
181 v-model="editedItem.mobile" 181 v-model="editedItem.mobile"
182 placeholder="fill your MobileNo" 182 placeholder="fill your MobileNo"
183 name="mobileNo" 183 name="mobileNo"
184 ></v-text-field> 184 ></v-text-field>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 <v-layout> 189 <v-layout>
190 <v-flex xs12 sm4> 190 <v-flex xs12 sm4>
191 <v-layout> 191 <v-layout>
192 <v-flex xs4 class="pt-4 subheading"> 192 <v-flex xs4 class="pt-4 subheading">
193 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> 193 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
194 <label 194 <label
195 class="right hidden-lg-only hidden-md-only hidden-xl-only" 195 class="right hidden-lg-only hidden-md-only hidden-xl-only"
196 >LandLineNo:</label> 196 >LandLineNo:</label>
197 </v-flex> 197 </v-flex>
198 <v-flex xs8 class="ml-3"> 198 <v-flex xs8 class="ml-3">
199 <v-text-field 199 <v-text-field
200 v-model="editedItem.landLineNo" 200 v-model="editedItem.landLineNo"
201 placeholder="fill your LandLine No" 201 placeholder="fill your LandLine No"
202 type="number" 202 type="number"
203 ></v-text-field> 203 ></v-text-field>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 <v-flex xs12 sm4> 207 <v-flex xs12 sm4>
208 <v-layout> 208 <v-layout>
209 <v-flex xs4 class="pt-4 subheading"> 209 <v-flex xs4 class="pt-4 subheading">
210 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> 210 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
211 <label 211 <label
212 class="right hidden-lg-only hidden-md-only hidden-xl-only" 212 class="right hidden-lg-only hidden-md-only hidden-xl-only"
213 >Registration-No:</label> 213 >Registration-No:</label>
214 </v-flex> 214 </v-flex>
215 <v-flex xs8 class="ml-3"> 215 <v-flex xs8 class="ml-3">
216 <v-text-field 216 <v-text-field
217 v-model="editedItem.registrationNo" 217 v-model="editedItem.registrationNo"
218 placeholder="fill your Registration No" 218 placeholder="fill your Registration No"
219 type="number" 219 type="number"
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 <v-flex xs12 sm4> 224 <v-flex xs12 sm4>
225 <v-layout> 225 <v-layout>
226 <v-flex xs4 class="pt-4 subheading"> 226 <v-flex xs4 class="pt-4 subheading">
227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
229 </v-flex> 229 </v-flex>
230 <v-flex xs8 class="ml-3"> 230 <v-flex xs8 class="ml-3">
231 <v-text-field 231 <v-text-field
232 label="Select Image" 232 label="Select Image"
233 @click="pickFile" 233 @click="pickFile"
234 v-model="imageName" 234 v-model="imageName"
235 append-icon="attach_file" 235 append-icon="attach_file"
236 ></v-text-field> 236 ></v-text-field>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 <v-layout> 241 <v-layout>
242 <v-flex xs12 sm4> 242 <v-flex xs12 sm4>
243 <v-layout> 243 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 244 <v-flex xs4 class="pt-4 subheading">
245 <label class="right hidden-xs-only hidden-sm-only">School Details:</label> 245 <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
246 <label 246 <label
247 class="right hidden-lg-only hidden-md-only hidden-xl-only" 247 class="right hidden-lg-only hidden-md-only hidden-xl-only"
248 >SchoolDetail:</label> 248 >SchoolDetail:</label>
249 </v-flex> 249 </v-flex>
250 <v-flex xs8 class="ml-3"> 250 <v-flex xs8 class="ml-3">
251 <v-text-field 251 <v-text-field
252 v-model="editedItem.schoolDetails" 252 v-model="editedItem.schoolDetails"
253 placeholder="fill your School Details" 253 placeholder="fill your School Details"
254 ></v-text-field> 254 ></v-text-field>
255 </v-flex> 255 </v-flex>
256 </v-layout> 256 </v-layout>
257 </v-flex> 257 </v-flex>
258 <v-flex xs12 sm4> 258 <v-flex xs12 sm4>
259 <v-layout> 259 <v-layout>
260 <v-flex xs4 class="pt-4 subheading"> 260 <v-flex xs4 class="pt-4 subheading">
261 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 261 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> 262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 class="ml-3"> 264 <v-flex xs8 class="ml-3">
265 <v-text-field 265 <v-text-field
266 v-model="editedItem.establishmentYear" 266 v-model="editedItem.establishmentYear"
267 placeholder="fill your Academic Year" 267 placeholder="fill your Academic Year"
268 ></v-text-field> 268 ></v-text-field>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 </v-flex> 271 </v-flex>
272 <v-flex xs12 sm4> 272 <v-flex xs12 sm4>
273 <v-layout> 273 <v-layout>
274 <v-flex xs4 class="pt-4 subheading"> 274 <v-flex xs4 class="pt-4 subheading">
275 <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label> 275 <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label>
276 <label 276 <label
277 class="right hidden-lg-only hidden-md-only hidden-xl-only" 277 class="right hidden-lg-only hidden-md-only hidden-xl-only"
278 >WebSiteUrl:</label> 278 >WebSiteUrl:</label>
279 </v-flex> 279 </v-flex>
280 <v-flex xs8 class="ml-3"> 280 <v-flex xs8 class="ml-3">
281 <v-text-field 281 <v-text-field
282 v-model="editedItem.websiteUrl" 282 v-model="editedItem.websiteUrl"
283 placeholder="fill your MobileNo" 283 placeholder="fill your MobileNo"
284 ></v-text-field> 284 ></v-text-field>
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 </v-flex> 287 </v-flex>
288 </v-layout> 288 </v-layout>
289 <v-layout> 289 <v-layout>
290 <v-flex xs12 sm4> 290 <v-flex xs12 sm4>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Address:</label> 293 <label class="right">Address:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs8 class="ml-3"> 295 <v-flex xs8 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="editedItem.address" 297 v-model="editedItem.address"
298 placeholder="Select your Address" 298 placeholder="Select your Address"
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs12 sm12> 305 <v-flex xs12 sm12>
306 <v-layout> 306 <v-layout>
307 <v-flex xs6> 307 <v-flex xs6>
308 <v-btn round dark @click.native="close">Cancel</v-btn> 308 <v-btn round dark @click.native="close">Cancel</v-btn>
309 </v-flex> 309 </v-flex>
310 <v-flex xs6> 310 <v-flex xs6>
311 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 311 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 </v-layout> 315 </v-layout>
316 </v-container> 316 </v-container>
317 </v-form> 317 </v-form>
318 </v-card-text> 318 </v-card-text>
319 </v-card> 319 </v-card>
320 </v-dialog> 320 </v-dialog>
321 321
322 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 322 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
323 323
324 <v-dialog v-model="dialog1" max-width="1100px" scrollable> 324 <v-dialog v-model="dialog1" max-width="1100px" scrollable>
325 <v-card> 325 <v-card>
326 <v-toolbar color="grey lighten-2" flat> 326 <v-toolbar color="grey lighten-2" flat>
327 <v-spacer></v-spacer> 327 <v-spacer></v-spacer>
328 <v-toolbar-title>School</v-toolbar-title> 328 <v-toolbar-title>School</v-toolbar-title>
329 <v-spacer></v-spacer> 329 <v-spacer></v-spacer>
330 <v-icon @click="close1">close</v-icon> 330 <v-icon @click="close1">close</v-icon>
331 </v-toolbar> 331 </v-toolbar>
332 <v-card-text style="height: 700px;"> 332 <v-card-text style="height: 700px;">
333 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 333 <v-flex align-center justify-center layout text-xs-center class="mt-3">
334 <v-avatar size="160px"> 334 <v-avatar size="160px">
335 <img src="/static/icon/user.png" v-if="!editedItem.schoolLogoUrl" /> 335 <img src="/static/icon/user.png" v-if="!editedItem.schoolLogoUrl" />
336 <img :src="editedItem.schoolLogoUrl" v-else-if="editedItem.schoolLogoUrl" /> 336 <img :src="editedItem.schoolLogoUrl" v-else-if="editedItem.schoolLogoUrl" />
337 </v-avatar> 337 </v-avatar>
338 </v-flex> 338 </v-flex>
339 <v-container grid-list-md> 339 <v-container grid-list-md>
340 <v-layout wrap> 340 <v-layout wrap>
341 <v-flex xs12 sm6> 341 <v-flex xs12 sm6>
342 <v-layout> 342 <v-layout>
343 <v-flex xs6 sm5> 343 <v-flex xs6 sm5>
344 <h5 class="right my-1"> 344 <h5 class="right my-1">
345 <b>Full Name:</b> 345 <b>Full Name:</b>
346 </h5> 346 </h5>
347 </v-flex> 347 </v-flex>
348 <v-flex sm7 xs6> 348 <v-flex sm7 xs6>
349 <h5 class="my-1 left">{{ editedItem.name }}</h5> 349 <h5 class="my-1 left">{{ editedItem.name }}</h5>
350 </v-flex> 350 </v-flex>
351 </v-layout> 351 </v-layout>
352 </v-flex> 352 </v-flex>
353 <v-flex xs12 sm6> 353 <v-flex xs12 sm6>
354 <v-layout> 354 <v-layout>
355 <v-flex xs6 sm4> 355 <v-flex xs6 sm4>
356 <h5 class="right my-1"> 356 <h5 class="right my-1">
357 <b>Email:</b> 357 <b>Email:</b>
358 </h5> 358 </h5>
359 </v-flex> 359 </v-flex>
360 <v-flex sm8 xs6> 360 <v-flex sm8 xs6>
361 <h5 class="my-1 left">{{ editedItem.email }}</h5> 361 <h5 class="my-1 left">{{ editedItem.email }}</h5>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 </v-layout> 365 </v-layout>
366 <v-layout wrap> 366 <v-layout wrap>
367 <v-flex xs12 sm6> 367 <v-flex xs12 sm6>
368 <v-layout> 368 <v-layout>
369 <v-flex xs6 sm5> 369 <v-flex xs6 sm5>
370 <b> 370 <b>
371 <h5 class="right my-1"> 371 <h5 class="right my-1">
372 <b>Create:</b> 372 <b>Create:</b>
373 </h5> 373 </h5>
374 </b> 374 </b>
375 </v-flex> 375 </v-flex>
376 <v-flex sm7 xs6> 376 <v-flex sm7 xs6>
377 <h5 class="my-1">{{ dates(editedItem.created) }}</h5> 377 <h5 class="my-1">{{ dates(editedItem.created) }}</h5>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 </v-flex> 380 </v-flex>
381 <v-flex xs12 sm6> 381 <v-flex xs12 sm6>
382 <v-layout> 382 <v-layout>
383 <v-flex xs6 sm4> 383 <v-flex xs6 sm4>
384 <b> 384 <b>
385 <h5 class="right my-1"> 385 <h5 class="right my-1">
386 <b>City:</b> 386 <b>City:</b>
387 </h5> 387 </h5>
388 </b> 388 </b>
389 </v-flex> 389 </v-flex>
390 <v-flex sm8 xs6> 390 <v-flex sm8 xs6>
391 <h5 class="my-1 left">{{ editedItem.city }}</h5> 391 <h5 class="my-1 left">{{ editedItem.city }}</h5>
392 </v-flex> 392 </v-flex>
393 </v-layout> 393 </v-layout>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 <v-layout wrap> 396 <v-layout wrap>
397 <v-flex xs12 sm6> 397 <v-flex xs12 sm6>
398 <v-layout> 398 <v-layout>
399 <v-flex xs6 sm5> 399 <v-flex xs6 sm5>
400 <b> 400 <b>
401 <h5 class="right my-1"> 401 <h5 class="right my-1">
402 <b>State:</b> 402 <b>State:</b>
403 </h5> 403 </h5>
404 </b> 404 </b>
405 </v-flex> 405 </v-flex>
406 <v-flex sm7 xs6> 406 <v-flex sm7 xs6>
407 <h5 class="my-1 left">{{ editedItem.state }}</h5> 407 <h5 class="my-1 left">{{ editedItem.state }}</h5>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 </v-flex> 410 </v-flex>
411 <v-flex xs12 sm6> 411 <v-flex xs12 sm6>
412 <v-layout> 412 <v-layout>
413 <v-flex xs6 sm4> 413 <v-flex xs6 sm4>
414 <b> 414 <b>
415 <h5 class="right my-1"> 415 <h5 class="right my-1">
416 <b>Pincode:</b> 416 <b>Pincode:</b>
417 </h5> 417 </h5>
418 </b> 418 </b>
419 </v-flex> 419 </v-flex>
420 <v-flex sm8 xs6> 420 <v-flex sm8 xs6>
421 <h5 class="my-1">{{ editedItem.pinCode }}</h5> 421 <h5 class="my-1">{{ editedItem.pinCode }}</h5>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 </v-flex> 424 </v-flex>
425 </v-layout> 425 </v-layout>
426 <v-layout wrap> 426 <v-layout wrap>
427 <v-flex xs12 sm6> 427 <v-flex xs12 sm6>
428 <v-layout> 428 <v-layout>
429 <v-flex xs6 sm5> 429 <v-flex xs6 sm5>
430 <b> 430 <b>
431 <h5 class="right my-1"> 431 <h5 class="right my-1">
432 <b>Fax No:</b> 432 <b>Fax No:</b>
433 </h5> 433 </h5>
434 </b> 434 </b>
435 </v-flex> 435 </v-flex>
436 <v-flex sm7 xs6> 436 <v-flex sm7 xs6>
437 <h5 class="my-1 left">{{ editedItem.faxNo }}</h5> 437 <h5 class="my-1 left">{{ editedItem.faxNo }}</h5>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 </v-flex> 440 </v-flex>
441 <v-flex xs12 sm6> 441 <v-flex xs12 sm6>
442 <v-layout> 442 <v-layout>
443 <v-flex xs6 sm4> 443 <v-flex xs6 sm4>
444 <b> 444 <b>
445 <h5 class="right my-1"> 445 <h5 class="right my-1">
446 <b>Country:</b> 446 <b>Country:</b>
447 </h5> 447 </h5>
448 </b> 448 </b>
449 </v-flex> 449 </v-flex>
450 <v-flex sm8 xs6> 450 <v-flex sm8 xs6>
451 <h5 class="my-1">{{ editedItem.country }}</h5> 451 <h5 class="my-1">{{ editedItem.country }}</h5>
452 </v-flex> 452 </v-flex>
453 </v-layout> 453 </v-layout>
454 </v-flex> 454 </v-flex>
455 </v-layout> 455 </v-layout>
456 <v-layout wrap> 456 <v-layout wrap>
457 <v-flex xs12 sm6> 457 <v-flex xs12 sm6>
458 <v-layout> 458 <v-layout>
459 <v-flex xs6 sm5> 459 <v-flex xs6 sm5>
460 <b> 460 <b>
461 <h5 class="right my-1"> 461 <h5 class="right my-1">
462 <b>Mobile No:</b> 462 <b>Mobile No:</b>
463 </h5> 463 </h5>
464 </b> 464 </b>
465 </v-flex> 465 </v-flex>
466 <v-flex sm7 xs6> 466 <v-flex sm7 xs6>
467 <h5 class="my-1">{{ editedItem.mobile }}</h5> 467 <h5 class="my-1">{{ editedItem.mobile }}</h5>
468 </v-flex> 468 </v-flex>
469 </v-layout> 469 </v-layout>
470 </v-flex> 470 </v-flex>
471 <v-flex xs12 sm5> 471 <v-flex xs12 sm5>
472 <v-layout> 472 <v-layout>
473 <v-flex xs6 sm5> 473 <v-flex xs6 sm5>
474 <b> 474 <b>
475 <h5 class="right my-1"> 475 <h5 class="right my-1">
476 <b>Country:</b> 476 <b>Country:</b>
477 </h5> 477 </h5>
478 </b> 478 </b>
479 </v-flex> 479 </v-flex>
480 <v-flex sm7 xs6> 480 <v-flex sm7 xs6>
481 <h5 class="my-1">{{ editedItem.country }}</h5> 481 <h5 class="my-1">{{ editedItem.country }}</h5>
482 </v-flex> 482 </v-flex>
483 </v-layout> 483 </v-layout>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 <v-layout wrap> 486 <v-layout wrap>
487 <v-flex xs12 sm6> 487 <v-flex xs12 sm6>
488 <v-layout> 488 <v-layout>
489 <v-flex sm5 xs6> 489 <v-flex sm5 xs6>
490 <b> 490 <b>
491 <h5 class="right my-1"> 491 <h5 class="right my-1">
492 <b>LandLine No:</b> 492 <b>LandLine No:</b>
493 </h5> 493 </h5>
494 </b> 494 </b>
495 </v-flex> 495 </v-flex>
496 <v-flex sm6 xs6> 496 <v-flex sm6 xs6>
497 <h5 class="my-1">{{ editedItem.landLineNo }}</h5> 497 <h5 class="my-1">{{ editedItem.landLineNo }}</h5>
498 </v-flex> 498 </v-flex>
499 </v-layout> 499 </v-layout>
500 </v-flex> 500 </v-flex>
501 <v-flex xs12 sm6> 501 <v-flex xs12 sm6>
502 <v-layout> 502 <v-layout>
503 <v-flex xs6 sm4 class="hidden-xs-only hidden-sm-only"> 503 <v-flex xs6 sm4 class="hidden-xs-only hidden-sm-only">
504 <b> 504 <b>
505 <h5 class="right my-1"> 505 <h5 class="right my-1">
506 <b>Registration No:</b> 506 <b>Registration No:</b>
507 </h5> 507 </h5>
508 </b> 508 </b>
509 </v-flex> 509 </v-flex>
510 <v-flex xs6 sm4 class="hidden-lg-only hidden-md-only hidden-xl-only"> 510 <v-flex xs6 sm4 class="hidden-lg-only hidden-md-only hidden-xl-only">
511 <b> 511 <b>
512 <h5 class="right my-1"> 512 <h5 class="right my-1">
513 <b>RegistrationNo:</b> 513 <b>RegistrationNo:</b>
514 </h5> 514 </h5>
515 </b> 515 </b>
516 </v-flex> 516 </v-flex>
517 <v-flex sm8 xs6> 517 <v-flex sm8 xs6>
518 <h5 class="my-1">{{ editedItem.registrationNo }}</h5> 518 <h5 class="my-1">{{ editedItem.registrationNo }}</h5>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 </v-layout> 522 </v-layout>
523 <v-layout wrap> 523 <v-layout wrap>
524 <v-flex xs12 sm6> 524 <v-flex xs12 sm6>
525 <v-layout> 525 <v-layout>
526 <v-flex xs6 sm5> 526 <v-flex xs6 sm5>
527 <b> 527 <b>
528 <h5 class="right my-1"> 528 <h5 class="right my-1">
529 <b>School Details:</b> 529 <b>School Details:</b>
530 </h5> 530 </h5>
531 </b> 531 </b>
532 </v-flex> 532 </v-flex>
533 <v-flex sm7 xs6> 533 <v-flex sm7 xs6>
534 <h5 class="my-1">{{ editedItem.schoolDetails }}</h5> 534 <h5 class="my-1">{{ editedItem.schoolDetails }}</h5>
535 </v-flex> 535 </v-flex>
536 </v-layout> 536 </v-layout>
537 </v-flex> 537 </v-flex>
538 <v-flex xs12 sm6> 538 <v-flex xs12 sm6>
539 <v-layout> 539 <v-layout>
540 <v-flex xs6 sm4> 540 <v-flex xs6 sm4>
541 <b> 541 <b>
542 <h5 class="right my-1"> 542 <h5 class="right my-1">
543 <b>Address:</b> 543 <b>Address:</b>
544 </h5> 544 </h5>
545 </b> 545 </b>
546 </v-flex> 546 </v-flex>
547 <v-flex sm8 xs6> 547 <v-flex sm8 xs6>
548 <h5 class="my-1">{{ editedItem.address }}</h5> 548 <h5 class="my-1">{{ editedItem.address }}</h5>
549 </v-flex> 549 </v-flex>
550 </v-layout> 550 </v-layout>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 <v-layout wrap> 553 <v-layout wrap>
554 <v-flex xs12 sm5> 554 <v-flex xs12 sm5>
555 <v-layout> 555 <v-layout>
556 <v-flex xs6 sm6 class="hidden-xs-only hidden-sm-only"> 556 <v-flex xs6 sm6 class="hidden-xs-only hidden-sm-only">
557 <b> 557 <b>
558 <h5 class="right my-1"> 558 <h5 class="right my-1">
559 <b>Academic Year:</b> 559 <b>Academic Year:</b>
560 </h5> 560 </h5>
561 </b> 561 </b>
562 </v-flex> 562 </v-flex>
563 <v-flex xs6 sm6 class="hidden-lg-only hidden-md-only hidden-xl-only"> 563 <v-flex xs6 sm6 class="hidden-lg-only hidden-md-only hidden-xl-only">
564 <b> 564 <b>
565 <h5 class="right my-1"> 565 <h5 class="right my-1">
566 <b>AcademicYear:</b> 566 <b>AcademicYear:</b>
567 </h5> 567 </h5>
568 </b> 568 </b>
569 </v-flex> 569 </v-flex>
570 <v-flex sm6 xs6> 570 <v-flex sm6 xs6>
571 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 571 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
572 </v-flex> 572 </v-flex>
573 </v-layout> 573 </v-layout>
574 </v-flex> 574 </v-flex>
575 </v-layout> 575 </v-layout>
576 </v-container> 576 </v-container>
577 </v-card-text> 577 </v-card-text>
578 </v-card> 578 </v-card>
579 </v-dialog> 579 </v-dialog>
580 580
581 <v-snackbar 581 <v-snackbar
582 :timeout="timeout" 582 :timeout="timeout"
583 :top="y === 'top'" 583 :top="y === 'top'"
584 :right="x === 'right'" 584 :right="x === 'right'"
585 :vertical="mode === 'vertical'" 585 :vertical="mode === 'vertical'"
586 v-model="snackbar" 586 v-model="snackbar"
587 color="success" 587 color="success"
588 >{{ text }}</v-snackbar> 588 >{{ text }}</v-snackbar>
589 589
590 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 590 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
591 <v-data-table 591 <v-data-table
592 :headers="headers" 592 :headers="headers"
593 :items="schoolList" 593 :items="schoolList"
594 :pagination.sync="pagination" 594 :pagination.sync="pagination"
595 :search="search" 595 :search="search"
596 > 596 >
597 <template slot="items" slot-scope="props"> 597 <template slot="items" slot-scope="props">
598 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 598 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
599 <td id="td" class="text-xs-center"> 599 <td id="td" class="text-xs-center">
600 <v-avatar> 600 <v-avatar>
601 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" /> 601 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />
602 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" /> 602 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />
603 </v-avatar> 603 </v-avatar>
604 </td> 604 </td>
605 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 605 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
606 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 606 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
607 <td id="td" class="text-xs-center">{{ props.item.city }}</td> 607 <td id="td" class="text-xs-center">{{ props.item.city }}</td>
608 <td id="td" class="text-xs-center">{{ props.item.state }}</td> 608 <td id="td" class="text-xs-center">{{ props.item.state }}</td>
609 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 609 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
610 <td class="text-xs-center"> 610 <td class="text-xs-center">
611 <span> 611 <span>
612 <v-tooltip top> 612 <v-tooltip top>
613 <img 613 <img
614 slot="activator" 614 slot="activator"
615 style="cursor:pointer; width:25px; height:18px; " 615 style="cursor:pointer; width:25px; height:18px; "
616 class="mr5" 616 class="mr5"
617 @click="profile(props.item)" 617 @click="profile(props.item)"
618 src="/static/icon/eye1.png" 618 src="/static/icon/eye1.png"
619 /> 619 />
620 <span>View</span> 620 <span>View</span>
621 </v-tooltip> 621 </v-tooltip>
622 <v-tooltip top> 622 <v-tooltip top>
623 <img 623 <img
624 slot="activator" 624 slot="activator"
625 style="cursor:pointer; width:20px; height:18px; " 625 style="cursor:pointer; width:20px; height:18px; "
626 class="mr5" 626 class="mr5"
627 @click="editItem(props.item)" 627 @click="editItem(props.item)"
628 src="/static/icon/edit1.png" 628 src="/static/icon/edit1.png"
629 /> 629 />
630 <span>Edit</span> 630 <span>Edit</span>
631 </v-tooltip> 631 </v-tooltip>
632 <!-- <v-tooltip top> 632 <!-- <v-tooltip top>
633 <img 633 <img
634 slot="activator" 634 slot="activator"
635 style="cursor:pointer; width:20px; height:20px; " 635 style="cursor:pointer; width:20px; height:20px; "
636 class="mr5" 636 class="mr5"
637 @click="deleteItem(props.item)" 637 @click="deleteItem(props.item)"
638 src="/static/icon/delete1.png" 638 src="/static/icon/delete1.png"
639 /> 639 />
640 <span>Delete</span> 640 <span>Delete</span>
641 </v-tooltip>--> 641 </v-tooltip>-->
642 </span> 642 </span>
643 </td> 643 </td>
644 </template> 644 </template>
645 <v-alert 645 <v-alert
646 slot="no-results" 646 slot="no-results"
647 :value="true" 647 :value="true"
648 color="error" 648 color="error"
649 icon="warning" 649 icon="warning"
650 >Your search for "{{ search }}" found no results.</v-alert> 650 >Your search for "{{ search }}" found no results.</v-alert>
651 </v-data-table> 651 </v-data-table>
652 </v-tab-item> 652 </v-tab-item>
653 653
654 <!-- ****** ADD STUDENTS DETAILS****** --> 654 <!-- ****** ADD STUDENTS DETAILS****** -->
655 <v-tab-item> 655 <v-tab-item>
656 <v-container fluid> 656 <v-container fluid>
657 <v-layout align-center justify-center fill-height> 657 <v-layout align-center justify-center fill-height>
658 <v-flex xs12 sm12 md10 lg11> 658 <v-flex xs12 sm12 md10 lg11>
659 <!-- <v-container fluid> --> 659 <!-- <v-container fluid> -->
660 <v-snackbar 660 <v-snackbar
661 :timeout="timeout" 661 :timeout="timeout"
662 :top="y === 'top'" 662 :top="y === 'top'"
663 :right="x === 'right'" 663 :right="x === 'right'"
664 :vertical="mode === 'vertical'" 664 :vertical="mode === 'vertical'"
665 v-model="snackbar" 665 v-model="snackbar"
666 color="success" 666 color="success"
667 >{{ text }}</v-snackbar> 667 >{{ text }}</v-snackbar>
668 <v-flex xs12 sm12> 668 <v-flex xs12 sm12>
669 <v-form ref="form" v-model="valid" lazy-validation> 669 <v-form ref="form" v-model="valid" lazy-validation>
670 <!-- <v-container fluid> --> 670 <!-- <v-container fluid> -->
671 <v-layout> 671 <v-layout>
672 <v-flex 672 <v-flex
673 xs12 673 xs12
674 class="text-xs-center text-sm-center text-md-center text-lg-center" 674 class="text-xs-center text-sm-center text-md-center text-lg-center"
675 > 675 >
676 <v-avatar size="100px"> 676 <v-avatar size="100px">
677 <img src="/static/icon/user.png" v-if="!imageUrl" /> 677 <img src="/static/icon/user.png" v-if="!imageUrl" />
678 </v-avatar> 678 </v-avatar>
679 <input 679 <input
680 type="file" 680 type="file"
681 style="display: none" 681 style="display: none"
682 ref="image" 682 ref="image"
683 accept="image/*" 683 accept="image/*"
684 @change="onFilePicked" 684 @change="onFilePicked"
685 /> 685 />
686 <img 686 <img
687 :src="imageData.imageUrl" 687 :src="imageData.imageUrl"
688 height="150" 688 height="150"
689 v-if="imageUrl" 689 v-if="imageUrl"
690 style="border-radius:50%; width:200px" 690 style="border-radius:50%; width:200px"
691 /> 691 />
692 </v-flex> 692 </v-flex>
693 </v-layout> 693 </v-layout>
694 <v-layout wrap> 694 <v-layout wrap>
695 <v-flex xs12 sm6> 695 <v-flex xs12 sm6>
696 <v-layout> 696 <v-layout>
697 <v-flex xs4 sm4 class="pt-4 subheading"> 697 <v-flex xs4 sm4 class="pt-4 subheading">
698 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 698 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
699 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 699 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
700 </v-flex> 700 </v-flex>
701 <v-flex xs8 sm8 class="ml-3"> 701 <v-flex xs8 sm8 class="ml-3">
702 <v-text-field 702 <v-text-field
703 v-model="addSchool.name" 703 v-model="addSchool.name"
704 placeholder="fill your full Name" 704 placeholder="fill your full Name"
705 name="name" 705 name="name"
706 type="text" 706 type="text"
707 :rules="nameRules" 707 :rules="nameRules"
708 required 708 required
709 ></v-text-field> 709 ></v-text-field>
710 </v-flex> 710 </v-flex>
711 </v-layout> 711 </v-layout>
712 </v-flex> 712 </v-flex>
713 <v-flex xs12 sm6> 713 <v-flex xs12 sm6>
714 <v-layout> 714 <v-layout>
715 <v-flex xs4 sm4 class="pt-4 subheading"> 715 <v-flex xs4 sm4 class="pt-4 subheading">
716 <label class="right">Email ID:</label> 716 <label class="right">Email ID:</label>
717 </v-flex> 717 </v-flex>
718 <v-flex xs8 sm8 class="ml-3"> 718 <v-flex xs8 sm8 class="ml-3">
719 <v-text-field 719 <v-text-field
720 placeholder="fill your email" 720 placeholder="fill your email"
721 :rules="emailRules" 721 :rules="emailRules"
722 v-model="addSchool.email" 722 v-model="addSchool.email"
723 type="text" 723 type="text"
724 required 724 required
725 ></v-text-field> 725 ></v-text-field>
726 </v-flex> 726 </v-flex>
727 </v-layout> 727 </v-layout>
728 </v-flex> 728 </v-flex>
729 </v-layout> 729 </v-layout>
730 <v-layout wrap> 730 <v-layout wrap>
731 <v-flex xs12 sm6> 731 <v-flex xs12 sm6>
732 <v-layout> 732 <v-layout>
733 <v-flex xs4 sm4 class="pt-4 subheading"> 733 <v-flex xs4 sm4 class="pt-4 subheading">
734 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label> 734 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label>
735 <label 735 <label
736 class="right hidden-lg-only hidden-xl-only hidden-md-only" 736 class="right hidden-lg-only hidden-xl-only hidden-md-only"
737 >SocietyName:</label> 737 >SocietyName:</label>
738 </v-flex> 738 </v-flex>
739 <v-flex xs8 sm8 class="ml-3"> 739 <v-flex xs8 sm8 class="ml-3">
740 <v-text-field 740 <v-text-field
741 v-model="addSchool.societyName" 741 v-model="addSchool.societyName"
742 placeholder="fill your Society Name" 742 placeholder="fill your Society Name"
743 :rules="cityRules" 743 :rules="cityRules"
744 required 744 required
745 ></v-text-field> 745 ></v-text-field>
746 </v-flex> 746 </v-flex>
747 </v-layout> 747 </v-layout>
748 </v-flex> 748 </v-flex>
749 <v-flex xs12 sm6> 749 <v-flex xs12 sm6>
750 <v-layout> 750 <v-layout>
751 <v-flex xs4 class="pt-4 subheading"> 751 <v-flex xs4 class="pt-4 subheading">
752 <label class="right">City:</label> 752 <label class="right">City:</label>
753 </v-flex> 753 </v-flex>
754 <v-flex xs8 class="ml-3"> 754 <v-flex xs8 class="ml-3">
755 <v-text-field 755 <v-text-field
756 v-model="addSchool.city" 756 v-model="addSchool.city"
757 placeholder="fill your City Name" 757 placeholder="fill your City Name"
758 name="City" 758 name="City"
759 type="text" 759 type="text"
760 :rules="cityRules" 760 :rules="cityRules"
761 required 761 required
762 ></v-text-field> 762 ></v-text-field>
763 </v-flex> 763 </v-flex>
764 </v-layout> 764 </v-layout>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 <v-layout wrap> 767 <v-layout wrap>
768 <v-flex xs12 sm6> 768 <v-flex xs12 sm6>
769 <v-layout> 769 <v-layout>
770 <v-flex xs4 class="pt-4 subheading"> 770 <v-flex xs4 class="pt-4 subheading">
771 <label class="right">State:</label> 771 <label class="right">State:</label>
772 </v-flex> 772 </v-flex>
773 <v-flex xs8 class="ml-3"> 773 <v-flex xs8 class="ml-3">
774 <v-text-field 774 <v-text-field
775 v-model="addSchool.state" 775 v-model="addSchool.state"
776 placeholder="fill your State Name" 776 placeholder="fill your State Name"
777 name="state" 777 name="state"
778 type="text" 778 type="text"
779 :rules="stateRules" 779 :rules="stateRules"
780 required 780 required
781 ></v-text-field> 781 ></v-text-field>
782 </v-flex> 782 </v-flex>
783 </v-layout> 783 </v-layout>
784 </v-flex> 784 </v-flex>
785 <v-flex xs12 sm6> 785 <v-flex xs12 sm6>
786 <v-layout> 786 <v-layout>
787 <v-flex xs4 class="pt-4 subheading"> 787 <v-flex xs4 class="pt-4 subheading">
788 <label class="right">Pincode:</label> 788 <label class="right">Pincode:</label>
789 </v-flex> 789 </v-flex>
790 <v-flex xs8 class="ml-3"> 790 <v-flex xs8 class="ml-3">
791 <v-text-field 791 <v-text-field
792 v-model="addSchool.pinCode" 792 v-model="addSchool.pinCode"
793 placeholder="fill your pincode" 793 placeholder="fill your pincode"
794 name="pincode" 794 name="pincode"
795 type="number" 795 type="number"
796 :rules="pincode" 796 :rules="pincode"
797 required 797 required
798 ></v-text-field> 798 ></v-text-field>
799 </v-flex> 799 </v-flex>
800 </v-layout> 800 </v-layout>
801 </v-flex> 801 </v-flex>
802 </v-layout> 802 </v-layout>
803 <v-layout wrap> 803 <v-layout wrap>
804 <v-flex xs12 sm6> 804 <v-flex xs12 sm6>
805 <v-layout> 805 <v-layout>
806 <v-flex xs4 class="pt-4 subheading"> 806 <v-flex xs4 class="pt-4 subheading">
807 <label class="right">Fax No:</label> 807 <label class="right">Fax No:</label>
808 </v-flex> 808 </v-flex>
809 <v-flex xs8 class="ml-3"> 809 <v-flex xs8 class="ml-3">
810 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field> 810 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 <v-flex xs12 sm6> 814 <v-flex xs12 sm6>
815 <v-layout> 815 <v-layout>
816 <v-flex xs4 class="pt-4 subheading"> 816 <v-flex xs4 class="pt-4 subheading">
817 <label class="right hidden-xs-only hidden-sm-only">Country:</label> 817 <label class="right hidden-xs-only hidden-sm-only">Country:</label>
818 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 818 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
819 </v-flex> 819 </v-flex>
820 <v-flex xs8 class="ml-3"> 820 <v-flex xs8 class="ml-3">
821 <v-autocomplete 821 <v-autocomplete
822 v-model="addSchool.country" 822 v-model="addSchool.country"
823 :items="countries" 823 :items="countries"
824 :rules="country" 824 :rules="country"
825 placeholder="Select Country Name" 825 placeholder="Select Country Name"
826 required 826 required
827 ></v-autocomplete> 827 ></v-autocomplete>
828 </v-flex> 828 </v-flex>
829 </v-layout> 829 </v-layout>
830 </v-flex> 830 </v-flex>
831 </v-layout> 831 </v-layout>
832 <v-layout wrap> 832 <v-layout wrap>
833 <v-flex xs12 sm6> 833 <v-flex xs12 sm6>
834 <v-layout> 834 <v-layout>
835 <v-flex xs4 class="pt-4 subheading"> 835 <v-flex xs4 class="pt-4 subheading">
836 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 836 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
837 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 837 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
838 </v-flex> 838 </v-flex>
839 <v-flex xs8 class="ml-3"> 839 <v-flex xs8 class="ml-3">
840 <v-text-field 840 <v-text-field
841 v-model="addSchool.mobile" 841 v-model="addSchool.mobile"
842 placeholder="fill your MobileNo" 842 placeholder="fill your MobileNo"
843 name="mobileNo" 843 name="mobileNo"
844 type="number" 844 type="number"
845 :rules="mobileNoRules" 845 :rules="mobileNoRules"
846 required 846 required
847 ></v-text-field> 847 ></v-text-field>
848 </v-flex> 848 </v-flex>
849 </v-layout> 849 </v-layout>
850 </v-flex> 850 </v-flex>
851 <v-flex xs12 sm6> 851 <v-flex xs12 sm6>
852 <v-layout> 852 <v-layout>
853 <v-flex xs4 class="pt-4 subheading"> 853 <v-flex xs4 class="pt-4 subheading">
854 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> 854 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
855 <label 855 <label
856 class="right hidden-lg-only hidden-md-only hidden-xl-only" 856 class="right hidden-lg-only hidden-md-only hidden-xl-only"
857 >LandLineNo:</label> 857 >LandLineNo:</label>
858 </v-flex> 858 </v-flex>
859 <v-flex xs8 class="ml-3"> 859 <v-flex xs8 class="ml-3">
860 <v-text-field 860 <v-text-field
861 v-model="addSchool.landLineNo" 861 v-model="addSchool.landLineNo"
862 :items="countries" 862 :items="countries"
863 :rules="landlineNoRule" 863 :rules="landlineNoRule"
864 placeholder="fill your LandLine No" 864 placeholder="fill your LandLine No"
865 type="number" 865 type="number"
866 required 866 required
867 ></v-text-field> 867 ></v-text-field>
868 </v-flex> 868 </v-flex>
869 </v-layout> 869 </v-layout>
870 </v-flex> 870 </v-flex>
871 </v-layout> 871 </v-layout>
872 <v-layout wrap> 872 <v-layout wrap>
873 <v-flex xs12 sm6> 873 <v-flex xs12 sm6>
874 <v-layout> 874 <v-layout>
875 <v-flex xs4 class="pt-4 subheading"> 875 <v-flex xs4 class="pt-4 subheading">
876 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> 876 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
877 <label 877 <label
878 class="right hidden-lg-only hidden-md-only hidden-xl-only" 878 class="right hidden-lg-only hidden-md-only hidden-xl-only"
879 >Registration-No:</label> 879 >Registration-No:</label>
880 </v-flex> 880 </v-flex>
881 <v-flex xs8 class="ml-3"> 881 <v-flex xs8 class="ml-3">
882 <v-text-field 882 <v-text-field
883 v-model="addSchool.registrationNo" 883 v-model="addSchool.registrationNo"
884 placeholder="Fill your Registration No" 884 placeholder="Fill your Registration No"
885 required 885 required
886 ></v-text-field> 886 ></v-text-field>
887 </v-flex> 887 </v-flex>
888 </v-layout> 888 </v-layout>
889 </v-flex> 889 </v-flex>
890 <v-flex xs12 sm6> 890 <v-flex xs12 sm6>
891 <v-layout> 891 <v-layout>
892 <v-flex xs4 class="pt-4 subheading"> 892 <v-flex xs4 class="pt-4 subheading">
893 <label class="right hidden-xs-only hidden-sm-only">School Details:</label> 893 <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
894 <label 894 <label
895 class="right hidden-lg-only hidden-md-only hidden-xl-only" 895 class="right hidden-lg-only hidden-md-only hidden-xl-only"
896 >SchoolDetails:</label> 896 >SchoolDetails:</label>
897 </v-flex> 897 </v-flex>
898 <v-flex xs8 class="ml-3"> 898 <v-flex xs8 class="ml-3">
899 <v-text-field 899 <v-text-field
900 v-model="addSchool.schoolDetails" 900 v-model="addSchool.schoolDetails"
901 placeholder="Fill your School Details" 901 placeholder="Fill your School Details"
902 :rules="schoolDetailRule" 902 :rules="schoolDetailRule"
903 required 903 required
904 ></v-text-field> 904 ></v-text-field>
905 </v-flex> 905 </v-flex>
906 </v-layout> 906 </v-layout>
907 </v-flex> 907 </v-flex>
908 </v-layout> 908 </v-layout>
909 <v-layout wrap> 909 <v-layout wrap>
910 <v-flex xs12 sm6> 910 <v-flex xs12 sm6>
911 <v-layout> 911 <v-layout>
912 <v-flex xs4 class="pt-4 subheading"> 912 <v-flex xs4 class="pt-4 subheading">
913 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 913 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
914 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 914 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
915 </v-flex> 915 </v-flex>
916 <v-flex xs8 class="ml-3"> 916 <v-flex xs8 class="ml-3">
917 <v-text-field 917 <v-text-field
918 label="Select Image" 918 label="Select Image"
919 @click="pickFile" 919 @click="pickFile"
920 v-model="imageName" 920 v-model="imageName"
921 append-icon="attach_file" 921 append-icon="attach_file"
922 ></v-text-field> 922 ></v-text-field>
923 </v-flex> 923 </v-flex>
924 </v-layout> 924 </v-layout>
925 </v-flex> 925 </v-flex>
926 <v-flex xs12 sm6> 926 <v-flex xs12 sm6>
927 <v-layout> 927 <v-layout>
928 <v-flex xs4 class="pt-4 subheading"> 928 <v-flex xs4 class="pt-4 subheading">
929 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 929 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
930 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> 930 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
931 </v-flex> 931 </v-flex>
932 <v-flex xs8 class="ml-3"> 932 <v-flex xs8 class="ml-3">
933 <v-text-field 933 <v-text-field
934 v-model="addSchool.establishmentYear" 934 v-model="addSchool.establishmentYear"
935 placeholder="fill your Academic Year" 935 placeholder="fill your Academic Year"
936 :rules="establishmentYearRules" 936 :rules="establishmentYearRules"
937 required 937 required
938 ></v-text-field> 938 ></v-text-field>
939 </v-flex> 939 </v-flex>
940 </v-layout> 940 </v-layout>
941 </v-flex> 941 </v-flex>
942 </v-layout> 942 </v-layout>
943 <v-layout wrap> 943 <v-layout wrap>
944 <v-flex xs12 sm6> 944 <v-flex xs12 sm6>
945 <v-layout> 945 <v-layout>
946 <v-flex xs4 sm4 class="pt-4 subheading"> 946 <v-flex xs4 sm4 class="pt-4 subheading">
947 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label> 947 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>
948 <label 948 <label
949 class="right hidden-lg-only hidden-md-only hidden-xl-only" 949 class="right hidden-lg-only hidden-md-only hidden-xl-only"
950 >WebSiteUrl:</label> 950 >WebSiteUrl:</label>
951 </v-flex> 951 </v-flex>
952 <v-flex xs8 sm8 class="ml-3"> 952 <v-flex xs8 sm8 class="ml-3">
953 <v-text-field 953 <v-text-field
954 name="input-4-3" 954 name="input-4-3"
955 v-model="addSchool.websiteUrl" 955 v-model="addSchool.websiteUrl"
956 :rules="presentAddress" 956 :rules="presentAddress"
957 placeholder="fill Your Address" 957 placeholder="fill Your Address"
958 required 958 required
959 ></v-text-field> 959 ></v-text-field>
960 </v-flex> 960 </v-flex>
961 </v-layout> 961 </v-layout>
962 </v-flex> 962 </v-flex>
963 <v-flex xs12 sm6> 963 <v-flex xs12 sm6>
964 <v-layout> 964 <v-layout>
965 <v-flex xs4 sm4 class="pt-4 subheading"> 965 <v-flex xs4 sm4 class="pt-4 subheading">
966 <label class="right">Address:</label> 966 <label class="right">Address:</label>
967 </v-flex> 967 </v-flex>
968 <v-flex xs8 sm8 class="ml-3"> 968 <v-flex xs8 sm8 class="ml-3">
969 <v-text-field 969 <v-text-field
970 name="input-4-3" 970 name="input-4-3"
971 v-model="addSchool.address" 971 v-model="addSchool.address"
972 :rules="presentAddress" 972 :rules="presentAddress"
973 placeholder="fill Your Address" 973 placeholder="fill Your Address"
974 required 974 required
975 ></v-text-field> 975 ></v-text-field>
976 </v-flex> 976 </v-flex>
977 </v-layout> 977 </v-layout>
978 </v-flex> 978 </v-flex>
979 </v-layout> 979 </v-layout>
980 <v-layout> 980 <v-layout>
981 <v-flex xs12 sm11 offset-md1> 981 <v-flex xs12 sm11 offset-md1>
982 <v-layout> 982 <v-layout>
983 <v-flex xs6> 983 <v-flex xs6>
984 <v-btn round dark @click="clear()">Clear</v-btn> 984 <v-btn round dark @click="clear()">Clear</v-btn>
985 </v-flex> 985 </v-flex>
986 <v-flex xs6> 986 <v-flex xs6>
987 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 987 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
988 </v-flex> 988 </v-flex>
989 </v-layout> 989 </v-layout>
990 </v-flex> 990 </v-flex>
991 </v-layout> 991 </v-layout>
992 </v-form> 992 </v-form>
993 </v-flex> 993 </v-flex>
994 </v-flex> 994 </v-flex>
995 </v-layout> 995 </v-layout>
996 </v-container> 996 </v-container>
997 </v-tab-item> 997 </v-tab-item>
998 </v-tabs> 998 </v-tabs>
999 <div class="loader" v-if="showLoader"> 999 <div class="loader" v-if="showLoader">
1000 <v-progress-circular indeterminate color="white"></v-progress-circular> 1000 <v-progress-circular indeterminate color="white"></v-progress-circular>
1001 </div> 1001 </div>
1002 </div> 1002 </div>
1003 </template> 1003 </template>
1004 1004
1005 <script> 1005 <script>
1006 import http from "@/Services/http.js"; 1006 import http from "@/Services/http.js";
1007 import moment from "moment"; 1007 import moment from "moment";
1008 import countryList from "@/script/country.js"; 1008 import countryList from "@/script/country.js";
1009 1009
1010 export default { 1010 export default {
1011 data: () => ({ 1011 data: () => ({
1012 e2: 0, 1012 e2: 0,
1013 snackbar: false, 1013 snackbar: false,
1014 y: "top", 1014 y: "top",
1015 x: "right", 1015 x: "right",
1016 mode: "", 1016 mode: "",
1017 timeout: 3000, 1017 timeout: 3000,
1018 text: "", 1018 text: "",
1019 showLoader: false, 1019 showLoader: false,
1020 loading: false, 1020 loading: false,
1021 date: null, 1021 date: null,
1022 search: "", 1022 search: "",
1023 menu: false, 1023 menu: false,
1024 menu1: false, 1024 menu1: false,
1025 dialog: false, 1025 dialog: false,
1026 dialog1: false, 1026 dialog1: false,
1027 valid: true, 1027 valid: true,
1028 isActive: true, 1028 isActive: true,
1029 newActive: false, 1029 newActive: false,
1030 pagination: { 1030 pagination: {
1031 rowsPerPage: 15 1031 rowsPerPage: 15
1032 }, 1032 },
1033 imageData: {}, 1033 imageData: {},
1034 imageName: "", 1034 imageName: "",
1035 imageUrl: "", 1035 imageUrl: "",
1036 imageFile: "", 1036 imageFile: "",
1037 nameRules: [v => !!v || " Full Name is required"], 1037 nameRules: [v => !!v || " Full Name is required"],
1038 dateRules: [v => !!v || " DOB is required"], 1038 dateRules: [v => !!v || " DOB is required"],
1039 cityRules: [v => !!v || " City Name is required"], 1039 cityRules: [v => !!v || " City Name is required"],
1040 pincode: [v => !!v || " Pincode is required"], 1040 pincode: [v => !!v || " Pincode is required"],
1041 country: [v => !!v || " Country Name is required"], 1041 country: [v => !!v || " Country Name is required"],
1042 permanentAddress: [v => !!v || " Permanent Address is requiclearred"], 1042 permanentAddress: [v => !!v || " Permanent Address is requiclearred"],
1043 presentAddress: [v => !!v || " Present Address is required"], 1043 presentAddress: [v => !!v || " Present Address is required"],
1044 landlineNoRule: [v => !!v || " Present Address is required"], 1044 landlineNoRule: [v => !!v || " Present Address is required"],
1045 mobileNoRules: [v => !!v || "Mobile Number is required"], 1045 mobileNoRules: [v => !!v || "Mobile Number is required"],
1046 stateRules: [v => !!v || "State Name is required"], 1046 stateRules: [v => !!v || "State Name is required"],
1047 schoolDetailRule: [v => !!v || "school Detail is required"], 1047 schoolDetailRule: [v => !!v || "school Detail is required"],
1048 sectionRules: [v => !!v || " Section Name is required"], 1048 sectionRules: [v => !!v || " Section Name is required"],
1049 genderRules: [v => !!v || " Select Gender is required"], 1049 genderRules: [v => !!v || " Select Gender is required"],
1050 establishmentYearRules: [v => !!v || " Academic Year is required"], 1050 establishmentYearRules: [v => !!v || " Academic Year is required"],
1051 errorMessages: "", 1051 errorMessages: "",
1052 emailRules: [ 1052 emailRules: [
1053 v => !!v || "E-mail is required", 1053 v => !!v || "E-mail is required",
1054 v => 1054 v =>
1055 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1055 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1056 "E-mail must be valid" 1056 "E-mail must be valid"
1057 ], 1057 ],
1058 countries: [], 1058 countries: [],
1059 headers: [ 1059 headers: [
1060 { 1060 {
1061 text: "No.", 1061 text: "No.",
1062 align: "center", 1062 align: "center",
1063 sortable: false, 1063 sortable: false,
1064 value: "rollNo" 1064 value: "rollNo"
1065 }, 1065 },
1066 { 1066 {
1067 text: "school Logo", 1067 text: "school Logo",
1068 value: "schoolLogoUrl", 1068 value: "schoolLogoUrl",
1069 sortable: false, 1069 sortable: false,
1070 align: "center" 1070 align: "center"
1071 }, 1071 },
1072 { text: "Name", value: "name", sortable: false, align: "center" }, 1072 { text: "Name", value: "name", sortable: false, align: "center" },
1073 { text: "Email", value: "email", sortable: false, align: "center" }, 1073 { text: "Email", value: "email", sortable: false, align: "center" },
1074 { text: "City", value: "city", sortable: false, align: "center" }, 1074 { text: "City", value: "city", sortable: false, align: "center" },
1075 { 1075 {
1076 text: "State", 1076 text: "State",
1077 value: "state", 1077 value: "state",
1078 sortable: false, 1078 sortable: false,
1079 align: "center" 1079 align: "center"
1080 }, 1080 },
1081 { 1081 {
1082 text: "Mobile", 1082 text: "Mobile",
1083 value: "mobile", 1083 value: "mobile",
1084 sortable: false, 1084 sortable: false,
1085 align: "center" 1085 align: "center"
1086 }, 1086 },
1087 { text: "Action", value: "", sortable: false, align: "center" } 1087 { text: "Action", value: "", sortable: false, align: "center" }
1088 ], 1088 ],
1089 schoolList: [], 1089 schoolList: [],
1090 editedIndex: -1, 1090 editedIndex: -1,
1091 addSchool: { 1091 addSchool: {
1092 role: "ADMIN" 1092 role: "ADMIN"
1093 }, 1093 },
1094 editedItem: {} 1094 editedItem: {}
1095 }), 1095 }),
1096 // watch: { 1096 // watch: {
1097 // menu(val) { 1097 // menu(val) {
1098 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1098 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1099 // }, 1099 // },
1100 // menu1(val) { 1100 // menu1(val) {
1101 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1101 // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1102 // } 1102 // }
1103 // }, 1103 // },
1104 methods: { 1104 methods: {
1105 getSchool() { 1105 getSchool() {
1106 this.showLoader = true; 1106 this.showLoader = true;
1107 http() 1107 http()
1108 .get("/getSchoolList", { 1108 .get("/getSchoolList", {
1109 headers: { Authorization: "Bearer " + this.token } 1109 headers: { Authorization: "Bearer " + this.token }
1110 }) 1110 })
1111 .then(response => { 1111 .then(response => {
1112 this.schoolList = response.data.data; 1112 this.schoolList = response.data.data;
1113 this.showLoader = false; 1113 this.showLoader = false;
1114 }) 1114 })
1115 .catch(error => { 1115 .catch(error => {
1116 console.log("err====>", err);
1117 this.showLoader = false; 1116 this.showLoader = false;
1117 if (error.response.status === 401) {
1118 this.$router.replace({ path: "/" });
1119 this.$store.dispatch("setToken", null);
1120 this.$store.dispatch("Id", null);
1121 this.$store.dispatch("Role", null);
1122 }
1118 }); 1123 });
1119 }, 1124 },
1120 pickFile() { 1125 pickFile() {
1121 this.$refs.image.click(); 1126 this.$refs.image.click();
1122 }, 1127 },
1123 dates: function(date) { 1128 dates: function(date) {
1124 return moment(date).format("MMMM DD, YYYY"); 1129 return moment(date).format("MMMM DD, YYYY");
1125 }, 1130 },
1126 onFilePicked(e) { 1131 onFilePicked(e) {
1127 // console.log(e) 1132 // console.log(e)
1128 const files = e.target.files; 1133 const files = e.target.files;
1129 this.imageData.upload = e.target.files[0]; 1134 this.imageData.upload = e.target.files[0];
1130 if (files[0] !== undefined) { 1135 if (files[0] !== undefined) {
1131 this.imageName = files[0].name; 1136 this.imageName = files[0].name;
1132 if (this.imageName.lastIndexOf(".") <= 0) { 1137 if (this.imageName.lastIndexOf(".") <= 0) {
1133 return; 1138 return;
1134 } 1139 }
1135 const fr = new FileReader(); 1140 const fr = new FileReader();
1136 fr.readAsDataURL(files[0]); 1141 fr.readAsDataURL(files[0]);
1137 fr.addEventListener("load", () => { 1142 fr.addEventListener("load", () => {
1138 this.imageUrl = fr.result; 1143 this.imageUrl = fr.result;
1139 this.imageFile = files[0]; // this is an image file that can be sent to server... 1144 this.imageFile = files[0]; // this is an image file that can be sent to server...
1140 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1145 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1141 }); 1146 });
1142 } else { 1147 } else {
1143 this.imageName = ""; 1148 this.imageName = "";
1144 this.imageFile = ""; 1149 this.imageFile = "";
1145 this.imageUrl = ""; 1150 this.imageUrl = "";
1146 } 1151 }
1147 }, 1152 },
1148 editItem(item) { 1153 editItem(item) {
1149 this.editedIndex = this.schoolList.indexOf(item); 1154 this.editedIndex = this.schoolList.indexOf(item);
1150 this.editedItem = Object.assign({}, item); 1155 this.editedItem = Object.assign({}, item);
1151 // if(this.editedItem.dob != undefined){
1152 // this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1153 // }else if(this.editedItem.dob = undefined){
1154 // this.editedItem.dob = ''
1155 // }
1156 this.editedItem.dob =
1157 this.editedItem.dob != undefined
1158 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1159 : (this.editedItem.dob = "");
1160 this.dialog = true; 1156 this.dialog = true;
1161 }, 1157 },
1162 profile(item) { 1158 profile(item) {
1163 console.log("item", item);
1164 this.editedIndex = this.schoolList.indexOf(item); 1159 this.editedIndex = this.schoolList.indexOf(item);
1165 this.editedItem = Object.assign({}, item); 1160 this.editedItem = Object.assign({}, item);
1166 this.dialog1 = true; 1161 this.dialog1 = true;
1167 }, 1162 },
1168 // deleteItem(item) { 1163 // deleteItem(item) {
1169 // let deleteStudent = { 1164 // let deleteStudent = {
1170 // studentId: item._id 1165 // studentId: item._id
1171 // }; 1166 // };
1172 // http() 1167 // http()
1173 // .delete( 1168 // .delete(
1174 // "/deleteStudent", 1169 // "/deleteStudent",
1175 // confirm("Are you sure you want to delete this?") && { 1170 // confirm("Are you sure you want to delete this?") && {
1176 // params: deleteStudent 1171 // params: deleteStudent
1177 // } 1172 // }
1178 // ) 1173 // )
1179 // .then(response => { 1174 // .then(response => {
1180 // // console.log("deleteUers",deleteStudent) 1175 // // console.log("deleteUers",deleteStudent)
1181 // this.snackbar = true; 1176 // this.snackbar = true;
1182 // this.text = "Successfully delete Existing Student"; 1177 // this.text = "Successfully delete Existing Student";
1183 // this.getStudentList(); 1178 // this.getStudentList();
1184 // }) 1179 // })
1185 // .catch(error => { 1180 // .catch(error => {
1186 // // console.log(error); 1181 // // console.log(error);
1187 // }); 1182 // });
1188 // }, 1183 // },
1189 activeTab(type) { 1184 activeTab(type) {
1190 switch (type) { 1185 switch (type) {
1191 case "existing": 1186 case "existing":
1192 this.newActive = false; 1187 this.newActive = false;
1193 this.isActive = true; 1188 this.isActive = true;
1194 break; 1189 break;
1195 1190
1196 default: 1191 default:
1197 this.newActive = true; 1192 this.newActive = true;
1198 this.isActive = false; 1193 this.isActive = false;
1199 break; 1194 break;
1200 } 1195 }
1201 }, 1196 },
1202 close() { 1197 close() {
1203 this.dialog = false; 1198 this.dialog = false;
1204 setTimeout(() => { 1199 setTimeout(() => {
1205 this.editedItem = Object.assign({}, this.defaultItem); 1200 this.editedItem = Object.assign({}, this.defaultItem);
1206 this.editedIndex = -1; 1201 this.editedIndex = -1;
1207 }, 300); 1202 }, 300);
1208 }, 1203 },
1209 close1() { 1204 close1() {
1210 this.dialog1 = false; 1205 this.dialog1 = false;
1211 }, 1206 },
1212 submit() { 1207 submit() {
1213 if (this.$refs.form.validate()) { 1208 if (this.$refs.form.validate()) {
1214 if (this.imageUrl) { 1209 if (this.imageUrl) {
1215 var str = this.imageUrl; 1210 var str = this.imageUrl;
1216 const [baseUrl, imageUrl] = str.split(/,/); 1211 const [baseUrl, imageUrl] = str.split(/,/);
1217 this.addSchool.upload = imageUrl; 1212 this.addSchool.upload = imageUrl;
1218 } 1213 }
1219 this.loading = true; 1214 this.loading = true;
1220 http() 1215 http()
1221 .post("/createSchool", this.addSchool) 1216 .post("/createSchool", this.addSchool)
1222 .then(response => { 1217 .then(response => {
1223 this.snackbar = true; 1218 this.snackbar = true;
1224 this.text = "New School added successfully"; 1219 this.text = "New School added successfully";
1225 this.clear(); 1220 this.clear();
1226 this.getSchool(); 1221 this.getSchool();
1227 this.loading = false; 1222 this.loading = false;
1228 }) 1223 })
1229 .catch(error => { 1224 .catch(error => {
1230 // console.log(error); 1225 // console.log(error);
1231 this.snackbar = true; 1226 this.snackbar = true;
1232 this.text = error.response.data.message; 1227 this.text = error.response.data.message;
1233 this.loading = false; 1228 this.loading = false;
1234 }); 1229 });
1235 } 1230 }
1236 }, 1231 },
1237 clear() { 1232 clear() {
1238 this.$refs.form.reset(); 1233 this.$refs.form.reset();
1239 this.imageUrl = ""; 1234 this.imageUrl = "";
1240 }, 1235 },
1241 save() { 1236 save() {
1242 if (this.imageUrl) { 1237 if (this.imageUrl) {
1243 var str = this.imageUrl; 1238 var str = this.imageUrl;
1244 const [baseUrl, imageUrl] = str.split(/,/); 1239 const [baseUrl, imageUrl] = str.split(/,/);
1245 this.editedItem.upload = imageUrl; 1240 this.editedItem.upload = imageUrl;
1246 } 1241 }
1247 this.editedItem.schoolId = this.editedItem._id; 1242 this.editedItem.schoolId = this.editedItem._id;
1248 http() 1243 http()
1249 .put("/updateSchool", this.editedItem) 1244 .put("/updateSchool", this.editedItem)
1250 .then(response => { 1245 .then(response => {
1251 this.snackbar = true; 1246 this.snackbar = true;
1252 this.text = "Successfully School Existing User"; 1247 this.text = "Successfully School Existing User";
1253 this.imageUrl = ""; 1248 this.imageUrl = "";
1254 this.getSchool(); 1249 this.getSchool();
1255 this.close(); 1250 this.close();
1256 }) 1251 })
1257 .catch(error => { 1252 .catch(error => {
1258 // console.log(error); 1253 // console.log(error);
1259 if ((this.snackbar = true)) { 1254 if ((this.snackbar = true)) {
1260 this.text = error.response.data.statusText; 1255 this.text = error.response.data.statusText;
1261 } 1256 }
1262 }); 1257 });
1263 } 1258 }
1264 }, 1259 },
1265 mounted() { 1260 mounted() {
1266 const getCountryList = countryList(); 1261 const getCountryList = countryList();
1267 this.countries = getCountryList; 1262 this.countries = getCountryList;
1268 this.token = this.$store.state.token; 1263 this.token = this.$store.state.token;
1269 this.getSchool(); 1264 this.getSchool();
1270 }, 1265 },
1271 created() { 1266 created() {
1272 this.$root.$on("app:search", search => { 1267 this.$root.$on("app:search", search => {
1273 this.search = search; 1268 this.search = search;
1274 }); 1269 });
1275 }, 1270 },
1276 beforeDestroy() { 1271 beforeDestroy() {
1277 // dont forget to remove the listener 1272 // dont forget to remove the listener
1278 this.$root.$off("app:search"); 1273 this.$root.$off("app:search");
1279 } 1274 }
1280 }; 1275 };
1281 </script> 1276 </script>
1282 <style scoped> 1277 <style scoped>
1283 .active { 1278 .active {
1284 background-color: gray; 1279 background-color: gray;
src/pages/Section/section.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Section</v-tab> 10 >Existing Section</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Section</v-tab> 18 >Add New Section</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <v-snackbar 22 <v-snackbar
23 :timeout="timeout" 23 :timeout="timeout"
24 :top="y === 'top'" 24 :top="y === 'top'"
25 :right="x === 'right'" 25 :right="x === 'right'"
26 :vertical="mode === 'vertical'" 26 :vertical="mode === 'vertical'"
27 v-model="snackbar" 27 v-model="snackbar"
28 color="success" 28 color="success"
29 >{{ text }}</v-snackbar> 29 >{{ text }}</v-snackbar>
30 <v-dialog v-model="dialog" max-width="600px"> 30 <v-dialog v-model="dialog" max-width="600px">
31 <v-toolbar color="grey lighten-2"> 31 <v-toolbar color="grey lighten-2">
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title> 33 <v-toolbar-title>
34 <h3>Edit Section</h3> 34 <h3>Edit Section</h3>
35 </v-toolbar-title> 35 </v-toolbar-title>
36 <v-spacer></v-spacer> 36 <v-spacer></v-spacer>
37 </v-toolbar> 37 </v-toolbar>
38 <v-card> 38 <v-card>
39 <v-container> 39 <v-container>
40 <v-layout wrap justify-center> 40 <v-layout wrap justify-center>
41 <v-flex xs12 sm9> 41 <v-flex xs12 sm9>
42 <v-form> 42 <v-form>
43 <v-layout> 43 <v-layout>
44 <v-flex xs5 sm4 class="pt-4 subheading"> 44 <v-flex xs5 sm4 class="pt-4 subheading">
45 <label class="pl-3">Class Name:</label> 45 <label class="pl-3">Class Name:</label>
46 <!-- <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> --> 46 <!-- <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> -->
47 </v-flex> 47 </v-flex>
48 <v-flex xs7 sm8> 48 <v-flex xs7 sm8>
49 <v-autocomplete 49 <v-autocomplete
50 :items="addclass" 50 :items="addclass"
51 :label="editedItem.classData.classNum" 51 :label="editedItem.classData.classNum"
52 v-model="editItem.classId" 52 v-model="editItem.classId"
53 item-text="classNum" 53 item-text="classNum"
54 item-value="_id" 54 item-value="_id"
55 ></v-autocomplete> 55 ></v-autocomplete>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 <v-layout> 58 <v-layout>
59 <v-flex xs5 sm4 class="pt-4 subheading"> 59 <v-flex xs5 sm4 class="pt-4 subheading">
60 <label>Section Name:</label> 60 <label>Section Name:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs7 sm8> 62 <v-flex xs7 sm8>
63 <v-autocomplete 63 <v-autocomplete
64 v-model="editedItem.name" 64 v-model="editedItem.name"
65 placeholder="fill your Section Name" 65 placeholder="fill your Section Name"
66 :items="SectionName" 66 :items="SectionName"
67 ></v-autocomplete> 67 ></v-autocomplete>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 <v-layout> 70 <v-layout>
71 <v-flex xs5 sm4 class="pt-4 subheading"> 71 <v-flex xs5 sm4 class="pt-4 subheading">
72 <label>Class Incharge:</label> 72 <label>Class Incharge:</label>
73 </v-flex> 73 </v-flex>
74 <v-flex xs7 sm8> 74 <v-flex xs7 sm8>
75 <v-select 75 <v-select
76 :items="teacherList" 76 :items="teacherList"
77 v-model="editedItem.classInchargeId" 77 v-model="editedItem.classInchargeId"
78 :label="editedItem.teacherData[0].name" 78 :label="editedItem.teacherData[0].name"
79 item-text="name" 79 item-text="name"
80 item-value="_id" 80 item-value="_id"
81 ></v-select> 81 ></v-select>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 <v-card-actions> 84 <v-card-actions>
85 <v-btn round dark @click.native="close">Cancel</v-btn> 85 <v-btn round dark @click.native="close">Cancel</v-btn>
86 <v-spacer></v-spacer> 86 <v-spacer></v-spacer>
87 <v-btn round dark @click="save">Save</v-btn> 87 <v-btn round dark @click="save">Save</v-btn>
88 </v-card-actions> 88 </v-card-actions>
89 </v-form> 89 </v-form>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 </v-container> 92 </v-container>
93 </v-card> 93 </v-card>
94 </v-dialog> 94 </v-dialog>
95 95
96 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 96 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
97 97
98 <v-dialog v-model="dialog1" max-width="600px"> 98 <v-dialog v-model="dialog1" max-width="600px">
99 <v-toolbar color="grey lighten-2"> 99 <v-toolbar color="grey lighten-2">
100 <v-spacer></v-spacer> 100 <v-spacer></v-spacer>
101 <v-toolbar-title> 101 <v-toolbar-title>
102 <h3>Section</h3> 102 <h3>Section</h3>
103 </v-toolbar-title> 103 </v-toolbar-title>
104 <v-spacer></v-spacer> 104 <v-spacer></v-spacer>
105 <v-icon @click="close1">close</v-icon> 105 <v-icon @click="close1">close</v-icon>
106 </v-toolbar> 106 </v-toolbar>
107 <v-card> 107 <v-card>
108 <v-flex align-center justify-center layout text-xs-center> 108 <v-flex align-center justify-center layout text-xs-center>
109 <v-avatar size="50px" style="position:absolute; top:20px;"> 109 <v-avatar size="50px" style="position:absolute; top:20px;">
110 <img src="/static/icon/user.png" /> 110 <img src="/static/icon/user.png" />
111 </v-avatar> 111 </v-avatar>
112 </v-flex> 112 </v-flex>
113 <v-card-text> 113 <v-card-text>
114 <v-container grid-list-md> 114 <v-container grid-list-md>
115 <v-layout wrap> 115 <v-layout wrap>
116 <v-flex> 116 <v-flex>
117 <br /> 117 <br />
118 <br /> 118 <br />
119 <v-layout> 119 <v-layout>
120 <v-flex xs7 sm6> 120 <v-flex xs7 sm6>
121 <h5 class="right my-1 hidden-xs-only hidden-sm-only"> 121 <h5 class="right my-1 hidden-xs-only hidden-sm-only">
122 <b>Class Name:</b> 122 <b>Class Name:</b>
123 </h5> 123 </h5>
124 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> 124 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
125 <b>Class:</b> 125 <b>Class:</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs5> 128 <v-flex sm6 xs5>
129 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 129 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs7 sm6> 133 <v-flex xs7 sm6>
134 <h5 class="right my-1"> 134 <h5 class="right my-1">
135 <b>Section Name:</b> 135 <b>Section Name:</b>
136 </h5> 136 </h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs5> 138 <v-flex sm6 xs5>
139 <h5 class="my-1">{{ editedItem.name }}</h5> 139 <h5 class="my-1">{{ editedItem.name }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 <v-layout> 142 <v-layout>
143 <v-flex xs7 sm6> 143 <v-flex xs7 sm6>
144 <h5 class="right my-1"> 144 <h5 class="right my-1">
145 <b>Class Incharge:</b> 145 <b>Class Incharge:</b>
146 </h5> 146 </h5>
147 </v-flex> 147 </v-flex>
148 <v-flex sm6 xs5> 148 <v-flex sm6 xs5>
149 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> 149 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <v-layout> 152 <v-layout>
153 <v-flex xs7 sm6> 153 <v-flex xs7 sm6>
154 <h5 class="right my-1"> 154 <h5 class="right my-1">
155 <b>Session:</b> 155 <b>Session:</b>
156 </h5> 156 </h5>
157 </v-flex> 157 </v-flex>
158 <v-flex sm6 xs5> 158 <v-flex sm6 xs5>
159 <h5 class="my-1">{{ editedItem.session }}</h5> 159 <h5 class="my-1">{{ editedItem.session }}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-container> 164 </v-container>
165 </v-card-text> 165 </v-card-text>
166 </v-card> 166 </v-card>
167 </v-dialog> 167 </v-dialog>
168 168
169 <v-snackbar 169 <v-snackbar
170 :timeout="timeout" 170 :timeout="timeout"
171 :top="y === 'top'" 171 :top="y === 'top'"
172 :right="x === 'right'" 172 :right="x === 'right'"
173 :vertical="mode === 'vertical'" 173 :vertical="mode === 'vertical'"
174 v-model="snackbar" 174 v-model="snackbar"
175 color="success" 175 color="success"
176 >{{ text }}</v-snackbar> 176 >{{ text }}</v-snackbar>
177 177
178 <!-- ****** EXISTING-USERS StudentS Table ****** --> 178 <!-- ****** EXISTING-USERS StudentS Table ****** -->
179 179
180 <v-data-table 180 <v-data-table
181 :headers="headers" 181 :headers="headers"
182 :items="desserts" 182 :items="desserts"
183 :pagination.sync="pagination" 183 :pagination.sync="pagination"
184 :search="search" 184 :search="search"
185 > 185 >
186 <template slot="items" slot-scope="props"> 186 <template slot="items" slot-scope="props">
187 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 187 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
188 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 188 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
189 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 189 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
190 <td id="td" class="text-xs-center">{{ props.item.session}}</td> 190 <td id="td" class="text-xs-center">{{ props.item.session}}</td>
191 191
192 <td class="text-xs-center"> 192 <td class="text-xs-center">
193 <span> 193 <span>
194 <v-tooltip top> 194 <v-tooltip top>
195 <img 195 <img
196 slot="activator" 196 slot="activator"
197 style="cursor:pointer; width:25px; height:18px; " 197 style="cursor:pointer; width:25px; height:18px; "
198 class="mr5" 198 class="mr5"
199 @click="profile(props.item)" 199 @click="profile(props.item)"
200 src="/static/icon/eye1.png" 200 src="/static/icon/eye1.png"
201 /> 201 />
202 <span>View</span> 202 <span>View</span>
203 </v-tooltip> 203 </v-tooltip>
204 <v-tooltip top> 204 <v-tooltip top>
205 <img 205 <img
206 slot="activator" 206 slot="activator"
207 style="cursor:pointer; width:20px; height:18px; " 207 style="cursor:pointer; width:20px; height:18px; "
208 class="mr5" 208 class="mr5"
209 @click="editItem(props.item)" 209 @click="editItem(props.item)"
210 src="/static/icon/edit1.png" 210 src="/static/icon/edit1.png"
211 /> 211 />
212 <span>Edit</span> 212 <span>Edit</span>
213 </v-tooltip> 213 </v-tooltip>
214 <v-tooltip top> 214 <v-tooltip top>
215 <img 215 <img
216 slot="activator" 216 slot="activator"
217 style="cursor:pointer; width:20px; height:20px; " 217 style="cursor:pointer; width:20px; height:20px; "
218 class="mr5" 218 class="mr5"
219 @click="deleteItem(props.item)" 219 @click="deleteItem(props.item)"
220 src="/static/icon/delete1.png" 220 src="/static/icon/delete1.png"
221 /> 221 />
222 <span>Delete</span> 222 <span>Delete</span>
223 </v-tooltip> 223 </v-tooltip>
224 </span> 224 </span>
225 </td> 225 </td>
226 </template> 226 </template>
227 <v-alert 227 <v-alert
228 slot="no-results" 228 slot="no-results"
229 :value="true" 229 :value="true"
230 color="error" 230 color="error"
231 icon="warning" 231 icon="warning"
232 >Your search for "{{ search }}" found no results.</v-alert> 232 >Your search for "{{ search }}" found no results.</v-alert>
233 </v-data-table> 233 </v-data-table>
234 </v-tab-item> 234 </v-tab-item>
235 235
236 <!-- ****** ADD multiple Students ****** --> 236 <!-- ****** ADD multiple Students ****** -->
237 237
238 <v-tab-item> 238 <v-tab-item>
239 <v-container> 239 <v-container>
240 <v-snackbar 240 <v-snackbar
241 :timeout="timeout" 241 :timeout="timeout"
242 :top="y === 'top'" 242 :top="y === 'top'"
243 :right="x === 'right'" 243 :right="x === 'right'"
244 :vertical="mode === 'vertical'" 244 :vertical="mode === 'vertical'"
245 v-model="snackbar" 245 v-model="snackbar"
246 color="success" 246 color="success"
247 >{{ text }}</v-snackbar> 247 >{{ text }}</v-snackbar>
248 <v-flex xs12 sm8 offset-sm2 class="top"> 248 <v-flex xs12 sm8 offset-sm2 class="top">
249 <v-card flat> 249 <v-card flat>
250 <v-container fluid fill-height> 250 <v-container fluid fill-height>
251 <v-layout align-center> 251 <v-layout align-center>
252 <v-flex xs12 class="mt-4"> 252 <v-flex xs12 class="mt-4">
253 <v-form ref="form" v-model="valid" lazy-validation> 253 <v-form ref="form" v-model="valid" lazy-validation>
254 <v-layout> 254 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Section Name:</label> 256 <label class="right">Section Name:</label>
257 </v-flex> 257 </v-flex>
258 <v-flex xs6 class="ml-3"> 258 <v-flex xs6 class="ml-3">
259 <v-autocomplete 259 <v-autocomplete
260 v-model="sectionData.name" 260 v-model="sectionData.name"
261 placeholder="fill your Section Name" 261 placeholder="fill your Section Name"
262 :items="SectionName" 262 :items="SectionName"
263 :rules="nameRules" 263 :rules="nameRules"
264 required 264 required
265 ></v-autocomplete> 265 ></v-autocomplete>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout> 268 <v-layout>
269 <v-flex xs4 class="pt-4 subheading"> 269 <v-flex xs4 class="pt-4 subheading">
270 <label class="right">Select Class:</label> 270 <label class="right">Select Class:</label>
271 </v-flex> 271 </v-flex>
272 <v-flex xs6 class="ml-3"> 272 <v-flex xs6 class="ml-3">
273 <v-select 273 <v-select
274 :items="addclass" 274 :items="addclass"
275 label="Select Class" 275 label="Select Class"
276 v-model="sectionData.classNum" 276 v-model="sectionData.classNum"
277 item-text="classNum" 277 item-text="classNum"
278 item-value="_id" 278 item-value="_id"
279 name="Select Class" 279 name="Select Class"
280 :rules="classRules" 280 :rules="classRules"
281 required 281 required
282 ></v-select> 282 ></v-select>
283 </v-flex> 283 </v-flex>
284 </v-layout> 284 </v-layout>
285 <v-layout> 285 <v-layout>
286 <v-flex xs4 class="pt-4 subheading"> 286 <v-flex xs4 class="pt-4 subheading">
287 <label class="right">Select Incharge:</label> 287 <label class="right">Select Incharge:</label>
288 </v-flex> 288 </v-flex>
289 <v-flex xs6 class="ml-3"> 289 <v-flex xs6 class="ml-3">
290 <v-select 290 <v-select
291 :items="teacherList" 291 :items="teacherList"
292 label="Select Incharge" 292 label="Select Incharge"
293 v-model="sectionData.sectionId" 293 v-model="sectionData.sectionId"
294 item-text="name" 294 item-text="name"
295 item-value="_id" 295 item-value="_id"
296 name="Select Class" 296 name="Select Class"
297 :rules="inchargeRules" 297 :rules="inchargeRules"
298 required 298 required
299 ></v-select> 299 ></v-select>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 <v-layout> 302 <v-layout>
303 <v-flex xs4 class="pt-4 subheading"> 303 <v-flex xs4 class="pt-4 subheading">
304 <label class="right">Session:</label> 304 <label class="right">Session:</label>
305 </v-flex> 305 </v-flex>
306 <v-flex xs6 class="ml-3"> 306 <v-flex xs6 class="ml-3">
307 <v-text-field 307 <v-text-field
308 v-model="sectionData.session" 308 v-model="sectionData.session"
309 placeholder="fill your Session" 309 placeholder="fill your Session"
310 name="name" 310 name="name"
311 type="text" 311 type="text"
312 :rules="sessionRules" 312 :rules="sessionRules"
313 required 313 required
314 ></v-text-field> 314 ></v-text-field>
315 </v-flex> 315 </v-flex>
316 </v-layout> 316 </v-layout>
317 <v-layout> 317 <v-layout>
318 <v-flex xs12 sm9 offset-sm2> 318 <v-flex xs12 sm9 offset-sm2>
319 <v-card-actions> 319 <v-card-actions>
320 <v-btn @click="clear" round dark>clear</v-btn> 320 <v-btn @click="clear" round dark>clear</v-btn>
321 <v-spacer></v-spacer> 321 <v-spacer></v-spacer>
322 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 322 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
323 </v-card-actions> 323 </v-card-actions>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-form> 326 </v-form>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 </v-container> 329 </v-container>
330 </v-card> 330 </v-card>
331 </v-flex> 331 </v-flex>
332 </v-container> 332 </v-container>
333 </v-tab-item> 333 </v-tab-item>
334 </v-tabs> 334 </v-tabs>
335 <div class="loader" v-if="showLoader"> 335 <div class="loader" v-if="showLoader">
336 <v-progress-circular indeterminate color="white"></v-progress-circular> 336 <v-progress-circular indeterminate color="white"></v-progress-circular>
337 </div> 337 </div>
338 </v-app> 338 </v-app>
339 </template> 339 </template>
340 340
341 <script> 341 <script>
342 import http from "@/Services/http.js"; 342 import http from "@/Services/http.js";
343 import Util from "@/util"; 343 import Util from "@/util";
344 344
345 export default { 345 export default {
346 data: () => ({ 346 data: () => ({
347 snackbar: false, 347 snackbar: false,
348 y: "top", 348 y: "top",
349 x: "right", 349 x: "right",
350 mode: "", 350 mode: "",
351 timeout: 3000, 351 timeout: 3000,
352 text: "", 352 text: "",
353 showLoader: false, 353 showLoader: false,
354 loading: false, 354 loading: false,
355 date: null, 355 date: null,
356 search: "", 356 search: "",
357 dialog: false, 357 dialog: false,
358 dialog1: false, 358 dialog1: false,
359 valid: true, 359 valid: true,
360 validEdit: true, 360 validEdit: true,
361 isActive: true, 361 isActive: true,
362 newActive: false, 362 newActive: false,
363 details: [], 363 details: [],
364 AddUsercredentials: {}, 364 AddUsercredentials: {},
365 pagination: { 365 pagination: {
366 rowsPerPage: 15 366 rowsPerPage: 15
367 }, 367 },
368 nameRules: [v => !!v || " Section Name is required"], 368 nameRules: [v => !!v || " Section Name is required"],
369 classRules: [v => !!v || " Class Name is required"], 369 classRules: [v => !!v || " Class Name is required"],
370 sessionRules: [v => !!v || " Session is required"], 370 sessionRules: [v => !!v || " Session is required"],
371 inchargeRules: [v => !!v || " Incharge Name is required"], 371 inchargeRules: [v => !!v || " Incharge Name is required"],
372 SectionName: ["A", "B", "C", "D", "E", "F"], 372 SectionName: ["A", "B", "C", "D", "E", "F"],
373 headers: [ 373 headers: [
374 { 374 {
375 text: "No", 375 text: "No",
376 align: "center", 376 align: "center",
377 sortable: false, 377 sortable: false,
378 value: "No" 378 value: "No"
379 }, 379 },
380 { 380 {
381 text: "Class Name", 381 text: "Class Name",
382 value: "classData.classNum", 382 value: "classData.classNum",
383 sortable: false, 383 sortable: false,
384 align: "center" 384 align: "center"
385 }, 385 },
386 { text: "Section Name", value: "name", sortable: false, align: "center" }, 386 { text: "Section Name", value: "name", sortable: false, align: "center" },
387 { text: "Session", value: "session", sortable: false, align: "center" }, 387 { text: "Session", value: "session", sortable: false, align: "center" },
388 { text: "Action", value: "", sortable: false, align: "center" } 388 { text: "Action", value: "", sortable: false, align: "center" }
389 ], 389 ],
390 desserts: [], 390 desserts: [],
391 addclass: [], 391 addclass: [],
392 teacherList: [], 392 teacherList: [],
393 select: "", 393 select: "",
394 selectId: "", 394 selectId: "",
395 token: "", 395 token: "",
396 editedIndex: -1, 396 editedIndex: -1,
397 editedItem: { 397 editedItem: {
398 classData: { 398 classData: {
399 classNum: "" 399 classNum: ""
400 }, 400 },
401 classId: "", 401 classId: "",
402 classInchargeId: "", 402 classInchargeId: "",
403 teacherData: [ 403 teacherData: [
404 { 404 {
405 name: "" 405 name: ""
406 } 406 }
407 ], 407 ],
408 name: "", 408 name: "",
409 session: new Date().getFullYear() 409 session: new Date().getFullYear()
410 }, 410 },
411 sectionData: { 411 sectionData: {
412 session: new Date().getFullYear() 412 session: new Date().getFullYear()
413 } 413 }
414 }), 414 }),
415 methods: { 415 methods: {
416 getSectionList() { 416 getSectionList() {
417 this.showLoader = true; 417 this.showLoader = true;
418 http() 418 http()
419 .get("/getAllSections", { 419 .get("/getAllSections", {
420 headers: { Authorization: "Bearer " + this.token } 420 headers: { Authorization: "Bearer " + this.token }
421 }) 421 })
422 .then(response => { 422 .then(response => {
423 this.desserts = response.data.data; 423 this.desserts = response.data.data;
424 this.showLoader = false; 424 this.showLoader = false;
425 // console.log("getAllSections=====>",response.data.data) 425 // console.log("getAllSections=====>",response.data.data)
426 }) 426 })
427 .catch(error => { 427 .catch(error => {
428 this.showLoader = false; 428 this.showLoader = false;
429 if (error.response.status === 401 && error.response.status === 401) { 429 if (error.response.status === 401) {
430 this.$router.replace({ path: "/" }); 430 this.$router.replace({ path: "/" });
431 this.$store.dispatch("setToken", null); 431 this.$store.dispatch("setToken", null);
432 this.$store.dispatch("Id", null); 432 this.$store.dispatch("Id", null);
433 } 433 }
434 }); 434 });
435 }, 435 },
436 editItem(item) { 436 editItem(item) {
437 this.editedIndex = this.desserts.indexOf(item); 437 this.editedIndex = this.desserts.indexOf(item);
438 this.editedItem = Object.assign({}, item); 438 this.editedItem = Object.assign({}, item);
439 console.log(this.editedItem); 439 console.log(this.editedItem);
440 this.dialog = true; 440 this.dialog = true;
441 }, 441 },
442 profile(item) { 442 profile(item) {
443 this.editedIndex = this.desserts.indexOf(item); 443 this.editedIndex = this.desserts.indexOf(item);
444 this.editedItem = Object.assign({}, item); 444 this.editedItem = Object.assign({}, item);
445 this.dialog1 = true; 445 this.dialog1 = true;
446 }, 446 },
447 deleteItem(item) { 447 deleteItem(item) {
448 let deleteStudent = { 448 let deleteStudent = {
449 sectionId: item._id 449 sectionId: item._id
450 }; 450 };
451 http() 451 http()
452 .delete( 452 .delete(
453 "/deleteSection", 453 "/deleteSection",
454 confirm("Are you sure you want to delete this?") && { 454 confirm("Are you sure you want to delete this?") && {
455 params: deleteStudent 455 params: deleteStudent
456 } 456 }
457 ) 457 )
458 .then(response => { 458 .then(response => {
459 if ((this.snackbar = true)) { 459 if ((this.snackbar = true)) {
460 this.text = "Successfully delete Existing Section"; 460 this.text = "Successfully delete Existing Section";
461 } 461 }
462 this.getSectionList(); 462 this.getSectionList();
463 }) 463 })
464 .catch(error => { 464 .catch(error => {
465 // console.log(error); 465 // console.log(error);
466 }); 466 });
467 }, 467 },
468 activeTab(type) { 468 activeTab(type) {
469 switch (type) { 469 switch (type) {
470 case "existing": 470 case "existing":
471 this.newActive = false; 471 this.newActive = false;
472 this.isActive = true; 472 this.isActive = true;
473 break; 473 break;
474 474
475 default: 475 default:
476 this.newActive = true; 476 this.newActive = true;
477 this.isActive = false; 477 this.isActive = false;
478 break; 478 break;
479 } 479 }
480 }, 480 },
481 close() { 481 close() {
482 this.dialog = false; 482 this.dialog = false;
483 setTimeout(() => { 483 setTimeout(() => {
484 this.editedItem = Object.assign({}, this.defaultItem); 484 this.editedItem = Object.assign({}, this.defaultItem);
485 this.editedIndex = -1; 485 this.editedIndex = -1;
486 }, 300); 486 }, 300);
487 }, 487 },
488 close1() { 488 close1() {
489 this.dialog1 = false; 489 this.dialog1 = false;
490 }, 490 },
491 close2() { 491 close2() {
492 this.dialog2 = false; 492 this.dialog2 = false;
493 }, 493 },
494 submit() { 494 submit() {
495 if (this.$refs.form.validate()) { 495 if (this.$refs.form.validate()) {
496 let addSection = { 496 let addSection = {
497 name: this.sectionData.name, 497 name: this.sectionData.name,
498 classId: this.sectionData.classNum, 498 classId: this.sectionData.classNum,
499 session: this.sectionData.session, 499 session: this.sectionData.session,
500 classInchargeId: this.sectionData._id 500 classInchargeId: this.sectionData._id
501 }; 501 };
502 this.loading = true; 502 this.loading = true;
503 http() 503 http()
504 .post("/createSection", addSection) 504 .post("/createSection", addSection)
505 .then(response => { 505 .then(response => {
506 console.log(response); 506 console.log(response);
507 this.getSectionList(); 507 this.getSectionList();
508 if ((this.snackbar = true)) { 508 if ((this.snackbar = true)) {
509 this.text = "New Section added successfully"; 509 this.text = "New Section added successfully";
510 } 510 }
511 511
512 this.clear(); 512 this.clear();
513 this.loading = false; 513 this.loading = false;
514 }) 514 })
515 .catch(error => { 515 .catch(error => {
516 // console.log(error); 516 // console.log(error);
517 if ((this.snackbar = true)) { 517 if ((this.snackbar = true)) {
518 this.text = error.response.data.message; 518 this.text = error.response.data.message;
519 } 519 }
520 this.loading = false; 520 this.loading = false;
521 }); 521 });
522 } 522 }
523 }, 523 },
524 clear() { 524 clear() {
525 this.$refs.form.reset(); 525 this.$refs.form.reset();
526 }, 526 },
527 save() { 527 save() {
528 this.editedItem.sectionId = this.editedItem._id; 528 this.editedItem.sectionId = this.editedItem._id;
529 http() 529 http()
530 .put("/updateSection", this.editedItem) 530 .put("/updateSection", this.editedItem)
531 .then(response => { 531 .then(response => {
532 // console.log("editStudent",editStudent); 532 // console.log("editStudent",editStudent);
533 if ((this.snackbar = true)) { 533 if ((this.snackbar = true)) {
534 this.text = "Successfully Edit Existing Section"; 534 this.text = "Successfully Edit Existing Section";
535 } 535 }
536 this.getSectionList(); 536 this.getSectionList();
537 this.close(); 537 this.close();
538 }) 538 })
539 .catch(error => { 539 .catch(error => {
540 this.text = error.response.data.message; 540 this.text = error.response.data.message;
541 // console.log(error); 541 // console.log(error);
542 }); 542 });
543 }, 543 },
544 getAllTeacher() { 544 getAllTeacher() {
545 http() 545 http()
546 .get("/getTeachersList", { 546 .get("/getTeachersList", {
547 headers: { Authorization: "Bearer " + this.token } 547 headers: { Authorization: "Bearer " + this.token }
548 }) 548 })
549 .then(response => { 549 .then(response => {
550 this.teacherList = response.data.data; 550 this.teacherList = response.data.data;
551 this.showLoader = false; 551 this.showLoader = false;
552 }) 552 })
553 .catch(err => { 553 .catch(err => {
554 // console.log("err====>", err); 554 // console.log("err====>", err);
555 this.showLoader = false; 555 this.showLoader = false;
556 }); 556 });
557 }, 557 },
558 getAllClasses() { 558 getAllClasses() {
559 http() 559 http()
560 .get("/getClassesList", { 560 .get("/getClassesList", {
561 headers: { Authorization: "Bearer " + this.token } 561 headers: { Authorization: "Bearer " + this.token }
562 }) 562 })
563 .then(response => { 563 .then(response => {
564 this.addclass = response.data.data; 564 this.addclass = response.data.data;
565 }) 565 })
566 .catch(err => { 566 .catch(err => {
567 // console.log("err====>", err); 567 // console.log("err====>", err);
568 // this.$router.replace({ path: "/" }); 568 // this.$router.replace({ path: "/" });
569 }); 569 });
570 } 570 }
571 }, 571 },
572 mounted() { 572 mounted() {
573 this.token = this.$store.state.token; 573 this.token = this.$store.state.token;
574 this.getSectionList(); 574 this.getSectionList();
575 this.getAllClasses(); 575 this.getAllClasses();
576 this.getAllTeacher(); 576 this.getAllTeacher();
577 }, 577 },
578 created() { 578 created() {
579 this.$root.$on("app:search", search => { 579 this.$root.$on("app:search", search => {
580 this.search = search; 580 this.search = search;
581 }); 581 });
582 }, 582 },
583 beforeDestroy() { 583 beforeDestroy() {
584 // dont forget to remove the listener 584 // dont forget to remove the listener
585 this.$root.$off("app:search"); 585 this.$root.$off("app:search");
586 } 586 }
587 }; 587 };
588 </script> 588 </script>
589 589
590 <style scoped> 590 <style scoped>
591 .active { 591 .active {
592 background-color: gray; 592 background-color: gray;
593 color: white !important; 593 color: white !important;
594 } 594 }
595 .activebtn { 595 .activebtn {
596 color: black !important; 596 color: black !important;
597 } 597 }
598 </style> 598 </style>
src/pages/Students/students.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Students</v-tab> 10 >Existing Students</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Students</v-tab> 18 >Add New Students</v-tab>
19 19
20 <!-- ****** EDITS STUDENTS DETAILS ****** --> 20 <!-- ****** EDITS STUDENTS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1500px" scrollable> 31 <v-dialog v-model="dialog" max-width="1500px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Student Profile</h3> 36 <h3>Edit Student Profile</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height: 586px;"> 40 <v-card-text style="height: 586px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <v-avatar size="160px"> 48 <v-avatar size="160px">
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="!editedItem.profilePicUrl && !imageUrl" 51 v-if="!editedItem.profilePicUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 :src="editedItem.profilePicUrl" 54 :src="editedItem.profilePicUrl"
55 v-else-if="editedItem.profilePicUrl && !imageUrl" 55 v-else-if="editedItem.profilePicUrl && !imageUrl"
56 /> 56 />
57 <img 57 <img
58 v-if="imageUrl" 58 v-if="imageUrl"
59 :src="imageUrl" 59 :src="imageUrl"
60 height="150" 60 height="150"
61 style="border-radius:50%; width:200px" 61 style="border-radius:50%; width:200px"
62 /> 62 />
63 </v-avatar> 63 </v-avatar>
64 <input 64 <input
65 type="file" 65 type="file"
66 style="display: none" 66 style="display: none"
67 ref="image" 67 ref="image"
68 accept="image/*" 68 accept="image/*"
69 @change="onFilePicked" 69 @change="onFilePicked"
70 /> 70 />
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12 sm4> 74 <v-flex xs12 sm4>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-select 81 <v-select
82 :items="addclass" 82 :items="addclass"
83 label="Select Class" 83 label="Select Class"
84 v-model="editedItem.select" 84 v-model="editedItem.select"
85 item-text="classNum" 85 item-text="classNum"
86 item-value="_id" 86 item-value="_id"
87 name="Select Class" 87 name="Select Class"
88 @change="getSections(editedItem.select)" 88 @change="getSections(editedItem.select)"
89 required 89 required
90 ></v-select> 90 ></v-select>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 </v-flex> 93 </v-flex>
94 <v-flex xs12 sm4> 94 <v-flex xs12 sm4>
95 <v-layout> 95 <v-layout>
96 <v-flex xs4 class="pt-4 subheading"> 96 <v-flex xs4 class="pt-4 subheading">
97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 97 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 98 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 class="ml-3"> 100 <v-flex xs8 class="ml-3">
101 <v-select 101 <v-select
102 :items="addSection" 102 :items="addSection"
103 label="Select Section" 103 label="Select Section"
104 v-model="editedItem.selectSection" 104 v-model="editedItem.selectSection"
105 item-text="name" 105 item-text="name"
106 item-value="_id" 106 item-value="_id"
107 name="Select Section" 107 name="Select Section"
108 required 108 required
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm4> 113 <v-flex xs12 sm4>
114 <v-layout> 114 <v-layout>
115 <v-flex xs4 class="pt-4 subheading"> 115 <v-flex xs4 class="pt-4 subheading">
116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 116 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 117 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
118 </v-flex> 118 </v-flex>
119 <v-flex xs8 class="ml-3"> 119 <v-flex xs8 class="ml-3">
120 <v-text-field 120 <v-text-field
121 v-model="editedItem.name" 121 v-model="editedItem.name"
122 placeholder="fill your full Name" 122 placeholder="fill your full Name"
123 name="name" 123 name="name"
124 type="text" 124 type="text"
125 required 125 required
126 ></v-text-field> 126 ></v-text-field>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 <v-layout> 131 <v-layout>
132 <v-flex xs12 sm4> 132 <v-flex xs12 sm4>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">Email ID:</label> 135 <label class="right">Email ID:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 class="ml-3"> 137 <v-flex xs8 class="ml-3">
138 <v-text-field 138 <v-text-field
139 placeholder="fill your email" 139 placeholder="fill your email"
140 v-model="editedItem.email" 140 v-model="editedItem.email"
141 type="text" 141 type="text"
142 name="email" 142 name="email"
143 required 143 required
144 ></v-text-field> 144 ></v-text-field>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12 sm4> 148 <v-flex xs12 sm4>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 151 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 152 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 class="ml-3"> 154 <v-flex xs8 class="ml-3">
155 <v-menu 155 <v-menu
156 ref="menu" 156 ref="menu"
157 :close-on-content-click="false" 157 :close-on-content-click="false"
158 v-model="menu1" 158 v-model="menu1"
159 :nudge-right="40" 159 :nudge-right="40"
160 lazy 160 lazy
161 transition="scale-transition" 161 transition="scale-transition"
162 offset-y 162 offset-y
163 full-width 163 full-width
164 min-width="290px" 164 min-width="290px"
165 > 165 >
166 <v-text-field 166 <v-text-field
167 slot="activator" 167 slot="activator"
168 v-model="editedItem.dob" 168 v-model="editedItem.dob"
169 placeholder="Select Dob" 169 placeholder="Select Dob"
170 ></v-text-field> 170 ></v-text-field>
171 <v-date-picker 171 <v-date-picker
172 ref="picker" 172 ref="picker"
173 v-model="editedItem.dob" 173 v-model="editedItem.dob"
174 :max="new Date().toISOString().substr(0, 10)" 174 :max="new Date().toISOString().substr(0, 10)"
175 min="1950-01-01" 175 min="1950-01-01"
176 @input="menu1 = false" 176 @input="menu1 = false"
177 ></v-date-picker> 177 ></v-date-picker>
178 </v-menu> 178 </v-menu>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12 sm4> 182 <v-flex xs12 sm4>
183 <v-layout> 183 <v-layout>
184 <v-flex xs4 class="pt-4 subheading"> 184 <v-flex xs4 class="pt-4 subheading">
185 <label class="right">City:</label> 185 <label class="right">City:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 class="ml-3"> 187 <v-flex xs8 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.city" 189 v-model="editedItem.city"
190 placeholder="fill your City Name" 190 placeholder="fill your City Name"
191 name="City" 191 name="City"
192 type="text" 192 type="text"
193 required 193 required
194 ></v-text-field> 194 ></v-text-field>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 <v-layout> 199 <v-layout>
200 <v-flex xs12 sm4> 200 <v-flex xs12 sm4>
201 <v-layout> 201 <v-layout>
202 <v-flex xs4 class="pt-4 subheading"> 202 <v-flex xs4 class="pt-4 subheading">
203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 203 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 204 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
205 </v-flex> 205 </v-flex>
206 <v-flex xs8 class="ml-3"> 206 <v-flex xs8 class="ml-3">
207 <v-text-field 207 <v-text-field
208 v-model="editedItem.bloodGroup" 208 v-model="editedItem.bloodGroup"
209 placeholder="fill your BloodGroup" 209 placeholder="fill your BloodGroup"
210 name="state" 210 name="state"
211 type="text" 211 type="text"
212 required 212 required
213 ></v-text-field> 213 ></v-text-field>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-flex> 216 </v-flex>
217 <v-flex xs12 sm4> 217 <v-flex xs12 sm4>
218 <v-layout> 218 <v-layout>
219 <v-flex xs4 class="pt-4 subheading"> 219 <v-flex xs4 class="pt-4 subheading">
220 <label class="right">Allergies:</label> 220 <label class="right">Allergies:</label>
221 </v-flex> 221 </v-flex>
222 <v-flex xs8 class="ml-3"> 222 <v-flex xs8 class="ml-3">
223 <v-text-field 223 <v-text-field
224 v-model="editedItem.allergies" 224 v-model="editedItem.allergies"
225 placeholder="fill your Allergies" 225 placeholder="fill your Allergies"
226 name="pincode" 226 name="pincode"
227 required 227 required
228 ></v-text-field> 228 ></v-text-field>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm4> 232 <v-flex xs12 sm4>
233 <v-layout> 233 <v-layout>
234 <v-flex xs4 class="pt-4 subheading"> 234 <v-flex xs4 class="pt-4 subheading">
235 <label class="right">Medical Notes:</label> 235 <label class="right">Medical Notes:</label>
236 </v-flex> 236 </v-flex>
237 <v-flex xs8 class="ml-3"> 237 <v-flex xs8 class="ml-3">
238 <v-text-field 238 <v-text-field
239 v-model="editedItem.medicalNotes" 239 v-model="editedItem.medicalNotes"
240 placeholder="fill your medicalNotes" 240 placeholder="fill your medicalNotes"
241 name="mobileNo" 241 name="mobileNo"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 <v-layout> 248 <v-layout>
249 <v-flex xs12 sm4> 249 <v-flex xs12 sm4>
250 <v-layout> 250 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Height:</label> 252 <label class="right">Height:</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 class="ml-3"> 254 <v-flex xs8 class="ml-3">
255 <v-text-field 255 <v-text-field
256 v-model="editedItem.height" 256 v-model="editedItem.height"
257 placeholder="fill your Height" 257 placeholder="fill your Height"
258 name="state" 258 name="state"
259 type="text" 259 type="text"
260 required 260 required
261 ></v-text-field> 261 ></v-text-field>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-flex xs12 sm4> 265 <v-flex xs12 sm4>
266 <v-layout> 266 <v-layout>
267 <v-flex xs4 class="pt-4 subheading"> 267 <v-flex xs4 class="pt-4 subheading">
268 <label class="right">Weight:</label> 268 <label class="right">Weight:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs8 class="ml-3"> 270 <v-flex xs8 class="ml-3">
271 <v-text-field 271 <v-text-field
272 v-model="editedItem.weight" 272 v-model="editedItem.weight"
273 placeholder="fill your Weight" 273 placeholder="fill your Weight"
274 name="pincode" 274 name="pincode"
275 required 275 required
276 ></v-text-field> 276 ></v-text-field>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-flex> 279 </v-flex>
280 <v-flex xs12 sm4> 280 <v-flex xs12 sm4>
281 <v-layout> 281 <v-layout>
282 <v-flex xs4 class="pt-4 subheading"> 282 <v-flex xs4 class="pt-4 subheading">
283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 283 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 284 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs8 class="ml-3"> 286 <v-flex xs8 class="ml-3">
287 <v-text-field 287 <v-text-field
288 label="Select Image" 288 label="Select Image"
289 @click="pickFile" 289 @click="pickFile"
290 v-model="imageName" 290 v-model="imageName"
291 append-icon="attach_file" 291 append-icon="attach_file"
292 ></v-text-field> 292 ></v-text-field>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 <v-layout> 297 <v-layout>
298 <v-flex xs12 sm4> 298 <v-flex xs12 sm4>
299 <v-layout> 299 <v-layout>
300 <v-flex xs4 class="pt-4 subheading"> 300 <v-flex xs4 class="pt-4 subheading">
301 <label class="right">State:</label> 301 <label class="right">State:</label>
302 </v-flex> 302 </v-flex>
303 <v-flex xs8 class="ml-3"> 303 <v-flex xs8 class="ml-3">
304 <v-text-field 304 <v-text-field
305 v-model="editedItem.state" 305 v-model="editedItem.state"
306 placeholder="fill your State Name" 306 placeholder="fill your State Name"
307 name="state" 307 name="state"
308 type="text" 308 type="text"
309 required 309 required
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12 sm4> 314 <v-flex xs12 sm4>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 class="pt-4 subheading"> 316 <v-flex xs4 class="pt-4 subheading">
317 <label class="right">Pincode:</label> 317 <label class="right">Pincode:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 class="ml-3"> 319 <v-flex xs8 class="ml-3">
320 <v-text-field 320 <v-text-field
321 v-model="editedItem.pincode" 321 v-model="editedItem.pincode"
322 placeholder="fill your pincode" 322 placeholder="fill your pincode"
323 name="pincode" 323 name="pincode"
324 type="number" 324 type="number"
325 required 325 required
326 ></v-text-field> 326 ></v-text-field>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 </v-flex> 329 </v-flex>
330 <v-flex xs12 sm4> 330 <v-flex xs12 sm4>
331 <v-layout> 331 <v-layout>
332 <v-flex xs4 class="pt-4 subheading"> 332 <v-flex xs4 class="pt-4 subheading">
333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 333 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 334 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs8 class="ml-3"> 336 <v-flex xs8 class="ml-3">
337 <v-text-field 337 <v-text-field
338 v-model="editedItem.mobile" 338 v-model="editedItem.mobile"
339 placeholder="fill your MobileNo" 339 placeholder="fill your MobileNo"
340 name="mobileNo" 340 name="mobileNo"
341 type="number" 341 type="number"
342 required 342 required
343 ></v-text-field> 343 ></v-text-field>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs12 sm4> 349 <v-flex xs12 sm4>
350 <v-layout> 350 <v-layout>
351 <v-flex xs4 class="pt-4 subheading"> 351 <v-flex xs4 class="pt-4 subheading">
352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 352 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 353 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs8 class="ml-3"> 355 <v-flex xs8 class="ml-3">
356 <v-autocomplete 356 <v-autocomplete
357 v-model="editedItem.country" 357 v-model="editedItem.country"
358 :items="countries" 358 :items="countries"
359 placeholder="Select Country Name" 359 placeholder="Select Country Name"
360 required 360 required
361 ></v-autocomplete> 361 ></v-autocomplete>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 </v-flex> 364 </v-flex>
365 <v-flex xs12 sm4> 365 <v-flex xs12 sm4>
366 <v-layout> 366 <v-layout>
367 <v-flex xs4 class="pt-4 subheading"> 367 <v-flex xs4 class="pt-4 subheading">
368 <label class="right">Gender:</label> 368 <label class="right">Gender:</label>
369 </v-flex> 369 </v-flex>
370 <v-flex xs8 class="ml-3"> 370 <v-flex xs8 class="ml-3">
371 <v-select 371 <v-select
372 :items="gender" 372 :items="gender"
373 v-model="editedItem.gender" 373 v-model="editedItem.gender"
374 placeholder="Select Gender" 374 placeholder="Select Gender"
375 required 375 required
376 ></v-select> 376 ></v-select>
377 </v-flex> 377 </v-flex>
378 </v-layout> 378 </v-layout>
379 </v-flex> 379 </v-flex>
380 <v-flex xs12 sm4> 380 <v-flex xs12 sm4>
381 <v-layout> 381 <v-layout>
382 <v-flex xs4 class="pt-4 subheading"> 382 <v-flex xs4 class="pt-4 subheading">
383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 383 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 384 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
385 </v-flex> 385 </v-flex>
386 <v-flex xs8 class="ml-3"> 386 <v-flex xs8 class="ml-3">
387 <v-text-field 387 <v-text-field
388 :items="gender" 388 :items="gender"
389 v-model="editedItem.rollNo" 389 v-model="editedItem.rollNo"
390 placeholder="fill roll number" 390 placeholder="fill roll number"
391 required 391 required
392 ></v-text-field> 392 ></v-text-field>
393 </v-flex> 393 </v-flex>
394 </v-layout> 394 </v-layout>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 <v-layout class="hidden-xs-only hidden-sm-only"> 397 <v-layout class="hidden-xs-only hidden-sm-only">
398 <v-flex xs12 sm12> 398 <v-flex xs12 sm12>
399 <v-layout> 399 <v-layout>
400 <v-flex xs4 sm2 class="pt-4 subheading ml-5"> 400 <v-flex xs4 sm2 class="pt-4 subheading ml-5">
401 <label class="right pr-4">Present Address:</label> 401 <label class="right pr-4">Present Address:</label>
402 </v-flex> 402 </v-flex>
403 <v-flex xs8 sm12> 403 <v-flex xs8 sm12>
404 <v-text-field 404 <v-text-field
405 name="input-4-3" 405 name="input-4-3"
406 v-model="editedItem.presentAddress" 406 v-model="editedItem.presentAddress"
407 placeholder="fill Your present Address" 407 placeholder="fill Your present Address"
408 required 408 required
409 ></v-text-field> 409 ></v-text-field>
410 </v-flex> 410 </v-flex>
411 </v-layout> 411 </v-layout>
412 </v-flex> 412 </v-flex>
413 <v-flex xs12 sm12> 413 <v-flex xs12 sm12>
414 <v-layout> 414 <v-layout>
415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> 415 <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
416 <label class>Permanent Address:</label> 416 <label class>Permanent Address:</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs12 sm12> 418 <v-flex xs12 sm12>
419 <v-text-field 419 <v-text-field
420 name="input-4-3" 420 name="input-4-3"
421 v-model="editedItem.permanentAddress" 421 v-model="editedItem.permanentAddress"
422 placeholder="fill Your Permanent Address" 422 placeholder="fill Your Permanent Address"
423 required 423 required
424 ></v-text-field> 424 ></v-text-field>
425 </v-flex> 425 </v-flex>
426 </v-layout> 426 </v-layout>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 429 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
430 <v-flex xs12 sm12> 430 <v-flex xs12 sm12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 432 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
433 <label class>Present Address :</label> 433 <label class>Present Address :</label>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-textarea 438 <v-textarea
439 name="input-4-3" 439 name="input-4-3"
440 v-model="editedItem.presentAddress" 440 v-model="editedItem.presentAddress"
441 placeholder="fill Your present Address" 441 placeholder="fill Your present Address"
442 required 442 required
443 ></v-textarea> 443 ></v-textarea>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 </v-flex> 446 </v-flex>
447 <v-flex xs12 sm12> 447 <v-flex xs12 sm12>
448 <v-layout> 448 <v-layout>
449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 449 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
450 <label>Permanent addr:</label> 450 <label>Permanent addr:</label>
451 </v-flex> 451 </v-flex>
452 </v-layout> 452 </v-layout>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12 sm12> 454 <v-flex xs12 sm12>
455 <v-textarea 455 <v-textarea
456 name="input-4-3" 456 name="input-4-3"
457 v-model="editedItem.permanentAddress" 457 v-model="editedItem.permanentAddress"
458 placeholder="fill Your Permanent Address" 458 placeholder="fill Your Permanent Address"
459 required 459 required
460 ></v-textarea> 460 ></v-textarea>
461 </v-flex> 461 </v-flex>
462 </v-layout> 462 </v-layout>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout> 465 <v-layout>
466 <v-flex xs12 sm12> 466 <v-flex xs12 sm12>
467 <v-layout> 467 <v-layout>
468 <v-flex xs6> 468 <v-flex xs6>
469 <v-btn round dark @click.native="close">Cancel</v-btn> 469 <v-btn round dark @click.native="close">Cancel</v-btn>
470 </v-flex> 470 </v-flex>
471 <v-flex xs6> 471 <v-flex xs6>
472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 472 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 </v-container> 477 </v-container>
478 </v-form> 478 </v-form>
479 </v-card-text> 479 </v-card-text>
480 </v-card> 480 </v-card>
481 </v-dialog> 481 </v-dialog>
482 482
483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 483 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
484 484
485 <v-dialog v-model="dialog1" max-width="1100px" scrollable> 485 <v-dialog v-model="dialog1" max-width="1100px" scrollable>
486 <v-card> 486 <v-card>
487 <v-toolbar color="grey lighten-2" flat> 487 <v-toolbar color="grey lighten-2" flat>
488 <v-spacer></v-spacer> 488 <v-spacer></v-spacer>
489 <v-toolbar-title>Student Profile</v-toolbar-title> 489 <v-toolbar-title>Student Profile</v-toolbar-title>
490 <v-spacer></v-spacer> 490 <v-spacer></v-spacer>
491 <v-icon @click="close1">close</v-icon> 491 <v-icon @click="close1">close</v-icon>
492 </v-toolbar> 492 </v-toolbar>
493 <v-card-text style="height: 700px;"> 493 <v-card-text style="height: 700px;">
494 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 494 <v-flex align-center justify-center layout text-xs-center class="mt-3">
495 <v-avatar size="160px"> 495 <v-avatar size="160px">
496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 496 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 497 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
498 </v-avatar> 498 </v-avatar>
499 </v-flex> 499 </v-flex>
500 <v-container grid-list-md> 500 <v-container grid-list-md>
501 <v-layout wrap> 501 <v-layout wrap>
502 <v-flex xs12 sm6> 502 <v-flex xs12 sm6>
503 <v-layout> 503 <v-layout>
504 <v-flex xs6 sm5> 504 <v-flex xs6 sm5>
505 <h5 class="right my-1"> 505 <h5 class="right my-1">
506 <b>Full Name:</b> 506 <b>Full Name:</b>
507 </h5> 507 </h5>
508 </v-flex> 508 </v-flex>
509 <v-flex sm7 xs6> 509 <v-flex sm7 xs6>
510 <h5 class="my-1 left">{{ editedItem.name }}</h5> 510 <h5 class="my-1 left">{{ editedItem.name }}</h5>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 </v-flex> 513 </v-flex>
514 <v-flex xs12 sm6> 514 <v-flex xs12 sm6>
515 <v-layout> 515 <v-layout>
516 <v-flex xs6 sm4> 516 <v-flex xs6 sm4>
517 <h5 class="right my-1"> 517 <h5 class="right my-1">
518 <b>Email:</b> 518 <b>Email:</b>
519 </h5> 519 </h5>
520 </v-flex> 520 </v-flex>
521 <v-flex sm8 xs6> 521 <v-flex sm8 xs6>
522 <h5 class="my-1 left">{{ editedItem.email }}</h5> 522 <h5 class="my-1 left">{{ editedItem.email }}</h5>
523 </v-flex> 523 </v-flex>
524 </v-layout> 524 </v-layout>
525 </v-flex> 525 </v-flex>
526 </v-layout> 526 </v-layout>
527 <v-layout wrap> 527 <v-layout wrap>
528 <v-flex xs12 sm6> 528 <v-flex xs12 sm6>
529 <v-layout> 529 <v-layout>
530 <v-flex xs6 sm5> 530 <v-flex xs6 sm5>
531 <b> 531 <b>
532 <h5 class="right my-1"> 532 <h5 class="right my-1">
533 <b>Gender:</b> 533 <b>Gender:</b>
534 </h5> 534 </h5>
535 </b> 535 </b>
536 </v-flex> 536 </v-flex>
537 <v-flex sm7 xs6> 537 <v-flex sm7 xs6>
538 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 538 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
539 </v-flex> 539 </v-flex>
540 </v-layout> 540 </v-layout>
541 </v-flex> 541 </v-flex>
542 <v-flex xs12 sm6> 542 <v-flex xs12 sm6>
543 <v-layout> 543 <v-layout>
544 <v-flex xs6 sm4> 544 <v-flex xs6 sm4>
545 <b> 545 <b>
546 <h5 class="right my-1"> 546 <h5 class="right my-1">
547 <b>D.O.B:</b> 547 <b>D.O.B:</b>
548 </h5> 548 </h5>
549 </b> 549 </b>
550 </v-flex> 550 </v-flex>
551 <v-flex sm7 xs6> 551 <v-flex sm7 xs6>
552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 552 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
553 </v-flex> 553 </v-flex>
554 </v-layout> 554 </v-layout>
555 </v-flex> 555 </v-flex>
556 </v-layout> 556 </v-layout>
557 <v-layout wrap> 557 <v-layout wrap>
558 <v-flex xs12 sm6> 558 <v-flex xs12 sm6>
559 <v-layout> 559 <v-layout>
560 <v-flex xs6 sm5> 560 <v-flex xs6 sm5>
561 <b> 561 <b>
562 <h5 class="right my-1"> 562 <h5 class="right my-1">
563 <b>Blood Group:</b> 563 <b>Blood Group:</b>
564 </h5> 564 </h5>
565 </b> 565 </b>
566 </v-flex> 566 </v-flex>
567 <v-flex sm7 xs6> 567 <v-flex sm7 xs6>
568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 568 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
569 </v-flex> 569 </v-flex>
570 </v-layout> 570 </v-layout>
571 </v-flex> 571 </v-flex>
572 <v-flex xs12 sm6> 572 <v-flex xs12 sm6>
573 <v-layout> 573 <v-layout>
574 <v-flex xs6 sm4> 574 <v-flex xs6 sm4>
575 <b> 575 <b>
576 <h5 class="right my-1"> 576 <h5 class="right my-1">
577 <b>Allergies:</b> 577 <b>Allergies:</b>
578 </h5> 578 </h5>
579 </b> 579 </b>
580 </v-flex> 580 </v-flex>
581 <v-flex sm8 xs6> 581 <v-flex sm8 xs6>
582 <h5 class="my-1">{{ editedItem.allergies }}</h5> 582 <h5 class="my-1">{{ editedItem.allergies }}</h5>
583 </v-flex> 583 </v-flex>
584 </v-layout> 584 </v-layout>
585 </v-flex> 585 </v-flex>
586 </v-layout> 586 </v-layout>
587 <v-layout wrap> 587 <v-layout wrap>
588 <v-flex xs12 sm6> 588 <v-flex xs12 sm6>
589 <v-layout> 589 <v-layout>
590 <v-flex xs6 sm5> 590 <v-flex xs6 sm5>
591 <b> 591 <b>
592 <h5 class="right my-1"> 592 <h5 class="right my-1">
593 <b>Height:</b> 593 <b>Height:</b>
594 </h5> 594 </h5>
595 </b> 595 </b>
596 </v-flex> 596 </v-flex>
597 <v-flex sm7 xs6> 597 <v-flex sm7 xs6>
598 <h5 class="my-1 left">{{ editedItem.height }}</h5> 598 <h5 class="my-1 left">{{ editedItem.height }}</h5>
599 </v-flex> 599 </v-flex>
600 </v-layout> 600 </v-layout>
601 </v-flex> 601 </v-flex>
602 <v-flex xs12 sm6> 602 <v-flex xs12 sm6>
603 <v-layout> 603 <v-layout>
604 <v-flex xs6 sm4> 604 <v-flex xs6 sm4>
605 <b> 605 <b>
606 <h5 class="right my-1"> 606 <h5 class="right my-1">
607 <b>Weight:</b> 607 <b>Weight:</b>
608 </h5> 608 </h5>
609 </b> 609 </b>
610 </v-flex> 610 </v-flex>
611 <v-flex sm8 xs6> 611 <v-flex sm8 xs6>
612 <h5 class="my-1">{{ editedItem.weight }}</h5> 612 <h5 class="my-1">{{ editedItem.weight }}</h5>
613 </v-flex> 613 </v-flex>
614 </v-layout> 614 </v-layout>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 <v-layout wrap> 617 <v-layout wrap>
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs6 sm5> 620 <v-flex xs6 sm5>
621 <b> 621 <b>
622 <h5 class="right my-1"> 622 <h5 class="right my-1">
623 <b>City:</b> 623 <b>City:</b>
624 </h5> 624 </h5>
625 </b> 625 </b>
626 </v-flex> 626 </v-flex>
627 <v-flex sm7 xs6> 627 <v-flex sm7 xs6>
628 <h5 class="my-1 left">{{ editedItem.city }}</h5> 628 <h5 class="my-1 left">{{ editedItem.city }}</h5>
629 </v-flex> 629 </v-flex>
630 </v-layout> 630 </v-layout>
631 </v-flex> 631 </v-flex>
632 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
633 <v-layout> 633 <v-layout>
634 <v-flex xs6 sm4> 634 <v-flex xs6 sm4>
635 <b> 635 <b>
636 <h5 class="right my-1"> 636 <h5 class="right my-1">
637 <b>State:</b> 637 <b>State:</b>
638 </h5> 638 </h5>
639 </b> 639 </b>
640 </v-flex> 640 </v-flex>
641 <v-flex sm8 xs6> 641 <v-flex sm8 xs6>
642 <h5 class="my-1">{{ editedItem.state }}</h5> 642 <h5 class="my-1">{{ editedItem.state }}</h5>
643 </v-flex> 643 </v-flex>
644 </v-layout> 644 </v-layout>
645 </v-flex> 645 </v-flex>
646 </v-layout> 646 </v-layout>
647 <v-layout wrap> 647 <v-layout wrap>
648 <v-flex xs12 sm6> 648 <v-flex xs12 sm6>
649 <v-layout> 649 <v-layout>
650 <v-flex xs6 sm5> 650 <v-flex xs6 sm5>
651 <b> 651 <b>
652 <h5 class="right my-1"> 652 <h5 class="right my-1">
653 <b>Pincode:</b> 653 <b>Pincode:</b>
654 </h5> 654 </h5>
655 </b> 655 </b>
656 </v-flex> 656 </v-flex>
657 <v-flex sm7 xs6> 657 <v-flex sm7 xs6>
658 <h5 class="my-1">{{ editedItem.pincode }}</h5> 658 <h5 class="my-1">{{ editedItem.pincode }}</h5>
659 </v-flex> 659 </v-flex>
660 </v-layout> 660 </v-layout>
661 </v-flex> 661 </v-flex>
662 <v-flex xs12 sm5> 662 <v-flex xs12 sm5>
663 <v-layout> 663 <v-layout>
664 <v-flex xs6 sm5> 664 <v-flex xs6 sm5>
665 <b> 665 <b>
666 <h5 class="right my-1"> 666 <h5 class="right my-1">
667 <b>Country:</b> 667 <b>Country:</b>
668 </h5> 668 </h5>
669 </b> 669 </b>
670 </v-flex> 670 </v-flex>
671 <v-flex sm7 xs6> 671 <v-flex sm7 xs6>
672 <h5 class="my-1">{{ editedItem.country }}</h5> 672 <h5 class="my-1">{{ editedItem.country }}</h5>
673 </v-flex> 673 </v-flex>
674 </v-layout> 674 </v-layout>
675 </v-flex> 675 </v-flex>
676 </v-layout> 676 </v-layout>
677 <v-layout wrap> 677 <v-layout wrap>
678 <v-flex xs12 sm6> 678 <v-flex xs12 sm6>
679 <v-layout> 679 <v-layout>
680 <v-flex sm5 xs6> 680 <v-flex sm5 xs6>
681 <b> 681 <b>
682 <h5 class="right my-1"> 682 <h5 class="right my-1">
683 <b>Mobile No:</b> 683 <b>Mobile No:</b>
684 </h5> 684 </h5>
685 </b> 685 </b>
686 </v-flex> 686 </v-flex>
687 <v-flex sm6 xs6> 687 <v-flex sm6 xs6>
688 <h5 class="my-1">{{ editedItem.mobile }}</h5> 688 <h5 class="my-1">{{ editedItem.mobile }}</h5>
689 </v-flex> 689 </v-flex>
690 </v-layout> 690 </v-layout>
691 </v-flex> 691 </v-flex>
692 <v-flex xs12 sm6> 692 <v-flex xs12 sm6>
693 <v-layout> 693 <v-layout>
694 <v-flex xs6 sm4> 694 <v-flex xs6 sm4>
695 <b> 695 <b>
696 <h5 class="right my-1"> 696 <h5 class="right my-1">
697 <b>Fahter Name:</b> 697 <b>Fahter Name:</b>
698 </h5> 698 </h5>
699 </b> 699 </b>
700 </v-flex> 700 </v-flex>
701 <v-flex sm8 xs6> 701 <v-flex sm8 xs6>
702 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 702 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 </v-layout> 706 </v-layout>
707 <v-layout wrap> 707 <v-layout wrap>
708 <v-flex xs12 sm5> 708 <v-flex xs12 sm5>
709 <v-layout> 709 <v-layout>
710 <v-flex xs6 sm6> 710 <v-flex xs6 sm6>
711 <b> 711 <b>
712 <h5 class="right my-1"> 712 <h5 class="right my-1">
713 <b>Mother Name:</b> 713 <b>Mother Name:</b>
714 </h5> 714 </h5>
715 </b> 715 </b>
716 </v-flex> 716 </v-flex>
717 <v-flex sm6 xs6> 717 <v-flex sm6 xs6>
718 <h5 class="my-1">{{ editedItem.motherName }}</h5> 718 <h5 class="my-1">{{ editedItem.motherName }}</h5>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
723 <v-layout> 723 <v-layout>
724 <v-flex xs6 sm6> 724 <v-flex xs6 sm6>
725 <b> 725 <b>
726 <h5 class="right my-1"> 726 <h5 class="right my-1">
727 <b>Father Cell No:</b> 727 <b>Father Cell No:</b>
728 </h5> 728 </h5>
729 </b> 729 </b>
730 </v-flex> 730 </v-flex>
731 <v-flex sm6 xs6> 731 <v-flex sm6 xs6>
732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 732 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
733 </v-flex> 733 </v-flex>
734 </v-layout> 734 </v-layout>
735 </v-flex> 735 </v-flex>
736 </v-layout> 736 </v-layout>
737 <v-layout wrap> 737 <v-layout wrap>
738 <v-flex xs12 sm5> 738 <v-flex xs12 sm5>
739 <v-layout> 739 <v-layout>
740 <v-flex xs6 sm6> 740 <v-flex xs6 sm6>
741 <b> 741 <b>
742 <h5 class="right my-1"> 742 <h5 class="right my-1">
743 <b>Mother Cell No:</b> 743 <b>Mother Cell No:</b>
744 </h5> 744 </h5>
745 </b> 745 </b>
746 </v-flex> 746 </v-flex>
747 <v-flex sm6 xs6> 747 <v-flex sm6 xs6>
748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 748 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
749 </v-flex> 749 </v-flex>
750 </v-layout> 750 </v-layout>
751 </v-flex> 751 </v-flex>
752 <v-flex xs12 sm6> 752 <v-flex xs12 sm6>
753 <v-layout> 753 <v-layout>
754 <v-flex xs6 sm6> 754 <v-flex xs6 sm6>
755 <b> 755 <b>
756 <h5 class="my-1 right"> 756 <h5 class="my-1 right">
757 <b>Academic Year:</b> 757 <b>Academic Year:</b>
758 </h5> 758 </h5>
759 </b> 759 </b>
760 </v-flex> 760 </v-flex>
761 <v-flex sm5 xs6> 761 <v-flex sm5 xs6>
762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 762 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
763 </v-flex> 763 </v-flex>
764 </v-layout> 764 </v-layout>
765 </v-flex> 765 </v-flex>
766 </v-layout> 766 </v-layout>
767 <v-layout wrap> 767 <v-layout wrap>
768 <v-flex xs12 sm5> 768 <v-flex xs12 sm5>
769 <v-layout> 769 <v-layout>
770 <v-flex xs6 sm6> 770 <v-flex xs6 sm6>
771 <b> 771 <b>
772 <h5 class="my-1 right"> 772 <h5 class="my-1 right">
773 <b>Medical Notes:</b> 773 <b>Medical Notes:</b>
774 </h5> 774 </h5>
775 </b> 775 </b>
776 </v-flex> 776 </v-flex>
777 <v-flex sm5 xs6> 777 <v-flex sm5 xs6>
778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 778 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 </v-flex> 781 </v-flex>
782 <v-flex xs12 sm6> 782 <v-flex xs12 sm6>
783 <v-layout> 783 <v-layout>
784 <v-flex xs6 sm6> 784 <v-flex xs6 sm6>
785 <b> 785 <b>
786 <h5 class="right my-1"> 786 <h5 class="right my-1">
787 <b>Roll No. :</b> 787 <b>Roll No. :</b>
788 </h5> 788 </h5>
789 </b> 789 </b>
790 </v-flex> 790 </v-flex>
791 <v-flex sm6 xs6> 791 <v-flex sm6 xs6>
792 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 792 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
793 </v-flex> 793 </v-flex>
794 </v-layout> 794 </v-layout>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 <v-layout wrap class="hidden-xs-only"> 797 <v-layout wrap class="hidden-xs-only">
798 <v-flex xs12 sm5> 798 <v-flex xs12 sm5>
799 <v-layout wrap> 799 <v-layout wrap>
800 <v-flex sm6> 800 <v-flex sm6>
801 <b> 801 <b>
802 <h5 class="my-1 right"> 802 <h5 class="my-1 right">
803 <b>present Address:</b> 803 <b>present Address:</b>
804 </h5> 804 </h5>
805 </b> 805 </b>
806 </v-flex> 806 </v-flex>
807 <v-flex sm5> 807 <v-flex sm5>
808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 808 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
809 </v-flex> 809 </v-flex>
810 </v-layout> 810 </v-layout>
811 </v-flex> 811 </v-flex>
812 <v-flex sm6> 812 <v-flex sm6>
813 <v-layout wrap> 813 <v-layout wrap>
814 <v-flex sm6> 814 <v-flex sm6>
815 <b> 815 <b>
816 <h5 class="my-1 right"> 816 <h5 class="my-1 right">
817 <b>Permanent Address:</b> 817 <b>Permanent Address:</b>
818 </h5> 818 </h5>
819 </b> 819 </b>
820 </v-flex> 820 </v-flex>
821 <v-flex sm6> 821 <v-flex sm6>
822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 822 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
823 </v-flex> 823 </v-flex>
824 </v-layout> 824 </v-layout>
825 </v-flex> 825 </v-flex>
826 </v-layout> 826 </v-layout>
827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 827 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
828 <v-flex xs12 sm5> 828 <v-flex xs12 sm5>
829 <v-layout wrap> 829 <v-layout wrap>
830 <v-flex xs8 sm6> 830 <v-flex xs8 sm6>
831 <b> 831 <b>
832 <h5 class="my-1"> 832 <h5 class="my-1">
833 <b>present Address:-</b> 833 <b>present Address:-</b>
834 </h5> 834 </h5>
835 </b> 835 </b>
836 </v-flex> 836 </v-flex>
837 <v-flex sm5 xs12> 837 <v-flex sm5 xs12>
838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 838 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
839 </v-flex> 839 </v-flex>
840 </v-layout> 840 </v-layout>
841 </v-flex> 841 </v-flex>
842 <v-flex xs12 sm6> 842 <v-flex xs12 sm6>
843 <v-layout wrap> 843 <v-layout wrap>
844 <v-flex xs9 sm6> 844 <v-flex xs9 sm6>
845 <b> 845 <b>
846 <h5 class="my-1"> 846 <h5 class="my-1">
847 <b>Permanent Address:-</b> 847 <b>Permanent Address:-</b>
848 </h5> 848 </h5>
849 </b> 849 </b>
850 </v-flex> 850 </v-flex>
851 <v-flex sm6 xs12> 851 <v-flex sm6 xs12>
852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 852 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
853 </v-flex> 853 </v-flex>
854 </v-layout> 854 </v-layout>
855 </v-flex> 855 </v-flex>
856 </v-layout> 856 </v-layout>
857 </v-container> 857 </v-container>
858 </v-card-text> 858 </v-card-text>
859 </v-card> 859 </v-card>
860 </v-dialog> 860 </v-dialog>
861 861
862 <v-snackbar 862 <v-snackbar
863 :timeout="timeout" 863 :timeout="timeout"
864 :top="y === 'top'" 864 :top="y === 'top'"
865 :right="x === 'right'" 865 :right="x === 'right'"
866 :vertical="mode === 'vertical'" 866 :vertical="mode === 'vertical'"
867 v-model="snackbar" 867 v-model="snackbar"
868 color="success" 868 color="success"
869 >{{ text }}</v-snackbar> 869 >{{ text }}</v-snackbar>
870 870
871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 871 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
872 <v-card flat> 872 <v-card flat>
873 <v-card-actions class="hidden-xs-only hidden-sm-only"> 873 <v-card-actions class="hidden-xs-only hidden-sm-only">
874 <v-layout> 874 <v-layout>
875 <label class="right mt-4 ml-5">Select Class:</label> 875 <label class="right mt-4 ml-5">Select Class:</label>
876 <v-select 876 <v-select
877 :items="addclass" 877 :items="addclass"
878 label="Select Class" 878 label="Select Class"
879 v-model="selectStudents.select" 879 v-model="selectStudents.select"
880 item-text="classNum" 880 item-text="classNum"
881 item-value="_id" 881 item-value="_id"
882 name="Select Class" 882 name="Select Class"
883 :rules="classRules" 883 :rules="classRules"
884 @change="getSections(selectStudents.select)" 884 @change="getSections(selectStudents.select)"
885 class="px-4" 885 class="px-4"
886 required 886 required
887 ></v-select> 887 ></v-select>
888 <label class="right mt-4">Select Section:</label> 888 <label class="right mt-4">Select Section:</label>
889 <v-select 889 <v-select
890 :items="addSection" 890 :items="addSection"
891 label="Select Section" 891 label="Select Section"
892 v-model="selectStudents.selectSection" 892 v-model="selectStudents.selectSection"
893 item-text="name" 893 item-text="name"
894 item-value="_id" 894 item-value="_id"
895 name="Select Section" 895 name="Select Section"
896 :rules="sectionRules" 896 :rules="sectionRules"
897 class="pl-3" 897 class="pl-3"
898 required 898 required
899 ></v-select> 899 ></v-select>
900 </v-layout> 900 </v-layout>
901 <v-spacer></v-spacer> 901 <v-spacer></v-spacer>
902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn> 902 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
903 </v-card-actions> 903 </v-card-actions>
904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 904 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
905 <v-layout> 905 <v-layout>
906 <v-flex xs4> 906 <v-flex xs4>
907 <label class="right mt-4">Select Class:</label> 907 <label class="right mt-4">Select Class:</label>
908 </v-flex> 908 </v-flex>
909 <v-flex xs8> 909 <v-flex xs8>
910 <v-select 910 <v-select
911 :items="addclass" 911 :items="addclass"
912 label="Select Class" 912 label="Select Class"
913 v-model="selectStudents.select" 913 v-model="selectStudents.select"
914 item-text="classNum" 914 item-text="classNum"
915 item-value="_id" 915 item-value="_id"
916 name="Select Class" 916 name="Select Class"
917 :rules="classRules" 917 :rules="classRules"
918 @change="getSections(selectStudents.select)" 918 @change="getSections(selectStudents.select)"
919 class="px-2" 919 class="px-2"
920 required 920 required
921 ></v-select> 921 ></v-select>
922 </v-flex> 922 </v-flex>
923 </v-layout> 923 </v-layout>
924 <v-layout> 924 <v-layout>
925 <v-flex xs4> 925 <v-flex xs4>
926 <label class="right mt-4">Select Section:</label> 926 <label class="right mt-4">Select Section:</label>
927 </v-flex> 927 </v-flex>
928 <v-flex xs8> 928 <v-flex xs8>
929 <v-select 929 <v-select
930 :items="addSection" 930 :items="addSection"
931 label="Select Section" 931 label="Select Section"
932 v-model="selectStudents.selectSection" 932 v-model="selectStudents.selectSection"
933 item-text="name" 933 item-text="name"
934 item-value="_id" 934 item-value="_id"
935 name="Select Section" 935 name="Select Section"
936 :rules="sectionRules" 936 :rules="sectionRules"
937 class="px-2" 937 class="px-2"
938 required 938 required
939 ></v-select> 939 ></v-select>
940 </v-flex> 940 </v-flex>
941 </v-layout> 941 </v-layout>
942 <v-layout> 942 <v-layout>
943 <v-flex xs5 class="mx-auto mb-2"> 943 <v-flex xs5 class="mx-auto mb-2">
944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn> 944 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
945 </v-flex> 945 </v-flex>
946 </v-layout> 946 </v-layout>
947 </v-flex> 947 </v-flex>
948 </v-card> 948 </v-card>
949 <v-data-table 949 <v-data-table
950 :headers="headers" 950 :headers="headers"
951 :items="desserts" 951 :items="desserts"
952 :pagination.sync="pagination" 952 :pagination.sync="pagination"
953 :search="search" 953 :search="search"
954 > 954 >
955 <template slot="items" slot-scope="props"> 955 <template slot="items" slot-scope="props">
956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td> 956 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
957 <td id="td" class="text-xs-center"> 957 <td id="td" class="text-xs-center">
958 <v-avatar> 958 <v-avatar>
959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 959 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 960 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
961 </v-avatar> 961 </v-avatar>
962 </td> 962 </td>
963 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 963 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
964 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 964 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 965 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 966 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td> 967 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td> 968 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 969 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 970 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
971 971
972 <td class="text-xs-center"> 972 <td class="text-xs-center">
973 <span> 973 <span>
974 <v-tooltip top> 974 <v-tooltip top>
975 <img 975 <img
976 slot="activator" 976 slot="activator"
977 style="cursor:pointer; width:25px; height:18px; " 977 style="cursor:pointer; width:25px; height:18px; "
978 class="mr5" 978 class="mr5"
979 @click="profile(props.item)" 979 @click="profile(props.item)"
980 src="/static/icon/eye1.png" 980 src="/static/icon/eye1.png"
981 /> 981 />
982 <span>View</span> 982 <span>View</span>
983 </v-tooltip> 983 </v-tooltip>
984 <v-tooltip top> 984 <v-tooltip top>
985 <img 985 <img
986 slot="activator" 986 slot="activator"
987 style="cursor:pointer; width:20px; height:18px; " 987 style="cursor:pointer; width:20px; height:18px; "
988 class="mr5" 988 class="mr5"
989 @click="editItem(props.item)" 989 @click="editItem(props.item)"
990 src="/static/icon/edit1.png" 990 src="/static/icon/edit1.png"
991 /> 991 />
992 <span>Edit</span> 992 <span>Edit</span>
993 </v-tooltip> 993 </v-tooltip>
994 <v-tooltip top> 994 <v-tooltip top>
995 <img 995 <img
996 slot="activator" 996 slot="activator"
997 style="cursor:pointer; width:20px; height:20px; " 997 style="cursor:pointer; width:20px; height:20px; "
998 class="mr5" 998 class="mr5"
999 @click="deleteItem(props.item)" 999 @click="deleteItem(props.item)"
1000 src="/static/icon/delete1.png" 1000 src="/static/icon/delete1.png"
1001 /> 1001 />
1002 <span>Delete</span> 1002 <span>Delete</span>
1003 </v-tooltip> 1003 </v-tooltip>
1004 </span> 1004 </span>
1005 </td> 1005 </td>
1006 </template> 1006 </template>
1007 <v-alert 1007 <v-alert
1008 slot="no-results" 1008 slot="no-results"
1009 :value="true" 1009 :value="true"
1010 color="error" 1010 color="error"
1011 icon="warning" 1011 icon="warning"
1012 >Your search for "{{ search }}" found no results.</v-alert> 1012 >Your search for "{{ search }}" found no results.</v-alert>
1013 </v-data-table> 1013 </v-data-table>
1014 </v-tab-item> 1014 </v-tab-item>
1015 1015
1016 <!-- ****** ADD STUDENTS DETAILS****** --> 1016 <!-- ****** ADD STUDENTS DETAILS****** -->
1017 <v-tab-item> 1017 <v-tab-item>
1018 <v-container fluid> 1018 <v-container fluid>
1019 <v-layout align-center justify-center fill-height> 1019 <v-layout align-center justify-center fill-height>
1020 <v-flex xs12 sm12 md10 lg11> 1020 <v-flex xs12 sm12 md10 lg11>
1021 <div> 1021 <div>
1022 <v-app> 1022 <v-app>
1023 <v-stepper v-model="e2"> 1023 <v-stepper v-model="e2">
1024 <v-stepper-header> 1024 <v-stepper-header>
1025 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1025 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1026 <v-divider></v-divider> 1026 <v-divider></v-divider>
1027 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1027 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1028 </v-stepper-header> 1028 </v-stepper-header>
1029 <v-stepper-items> 1029 <v-stepper-items>
1030 <v-stepper-content step="1"> 1030 <v-stepper-content step="1">
1031 <v-container fluid class> 1031 <v-container fluid class>
1032 <v-snackbar 1032 <v-snackbar
1033 :timeout="timeout" 1033 :timeout="timeout"
1034 :top="y === 'top'" 1034 :top="y === 'top'"
1035 :right="x === 'right'" 1035 :right="x === 'right'"
1036 :vertical="mode === 'vertical'" 1036 :vertical="mode === 'vertical'"
1037 v-model="snackbar" 1037 v-model="snackbar"
1038 color="success" 1038 color="success"
1039 >{{ text }}</v-snackbar> 1039 >{{ text }}</v-snackbar>
1040 <v-flex xs12 sm12> 1040 <v-flex xs12 sm12>
1041 <v-form ref="parentForm" v-model="valid" lazy-validation> 1041 <v-form ref="parentForm" v-model="valid" lazy-validation>
1042 <v-layout wrap> 1042 <v-layout wrap>
1043 <v-flex xs12 sm6> 1043 <v-flex xs12 sm6>
1044 <v-layout> 1044 <v-layout>
1045 <v-flex xs4 class="pt-4 subheading"> 1045 <v-flex xs4 class="pt-4 subheading">
1046 <label class="right">Parent Email Id:</label> 1046 <label class="right">Parent Email Id:</label>
1047 </v-flex> 1047 </v-flex>
1048 <v-flex xs8 class="ml-3"> 1048 <v-flex xs8 class="ml-3">
1049 <v-text-field 1049 <v-text-field
1050 placeholder="fill Parent email" 1050 placeholder="fill Parent email"
1051 :rules="emailRules" 1051 :rules="emailRules"
1052 v-model.trim="parentData.email" 1052 v-model.trim="parentData.email"
1053 type="text" 1053 type="text"
1054 v-on:keyup="getParentDetails" 1054 v-on:keyup="getParentDetails"
1055 name="email" 1055 name="email"
1056 required 1056 required
1057 ></v-text-field> 1057 ></v-text-field>
1058 </v-flex> 1058 </v-flex>
1059 </v-layout> 1059 </v-layout>
1060 </v-flex> 1060 </v-flex>
1061 <v-flex xs12 sm6> 1061 <v-flex xs12 sm6>
1062 <v-layout> 1062 <v-layout>
1063 <v-flex xs4 class="pt-4 subheading"> 1063 <v-flex xs4 class="pt-4 subheading">
1064 <label class="right">Father Name:</label> 1064 <label class="right">Father Name:</label>
1065 </v-flex> 1065 </v-flex>
1066 <v-flex xs8 class="ml-3"> 1066 <v-flex xs8 class="ml-3">
1067 <v-text-field 1067 <v-text-field
1068 v-model="parentData.fatherName" 1068 v-model="parentData.fatherName"
1069 :rules="fatherNameRules" 1069 :rules="fatherNameRules"
1070 placeholder="Fill your father Name" 1070 placeholder="Fill your father Name"
1071 required 1071 required
1072 ></v-text-field> 1072 ></v-text-field>
1073 </v-flex> 1073 </v-flex>
1074 </v-layout> 1074 </v-layout>
1075 </v-flex> 1075 </v-flex>
1076 </v-layout> 1076 </v-layout>
1077 <v-layout wrap> 1077 <v-layout wrap>
1078 <v-flex xs12 sm6> 1078 <v-flex xs12 sm6>
1079 <v-layout> 1079 <v-layout>
1080 <v-flex xs4 class="pt-4 subheading"> 1080 <v-flex xs4 class="pt-4 subheading">
1081 <label class="right">Father Cell No:</label> 1081 <label class="right">Father Cell No:</label>
1082 </v-flex> 1082 </v-flex>
1083 <v-flex xs8 class="ml-3"> 1083 <v-flex xs8 class="ml-3">
1084 <v-text-field 1084 <v-text-field
1085 v-model="parentData.fatherCellNo" 1085 v-model="parentData.fatherCellNo"
1086 placeholder="fill your father Cell Number" 1086 placeholder="fill your father Cell Number"
1087 name="state" 1087 name="state"
1088 type="number" 1088 type="number"
1089 :rules="fatheCellNoRules" 1089 :rules="fatheCellNoRules"
1090 required 1090 required
1091 ></v-text-field> 1091 ></v-text-field>
1092 </v-flex> 1092 </v-flex>
1093 </v-layout> 1093 </v-layout>
1094 </v-flex> 1094 </v-flex>
1095 <v-flex xs12 sm6> 1095 <v-flex xs12 sm6>
1096 <v-layout> 1096 <v-layout>
1097 <v-flex xs4 class="pt-4 subheading"> 1097 <v-flex xs4 class="pt-4 subheading">
1098 <label class="right">Mother Name:</label> 1098 <label class="right">Mother Name:</label>
1099 </v-flex> 1099 </v-flex>
1100 <v-flex xs8 class="ml-3"> 1100 <v-flex xs8 class="ml-3">
1101 <v-text-field 1101 <v-text-field
1102 v-model="parentData.motherName" 1102 v-model="parentData.motherName"
1103 placeholder="fill your Mother Name" 1103 placeholder="fill your Mother Name"
1104 name="state" 1104 name="state"
1105 type="text" 1105 type="text"
1106 :rules="motherNameRules" 1106 :rules="motherNameRules"
1107 required 1107 required
1108 ></v-text-field> 1108 ></v-text-field>
1109 </v-flex> 1109 </v-flex>
1110 </v-layout> 1110 </v-layout>
1111 </v-flex> 1111 </v-flex>
1112 </v-layout> 1112 </v-layout>
1113 <v-layout wrap> 1113 <v-layout wrap>
1114 <v-flex xs12 sm6> 1114 <v-flex xs12 sm6>
1115 <v-layout> 1115 <v-layout>
1116 <v-flex xs4 class="pt-4 subheading"> 1116 <v-flex xs4 class="pt-4 subheading">
1117 <label class="right">Mother Cell No:</label> 1117 <label class="right">Mother Cell No:</label>
1118 </v-flex> 1118 </v-flex>
1119 <v-flex xs8 class="ml-3"> 1119 <v-flex xs8 class="ml-3">
1120 <v-text-field 1120 <v-text-field
1121 v-model="parentData.motherCellNo" 1121 v-model="parentData.motherCellNo"
1122 placeholder="fill your Mother Cell Number" 1122 placeholder="fill your Mother Cell Number"
1123 name="state" 1123 name="state"
1124 type="number" 1124 type="number"
1125 :rules="motherCellNoRules" 1125 :rules="motherCellNoRules"
1126 required 1126 required
1127 ></v-text-field> 1127 ></v-text-field>
1128 </v-flex> 1128 </v-flex>
1129 </v-layout> 1129 </v-layout>
1130 </v-flex> 1130 </v-flex>
1131 </v-layout> 1131 </v-layout>
1132 <v-flex sm12 class="hidden-xs-only"> 1132 <v-flex sm12 class="hidden-xs-only">
1133 <v-card-actions> 1133 <v-card-actions>
1134 <v-spacer></v-spacer> 1134 <v-spacer></v-spacer>
1135 <v-btn 1135 <v-btn
1136 @click="submitParentDetails" 1136 @click="submitParentDetails"
1137 round 1137 round
1138 dark 1138 dark
1139 :loading="loading" 1139 :loading="loading"
1140 v-show="showParent" 1140 v-show="showParent"
1141 >Add</v-btn> 1141 >Add</v-btn>
1142 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1142 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1143 </v-card-actions> 1143 </v-card-actions>
1144 </v-flex> 1144 </v-flex>
1145 <v-flex 1145 <v-flex
1146 xs6 1146 xs6
1147 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1147 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1148 > 1148 >
1149 <v-btn 1149 <v-btn
1150 @click="submitParentDetails" 1150 @click="submitParentDetails"
1151 round 1151 round
1152 dark 1152 dark
1153 :loading="loading" 1153 :loading="loading"
1154 v-show="showParent" 1154 v-show="showParent"
1155 >Add</v-btn> 1155 >Add</v-btn>
1156 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1156 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1157 </v-flex> 1157 </v-flex>
1158 </v-form> 1158 </v-form>
1159 </v-flex> 1159 </v-flex>
1160 </v-container> 1160 </v-container>
1161 </v-stepper-content> 1161 </v-stepper-content>
1162 <v-stepper-content step="2"> 1162 <v-stepper-content step="2">
1163 <!-- <v-container fluid> --> 1163 <!-- <v-container fluid> -->
1164 <v-snackbar 1164 <v-snackbar
1165 :timeout="timeout" 1165 :timeout="timeout"
1166 :top="y === 'top'" 1166 :top="y === 'top'"
1167 :right="x === 'right'" 1167 :right="x === 'right'"
1168 :vertical="mode === 'vertical'" 1168 :vertical="mode === 'vertical'"
1169 v-model="snackbar" 1169 v-model="snackbar"
1170 color="success" 1170 color="success"
1171 >{{ text }}</v-snackbar> 1171 >{{ text }}</v-snackbar>
1172 <v-flex xs12 sm12> 1172 <v-flex xs12 sm12>
1173 <v-form ref="form" v-model="valid" lazy-validation> 1173 <v-form ref="form" v-model="valid" lazy-validation>
1174 <!-- <v-container fluid> --> 1174 <!-- <v-container fluid> -->
1175 <v-layout> 1175 <v-layout>
1176 <v-flex 1176 <v-flex
1177 xs12 1177 xs12
1178 class="text-xs-center text-sm-center text-md-center text-lg-center" 1178 class="text-xs-center text-sm-center text-md-center text-lg-center"
1179 > 1179 >
1180 <v-avatar size="100px"> 1180 <v-avatar size="100px">
1181 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1181 <img src="/static/icon/user.png" v-if="!imageUrl" />
1182 </v-avatar> 1182 </v-avatar>
1183 <input 1183 <input
1184 type="file" 1184 type="file"
1185 style="display: none" 1185 style="display: none"
1186 ref="image" 1186 ref="image"
1187 accept="image/*" 1187 accept="image/*"
1188 @change="onFilePicked" 1188 @change="onFilePicked"
1189 /> 1189 />
1190 <img 1190 <img
1191 :src="imageData.imageUrl" 1191 :src="imageData.imageUrl"
1192 height="150" 1192 height="150"
1193 v-if="imageUrl" 1193 v-if="imageUrl"
1194 style="border-radius:50%; width:200px" 1194 style="border-radius:50%; width:200px"
1195 /> 1195 />
1196 </v-flex> 1196 </v-flex>
1197 </v-layout> 1197 </v-layout>
1198 <v-layout wrap> 1198 <v-layout wrap>
1199 <v-flex xs12 sm6> 1199 <v-flex xs12 sm6>
1200 <v-layout> 1200 <v-layout>
1201 <v-flex x4 sm4 class="pt-4 subheading"> 1201 <v-flex x4 sm4 class="pt-4 subheading">
1202 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1202 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1203 <label 1203 <label
1204 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1204 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1205 >Class:</label> 1205 >Class:</label>
1206 </v-flex> 1206 </v-flex>
1207 <v-flex xs8 sm8 class="ml-3"> 1207 <v-flex xs8 sm8 class="ml-3">
1208 <v-select 1208 <v-select
1209 :items="addclass" 1209 :items="addclass"
1210 label="Select Class" 1210 label="Select Class"
1211 v-model="addStudents.select" 1211 v-model="addStudents.select"
1212 item-text="classNum" 1212 item-text="classNum"
1213 item-value="_id" 1213 item-value="_id"
1214 name="Select Class" 1214 name="Select Class"
1215 :rules="classRules" 1215 :rules="classRules"
1216 @change="getSection(addStudents.select)" 1216 @change="getSection(addStudents.select)"
1217 required 1217 required
1218 ></v-select> 1218 ></v-select>
1219 </v-flex> 1219 </v-flex>
1220 </v-layout> 1220 </v-layout>
1221 </v-flex> 1221 </v-flex>
1222 <v-flex xs12 sm6> 1222 <v-flex xs12 sm6>
1223 <v-layout> 1223 <v-layout>
1224 <v-flex xs4 class="pt-4 subheading"> 1224 <v-flex xs4 class="pt-4 subheading">
1225 <label 1225 <label
1226 class="right hidden-xs-only hidden-sm-only" 1226 class="right hidden-xs-only hidden-sm-only"
1227 >Select Section:</label> 1227 >Select Section:</label>
1228 <label 1228 <label
1229 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1229 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1230 >Section:</label> 1230 >Section:</label>
1231 </v-flex> 1231 </v-flex>
1232 <v-flex xs8 class="ml-3"> 1232 <v-flex xs8 class="ml-3">
1233 <v-select 1233 <v-select
1234 :items="addSection" 1234 :items="addSection"
1235 label="Select Section" 1235 label="Select Section"
1236 v-model="addStudents.selectSection" 1236 v-model="addStudents.selectSection"
1237 item-text="name" 1237 item-text="name"
1238 item-value="_id" 1238 item-value="_id"
1239 name="Select Section" 1239 name="Select Section"
1240 :rules="sectionRules" 1240 :rules="sectionRules"
1241 required 1241 required
1242 ></v-select> 1242 ></v-select>
1243 </v-flex> 1243 </v-flex>
1244 </v-layout> 1244 </v-layout>
1245 </v-flex> 1245 </v-flex>
1246 </v-layout> 1246 </v-layout>
1247 <v-layout wrap> 1247 <v-layout wrap>
1248 <v-flex xs12 sm6> 1248 <v-flex xs12 sm6>
1249 <v-layout> 1249 <v-layout>
1250 <v-flex xs4 sm4 class="pt-4 subheading"> 1250 <v-flex xs4 sm4 class="pt-4 subheading">
1251 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1251 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1252 <label 1252 <label
1253 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1253 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1254 >Name:</label> 1254 >Name:</label>
1255 </v-flex> 1255 </v-flex>
1256 <v-flex xs8 sm8 class="ml-3"> 1256 <v-flex xs8 sm8 class="ml-3">
1257 <v-text-field 1257 <v-text-field
1258 v-model="addStudents.name" 1258 v-model="addStudents.name"
1259 placeholder="fill your full Name" 1259 placeholder="fill your full Name"
1260 name="name" 1260 name="name"
1261 type="text" 1261 type="text"
1262 :rules="nameRules" 1262 :rules="nameRules"
1263 required 1263 required
1264 ></v-text-field> 1264 ></v-text-field>
1265 </v-flex> 1265 </v-flex>
1266 </v-layout> 1266 </v-layout>
1267 </v-flex> 1267 </v-flex>
1268 <v-flex xs12 sm6> 1268 <v-flex xs12 sm6>
1269 <v-layout> 1269 <v-layout>
1270 <v-flex xs4 sm4 class="pt-4 subheading"> 1270 <v-flex xs4 sm4 class="pt-4 subheading">
1271 <label class="right">Email ID:</label> 1271 <label class="right">Email ID:</label>
1272 </v-flex> 1272 </v-flex>
1273 <v-flex xs8 sm8 class="ml-3"> 1273 <v-flex xs8 sm8 class="ml-3">
1274 <v-text-field 1274 <v-text-field
1275 placeholder="fill your email" 1275 placeholder="fill your email"
1276 :rules="emailRules" 1276 :rules="emailRules"
1277 v-model="addStudents.email" 1277 v-model="addStudents.email"
1278 type="text" 1278 type="text"
1279 name="email" 1279 name="email"
1280 required 1280 required
1281 ></v-text-field> 1281 ></v-text-field>
1282 </v-flex> 1282 </v-flex>
1283 </v-layout> 1283 </v-layout>
1284 </v-flex> 1284 </v-flex>
1285 </v-layout> 1285 </v-layout>
1286 <v-layout wrap> 1286 <v-layout wrap>
1287 <v-flex xs12 sm6> 1287 <v-flex xs12 sm6>
1288 <v-layout> 1288 <v-layout>
1289 <v-flex xs4 sm4 class="pt-4 subheading"> 1289 <v-flex xs4 sm4 class="pt-4 subheading">
1290 <label 1290 <label
1291 class="right hidden-sm-only hidden-xs-only" 1291 class="right hidden-sm-only hidden-xs-only"
1292 >Date of Birth:</label> 1292 >Date of Birth:</label>
1293 <label 1293 <label
1294 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1294 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1295 >D.O.B:</label> 1295 >D.O.B:</label>
1296 </v-flex> 1296 </v-flex>
1297 <v-flex xs8 sm8 class="ml-3"> 1297 <v-flex xs8 sm8 class="ml-3">
1298 <v-menu 1298 <v-menu
1299 ref="menu" 1299 ref="menu"
1300 :close-on-content-click="false" 1300 :close-on-content-click="false"
1301 v-model="menu" 1301 v-model="menu"
1302 :nudge-right="40" 1302 :nudge-right="40"
1303 lazy 1303 lazy
1304 transition="scale-transition" 1304 transition="scale-transition"
1305 offset-y 1305 offset-y
1306 full-width 1306 full-width
1307 min-width="290px" 1307 min-width="290px"
1308 > 1308 >
1309 <v-text-field 1309 <v-text-field
1310 slot="activator" 1310 slot="activator"
1311 :rules="dateRules" 1311 :rules="dateRules"
1312 v-model="addStudents.date" 1312 v-model="addStudents.date"
1313 placeholder="Select date" 1313 placeholder="Select date"
1314 ></v-text-field> 1314 ></v-text-field>
1315 <v-date-picker 1315 <v-date-picker
1316 ref="picker" 1316 ref="picker"
1317 v-model="addStudents.date" 1317 v-model="addStudents.date"
1318 :max="new Date().toISOString().substr(0, 10)" 1318 :max="new Date().toISOString().substr(0, 10)"
1319 min="1950-01-01" 1319 min="1950-01-01"
1320 @input="menu = false" 1320 @input="menu = false"
1321 ></v-date-picker> 1321 ></v-date-picker>
1322 </v-menu> 1322 </v-menu>
1323 </v-flex> 1323 </v-flex>
1324 </v-layout> 1324 </v-layout>
1325 </v-flex> 1325 </v-flex>
1326 <v-flex xs12 sm6> 1326 <v-flex xs12 sm6>
1327 <v-layout> 1327 <v-layout>
1328 <v-flex xs4 class="pt-4 subheading"> 1328 <v-flex xs4 class="pt-4 subheading">
1329 <label class="right">City:</label> 1329 <label class="right">City:</label>
1330 </v-flex> 1330 </v-flex>
1331 <v-flex xs8 class="ml-3"> 1331 <v-flex xs8 class="ml-3">
1332 <v-text-field 1332 <v-text-field
1333 v-model="addStudents.city" 1333 v-model="addStudents.city"
1334 placeholder="fill your City Name" 1334 placeholder="fill your City Name"
1335 name="City" 1335 name="City"
1336 type="text" 1336 type="text"
1337 :rules="cityRules" 1337 :rules="cityRules"
1338 required 1338 required
1339 ></v-text-field> 1339 ></v-text-field>
1340 </v-flex> 1340 </v-flex>
1341 </v-layout> 1341 </v-layout>
1342 </v-flex> 1342 </v-flex>
1343 </v-layout> 1343 </v-layout>
1344 <v-layout wrap> 1344 <v-layout wrap>
1345 <v-flex xs12 sm6> 1345 <v-flex xs12 sm6>
1346 <v-layout> 1346 <v-layout>
1347 <v-flex xs4 class="pt-4 subheading"> 1347 <v-flex xs4 class="pt-4 subheading">
1348 <label class="right">State:</label> 1348 <label class="right">State:</label>
1349 </v-flex> 1349 </v-flex>
1350 <v-flex xs8 class="ml-3"> 1350 <v-flex xs8 class="ml-3">
1351 <v-text-field 1351 <v-text-field
1352 v-model="addStudents.state" 1352 v-model="addStudents.state"
1353 placeholder="fill your State Name" 1353 placeholder="fill your State Name"
1354 name="state" 1354 name="state"
1355 type="text" 1355 type="text"
1356 :rules="stateRules" 1356 :rules="stateRules"
1357 required 1357 required
1358 ></v-text-field> 1358 ></v-text-field>
1359 </v-flex> 1359 </v-flex>
1360 </v-layout> 1360 </v-layout>
1361 </v-flex> 1361 </v-flex>
1362 <v-flex xs12 sm6> 1362 <v-flex xs12 sm6>
1363 <v-layout> 1363 <v-layout>
1364 <v-flex xs4 class="pt-4 subheading"> 1364 <v-flex xs4 class="pt-4 subheading">
1365 <label class="right">Pincode:</label> 1365 <label class="right">Pincode:</label>
1366 </v-flex> 1366 </v-flex>
1367 <v-flex xs8 class="ml-3"> 1367 <v-flex xs8 class="ml-3">
1368 <v-text-field 1368 <v-text-field
1369 v-model="addStudents.pincode" 1369 v-model="addStudents.pincode"
1370 placeholder="fill your pincode" 1370 placeholder="fill your pincode"
1371 name="pincode" 1371 name="pincode"
1372 type="number" 1372 type="number"
1373 :rules="pincode" 1373 :rules="pincode"
1374 required 1374 required
1375 ></v-text-field> 1375 ></v-text-field>
1376 </v-flex> 1376 </v-flex>
1377 </v-layout> 1377 </v-layout>
1378 </v-flex> 1378 </v-flex>
1379 </v-layout> 1379 </v-layout>
1380 <v-layout wrap> 1380 <v-layout wrap>
1381 <v-flex xs12 sm6> 1381 <v-flex xs12 sm6>
1382 <v-layout> 1382 <v-layout>
1383 <v-flex xs4 class="pt-4 subheading"> 1383 <v-flex xs4 class="pt-4 subheading">
1384 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1384 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1385 <label 1385 <label
1386 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1386 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1387 >Mobile:</label> 1387 >Mobile:</label>
1388 </v-flex> 1388 </v-flex>
1389 <v-flex xs8 class="ml-3"> 1389 <v-flex xs8 class="ml-3">
1390 <v-text-field 1390 <v-text-field
1391 v-model="addStudents.mobile" 1391 v-model="addStudents.mobile"
1392 placeholder="fill your MobileNo" 1392 placeholder="fill your MobileNo"
1393 name="mobileNo" 1393 name="mobileNo"
1394 type="number" 1394 type="number"
1395 :rules="mobileNoRules" 1395 :rules="mobileNoRules"
1396 required 1396 required
1397 ></v-text-field> 1397 ></v-text-field>
1398 </v-flex> 1398 </v-flex>
1399 </v-layout> 1399 </v-layout>
1400 </v-flex> 1400 </v-flex>
1401 <v-flex xs12 sm6> 1401 <v-flex xs12 sm6>
1402 <v-layout> 1402 <v-layout>
1403 <v-flex xs4 class="pt-4 subheading"> 1403 <v-flex xs4 class="pt-4 subheading">
1404 <label 1404 <label
1405 class="right hidden-xs-only hidden-sm-only" 1405 class="right hidden-xs-only hidden-sm-only"
1406 >Select Country:</label> 1406 >Select Country:</label>
1407 <label 1407 <label
1408 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1408 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1409 >Country:</label> 1409 >Country:</label>
1410 </v-flex> 1410 </v-flex>
1411 <v-flex xs8 class="ml-3"> 1411 <v-flex xs8 class="ml-3">
1412 <v-autocomplete 1412 <v-autocomplete
1413 v-model="addStudents.country" 1413 v-model="addStudents.country"
1414 :rules="country" 1414 :rules="country"
1415 :items="countries" 1415 :items="countries"
1416 placeholder="Select Country Name" 1416 placeholder="Select Country Name"
1417 required 1417 required
1418 ></v-autocomplete> 1418 ></v-autocomplete>
1419 </v-flex> 1419 </v-flex>
1420 </v-layout> 1420 </v-layout>
1421 </v-flex> 1421 </v-flex>
1422 </v-layout> 1422 </v-layout>
1423 <v-layout wrap> 1423 <v-layout wrap>
1424 <v-flex xs12 sm6> 1424 <v-flex xs12 sm6>
1425 <v-layout> 1425 <v-layout>
1426 <v-flex xs4 class="pt-4 subheading"> 1426 <v-flex xs4 class="pt-4 subheading">
1427 <label class="right">Gender:</label> 1427 <label class="right">Gender:</label>
1428 </v-flex> 1428 </v-flex>
1429 <v-flex xs8 class="ml-3"> 1429 <v-flex xs8 class="ml-3">
1430 <v-select 1430 <v-select
1431 :items="gender" 1431 :items="gender"
1432 v-model="addStudents.gender" 1432 v-model="addStudents.gender"
1433 :rules="genderRules" 1433 :rules="genderRules"
1434 label="Select Gender" 1434 label="Select Gender"
1435 required 1435 required
1436 ></v-select> 1436 ></v-select>
1437 </v-flex> 1437 </v-flex>
1438 </v-layout> 1438 </v-layout>
1439 </v-flex> 1439 </v-flex>
1440 <v-flex xs12 sm6> 1440 <v-flex xs12 sm6>
1441 <v-layout> 1441 <v-layout>
1442 <v-flex xs4 class="pt-4 subheading"> 1442 <v-flex xs4 class="pt-4 subheading">
1443 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1443 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1444 <label 1444 <label
1445 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1445 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1446 >Blood:</label> 1446 >Blood:</label>
1447 </v-flex> 1447 </v-flex>
1448 <v-flex xs8 class="ml-3"> 1448 <v-flex xs8 class="ml-3">
1449 <v-text-field 1449 <v-text-field
1450 v-model="addStudents.bloodGroup" 1450 v-model="addStudents.bloodGroup"
1451 placeholder="Fill your Blood Group" 1451 placeholder="Fill your Blood Group"
1452 required 1452 required
1453 ></v-text-field> 1453 ></v-text-field>
1454 </v-flex> 1454 </v-flex>
1455 </v-layout> 1455 </v-layout>
1456 </v-flex> 1456 </v-flex>
1457 </v-layout> 1457 </v-layout>
1458 <v-layout wrap> 1458 <v-layout wrap>
1459 <v-flex xs12 sm6> 1459 <v-flex xs12 sm6>
1460 <v-layout> 1460 <v-layout>
1461 <v-flex xs4 class="pt-4 subheading"> 1461 <v-flex xs4 class="pt-4 subheading">
1462 <label class="right">Allergies:</label> 1462 <label class="right">Allergies:</label>
1463 </v-flex> 1463 </v-flex>
1464 <v-flex xs8 class="ml-3"> 1464 <v-flex xs8 class="ml-3">
1465 <v-text-field 1465 <v-text-field
1466 v-model="addStudents.allergies" 1466 v-model="addStudents.allergies"
1467 placeholder="Fill your Allergies" 1467 placeholder="Fill your Allergies"
1468 required 1468 required
1469 ></v-text-field> 1469 ></v-text-field>
1470 </v-flex> 1470 </v-flex>
1471 </v-layout> 1471 </v-layout>
1472 </v-flex> 1472 </v-flex>
1473 <v-flex xs12 sm6> 1473 <v-flex xs12 sm6>
1474 <v-layout> 1474 <v-layout>
1475 <v-flex xs4 class="pt-4 subheading"> 1475 <v-flex xs4 class="pt-4 subheading">
1476 <label 1476 <label
1477 class="right hidden-xs-only hidden-sm-only" 1477 class="right hidden-xs-only hidden-sm-only"
1478 >Medical Notes:</label> 1478 >Medical Notes:</label>
1479 <label 1479 <label
1480 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1480 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1481 >Medical:</label> 1481 >Medical:</label>
1482 </v-flex> 1482 </v-flex>
1483 <v-flex xs8 class="ml-3"> 1483 <v-flex xs8 class="ml-3">
1484 <v-text-field 1484 <v-text-field
1485 v-model="addStudents.medicalNotes" 1485 v-model="addStudents.medicalNotes"
1486 placeholder="Fill your Medical Notes" 1486 placeholder="Fill your Medical Notes"
1487 required 1487 required
1488 ></v-text-field> 1488 ></v-text-field>
1489 </v-flex> 1489 </v-flex>
1490 </v-layout> 1490 </v-layout>
1491 </v-flex> 1491 </v-flex>
1492 </v-layout> 1492 </v-layout>
1493 <v-layout wrap> 1493 <v-layout wrap>
1494 <v-flex xs12 sm6> 1494 <v-flex xs12 sm6>
1495 <v-layout> 1495 <v-layout>
1496 <v-flex xs4 class="pt-4 subheading"> 1496 <v-flex xs4 class="pt-4 subheading">
1497 <label class="right">Height:</label> 1497 <label class="right">Height:</label>
1498 </v-flex> 1498 </v-flex>
1499 <v-flex xs8 class="ml-3"> 1499 <v-flex xs8 class="ml-3">
1500 <v-text-field 1500 <v-text-field
1501 v-model="addStudents.height" 1501 v-model="addStudents.height"
1502 placeholder="Fill your Height" 1502 placeholder="Fill your Height"
1503 required 1503 required
1504 ></v-text-field> 1504 ></v-text-field>
1505 </v-flex> 1505 </v-flex>
1506 </v-layout> 1506 </v-layout>
1507 </v-flex> 1507 </v-flex>
1508 <v-flex xs12 sm6> 1508 <v-flex xs12 sm6>
1509 <v-layout> 1509 <v-layout>
1510 <v-flex xs4 class="pt-4 subheading"> 1510 <v-flex xs4 class="pt-4 subheading">
1511 <label class="right">Weight:</label> 1511 <label class="right">Weight:</label>
1512 </v-flex> 1512 </v-flex>
1513 <v-flex xs8 class="ml-3"> 1513 <v-flex xs8 class="ml-3">
1514 <v-text-field 1514 <v-text-field
1515 v-model="addStudents.weight" 1515 v-model="addStudents.weight"
1516 placeholder="Fill your Weight" 1516 placeholder="Fill your Weight"
1517 required 1517 required
1518 ></v-text-field> 1518 ></v-text-field>
1519 </v-flex> 1519 </v-flex>
1520 </v-layout> 1520 </v-layout>
1521 </v-flex> 1521 </v-flex>
1522 </v-layout> 1522 </v-layout>
1523 <v-layout wrap> 1523 <v-layout wrap>
1524 <v-flex xs12 sm6> 1524 <v-flex xs12 sm6>
1525 <v-layout> 1525 <v-layout>
1526 <v-flex xs4 class="pt-4 subheading"> 1526 <v-flex xs4 class="pt-4 subheading">
1527 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1527 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1528 <label 1528 <label
1529 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1529 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1530 >Uplaod :</label> 1530 >Uplaod :</label>
1531 </v-flex> 1531 </v-flex>
1532 <v-flex xs8 class="ml-3"> 1532 <v-flex xs8 class="ml-3">
1533 <v-text-field 1533 <v-text-field
1534 label="Select Image" 1534 label="Select Image"
1535 @click="pickFile" 1535 @click="pickFile"
1536 v-model="imageName" 1536 v-model="imageName"
1537 append-icon="attach_file" 1537 append-icon="attach_file"
1538 ></v-text-field> 1538 ></v-text-field>
1539 </v-flex> 1539 </v-flex>
1540 </v-layout> 1540 </v-layout>
1541 </v-flex> 1541 </v-flex>
1542 <v-flex xs12 sm6> 1542 <v-flex xs12 sm6>
1543 <v-layout> 1543 <v-layout>
1544 <v-flex xs4 class="pt-4 subheading"> 1544 <v-flex xs4 class="pt-4 subheading">
1545 <label 1545 <label
1546 class="right hidden-xs-only hidden-sm-only" 1546 class="right hidden-xs-only hidden-sm-only"
1547 >Academic Year:</label> 1547 >Academic Year:</label>
1548 <label 1548 <label
1549 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1549 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1550 >Year:</label> 1550 >Year:</label>
1551 </v-flex> 1551 </v-flex>
1552 <v-flex xs8 class="ml-3"> 1552 <v-flex xs8 class="ml-3">
1553 <v-text-field 1553 <v-text-field
1554 v-model="addStudents.establishmentYear" 1554 v-model="addStudents.establishmentYear"
1555 placeholder="fill your Academic Year" 1555 placeholder="fill your Academic Year"
1556 name="state" 1556 name="state"
1557 type="number" 1557 type="number"
1558 :rules="establishmentYearRules" 1558 :rules="establishmentYearRules"
1559 required 1559 required
1560 ></v-text-field> 1560 ></v-text-field>
1561 </v-flex> 1561 </v-flex>
1562 </v-layout> 1562 </v-layout>
1563 </v-flex> 1563 </v-flex>
1564 </v-layout> 1564 </v-layout>
1565 <v-layout wrap> 1565 <v-layout wrap>
1566 <v-flex xs12 sm6> 1566 <v-flex xs12 sm6>
1567 <v-layout> 1567 <v-layout>
1568 <v-flex xs4 class="pt-4 subheading"> 1568 <v-flex xs4 class="pt-4 subheading">
1569 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1569 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1570 <label 1570 <label
1571 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1571 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1572 >Roll No:</label> 1572 >Roll No:</label>
1573 </v-flex> 1573 </v-flex>
1574 <v-flex xs8 class="ml-3"> 1574 <v-flex xs8 class="ml-3">
1575 <v-text-field 1575 <v-text-field
1576 v-model="addStudents.rollNo" 1576 v-model="addStudents.rollNo"
1577 placeholder="Fill your Roll Number" 1577 placeholder="Fill your Roll Number"
1578 required 1578 required
1579 ></v-text-field> 1579 ></v-text-field>
1580 </v-flex> 1580 </v-flex>
1581 </v-layout> 1581 </v-layout>
1582 </v-flex> 1582 </v-flex>
1583 <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only"> 1583 <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">
1584 <v-layout> 1584 <v-layout>
1585 <v-flex xs4 sm4 class="pt-4 subheading"> 1585 <v-flex xs4 sm4 class="pt-4 subheading">
1586 <label class="right pr-4">Present Address:</label> 1586 <label class="right pr-4">Present Address:</label>
1587 </v-flex> 1587 </v-flex>
1588 <v-flex xs8 sm8 class="ml-3"> 1588 <v-flex xs8 sm8 class="ml-3">
1589 <v-text-field 1589 <v-text-field
1590 name="input-4-3" 1590 name="input-4-3"
1591 v-model="addStudents.presentAddress" 1591 v-model="addStudents.presentAddress"
1592 :rules="presentAddress" 1592 :rules="presentAddress"
1593 placeholder="fill Your present Address" 1593 placeholder="fill Your present Address"
1594 required 1594 required
1595 ></v-text-field> 1595 ></v-text-field>
1596 </v-flex> 1596 </v-flex>
1597 </v-layout> 1597 </v-layout>
1598 </v-flex> 1598 </v-flex>
1599 </v-layout> 1599 </v-layout>
1600 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 1600 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
1601 <v-flex xs12 sm6> 1601 <v-flex xs12 sm6>
1602 <v-layout> 1602 <v-layout>
1603 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1603 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1604 <label class="right">Permanent Address:</label> 1604 <label class="right">Permanent Address:</label>
1605 </v-flex> 1605 </v-flex>
1606 <v-flex xs12 sm8 class="ml-3"> 1606 <v-flex xs12 sm8 class="ml-3">
1607 <v-text-field 1607 <v-text-field
1608 name="input-4-3" 1608 name="input-4-3"
1609 v-model="addStudents.permanentAddress" 1609 v-model="addStudents.permanentAddress"
1610 :rules="permanentAddress" 1610 :rules="permanentAddress"
1611 placeholder="fill Your Permanent Address" 1611 placeholder="fill Your Permanent Address"
1612 required 1612 required
1613 ></v-text-field> 1613 ></v-text-field>
1614 </v-flex> 1614 </v-flex>
1615 </v-layout> 1615 </v-layout>
1616 </v-flex> 1616 </v-flex>
1617 </v-layout> 1617 </v-layout>
1618 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1618 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1619 <v-flex xs12 sm12> 1619 <v-flex xs12 sm12>
1620 <v-layout> 1620 <v-layout>
1621 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1621 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1622 <label class>Present Address :</label> 1622 <label class>Present Address :</label>
1623 </v-flex> 1623 </v-flex>
1624 </v-layout> 1624 </v-layout>
1625 <v-layout> 1625 <v-layout>
1626 <v-flex xs12 sm12> 1626 <v-flex xs12 sm12>
1627 <v-textarea 1627 <v-textarea
1628 name="input-4-3" 1628 name="input-4-3"
1629 v-model="addStudents.presentAddress" 1629 v-model="addStudents.presentAddress"
1630 :rules="presentAddress" 1630 :rules="presentAddress"
1631 placeholder="fill Your present Address" 1631 placeholder="fill Your present Address"
1632 required 1632 required
1633 ></v-textarea> 1633 ></v-textarea>
1634 </v-flex> 1634 </v-flex>
1635 </v-layout> 1635 </v-layout>
1636 </v-flex> 1636 </v-flex>
1637 <v-flex xs12 sm12> 1637 <v-flex xs12 sm12>
1638 <v-layout> 1638 <v-layout>
1639 <v-flex 1639 <v-flex
1640 xs12 1640 xs12
1641 sm12 1641 sm12
1642 class="pt-4 pr-4 subheading text-xs-center addressForm" 1642 class="pt-4 pr-4 subheading text-xs-center addressForm"
1643 > 1643 >
1644 <label>Permanent addr:</label> 1644 <label>Permanent addr:</label>
1645 </v-flex> 1645 </v-flex>
1646 </v-layout> 1646 </v-layout>
1647 <v-layout> 1647 <v-layout>
1648 <v-flex xs12 sm12> 1648 <v-flex xs12 sm12>
1649 <v-textarea 1649 <v-textarea
1650 name="input-4-3" 1650 name="input-4-3"
1651 v-model="addStudents.permanentAddress" 1651 v-model="addStudents.permanentAddress"
1652 :rules="permanentAddress" 1652 :rules="permanentAddress"
1653 placeholder="fill Your Permanent Address" 1653 placeholder="fill Your Permanent Address"
1654 required 1654 required
1655 ></v-textarea> 1655 ></v-textarea>
1656 </v-flex> 1656 </v-flex>
1657 </v-layout> 1657 </v-layout>
1658 </v-flex> 1658 </v-flex>
1659 </v-layout> 1659 </v-layout>
1660 <v-layout> 1660 <v-layout>
1661 <v-flex xs12 sm12> 1661 <v-flex xs12 sm12>
1662 <v-layout> 1662 <v-layout>
1663 <v-flex xs6> 1663 <v-flex xs6>
1664 <v-btn round dark @click="e2 = 1">Back</v-btn> 1664 <v-btn round dark @click="e2 = 1">Back</v-btn>
1665 </v-flex> 1665 </v-flex>
1666 <v-flex xs6> 1666 <v-flex xs6>
1667 <v-btn 1667 <v-btn
1668 @click="submit" 1668 @click="submit"
1669 round 1669 round
1670 dark 1670 dark
1671 :loading="loading" 1671 :loading="loading"
1672 class="right" 1672 class="right"
1673 >Add</v-btn> 1673 >Add</v-btn>
1674 </v-flex> 1674 </v-flex>
1675 </v-layout> 1675 </v-layout>
1676 </v-flex> 1676 </v-flex>
1677 </v-layout> 1677 </v-layout>
1678 </v-form> 1678 </v-form>
1679 </v-flex> 1679 </v-flex>
1680 </v-stepper-content> 1680 </v-stepper-content>
1681 </v-stepper-items> 1681 </v-stepper-items>
1682 </v-stepper> 1682 </v-stepper>
1683 </v-app> 1683 </v-app>
1684 </div> 1684 </div>
1685 </v-flex> 1685 </v-flex>
1686 </v-layout> 1686 </v-layout>
1687 </v-container> 1687 </v-container>
1688 </v-tab-item> 1688 </v-tab-item>
1689 </v-tabs> 1689 </v-tabs>
1690 <div class="loader" v-if="showLoader"> 1690 <div class="loader" v-if="showLoader">
1691 <v-progress-circular indeterminate color="white"></v-progress-circular> 1691 <v-progress-circular indeterminate color="white"></v-progress-circular>
1692 </div> 1692 </div>
1693 </div> 1693 </div>
1694 </template> 1694 </template>
1695 1695
1696 <script> 1696 <script>
1697 import http from "@/Services/http.js"; 1697 import http from "@/Services/http.js";
1698 import moment from "moment"; 1698 import moment from "moment";
1699 import countryList from "@/script/country.js"; 1699 import countryList from "@/script/country.js";
1700 1700
1701 export default { 1701 export default {
1702 data: () => ({ 1702 data: () => ({
1703 e2: 0, 1703 e2: 0,
1704 showParent: true, 1704 showParent: true,
1705 showNext: false, 1705 showNext: false,
1706 snackbar: false, 1706 snackbar: false,
1707 y: "top", 1707 y: "top",
1708 x: "right", 1708 x: "right",
1709 mode: "", 1709 mode: "",
1710 timeout: 3000, 1710 timeout: 3000,
1711 text: "", 1711 text: "",
1712 showLoader: false, 1712 showLoader: false,
1713 loading: false, 1713 loading: false,
1714 date: null, 1714 date: null,
1715 search: "", 1715 search: "",
1716 menu: false, 1716 menu: false,
1717 menu1: false, 1717 menu1: false,
1718 dialog: false, 1718 dialog: false,
1719 dialog1: false, 1719 dialog1: false,
1720 valid: true, 1720 valid: true,
1721 isActive: true, 1721 isActive: true,
1722 newActive: false, 1722 newActive: false,
1723 addclass: [], 1723 addclass: [],
1724 addSection: [], 1724 addSection: [],
1725 gender: ["Male", "Female"], 1725 gender: ["Male", "Female"],
1726 pagination: { 1726 pagination: {
1727 rowsPerPage: 15 1727 rowsPerPage: 15
1728 }, 1728 },
1729 imageData: {}, 1729 imageData: {},
1730 imageName: "", 1730 imageName: "",
1731 imageUrl: "", 1731 imageUrl: "",
1732 imageFile: "", 1732 imageFile: "",
1733 nameRules: [v => !!v || " Full Name is required"], 1733 nameRules: [v => !!v || " Full Name is required"],
1734 dateRules: [v => !!v || " DOB is required"], 1734 dateRules: [v => !!v || " DOB is required"],
1735 cityRules: [v => !!v || " City Name is required"], 1735 cityRules: [v => !!v || " City Name is required"],
1736 pincode: [v => !!v || " Pincode is required"], 1736 pincode: [v => !!v || " Pincode is required"],
1737 country: [v => !!v || " Country Name is required"], 1737 country: [v => !!v || " Country Name is required"],
1738 permanentAddress: [v => !!v || " Permanent Address is required"], 1738 permanentAddress: [v => !!v || " Permanent Address is required"],
1739 presentAddress: [v => !!v || " Present Address is required"], 1739 presentAddress: [v => !!v || " Present Address is required"],
1740 mobileNoRules: [v => !!v || "Mobile Number is required"], 1740 mobileNoRules: [v => !!v || "Mobile Number is required"],
1741 stateRules: [v => !!v || "State Name is required"], 1741 stateRules: [v => !!v || "State Name is required"],
1742 classRules: [v => !!v || " Class Name is required"], 1742 classRules: [v => !!v || " Class Name is required"],
1743 sectionRules: [v => !!v || " Section Name is required"], 1743 sectionRules: [v => !!v || " Section Name is required"],
1744 genderRules: [v => !!v || " Select Gender is required"], 1744 genderRules: [v => !!v || " Select Gender is required"],
1745 fatherNameRules: [v => !!v || " Father Name is required"], 1745 fatherNameRules: [v => !!v || " Father Name is required"],
1746 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1746 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1747 motherNameRules: [v => !!v || " Mother Name is required"], 1747 motherNameRules: [v => !!v || " Mother Name is required"],
1748 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1748 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1749 establishmentYearRules: [v => !!v || " Academic Year is required"], 1749 establishmentYearRules: [v => !!v || " Academic Year is required"],
1750 errorMessages: "", 1750 errorMessages: "",
1751 emailRules: [ 1751 emailRules: [
1752 v => !!v || "E-mail is required", 1752 v => !!v || "E-mail is required",
1753 v => 1753 v =>
1754 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1754 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1755 "E-mail must be valid" 1755 "E-mail must be valid"
1756 ], 1756 ],
1757 countries: [], 1757 countries: [],
1758 headers: [ 1758 headers: [
1759 { 1759 {
1760 text: "Roll No.", 1760 text: "Roll No.",
1761 align: "center", 1761 align: "center",
1762 sortable: false, 1762 sortable: false,
1763 value: "rollNo" 1763 value: "rollNo"
1764 }, 1764 },
1765 { 1765 {
1766 text: "Profile Pic", 1766 text: "Profile Pic",
1767 value: "profilePicUrl", 1767 value: "profilePicUrl",
1768 sortable: false, 1768 sortable: false,
1769 align: "center" 1769 align: "center"
1770 }, 1770 },
1771 { text: "Name", value: "name", sortable: false, align: "center" }, 1771 { text: "Name", value: "name", sortable: false, align: "center" },
1772 { text: "Email", value: "email", sortable: false, align: "center" }, 1772 { text: "Email", value: "email", sortable: false, align: "center" },
1773 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1773 { text: "Dob", value: "dob", sortable: false, align: "center" },
1774 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1774 { text: "Gender", value: "gender", sortable: false, align: "center" },
1775 { 1775 {
1776 text: "Father Name", 1776 text: "Father Name",
1777 value: "fatherName", 1777 value: "fatherName",
1778 sortable: false, 1778 sortable: false,
1779 align: "center" 1779 align: "center"
1780 }, 1780 },
1781 { 1781 {
1782 text: "Mother Name", 1782 text: "Mother Name",
1783 value: "motherName", 1783 value: "motherName",
1784 sortable: false, 1784 sortable: false,
1785 align: "center" 1785 align: "center"
1786 }, 1786 },
1787 { 1787 {
1788 text: "Academic Year", 1788 text: "Academic Year",
1789 value: "establishmentYear", 1789 value: "establishmentYear",
1790 sortable: false, 1790 sortable: false,
1791 align: "center" 1791 align: "center"
1792 }, 1792 },
1793 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1793 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1794 { text: "Action", value: "", sortable: false, align: "center" } 1794 { text: "Action", value: "", sortable: false, align: "center" }
1795 ], 1795 ],
1796 desserts: [], 1796 desserts: [],
1797 parentId: "", 1797 parentId: "",
1798 editedIndex: -1, 1798 editedIndex: -1,
1799 parentData: {}, 1799 parentData: {},
1800 addStudents: { 1800 addStudents: {
1801 role: "STUDENT", 1801 role: "STUDENT",
1802 name: "", 1802 name: "",
1803 email: "", 1803 email: "",
1804 date: "", 1804 date: "",
1805 city: "", 1805 city: "",
1806 pincode: "", 1806 pincode: "",
1807 country: "", 1807 country: "",
1808 permanentAddress: "", 1808 permanentAddress: "",
1809 presentAddress: "", 1809 presentAddress: "",
1810 mobile: "", 1810 mobile: "",
1811 state: "", 1811 state: "",
1812 gender: "", 1812 gender: "",
1813 select: "", 1813 select: "",
1814 selectSection: "", 1814 selectSection: "",
1815 bloodGroup: "", 1815 bloodGroup: "",
1816 allergies: "", 1816 allergies: "",
1817 medicalNotes: "", 1817 medicalNotes: "",
1818 height: "", 1818 height: "",
1819 weight: "", 1819 weight: "",
1820 rollNo: "", 1820 rollNo: "",
1821 establishmentYear: new Date().getFullYear() 1821 establishmentYear: new Date().getFullYear()
1822 }, 1822 },
1823 selectStudents: { 1823 selectStudents: {
1824 select: "", 1824 select: "",
1825 selectSection: "" 1825 selectSection: ""
1826 }, 1826 },
1827 editedItem: { 1827 editedItem: {
1828 role: "STUDENT", 1828 role: "STUDENT",
1829 name: "", 1829 name: "",
1830 email: "", 1830 email: "",
1831 dob: "", 1831 dob: "",
1832 city: "", 1832 city: "",
1833 pincode: "", 1833 pincode: "",
1834 country: "", 1834 country: "",
1835 permanentAddress: "", 1835 permanentAddress: "",
1836 presentAddress: "", 1836 presentAddress: "",
1837 mobile: "", 1837 mobile: "",
1838 state: "", 1838 state: "",
1839 gender: "", 1839 gender: "",
1840 select: "", 1840 select: "",
1841 selectSection: "", 1841 selectSection: "",
1842 bloodGroup: "", 1842 bloodGroup: "",
1843 allergies: "", 1843 allergies: "",
1844 medicalNotes: "", 1844 medicalNotes: "",
1845 height: "", 1845 height: "",
1846 weight: "", 1846 weight: "",
1847 rollNo: "", 1847 rollNo: "",
1848 establishmentYear: new Date().getFullYear() 1848 establishmentYear: new Date().getFullYear()
1849 } 1849 }
1850 }), 1850 }),
1851 watch: { 1851 watch: {
1852 menu(val) { 1852 menu(val) {
1853 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1853 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1854 }, 1854 },
1855 menu1(val) { 1855 menu1(val) {
1856 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1856 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1857 } 1857 }
1858 }, 1858 },
1859 methods: { 1859 methods: {
1860 findStudents() { 1860 findStudents() {
1861 this.showLoader = true; 1861 this.showLoader = true;
1862 http() 1862 http()
1863 .get("/getStudentWithClass", { 1863 .get("/getStudentWithClass", {
1864 params: { 1864 params: {
1865 classId: this.selectStudents.select, 1865 classId: this.selectStudents.select,
1866 sectionId: this.selectStudents.selectSection 1866 sectionId: this.selectStudents.selectSection
1867 } 1867 }
1868 }) 1868 })
1869 .then(response => { 1869 .then(response => {
1870 this.desserts = response.data.data; 1870 this.desserts = response.data.data;
1871 this.showLoader = false; 1871 this.showLoader = false;
1872 console.log("getSectionsList=====>", this.addSection); 1872 console.log("getSectionsList=====>", this.addSection);
1873 }) 1873 })
1874 .catch(err => { 1874 .catch(err => {
1875 console.log("err====>", err); 1875 console.log("err====>", err);
1876 this.showLoader = false; 1876 this.showLoader = false;
1877 }); 1877 });
1878 }, 1878 },
1879 getSections(_id) { 1879 getSections(_id) {
1880 var token = this.$store.state.token; 1880 var token = this.$store.state.token;
1881 this.showLoader = true; 1881 this.showLoader = true;
1882 http() 1882 http()
1883 .get( 1883 .get(
1884 "/getSectionsList", 1884 "/getSectionsList",
1885 { params: { classId: _id } }, 1885 { params: { classId: _id } },
1886 { 1886 {
1887 headers: { Authorization: "Bearer " + token } 1887 headers: { Authorization: "Bearer " + token }
1888 } 1888 }
1889 ) 1889 )
1890 .then(response => { 1890 .then(response => {
1891 this.addSection = response.data.data; 1891 this.addSection = response.data.data;
1892 this.showLoader = false; 1892 this.showLoader = false;
1893 // console.log("getSectionsList=====>", this.addSection); 1893 // console.log("getSectionsList=====>", this.addSection);
1894 }) 1894 })
1895 .catch(err => { 1895 .catch(err => {
1896 this.showLoader = false; 1896 this.showLoader = false;
1897 // console.log("err====>", err); 1897 // console.log("err====>", err);
1898 // this.$router.replace({ path: '/' }); 1898 // this.$router.replace({ path: '/' });
1899 }); 1899 });
1900 }, 1900 },
1901 getSection(_id) { 1901 getSection(_id) {
1902 var token = this.$store.state.token; 1902 var token = this.$store.state.token;
1903 this.showLoader = true; 1903 this.showLoader = true;
1904 http() 1904 http()
1905 .get( 1905 .get(
1906 "/getSectionsList", 1906 "/getSectionsList",
1907 { params: { classId: _id } }, 1907 { params: { classId: _id } },
1908 { 1908 {
1909 headers: { Authorization: "Bearer " + token } 1909 headers: { Authorization: "Bearer " + token }
1910 } 1910 }
1911 ) 1911 )
1912 .then(response => { 1912 .then(response => {
1913 this.addSection = response.data.data; 1913 this.addSection = response.data.data;
1914 this.showLoader = false; 1914 this.showLoader = false;
1915 // console.log("getSectionsList=====>", this.addSection); 1915 // console.log("getSectionsList=====>", this.addSection);
1916 }) 1916 })
1917 .catch(err => { 1917 .catch(err => {
1918 this.showLoader = false; 1918 this.showLoader = false;
1919 // console.log("err====>", err); 1919 // console.log("err====>", err);
1920 // this.$router.replace({ path: '/' }); 1920 // this.$router.replace({ path: '/' });
1921 }); 1921 });
1922 }, 1922 },
1923 pickFile() { 1923 pickFile() {
1924 this.$refs.image.click(); 1924 this.$refs.image.click();
1925 }, 1925 },
1926 dates: function(date) { 1926 dates: function(date) {
1927 return moment(date).format("MMMM DD, YYYY"); 1927 return moment(date).format("MMMM DD, YYYY");
1928 }, 1928 },
1929 onFilePicked(e) { 1929 onFilePicked(e) {
1930 // console.log(e) 1930 // console.log(e)
1931 const files = e.target.files; 1931 const files = e.target.files;
1932 this.imageData.upload = e.target.files[0]; 1932 this.imageData.upload = e.target.files[0];
1933 if (files[0] !== undefined) { 1933 if (files[0] !== undefined) {
1934 this.imageName = files[0].name; 1934 this.imageName = files[0].name;
1935 if (this.imageName.lastIndexOf(".") <= 0) { 1935 if (this.imageName.lastIndexOf(".") <= 0) {
1936 return; 1936 return;
1937 } 1937 }
1938 const fr = new FileReader(); 1938 const fr = new FileReader();
1939 fr.readAsDataURL(files[0]); 1939 fr.readAsDataURL(files[0]);
1940 fr.addEventListener("load", () => { 1940 fr.addEventListener("load", () => {
1941 this.imageUrl = fr.result; 1941 this.imageUrl = fr.result;
1942 this.imageFile = files[0]; // this is an image file that can be sent to server... 1942 this.imageFile = files[0]; // this is an image file that can be sent to server...
1943 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1943 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1944 }); 1944 });
1945 } else { 1945 } else {
1946 this.imageName = ""; 1946 this.imageName = "";
1947 this.imageFile = ""; 1947 this.imageFile = "";
1948 this.imageUrl = ""; 1948 this.imageUrl = "";
1949 } 1949 }
1950 }, 1950 },
1951 // getStudentList() { 1951 // getStudentList() {
1952 // this.showLoader = true; 1952 // this.showLoader = true;
1953 // var token = this.$store.state.token; 1953 // var token = this.$store.state.token;
1954 // http() 1954 // http()
1955 // .get("/getStudentsList", { 1955 // .get("/getStudentsList", {
1956 // headers: { Authorization: "Bearer " + token } 1956 // headers: { Authorization: "Bearer " + token }
1957 // }) 1957 // })
1958 // .then(response => { 1958 // .then(response => {
1959 // this.desserts = response.data.data; 1959 // this.desserts = response.data.data;
1960 // this.showLoader = false; 1960 // this.showLoader = false;
1961 // // console.log("getStudentList=====>",this.desserts) 1961 // // console.log("getStudentList=====>",this.desserts)
1962 // }) 1962 // })
1963 // .catch(err => { 1963 // .catch(err => {
1964 // // console.log("err====>", err); 1964 // // console.log("err====>", err);
1965 // this.showLoader = false; 1965 // this.showLoader = false;
1966 // this.$router.replace({ path: "/" }); 1966 // this.$router.replace({ path: "/" });
1967 // }); 1967 // });
1968 // }, 1968 // },
1969 editItem(item) { 1969 editItem(item) {
1970 this.editedIndex = this.desserts.indexOf(item); 1970 this.editedIndex = this.desserts.indexOf(item);
1971 this.editedItem = Object.assign({}, item); 1971 this.editedItem = Object.assign({}, item);
1972 this.editedItem.fatherName = item.parentId.fatherName; 1972 this.editedItem.fatherName = item.parentId.fatherName;
1973 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 1973 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
1974 this.editedItem.motherName = item.parentId.motherName; 1974 this.editedItem.motherName = item.parentId.motherName;
1975 this.editedItem.motherCellNo = item.parentId.motherCellNo; 1975 this.editedItem.motherCellNo = item.parentId.motherCellNo;
1976 // if(this.editedItem.dob != undefined){
1977 // this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1978 // }else if(this.editedItem.dob = undefined){
1979 // this.editedItem.dob = ''
1980 // }
1981 this.editedItem.dob = 1976 this.editedItem.dob =
1982 this.editedItem.dob != undefined 1977 this.editedItem.dob != undefined
1983 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1978 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1984 : (this.editedItem.dob = ""); 1979 : (this.editedItem.dob = "");
1985 this.dialog = true; 1980 this.dialog = true;
1986 }, 1981 },
1987 profile(item) { 1982 profile(item) {
1988 console.log("item", item); 1983 console.log("item", item);
1989 this.editedIndex = this.desserts.indexOf(item); 1984 this.editedIndex = this.desserts.indexOf(item);
1990 this.editedItem = Object.assign({}, item); 1985 this.editedItem = Object.assign({}, item);
1991 this.editedItem.fatherName = item.parentId.fatherName; 1986 this.editedItem.fatherName = item.parentId.fatherName;
1992 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 1987 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
1993 this.editedItem.motherName = item.parentId.motherName; 1988 this.editedItem.motherName = item.parentId.motherName;
1994 this.editedItem.motherCellNo = item.parentId.motherCellNo; 1989 this.editedItem.motherCellNo = item.parentId.motherCellNo;
1995 1990
1996 this.dialog1 = true; 1991 this.dialog1 = true;
1997 }, 1992 },
1998 deleteItem(item) { 1993 deleteItem(item) {
1999 let deleteStudent = { 1994 let deleteStudent = {
2000 studentId: item._id 1995 studentId: item._id
2001 }; 1996 };
2002 http() 1997 http()
2003 .delete( 1998 .delete(
2004 "/deleteStudent", 1999 "/deleteStudent",
2005 confirm("Are you sure you want to delete this?") && { 2000 confirm("Are you sure you want to delete this?") && {
2006 params: deleteStudent 2001 params: deleteStudent
2007 } 2002 }
2008 ) 2003 )
2009 .then(response => { 2004 .then(response => {
2010 // console.log("deleteUers",deleteStudent) 2005 // console.log("deleteUers",deleteStudent)
2011 if ((this.snackbar = true)) { 2006 if ((this.snackbar = true)) {
2012 this.text = "Successfully delete Existing Student"; 2007 this.text = "Successfully delete Existing Student";
2013 } 2008 }
2014 this.getStudentList(); 2009 this.getStudentList();
2015 }) 2010 })
2016 .catch(error => { 2011 .catch(error => {
2017 // console.log(error); 2012 // console.log(error);
2018 }); 2013 });
2019 }, 2014 },
2020 activeTab(type) { 2015 activeTab(type) {
2021 switch (type) { 2016 switch (type) {
2022 case "existing": 2017 case "existing":
2023 this.newActive = false; 2018 this.newActive = false;
2024 this.isActive = true; 2019 this.isActive = true;
2025 break; 2020 break;
2026 2021
2027 default: 2022 default:
2028 this.newActive = true; 2023 this.newActive = true;
2029 this.isActive = false; 2024 this.isActive = false;
2030 break; 2025 break;
2031 } 2026 }
2032 }, 2027 },
2033 close() { 2028 close() {
2034 this.dialog = false; 2029 this.dialog = false;
2035 setTimeout(() => { 2030 setTimeout(() => {
2036 this.editedItem = Object.assign({}, this.defaultItem); 2031 this.editedItem = Object.assign({}, this.defaultItem);
2037 this.editedIndex = -1; 2032 this.editedIndex = -1;
2038 }, 300); 2033 }, 300);
2039 }, 2034 },
2040 close1() { 2035 close1() {
2041 this.dialog1 = false; 2036 this.dialog1 = false;
2042 }, 2037 },
2043 submit() { 2038 submit() {
2044 if (this.$refs.form.validate()) { 2039 if (this.$refs.form.validate()) {
2045 let addStudent = { 2040 let addStudent = {
2046 parentId: this.parentId, 2041 parentId: this.parentId,
2047 name: this.addStudents.name, 2042 name: this.addStudents.name,
2048 email: this.addStudents.email, 2043 email: this.addStudents.email,
2049 role: this.addStudents.role, 2044 role: this.addStudents.role,
2050 dob: this.addStudents.date, 2045 dob: this.addStudents.date,
2051 city: this.addStudents.city, 2046 city: this.addStudents.city,
2052 pincode: this.addStudents.pincode, 2047 pincode: this.addStudents.pincode,
2053 country: this.addStudents.country, 2048 country: this.addStudents.country,
2054 permanentAddress: this.addStudents.permanentAddress, 2049 permanentAddress: this.addStudents.permanentAddress,
2055 presentAddress: this.addStudents.presentAddress, 2050 presentAddress: this.addStudents.presentAddress,
2056 mobile: this.addStudents.mobile, 2051 mobile: this.addStudents.mobile,
2057 state: this.addStudents.state, 2052 state: this.addStudents.state,
2058 gender: this.addStudents.gender, 2053 gender: this.addStudents.gender,
2059 establishmentYear: this.addStudents.establishmentYear, 2054 establishmentYear: this.addStudents.establishmentYear,
2060 classId: this.addStudents.select, 2055 classId: this.addStudents.select,
2061 sectionId: this.addStudents.selectSection, 2056 sectionId: this.addStudents.selectSection,
2062 bloodGroup: this.addStudents.bloodGroup, 2057 bloodGroup: this.addStudents.bloodGroup,
2063 allergies: this.addStudents.allergies, 2058 allergies: this.addStudents.allergies,
2064 medicalNotes: this.addStudents.medicalNotes, 2059 medicalNotes: this.addStudents.medicalNotes,
2065 height: this.addStudents.height, 2060 height: this.addStudents.height,
2066 weight: this.addStudents.weight, 2061 weight: this.addStudents.weight,
2067 rollNo: this.addStudents.rollNo 2062 rollNo: this.addStudents.rollNo
2068 }; 2063 };
2069 if (this.imageUrl) { 2064 if (this.imageUrl) {
2070 var str = this.imageUrl; 2065 var str = this.imageUrl;
2071 const [baseUrl, imageUrl] = str.split(/,/); 2066 const [baseUrl, imageUrl] = str.split(/,/);
2072 addStudent.upload = imageUrl; 2067 addStudent.upload = imageUrl;
2073 } 2068 }
2074 this.loading = true; 2069 this.loading = true;
2075 http() 2070 http()
2076 .post("/createStudent", addStudent) 2071 .post("/createStudent", addStudent)
2077 .then(response => { 2072 .then(response => {
2078 console.log(addStudent); 2073 console.log(addStudent);
2079 if ((this.snackbar = true)) { 2074 if ((this.snackbar = true)) {
2080 this.text = "New Student added successfully"; 2075 this.text = "New Student added successfully";
2081 } 2076 }
2082 // this.getStudentList(); 2077 // this.getStudentList();
2083 this.clear(); 2078 this.clear();
2084 this.loading = false; 2079 this.loading = false;
2085 }) 2080 })
2086 .catch(error => { 2081 .catch(error => {
2087 // console.log(error); 2082 // console.log(error);
2088 if ((this.snackbar = true)) { 2083 if ((this.snackbar = true)) {
2089 this.text = error.response.data.message; 2084 this.text = error.response.data.message;
2090 } 2085 }
2091 this.loading = false; 2086 this.loading = false;
2092 }); 2087 });
2093 } 2088 }
2094 }, 2089 },
2095 clear() { 2090 clear() {
2096 this.$refs.form.reset(); 2091 this.$refs.form.reset();
2097 this.imageUrl = ""; 2092 this.imageUrl = "";
2098 }, 2093 },
2099 save() { 2094 save() {
2100 let editStudent = { 2095 let editStudent = {
2101 studentId: this.editedItem._id, 2096 studentId: this.editedItem._id,
2102 name: this.editedItem.name, 2097 name: this.editedItem.name,
2103 email: this.editedItem.email, 2098 email: this.editedItem.email,
2104 role: this.editedItem.role, 2099 role: this.editedItem.role,
2105 dob: this.editedItem.dob, 2100 dob: this.editedItem.dob,
2106 city: this.editedItem.city, 2101 city: this.editedItem.city,
2107 pincode: this.editedItem.pincode, 2102 pincode: this.editedItem.pincode,
2108 country: this.editedItem.country, 2103 country: this.editedItem.country,
2109 permanentAddress: this.editedItem.permanentAddress, 2104 permanentAddress: this.editedItem.permanentAddress,
2110 presentAddress: this.editedItem.presentAddress, 2105 presentAddress: this.editedItem.presentAddress,
2111 mobile: this.editedItem.mobile, 2106 mobile: this.editedItem.mobile,
2112 state: this.editedItem.state, 2107 state: this.editedItem.state,
2113 gender: this.editedItem.gender, 2108 gender: this.editedItem.gender,
2114 establishmentYear: this.editedItem.establishmentYear, 2109 establishmentYear: this.editedItem.establishmentYear,
2115 classId: this.editedItem.select, 2110 classId: this.editedItem.select,
2116 sectionId: this.editedItem.selectSection, 2111 sectionId: this.editedItem.selectSection,
2117 bloodGroup: this.editedItem.bloodGroup, 2112 bloodGroup: this.editedItem.bloodGroup,
2118 allergies: this.editedItem.allergies, 2113 allergies: this.editedItem.allergies,
2119 medicalNotes: this.editedItem.medicalNotes, 2114 medicalNotes: this.editedItem.medicalNotes,
2120 height: this.editedItem.height, 2115 height: this.editedItem.height,
2121 weight: this.editedItem.weight, 2116 weight: this.editedItem.weight,
2122 rollNo: this.editedItem.rollNo 2117 rollNo: this.editedItem.rollNo
2123 }; 2118 };
2124 if (this.imageUrl) { 2119 if (this.imageUrl) {
2125 var str = this.imageUrl; 2120 var str = this.imageUrl;
2126 const [baseUrl, imageUrl] = str.split(/,/); 2121 const [baseUrl, imageUrl] = str.split(/,/);
2127 editStudent.upload = imageUrl; 2122 editStudent.upload = imageUrl;
2128 } 2123 }
2129 http() 2124 http()
2130 .put("/updateStudent", editStudent) 2125 .put("/updateStudent", editStudent)
2131 .then(response => { 2126 .then(response => {
2132 this.snackbar = true; 2127 this.snackbar = true;
2133 this.text = "Successfully Student Existing User"; 2128 this.text = "Successfully Student Existing User";
2134 this.imageUrl = ""; 2129 this.imageUrl = "";
2135 this.findStudents(); 2130 this.findStudents();
2136 this.close(); 2131 this.close();
2137 }) 2132 })
2138 .catch(error => { 2133 .catch(error => {
2139 // console.log(error); 2134 // console.log(error);
2140 if ((this.snackbar = true)) { 2135 if ((this.snackbar = true)) {
2141 this.text = error.response.data.statusText; 2136 this.text = error.response.data.statusText;
2142 } 2137 }
2143 }); 2138 });
2144 }, 2139 },
2145 submitParentDetails() { 2140 submitParentDetails() {
2146 if (this.$refs.parentForm.validate()) { 2141 if (this.$refs.parentForm.validate()) {
2147 let addparentDetails = { 2142 let addparentDetails = {
2148 email: this.parentData.email, 2143 email: this.parentData.email,
2149 fatherName: this.parentData.fatherName, 2144 fatherName: this.parentData.fatherName,
2150 fatherCellNo: this.parentData.fatherCellNo, 2145 fatherCellNo: this.parentData.fatherCellNo,
2151 motherName: this.parentData.motherName, 2146 motherName: this.parentData.motherName,
2152 motherCellNo: this.parentData.motherCellNo, 2147 motherCellNo: this.parentData.motherCellNo,
2153 role: "PARENT" 2148 role: "PARENT"
2154 }; 2149 };
2155 this.loading = true; 2150 this.loading = true;
2156 http() 2151 http()
2157 .post("/createParent", addparentDetails) 2152 .post("/createParent", addparentDetails)
2158 .then(response => { 2153 .then(response => {
2159 this.parentId = response.data.data.id; 2154 this.parentId = response.data.data.id;
2160 this.e2 = 2; 2155 this.e2 = 2;
2161 if ((this.snackbar = true)) { 2156 if ((this.snackbar = true)) {
2162 this.text = "successfully"; 2157 this.text = "successfully";
2163 } 2158 }
2164 // this.getStudentList(); 2159 // this.getStudentList();
2165 this.clear(); 2160 this.clear();
2166 this.loading = false; 2161 this.loading = false;
2167 }) 2162 })
2168 .catch(error => { 2163 .catch(error => {
2169 console.log(error.response.data); 2164 console.log(error.response.data);
2170 if ((this.snackbar = true)) { 2165 if ((this.snackbar = true)) {
2171 this.text = error.response.data.message; 2166 this.text = error.response.data.message;
2172 this.text = error.response.data.statusText; 2167 this.text = error.response.data.statusText;
2173 } 2168 }
2174 this.loading = false; 2169 this.loading = false;
2175 }); 2170 });
2176 } 2171 }
2177 }, 2172 },
2178 getParentDetails() { 2173 getParentDetails() {
2179 if (this.parentData.email) { 2174 if (this.parentData.email) {
2180 http() 2175 http()
2181 .get("getParticularParent", { 2176 .get("getParticularParent", {
2182 params: { email: this.parentData.email }, 2177 params: { email: this.parentData.email },
2183 headers: { 2178 headers: {
2184 Authorization: "Bearer " + this.$store.state.token 2179 Authorization: "Bearer " + this.$store.state.token
2185 } 2180 }
2186 }) 2181 })
2187 .then(response => { 2182 .then(response => {
2188 this.showNext = true; 2183 this.showNext = true;
2189 this.showParent = false; 2184 this.showParent = false;
2190 this.parentData = response.data.data; 2185 this.parentData = response.data.data;
2191 this.parentId = response.data.data._id; 2186 this.parentId = response.data.data._id;
2192 }) 2187 })
2193 .catch(error => { 2188 .catch(error => {
2194 console.log("err====>", error.response.data.message); 2189 console.log("err====>", error.response.data.message);
2195 }); 2190 });
2196 } 2191 }
2197 } 2192 }
2198 }, 2193 },
2199 mounted() { 2194 mounted() {
2200 const getCountryList = countryList(); 2195 const getCountryList = countryList();
2201 this.countries = getCountryList; 2196 this.countries = getCountryList;
2202 var token = this.$store.state.token; 2197 var token = this.$store.state.token;
2203 http() 2198 http()
2204 .get("/getClassesList", { 2199 .get("/getClassesList", {
2205 headers: { Authorization: "Bearer " + token } 2200 headers: { Authorization: "Bearer " + token }
2206 }) 2201 })
2207 .then(response => { 2202 .then(response => {
2208 this.addclass = response.data.data; 2203 this.addclass = response.data.data;
2209 }) 2204 })
2210 .catch(err => { 2205 .catch(error => {
2211 // console.log("err====>", err); 2206 this.showLoader = false;
2212 this.$router.replace({ path: "/" }); 2207 if (error.response.status === 401) {
2208 this.$router.replace({ path: "/" });
2209 this.$store.dispatch("setToken", null);
2210 this.$store.dispatch("Id", null);
2211 this.$store.dispatch("Role", null);
2212 }
2213 }); 2213 });
2214 }, 2214 },
2215 created() { 2215 created() {
2216 this.$root.$on("app:search", search => { 2216 this.$root.$on("app:search", search => {
2217 this.search = search; 2217 this.search = search;
2218 }); 2218 });
2219 }, 2219 },
2220 beforeDestroy() { 2220 beforeDestroy() {
2221 // dont forget to remove the listener 2221 // dont forget to remove the listener
2222 this.$root.$off("app:search"); 2222 this.$root.$off("app:search");
2223 } 2223 }
2224 }; 2224 };
2225 </script> 2225 </script>
2226 <style scoped> 2226 <style scoped>
2227 .active { 2227 .active {
2228 background-color: gray; 2228 background-color: gray;
2229 color: white !important; 2229 color: white !important;
src/pages/Subjects/subjects.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Subjects</v-tab> 10 >Existing Subjects</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Subject</v-tab> 18 >Add New Subject</v-tab>
19 19
20 <!-- ****** EDIT Subject ****** --> 20 <!-- ****** EDIT Subject ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12 class> 32 <v-flex xs12 sm12 class>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Subject</h3> 36 <h3>Edit Subject</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-container fluid> 41 <v-container fluid>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right">Class:</label> 44 <label class="right">Class:</label>
45 </v-flex> 45 </v-flex>
46 <v-flex xs6 class="ml-3"> 46 <v-flex xs6 class="ml-3">
47 <v-select 47 <v-select
48 :items="classList" 48 :items="classList"
49 label="Select Class" 49 label="Select Class"
50 v-model="addSubject.selectName" 50 v-model="addSubject.selectName"
51 item-text="classNum" 51 item-text="classNum"
52 item-value="_id" 52 item-value="_id"
53 name="Select Class" 53 name="Select Class"
54 :rules="nameRules" 54 :rules="nameRules"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading"> 60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Subject:</label> 61 <label class="right">Subject:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs6 class="ml-3"> 63 <v-flex xs6 class="ml-3">
64 <v-text-field 64 <v-text-field
65 placeholder="fill your Subject" 65 placeholder="fill your Subject"
66 v-model="editedItem.subjectName" 66 v-model="editedItem.subjectName"
67 type="text" 67 type="text"
68 name="email" 68 name="email"
69 required 69 required
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-flex xs12 sm9 offset-sm2> 73 <v-flex xs12 sm9 offset-sm2>
74 <v-card-actions> 74 <v-card-actions>
75 <v-btn round dark @click.native="close">Cancel</v-btn> 75 <v-btn round dark @click.native="close">Cancel</v-btn>
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-btn round dark @click="save">Save</v-btn> 77 <v-btn round dark @click="save">Save</v-btn>
78 </v-card-actions> 78 </v-card-actions>
79 </v-flex> 79 </v-flex>
80 </v-container> 80 </v-container>
81 </v-card> 81 </v-card>
82 </v-flex> 82 </v-flex>
83 </v-dialog> 83 </v-dialog>
84 84
85 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 85 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
86 86
87 <v-dialog v-model="dialog1" max-width="600px"> 87 <v-dialog v-model="dialog1" max-width="600px">
88 <v-toolbar color="v-toolbar"> 88 <v-toolbar color="v-toolbar">
89 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
90 <v-toolbar-title> 90 <v-toolbar-title>
91 <h3>Subject</h3> 91 <h3>Subject</h3>
92 </v-toolbar-title> 92 </v-toolbar-title>
93 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
94 <v-icon @click="close1">close</v-icon> 94 <v-icon @click="close1">close</v-icon>
95 </v-toolbar> 95 </v-toolbar>
96 <v-card> 96 <v-card>
97 <v-card-text> 97 <v-card-text>
98 <v-container grid-list-md> 98 <v-container grid-list-md>
99 <v-layout wrap> 99 <v-layout wrap>
100 <v-flex> 100 <v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs7 sm6> 102 <v-flex xs7 sm6>
103 <h5 class="right my-1"> 103 <h5 class="right my-1">
104 <b>Subject Name:</b> 104 <b>Subject Name:</b>
105 </h5> 105 </h5>
106 </v-flex> 106 </v-flex>
107 <v-flex sm6 xs5> 107 <v-flex sm6 xs5>
108 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 108 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-container> 113 </v-container>
114 </v-card-text> 114 </v-card-text>
115 </v-card> 115 </v-card>
116 </v-dialog> 116 </v-dialog>
117 117
118 <v-snackbar 118 <v-snackbar
119 :timeout="timeout" 119 :timeout="timeout"
120 :top="y === 'top'" 120 :top="y === 'top'"
121 :right="x === 'right'" 121 :right="x === 'right'"
122 :vertical="mode === 'vertical'" 122 :vertical="mode === 'vertical'"
123 v-model="snackbar" 123 v-model="snackbar"
124 color="success" 124 color="success"
125 >{{ text }}</v-snackbar> 125 >{{ text }}</v-snackbar>
126 126
127 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 127 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
128 <v-card flat> 128 <v-card flat>
129 <v-card-actions> 129 <v-card-actions>
130 <v-layout> 130 <v-layout>
131 <v-flex xs4 sm2 lg1> 131 <v-flex xs4 sm2 lg1>
132 <label class="right mt-4">Select Class:</label> 132 <label class="right mt-4">Select Class:</label>
133 </v-flex> 133 </v-flex>
134 <v-flex xs8 sm4 lg3> 134 <v-flex xs8 sm4 lg3>
135 <v-select 135 <v-select
136 :items="classList" 136 :items="classList"
137 label="Select Class" 137 label="Select Class"
138 v-model="addSubject.selectName" 138 v-model="addSubject.selectName"
139 item-text="classNum" 139 item-text="classNum"
140 item-value="_id" 140 item-value="_id"
141 name="Select Class" 141 name="Select Class"
142 :rules="nameRules" 142 :rules="nameRules"
143 @change="getClassSubject(addSubject.selectName)" 143 @change="getClassSubject(addSubject.selectName)"
144 class="px-4" 144 class="px-4"
145 required 145 required
146 ></v-select> 146 ></v-select>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-card-actions> 149 </v-card-actions>
150 </v-card> 150 </v-card>
151 <v-data-table 151 <v-data-table
152 :headers="headers" 152 :headers="headers"
153 :items="subjectList.subjects" 153 :items="subjectList.subjects"
154 :pagination.sync="pagination" 154 :pagination.sync="pagination"
155 :search="search" 155 :search="search"
156 > 156 >
157 <template slot="items" slot-scope="props"> 157 <template slot="items" slot-scope="props">
158 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 158 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
159 <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td> 159 <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td>
160 160
161 <td class="text-xs-center"> 161 <td class="text-xs-center">
162 <span> 162 <span>
163 <v-tooltip top> 163 <v-tooltip top>
164 <img 164 <img
165 slot="activator" 165 slot="activator"
166 style="cursor:pointer; width:25px; height:18px; " 166 style="cursor:pointer; width:25px; height:18px; "
167 class="mr5" 167 class="mr5"
168 @click="profile(props.item)" 168 @click="profile(props.item)"
169 src="/static/icon/eye1.png" 169 src="/static/icon/eye1.png"
170 /> 170 />
171 <span>View</span> 171 <span>View</span>
172 </v-tooltip> 172 </v-tooltip>
173 <v-tooltip top> 173 <v-tooltip top>
174 <img 174 <img
175 slot="activator" 175 slot="activator"
176 style="cursor:pointer; width:20px; height:18px; " 176 style="cursor:pointer; width:20px; height:18px; "
177 class="mr5" 177 class="mr5"
178 @click="editItem(props.item)" 178 @click="editItem(props.item)"
179 src="/static/icon/edit1.png" 179 src="/static/icon/edit1.png"
180 /> 180 />
181 <span>Edit</span> 181 <span>Edit</span>
182 </v-tooltip> 182 </v-tooltip>
183 <v-tooltip top> 183 <v-tooltip top>
184 <img 184 <img
185 slot="activator" 185 slot="activator"
186 style="cursor:pointer; width:20px; height:20px; " 186 style="cursor:pointer; width:20px; height:20px; "
187 class="mr5" 187 class="mr5"
188 @click="deleteItem(props.item)" 188 @click="deleteItem(props.item)"
189 src="/static/icon/delete1.png" 189 src="/static/icon/delete1.png"
190 /> 190 />
191 <span>Delete</span> 191 <span>Delete</span>
192 </v-tooltip> 192 </v-tooltip>
193 </span> 193 </span>
194 </td> 194 </td>
195 </template> 195 </template>
196 <v-alert 196 <v-alert
197 slot="no-results" 197 slot="no-results"
198 :value="true" 198 :value="true"
199 color="error" 199 color="error"
200 icon="warning" 200 icon="warning"
201 >Your search for "{{ search }}" found no results.</v-alert> 201 >Your search for "{{ search }}" found no results.</v-alert>
202 </v-data-table> 202 </v-data-table>
203 </v-tab-item> 203 </v-tab-item>
204 204
205 <!-- ****** ADD MULTIPLE Subject ****** --> 205 <!-- ****** ADD MULTIPLE Subject ****** -->
206 206
207 <v-tab-item> 207 <v-tab-item>
208 <v-container> 208 <v-container>
209 <v-snackbar 209 <v-snackbar
210 :timeout="timeout" 210 :timeout="timeout"
211 :top="y === 'top'" 211 :top="y === 'top'"
212 :right="x === 'right'" 212 :right="x === 'right'"
213 :vertical="mode === 'vertical'" 213 :vertical="mode === 'vertical'"
214 v-model="snackbar" 214 v-model="snackbar"
215 color="success" 215 color="success"
216 >{{ text }}</v-snackbar> 216 >{{ text }}</v-snackbar>
217 <v-flex xs12 sm8 offset-sm2 class="top"> 217 <v-flex xs12 sm8 offset-sm2 class="top">
218 <v-card flat> 218 <v-card flat>
219 <v-container fluid fill-height> 219 <v-container fluid fill-height>
220 <v-layout align-center> 220 <v-layout align-center>
221 <v-flex xs12> 221 <v-flex xs12>
222 <v-form ref="form" v-model="valid" lazy-validation> 222 <v-form ref="form" v-model="valid" lazy-validation>
223 <v-layout> 223 <v-layout>
224 <v-flex xs4 sm4 class="pt-4 subheading"> 224 <v-flex xs4 sm4 class="pt-4 subheading">
225 <label class="right">Class:</label> 225 <label class="right">Class:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs8 sm6 class="ml-3"> 227 <v-flex xs8 sm6 class="ml-3">
228 <v-select 228 <v-select
229 v-model="addSubject.classId" 229 v-model="addSubject.classId"
230 label="Select your class" 230 label="Select your class"
231 type="text" 231 type="text"
232 :items="classList" 232 :items="classList"
233 item-text="classNum" 233 item-text="classNum"
234 item-value="_id" 234 item-value="_id"
235 :rules="nameRules" 235 :rules="nameRules"
236 required 236 required
237 ></v-select> 237 ></v-select>
238 </v-flex> 238 </v-flex>
239 </v-layout> 239 </v-layout>
240 <v-layout> 240 <v-layout>
241 <v-flex xs4 sm4 class="pt-4 subheading"> 241 <v-flex xs4 sm4 class="pt-4 subheading">
242 <label class="right">Subject:</label> 242 <label class="right">Subject:</label>
243 </v-flex> 243 </v-flex>
244 <v-flex xs8 sm6 class="ml-3"> 244 <v-flex xs8 sm6 class="ml-3">
245 <v-text-field 245 <v-text-field
246 v-model="addSubject.subjectName" 246 v-model="addSubject.subjectName"
247 placeholder="fill your Subject Name" 247 placeholder="fill your Subject Name"
248 name="name" 248 name="name"
249 type="text" 249 type="text"
250 :rules="subjectRules" 250 :rules="subjectRules"
251 required 251 required
252 ></v-text-field> 252 ></v-text-field>
253 </v-flex> 253 </v-flex>
254 </v-layout> 254 </v-layout>
255 <v-layout> 255 <v-layout>
256 <v-flex xs12 sm9 offset-sm2> 256 <v-flex xs12 sm9 offset-sm2>
257 <v-card-actions> 257 <v-card-actions>
258 <v-btn @click="clear" round dark>clear</v-btn> 258 <v-btn @click="clear" round dark>clear</v-btn>
259 <v-spacer></v-spacer> 259 <v-spacer></v-spacer>
260 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 260 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
261 </v-card-actions> 261 </v-card-actions>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-form> 264 </v-form>
265 </v-flex> 265 </v-flex>
266 </v-layout> 266 </v-layout>
267 </v-container> 267 </v-container>
268 </v-card> 268 </v-card>
269 </v-flex> 269 </v-flex>
270 </v-container> 270 </v-container>
271 </v-tab-item> 271 </v-tab-item>
272 </v-tabs> 272 </v-tabs>
273 <div class="loader" v-if="showLoader"> 273 <div class="loader" v-if="showLoader">
274 <v-progress-circular indeterminate color="white"></v-progress-circular> 274 <v-progress-circular indeterminate color="white"></v-progress-circular>
275 </div> 275 </div>
276 </v-app> 276 </v-app>
277 </template> 277 </template>
278 278
279 <script> 279 <script>
280 import http from "@/Services/http.js"; 280 import http from "@/Services/http.js";
281 import Util from "@/util"; 281 import Util from "@/util";
282 282
283 export default { 283 export default {
284 data: () => ({ 284 data: () => ({
285 snackbar: false, 285 snackbar: false,
286 y: "top", 286 y: "top",
287 x: "right", 287 x: "right",
288 mode: "", 288 mode: "",
289 timeout: 3000, 289 timeout: 3000,
290 text: "", 290 text: "",
291 showLoader: false, 291 showLoader: false,
292 loading: false, 292 loading: false,
293 date: null, 293 date: null,
294 search: "", 294 search: "",
295 dialog: false, 295 dialog: false,
296 dialog1: false, 296 dialog1: false,
297 valid: true, 297 valid: true,
298 isActive: true, 298 isActive: true,
299 newActive: false, 299 newActive: false,
300 gender: ["Male", "Female"], 300 gender: ["Male", "Female"],
301 pagination: { 301 pagination: {
302 rowsPerPage: 19 302 rowsPerPage: 19
303 }, 303 },
304 token: "", 304 token: "",
305 nameRules: [v => !!v || " Class Name is required"], 305 nameRules: [v => !!v || " Class Name is required"],
306 subjectRules: [v => !!v || " Subject Name is required"], 306 subjectRules: [v => !!v || " Subject Name is required"],
307 headers: [ 307 headers: [
308 { 308 {
309 text: "No", 309 text: "No",
310 align: "center", 310 align: "center",
311 sortable: false, 311 sortable: false,
312 value: "No" 312 value: "No"
313 }, 313 },
314 { 314 {
315 text: "Subject Name", 315 text: "Subject Name",
316 value: "subjectName", 316 value: "subjectName",
317 sortable: false, 317 sortable: false,
318 align: "center" 318 align: "center"
319 }, 319 },
320 { text: "Action", value: "", sortable: false, align: "center" } 320 { text: "Action", value: "", sortable: false, align: "center" }
321 ], 321 ],
322 subjectList: [], 322 subjectList: [],
323 classList: [], 323 classList: [],
324 editedIndex: -1, 324 editedIndex: -1,
325 addSubject: {}, 325 addSubject: {},
326 selectClassId: "", 326 selectClassId: "",
327 editedItem: { 327 editedItem: {
328 subjectName: "" 328 subjectName: ""
329 } 329 }
330 }), 330 }),
331 methods: { 331 methods: {
332 pickFile() { 332 pickFile() {
333 this.$refs.image.click(); 333 this.$refs.image.click();
334 }, 334 },
335 335
336 editItem(item) { 336 editItem(item) {
337 this.editedItem = Object.assign({}, item); 337 this.editedItem = Object.assign({}, item);
338 console.log("this.editedItem._id", this.editedItem._id); 338 console.log("this.editedItem._id", this.editedItem._id);
339 this.dialog = true; 339 this.dialog = true;
340 }, 340 },
341 profile(item) { 341 profile(item) {
342 this.editedItem = Object.assign({}, item); 342 this.editedItem = Object.assign({}, item);
343 this.dialog1 = true; 343 this.dialog1 = true;
344 }, 344 },
345 deleteItem(item) { 345 deleteItem(item) {
346 let deleteSubject = { 346 let deleteSubject = {
347 classId: this.addSubject.selectName, 347 classId: this.addSubject.selectName,
348 subjectId: item._id 348 subjectId: item._id
349 }; 349 };
350 http() 350 http()
351 .delete( 351 .delete(
352 "/deleteSubject", 352 "/deleteSubject",
353 confirm("Are you sure you want to delete this?") && { 353 confirm("Are you sure you want to delete this?") && {
354 params: deleteSubject 354 params: deleteSubject
355 } 355 }
356 ) 356 )
357 .then(response => { 357 .then(response => {
358 if ((this.snackbar = true)) { 358 if ((this.snackbar = true)) {
359 this.text = "Successfully delete Existing Subject"; 359 this.text = "Successfully delete Existing Subject";
360 } 360 }
361 this.getEventList(); 361 this.getEventList();
362 }) 362 })
363 .catch(error => { 363 .catch(error => {
364 // console.log(error); 364 // console.log(error);
365 }); 365 });
366 }, 366 },
367 activeTab(type) { 367 activeTab(type) {
368 switch (type) { 368 switch (type) {
369 case "existing": 369 case "existing":
370 this.newActive = false; 370 this.newActive = false;
371 this.isActive = true; 371 this.isActive = true;
372 break; 372 break;
373 373
374 default: 374 default:
375 this.newActive = true; 375 this.newActive = true;
376 this.isActive = false; 376 this.isActive = false;
377 break; 377 break;
378 } 378 }
379 }, 379 },
380 close() { 380 close() {
381 this.dialog = false; 381 this.dialog = false;
382 setTimeout(() => { 382 setTimeout(() => {
383 this.editedItem = Object.assign({}, this.defaultItem); 383 this.editedItem = Object.assign({}, this.defaultItem);
384 this.editedIndex = -1; 384 this.editedIndex = -1;
385 }, 300); 385 }, 300);
386 }, 386 },
387 close1() { 387 close1() {
388 this.dialog1 = false; 388 this.dialog1 = false;
389 }, 389 },
390 submit() { 390 submit() {
391 if (this.$refs.form.validate()) { 391 if (this.$refs.form.validate()) {
392 http() 392 http()
393 .post("/addSubject", this.addSubject) 393 .post("/addSubject", this.addSubject)
394 .then(response => { 394 .then(response => {
395 if ((this.snackbar = true)) { 395 if ((this.snackbar = true)) {
396 this.text = "New Subject added successfully"; 396 this.text = "New Subject added successfully";
397 } 397 }
398 this.clear(); 398 this.clear();
399 }) 399 })
400 .catch(error => { 400 .catch(error => {
401 // console.log(error); 401 // console.log(error);
402 if ((this.snackbar = true)) { 402 if ((this.snackbar = true)) {
403 this.text = error.response.data.message; 403 this.text = error.response.data.message;
404 } 404 }
405 }); 405 });
406 } 406 }
407 }, 407 },
408 clear() { 408 clear() {
409 this.$refs.form.reset(); 409 this.$refs.form.reset();
410 }, 410 },
411 save() { 411 save() {
412 let editSubject = { 412 let editSubject = {
413 classId: this.addSubject.selectName, 413 classId: this.addSubject.selectName,
414 subjectId: this.editedItem._id, 414 subjectId: this.editedItem._id,
415 subjectName: this.editedItem.subjectName 415 subjectName: this.editedItem.subjectName
416 }; 416 };
417 http() 417 http()
418 .put("/updateSubject", editSubject) 418 .put("/updateSubject", editSubject)
419 .then(response => { 419 .then(response => {
420 // console.log("editEvent",editEvent); 420 // console.log("editEvent",editEvent);
421 if ((this.snackbar = true)) { 421 if ((this.snackbar = true)) {
422 this.text = "Successfully Edit Existing Subject"; 422 this.text = "Successfully Edit Existing Subject";
423 } 423 }
424 // this.getClassSubject(); 424 // this.getClassSubject();
425 http() 425 http()
426 .get( 426 .get(
427 "/getParticularClass", 427 "/getParticularClass",
428 { params: { classId: this.selectClassId } }, 428 { params: { classId: this.selectClassId } },
429 { 429 {
430 headers: { Authorization: "Bearer " + this.token } 430 headers: { Authorization: "Bearer " + this.token }
431 } 431 }
432 ) 432 )
433 .then(response => { 433 .then(response => {
434 this.subjectList = response.data.data; 434 this.subjectList = response.data.data;
435 }) 435 })
436 .catch(err => { 436 .catch(err => {
437 console.log("err====>", err); 437 console.log("err====>", err);
438 }); 438 });
439 }) 439 })
440 .catch(error => { 440 .catch(error => {
441 // console.log(error); 441 // console.log(error);
442 }); 442 });
443 this.close(); 443 this.close();
444 }, 444 },
445 getClassSubject(id) { 445 getClassSubject(id) {
446 this.selectClassId = id; 446 this.selectClassId = id;
447 http() 447 http()
448 .get( 448 .get(
449 "/getParticularClass", 449 "/getParticularClass",
450 { params: { classId: this.selectClassId } }, 450 { params: { classId: this.selectClassId } },
451 { 451 {
452 headers: { Authorization: "Bearer " + this.token } 452 headers: { Authorization: "Bearer " + this.token }
453 } 453 }
454 ) 454 )
455 .then(response => { 455 .then(response => {
456 this.subjectList = response.data.data; 456 this.subjectList = response.data.data;
457 }) 457 })
458 .catch(err => { 458 .catch(err => {
459 console.log("err====>", err); 459 console.log("err====>", err);
460 }); 460 });
461 }, 461 },
462 getClass() { 462 getClass() {
463 http() 463 http()
464 .get("/getClassesList", { 464 .get("/getClassesList", {
465 headers: { Authorization: "Bearer " + this.token } 465 headers: { Authorization: "Bearer " + this.token }
466 }) 466 })
467 .then(response => { 467 .then(response => {
468 this.classList = response.data.data; 468 this.classList = response.data.data;
469 }) 469 })
470 .catch(err => { 470 .catch(error => {
471 // console.log("err====>", err);
472 if (error.response.status === 401) { 471 if (error.response.status === 401) {
473 this.$router.replace({ path: "/" }); 472 this.$router.replace({ path: "/" });
474 this.$store.dispatch("setToken", null); 473 this.$store.dispatch("setToken", null);
475 this.$store.dispatch("Id", null); 474 this.$store.dispatch("Id", null);
476 } 475 }
477 }); 476 });
478 } 477 }
479 }, 478 },
480 mounted() { 479 mounted() {
481 this.token = this.$store.state.token; 480 this.token = this.$store.state.token;
482 // this.getNoticeDataList(); 481 // this.getNoticeDataList();
483 this.getClass(); 482 this.getClass();
484 }, 483 },
485 created() { 484 created() {
486 this.$root.$on("app:search", search => { 485 this.$root.$on("app:search", search => {
487 this.search = search; 486 this.search = search;
488 }); 487 });
489 }, 488 },
490 beforeDestroy() { 489 beforeDestroy() {
491 // dont forget to remove the listener 490 // dont forget to remove the listener
492 this.$root.$off("app:search"); 491 this.$root.$off("app:search");
493 } 492 }
494 }; 493 };
495 </script> 494 </script>
496 <style scoped> 495 <style scoped>
497 .active { 496 .active {
498 background-color: gray; 497 background-color: gray;
499 color: white !important; 498 color: white !important;
500 } 499 }
501 .activebtn { 500 .activebtn {
502 color: black !important; 501 color: black !important;
503 } 502 }
504 </style> 503 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @00e4bc4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Time Table</v-tab> 10 >Existing Time Table</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Time Table</v-tab> 18 >Add New Time Table</v-tab>
19 19
20 <!-- ****** EDITS TIME-TABLE****** --> 20 <!-- ****** EDITS TIME-TABLE****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-toolbar color="grey lighten-2"> 33 <v-toolbar color="grey lighten-2">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Time Table</h3> 36 <h3>Edit Time Table</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat class="pa-2"> 40 <v-card flat class="pa-2">
41 <!-- <v-layout> 41 <!-- <v-layout>
42 <v-flex 42 <v-flex
43 xs12 43 xs12
44 class="text-xs-center text-sm-center text-md-center text-lg-center" 44 class="text-xs-center text-sm-center text-md-center text-lg-center"
45 > 45 >
46 <v-avatar size="100px"> 46 <v-avatar size="100px">
47 <img src="/static/icon/user.png" v-if="!imageUrl" /> 47 <img src="/static/icon/user.png" v-if="!imageUrl" />
48 </v-avatar> 48 </v-avatar>
49 <input 49 <input
50 type="file" 50 type="file"
51 style="display: none" 51 style="display: none"
52 ref="image" 52 ref="image"
53 accept="image/*" 53 accept="image/*"
54 @change="onFilePicked" 54 @change="onFilePicked"
55 /> 55 />
56 <img 56 <img
57 :src="imageData.imageUrl" 57 :src="imageData.imageUrl"
58 height="150" 58 height="150"
59 v-if="imageUrl" 59 v-if="imageUrl"
60 style="border-radius:50%; width:200px" 60 style="border-radius:50%; width:200px"
61 /> 61 />
62 </v-flex> 62 </v-flex>
63 </v-layout>--> 63 </v-layout>-->
64 <v-flex xs12 sm12> 64 <v-flex xs12 sm12>
65 <v-layout> 65 <v-layout>
66 <v-flex xs4 class="pt-4 subheading"> 66 <v-flex xs4 class="pt-4 subheading">
67 <label class="right">class No:</label> 67 <label class="right">class No:</label>
68 </v-flex> 68 </v-flex>
69 <v-flex xs8 sm5 class="ml-3"> 69 <v-flex xs8 sm5 class="ml-3">
70 <v-select 70 <v-select
71 :items="addclass" 71 :items="addclass"
72 label="Select Class" 72 label="Select Class"
73 v-model="editedItem.classNum" 73 v-model="editedItem.classNum"
74 item-text="classNum" 74 item-text="classNum"
75 item-value="_id" 75 item-value="_id"
76 @change="getSections(editedItem.classNum)" 76 @change="getSections(editedItem.classNum)"
77 ></v-select> 77 ></v-select>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 class="pt-4 subheading"> 83 <v-flex xs4 class="pt-4 subheading">
84 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> 84 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
85 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 85 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
86 </v-flex> 86 </v-flex>
87 <v-flex xs8 sm5 class="ml-3"> 87 <v-flex xs8 sm5 class="ml-3">
88 <v-select 88 <v-select
89 :items="addSection" 89 :items="addSection"
90 label="Select Section" 90 label="Select Section"
91 v-model="editedItem.selectSection" 91 v-model="editedItem.selectSection"
92 item-text="name" 92 item-text="name"
93 item-value="_id" 93 item-value="_id"
94 ></v-select> 94 ></v-select>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
98 <v-layout> 98 <v-layout>
99 <v-flex xs12 sm9 offset-sm1> 99 <v-flex xs12 sm9 offset-sm1>
100 <v-card-actions> 100 <v-card-actions>
101 <v-btn round dark @click.native="close">Cancel</v-btn> 101 <v-btn round dark @click.native="close">Cancel</v-btn>
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 <v-btn round dark @click="save">Save</v-btn> 103 <v-btn round dark @click="save">Save</v-btn>
104 </v-card-actions> 104 </v-card-actions>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-card> 107 </v-card>
108 </v-flex> 108 </v-flex>
109 </v-dialog> 109 </v-dialog>
110 110
111 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> 111 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** -->
112 112
113 <v-dialog v-model="dialogSchedule" max-width="600px"> 113 <v-dialog v-model="dialogSchedule" max-width="600px">
114 <v-flex xs12 sm12> 114 <v-flex xs12 sm12>
115 <v-toolbar color="grey lighten-2"> 115 <v-toolbar color="grey lighten-2">
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 <v-toolbar-title> 117 <v-toolbar-title>
118 <h3>Add Schedule</h3> 118 <h3>Add Schedule</h3>
119 </v-toolbar-title> 119 </v-toolbar-title>
120 <v-spacer></v-spacer> 120 <v-spacer></v-spacer>
121 </v-toolbar> 121 </v-toolbar>
122 <v-card flat> 122 <v-card flat>
123 <v-form> 123 <v-form>
124 <v-container fluid> 124 <v-container fluid>
125 <v-flex xs12 sm12 class="py-3"> 125 <v-flex xs12 sm12 class="py-3">
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> 128 <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
129 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> 129 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
130 </v-flex> 130 </v-flex>
131 <v-flex xs12 sm5 class="pl-3"> 131 <v-flex xs12 sm5 class="pl-3">
132 <v-select 132 <v-select
133 :items="addOneDay" 133 :items="addOneDay"
134 label="Select Day" 134 label="Select Day"
135 v-model="schedule.selectDay" 135 v-model="schedule.selectDay"
136 ></v-select> 136 ></v-select>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm8 offset-sm2> 141 <v-flex xs12 sm8 offset-sm2>
142 <v-card-actions> 142 <v-card-actions>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-btn round dark @click="submitSchedule">Save</v-btn> 144 <v-btn round dark @click="submitSchedule">Save</v-btn>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 </v-card-actions> 146 </v-card-actions>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-container> 149 </v-container>
150 </v-form> 150 </v-form>
151 </v-card> 151 </v-card>
152 </v-flex> 152 </v-flex>
153 </v-dialog> 153 </v-dialog>
154 154
155 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 155 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
156 156
157 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 157 <v-dialog v-model="dialogAddLecture" max-width="1000px">
158 <v-flex xs12 sm12> 158 <v-flex xs12 sm12>
159 <v-toolbar color="grey lighten-2"> 159 <v-toolbar color="grey lighten-2">
160 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
161 <v-toolbar-title> 161 <v-toolbar-title>
162 <h3>Add Lecture</h3> 162 <h3>Add Lecture</h3>
163 </v-toolbar-title> 163 </v-toolbar-title>
164 <v-spacer></v-spacer> 164 <v-spacer></v-spacer>
165 </v-toolbar> 165 </v-toolbar>
166 <v-card flat> 166 <v-card flat>
167 <v-form ref="lectureForm" v-model="valid" lazy-validation> 167 <v-form ref="lectureForm" v-model="valid" lazy-validation>
168 <v-container fluid> 168 <v-container fluid>
169 <v-flex xs12 sm12> 169 <v-flex xs12 sm12>
170 <v-layout> 170 <v-layout>
171 <v-flex xs4 class="pt-4 subheading"> 171 <v-flex xs4 class="pt-4 subheading">
172 <label class="right">Subject Name:</label> 172 <label class="right">Subject Name:</label>
173 </v-flex> 173 </v-flex>
174 <v-flex xs5 class="ml-3"> 174 <v-flex xs5 class="ml-3">
175 <v-text-field 175 <v-text-field
176 v-model="addlectures.subjectName" 176 v-model="addlectures.subjectName"
177 :rules="subjectNameRules" 177 :rules="subjectNameRules"
178 placeholder="fill your Subject Name" 178 placeholder="fill your Subject Name"
179 type="text" 179 type="text"
180 ></v-text-field> 180 ></v-text-field>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 </v-flex> 183 </v-flex>
184 <v-flex xs12 sm12> 184 <v-flex xs12 sm12>
185 <v-layout> 185 <v-layout>
186 <v-flex xs4 class="pt-4 subheading"> 186 <v-flex xs4 class="pt-4 subheading">
187 <label class="right">Time In:</label> 187 <label class="right">Time In:</label>
188 </v-flex> 188 </v-flex>
189 <v-flex xs5 class="ml-3"> 189 <v-flex xs5 class="ml-3">
190 <v-menu 190 <v-menu
191 ref="menuD" 191 ref="menuD"
192 :close-on-content-click="false" 192 :close-on-content-click="false"
193 v-model="menu5" 193 v-model="menu5"
194 :nudge-right="40" 194 :nudge-right="40"
195 lazy 195 lazy
196 transition="scale-transition" 196 transition="scale-transition"
197 offset-y 197 offset-y
198 full-width 198 full-width
199 max-width="290px" 199 max-width="290px"
200 min-width="290px" 200 min-width="290px"
201 > 201 >
202 <v-text-field 202 <v-text-field
203 slot="activator" 203 slot="activator"
204 v-model="addlectures.timeIn" 204 v-model="addlectures.timeIn"
205 label="Select your Time In" 205 label="Select your Time In"
206 append-icon="access_time" 206 append-icon="access_time"
207 :rules="timeInRules" 207 :rules="timeInRules"
208 ></v-text-field> 208 ></v-text-field>
209 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> 209 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
210 </v-menu> 210 </v-menu>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 <v-flex xs12 sm12> 214 <v-flex xs12 sm12>
215 <v-layout> 215 <v-layout>
216 <v-flex xs4 class="pt-4 subheading"> 216 <v-flex xs4 class="pt-4 subheading">
217 <label class="right">Time Out:</label> 217 <label class="right">Time Out:</label>
218 </v-flex> 218 </v-flex>
219 <v-flex xs5 class="ml-3"> 219 <v-flex xs5 class="ml-3">
220 <v-menu 220 <v-menu
221 ref="menuE" 221 ref="menuE"
222 :close-on-content-click="false" 222 :close-on-content-click="false"
223 v-model="menu6" 223 v-model="menu6"
224 :nudge-right="40" 224 :nudge-right="40"
225 lazy 225 lazy
226 transition="scale-transition" 226 transition="scale-transition"
227 offset-y 227 offset-y
228 full-width 228 full-width
229 max-width="290px" 229 max-width="290px"
230 min-width="290px" 230 min-width="290px"
231 > 231 >
232 <v-text-field 232 <v-text-field
233 slot="activator" 233 slot="activator"
234 :rules="timeOutRules" 234 :rules="timeOutRules"
235 v-model="addlectures.timeOut" 235 v-model="addlectures.timeOut"
236 label="Select your Time Out" 236 label="Select your Time Out"
237 append-icon="access_time" 237 append-icon="access_time"
238 ></v-text-field> 238 ></v-text-field>
239 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> 239 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
240 </v-menu> 240 </v-menu>
241 </v-flex> 241 </v-flex>
242 </v-layout> 242 </v-layout>
243 </v-flex> 243 </v-flex>
244 <v-flex xs12 sm12> 244 <v-flex xs12 sm12>
245 <v-layout> 245 <v-layout>
246 <v-flex xs4 class="pt-4 subheading"> 246 <v-flex xs4 class="pt-4 subheading">
247 <label class="right">Select Teacher:</label> 247 <label class="right">Select Teacher:</label>
248 </v-flex> 248 </v-flex>
249 <v-flex xs5 class="ml-3"> 249 <v-flex xs5 class="ml-3">
250 <v-select 250 <v-select
251 :items="addTeachers" 251 :items="addTeachers"
252 v-model="addlectures.teacherId" 252 v-model="addlectures.teacherId"
253 :rules="subjectNameRules" 253 :rules="subjectNameRules"
254 item-text="name" 254 item-text="name"
255 item-value="_id" 255 item-value="_id"
256 required 256 required
257 ></v-select> 257 ></v-select>
258 </v-flex> 258 </v-flex>
259 </v-layout> 259 </v-layout>
260 </v-flex> 260 </v-flex>
261 <v-layout> 261 <v-layout>
262 <v-flex xs12 sm8 offset-sm2> 262 <v-flex xs12 sm8 offset-sm2>
263 <v-card-actions> 263 <v-card-actions>
264 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 264 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
265 <v-spacer></v-spacer> 265 <v-spacer></v-spacer>
266 <v-btn round dark @click="AddLecture">Save</v-btn> 266 <v-btn round dark @click="AddLecture">Save</v-btn>
267 </v-card-actions> 267 </v-card-actions>
268 </v-flex> 268 </v-flex>
269 </v-layout> 269 </v-layout>
270 </v-container> 270 </v-container>
271 </v-form> 271 </v-form>
272 </v-card> 272 </v-card>
273 </v-flex> 273 </v-flex>
274 </v-dialog> 274 </v-dialog>
275 275
276 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 276 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
277 277
278 <v-dialog v-model="dialogUpdateLectures" max-width="600px"> 278 <v-dialog v-model="dialogUpdateLectures" max-width="600px">
279 <v-flex xs12 sm12 class> 279 <v-flex xs12 sm12 class>
280 <v-toolbar color="grey lighten-2"> 280 <v-toolbar color="grey lighten-2">
281 <v-spacer></v-spacer> 281 <v-spacer></v-spacer>
282 <v-toolbar-title>Edit Lecture</v-toolbar-title> 282 <v-toolbar-title>Edit Lecture</v-toolbar-title>
283 <v-spacer></v-spacer> 283 <v-spacer></v-spacer>
284 </v-toolbar> 284 </v-toolbar>
285 <v-card flat class="pa-2"> 285 <v-card flat class="pa-2">
286 <v-flex xs12 sm12> 286 <v-flex xs12 sm12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs5 sm4 class="pt-4 subheading"> 288 <v-flex xs5 sm4 class="pt-4 subheading">
289 <label class="right">Subject Name:</label> 289 <label class="right">Subject Name:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs7 sm6 class="ml-3"> 291 <v-flex xs7 sm6 class="ml-3">
292 <v-text-field 292 <v-text-field
293 v-model="updateLectures.subjectName" 293 v-model="updateLectures.subjectName"
294 placeholder="fill your Subject Name" 294 placeholder="fill your Subject Name"
295 type="text" 295 type="text"
296 ></v-text-field> 296 ></v-text-field>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-flex> 299 </v-flex>
300 <v-flex xs12 sm12> 300 <v-flex xs12 sm12>
301 <v-layout> 301 <v-layout>
302 <v-flex xs5 sm4 class="pt-4 subheading"> 302 <v-flex xs5 sm4 class="pt-4 subheading">
303 <label class="right">Time In:</label> 303 <label class="right">Time In:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs7 sm6 class="ml-3"> 305 <v-flex xs7 sm6 class="ml-3">
306 <v-menu 306 <v-menu
307 ref="menuC" 307 ref="menuC"
308 :close-on-content-click="false" 308 :close-on-content-click="false"
309 v-model="menu4" 309 v-model="menu4"
310 :nudge-right="40" 310 :nudge-right="40"
311 lazy 311 lazy
312 transition="scale-transition" 312 transition="scale-transition"
313 offset-y 313 offset-y
314 full-width 314 full-width
315 max-width="290px" 315 max-width="290px"
316 min-width="290px" 316 min-width="290px"
317 > 317 >
318 <v-text-field 318 <v-text-field
319 slot="activator" 319 slot="activator"
320 v-model="updateLectures.timeIn" 320 v-model="updateLectures.timeIn"
321 placeholder="Select your Time In" 321 placeholder="Select your Time In"
322 append-icon="access_time" 322 append-icon="access_time"
323 ></v-text-field> 323 ></v-text-field>
324 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> 324 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
325 </v-menu> 325 </v-menu>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12 sm12> 329 <v-flex xs12 sm12>
330 <v-layout> 330 <v-layout>
331 <v-flex xs5 sm4 class="pt-4 subheading"> 331 <v-flex xs5 sm4 class="pt-4 subheading">
332 <label class="right">Time Out:</label> 332 <label class="right">Time Out:</label>
333 </v-flex> 333 </v-flex>
334 <v-flex xs7 sm6 class="ml-3"> 334 <v-flex xs7 sm6 class="ml-3">
335 <v-menu 335 <v-menu
336 ref="menuB" 336 ref="menuB"
337 :close-on-content-click="false" 337 :close-on-content-click="false"
338 v-model="menu3" 338 v-model="menu3"
339 :nudge-right="40" 339 :nudge-right="40"
340 lazy 340 lazy
341 transition="scale-transition" 341 transition="scale-transition"
342 offset-y 342 offset-y
343 full-width 343 full-width
344 max-width="290px" 344 max-width="290px"
345 min-width="290px" 345 min-width="290px"
346 > 346 >
347 <v-text-field 347 <v-text-field
348 slot="activator" 348 slot="activator"
349 v-model="updateLectures.timeOut" 349 v-model="updateLectures.timeOut"
350 placeholder="Select your Time Out" 350 placeholder="Select your Time Out"
351 append-icon="access_time" 351 append-icon="access_time"
352 ></v-text-field> 352 ></v-text-field>
353 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> 353 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
354 </v-menu> 354 </v-menu>
355 </v-flex> 355 </v-flex>
356 </v-layout> 356 </v-layout>
357 </v-flex> 357 </v-flex>
358 <v-flex xs12 sm12> 358 <v-flex xs12 sm12>
359 <v-layout> 359 <v-layout>
360 <v-flex xs5 sm4 class="pt-4 subheading"> 360 <v-flex xs5 sm4 class="pt-4 subheading">
361 <label class="right">Select Teacher:</label> 361 <label class="right">Select Teacher:</label>
362 </v-flex> 362 </v-flex>
363 <v-flex xs7 sm6 class="ml-3"> 363 <v-flex xs7 sm6 class="ml-3">
364 <v-select 364 <v-select
365 :items="addTeachers" 365 :items="addTeachers"
366 label="Select Teacher" 366 label="Select Teacher"
367 v-model="updateLectures.teacherId" 367 v-model="updateLectures.teacherId"
368 item-text="name" 368 item-text="name"
369 item-value="_id" 369 item-value="_id"
370 required 370 required
371 ></v-select> 371 ></v-select>
372 </v-flex> 372 </v-flex>
373 </v-layout> 373 </v-layout>
374 </v-flex> 374 </v-flex>
375 <v-layout> 375 <v-layout>
376 <v-flex xs12 sm10 offset-sm1> 376 <v-flex xs12 sm10 offset-sm1>
377 <v-card-actions> 377 <v-card-actions>
378 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 378 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
379 <v-spacer></v-spacer> 379 <v-spacer></v-spacer>
380 <v-btn 380 <v-btn
381 round 381 round
382 dark 382 dark
383 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" 383 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
384 >Save</v-btn> 384 >Save</v-btn>
385 </v-card-actions> 385 </v-card-actions>
386 </v-flex> 386 </v-flex>
387 </v-layout> 387 </v-layout>
388 </v-card> 388 </v-card>
389 </v-flex> 389 </v-flex>
390 </v-dialog> 390 </v-dialog>
391 <v-snackbar 391 <v-snackbar
392 :timeout="timeout" 392 :timeout="timeout"
393 :top="y === 'top'" 393 :top="y === 'top'"
394 :right="x === 'right'" 394 :right="x === 'right'"
395 :vertical="mode === 'vertical'" 395 :vertical="mode === 'vertical'"
396 v-model="snackbar" 396 v-model="snackbar"
397 color="success" 397 color="success"
398 >{{ text }}</v-snackbar> 398 >{{ text }}</v-snackbar>
399 399
400 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 400 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
401 401
402 <v-card flat> 402 <v-card flat>
403 <v-card-actions class="hidden-xs-only hidden-sm-only"> 403 <v-card-actions class="hidden-xs-only hidden-sm-only">
404 <v-layout> 404 <v-layout>
405 <label class="right mt-4 ml-5">Select Class:</label> 405 <label class="right mt-4 ml-5">Select Class:</label>
406 <v-select 406 <v-select
407 :items="addclass" 407 :items="addclass"
408 label="Select Class" 408 label="Select Class"
409 v-model="selectTimeTable.select" 409 v-model="selectTimeTable.select"
410 item-text="classNum" 410 item-text="classNum"
411 item-value="_id" 411 item-value="_id"
412 name="Select Class" 412 name="Select Class"
413 @change="getSections(selectTimeTable.select)" 413 @change="getSections(selectTimeTable.select)"
414 class="px-4" 414 class="px-4"
415 required 415 required
416 ></v-select> 416 ></v-select>
417 <label class="right mt-4">Select Section:</label> 417 <label class="right mt-4">Select Section:</label>
418 <v-select 418 <v-select
419 :items="addSection" 419 :items="addSection"
420 label="Select Section" 420 label="Select Section"
421 v-model="selectTimeTable.selectSection" 421 v-model="selectTimeTable.selectSection"
422 item-text="name" 422 item-text="name"
423 item-value="_id" 423 item-value="_id"
424 name="Select Section" 424 name="Select Section"
425 class="pl-3" 425 class="pl-3"
426 required 426 required
427 ></v-select> 427 ></v-select>
428 </v-layout> 428 </v-layout>
429 <v-spacer></v-spacer> 429 <v-spacer></v-spacer>
430 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn> 430 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn>
431 </v-card-actions> 431 </v-card-actions>
432 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 432 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
433 <v-flex xs4 sm2 class="mt-4 ml-2"> 433 <v-flex xs4 sm2 class="mt-4 ml-2">
434 <label>Select Class:</label> 434 <label>Select Class:</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs6 sm9> 436 <v-flex xs6 sm9>
437 <v-select 437 <v-select
438 :items="addclass" 438 :items="addclass"
439 label="Select Class" 439 label="Select Class"
440 v-model="selectTimeTable.select" 440 v-model="selectTimeTable.select"
441 item-text="classNum" 441 item-text="classNum"
442 item-value="_id" 442 item-value="_id"
443 name="Select Class" 443 name="Select Class"
444 @change="getSections(selectTimeTable.select)" 444 @change="getSections(selectTimeTable.select)"
445 required 445 required
446 ></v-select> 446 ></v-select>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 449 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
450 <v-flex xs4 sm2 class="mt-4 ml-2"> 450 <v-flex xs4 sm2 class="mt-4 ml-2">
451 <label>Select Section:</label> 451 <label>Select Section:</label>
452 </v-flex> 452 </v-flex>
453 <v-flex xs6 sm9> 453 <v-flex xs6 sm9>
454 <v-select 454 <v-select
455 :items="addSection" 455 :items="addSection"
456 label="Select Section" 456 label="Select Section"
457 v-model="selectTimeTable.selectSection" 457 v-model="selectTimeTable.selectSection"
458 item-text="name" 458 item-text="name"
459 item-value="_id" 459 item-value="_id"
460 name="Select Section" 460 name="Select Section"
461 required 461 required
462 ></v-select> 462 ></v-select>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 465 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
466 <v-flex xs12> 466 <v-flex xs12>
467 <v-btn 467 <v-btn
468 @click="findTimeTable()" 468 @click="findTimeTable()"
469 round 469 round
470 dark 470 dark
471 :loading="loading" 471 :loading="loading"
472 class="right mr-4 mb-2" 472 class="right mr-4 mb-2"
473 >Find</v-btn> 473 >Find</v-btn>
474 </v-flex> 474 </v-flex>
475 </v-layout> 475 </v-layout>
476 </v-card> 476 </v-card>
477 <v-flex xs12> 477 <v-flex xs12>
478 <v-data-table 478 <v-data-table
479 :headers="headers" 479 :headers="headers"
480 :items="desserts" 480 :items="desserts"
481 :pagination.sync="pagination" 481 :pagination.sync="pagination"
482 :search="search" 482 :search="search"
483 item-key="_id" 483 item-key="_id"
484 > 484 >
485 <template slot="items" slot-scope="props"> 485 <template slot="items" slot-scope="props">
486 <tr 486 <tr
487 style="cursor: pointer;" 487 style="cursor: pointer;"
488 @click="getTimeTable(props.item), props.expanded = !props.expanded" 488 @click="getTimeTable(props.item), props.expanded = !props.expanded"
489 > 489 >
490 <td class="text-xs-center">{{ props.index + 1}}</td> 490 <td class="text-xs-center">{{ props.index + 1}}</td>
491 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 491 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
492 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 492 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
493 <td class="text-xs-center"> 493 <td class="text-xs-center">
494 <span> 494 <span>
495 <v-tooltip top> 495 <v-tooltip top>
496 <img 496 <img
497 slot="activator" 497 slot="activator"
498 style="cursor:pointer; width:20px; height:18px; " 498 style="cursor:pointer; width:20px; height:18px; "
499 class="mr5" 499 class="mr5"
500 @click="editItem(props.item)" 500 @click="editItem(props.item)"
501 src="/static/icon/edit1.png" 501 src="/static/icon/edit1.png"
502 /> 502 />
503 <span>Edit</span> 503 <span>Edit</span>
504 </v-tooltip> 504 </v-tooltip>
505 <v-tooltip top> 505 <v-tooltip top>
506 <img 506 <img
507 slot="activator" 507 slot="activator"
508 style="cursor:pointer; width:20px; height:20px; " 508 style="cursor:pointer; width:20px; height:20px; "
509 class="mr5" 509 class="mr5"
510 @click="deleteItem(props.item)" 510 @click="deleteItem(props.item)"
511 src="/static/icon/delete1.png" 511 src="/static/icon/delete1.png"
512 /> 512 />
513 <span>Delete</span> 513 <span>Delete</span>
514 </v-tooltip> 514 </v-tooltip>
515 <v-tooltip top> 515 <v-tooltip top>
516 <img 516 <img
517 slot="activator" 517 slot="activator"
518 style="cursor:pointer; width:20px; height:20px; " 518 style="cursor:pointer; width:20px; height:20px; "
519 src="/static/icon/add1.png" 519 src="/static/icon/add1.png"
520 @click="addSchedule(props.item._id)" 520 @click="addSchedule(props.item._id)"
521 /> 521 />
522 <span>Add</span> 522 <span>Add</span>
523 </v-tooltip> 523 </v-tooltip>
524 <!-- <v-icon color="black" >add_circle_outline</v-icon> --> 524 <!-- <v-icon color="black" >add_circle_outline</v-icon> -->
525 </span> 525 </span>
526 </td> 526 </td>
527 </tr> 527 </tr>
528 </template> 528 </template>
529 <template slot="expand" slot-scope="props"> 529 <template slot="expand" slot-scope="props">
530 <v-data-table 530 <v-data-table
531 :items="timeTableList.schedule" 531 :items="timeTableList.schedule"
532 hide-actions 532 hide-actions
533 item-key="title" 533 item-key="title"
534 style="width: auto;" 534 style="width: auto;"
535 > 535 >
536 <template slot="items" slot-scope="props"> 536 <template slot="items" slot-scope="props">
537 <tr> 537 <tr>
538 <td class="text-xs-left subheading table-td"> 538 <td class="text-xs-left subheading table-td">
539 <b>{{ props.item.day }}</b> 539 <b>{{ props.item.day }}</b>
540 </td> 540 </td>
541 <td class="table-td"> 541 <td class="table-td">
542 <b>Subject</b> 542 <b>Subject</b>
543 <br /> 543 <br />
544 <b>Time In</b> 544 <b>Time In</b>
545 <br /> 545 <br />
546 <b>Time Out</b> 546 <b>Time Out</b>
547 </td> 547 </td>
548 <td v-for="list in props.item.lectures" class="table-td"> 548 <td v-for="list in props.item.lectures" class="table-td">
549 <b>{{ list.subjectName }}</b> 549 <b>{{ list.subjectName }}</b>
550 <img 550 <img
551 style="cursor:pointer; width:20px; height:18px; " 551 style="cursor:pointer; width:20px; height:18px; "
552 class="mr-2 ml-2" 552 class="mr-2 ml-2"
553 src="/static/icon/edit1.png" 553 src="/static/icon/edit1.png"
554 @click="updateTimeTable(list, timeTableList)" 554 @click="updateTimeTable(list, timeTableList)"
555 /> 555 />
556 <img 556 <img
557 style="cursor:pointer; width:20px; height:20px; " 557 style="cursor:pointer; width:20px; height:20px; "
558 src="/static/icon/delete1.png" 558 src="/static/icon/delete1.png"
559 @click="deleteTimeTable(list,props.item.lectures)" 559 @click="deleteTimeTable(list,props.item.lectures)"
560 /> 560 />
561 <br /> 561 <br />
562 {{list.timeIn}} 562 {{list.timeIn}}
563 <br /> 563 <br />
564 {{list.timeOut}} 564 {{list.timeOut}}
565 </td> 565 </td>
566 <td> 566 <td>
567 <v-tooltip top> 567 <v-tooltip top>
568 <v-icon 568 <v-icon
569 slot="activator" 569 slot="activator"
570 color="black" 570 color="black"
571 @click="addLecture(props.item._id, timeTableList._id)" 571 @click="addLecture(props.item._id, timeTableList._id)"
572 >add_circle_outline</v-icon> 572 >add_circle_outline</v-icon>
573 <span>Add</span> 573 <span>Add</span>
574 </v-tooltip> 574 </v-tooltip>
575 </td> 575 </td>
576 </tr> 576 </tr>
577 </template> 577 </template>
578 </v-data-table> 578 </v-data-table>
579 </template> 579 </template>
580 <v-alert 580 <v-alert
581 slot="no-results" 581 slot="no-results"
582 :value="true" 582 :value="true"
583 color="error" 583 color="error"
584 icon="warning" 584 icon="warning"
585 >Your search for "{{ search }}" found no results.</v-alert> 585 >Your search for "{{ search }}" found no results.</v-alert>
586 </v-data-table> 586 </v-data-table>
587 <br /> 587 <br />
588 <br /> 588 <br />
589 </v-flex> 589 </v-flex>
590 </v-tab-item> 590 </v-tab-item>
591 591
592 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 592 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
593 593
594 <v-tab-item> 594 <v-tab-item>
595 <v-container> 595 <v-container>
596 <v-snackbar 596 <v-snackbar
597 :timeout="timeout" 597 :timeout="timeout"
598 :top="y === 'top'" 598 :top="y === 'top'"
599 :right="x === 'right'" 599 :right="x === 'right'"
600 :vertical="mode === 'vertical'" 600 :vertical="mode === 'vertical'"
601 v-model="snackbar" 601 v-model="snackbar"
602 color="success" 602 color="success"
603 >{{ text }}</v-snackbar> 603 >{{ text }}</v-snackbar>
604 <v-flex xs12 sm12 class="my-5"> 604 <v-flex xs12 sm12 class="my-5">
605 <v-card flat> 605 <v-card flat>
606 <v-form ref="form" v-model="valid" lazy-validation> 606 <v-form ref="form" v-model="valid" lazy-validation>
607 <v-container fluid class="pt-3"> 607 <v-container fluid class="pt-3">
608 <v-flex xs12> 608 <v-flex xs12>
609 <v-layout> 609 <v-layout>
610 <v-flex xs4 class="pt-4 subheading"> 610 <v-flex xs4 class="pt-4 subheading">
611 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 611 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
612 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 612 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
613 </v-flex> 613 </v-flex>
614 <v-flex xs8 sm4 class="ml-3"> 614 <v-flex xs8 sm4 class="ml-3">
615 <v-select 615 <v-select
616 :items="addclass" 616 :items="addclass"
617 label="Select Class" 617 label="Select Class"
618 v-model="timeTable.select" 618 v-model="timeTable.select"
619 item-text="classNum" 619 item-text="classNum"
620 item-value="_id" 620 item-value="_id"
621 @change="getSections(timeTable.select)" 621 @change="getSections(timeTable.select)"
622 required 622 required
623 ></v-select> 623 ></v-select>
624 </v-flex> 624 </v-flex>
625 </v-layout> 625 </v-layout>
626 </v-flex> 626 </v-flex>
627 <v-flex xs12> 627 <v-flex xs12>
628 <v-layout> 628 <v-layout>
629 <v-flex xs4 class="pt-4 subheading"> 629 <v-flex xs4 class="pt-4 subheading">
630 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 630 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
631 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 631 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
632 </v-flex> 632 </v-flex>
633 <v-flex sm4 xs8 class="ml-3"> 633 <v-flex sm4 xs8 class="ml-3">
634 <v-select 634 <v-select
635 :items="addSection" 635 :items="addSection"
636 label="Select Section" 636 label="Select Section"
637 v-model="timeTable.selectSection" 637 v-model="timeTable.selectSection"
638 item-text="name" 638 item-text="name"
639 item-value="_id" 639 item-value="_id"
640 required 640 required
641 ></v-select> 641 ></v-select>
642 </v-flex> 642 </v-flex>
643 </v-layout> 643 </v-layout>
644 </v-flex> 644 </v-flex>
645 <v-flex xs12> 645 <v-flex xs12>
646 <v-layout> 646 <v-layout>
647 <v-flex xs4 class="pt-4 subheading"> 647 <v-flex xs4 class="pt-4 subheading">
648 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> 648 <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
649 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> 649 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
650 </v-flex> 650 </v-flex>
651 <v-flex xs8 sm4 class="ml-3"> 651 <v-flex xs8 sm4 class="ml-3">
652 <v-select 652 <v-select
653 :items="addTeachers" 653 :items="addTeachers"
654 label="Select Teacher" 654 label="Select Teacher"
655 v-model="timeTable.selectTeacher" 655 v-model="timeTable.selectTeacher"
656 item-text="name" 656 item-text="name"
657 item-value="_id" 657 item-value="_id"
658 required 658 required
659 ></v-select> 659 ></v-select>
660 </v-flex> 660 </v-flex>
661 </v-layout> 661 </v-layout>
662 </v-flex> 662 </v-flex>
663 <v-flex xs12> 663 <v-flex xs12>
664 <v-layout> 664 <v-layout>
665 <v-flex xs4 class="pt-4 subheading"> 665 <v-flex xs4 class="pt-4 subheading">
666 <label class="right">Select Day:</label> 666 <label class="right">Select Day:</label>
667 </v-flex> 667 </v-flex>
668 <v-flex xs8 sm4 class="ml-3"> 668 <v-flex xs8 sm4 class="ml-3">
669 <v-select 669 <v-select
670 :items="addOneDay" 670 :items="addOneDay"
671 label="Select Day" 671 label="Select Day"
672 v-model="timeTable.selectDay" 672 v-model="timeTable.selectDay"
673 item-text="name" 673 item-text="name"
674 item-value="_id" 674 item-value="_id"
675 required 675 required
676 ></v-select> 676 ></v-select>
677 </v-flex> 677 </v-flex>
678 </v-layout> 678 </v-layout>
679 </v-flex> 679 </v-flex>
680 <v-flex xs12> 680 <v-flex xs12>
681 <v-layout> 681 <v-layout>
682 <v-flex xs4 class="pt-4 subheading"> 682 <v-flex xs4 class="pt-4 subheading">
683 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> 683 <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
684 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 684 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
685 </v-flex> 685 </v-flex>
686 <v-flex xs8 sm4 class="ml-3"> 686 <v-flex xs8 sm4 class="ml-3">
687 <v-text-field 687 <v-text-field
688 placeholder="fill your Subject Name" 688 placeholder="fill your Subject Name"
689 :rules="subjectNameRules" 689 :rules="subjectNameRules"
690 v-model="timeTable.subjectName" 690 v-model="timeTable.subjectName"
691 type="text" 691 type="text"
692 required 692 required
693 ></v-text-field> 693 ></v-text-field>
694 </v-flex> 694 </v-flex>
695 </v-layout> 695 </v-layout>
696 </v-flex> 696 </v-flex>
697 <v-flex xs12> 697 <v-flex xs12>
698 <v-layout> 698 <v-layout>
699 <v-flex xs4 class="pt-4 subheading"> 699 <v-flex xs4 class="pt-4 subheading">
700 <label class="right">Time In:</label> 700 <label class="right">Time In:</label>
701 </v-flex> 701 </v-flex>
702 <v-flex xs8 sm4 class="ml-3"> 702 <v-flex xs8 sm4 class="ml-3">
703 <v-menu 703 <v-menu
704 ref="menuA" 704 ref="menuA"
705 :close-on-content-click="false" 705 :close-on-content-click="false"
706 v-model="menu2" 706 v-model="menu2"
707 :nudge-right="40" 707 :nudge-right="40"
708 :return-value.sync="timeTable.timeIn" 708 :return-value.sync="timeTable.timeIn"
709 lazy 709 lazy
710 transition="scale-transition" 710 transition="scale-transition"
711 offset-y 711 offset-y
712 full-width 712 full-width
713 max-width="290px" 713 max-width="290px"
714 min-width="290px" 714 min-width="290px"
715 > 715 >
716 <v-text-field 716 <v-text-field
717 slot="activator" 717 slot="activator"
718 v-model="timeTable.timeIn" 718 v-model="timeTable.timeIn"
719 label="Select your timeIn" 719 label="Select your timeIn"
720 append-icon="access_time" 720 append-icon="access_time"
721 ></v-text-field> 721 ></v-text-field>
722 <v-time-picker 722 <v-time-picker
723 v-model="timeTable.timeIn" 723 v-model="timeTable.timeIn"
724 @change="$refs.menuA.save(timeTable.timeIn)" 724 @change="$refs.menuA.save(timeTable.timeIn)"
725 ></v-time-picker> 725 ></v-time-picker>
726 </v-menu> 726 </v-menu>
727 </v-flex> 727 </v-flex>
728 </v-layout> 728 </v-layout>
729 </v-flex> 729 </v-flex>
730 <v-flex xs12> 730 <v-flex xs12>
731 <v-layout> 731 <v-layout>
732 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
733 <label class="right">Time Out:</label> 733 <label class="right">Time Out:</label>
734 </v-flex> 734 </v-flex>
735 <v-flex xs8 sm4 class="ml-3"> 735 <v-flex xs8 sm4 class="ml-3">
736 <v-menu 736 <v-menu
737 ref="menu" 737 ref="menu"
738 :close-on-content-click="false" 738 :close-on-content-click="false"
739 v-model="menu1" 739 v-model="menu1"
740 :nudge-right="40" 740 :nudge-right="40"
741 :return-value.sync="timeTable.timeOut" 741 :return-value.sync="timeTable.timeOut"
742 lazy 742 lazy
743 transition="scale-transition" 743 transition="scale-transition"
744 offset-y 744 offset-y
745 full-width 745 full-width
746 max-width="290px" 746 max-width="290px"
747 min-width="290px" 747 min-width="290px"
748 > 748 >
749 <v-text-field 749 <v-text-field
750 slot="activator" 750 slot="activator"
751 v-model="timeTable.timeOut" 751 v-model="timeTable.timeOut"
752 label="Select your Time Out" 752 label="Select your Time Out"
753 append-icon="access_time" 753 append-icon="access_time"
754 ></v-text-field> 754 ></v-text-field>
755 <v-time-picker 755 <v-time-picker
756 v-model="timeTable.timeOut" 756 v-model="timeTable.timeOut"
757 @change="$refs.menu.save(timeTable.timeOut)" 757 @change="$refs.menu.save(timeTable.timeOut)"
758 ></v-time-picker> 758 ></v-time-picker>
759 </v-menu> 759 </v-menu>
760 </v-flex> 760 </v-flex>
761 </v-layout> 761 </v-layout>
762 </v-flex> 762 </v-flex>
763 <v-layout> 763 <v-layout>
764 <v-flex xs12 sm12> 764 <v-flex xs12 sm12>
765 <v-layout> 765 <v-layout>
766 <v-flex xs4 md4 class="ml-4"> 766 <v-flex xs4 md4 class="ml-4">
767 <v-btn @click="clear" round class="right" dark>clear</v-btn> 767 <v-btn @click="clear" round class="right" dark>clear</v-btn>
768 </v-flex> 768 </v-flex>
769 <v-flex xs8 sm5 md4> 769 <v-flex xs8 sm5 md4>
770 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 770 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
771 </v-flex> 771 </v-flex>
772 </v-layout> 772 </v-layout>
773 </v-flex> 773 </v-flex>
774 </v-layout> 774 </v-layout>
775 </v-container> 775 </v-container>
776 </v-form> 776 </v-form>
777 </v-card> 777 </v-card>
778 </v-flex> 778 </v-flex>
779 </v-container> 779 </v-container>
780 </v-tab-item> 780 </v-tab-item>
781 </v-tabs> 781 </v-tabs>
782 <div class="loader" v-if="showLoader"> 782 <div class="loader" v-if="showLoader">
783 <v-progress-circular indeterminate color="white"></v-progress-circular> 783 <v-progress-circular indeterminate color="white"></v-progress-circular>
784 </div> 784 </div>
785 </v-app> 785 </v-app>
786 </template> 786 </template>
787 <script> 787 <script>
788 import http from "@/Services/http.js"; 788 import http from "@/Services/http.js";
789 import Util from "@/util"; 789 import Util from "@/util";
790 790
791 export default { 791 export default {
792 data: () => ({ 792 data: () => ({
793 y: "top", 793 y: "top",
794 x: "right", 794 x: "right",
795 mode: "", 795 mode: "",
796 timeout: 3000, 796 timeout: 3000,
797 text: "", 797 text: "",
798 search: "", 798 search: "",
799 snackbar: false, 799 snackbar: false,
800 loading: false, 800 loading: false,
801 showLoader: false, 801 showLoader: false,
802 dialog: false, 802 dialog: false,
803 dialogAddLecture: false, 803 dialogAddLecture: false,
804 dialogUpdateLectures: false, 804 dialogUpdateLectures: false,
805 dialogSchedule: false, 805 dialogSchedule: false,
806 dialog1: false, 806 dialog1: false,
807 valid: true, 807 valid: true,
808 isActive: true, 808 isActive: true,
809 newActive: false, 809 newActive: false,
810 addclass: [], 810 addclass: [],
811 addSection: [], 811 addSection: [],
812 addTeachers: [], 812 addTeachers: [],
813 gender: ["Male", "Female"], 813 gender: ["Male", "Female"],
814 AddUsercredentials: {}, 814 AddUsercredentials: {},
815 pagination: { 815 pagination: {
816 rowsPerPage: 15 816 rowsPerPage: 15
817 }, 817 },
818 imageData: {}, 818 imageData: {},
819 imageName: "", 819 imageName: "",
820 imageUrl: "", 820 imageUrl: "",
821 imageFile: "", 821 imageFile: "",
822 timeInRules: [v => !!v || "Time In is required"], 822 timeInRules: [v => !!v || "Time In is required"],
823 timeOutRules: [v => !!v || "Time Out is required"], 823 timeOutRules: [v => !!v || "Time Out is required"],
824 lectureRules: [v => !!v || "Lecture No is required"], 824 lectureRules: [v => !!v || "Lecture No is required"],
825 subjectNameRules: [v => !!v || "Subject Name is required"], 825 subjectNameRules: [v => !!v || "Subject Name is required"],
826 getParticulerLecture: "", 826 getParticulerLecture: "",
827 headers: [ 827 headers: [
828 { 828 {
829 text: "No", 829 text: "No",
830 align: "center", 830 align: "center",
831 sortable: false, 831 sortable: false,
832 value: "No" 832 value: "No"
833 }, 833 },
834 { 834 {
835 text: "Class Name", 835 text: "Class Name",
836 value: "classData.classNum", 836 value: "classData.classNum",
837 sortable: false, 837 sortable: false,
838 align: "center" 838 align: "center"
839 }, 839 },
840 { 840 {
841 text: "Section Name", 841 text: "Section Name",
842 value: "sectionData.name", 842 value: "sectionData.name",
843 sortable: false, 843 sortable: false,
844 align: "center" 844 align: "center"
845 }, 845 },
846 { text: "Action", value: "", sortable: false, align: "center" } 846 { text: "Action", value: "", sortable: false, align: "center" }
847 ], 847 ],
848 daysHeaders: [ 848 daysHeaders: [
849 { text: "Day", value: "dayday", sortable: false, align: "center" }, 849 { text: "Day", value: "dayday", sortable: false, align: "center" },
850 { 850 {
851 text: "Subject Name", 851 text: "Subject Name",
852 value: "subjectName", 852 value: "subjectName",
853 sortable: false, 853 sortable: false,
854 align: "center" 854 align: "center"
855 }, 855 },
856 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 856 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
857 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 857 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
858 ], 858 ],
859 addOneDay: [ 859 addOneDay: [
860 "Monday", 860 "Monday",
861 "Tuesday", 861 "Tuesday",
862 "Wednesday", 862 "Wednesday",
863 "Thursday", 863 "Thursday",
864 "Friday", 864 "Friday",
865 "Saturday", 865 "Saturday",
866 "Sunday" 866 "Sunday"
867 ], 867 ],
868 schedule: { 868 schedule: {
869 selectDay: "" 869 selectDay: ""
870 }, 870 },
871 desserts: [], 871 desserts: [],
872 timeTableList: [], 872 timeTableList: [],
873 editedIndex: -1, 873 editedIndex: -1,
874 selectTimeTable: { 874 selectTimeTable: {
875 select: "", 875 select: "",
876 selectSection: "" 876 selectSection: ""
877 }, 877 },
878 timeTable: { 878 timeTable: {
879 select: "", 879 select: "",
880 selectSection: "", 880 selectSection: "",
881 selectDay: "", 881 selectDay: "",
882 timeIn: null, 882 timeIn: null,
883 timeOut: null, 883 timeOut: null,
884 subjectName: "", 884 subjectName: "",
885 selectTeacher: "" 885 selectTeacher: ""
886 }, 886 },
887 editedItem: { 887 editedItem: {
888 classNum: "", 888 classNum: "",
889 selectSection: "" 889 selectSection: ""
890 }, 890 },
891 addlectures: { 891 addlectures: {
892 timeIn: null, 892 timeIn: null,
893 timeOut: null, 893 timeOut: null,
894 subjectName: "", 894 subjectName: "",
895 teacherId: "", 895 teacherId: "",
896 scheduleId: "", 896 scheduleId: "",
897 timeTableId: "" 897 timeTableId: ""
898 }, 898 },
899 updateLectures: { 899 updateLectures: {
900 timeIn: null, 900 timeIn: null,
901 timeOut: null, 901 timeOut: null,
902 subjectName: "", 902 subjectName: "",
903 teacherId: "" 903 teacherId: ""
904 }, 904 },
905 updateLecturesId: { 905 updateLecturesId: {
906 lectureId: "", 906 lectureId: "",
907 scheduleId: "" 907 scheduleId: ""
908 }, 908 },
909 menu1: false, 909 menu1: false,
910 menu2: false, 910 menu2: false,
911 menu3: false, 911 menu3: false,
912 menu4: false, 912 menu4: false,
913 menu5: false, 913 menu5: false,
914 menu6: false, 914 menu6: false,
915 scheduleDayId: "" 915 scheduleDayId: ""
916 }), 916 }),
917 methods: { 917 methods: {
918 findTimeTable() { 918 findTimeTable() {
919 http() 919 http()
920 .get("/getParticularClassTimeTable", { 920 .get("/getParticularClassTimeTable", {
921 params: { 921 params: {
922 sectionId: this.selectTimeTable.selectSection, 922 sectionId: this.selectTimeTable.selectSection,
923 classId: this.selectTimeTable.select 923 classId: this.selectTimeTable.select
924 } 924 }
925 }) 925 })
926 .then(response => { 926 .then(response => {
927 this.desserts = response.data.data; 927 this.desserts = response.data.data;
928 }) 928 })
929 .catch(error => { 929 .catch(error => {
930 console.log("err====>", error);
931 if ((this.snackbar = true)) { 930 if ((this.snackbar = true)) {
932 this.text = error.response.data.message; 931 this.text = error.response.data.message;
933 this.text = error.response.data.statusText; 932 this.text = error.response.data.statusText;
934 } 933 }
935 }); 934 });
936 }, 935 },
937 getSections(_id) { 936 getSections(_id) {
938 var token = this.$store.state.token; 937 var token = this.$store.state.token;
939 http() 938 http()
940 .get( 939 .get(
941 "/getSectionsList", 940 "/getSectionsList",
942 { params: { classId: _id } }, 941 { params: { classId: _id } },
943 { 942 {
944 headers: { Authorization: "Bearer " + token } 943 headers: { Authorization: "Bearer " + token }
945 } 944 }
946 ) 945 )
947 .then(response => { 946 .then(response => {
948 this.addSection = response.data.data; 947 this.addSection = response.data.data;
949 }) 948 })
950 .catch(err => { 949 .catch(err => {
951 // console.log("err====>", err); 950 // console.log("err====>", err);
952 }); 951 });
953 }, 952 },
954 getTimeTable(item) { 953 getTimeTable(item) {
955 this.showLoader = true; 954 this.showLoader = true;
956 this.getParticulerLecture = item._id; 955 this.getParticulerLecture = item._id;
957 var token = this.$store.state.token; 956 var token = this.$store.state.token;
958 http() 957 http()
959 .get( 958 .get(
960 "/getParticularTimeTable", 959 "/getParticularTimeTable",
961 { params: { timeTableId: item._id } }, 960 { params: { timeTableId: item._id } },
962 { 961 {
963 headers: { Authorization: "Bearer " + token } 962 headers: { Authorization: "Bearer " + token }
964 } 963 }
965 ) 964 )
966 .then(response => { 965 .then(response => {
967 this.timeTableList = response.data.data; 966 this.timeTableList = response.data.data;
968 this.showLoader = false; 967 this.showLoader = false;
969 }) 968 })
970 .catch(err => { 969 .catch(err => {
971 this.showLoader = false; 970 this.showLoader = false;
972 // console.log("err====>", err); 971 // console.log("err====>", err);
973 }); 972 });
974 }, 973 },
975 pickFile() { 974 pickFile() {
976 this.$refs.image.click(); 975 this.$refs.image.click();
977 }, 976 },
978 977
979 onFilePicked(e) { 978 onFilePicked(e) {
980 const files = e.target.files; 979 const files = e.target.files;
981 this.imageData.upload = e.target.files[0]; 980 this.imageData.upload = e.target.files[0];
982 if (files[0] !== undefined) { 981 if (files[0] !== undefined) {
983 this.imageName = files[0].name; 982 this.imageName = files[0].name;
984 if (this.imageName.lastIndexOf(".") <= 0) { 983 if (this.imageName.lastIndexOf(".") <= 0) {
985 return; 984 return;
986 } 985 }
987 const fr = new FileReader(); 986 const fr = new FileReader();
988 fr.readAsDataURL(files[0]); 987 fr.readAsDataURL(files[0]);
989 fr.addEventListener("load", () => { 988 fr.addEventListener("load", () => {
990 this.imageUrl = fr.result; 989 this.imageUrl = fr.result;
991 this.imageFile = files[0]; // this is an image file that can be sent to server... 990 this.imageFile = files[0]; // this is an image file that can be sent to server...
992 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 991 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
993 }); 992 });
994 } else { 993 } else {
995 this.imageName = ""; 994 this.imageName = "";
996 this.imageFile = ""; 995 this.imageFile = "";
997 this.imageUrl = ""; 996 this.imageUrl = "";
998 } 997 }
999 }, 998 },
1000 // getTimeTableList() { 999 // getTimeTableList() {
1001 // this.showLoader = true; 1000 // this.showLoader = true;
1002 // var token = this.$store.state.token; 1001 // var token = this.$store.state.token;
1003 // http() 1002 // http()
1004 // .get("/getTimeTablesList", { 1003 // .get("/getTimeTablesList", {
1005 // headers: { Authorization: "Bearer " + token } 1004 // headers: { Authorization: "Bearer " + token }
1006 // }) 1005 // })
1007 // .then(response => { 1006 // .then(response => {
1008 // this.desserts = response.data.data; 1007 // this.desserts = response.data.data;
1009 // this.showLoader = false; 1008 // this.showLoader = false;
1010 // // console.log("getTimeTableList=====>", response.data.data); 1009 // // console.log("getTimeTableList=====>", response.data.data);
1011 // }) 1010 // })
1012 // .catch(err => { 1011 // .catch(err => {
1013 // // console.log("err====>", err); 1012 // // console.log("err====>", err);
1014 // this.showLoader = false; 1013 // this.showLoader = false;
1015 // this.$router.replace({ path: "/" }); 1014 // this.$router.replace({ path: "/" });
1016 // }); 1015 // });
1017 // }, 1016 // },
1018 editItem(item) { 1017 editItem(item) {
1019 this.editedIndex = this.desserts.indexOf(item); 1018 this.editedIndex = this.desserts.indexOf(item);
1020 this.editedItem = Object.assign({}, item); 1019 this.editedItem = Object.assign({}, item);
1021 this.dialog = true; 1020 this.dialog = true;
1022 }, 1021 },
1023 updateTimeTable(timeToUpdate, classToUpdate) { 1022 updateTimeTable(timeToUpdate, classToUpdate) {
1024 console.log( 1023 console.log(
1025 "timeToUpdate, classToUpdate", 1024 "timeToUpdate, classToUpdate",
1026 timeToUpdate._id, 1025 timeToUpdate._id,
1027 classToUpdate.schedule 1026 classToUpdate.schedule
1028 ); 1027 );
1029 for (let i = 0; i < classToUpdate.schedule.length; i++) { 1028 for (let i = 0; i < classToUpdate.schedule.length; i++) {
1030 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; 1029 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
1031 } 1030 }
1032 (this.updateLecturesId.lectureId = timeToUpdate._id), 1031 (this.updateLecturesId.lectureId = timeToUpdate._id),
1033 (this.updateLectures = timeToUpdate); 1032 (this.updateLectures = timeToUpdate);
1034 this.dialogUpdateLectures = true; 1033 this.dialogUpdateLectures = true;
1035 }, 1034 },
1036 addLecture(scheduleId, timeTableId) { 1035 addLecture(scheduleId, timeTableId) {
1037 this.addlectures.scheduleId = scheduleId; 1036 this.addlectures.scheduleId = scheduleId;
1038 this.addlectures.timeTableId = timeTableId; 1037 this.addlectures.timeTableId = timeTableId;
1039 this.dialogAddLecture = true; 1038 this.dialogAddLecture = true;
1040 }, 1039 },
1041 AddLecture() { 1040 AddLecture() {
1042 if (this.$refs.lectureForm.validate()) { 1041 if (this.$refs.lectureForm.validate()) {
1043 http() 1042 http()
1044 .post("/addLecture", this.addlectures) 1043 .post("/addLecture", this.addlectures)
1045 .then(response => { 1044 .then(response => {
1046 this.snackbar = true; 1045 this.snackbar = true;
1047 this.text = "New Add Lecture successfully"; 1046 this.text = "New Add Lecture successfully";
1048 var token = this.$store.state.token; 1047 var token = this.$store.state.token;
1049 http() 1048 http()
1050 .get( 1049 .get(
1051 "/getParticularTimeTable", 1050 "/getParticularTimeTable",
1052 { params: { timeTableId: this.getParticulerLecture } }, 1051 { params: { timeTableId: this.getParticulerLecture } },
1053 { 1052 {
1054 headers: { Authorization: "Bearer " + token } 1053 headers: { Authorization: "Bearer " + token }
1055 } 1054 }
1056 ) 1055 )
1057 .then(response => { 1056 .then(response => {
1058 this.timeTableList = response.data.data; 1057 this.timeTableList = response.data.data;
1059 this.showLoader = false; 1058 this.showLoader = false;
1060 }) 1059 })
1061 .catch(err => { 1060 .catch(err => {
1062 this.showLoader = false; 1061 this.showLoader = false;
1063 // console.log("err====>", err); 1062 // console.log("err====>", err);
1064 }); 1063 });
1065 this.closedialogLecture(); 1064 this.closedialogLecture();
1066 this.clearLeactureData(); 1065 this.clearLeactureData();
1067 }) 1066 })
1068 .catch(error => { 1067 .catch(error => {
1069 this.snackbar = true; 1068 this.snackbar = true;
1070 this.text = error.response.data.message; 1069 this.text = error.response.data.message;
1071 this.text = error.response.data.statusText; 1070 this.text = error.response.data.statusText;
1072 }); 1071 });
1073 } 1072 }
1074 }, 1073 },
1075 updateParticularTable() { 1074 updateParticularTable() {
1076 let EditLecture = { 1075 let EditLecture = {
1077 lectureId: this.updateLecturesId.lectureId, 1076 lectureId: this.updateLecturesId.lectureId,
1078 scheduleId: this.updateLecturesId.scheduleId, 1077 scheduleId: this.updateLecturesId.scheduleId,
1079 updatedLecture: { 1078 updatedLecture: {
1080 timeIn: this.updateLectures.timeIn, 1079 timeIn: this.updateLectures.timeIn,
1081 timeOut: this.updateLectures.timeOut, 1080 timeOut: this.updateLectures.timeOut,
1082 subjectName: this.updateLectures.subjectName, 1081 subjectName: this.updateLectures.subjectName,
1083 teacherId: this.updateLectures.teacherId 1082 teacherId: this.updateLectures.teacherId
1084 } 1083 }
1085 }; 1084 };
1086 http() 1085 http()
1087 .put("/updateLecture", EditLecture) 1086 .put("/updateLecture", EditLecture)
1088 .then(response => { 1087 .then(response => {
1089 console.log("updateLecture", EditLecture); 1088 console.log("updateLecture", EditLecture);
1090 if ((this.snackbar = true)) { 1089 if ((this.snackbar = true)) {
1091 this.text = "Successfully Edit Update Lecture"; 1090 this.text = "Successfully Edit Update Lecture";
1092 } 1091 }
1093 this.closeUpdateLectures(); 1092 this.closeUpdateLectures();
1094 }) 1093 })
1095 .catch(error => { 1094 .catch(error => {
1096 // console.log(error); 1095 // console.log(error);
1097 if ((this.snackbar = true)) { 1096 if ((this.snackbar = true)) {
1098 this.text = error.response.data.message; 1097 this.text = error.response.data.message;
1099 this.text = error.response.data.statusText; 1098 this.text = error.response.data.statusText;
1100 } 1099 }
1101 }); 1100 });
1102 }, 1101 },
1103 deleteItem(item) { 1102 deleteItem(item) {
1104 let deleteTimeTable = { 1103 let deleteTimeTable = {
1105 timeTableId: item._id 1104 timeTableId: item._id
1106 }; 1105 };
1107 http() 1106 http()
1108 .delete( 1107 .delete(
1109 "/deleteTimeTable", 1108 "/deleteTimeTable",
1110 confirm("Are you sure you want to delete this?") && { 1109 confirm("Are you sure you want to delete this?") && {
1111 params: deleteTimeTable 1110 params: deleteTimeTable
1112 } 1111 }
1113 ) 1112 )
1114 .then(response => { 1113 .then(response => {
1115 // console.log("deleteUers",deleteTimeTable) 1114 // console.log("deleteUers",deleteTimeTable)
1116 this.snackbar = true; 1115 this.snackbar = true;
1117 this.text = "Successfully delete Existing Time Table"; 1116 this.text = "Successfully delete Existing Time Table";
1118 this.findTimeTable(); 1117 this.findTimeTable();
1119 }) 1118 })
1120 .catch(error => { 1119 .catch(error => {
1121 // console.log(error); 1120 // console.log(error);
1122 }); 1121 });
1123 }, 1122 },
1124 activeTab(type) { 1123 activeTab(type) {
1125 switch (type) { 1124 switch (type) {
1126 case "existing": 1125 case "existing":
1127 this.newActive = false; 1126 this.newActive = false;
1128 this.isActive = true; 1127 this.isActive = true;
1129 break; 1128 break;
1130 1129
1131 default: 1130 default:
1132 this.newActive = true; 1131 this.newActive = true;
1133 this.isActive = false; 1132 this.isActive = false;
1134 break; 1133 break;
1135 } 1134 }
1136 }, 1135 },
1137 close() { 1136 close() {
1138 this.dialog = false; 1137 this.dialog = false;
1139 setTimeout(() => { 1138 setTimeout(() => {
1140 this.editedItem = Object.assign({}, this.defaultItem); 1139 this.editedItem = Object.assign({}, this.defaultItem);
1141 this.editedIndex = -1; 1140 this.editedIndex = -1;
1142 }, 300); 1141 }, 300);
1143 }, 1142 },
1144 close1() { 1143 close1() {
1145 this.dialog1 = false; 1144 this.dialog1 = false;
1146 }, 1145 },
1147 closedialogLecture() { 1146 closedialogLecture() {
1148 this.dialogAddLecture = false; 1147 this.dialogAddLecture = false;
1149 }, 1148 },
1150 closeUpdateLectures() { 1149 closeUpdateLectures() {
1151 this.dialogUpdateLectures = false; 1150 this.dialogUpdateLectures = false;
1152 }, 1151 },
1153 submit() { 1152 submit() {
1154 if (this.$refs.form.validate()) { 1153 if (this.$refs.form.validate()) {
1155 let imageData = new FormData(); 1154 let imageData = new FormData();
1156 imageData.append("upload", this.imageFile); 1155 imageData.append("upload", this.imageFile);
1157 let addTimeTable = { 1156 let addTimeTable = {
1158 sectionId: this.timeTable.selectSection, 1157 sectionId: this.timeTable.selectSection,
1159 classId: this.timeTable.select, 1158 classId: this.timeTable.select,
1160 schedule: [ 1159 schedule: [
1161 { 1160 {
1162 day: this.timeTable.selectDay, 1161 day: this.timeTable.selectDay,
1163 lectures: [ 1162 lectures: [
1164 { 1163 {
1165 timeIn: this.timeTable.timeIn, 1164 timeIn: this.timeTable.timeIn,
1166 timeOut: this.timeTable.timeOut, 1165 timeOut: this.timeTable.timeOut,
1167 subjectName: this.timeTable.subjectName, 1166 subjectName: this.timeTable.subjectName,
1168 teacherId: this.timeTable.selectTeacher 1167 teacherId: this.timeTable.selectTeacher
1169 } 1168 }
1170 ] 1169 ]
1171 } 1170 }
1172 ] 1171 ]
1173 }; 1172 };
1174 this.loading = true; 1173 this.loading = true;
1175 http() 1174 http()
1176 .post("/createTimeTable", addTimeTable) 1175 .post("/createTimeTable", addTimeTable)
1177 .then(response => { 1176 .then(response => {
1178 // console.log("addTimeTable=====>", addTimeTable); 1177 // console.log("addTimeTable=====>", addTimeTable);
1179 if ((this.snackbar = true)) { 1178 if ((this.snackbar = true)) {
1180 this.text = "New Time Table added successfully"; 1179 this.text = "New Time Table added successfully";
1181 } 1180 }
1182 this.clear(); 1181 this.clear();
1183 this.loading = false; 1182 this.loading = false;
1184 }) 1183 })
1185 .catch(error => { 1184 .catch(error => {
1186 // console.log(error); 1185 // console.log(error);
1187 if ((this.snackbar = true)) { 1186 if ((this.snackbar = true)) {
1188 this.text = error.response.data.message; 1187 this.text = error.response.data.message;
1189 } 1188 }
1190 this.loading = false; 1189 this.loading = false;
1191 }); 1190 });
1192 } 1191 }
1193 }, 1192 },
1194 clear() { 1193 clear() {
1195 this.$refs.form.reset(); 1194 this.$refs.form.reset();
1196 }, 1195 },
1197 clearLeactureData() { 1196 clearLeactureData() {
1198 this.$refs.lectureForm.reset(); 1197 this.$refs.lectureForm.reset();
1199 }, 1198 },
1200 save() { 1199 save() {
1201 let imageData = new FormData(); 1200 let imageData = new FormData();
1202 imageData.append("upload", this.imageFile); 1201 imageData.append("upload", this.imageFile);
1203 // console.log(imageData); 1202 // console.log(imageData);
1204 let editTimeTable = { 1203 let editTimeTable = {
1205 timeTableId: this.editedItem._id, 1204 timeTableId: this.editedItem._id,
1206 classId: this.editedItem.classNum, 1205 classId: this.editedItem.classNum,
1207 sectionId: this.editedItem.selectSection 1206 sectionId: this.editedItem.selectSection
1208 // imageData 1207 // imageData
1209 }; 1208 };
1210 http() 1209 http()
1211 .put("/updateTimeTable", editTimeTable) 1210 .put("/updateTimeTable", editTimeTable)
1212 .then(response => { 1211 .then(response => {
1213 console.log("editTimeTable", editTimeTable); 1212 console.log("editTimeTable", editTimeTable);
1214 if ((this.snackbar = true)) { 1213 if ((this.snackbar = true)) {
1215 this.text = "Successfully Edit Existing Time Table"; 1214 this.text = "Successfully Edit Existing Time Table";
1216 } 1215 }
1217 this.findTimeTable(); 1216 this.findTimeTable();
1218 }) 1217 })
1219 .catch(error => { 1218 .catch(error => {
1220 // console.log(error); 1219 // console.log(error);
1221 if ((this.snackbar = true)) { 1220 if ((this.snackbar = true)) {
1222 this.text = error.response.data.message; 1221 this.text = error.response.data.message;
1223 } 1222 }
1224 }); 1223 });
1225 this.close(); 1224 this.close();
1226 }, 1225 },
1227 deleteTimeTable(timeToDelete, deleteLectures) { 1226 deleteTimeTable(timeToDelete, deleteLectures) {
1228 let deleteLecture = { 1227 let deleteLecture = {
1229 lectureId: timeToDelete._id 1228 lectureId: timeToDelete._id
1230 }; 1229 };
1231 http() 1230 http()
1232 .delete( 1231 .delete(
1233 "/deleteLecture", 1232 "/deleteLecture",
1234 confirm("Are you sure you want to delete this?") && { 1233 confirm("Are you sure you want to delete this?") && {
1235 params: deleteLecture 1234 params: deleteLecture
1236 } 1235 }
1237 ) 1236 )
1238 .then(response => { 1237 .then(response => {
1239 if ((this.snackbar = true)) { 1238 if ((this.snackbar = true)) {
1240 this.text = "Successfully delete Existing User"; 1239 this.text = "Successfully delete Existing User";
1241 } 1240 }
1242 const index = this.timeTableList.schedule.indexOf(deleteLectures); 1241 const index = this.timeTableList.schedule.indexOf(deleteLectures);
1243 for (let i = 0; i < this.timeTableList.schedule.length; i++) { 1242 for (let i = 0; i < this.timeTableList.schedule.length; i++) {
1244 this.timeTableList.schedule[i].lectures.splice(index, 1); 1243 this.timeTableList.schedule[i].lectures.splice(index, 1);
1245 } 1244 }
1246 }) 1245 })
1247 .catch(error => { 1246 .catch(error => {
1248 console.log(error); 1247 console.log(error);
1249 }); 1248 });
1250 }, 1249 },
1251 addSchedule(id) { 1250 addSchedule(id) {
1252 this.scheduleDayId = id; 1251 this.scheduleDayId = id;
1253 this.dialogSchedule = true; 1252 this.dialogSchedule = true;
1254 }, 1253 },
1255 submitSchedule() { 1254 submitSchedule() {
1256 let scheduleDayData = { 1255 let scheduleDayData = {
1257 timeTableId: this.scheduleDayId, 1256 timeTableId: this.scheduleDayId,
1258 day: this.schedule.selectDay 1257 day: this.schedule.selectDay
1259 }; 1258 };
1260 http() 1259 http()
1261 .post("/addSchedule", scheduleDayData) 1260 .post("/addSchedule", scheduleDayData)
1262 .then(response => { 1261 .then(response => {
1263 if ((this.snackbar = true)) { 1262 if ((this.snackbar = true)) {
1264 this.text = "New Schedule Day added successfully"; 1263 this.text = "New Schedule Day added successfully";
1265 } 1264 }
1266 this.dialogSchedule = true; 1265 this.dialogSchedule = true;
1267 this.loading = false; 1266 this.loading = false;
1268 }) 1267 })
1269 .catch(error => { 1268 .catch(error => {
1270 // console.log(error); 1269 // console.log(error);
1271 if ((this.snackbar = true)) { 1270 if ((this.snackbar = true)) {
1272 this.text = error.response.data.message; 1271 this.text = error.response.data.message;
1273 } 1272 }
1274 this.loading = false; 1273 this.loading = false;
1275 }); 1274 });
1276 } 1275 }
1277 }, 1276 },
1278 mounted() { 1277 mounted() {
1279 // this.getTimeTableList(); 1278 // this.getTimeTableList();
1280 var token = this.$store.state.token; 1279 var token = this.$store.state.token;
1281 http() 1280 http()
1282 .get("/getClassesList", { 1281 .get("/getClassesList", {
1283 headers: { Authorization: "Bearer " + token } 1282 headers: { Authorization: "Bearer " + token }
1284 }) 1283 })
1285 .then(response => { 1284 .then(response => {
1286 this.addclass = response.data.data; 1285 this.addclass = response.data.data;
1287 // console.log("getClassesList=====>",this.addclass) 1286 // console.log("getClassesList=====>",this.addclass)
1288 }) 1287 })
1289 .catch(err => { 1288 .catch(error => {
1290 // console.log("err====>", err); 1289 this.showLoader = false;
1290 if (error.response.status === 401) {
1291 this.$router.replace({ path: "/" });
1292 this.$store.dispatch("setToken", null);
1293 this.$store.dispatch("Id", null);
1294 this.$store.dispatch("Role", null);
1295 }
1291 }); 1296 });
1292 1297
1293 http() 1298 http()
1294 .get("/getTeachersList", { 1299 .get("/getTeachersList", {
1295 headers: { Authorization: "Bearer " + token } 1300 headers: { Authorization: "Bearer " + token }
1296 }) 1301 })
1297 .then(response => { 1302 .then(response => {
1298 this.addTeachers = response.data.data; 1303 this.addTeachers = response.data.data;
1299 // console.log("getClassesList=====>",this.addTeachers) 1304 // console.log("getClassesList=====>",this.addTeachers)
1300 }) 1305 })
1301 .catch(err => { 1306 .catch(error => {
1302 // console.log("err====>", err); 1307 this.showLoader = false;
1308 if (error.response.status === 401) {
1309 this.$router.replace({ path: "/" });
1310 this.$store.dispatch("setToken", null);
1311 this.$store.dispatch("Id", null);
1312 this.$store.dispatch("Role", null);
1313 }
1303 }); 1314 });
1304 }, 1315 },
1305 created() { 1316 created() {
1306 this.$root.$on("app:search", search => { 1317 this.$root.$on("app:search", search => {
1307 this.search = search; 1318 this.search = search;
1308 }); 1319 });
1309 }, 1320 },
1310 beforeDestroy() { 1321 beforeDestroy() {
1311 // dont forget to remove the listener 1322 // dont forget to remove the listener
1312 this.$root.$off("app:search"); 1323 this.$root.$off("app:search");
1313 } 1324 }
1314 }; 1325 };
1315 </script> 1326 </script>
1316 <style scoped> 1327 <style scoped>
1317 .active { 1328 .active {
1318 background-color: gray; 1329 background-color: gray;
1319 color: white !important; 1330 color: white !important;
1320 } 1331 }
1321 .activebtn { 1332 .activebtn {
1322 color: black !important; 1333 color: black !important;
1323 } 1334 }