viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d9bb52b5bc17cb3de00c9c22f78654feb2594560

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

implement trello task

Showing 11 changed files with 257 additions and 132 deletions   Show diff stats
src/Services/http.js
Diff comments   View file @d9bb52b
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 const baseDomain = "http://13.234.251.173:8001/v1"; 4 const baseDomain = "http://13.234.251.173:8001/v1";
5 5
6 const baseURL = `${baseDomain}`; 6 const baseURL = `${baseDomain}`;
7 7
8 export default () => { 8 export default () => {
9 return axios.create({ 9 return axios.create({
10 // baseURL: 'http://192.168.0.108:3002/v1', 10 // baseURL: 'http://192.168.0.120:3002/v1',
11 baseURL, 11 baseURL,
12 headers: { 12 headers: {
13 Authorization: `Bearer ${store.state.token}` 13 Authorization: `Bearer ${store.state.token}`
14 } 14 }
15 }) 15 })
16 } 16 }
src/pages/Account/editInvoice.vue
Diff comments   View file @d9bb52b
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(error => { 386 .catch(error => {
387 this.showLoader = false; 387 this.showLoader = false;
388 if (error.response.status === 401) { 388 if (error.response.status === 401) {
389 this.$router.replace({ path: "/" }); 389 this.$router.replace({ path: "/" });
390 this.$store.dispatch("setToken", null); 390 this.$store.dispatch("setToken", null);
391 this.$store.dispatch("Id", null); 391 this.$store.dispatch("Id", null);
392 this.$store.dispatch("Role", null); 392 this.$store.dispatch("Role", null);
393 } 393 }
394 }); 394 });
395 }, 395 },
396 selectFeeType() { 396 selectFeeType() {
397 this.showFeeType = true; 397 this.showFeeType = true;
398 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 398 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
399 }, 399 },
400 deleteSelectFee: function(index) { 400 deleteSelectFee: function(index) {
401 this.feeTypeData.splice(index, 1); 401 this.feeTypeData.splice(index, 1);
402 for (let i = 0; i < this.feeTypeData.length; i++) { 402 for (let i = 0; i < this.feeTypeData.length; i++) {
403 this.feeType = this.feeTypeData[i]; 403 this.feeType = this.feeTypeData[i];
404 } 404 }
405 if (this.feeTypeData.length == 0) { 405 if (this.feeTypeData.length == 0) {
406 this.feeType = { 406 this.feeType = {
407 amount: "0.00", 407 amount: "0.00",
408 discount: "0.00", 408 discount: "0.00",
409 paidAmount: "0.00", 409 paidAmount: "0.00",
410 subTotal: "0.00", 410 subTotal: "0.00",
411 feeTypeList: "" 411 feeTypeList: ""
412 }; 412 };
413 } 413 }
414 }, 414 },
415 getAllClasses() { 415 getAllClasses() {
416 http() 416 http()
417 .get("/getClassesList", { 417 .get("/getClassesList", {
418 headers: { Authorization: "Bearer " + this.token } 418 headers: { Authorization: "Bearer " + this.token }
419 }) 419 })
420 .then(response => { 420 .then(response => {
421 this.addclass = response.data.data; 421 this.addclass = response.data.data;
422 }) 422 })
423 .catch(error => { 423 .catch(error => {
424 // console.log("err====>", err); 424 // console.log("err====>", err);
425 this.showLoader = false; 425 this.showLoader = false;
426 if (error.response.status === 401) { 426 if (error.response.status === 401) {
427 this.$router.replace({ path: "/" }); 427 this.$router.replace({ path: "/" });
428 this.$store.dispatch("setToken", null); 428 this.$store.dispatch("setToken", null);
429 this.$store.dispatch("Id", null); 429 this.$store.dispatch("Id", null);
430 this.$store.dispatch("Role", null); 430 this.$store.dispatch("Role", null);
431 } 431 }
432 }); 432 });
433 }, 433 },
434 getAllStudents() { 434 getAllStudents() {
435 http() 435 http()
436 .get("/getStudentsList", { 436 .get("/getStudentsList", {
437 params: { classId: this.invoiceData.classNum }, 437 params: { classId: this.invoiceData.classNum },
438 headers: { Authorization: "Bearer " + this.token } 438 headers: { Authorization: "Bearer " + this.token }
439 }) 439 })
440 .then(response => { 440 .then(response => {
441 this.studentList = response.data.data; 441 this.studentList = response.data.data;
442 }) 442 })
443 .catch(err => { 443 .catch(err => {
444 // console.log("err====>", err); 444 // console.log("err====>", err);
445 }); 445 });
446 }, 446 },
447 getfeeType() { 447 getfeeType() {
448 http() 448 http()
449 .get("/getFeesList", { 449 .get("/getFeesList", {
450 headers: { Authorization: "Bearer " + this.token } 450 headers: { Authorization: "Bearer " + this.token }
451 }) 451 })
452 .then(response => { 452 .then(response => {
453 this.feeTypes = response.data.data; 453 this.feeTypes = response.data.data;
454 }) 454 })
455 .catch(err => { 455 .catch(err => {
456 // console.log("err====>", err); 456 // console.log("err====>", err);
457 }); 457 });
458 }, 458 },
459 getAmmountDetails(feeTyp) { 459 getAmmountDetails(feeTyp) {
460 let feeType = { 460 let feeType = {
461 amount: "", 461 amount: "",
462 discount: "", 462 discount: "",
463 subTotal: "", 463 subTotal: "",
464 subParticularTotal: "", 464 subParticularTotal: "",
465 paidAmount: "" 465 paidAmount: ""
466 }; 466 };
467 for (let i = 0; i < this.feeTypeData.length; i++) { 467 for (let i = 0; i < this.feeTypeData.length; i++) {
468 // *********** AMOUNT *********** 468 // *********** AMOUNT ***********
469 feeType.amount = 469 feeType.amount =
470 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 470 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
471 console.log("feeType.amount ", feeType.amount); 471 console.log("feeType.amount ", feeType.amount);
472 this.feeType.amount = feeType.amount; 472 this.feeType.amount = feeType.amount;
473 this.feeType.subTotal = feeType.amount; 473 this.feeType.subTotal = feeType.amount;
474 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 474 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
475 // *********** DISCOUNT *********** 475 // *********** DISCOUNT ***********
476 if (this.feeTypeData[i].discount) { 476 if (this.feeTypeData[i].discount) {
477 feeType.discount = 477 feeType.discount =
478 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 478 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
479 console.log("feeType.discount", feeType.discount); 479 console.log("feeType.discount", feeType.discount);
480 this.feeType.discount = feeType.discount; 480 this.feeType.discount = feeType.discount;
481 feeType.subParticularTotal = 481 feeType.subParticularTotal =
482 this.feeTypeData[i].amount - 482 this.feeTypeData[i].amount -
483 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 483 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
484 console.log("feeType.subTotal", feeType.subTotal); 484 console.log("feeType.subTotal", feeType.subTotal);
485 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 485 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
486 } 486 }
487 // *********** SUBTOTAL *********** 487 // *********** SUBTOTAL ***********
488 feeType.subTotal = 488 feeType.subTotal =
489 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 489 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
490 this.feeType.subTotal = feeType.subTotal.toFixed(2); 490 this.feeType.subTotal = feeType.subTotal.toFixed(2);
491 // *********** PAID-AMOUNT *********** 491 // *********** PAID-AMOUNT ***********
492 feeType.paidAmount = 492 feeType.paidAmount =
493 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 493 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
494 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 494 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
495
496 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
497 if (feeType.paidAmount > feeType.subTotal) {
498 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
499 this.feeType.paidAmount = feeType.subTotal;
500 }
495 } 501 }
496 }, 502 },
497 getPayMethodList() { 503 getPayMethodList() {
498 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 504 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
499 this.showPayMethods = true; 505 this.showPayMethods = true;
500 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 506 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
501 this.showPayMethods = true; 507 this.showPayMethods = true;
502 } else { 508 } else {
503 this.showPayMethods = false; 509 this.showPayMethods = false;
504 } 510 }
505 } 511 }
506 }, 512 },
507 mounted() { 513 mounted() {
508 this.token = this.$store.state.token; 514 this.token = this.$store.state.token;
509 this.getInvoiceList(); 515 this.getInvoiceList();
510 this.getAllClasses(); 516 this.getAllClasses();
511 this.getfeeType(); 517 this.getfeeType();
512 }, 518 },
513 created() { 519 created() {
514 this.$root.$on("app:search", search => { 520 this.$root.$on("app:search", search => {
515 this.search = search; 521 this.search = search;
516 }); 522 });
517 }, 523 },
518 beforeDestroy() { 524 beforeDestroy() {
519 // dont forget to remove the listener 525 // dont forget to remove the listener
520 this.$root.$off("app:search"); 526 this.$root.$off("app:search");
521 } 527 }
522 }; 528 };
523 </script> 529 </script>
524 530
525 531
526 <style scoped> 532 <style scoped>
527 .active { 533 .active {
528 background-color: gray; 534 background-color: gray;
529 color: white !important; 535 color: white !important;
530 } 536 }
531 .activebtn { 537 .activebtn {
532 color: black !important; 538 color: black !important;
533 } 539 }
534 table { 540 table {
535 border-collapse: collapse; 541 border-collapse: collapse;
536 border: 1px solid #e2e7eb; 542 border: 1px solid #e2e7eb;
537 } 543 }
538 544
539 th, 545 th,
540 td { 546 td {
541 border: 1px solid #e2e7eb; 547 border: 1px solid #e2e7eb;
542 padding: 10px; 548 padding: 10px;
543 text-align: center; 549 text-align: center;
544 } 550 }
545 table.feeTypeTable { 551 table.feeTypeTable {
546 table-layout: auto !important; 552 table-layout: auto !important;
547 width: 100% !important; 553 width: 100% !important;
548 } 554 }
549 @media screen and (max-width: 380px) { 555 @media screen and (max-width: 380px) {
550 .tableRsponsive { 556 .tableRsponsive {
551 display: block; 557 display: block;
552 position: relative; 558 position: relative;
553 overflow: scroll; 559 overflow: scroll;
554 } 560 }
555 } 561 }
556 </style> 562 </style>
src/pages/Account/feeTypes.vue
Diff comments   View file @d9bb52b
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"
51 required 50 required
52 ></v-text-field> 51 ></v-text-field>
53 </v-flex> 52 </v-flex>
54 </v-layout> 53 </v-layout>
55 <v-layout> 54 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 55 <v-flex xs4 class="pt-4 subheading">
57 <label class="right pr-3">Note:</label> 56 <label class="right pr-3">Note:</label>
58 </v-flex> 57 </v-flex>
59 <v-flex xs8> 58 <v-flex xs8>
60 <v-textarea 59 <v-textarea
61 name="input-7-1" 60 name="input-7-1"
62 v-model="editedItem.note" 61 v-model="editedItem.note"
63 placeholder="fill your Note" 62 placeholder="fill your Note"
64 :rules="noteRules"
65 multi-line 63 multi-line
66 required 64 required
67 ></v-textarea> 65 ></v-textarea>
68 </v-flex> 66 </v-flex>
69 </v-layout> 67 </v-layout>
70 <v-card-actions> 68 <v-card-actions>
71 <v-btn round dark @click.native="close">Cancel</v-btn> 69 <v-btn round dark @click.native="close">Cancel</v-btn>
72 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
73 <v-btn round dark @click="save">Save</v-btn> 71 <v-btn round dark @click="save">Save</v-btn>
74 </v-card-actions> 72 </v-card-actions>
75 </v-flex> 73 </v-flex>
76 </v-layout> 74 </v-layout>
77 </v-container> 75 </v-container>
78 </v-card> 76 </v-card>
79 </v-dialog> 77 </v-dialog>
80 78
81 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 79 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
82 80
83 <v-dialog v-model="dialog1" max-width="600px"> 81 <v-dialog v-model="dialog1" max-width="600px">
84 <v-toolbar color="grey lighten-2"> 82 <v-toolbar color="grey lighten-2">
85 <v-spacer></v-spacer> 83 <v-spacer></v-spacer>
86 <v-toolbar-title> 84 <v-toolbar-title>
87 <h3>Fee Type</h3> 85 <h3>Fee Type</h3>
88 </v-toolbar-title> 86 </v-toolbar-title>
89 <v-spacer></v-spacer> 87 <v-spacer></v-spacer>
90 <v-icon @click="close1">close</v-icon> 88 <v-icon @click="close1">close</v-icon>
91 </v-toolbar> 89 </v-toolbar>
92 <v-card> 90 <v-card>
93 <v-card-text> 91 <v-card-text>
94 <v-container grid-list-md> 92 <v-container grid-list-md>
95 <v-layout wrap> 93 <v-layout wrap>
96 <v-flex> 94 <v-flex>
97 <v-layout> 95 <v-layout>
98 <v-flex xs5 sm6> 96 <v-flex xs5 sm6>
99 <h5 class="right my-1"> 97 <h5 class="right my-1">
100 <b>Fee Type:</b> 98 <b>Fee Type:</b>
101 </h5> 99 </h5>
102 </v-flex> 100 </v-flex>
103 <v-flex sm6 xs8> 101 <v-flex sm6 xs8>
104 <h5 class="my-1">{{ editedItem.feeType }}</h5> 102 <h5 class="my-1">{{ editedItem.feeType }}</h5>
105 </v-flex> 103 </v-flex>
106 </v-layout> 104 </v-layout>
107 <v-layout> 105 <v-layout>
108 <v-flex xs5 sm6> 106 <v-flex xs5 sm6>
109 <h5 class="right my-1"> 107 <h5 class="right my-1">
110 <b>Note:</b> 108 <b>Note:</b>
111 </h5> 109 </h5>
112 </v-flex> 110 </v-flex>
113 <v-flex sm6 xs8> 111 <v-flex sm6 xs8>
114 <h5 class="my-1">{{ editedItem.note }}</h5> 112 <h5 class="my-1">{{ editedItem.note }}</h5>
115 </v-flex> 113 </v-flex>
116 </v-layout> 114 </v-layout>
117 </v-flex> 115 </v-flex>
118 </v-layout> 116 </v-layout>
119 </v-container> 117 </v-container>
120 </v-card-text> 118 </v-card-text>
121 </v-card> 119 </v-card>
122 </v-dialog> 120 </v-dialog>
123 121
124 <v-snackbar 122 <v-snackbar
125 :timeout="timeout" 123 :timeout="timeout"
126 :top="y === 'top'" 124 :top="y === 'top'"
127 :right="x === 'right'" 125 :right="x === 'right'"
128 :vertical="mode === 'vertical'" 126 :vertical="mode === 'vertical'"
129 v-model="snackbar" 127 v-model="snackbar"
130 color="success" 128 color="success"
131 >{{ text }}</v-snackbar> 129 >{{ text }}</v-snackbar>
132 130
133 <!-- ****** EXISTING-FEETYPE TABLE ****** --> 131 <!-- ****** EXISTING-FEETYPE TABLE ****** -->
134 132
135 <v-data-table 133 <v-data-table
136 :headers="headers" 134 :headers="headers"
137 :items="feeTypeList" 135 :items="feeTypeList"
138 :pagination.sync="pagination" 136 :pagination.sync="pagination"
139 :search="search" 137 :search="search"
140 > 138 >
141 <template slot="items" slot-scope="props"> 139 <template slot="items" slot-scope="props">
142 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 140 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
143 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td> 141 <td id="td" class="text-xs-center">{{ props.item.feeType }}</td>
144 <td id="td" class="text-xs-center">{{ props.item.note }}</td> 142 <td id="td" class="text-xs-center">{{ props.item.note }}</td>
145 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> 143 <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> -->
146 144
147 <td class="text-xs-center"> 145 <td class="text-xs-center">
148 <!-- <span> --> 146 <!-- <span> -->
149 <v-tooltip top> 147 <v-tooltip top>
150 <img 148 <img
151 slot="activator" 149 slot="activator"
152 style="cursor:pointer; width:25px; height:18px; " 150 style="cursor:pointer; width:25px; height:18px; "
153 class="mr-5" 151 class="mr-5"
154 @click="profile(props.item)" 152 @click="profile(props.item)"
155 src="/static/icon/eye1.png" 153 src="/static/icon/eye1.png"
156 /> 154 />
157 <span>View</span> 155 <span>View</span>
158 </v-tooltip> 156 </v-tooltip>
159 <v-tooltip top> 157 <v-tooltip top>
160 <img 158 <img
161 slot="activator" 159 slot="activator"
162 style="cursor:pointer; width:20px; height:18px; " 160 style="cursor:pointer; width:20px; height:18px; "
163 class="mr-5" 161 class="mr-5"
164 @click="editItem(props.item)" 162 @click="editItem(props.item)"
165 src="/static/icon/edit1.png" 163 src="/static/icon/edit1.png"
166 /> 164 />
167 <span>Edit</span> 165 <span>Edit</span>
168 </v-tooltip> 166 </v-tooltip>
169 <v-tooltip top> 167 <v-tooltip top>
170 <img 168 <img
171 slot="activator" 169 slot="activator"
172 style="cursor:pointer; width:20px; height:20px; " 170 style="cursor:pointer; width:20px; height:20px; "
173 class="mr-5" 171 class="mr-5"
174 @click="deleteItem(props.item)" 172 @click="deleteItem(props.item)"
175 src="/static/icon/delete1.png" 173 src="/static/icon/delete1.png"
176 /> 174 />
177 <span>Delete</span> 175 <span>Delete</span>
178 </v-tooltip> 176 </v-tooltip>
179 <!-- </span> --> 177 <!-- </span> -->
180 </td> 178 </td>
181 </template> 179 </template>
182 <v-alert 180 <v-alert
183 slot="no-results" 181 slot="no-results"
184 :value="true" 182 :value="true"
185 color="error" 183 color="error"
186 icon="warning" 184 icon="warning"
187 >Your search for "{{ search }}" found no results.</v-alert> 185 >Your search for "{{ search }}" found no results.</v-alert>
188 </v-data-table> 186 </v-data-table>
189 </v-tab-item> 187 </v-tab-item>
190 188
191 <!-- ****** ADD Fee Type ****** --> 189 <!-- ****** ADD Fee Type ****** -->
192 190
193 <v-tab-item> 191 <v-tab-item>
194 <v-container> 192 <v-container>
195 <v-snackbar 193 <v-snackbar
196 :timeout="timeout" 194 :timeout="timeout"
197 :top="y === 'top'" 195 :top="y === 'top'"
198 :right="x === 'right'" 196 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 197 :vertical="mode === 'vertical'"
200 v-model="snackbar" 198 v-model="snackbar"
201 color="success" 199 color="success"
202 >{{ text }}</v-snackbar> 200 >{{ text }}</v-snackbar>
203 <v-flex xs12 sm8 offset-sm2 class="top"> 201 <v-flex xs12 sm8 offset-sm2 class="top">
204 <v-card flat> 202 <v-card flat>
205 <v-container fluid fill-height> 203 <v-container fluid fill-height>
206 <v-layout align-center> 204 <v-layout align-center>
207 <v-flex xs12 class="mt-4"> 205 <v-flex xs12 class="mt-4">
208 <v-form ref="form" v-model="valid" lazy-validation> 206 <v-form ref="form" v-model="valid" lazy-validation>
209 <v-layout> 207 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 208 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">Fee Type:</label> 209 <label class="right">Fee Type:</label>
212 </v-flex> 210 </v-flex>
213 <v-flex xs6 class="ml-3"> 211 <v-flex xs6 class="ml-3">
214 <v-text-field 212 <v-text-field
215 v-model="feeTypeData.feeType" 213 v-model="feeTypeData.feeType"
216 placeholder="fill your Fee Type" 214 placeholder="fill your Fee Type"
217 type="text" 215 type="text"
218 :rules="feetTypeRules" 216 :rules="feetTypeRules"
219 required 217 required
220 ></v-text-field> 218 ></v-text-field>
221 </v-flex> 219 </v-flex>
222 </v-layout> 220 </v-layout>
223 <v-layout> 221 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 222 <v-flex xs4 class="pt-4 subheading">
225 <label class="right">Note:</label> 223 <label class="right">Note:</label>
226 </v-flex> 224 </v-flex>
227 <v-flex xs6 class="ml-3"> 225 <v-flex xs6 class="ml-3">
228 <v-textarea 226 <v-textarea
229 name="input-7-1" 227 name="input-7-1"
230 v-model="feeTypeData.note" 228 v-model="feeTypeData.note"
231 placeholder="fill your Note" 229 placeholder="fill your Note"
232 type="text" 230 type="text"
233 :rules="noteRules"
234 multi-line 231 multi-line
235 required 232 required
236 ></v-textarea> 233 ></v-textarea>
237 </v-flex> 234 </v-flex>
238 </v-layout> 235 </v-layout>
239 <!-- <v-layout> 236 <!-- <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 237 <v-flex xs4 class="pt-4 subheading">
241 <label class="right">Monthly:</label> 238 <label class="right">Monthly:</label>
242 </v-flex> 239 </v-flex>
243 <v-flex xs6 class="ml-3"> 240 <v-flex xs6 class="ml-3">
244 <v-checkbox 241 <v-checkbox
245 v-model="feeTypeData.monthly" 242 v-model="feeTypeData.monthly"
246 :rules="monthlyRules" 243 :rules="monthlyRules"
247 multi-line 244 multi-line
248 required 245 required
249 ></v-checkbox> 246 ></v-checkbox>
250 </v-flex> 247 </v-flex>
251 </v-layout>--> 248 </v-layout>-->
252 <v-layout> 249 <v-layout>
253 <v-flex xs12 sm9 offset-sm2> 250 <v-flex xs12 sm9 offset-sm2>
254 <v-card-actions> 251 <v-card-actions>
255 <v-btn @click="clear" round dark>clear</v-btn> 252 <v-btn @click="clear" round dark>clear</v-btn>
256 <v-spacer></v-spacer> 253 <v-spacer></v-spacer>
257 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 254 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
258 </v-card-actions> 255 </v-card-actions>
259 </v-flex> 256 </v-flex>
260 </v-layout> 257 </v-layout>
261 </v-form> 258 </v-form>
262 </v-flex> 259 </v-flex>
263 </v-layout> 260 </v-layout>
264 </v-container> 261 </v-container>
265 </v-card> 262 </v-card>
266 </v-flex> 263 </v-flex>
267 </v-container> 264 </v-container>
268 </v-tab-item> 265 </v-tab-item>
269 </v-tabs> 266 </v-tabs>
270 <div class="loader" v-if="showLoader"> 267 <div class="loader" v-if="showLoader">
271 <v-progress-circular indeterminate color="white"></v-progress-circular> 268 <v-progress-circular indeterminate color="white"></v-progress-circular>
272 </div> 269 </div>
273 </v-app> 270 </v-app>
274 </template> 271 </template>
275 272
276 <script> 273 <script>
277 import http from "@/Services/http.js"; 274 import http from "@/Services/http.js";
278 import Util from "@/util"; 275 import Util from "@/util";
279 276
280 export default { 277 export default {
281 data: () => ({ 278 data: () => ({
282 snackbar: false, 279 snackbar: false,
283 y: "top", 280 y: "top",
284 x: "right", 281 x: "right",
285 mode: "", 282 mode: "",
286 timeout: 3000, 283 timeout: 3000,
287 text: "", 284 text: "",
288 showLoader: false, 285 showLoader: false,
289 loading: false, 286 loading: false,
290 date: null, 287 date: null,
291 search: "", 288 search: "",
292 dialog: false, 289 dialog: false,
293 dialog1: false, 290 dialog1: false,
294 valid: true, 291 valid: true,
295 validEdit: true, 292 validEdit: true,
296 isActive: true, 293 isActive: true,
297 newActive: false, 294 newActive: false,
298 AddUsercredentials: {}, 295 AddUsercredentials: {},
299 pagination: { 296 pagination: {
300 rowsPerPage: 15 297 rowsPerPage: 15
301 }, 298 },
302 feetTypeRules: [v => !!v || " Fee Type Name is required"], 299 feetTypeRules: [v => !!v || " Fee Type Name is required"],
303 monthlyRules: [v => !!v || " Select Monthly"], 300 monthlyRules: [v => !!v || " Select Monthly"],
304 noteRules: [v => !!v || " Note is required"], 301 noteRules: [v => !!v || " Note is required"],
305 headers: [ 302 headers: [
306 { 303 {
307 text: "No", 304 text: "No",
308 align: "center", 305 align: "center",
309 sortable: false, 306 sortable: false,
310 value: "No" 307 value: "No"
311 }, 308 },
312 { 309 {
313 text: "fee Type", 310 text: "fee Type",
314 value: "feeType", 311 value: "feeType",
315 sortable: false, 312 sortable: false,
316 align: "center" 313 align: "center"
317 }, 314 },
318 { text: "Note", value: "note", sortable: false, align: "center" }, 315 { text: "Note", value: "note", sortable: false, align: "center" },
319 // { text: "Session", value: "session", sortable: false, align: "center" }, 316 // { text: "Session", value: "session", sortable: false, align: "center" },
320 { text: "Action", value: "", sortable: false, align: "center" } 317 { text: "Action", value: "", sortable: false, align: "center" }
321 ], 318 ],
322 feeTypeList: [], 319 feeTypeList: [],
323 select: "", 320 select: "",
324 token: "", 321 token: "",
325 editedItem: {}, 322 editedItem: {},
326 feeTypeData: {} 323 feeTypeData: {}
327 }), 324 }),
328 methods: { 325 methods: {
329 getFeeTypeList() { 326 getFeeTypeList() {
330 this.showLoader = true; 327 this.showLoader = true;
331 http() 328 http()
332 .get("/getFeesList", { 329 .get("/getFeesList", {
333 params: { schoolId: this.$store.state.schoolId }, 330 params: { schoolId: this.$store.state.schoolId },
334 headers: { Authorization: "Bearer " + this.token } 331 headers: { Authorization: "Bearer " + this.token }
335 }) 332 })
336 .then(response => { 333 .then(response => {
337 this.feeTypeList = response.data.data; 334 this.feeTypeList = response.data.data;
338 this.showLoader = false; 335 this.showLoader = false;
339 // console.log("getAllfeetypes=====>",response.data.data) 336 // console.log("getAllfeetypes=====>",response.data.data)
340 }) 337 })
341 .catch(error => { 338 .catch(error => {
342 // console.log("err====>", err); 339 // console.log("err====>", err);
343 this.showLoader = false; 340 this.showLoader = false;
344 if (error.response.status === 401) { 341 if (error.response.status === 401) {
345 this.$router.replace({ path: "/" }); 342 this.$router.replace({ path: "/" });
346 this.$store.dispatch("setToken", null); 343 this.$store.dispatch("setToken", null);
347 this.$store.dispatch("Id", null); 344 this.$store.dispatch("Id", null);
348 this.$store.dispatch("Role", null); 345 this.$store.dispatch("Role", null);
349 } 346 }
350 }); 347 });
351 }, 348 },
352 editItem(item) { 349 editItem(item) {
353 this.editedIndex = this.feeTypeList.indexOf(item); 350 this.editedIndex = this.feeTypeList.indexOf(item);
354 this.editedItem = Object.assign({}, item); 351 this.editedItem = Object.assign({}, item);
355 this.dialog = true; 352 this.dialog = true;
356 }, 353 },
357 profile(item) { 354 profile(item) {
358 this.editedIndex = this.feeTypeList.indexOf(item); 355 this.editedIndex = this.feeTypeList.indexOf(item);
359 this.editedItem = Object.assign({}, item); 356 this.editedItem = Object.assign({}, item);
360 this.dialog1 = true; 357 this.dialog1 = true;
361 }, 358 },
362 deleteItem(item) { 359 deleteItem(item) {
363 let deleteFeeType = { 360 let deleteFeeType = {
364 feeId: item._id 361 feeId: item._id
365 }; 362 };
366 http() 363 http()
367 .delete( 364 .delete(
368 "/deleteFee", 365 "/deleteFee",
369 confirm("Are you sure you want to delete this?") && { 366 confirm("Are you sure you want to delete this?") && {
370 params: deleteFeeType 367 params: deleteFeeType
371 } 368 }
372 ) 369 )
373 .then(response => { 370 .then(response => {
374 if ((this.snackbar = true)) { 371 if ((this.snackbar = true)) {
375 this.text = "Successfully delete Existing feetype"; 372 this.text = "Successfully delete Existing feetype";
376 } 373 }
377 this.getFeeTypeList(); 374 this.getFeeTypeList();
378 }) 375 })
379 .catch(error => { 376 .catch(error => {
380 // console.log(error); 377 // console.log(error);
381 }); 378 });
382 }, 379 },
383 activeTab(type) { 380 activeTab(type) {
384 switch (type) { 381 switch (type) {
385 case "existing": 382 case "existing":
386 this.newActive = false; 383 this.newActive = false;
387 this.isActive = true; 384 this.isActive = true;
388 break; 385 break;
389 386
390 default: 387 default:
391 this.newActive = true; 388 this.newActive = true;
392 this.isActive = false; 389 this.isActive = false;
393 break; 390 break;
394 } 391 }
395 }, 392 },
396 close() { 393 close() {
397 this.dialog = false; 394 this.dialog = false;
398 setTimeout(() => { 395 setTimeout(() => {
399 this.editedItem = Object.assign({}, this.defaultItem); 396 this.editedItem = Object.assign({}, this.defaultItem);
400 this.editedIndex = -1; 397 this.editedIndex = -1;
401 }, 300); 398 }, 300);
402 }, 399 },
403 close1() { 400 close1() {
404 this.dialog1 = false; 401 this.dialog1 = false;
405 }, 402 },
406 close2() { 403 close2() {
407 this.dialog2 = false; 404 this.dialog2 = false;
408 }, 405 },
409 submit() { 406 submit() {
410 if (this.$refs.form.validate()) { 407 if (this.$refs.form.validate()) {
411 this.loading = true; 408 this.loading = true;
412 this.schoolId = this.$store.state.schoolId; 409 this.schoolId = this.$store.state.schoolId;
413 http() 410 http()
414 .post("/createFee", this.feeTypeData) 411 .post("/createFee", this.feeTypeData)
415 .then(response => { 412 .then(response => {
416 this.getFeeTypeList(); 413 this.getFeeTypeList();
417 this.snackbar = true; 414 this.snackbar = true;
418 this.text = "New feetype added successfully"; 415 this.text = "New feetype added successfully";
419 this.clear(); 416 this.clear();
420 this.loading = false; 417 this.loading = false;
421 }) 418 })
422 .catch(error => { 419 .catch(error => {
423 // console.log(error); 420 // console.log(error);
424 this.snackbar = true; 421 this.snackbar = true;
425 this.text = error.response.data.message; 422 this.text = error.response.data.message;
426 this.loading = false; 423 this.loading = false;
427 }); 424 });
428 } 425 }
429 }, 426 },
430 clear() { 427 clear() {
431 this.$refs.form.reset(); 428 this.$refs.form.reset();
432 }, 429 },
433 save() { 430 save() {
434 this.editedItem.feeId = this.editedItem._id; 431 this.editedItem.feeId = this.editedItem._id;
435 http() 432 http()
436 .put("/updateFee", this.editedItem) 433 .put("/updateFee", this.editedItem)
437 .then(response => { 434 .then(response => {
438 if ((this.snackbar = true)) { 435 if ((this.snackbar = true)) {
439 this.text = "Successfully Edit Existing Fee Type"; 436 this.text = "Successfully Edit Existing Fee Type";
440 } 437 }
441 this.getFeeTypeList(); 438 this.getFeeTypeList();
442 this.close(); 439 this.close();
443 }) 440 })
444 .catch(error => { 441 .catch(error => {
445 this.text = error.response.data.message; 442 this.text = error.response.data.message;
446 // console.log(error); 443 // console.log(error);
447 }); 444 });
448 } 445 }
449 }, 446 },
450 mounted() { 447 mounted() {
451 this.token = this.$store.state.token; 448 this.token = this.$store.state.token;
452 this.getFeeTypeList(); 449 this.getFeeTypeList();
453 }, 450 },
454 created() { 451 created() {
455 this.$root.$on("app:search", search => { 452 this.$root.$on("app:search", search => {
456 this.search = search; 453 this.search = search;
457 }); 454 });
458 }, 455 },
459 beforeDestroy() { 456 beforeDestroy() {
460 // dont forget to remove the listener 457 // dont forget to remove the listener
461 this.$root.$off("app:search"); 458 this.$root.$off("app:search");
462 } 459 }
463 }; 460 };
464 </script> 461 </script>
465 462
466 <style scoped> 463 <style scoped>
467 .active { 464 .active {
468 background-color: gray; 465 background-color: gray;
469 color: white !important; 466 color: white !important;
470 } 467 }
471 .activebtn { 468 .activebtn {
472 color: black !important; 469 color: black !important;
473 } 470 }
474 </style> 471 </style>
src/pages/Account/invoice.vue
Diff comments   View file @d9bb52b
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 Invoice</v-tab> 10 >Existing Invoice</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 Invoice</v-tab> 18 >Add New Invoice</v-tab>
19 19
20 <!-- ****** EDIT SECTION ****** --> 20 <!-- ****** EDIT SECTION ****** -->
21 <v-tab-item> 21 <v-tab-item>
22 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 22 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
23 <v-dialog v-model="dialog1" max-width="600px"> 23 <v-dialog v-model="dialog1" max-width="600px">
24 <v-toolbar color="grey lighten-2"> 24 <v-toolbar color="grey lighten-2">
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-toolbar-title> 26 <v-toolbar-title>
27 <h3>Invoice</h3> 27 <h3>Invoice</h3>
28 </v-toolbar-title> 28 </v-toolbar-title>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 <v-icon @click="close1">close</v-icon> 30 <v-icon @click="close1">close</v-icon>
31 </v-toolbar> 31 </v-toolbar>
32 <v-card> 32 <v-card>
33 <v-flex align-center justify-center layout text-xs-center> 33 <v-flex align-center justify-center layout text-xs-center>
34 <v-avatar size="50px" style="position:absolute; top:20px;"> 34 <v-avatar size="50px" style="position:absolute; top:20px;">
35 <img src="/static/icon/user.png" /> 35 <img src="/static/icon/user.png" />
36 </v-avatar> 36 </v-avatar>
37 </v-flex> 37 </v-flex>
38 <v-card-text> 38 <v-card-text>
39 <v-container grid-list-md> 39 <v-container grid-list-md>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex> 41 <v-flex>
42 <br /> 42 <br />
43 <br /> 43 <br />
44 <v-layout> 44 <v-layout>
45 <v-flex xs5 sm6> 45 <v-flex xs5 sm6>
46 <h5 class="right my-1"> 46 <h5 class="right my-1">
47 <b>Class Name:</b> 47 <b>Class Name:</b>
48 </h5> 48 </h5>
49 </v-flex> 49 </v-flex>
50 <v-flex sm6 xs8> 50 <v-flex sm6 xs8>
51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> --> 51 <!-- <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> -->
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 <v-layout> 54 <v-layout>
55 <v-flex xs5 sm6> 55 <v-flex xs5 sm6>
56 <h5 class="right my-1"> 56 <h5 class="right my-1">
57 <b>Name:</b> 57 <b>Name:</b>
58 </h5> 58 </h5>
59 </v-flex> 59 </v-flex>
60 <v-flex sm6 xs8> 60 <v-flex sm6 xs8>
61 <h5 class="my-1">{{ editedItem.name }}</h5> 61 <h5 class="my-1">{{ editedItem.name }}</h5>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 <v-flex xs5 sm6> 65 <v-flex xs5 sm6>
66 <h5 class="right my-1"> 66 <h5 class="right my-1">
67 <b>Class Incharge:</b> 67 <b>Class Incharge:</b>
68 </h5> 68 </h5>
69 </v-flex> 69 </v-flex>
70 <v-flex sm6 xs8> 70 <v-flex sm6 xs8>
71 <h5 class="my-1">{{ editedItem.name }}</h5> 71 <h5 class="my-1">{{ editedItem.name }}</h5>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 <v-layout> 74 <v-layout>
75 <v-flex xs5 sm6> 75 <v-flex xs5 sm6>
76 <h5 class="right my-1"> 76 <h5 class="right my-1">
77 <b>Session:</b> 77 <b>Session:</b>
78 </h5> 78 </h5>
79 </v-flex> 79 </v-flex>
80 <v-flex sm6 xs8> 80 <v-flex sm6 xs8>
81 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> 81 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-container> 86 </v-container>
87 </v-card-text> 87 </v-card-text>
88 </v-card> 88 </v-card>
89 </v-dialog> 89 </v-dialog>
90 <!-- ****** EXISTING-USERS StudentS Table ****** --> 90 <!-- ****** EXISTING-USERS StudentS Table ****** -->
91 <v-data-table 91 <v-data-table
92 :headers="headers" 92 :headers="headers"
93 :items="invoiceList" 93 :items="invoiceList"
94 :pagination.sync="pagination" 94 :pagination.sync="pagination"
95 :search="search" 95 :search="search"
96 > 96 >
97 <template slot="items" slot-scope="props"> 97 <template slot="items" slot-scope="props">
98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 98 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td> 99 <td id="td" class="text-xs-center">{{ props.item.studentId.name }}</td>
100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 100 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td> 101 <td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>
102 <td 102 <td
103 id="td" 103 id="td"
104 class="text-xs-center" 104 class="text-xs-center"
105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> 105 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
106 <td 106 <td
107 id="td" 107 id="td"
108 class="text-xs-center" 108 class="text-xs-center"
109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 109 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
110 <td 110 <td
111 id="td" 111 id="td"
112 class="text-xs-center" 112 class="text-xs-center"
113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 113 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'"> 114 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'NOT_PAID'">
115 <span 115 <span
116 class="red lighten-1 pa-2 white--text paymentStatus" 116 class="red lighten-1 pa-2 white--text paymentStatus"
117 >{{ props.item.paymentStatus }}</span> 117 >{{ props.item.paymentStatus }}</span>
118 </td> 118 </td>
119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus != 'NOT_PAID'"> 119 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'FULLY_PAID'">
120 <span 120 <span
121 class="green lighten-1 pa-2 white--text paymentStatus" 121 class="green lighten-1 pa-2 white--text paymentStatus"
122 >{{ props.item.paymentStatus }}</span> 122 >{{ props.item.paymentStatus }}</span>
123 </td> 123 </td>
124 <td id="td" class="text-xs-center" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
125 <span
126 class="yellow darken-3 pa-2 white--text paymentStatus"
127 >{{ props.item.paymentStatus }}</span>
128 </td>
124 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td> 129 <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
125 <td> 130 <td>
126 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"> 131 <router-link :to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }">
127 <v-tooltip top> 132 <v-tooltip top>
128 <img 133 <img
129 slot="activator" 134 slot="activator"
130 style="cursor:pointer; width:25px; height:18px; " 135 style="cursor:pointer; width:25px; height:18px; "
131 class="mr-5" 136 class="mr-5"
132 src="/static/icon/eye1.png" 137 src="/static/icon/eye1.png"
133 /> 138 />
134 <span>View</span> 139 <span>View</span>
135 </v-tooltip> 140 </v-tooltip>
136 </router-link> 141 </router-link>
137 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 142 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
138 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> 143 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
139 <v-tooltip top> 144 <v-tooltip top>
140 <img 145 <img
141 slot="activator" 146 slot="activator"
142 style="cursor:pointer; width:20px; height:18px; " 147 style="cursor:pointer; width:20px; height:18px; "
143 class="mr-5" 148 class="mr-5"
144 src="/static/icon/edit1.png" 149 src="/static/icon/edit1.png"
145 /> 150 />
146 <span>Edit</span> 151 <span>Edit</span>
147 </v-tooltip> 152 </v-tooltip>
148 </router-link> 153 </router-link>
149 <v-tooltip top> 154 <v-tooltip top>
150 <img 155 <img
151 slot="activator" 156 slot="activator"
152 style="cursor:pointer;width:20px; height:20px; " 157 style="cursor:pointer;width:20px; height:20px; "
153 class="mr-5" 158 class="mr-5"
154 @click="deleteItem(props.item)" 159 @click="deleteItem(props.item)"
155 src="/static/icon/delete1.png" 160 src="/static/icon/delete1.png"
156 /> 161 />
157 <span>Delete</span> 162 <span>Delete</span>
158 </v-tooltip> 163 </v-tooltip>
159 </span> 164 </span>
160 </td> 165 </td>
161 </template> 166 </template>
162 <v-alert 167 <v-alert
163 slot="no-results" 168 slot="no-results"
164 :value="true" 169 :value="true"
165 color="error" 170 color="error"
166 icon="warning" 171 icon="warning"
167 >Your search for "{{ search }}" found no results.</v-alert> 172 >Your search for "{{ search }}" found no results.</v-alert>
168 </v-data-table> 173 </v-data-table>
169 </v-tab-item> 174 </v-tab-item>
170 <!-- ****** ADD multiple INVOICE ****** --> 175 <!-- ****** ADD multiple INVOICE ****** -->
171 <v-tab-item> 176 <v-tab-item>
172 <v-container fluid grid-list-md> 177 <v-container fluid grid-list-md>
173 <v-snackbar 178 <v-snackbar
174 :timeout="timeout" 179 :timeout="timeout"
175 :top="y === 'top'" 180 :top="y === 'top'"
176 :right="x === 'right'" 181 :right="x === 'right'"
177 :vertical="mode === 'vertical'" 182 :vertical="mode === 'vertical'"
178 v-model="snackbar" 183 v-model="snackbar"
179 color="success" 184 :color="color"
180 >{{ text }}</v-snackbar> 185 >{{ text }}</v-snackbar>
181 <v-flex xs12 sm12> 186 <v-flex xs12 sm12>
182 <v-container fluid> 187 <v-container fluid>
183 <v-layout wrap> 188 <v-layout wrap>
184 <v-flex xs12 sm12 md5 class="mt-4"> 189 <v-flex xs12 sm12 md5 class="mt-4">
185 <v-card flat> 190 <v-card flat>
186 <v-toolbar dark class="fixcolors" flat> 191 <v-toolbar dark class="fixcolors" flat>
187 <v-spacer></v-spacer> 192 <v-spacer></v-spacer>
188 <v-toolbar-title> 193 <v-toolbar-title>
189 <h3>Invoice</h3> 194 <h3>Invoice</h3>
190 </v-toolbar-title> 195 </v-toolbar-title>
191 <v-spacer></v-spacer> 196 <v-spacer></v-spacer>
192 </v-toolbar> 197 </v-toolbar>
193 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 198 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
194 <v-layout> 199 <v-layout>
195 <v-flex xs4 class="pt-4 subheading"> 200 <v-flex xs4 class="pt-4 subheading">
196 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 201 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
197 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 202 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
198 </v-flex> 203 </v-flex>
199 <v-flex xs6 class="ml-3"> 204 <v-flex xs6 class="ml-3">
200 <v-select 205 <v-select
201 :items="addclass" 206 :items="addclass"
202 label="Select Class" 207 label="Select Class"
203 v-model="invoiceData.classNum" 208 v-model="invoiceData.classNum"
204 item-text="classNum" 209 item-text="classNum"
205 item-value="_id" 210 item-value="_id"
206 @change="getAllStudents()" 211 @change="getAllStudents()"
207 :rules="classRules" 212 :rules="classRules"
208 required 213 required
209 ></v-select> 214 ></v-select>
210 </v-flex> 215 </v-flex>
211 </v-layout> 216 </v-layout>
212 <v-layout> 217 <v-layout>
213 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
214 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 219 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
215 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 220 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
216 </v-flex> 221 </v-flex>
217 <v-flex xs6 class="ml-3"> 222 <v-flex xs6 class="ml-3">
218 <v-select 223 <v-select
219 :items="studentList" 224 :items="studentList"
220 label="Select Incharge" 225 label="Select Incharge"
221 v-model="invoiceData.sectionId" 226 v-model="invoiceData.sectionId"
222 item-text="name" 227 item-text="name"
223 item-value="_id" 228 item-value="_id"
224 :rules="inchargeRules" 229 :rules="inchargeRules"
225 required 230 required
226 ></v-select> 231 ></v-select>
227 </v-flex> 232 </v-flex>
228 </v-layout> 233 </v-layout>
229 <v-layout> 234 <v-layout>
230 <v-flex xs4 class="pt-4 subheading"> 235 <v-flex xs4 class="pt-4 subheading">
231 <label class="right">Date:</label> 236 <label class="right">Date:</label>
232 </v-flex> 237 </v-flex>
233 <v-flex xs6 class="ml-3"> 238 <v-flex xs6 class="ml-3">
234 <v-menu 239 <v-menu
235 ref="menu1" 240 ref="menu1"
236 :close-on-content-click="false" 241 :close-on-content-click="false"
237 v-model="menu1" 242 v-model="menu1"
238 :nudge-right="40" 243 :nudge-right="40"
239 lazy 244 lazy
240 :return-value.sync="invoiceData.date" 245 :return-value.sync="invoiceData.date"
241 transition="scale-transition" 246 transition="scale-transition"
242 offset-y 247 offset-y
243 full-width 248 full-width
244 min-width="290px" 249 min-width="290px"
245 > 250 >
246 <v-text-field 251 <v-text-field
247 slot="activator" 252 slot="activator"
248 :rules="dateRules" 253 :rules="dateRules"
249 v-model="invoiceData.date" 254 v-model="invoiceData.date"
250 placeholder="Select date" 255 placeholder="Select date"
251 ></v-text-field> 256 ></v-text-field>
252 <v-date-picker 257 <v-date-picker
253 v-model="invoiceData.date" 258 v-model="invoiceData.date"
254 @input="$refs.menu1.save(invoiceData.date)" 259 @input="$refs.menu1.save(invoiceData.date)"
255 ></v-date-picker> 260 ></v-date-picker>
256 </v-menu> 261 </v-menu>
257 </v-flex> 262 </v-flex>
258 </v-layout> 263 </v-layout>
259 <v-layout> 264 <v-layout>
260 <v-flex xs4 class="pt-4 subheading"> 265 <v-flex xs4 class="pt-4 subheading">
261 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 266 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 267 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
263 </v-flex> 268 </v-flex>
264 <v-flex xs6 class="ml-3"> 269 <v-flex xs6 class="ml-3">
265 <v-select 270 <v-select
266 :items="paymentStatus" 271 :items="paymentStatus"
267 v-model="invoiceData.paymentStatus" 272 v-model="invoiceData.paymentStatus"
268 item-text="name" 273 item-text="name"
269 item-value="value" 274 item-value="value"
270 label="Select Payment Status" 275 label="Select Payment Status"
271 @change="getPayMethodList" 276 @change="getPayMethodList"
272 :rules="paymentStatusRules" 277 :rules="paymentStatusRules"
273 required 278 required
274 ></v-select> 279 ></v-select>
275 </v-flex> 280 </v-flex>
276 </v-layout> 281 </v-layout>
277 <v-layout v-show="showPayMethods"> 282 <v-layout v-show="showPayMethods">
278 <v-flex xs4 class="pt-4 subheading"> 283 <v-flex xs4 class="pt-4 subheading">
279 <label class="right">Payment Method:</label> 284 <label class="right">Payment Method:</label>
280 </v-flex> 285 </v-flex>
281 <v-flex xs6 class="ml-3"> 286 <v-flex xs6 class="ml-3">
282 <v-select 287 <v-select
283 :items="paymentMethods" 288 :items="paymentMethods"
284 v-model="invoiceData.paymentMethod" 289 v-model="invoiceData.paymentMethod"
285 label="Select Payment Method" 290 label="Select Payment Method"
286 required 291 required
287 ></v-select> 292 ></v-select>
288 </v-flex> 293 </v-flex>
289 </v-layout> 294 </v-layout>
290 <v-layout> 295 <v-layout>
291 <v-flex xs12 sm10 offset-sm1> 296 <v-flex xs12 sm10 offset-sm1>
292 <v-card-actions> 297 <v-card-actions>
293 <v-btn @click="clear" round dark>clear</v-btn> 298 <v-btn @click="clear" round dark>clear</v-btn>
294 <v-spacer></v-spacer> 299 <v-spacer></v-spacer>
295 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 300 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
296 </v-card-actions> 301 </v-card-actions>
297 </v-flex> 302 </v-flex>
298 </v-layout> 303 </v-layout>
299 </v-form> 304 </v-form>
300 </v-card> 305 </v-card>
301 </v-flex> 306 </v-flex>
302 <v-flex xs12 sm12 md7 class="mt-4"> 307 <v-flex xs12 sm12 md7 class="mt-4">
303 <v-card> 308 <v-card>
304 <v-toolbar dark class="fixcolors" flat> 309 <v-toolbar dark class="fixcolors" flat>
305 <v-spacer></v-spacer> 310 <v-spacer></v-spacer>
306 <v-toolbar-title> 311 <v-toolbar-title>
307 <h3>Fee Type List</h3> 312 <h3>Fee Type List</h3>
308 </v-toolbar-title> 313 </v-toolbar-title>
309 <v-spacer></v-spacer> 314 <v-spacer></v-spacer>
310 </v-toolbar> 315 </v-toolbar>
311 <v-layout> 316 <v-layout>
312 <v-flex xs4 sm2 class="mt-4"> 317 <v-flex xs4 sm2 class="mt-4">
313 <label class="right title">Fee Type:</label> 318 <label class="right title">Fee Type:</label>
314 </v-flex> 319 </v-flex>
315 <v-flex xs4 sm4> 320 <v-flex xs4 sm4>
316 <v-select 321 <v-select
317 :items="feeTypes" 322 :items="feeTypes"
318 v-model="feeType.feeTypeName" 323 v-model="feeType.feeTypeName"
319 item-text="feeType" 324 item-text="feeType"
320 item-value="feeType" 325 item-value="feeType"
321 label="Select Fee Type" 326 label="Select Fee Type"
322 ></v-select> 327 ></v-select>
323 </v-flex> 328 </v-flex>
324 <v-flex xs4 sm6> 329 <v-flex xs4 sm6>
325 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 330 <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
326 </v-flex> 331 </v-flex>
327 </v-layout> 332 </v-layout>
328 <table class="feeTypeTable tableRsponsive"> 333 <table class="feeTypeTable tableRsponsive">
329 <tr class="info white--text"> 334 <tr class="info white--text">
330 <th>#</th> 335 <th>#</th>
331 <th>Fee Type</th> 336 <th>Fee Type</th>
332 <th>Amount</th> 337 <th>Amount</th>
333 <th>Discount(%)</th> 338 <th>Discount(%)</th>
334 <th>Subtotal</th> 339 <th>Subtotal</th>
335 <th>Paid Amount</th> 340 <th>Paid Amount</th>
336 <th>Action</th> 341 <th>Action</th>
337 </tr> 342 </tr>
338 <tr 343 <tr
339 v-show="showFeeType" 344 v-show="showFeeType"
340 v-for="(feeType, index) in feeTypeData" 345 v-for="(feeType, index) in feeTypeData"
341 :key="index" 346 :key="index"
342 v-on:keyup="getAmmountDetails(feeType)" 347 v-on:keyup="getAmmountDetails(feeType)"
343 > 348 >
344 <td style="width:40px">{{ index + 1 }}</td> 349 <td style="width:40px">{{ index + 1 }}</td>
345 <td style="width:120px">{{ feeType.feeTypeName }}</td> 350 <td style="width:120px">{{ feeType.feeTypeName }}</td>
346 <td> 351 <td>
347 <v-text-field 352 <v-text-field
348 placeholder="fill your Amount" 353 placeholder="fill your Amount"
349 v-model="feeType.amount" 354 v-model="feeType.amount"
350 type="number" 355 type="number"
351 ></v-text-field> 356 ></v-text-field>
352 </td> 357 </td>
353 <td> 358 <td>
354 <v-text-field 359 <v-text-field
355 placeholder="fill your Discount" 360 placeholder="fill your Discount"
356 v-model="feeType.discount" 361 v-model="feeType.discount"
357 type="number" 362 type="number"
358 ></v-text-field> 363 ></v-text-field>
359 </td> 364 </td>
360 <td>{{ feeType.subTotal }}</td> 365 <td>{{ feeType.subTotal }}</td>
361 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 366 <td v-if="invoiceData.paymentStatus === 'NOT_PAID'">
362 <v-text-field 367 <v-text-field
363 placeholder="fill your Paid Amount" 368 placeholder="fill your Paid Amount"
364 v-model="feeType.paidAmount" 369 v-model="feeType.paidAmount"
365 type="number" 370 type="number"
366 :disabled="disabled" 371 :disabled="disabled"
367 ></v-text-field> 372 ></v-text-field>
368 </td> 373 </td>
369 <td v-if="invoiceData.paymentStatus == ''"> 374 <td v-if="invoiceData.paymentStatus == ''">
370 <v-text-field 375 <v-text-field
371 placeholder="fill your Paid Amount" 376 placeholder="fill your Paid Amount"
372 v-model="feeType.paidAmount" 377 v-model="feeType.paidAmount"
373 type="number" 378 type="number"
374 :disabled="disabled" 379 :disabled="disabled"
375 ></v-text-field> 380 ></v-text-field>
376 </td> 381 </td>
377 <td 382 <td
378 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 383 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
379 > 384 >
380 <v-text-field 385 <v-text-field
381 placeholder="fill your Paid Amount" 386 placeholder="fill your Paid Amount"
382 v-model="feeType.paidAmount" 387 v-model="feeType.paidAmount"
383 type="number" 388 type="number"
384 ></v-text-field> 389 ></v-text-field>
385 </td> 390 </td>
386 <td> 391 <td>
387 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 392 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
388 </td> 393 </td>
389 </tr> 394 </tr>
390 <tfoot> 395 <tfoot>
391 <tr> 396 <tr>
392 <td colspan="2">Total:</td> 397 <td colspan="2">Total:</td>
393 <td>{{ feeType.amount }}</td> 398 <td>{{ feeType.amount }}</td>
394 <td>{{ feeType.discount }}</td> 399 <td>{{ feeType.discount }}</td>
395 <td>{{ feeType.subTotal }}</td> 400 <td>{{ feeType.subTotal }}</td>
396 <td>{{ feeType.paidAmount }}</td> 401 <td>{{ feeType.paidAmount }}</td>
397 </tr> 402 </tr>
398 </tfoot> 403 </tfoot>
399 </table> 404 </table>
400 </v-card> 405 </v-card>
401 </v-flex> 406 </v-flex>
402 </v-layout> 407 </v-layout>
403 </v-container> 408 </v-container>
404 </v-flex> 409 </v-flex>
405 </v-container> 410 </v-container>
406 </v-tab-item> 411 </v-tab-item>
407 </v-tabs> 412 </v-tabs>
408 <div class="loader" v-if="showLoader"> 413 <div class="loader" v-if="showLoader">
409 <v-progress-circular indeterminate color="white"></v-progress-circular> 414 <v-progress-circular indeterminate color="white"></v-progress-circular>
410 </div> 415 </div>
411 </v-app> 416 </v-app>
412 </template> 417 </template>
413 418
414 <script> 419 <script>
415 import http from "@/Services/http.js"; 420 import http from "@/Services/http.js";
416 import Util from "@/util"; 421 import Util from "@/util";
417 import moment from "moment"; 422 import moment from "moment";
418 423
419 export default { 424 export default {
420 data: () => ({ 425 data: () => ({
421 snackbar: false, 426 snackbar: false,
422 showPayMethods: false, 427 showPayMethods: false,
423 y: "top", 428 y: "top",
424 x: "right", 429 x: "right",
425 mode: "", 430 mode: "",
426 timeout: 3000, 431 timeout: 5000,
427 text: "", 432 text: "",
433 color: "",
428 showLoader: false, 434 showLoader: false,
429 loading: false, 435 loading: false,
430 date: null, 436 date: null,
431 search: "", 437 search: "",
432 dialog: false, 438 dialog: false,
433 dialog1: false, 439 dialog1: false,
434 valid: true, 440 valid: true,
435 validEdit: true, 441 validEdit: true,
436 isActive: true, 442 isActive: true,
437 newActive: false, 443 newActive: false,
438 showFeeType: false, 444 showFeeType: false,
439 disabled: true, 445 disabled: true,
440 details: [], 446 details: [],
441 feeTypes: [], 447 feeTypes: [],
442 menu1: false, 448 menu1: false,
443 paymentMethods: ["Cash", "Cheque"], 449 paymentMethods: ["Cash", "Cheque"],
444 feeType: { 450 feeType: {
445 amount: "0.00", 451 amount: "0.00",
446 discount: "0.00", 452 discount: "0.00",
447 paidAmount: 0.0, 453 paidAmount: 0.0,
448 subTotal: "0.00", 454 subTotal: "0.00",
449 feeTypeName: "" 455 feeTypeName: ""
450 }, 456 },
451 feeTypeData: [], 457 feeTypeData: [],
452 pagination: { 458 pagination: {
453 rowsPerPage: 15 459 rowsPerPage: 15
454 }, 460 },
455 classRules: [v => !!v || " Class Name is required"], 461 classRules: [v => !!v || " Class Name is required"],
456 inchargeRules: [v => !!v || "Student Name is required"], 462 inchargeRules: [v => !!v || "Student Name is required"],
457 dateRules: [v => !!v || " Date is required"], 463 dateRules: [v => !!v || " Date is required"],
458 paymentStatusRules: [v => !!v || "Payment Status is required"], 464 paymentStatusRules: [v => !!v || "Payment Status is required"],
459 paymentMethodsRules: [v => !!v || "payment Method is required"], 465 paymentMethodsRules: [v => !!v || "payment Method is required"],
460 headers: [ 466 headers: [
461 { 467 {
462 text: "No", 468 text: "No",
463 align: "center", 469 align: "center",
464 sortable: false, 470 sortable: false,
465 value: "No" 471 value: "No"
466 }, 472 },
467 { 473 {
468 text: "Student", 474 text: "Student",
469 value: "student", 475 value: "student",
470 sortable: false, 476 sortable: false,
471 align: "center" 477 align: "center"
472 }, 478 },
473 { text: "Class", value: "class", sortable: false, align: "center" }, 479 { text: "Class", value: "class", sortable: false, align: "center" },
474 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 480 { text: "Total", value: "subtotal", sortable: false, align: "center" },
475 { text: "Discount", value: "discount", sortable: false, align: "center" }, 481 { text: "Discount", value: "discount", sortable: false, align: "center" },
476 { 482 {
477 text: "Paid Amount", 483 text: "Paid Amount",
478 value: "paidAmount", 484 value: "paidAmount",
479 sortable: false, 485 sortable: false,
480 align: "center" 486 align: "center"
481 }, 487 },
482 { 488 {
483 text: "Balance", 489 text: "Balance",
484 value: "Balance", 490 value: "Balance",
485 sortable: false, 491 sortable: false,
486 align: "center" 492 align: "center"
487 }, 493 },
488 { 494 {
489 text: "Status", 495 text: "Status",
490 value: "paymentStatus", 496 value: "paymentStatus",
491 sortable: false, 497 sortable: false,
492 align: "center" 498 align: "center"
493 }, 499 },
494 { 500 {
495 text: "Date", 501 text: "Date",
496 value: "date", 502 value: "date",
497 sortable: false, 503 sortable: false,
498 align: "center" 504 align: "center"
499 }, 505 },
500 { text: "Action", value: "", sortable: false, align: "center" } 506 { text: "Action", value: "", sortable: false, align: "center" }
501 ], 507 ],
502 invoiceList: [], 508 invoiceList: [],
503 token: "", 509 token: "",
504 editedItem: {}, 510 editedItem: {},
505 invoiceData: { 511 invoiceData: {
506 paymentStatus: "" 512 paymentStatus: ""
507 }, 513 },
508 addclass: [], 514 addclass: [],
509 studentList: [], 515 studentList: [],
510 paymentStatus: [ 516 paymentStatus: [
511 { 517 {
512 name: "Not Paid", 518 name: "Not Paid",
513 value: "NOT_PAID" 519 value: "NOT_PAID"
514 }, 520 },
515 { 521 {
516 name: "Partially Paid", 522 name: "Partially Paid",
517 value: "PARTIALLY_PAID" 523 value: "PARTIALLY_PAID"
518 }, 524 },
519 { 525 {
520 name: "Fully Paid", 526 name: "Fully Paid",
521 value: "FULLY_PAID" 527 value: "FULLY_PAID"
522 } 528 }
523 ] 529 ]
524 }), 530 }),
525 methods: { 531 methods: {
526 save(date) { 532 save(date) {
527 this.$refs.menu1.save(date); 533 this.$refs.menu1.save(date);
528 }, 534 },
529 dates: function(date) { 535 dates: function(date) {
530 return moment(date).format("MMMM DD, YYYY"); 536 return moment(date).format("MMMM DD, YYYY");
531 }, 537 },
532 // profile(item) { 538 // profile(item) {
533 // this.editedIndex = this.InvoiceList.indexOf(item); 539 // this.editedIndex = this.InvoiceList.indexOf(item);
534 // this.editedItem = Object.assign({}, item); 540 // this.editedItem = Object.assign({}, item);
535 // this.dialog1 = true; 541 // this.dialog1 = true;
536 // }, 542 // },
537 deleteItem(item) { 543 deleteItem(item) {
538 let deleteInvoice = { 544 let deleteInvoice = {
539 invoiceId: item._id 545 invoiceId: item._id
540 }; 546 };
541 http() 547 http()
542 .delete( 548 .delete(
543 "/deleteInvoice", 549 "/deleteInvoice",
544 confirm("Are you sure you want to delete this?") && { 550 confirm("Are you sure you want to delete this?") && {
545 params: deleteInvoice 551 params: deleteInvoice
546 } 552 }
547 ) 553 )
548 .then(response => { 554 .then(response => {
549 if ((this.snackbar = true)) { 555 this.snackbar = true;
550 this.text = "Successfully delete Existing Invoice"; 556 this.text = "Successfully delete Existing Invoice";
551 } 557 this.color = "green";
552 this.getInvoiceList(); 558 this.getInvoiceList();
553 }) 559 })
554 .catch(error => { 560 .catch(error => {
555 // console.log(error); 561 // console.log(error);
556 }); 562 });
557 }, 563 },
558 activeTab(type) { 564 activeTab(type) {
559 switch (type) { 565 switch (type) {
560 case "existing": 566 case "existing":
561 this.newActive = false; 567 this.newActive = false;
562 this.isActive = true; 568 this.isActive = true;
563 break; 569 break;
564 570
565 default: 571 default:
566 this.newActive = true; 572 this.newActive = true;
567 this.isActive = false; 573 this.isActive = false;
568 break; 574 break;
569 } 575 }
570 }, 576 },
571 close() { 577 close() {
572 this.dialog = false; 578 this.dialog = false;
573 setTimeout(() => { 579 setTimeout(() => {
574 this.editedItem = Object.assign({}, this.defaultItem); 580 this.editedItem = Object.assign({}, this.defaultItem);
575 this.editedIndex = -1; 581 this.editedIndex = -1;
576 }, 300); 582 }, 300);
577 }, 583 },
578 close1() { 584 close1() {
579 this.dialog1 = false; 585 this.dialog1 = false;
580 }, 586 },
587 // totalAmount() {
588 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
589 // // console.log(
590 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
591 // // this.feeType.subTotal
592 // // );
593
594 // if (this.feeType.paidAmount < this.feeType.subTotal) {
595 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
596
597 // this.feeType.paidAmount = this.feeType.subTotal;
598 // console.log(
599 // "this.feeType.paidAmount BBBBBBBBBBB",
600 // this.feeType.paidAmount
601 // );
602 // }
603 // },
581 submit() { 604 submit() {
582 let feeTypeId = ""; 605 let feeTypeId = "";
583 for (let i = 0; i < this.feeTypes.length; i++) { 606 for (let i = 0; i < this.feeTypes.length; i++) {
584 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 607 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
585 feeTypeId = this.feeTypes[i]._id; 608 feeTypeId = this.feeTypes[i]._id;
586 } 609 }
587 } 610 }
588 if (this.$refs.form.validate()) { 611 if (this.$refs.form.validate()) {
589 let invoiceData = { 612 let invoiceData = {
590 classId: this.invoiceData.classNum, 613 classId: this.invoiceData.classNum,
591 studentId: this.invoiceData.sectionId, 614 studentId: this.invoiceData.sectionId,
592 date: this.invoiceData.date, 615 date: this.invoiceData.date,
593 paymentStatus: this.invoiceData.paymentStatus, 616 paymentStatus: this.invoiceData.paymentStatus,
594 paymentMethod: this.invoiceData.paymentMethod, 617 paymentMethod: this.invoiceData.paymentMethod,
595 feeType: this.feeTypeData, 618 feeType: this.feeTypeData,
596 totalAmount: this.feeType.amount, 619 totalAmount: this.feeType.amount,
597 totalDiscount: this.feeType.discount, 620 totalDiscount: this.feeType.discount,
598 totalSubTotal: this.feeType.subTotal, 621 totalSubTotal: this.feeType.subTotal,
599 totalPaidAmount: this.feeType.paidAmount 622 totalPaidAmount: this.feeType.paidAmount
600 }; 623 };
601 if (invoiceData.paymentStatus == "NOT_PAID") { 624 if (invoiceData.paymentStatus == "NOT_PAID") {
602 delete invoiceData.totalPaidAmount; 625 delete invoiceData.totalPaidAmount;
603 } 626 }
604 http() 627 http()
605 .post("/createInvoice", invoiceData) 628 .post("/createInvoice", invoiceData)
606 .then(response => { 629 .then(response => {
607 this.getInvoiceList(); 630 this.getInvoiceList();
608 this.snackbar = true; 631 this.snackbar = true;
609 this.text = "New Invoice added successfully"; 632 this.text = "New Invoice added successfully";
633 this.color = "green";
610 this.clear(); 634 this.clear();
611 this.feeTypeData = []; 635 this.feeTypeData = [];
612 if (this.feeTypeData.length == 0) { 636 if (this.feeTypeData.length == 0) {
613 this.feeType = { 637 this.feeType = {
614 amount: "0.00", 638 amount: "0.00",
615 discount: "0.00", 639 discount: "0.00",
616 paidAmount: "0.00", 640 paidAmount: "0.00",
617 subTotal: "0.00", 641 subTotal: "0.00",
618 feeTypeList: "" 642 feeTypeList: ""
619 }; 643 };
620 } 644 }
621 this.loading = false; 645 this.loading = false;
622 }) 646 })
623 .catch(error => { 647 .catch(error => {
624 // console.log(error); 648 console.log(error.response.data.errors[0].messages[0]);
625 this.snackbar = true; 649 this.snackbar = true;
626 this.text = error.response.data.message; 650 this.text = error.response.data.errors[0].messages[0];
651 this.color = "error";
627 this.loading = false; 652 this.loading = false;
628 }); 653 });
629 } 654 }
630 }, 655 },
631 clear() { 656 clear() {
632 this.$refs.form.reset(); 657 this.$refs.form.reset();
633 }, 658 },
634 getInvoiceList() { 659 getInvoiceList() {
635 this.showLoader = true; 660 this.showLoader = true;
636 http() 661 http()
637 .get("/getInvoicesList", { 662 .get("/getInvoicesList", {
638 params: { schoolId: this.$store.state.schoolId }, 663 params: { schoolId: this.$store.state.schoolId },
639 headers: { Authorization: "Bearer " + this.token } 664 headers: { Authorization: "Bearer " + this.token }
640 }) 665 })
641 .then(response => { 666 .then(response => {
642 this.invoiceList = response.data.data; 667 this.invoiceList = response.data.data;
643 this.showLoader = false; 668 this.showLoader = false;
644 }) 669 })
645 .catch(error => { 670 .catch(error => {
646 // console.log("err====>", err); 671 // console.log("err====>", err);
647 this.showLoader = false; 672 this.showLoader = false;
648 if (error.response.status === 401) { 673 if (error.response.status === 401) {
649 this.$router.replace({ path: "/" }); 674 this.$router.replace({ path: "/" });
650 this.$store.dispatch("setToken", null); 675 this.$store.dispatch("setToken", null);
651 this.$store.dispatch("Id", null); 676 this.$store.dispatch("Id", null);
652 } 677 }
653 }); 678 });
654 }, 679 },
655 selectFeeType() { 680 selectFeeType() {
656 this.showFeeType = true; 681 this.showFeeType = true;
657 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 682 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
658 }, 683 },
659 deleteSelectFee: function(index) { 684 deleteSelectFee: function(index) {
660 this.feeTypeData.splice(index, 1); 685 this.feeTypeData.splice(index, 1);
661 for (let i = 0; i < this.feeTypeData.length; i++) { 686 for (let i = 0; i < this.feeTypeData.length; i++) {
662 this.feeType = this.feeTypeData[i]; 687 this.feeType = this.feeTypeData[i];
663 } 688 }
664 if (this.feeTypeData.length == 0) { 689 if (this.feeTypeData.length == 0) {
665 this.feeType = { 690 this.feeType = {
666 amount: "0.00", 691 amount: "0.00",
667 discount: "0.00", 692 discount: "0.00",
668 paidAmount: "0.00", 693 paidAmount: "0.00",
669 subTotal: "0.00", 694 subTotal: "0.00",
670 feeTypeName: "" 695 feeTypeName: ""
671 }; 696 };
672 } 697 }
673 }, 698 },
674 getAllClasses() { 699 getAllClasses() {
675 http() 700 http()
676 .get("/getClassesList", { 701 .get("/getClassesList", {
677 params: { schoolId: this.$store.state.schoolId }, 702 params: { schoolId: this.$store.state.schoolId },
678 headers: { Authorization: "Bearer " + this.token } 703 headers: { Authorization: "Bearer " + this.token }
679 }) 704 })
680 .then(response => { 705 .then(response => {
681 this.addclass = response.data.data; 706 this.addclass = response.data.data;
682 }) 707 })
683 .catch(err => { 708 .catch(err => {
684 // console.log("err====>", err); 709 // console.log("err====>", err);
685 // this.$router.replace({ path: "/" }); 710 // this.$router.replace({ path: "/" });
686 }); 711 });
687 }, 712 },
688 getAllStudents() { 713 getAllStudents() {
714 this.showLoader = true;
689 http() 715 http()
690 .get("/getStudentsList", { 716 .get("/getStudentsList", {
691 params: { 717 params: {
692 classId: this.invoiceData.classNum, 718 classId: this.invoiceData.classNum,
693 schoolId: this.$store.state.schoolId 719 schoolId: this.$store.state.schoolId
694 }, 720 },
695 headers: { Authorization: "Bearer " + this.token } 721 headers: { Authorization: "Bearer " + this.token }
696 }) 722 })
697 .then(response => { 723 .then(response => {
698 this.studentList = response.data.data; 724 this.studentList = response.data.data;
725 this.showLoader = false;
699 }) 726 })
700 .catch(err => { 727 .catch(err => {
728 this.showLoader = false;
701 // console.log("err====>", err); 729 // console.log("err====>", err);
702 // this.$router.replace({ path: "/" }); 730 // this.$router.replace({ path: "/" });
703 }); 731 });
704 }, 732 },
705 getfeeType() { 733 getfeeType() {
706 http() 734 http()
707 .get("/getFeesList", { 735 .get("/getFeesList", {
708 params: { 736 params: {
709 schoolId: this.$store.state.schoolId 737 schoolId: this.$store.state.schoolId
710 }, 738 },
711 headers: { Authorization: "Bearer " + this.token } 739 headers: { Authorization: "Bearer " + this.token }
712 }) 740 })
713 .then(response => { 741 .then(response => {
714 this.feeTypes = response.data.data; 742 this.feeTypes = response.data.data;
715 }) 743 })
716 .catch(err => { 744 .catch(err => {
717 // console.log("err====>", err); 745 // console.log("err====>", err);
718 // this.$router.replace({ path: "/" }); 746 // this.$router.replace({ path: "/" });
719 }); 747 });
720 }, 748 },
721 getAmmountDetails(feeTyp) { 749 getAmmountDetails(feeTyp) {
722 let feeType = { 750 let feeType = {
723 amount: "", 751 amount: "",
724 discount: "", 752 discount: "",
725 subTotal: "", 753 subTotal: "",
726 subParticularTotal: "", 754 subParticularTotal: "",
727 paidAmount: "" 755 paidAmount: ""
728 }; 756 };
729 for (let i = 0; i < this.feeTypeData.length; i++) { 757 for (let i = 0; i < this.feeTypeData.length; i++) {
730 // *********** AMOUNT *********** 758 // *********** AMOUNT ***********
731 759
732 feeType.amount = 760 feeType.amount =
733 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 761 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
734 // console.log("feeType.amount ", feeType.amount); 762 // console.log("feeType.amount ", feeType.amount);
735 this.feeType.amount = feeType.amount; 763 this.feeType.amount = feeType.amount;
736 this.feeType.subTotal = feeType.amount; 764 this.feeType.subTotal = feeType.amount;
737 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 765 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
738 766
739 // *********** DISCOUNT *********** 767 // *********** DISCOUNT ***********
740 768
741 if (this.feeTypeData[i].discount) { 769 if (this.feeTypeData[i].discount) {
742 feeType.discount = 770 feeType.discount =
743 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 771 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
744 // console.log("feeType.discount", feeType.discount); 772 // console.log("feeType.discount", feeType.discount);
745 this.feeType.discount = feeType.discount; 773 this.feeType.discount = feeType.discount;
746 feeType.subParticularTotal = 774 feeType.subParticularTotal =
747 this.feeTypeData[i].amount - 775 this.feeTypeData[i].amount -
748 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 776 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
749 // console.log("feeType.subTotal", feeType.subTotal);
750 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 777 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
751 } 778 }
752 779
753 // *********** SUBTOTAL *********** 780 // *********** SUBTOTAL ***********
754 781
755 feeType.subTotal = 782 feeType.subTotal =
756 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 783 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
757 this.feeType.subTotal = feeType.subTotal.toFixed(2); 784 this.feeType.subTotal = feeType.subTotal.toFixed(2);
758 785
759 // *********** PAID-AMOUNT *********** 786 // *********** PAID-AMOUNT ***********
760 787
761 feeType.paidAmount = 788 feeType.paidAmount =
762 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 789 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
763 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 790 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
791
792 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
793 if (feeType.paidAmount > feeType.subTotal) {
794 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
795 this.feeType.paidAmount = feeType.subTotal;
796 }
764 } 797 }
765 }, 798 },
766 getPayMethodList() { 799 getPayMethodList() {
767 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 800 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
768 this.showPayMethods = true; 801 this.showPayMethods = true;
769 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 802 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
770 this.showPayMethods = true; 803 this.showPayMethods = true;
771 } else { 804 } else {
772 this.showPayMethods = false; 805 this.showPayMethods = false;
773 } 806 }
774 } 807 }
775 }, 808 },
776 mounted() { 809 mounted() {
777 this.token = this.$store.state.token; 810 this.token = this.$store.state.token;
778 this.getInvoiceList(); 811 this.getInvoiceList();
779 this.getAllClasses(); 812 this.getAllClasses();
780 this.getfeeType(); 813 this.getfeeType();
781 }, 814 },
782 created() { 815 created() {
783 this.$root.$on("app:search", search => { 816 this.$root.$on("app:search", search => {
784 this.search = search; 817 this.search = search;
785 }); 818 });
786 }, 819 },
787 beforeDestroy() { 820 beforeDestroy() {
788 // dont forget to remove the listener 821 // dont forget to remove the listener
789 this.$root.$off("app:search"); 822 this.$root.$off("app:search");
790 } 823 }
791 }; 824 };
792 </script> 825 </script>
793 826
794 827
795 <style scoped> 828 <style scoped>
796 .active { 829 .active {
797 background-color: gray; 830 background-color: gray;
798 color: white !important; 831 color: white !important;
799 } 832 }
800 .activebtn { 833 .activebtn {
801 color: black !important; 834 color: black !important;
802 } 835 }
803 table { 836 table {
804 border-collapse: collapse; 837 border-collapse: collapse;
805 border: 1px solid #e2e7eb; 838 border: 1px solid #e2e7eb;
806 } 839 }
807 840
808 th, 841 th,
809 td { 842 td {
810 border: 1px solid #e2e7eb; 843 border: 1px solid #e2e7eb;
811 padding: 10px; 844 padding: 10px;
812 text-align: center; 845 text-align: center;
813 } 846 }
814 table.feeTypeTable { 847 table.feeTypeTable {
815 table-layout: auto !important; 848 table-layout: auto !important;
816 width: 100% !important; 849 width: 100% !important;
817 } 850 }
src/pages/Account/viewInvoice.vue
Diff comments   View file @d9bb52b
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit 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 moment from "moment"; 132 import moment from "moment";
133 133
134 export default { 134 export default {
135 data: () => ({ 135 data: () => ({
136 showLoader: false, 136 showLoader: false,
137 feeTypes: [], 137 feeTypes: [],
138 invoiceData: {}, 138 invoiceData: {},
139 feeType: { 139 feeType: {
140 amount: "", 140 amount: "",
141 discount: "", 141 discount: "",
142 totalPaidAmount: "", 142 totalPaidAmount: "",
143 subTotal: "", 143 subTotal: "",
144 feeTypeName: "" 144 feeTypeName: ""
145 }, 145 },
146 feeTypeData: [], 146 feeTypeData: [],
147 token: "", 147 token: "",
148 invoiceParticularData: {} 148 invoiceParticularData: {}
149 }), 149 }),
150 150
151 methods: { 151 methods: {
152 getInvoiceList() { 152 getInvoiceList() {
153 http() 153 http()
154 .get("/getParticularInvoice", { 154 .get("/getParticularInvoice", {
155 params: { 155 params: {
156 invoiceId: this.$route.params.viewInvoiceId, 156 invoiceId: this.$route.params.viewInvoiceId,
157 schoolId: this.$store.state.schoolId 157 schoolId: this.$store.state.schoolId
158 }, 158 },
159 headers: { Authorization: "Bearer " + this.token } 159 headers: { Authorization: "Bearer " + this.token }
160 }) 160 })
161 .then(response => { 161 .then(response => {
162 this.invoiceParticularData = response.data.data; 162 this.invoiceParticularData = response.data.data;
163 this.invoiceData = this.invoiceParticularData; 163 this.invoiceData = this.invoiceParticularData;
164 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 164 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
165 this.feeTypeData = this.invoiceParticularData.feeType; 165 this.feeTypeData = this.invoiceParticularData.feeType;
166 (this.feeType.amount = response.data.data.totalAmount), 166 (this.feeType.amount = response.data.data.totalAmount),
167 (this.feeType.discount = response.data.data.totalDiscount), 167 (this.feeType.discount = response.data.data.totalDiscount),
168 (this.feeType.subTotal = response.data.data.totalSubTotal), 168 (this.feeType.subTotal = response.data.data.totalSubTotal),
169 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount( 169 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
170 // console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount) 170 this.showLoader = false;
171 (this.showLoader = false)
172 ));
173 }) 171 })
174 .catch(error => { 172 .catch(error => {
175 this.showLoader = false; 173 this.showLoader = false;
176 if (error.response.status === 401) { 174 if (error.response.status === 401) {
177 this.$router.replace({ path: "/" }); 175 this.$router.replace({ path: "/" });
178 this.$store.dispatch("setToken", null); 176 this.$store.dispatch("setToken", null);
179 this.$store.dispatch("Id", null); 177 this.$store.dispatch("Id", null);
180 this.$store.dispatch("Role", null); 178 this.$store.dispatch("Role", null);
181 } 179 }
182 }); 180 });
183 }, 181 },
184 getfeeType() { 182 getfeeType() {
185 http() 183 http()
186 .get("/getFeesList", { 184 .get("/getFeesList", {
187 params: { schoolId: this.$store.state.schoolId }, 185 params: { schoolId: this.$store.state.schoolId },
188 headers: { Authorization: "Bearer " + this.token } 186 headers: { Authorization: "Bearer " + this.token }
189 }) 187 })
190 .then(response => { 188 .then(response => {
191 this.feeTypes = response.data.data; 189 this.feeTypes = response.data.data;
192 }) 190 })
193 .catch(err => { 191 .catch(err => {
194 // console.log("err====>", err); 192 // console.log("err====>", err);
195 }); 193 });
196 }, 194 },
197 getAmmountDetails(feeTyp) { 195 getAmmountDetails(feeTyp) {
198 let feeType = { 196 let feeType = {
199 subTotal: "", 197 subTotal: "",
200 subParticularTotal: "", 198 subParticularTotal: "",
201 paidAmount: "" 199 paidAmount: ""
202 }; 200 };
203 // *********** SUBTOTAL *********** 201 // *********** SUBTOTAL ***********
204 feeType.subTotal = 202 feeType.subTotal =
205 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 203 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
206 this.feeType.subTotal = feeType.subTotal.toFixed(2); 204 this.feeType.subTotal = feeType.subTotal.toFixed(2);
207 // *********** PAID-AMOUNT *********** 205 // *********** PAID-AMOUNT ***********
208 feeType.paidAmount = 206 feeType.paidAmount =
209 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 207 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
210 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 208 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
211 } 209 }
212 }, 210 },
213 mounted() { 211 mounted() {
214 this.token = this.$store.state.token; 212 this.token = this.$store.state.token;
215 this.getInvoiceList(); 213 this.getInvoiceList();
216 this.getfeeType(); 214 this.getfeeType();
217 }, 215 },
218 created() { 216 created() {
219 this.$root.$on("app:search", search => { 217 this.$root.$on("app:search", search => {
220 this.search = search; 218 this.search = search;
221 }); 219 });
222 }, 220 },
223 beforeDestroy() { 221 beforeDestroy() {
224 // dont forget to remove the listener 222 // dont forget to remove the listener
225 this.$root.$off("app:search"); 223 this.$root.$off("app:search");
226 } 224 }
227 }; 225 };
228 </script> 226 </script>
229 227
230 228
231 <style scoped> 229 <style scoped>
232 .active { 230 .active {
233 background-color: gray; 231 background-color: gray;
234 color: white !important; 232 color: white !important;
235 } 233 }
236 .activebtn { 234 .activebtn {
237 color: black !important; 235 color: black !important;
238 } 236 }
239 table { 237 table {
240 border-collapse: collapse; 238 border-collapse: collapse;
241 border: 1px solid #e2e7eb; 239 border: 1px solid #e2e7eb;
242 } 240 }
243 241
244 th, 242 th,
245 td { 243 td {
246 border: 1px solid #e2e7eb; 244 border: 1px solid #e2e7eb;
247 padding: 10px; 245 padding: 10px;
248 text-align: center; 246 text-align: center;
249 } 247 }
250 table.feeTypeTable { 248 table.feeTypeTable {
251 table-layout: auto !important; 249 table-layout: auto !important;
252 width: 100% !important; 250 width: 100% !important;
253 } 251 }
254 @media screen and (max-width: 380px) { 252 @media screen and (max-width: 380px) {
255 .tableRsponsive { 253 .tableRsponsive {
256 display: block; 254 display: block;
257 position: relative; 255 position: relative;
258 overflow: scroll; 256 overflow: scroll;
259 } 257 }
260 } 258 }
261 </style> 259 </style>
src/pages/Class/addclass.vue
Diff comments   View file @d9bb52b
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-text-field
49 v-model="editedItem.classNum" 49 v-model="editedItem.classNum"
50 :label="editedItem.classNum" 50 @keyup.enter="save"
51 :items="classList"
52 :rules="nameRules" 51 :rules="nameRules"
53 ></v-autocomplete> 52 ></v-text-field>
54 </v-flex> 53 </v-flex>
55 </v-layout> 54 </v-layout>
56 <v-card-actions> 55 <v-card-actions>
57 <v-btn round dark @click.native="close">Cancel</v-btn> 56 <v-btn round dark @click.native="close">Cancel</v-btn>
58 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
59 <v-btn round dark @click="save">Save</v-btn> 58 <v-btn round dark @click="save">Save</v-btn>
60 </v-card-actions> 59 </v-card-actions>
61 </v-flex> 60 </v-flex>
62 </v-layout> 61 </v-layout>
63 </v-container> 62 </v-container>
64 </v-card> 63 </v-card>
65 </v-flex> 64 </v-flex>
66 </v-dialog> 65 </v-dialog>
67 66
68 <!-- ****** PROFILE VIEW STUDENTS ****** --> 67 <!-- ****** PROFILE VIEW STUDENTS ****** -->
69 <v-dialog v-model="dialog1" max-width="600px"> 68 <v-dialog v-model="dialog1" max-width="600px">
70 <v-toolbar color="grey lighten-2"> 69 <v-toolbar color="grey lighten-2">
71 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
72 <v-toolbar-title> 71 <v-toolbar-title>
73 <h3>Class</h3> 72 <h3>Class</h3>
74 </v-toolbar-title> 73 </v-toolbar-title>
75 <v-spacer></v-spacer> 74 <v-spacer></v-spacer>
76 <v-icon @click="close1">close</v-icon> 75 <v-icon @click="close1">close</v-icon>
77 </v-toolbar> 76 </v-toolbar>
78 <v-card> 77 <v-card>
79 <v-card-text> 78 <v-card-text>
80 <v-container grid-list-md> 79 <v-container grid-list-md>
81 <v-layout wrap> 80 <v-layout wrap>
82 <v-flex> 81 <v-flex>
83 <v-layout> 82 <v-layout>
84 <v-flex xs6 sm6> 83 <v-flex xs6 sm6>
85 <h5 class="right my-1"> 84 <h5 class="right my-1">
86 <b>Class Name:</b> 85 <b>Class Name:</b>
87 </h5> 86 </h5>
88 </v-flex> 87 </v-flex>
89 <v-flex sm6 xs6> 88 <v-flex sm6 xs6>
90 <h5 class="my-1">{{ editedItem.classNum }}</h5> 89 <h5 class="my-1">{{ editedItem.classNum }}</h5>
91 </v-flex> 90 </v-flex>
92 </v-layout> 91 </v-layout>
93 </v-flex> 92 </v-flex>
94 </v-layout> 93 </v-layout>
95 </v-container> 94 </v-container>
96 </v-card-text> 95 </v-card-text>
97 </v-card> 96 </v-card>
98 </v-dialog> 97 </v-dialog>
99 98
100 <v-snackbar 99 <v-snackbar
101 :timeout="timeout" 100 :timeout="timeout"
102 :top="y === 'top'" 101 :top="y === 'top'"
103 :right="x === 'right'" 102 :right="x === 'right'"
104 :vertical="mode === 'vertical'" 103 :vertical="mode === 'vertical'"
105 v-model="snackbar" 104 v-model="snackbar"
106 color="success" 105 color="success"
107 >{{ text }}</v-snackbar> 106 >{{ text }}</v-snackbar>
108 107
109 <!-- ****** EXISTING-USERS Classess Table ****** --> 108 <!-- ****** EXISTING-USERS Classess Table ****** -->
110 <v-data-table 109 <v-data-table
111 :headers="headers" 110 :headers="headers"
112 :items="desserts" 111 :items="classList"
113 :pagination.sync="pagination" 112 :pagination.sync="pagination"
114 :search="search" 113 :search="search"
115 > 114 >
116 <template slot="items" slot-scope="props"> 115 <template slot="items" slot-scope="props">
117 <td>{{ props.index + 1 }}</td> 116 <td>{{ props.index + 1 }}</td>
118 <td class="text-xs-center">{{ props.item.classNum}}</td> 117 <td class="text-xs-center">{{ props.item.classNum}}</td>
119 <td class="text-xs-center"> 118 <td class="text-xs-center">
120 <span> 119 <span>
121 <v-tooltip top> 120 <v-tooltip top>
122 <img 121 <img
123 slot="activator" 122 slot="activator"
124 style="cursor:pointer; width:25px; height:18px; " 123 style="cursor:pointer; width:25px; height:18px; "
125 class="mr5" 124 class="mr5"
126 @click="profile(props.item)" 125 @click="profile(props.item)"
127 src="/static/icon/eye1.png" 126 src="/static/icon/eye1.png"
128 /> 127 />
129 <span>View</span> 128 <span>View</span>
130 </v-tooltip> 129 </v-tooltip>
131 <v-tooltip top> 130 <v-tooltip top>
132 <img 131 <img
133 slot="activator" 132 slot="activator"
134 style="cursor:pointer; width:20px; height:18px; " 133 style="cursor:pointer; width:20px; height:18px; "
135 class="mr5" 134 class="mr5"
136 @click="editItem(props.item)" 135 @click="editItem(props.item)"
137 src="/static/icon/edit1.png" 136 src="/static/icon/edit1.png"
138 /> 137 />
139 <span>Edit</span> 138 <span>Edit</span>
140 </v-tooltip> 139 </v-tooltip>
141 <v-tooltip top> 140 <v-tooltip top>
142 <img 141 <img
143 slot="activator" 142 slot="activator"
144 style="cursor:pointer; width:20px; height:20px; " 143 style="cursor:pointer; width:20px; height:20px; "
145 class="mr5" 144 class="mr5"
146 @click="deleteItem(props.item)" 145 @click="deleteItem(props.item)"
147 src="/static/icon/delete1.png" 146 src="/static/icon/delete1.png"
148 /> 147 />
149 <span>Delete</span> 148 <span>Delete</span>
150 </v-tooltip> 149 </v-tooltip>
151 </span> 150 </span>
152 </td> 151 </td>
153 </template> 152 </template>
154 <v-alert 153 <v-alert
155 slot="no-results" 154 slot="no-results"
156 :value="true" 155 :value="true"
157 color="error" 156 color="error"
158 icon="warning" 157 icon="warning"
159 >Your search for "{{ search }}" found no results.</v-alert> 158 >Your search for "{{ search }}" found no results.</v-alert>
160 </v-data-table> 159 </v-data-table>
161 </v-tab-item> 160 </v-tab-item>
162 161
163 <!-- ****** ADD multiple Classess ****** --> 162 <!-- ****** ADD multiple Classess ****** -->
164 <v-tab-item> 163 <v-tab-item>
165 <v-container> 164 <v-container>
166 <v-snackbar 165 <v-snackbar
167 :timeout="timeout" 166 :timeout="timeout"
168 :top="y === 'top'" 167 :top="y === 'top'"
169 :right="x === 'right'" 168 :right="x === 'right'"
170 :vertical="mode === 'vertical'" 169 :vertical="mode === 'vertical'"
171 v-model="snackbar" 170 v-model="snackbar"
172 color="success" 171 color="success"
173 >{{ text }}</v-snackbar> 172 >{{ text }}</v-snackbar>
174 <v-flex xs12 sm8 offset-sm2 class="top"> 173 <v-flex xs12 sm8 offset-sm2 class="top">
175 <v-card flat> 174 <v-card flat>
176 <v-container fluid fill-height> 175 <v-container fluid fill-height>
177 <v-layout align-center> 176 <v-layout align-center>
178 <v-flex xs12 class="mt-4"> 177 <v-flex xs12 class="mt-4">
179 <v-form ref="form" v-model="valid" lazy-validation> 178 <v-form ref="form" v-model="valid" lazy-validation>
180 <v-layout> 179 <v-layout>
181 <v-flex xs4 class="pt-4 subheading"> 180 <v-flex xs4 class="pt-4 subheading">
182 <label class="right">Class :</label> 181 <label class="right">Class :</label>
183 </v-flex> 182 </v-flex>
184 <v-flex xs6 class="ml-3"> 183 <v-flex xs6 class="ml-3">
185 <v-autocomplete 184 <v-text-field
186 v-model="addclasses.classNum" 185 v-model="addclasses.classNum"
187 placeholder="fill your class Name" 186 placeholder="fill your class Name"
188 type="text" 187 type="text"
189 :items="classList"
190 :rules="nameRules" 188 :rules="nameRules"
191 required 189 required
192 ></v-autocomplete> 190 ></v-text-field>
193 </v-flex> 191 </v-flex>
194 </v-layout> 192 </v-layout>
195 <v-layout> 193 <v-layout>
196 <v-flex xs12 sm9 offset-sm2> 194 <v-flex xs12 sm9 offset-sm2>
197 <v-card-actions> 195 <v-card-actions>
198 <v-spacer></v-spacer> 196 <v-spacer></v-spacer>
199 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 197 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
200 <v-spacer></v-spacer> 198 <v-spacer></v-spacer>
201 </v-card-actions> 199 </v-card-actions>
202 </v-flex> 200 </v-flex>
203 </v-layout> 201 </v-layout>
204 </v-form> 202 </v-form>
205 </v-flex> 203 </v-flex>
206 </v-layout> 204 </v-layout>
207 </v-container> 205 </v-container>
208 </v-card> 206 </v-card>
209 </v-flex> 207 </v-flex>
210 </v-container> 208 </v-container>
211 </v-tab-item> 209 </v-tab-item>
212 </v-tabs> 210 </v-tabs>
213 <div class="loader" v-if="showLoader"> 211 <div class="loader" v-if="showLoader">
214 <v-progress-circular indeterminate color="white"></v-progress-circular> 212 <v-progress-circular indeterminate color="white"></v-progress-circular>
215 </div> 213 </div>
216 </div> 214 </div>
217 </template> 215 </template>
218 216
219 <script> 217 <script>
220 import http from "@/Services/http.js"; 218 import http from "@/Services/http.js";
221 import Util from "@/util"; 219 import Util from "@/util";
222 220
223 export default { 221 export default {
224 data: () => ({ 222 data: () => ({
225 snackbar: false, 223 snackbar: false,
226 y: "top", 224 y: "top",
227 x: "right", 225 x: "right",
228 mode: "", 226 mode: "",
229 timeout: 3000, 227 timeout: 3000,
230 text: "", 228 text: "",
231 showLoader: false, 229 showLoader: false,
232 loading: false, 230 loading: false,
233 date: null, 231 date: null,
234 search: "", 232 search: "",
235 dialog: false, 233 dialog: false,
236 dialog1: false, 234 dialog1: false,
237 valid: true, 235 valid: true,
238 isActive: true, 236 isActive: true,
239 newActive: false, 237 newActive: false,
240 AddUsercredentials: {}, 238 AddUsercredentials: {},
241 pagination: { 239 pagination: {
242 rowsPerPage: 15 240 rowsPerPage: 15
243 }, 241 },
244 nameRules: [v => !!v || " Class Name is required"], 242 nameRules: [v => !!v || " Class Name is required"],
245 headers: [ 243 headers: [
246 { 244 {
247 text: "No", 245 text: "No",
248 align: "left", 246 align: "left",
249 sortable: false, 247 sortable: false,
250 value: "No" 248 value: "No"
251 }, 249 },
252 { text: "Class No", value: "classNum", sortable: false, align: "center" }, 250 { text: "Class No", value: "classNum", sortable: false, align: "center" },
253 251
254 { text: "Action", value: "", sortable: false, align: "center" } 252 { text: "Action", value: "", sortable: false, align: "center" }
255 ], 253 ],
256 desserts: [], 254 classList: [],
257 classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
258 editedIndex: -1, 255 editedIndex: -1,
259 editedItem: { 256 editedItem: {
260 classNum: "" 257 classNum: ""
261 }, 258 },
262 addclasses: { 259 addclasses: {
263 classNum: "" 260 classNum: ""
264 } 261 }
265 }), 262 }),
266 methods: { 263 methods: {
267 getClassList() { 264 getClassList() {
268 this.showLoader = true; 265 this.showLoader = true;
269 var token = this.$store.state.token; 266 var token = this.$store.state.token;
270 http() 267 http()
271 .get("/getClassesList") 268 .get("/getClassesList")
272 .then(response => { 269 .then(response => {
273 this.desserts = response.data.data; 270 this.classList = response.data.data;
274 this.showLoader = false; 271 this.showLoader = false;
275 }) 272 })
276 .catch(error => { 273 .catch(error => {
277 this.showLoader = false; 274 this.showLoader = false;
278 if (error.response.status === 401) { 275 if (error.response.status === 401) {
279 this.$router.replace({ path: "/" }); 276 this.$router.replace({ path: "/" });
280 this.$store.dispatch("setToken", null); 277 this.$store.dispatch("setToken", null);
281 this.$store.dispatch("Id", null); 278 this.$store.dispatch("Id", null);
282 } 279 }
283 }); 280 });
284 }, 281 },
285 editItem(item) { 282 editItem(item) {
286 this.editedIndex = this.desserts.indexOf(item); 283 this.editedIndex = this.classList.indexOf(item);
287 this.editedItem = Object.assign({}, item); 284 this.editedItem = Object.assign({}, item);
288 this.dialog = true; 285 this.dialog = true;
289 }, 286 },
290 profile(item) { 287 profile(item) {
291 this.editedIndex = this.desserts.indexOf(item); 288 this.editedIndex = this.classList.indexOf(item);
292 this.editedItem = Object.assign({}, item); 289 this.editedItem = Object.assign({}, item);
293 this.dialog1 = true; 290 this.dialog1 = true;
294 }, 291 },
295 deleteItem(item) { 292 deleteItem(item) {
296 let deleteStudent = { 293 let deleteStudent = {
297 classId: item._id 294 classId: item._id
298 }; 295 };
299 http() 296 http()
300 .delete( 297 .delete(
301 "/deleteClass", 298 "/deleteClass",
302 confirm("Are you sure you want to delete this?") && { 299 confirm("Are you sure you want to delete this?") && {
303 params: deleteStudent 300 params: deleteStudent
304 } 301 }
305 ) 302 )
306 .then(response => { 303 .then(response => {
307 // console.log("deleteUers",deleteStudent) 304 // console.log("deleteUers",deleteStudent)
308 if ((this.snackbar = true)) { 305 if ((this.snackbar = true)) {
309 this.text = "Successfully delete Existing Class"; 306 this.text = "Successfully delete Existing Class";
310 } 307 }
311 this.getClassList(); 308 this.getClassList();
312 }) 309 })
313 .catch(error => { 310 .catch(error => {
314 // console.log(error); 311 // console.log(error);
315 }); 312 });
316 }, 313 },
317 activeTab(type) { 314 activeTab(type) {
318 switch (type) { 315 switch (type) {
319 case "existing": 316 case "existing":
320 this.newActive = false; 317 this.newActive = false;
321 this.isActive = true; 318 this.isActive = true;
322 break; 319 break;
323 320
324 default: 321 default:
325 this.newActive = true; 322 this.newActive = true;
326 this.isActive = false; 323 this.isActive = false;
327 break; 324 break;
328 } 325 }
329 }, 326 },
330 close() { 327 close() {
331 this.dialog = false; 328 this.dialog = false;
332 setTimeout(() => { 329 setTimeout(() => {
333 this.editedItem = Object.assign({}, this.defaultItem); 330 this.editedItem = Object.assign({}, this.defaultItem);
334 this.editedIndex = -1; 331 this.editedIndex = -1;
335 }, 300); 332 }, 300);
336 }, 333 },
337 close1() { 334 close1() {
338 this.dialog1 = false; 335 this.dialog1 = false;
339 }, 336 },
340 submit() { 337 submit() {
341 if (this.$refs.form.validate()) { 338 if (this.$refs.form.validate()) {
342 let addClass = { 339 let addClass = {
343 classNum: this.addclasses.classNum 340 classNum: this.addclasses.classNum
344 }; 341 };
345 console.log(addClass); 342 console.log(addClass);
346 this.loading = true; 343 this.loading = true;
347 http() 344 http()
348 .post("/createClass", addClass) 345 .post("/createClass", addClass)
349 .then(response => { 346 .then(response => {
350 this.getClassList(); 347 this.getClassList();
351 if ((this.snackbar = true)) { 348 if ((this.snackbar = true)) {
352 this.text = "New class added successfully"; 349 this.text = "New class added successfully";
353 } 350 }
354 this.clear(); 351 this.clear();
355 this.loading = false; 352 this.loading = false;
356 }) 353 })
357 .catch(error => { 354 .catch(error => {
358 // console.log(error); 355 // console.log(error);
359 this.loading = false; 356 this.loading = false;
360 if ((this.snackbar = true)) { 357 if ((this.snackbar = true)) {
361 this.text = error.response.data.message; 358 this.text = error.response.data.message;
362 } 359 }
363 }); 360 });
364 } 361 }
365 }, 362 },
366 clear() { 363 clear() {
367 this.$refs.form.reset(); 364 this.$refs.form.reset();
368 }, 365 },
369 save() { 366 save() {
370 let editClass = { 367 let editClass = {
371 classId: this.editedItem._id, 368 classId: this.editedItem._id,
372 classNum: this.editedItem.classNum 369 classNum: this.editedItem.classNum
373 }; 370 };
374 http() 371 http()
375 .put("/updateClass", editClass) 372 .put("/updateClass", editClass)
376 .then(response => { 373 .then(response => {
377 if ((this.snackbar = true)) { 374 if ((this.snackbar = true)) {
378 this.text = "Successfully Edit Existing Class"; 375 this.text = "Successfully Edit Existing Class";
379 } 376 }
380 this.getClassList(); 377 this.getClassList();
381 }) 378 })
382 .catch(error => { 379 .catch(error => {
383 // console.log(error); 380 // console.log(error);
384 }); 381 });
385 this.close(); 382 this.close();
386 } 383 }
387 }, 384 },
388 mounted() { 385 mounted() {
389 this.getClassList(); 386 this.getClassList();
390 // console.log("this.search",this.search) 387 // console.log("this.search",this.search)
391 }, 388 },
392 created() { 389 created() {
393 this.$root.$on("app:search", search => { 390 this.$root.$on("app:search", search => {
394 this.search = search; 391 this.search = search;
395 }); 392 });
396 }, 393 },
397 beforeDestroy() { 394 beforeDestroy() {
398 // dont forget to remove the listener 395 // dont forget to remove the listener
399 this.$root.$off("app:search"); 396 this.$root.$off("app:search");
400 } 397 }
401 }; 398 };
402 </script> 399 </script>
403 <style> 400 <style>
404 .active { 401 .active {
405 background-color: gray; 402 background-color: gray;
406 color: white !important; 403 color: white !important;
407 } 404 }
408 .activebtn { 405 .activebtn {
409 color: black !important; 406 color: black !important;
410 } 407 }
411 </style> 408 </style>
src/pages/School/school.vue
Diff comments   View file @d9bb52b
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 class="right">Society Name:</label> 99 <label class="right">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 <v-snackbar 321 <v-snackbar
322 :timeout="timeout" 322 :timeout="timeout"
323 :top="y === 'top'" 323 :top="y === 'top'"
324 :right="x === 'right'" 324 :right="x === 'right'"
325 :vertical="mode === 'vertical'" 325 :vertical="mode === 'vertical'"
326 v-model="snackbar" 326 v-model="snackbar"
327 color="success" 327 color="success"
328 >{{ text }}</v-snackbar> 328 >{{ text }}</v-snackbar>
329 329
330 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 330 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
331 <v-data-table 331 <v-data-table
332 :headers="headers" 332 :headers="headers"
333 :items="schoolList" 333 :items="schoolList"
334 :pagination.sync="pagination" 334 :pagination.sync="pagination"
335 :search="search" 335 :search="search"
336 > 336 >
337 <template slot="items" slot-scope="props"> 337 <template slot="items" slot-scope="props">
338 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 338 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
339 <td id="td" class="text-xs-center"> 339 <td id="td" class="text-xs-center">
340 <v-avatar> 340 <v-avatar>
341 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" /> 341 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />
342 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" /> 342 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />
343 </v-avatar> 343 </v-avatar>
344 </td> 344 </td>
345 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 345 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
346 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 346 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
347 <td id="td" class="text-xs-center">{{ props.item.city }}</td> 347 <td id="td" class="text-xs-center">{{ props.item.city }}</td>
348 <td id="td" class="text-xs-center">{{ props.item.state }}</td> 348 <td id="td" class="text-xs-center">{{ props.item.state }}</td>
349 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 349 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
350 <td class="text-xs-center"> 350 <td class="text-xs-center">
351 <span> 351 <span>
352 <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> 352 <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }">
353 <v-tooltip top> 353 <v-tooltip top>
354 <img 354 <img
355 slot="activator" 355 slot="activator"
356 style="cursor:pointer; width:25px; height:18px; " 356 style="cursor:pointer; width:25px; height:18px; "
357 class="mr5" 357 class="mr5"
358 src="/static/icon/eye1.png" 358 src="/static/icon/eye1.png"
359 /> 359 />
360 <span>View</span> 360 <span>View</span>
361 </v-tooltip> 361 </v-tooltip>
362 </router-link> 362 </router-link>
363 <v-tooltip top> 363 <v-tooltip top>
364 <img 364 <img
365 slot="activator" 365 slot="activator"
366 style="cursor:pointer; width:20px; height:18px; " 366 style="cursor:pointer; width:20px; height:18px; "
367 class="mr5" 367 class="mr5"
368 @click="editItem(props.item)" 368 @click="editItem(props.item)"
369 src="/static/icon/edit1.png" 369 src="/static/icon/edit1.png"
370 /> 370 />
371 <span>Edit</span> 371 <span>Edit</span>
372 </v-tooltip> 372 </v-tooltip>
373 </span> 373 </span>
374 </td> 374 </td>
375 </template> 375 </template>
376 <v-alert 376 <v-alert
377 slot="no-results" 377 slot="no-results"
378 :value="true" 378 :value="true"
379 color="error" 379 color="error"
380 icon="warning" 380 icon="warning"
381 >Your search for "{{ search }}" found no results.</v-alert> 381 >Your search for "{{ search }}" found no results.</v-alert>
382 </v-data-table> 382 </v-data-table>
383 </v-tab-item> 383 </v-tab-item>
384 384
385 <!-- ****** ADD STUDENTS DETAILS****** --> 385 <!-- ****** ADD STUDENTS DETAILS****** -->
386 <v-tab-item> 386 <v-tab-item>
387 <v-container fluid> 387 <v-container fluid>
388 <v-layout align-center justify-center fill-height> 388 <v-layout align-center justify-center fill-height>
389 <v-flex xs12 sm12 md10 lg11> 389 <v-flex xs12 sm12 md10 lg11>
390 <!-- <v-container fluid> --> 390 <!-- <v-container fluid> -->
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 <v-flex xs12 sm12> 399 <v-flex xs12 sm12>
400 <v-form ref="form" v-model="valid" lazy-validation> 400 <v-form ref="form" v-model="valid" lazy-validation>
401 <v-layout> 401 <v-layout>
402 <v-flex 402 <v-flex
403 xs12 403 xs12
404 class="text-xs-center text-sm-center text-md-center text-lg-center" 404 class="text-xs-center text-sm-center text-md-center text-lg-center"
405 > 405 >
406 <v-avatar size="100px"> 406 <v-avatar size="100px">
407 <img src="/static/icon/user.png" v-if="!imageUrl" /> 407 <img src="/static/icon/user.png" v-if="!imageUrl" />
408 </v-avatar> 408 </v-avatar>
409 <input 409 <input
410 type="file" 410 type="file"
411 style="display: none" 411 style="display: none"
412 ref="image" 412 ref="image"
413 accept="image/*" 413 accept="image/*"
414 @change="onFilePicked" 414 @change="onFilePicked"
415 /> 415 />
416 <img 416 <img
417 :src="imageData.imageUrl" 417 :src="imageData.imageUrl"
418 height="150" 418 height="150"
419 v-if="imageUrl" 419 v-if="imageUrl"
420 style="border-radius:50%; width:200px" 420 style="border-radius:50%; width:200px"
421 /> 421 />
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout wrap> 424 <v-layout wrap>
425 <v-flex xs12 sm6> 425 <v-flex xs12 sm6>
426 <v-layout> 426 <v-layout>
427 <v-flex xs4 sm4 class="pt-4 subheading"> 427 <v-flex xs4 sm4 class="pt-4 subheading">
428 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 428 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
429 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 429 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
430 </v-flex> 430 </v-flex>
431 <v-flex xs8 sm8 class="ml-3"> 431 <v-flex xs8 sm8 class="ml-3">
432 <v-text-field 432 <v-text-field
433 v-model="addSchool.name" 433 v-model="addSchool.name"
434 placeholder="fill your full Name" 434 placeholder="fill your full Name"
435 name="name" 435 name="name"
436 type="text" 436 type="text"
437 :rules="nameRules" 437 :rules="nameRules"
438 required 438 required
439 ></v-text-field> 439 ></v-text-field>
440 </v-flex> 440 </v-flex>
441 </v-layout> 441 </v-layout>
442 </v-flex> 442 </v-flex>
443 <v-flex xs12 sm6> 443 <v-flex xs12 sm6>
444 <v-layout> 444 <v-layout>
445 <v-flex xs4 sm4 class="pt-4 subheading"> 445 <v-flex xs4 sm4 class="pt-4 subheading">
446 <label class="right">Email ID:</label> 446 <label class="right">Email ID:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8 sm8 class="ml-3"> 448 <v-flex xs8 sm8 class="ml-3">
449 <v-text-field 449 <v-text-field
450 placeholder="fill your email" 450 placeholder="fill your email"
451 :rules="emailRules" 451 :rules="emailRules"
452 v-model="addSchool.email" 452 v-model="addSchool.email"
453 type="text" 453 type="text"
454 required 454 required
455 ></v-text-field> 455 ></v-text-field>
456 </v-flex> 456 </v-flex>
457 </v-layout> 457 </v-layout>
458 </v-flex> 458 </v-flex>
459 </v-layout> 459 </v-layout>
460 <v-layout wrap> 460 <v-layout wrap>
461 <v-flex xs12 sm6> 461 <v-flex xs12 sm6>
462 <v-layout> 462 <v-layout>
463 <v-flex xs4 sm4 class="pt-4 subheading"> 463 <v-flex xs4 sm4 class="pt-4 subheading">
464 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label> 464 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label>
465 <label 465 <label
466 class="right hidden-lg-only hidden-xl-only hidden-md-only" 466 class="right hidden-lg-only hidden-xl-only hidden-md-only"
467 >SocietyName:</label> 467 >SocietyName:</label>
468 </v-flex> 468 </v-flex>
469 <v-flex xs8 sm8 class="ml-3"> 469 <v-flex xs8 sm8 class="ml-3">
470 <v-text-field 470 <v-text-field
471 v-model="addSchool.societyName" 471 v-model="addSchool.societyName"
472 placeholder="fill your Society Name" 472 placeholder="fill your Society Name"
473 :rules="cityRules"
474 required 473 required
475 ></v-text-field> 474 ></v-text-field>
476 </v-flex> 475 </v-flex>
477 </v-layout> 476 </v-layout>
478 </v-flex> 477 </v-flex>
479 <v-flex xs12 sm6> 478 <v-flex xs12 sm6>
480 <v-layout> 479 <v-layout>
481 <v-flex xs4 class="pt-4 subheading"> 480 <v-flex xs4 class="pt-4 subheading">
482 <label class="right">City:</label> 481 <label class="right">City:</label>
483 </v-flex> 482 </v-flex>
484 <v-flex xs8 class="ml-3"> 483 <v-flex xs8 class="ml-3">
485 <v-text-field 484 <v-text-field
486 v-model="addSchool.city" 485 v-model="addSchool.city"
487 placeholder="fill your City Name" 486 placeholder="fill your City Name"
488 name="City" 487 name="City"
489 type="text" 488 type="text"
490 :rules="cityRules" 489 :rules="cityRules"
491 required 490 required
492 ></v-text-field> 491 ></v-text-field>
493 </v-flex> 492 </v-flex>
494 </v-layout> 493 </v-layout>
495 </v-flex> 494 </v-flex>
496 </v-layout> 495 </v-layout>
497 <v-layout wrap> 496 <v-layout wrap>
498 <v-flex xs12 sm6> 497 <v-flex xs12 sm6>
499 <v-layout> 498 <v-layout>
500 <v-flex xs4 class="pt-4 subheading"> 499 <v-flex xs4 class="pt-4 subheading">
501 <label class="right">State:</label> 500 <label class="right">State:</label>
502 </v-flex> 501 </v-flex>
503 <v-flex xs8 class="ml-3"> 502 <v-flex xs8 class="ml-3">
504 <v-text-field 503 <v-text-field
505 v-model="addSchool.state" 504 v-model="addSchool.state"
506 placeholder="fill your State Name" 505 placeholder="fill your State Name"
507 name="state" 506 name="state"
508 type="text" 507 type="text"
509 :rules="stateRules" 508 :rules="stateRules"
510 required 509 required
511 ></v-text-field> 510 ></v-text-field>
512 </v-flex> 511 </v-flex>
513 </v-layout> 512 </v-layout>
514 </v-flex> 513 </v-flex>
515 <v-flex xs12 sm6> 514 <v-flex xs12 sm6>
516 <v-layout> 515 <v-layout>
517 <v-flex xs4 class="pt-4 subheading"> 516 <v-flex xs4 class="pt-4 subheading">
518 <label class="right">Pincode:</label> 517 <label class="right">Pincode:</label>
519 </v-flex> 518 </v-flex>
520 <v-flex xs8 class="ml-3"> 519 <v-flex xs8 class="ml-3">
521 <v-text-field 520 <v-text-field
522 v-model="addSchool.pinCode" 521 v-model="addSchool.pinCode"
523 placeholder="fill your pincode" 522 placeholder="fill your pincode"
524 name="pincode" 523 name="pincode"
525 type="number" 524 type="number"
526 :rules="pincode" 525 :rules="pincode"
527 required 526 required
528 ></v-text-field> 527 ></v-text-field>
529 </v-flex> 528 </v-flex>
530 </v-layout> 529 </v-layout>
531 </v-flex> 530 </v-flex>
532 </v-layout> 531 </v-layout>
533 <v-layout wrap> 532 <v-layout wrap>
534 <v-flex xs12 sm6> 533 <v-flex xs12 sm6>
535 <v-layout> 534 <v-layout>
536 <v-flex xs4 class="pt-4 subheading"> 535 <v-flex xs4 class="pt-4 subheading">
537 <label class="right">Fax No:</label> 536 <label class="right">Fax No:</label>
538 </v-flex> 537 </v-flex>
539 <v-flex xs8 class="ml-3"> 538 <v-flex xs8 class="ml-3">
540 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field> 539 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>
541 </v-flex> 540 </v-flex>
542 </v-layout> 541 </v-layout>
543 </v-flex> 542 </v-flex>
544 <v-flex xs12 sm6> 543 <v-flex xs12 sm6>
545 <v-layout> 544 <v-layout>
546 <v-flex xs4 class="pt-4 subheading"> 545 <v-flex xs4 class="pt-4 subheading">
547 <label class="right hidden-xs-only hidden-sm-only">Country:</label> 546 <label class="right hidden-xs-only hidden-sm-only">Country:</label>
548 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 547 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
549 </v-flex> 548 </v-flex>
550 <v-flex xs8 class="ml-3"> 549 <v-flex xs8 class="ml-3">
551 <v-autocomplete 550 <v-autocomplete
552 v-model="addSchool.country" 551 v-model="addSchool.country"
553 :items="countries" 552 :items="countries"
554 :rules="country" 553 :rules="country"
555 placeholder="Select Country Name" 554 placeholder="Select Country Name"
556 required 555 required
557 ></v-autocomplete> 556 ></v-autocomplete>
558 </v-flex> 557 </v-flex>
559 </v-layout> 558 </v-layout>
560 </v-flex> 559 </v-flex>
561 </v-layout> 560 </v-layout>
562 <v-layout wrap> 561 <v-layout wrap>
563 <v-flex xs12 sm6> 562 <v-flex xs12 sm6>
564 <v-layout> 563 <v-layout>
565 <v-flex xs4 class="pt-4 subheading"> 564 <v-flex xs4 class="pt-4 subheading">
566 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 565 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
567 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 566 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
568 </v-flex> 567 </v-flex>
569 <v-flex xs8 class="ml-3"> 568 <v-flex xs8 class="ml-3">
570 <v-text-field 569 <v-text-field
571 v-model="addSchool.mobile" 570 v-model="addSchool.mobile"
572 placeholder="fill your MobileNo" 571 placeholder="fill your Mobile No"
573 name="mobileNo" 572 name="mobileNo"
574 type="number" 573 type="number"
575 :rules="mobileNoRules" 574 :rules="mobileNoRules"
576 required 575 required
577 ></v-text-field> 576 ></v-text-field>
578 </v-flex> 577 </v-flex>
579 </v-layout> 578 </v-layout>
580 </v-flex> 579 </v-flex>
581 <v-flex xs12 sm6> 580 <v-flex xs12 sm6>
582 <v-layout> 581 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 582 <v-flex xs4 class="pt-4 subheading">
584 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> 583 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
585 <label 584 <label
586 class="right hidden-lg-only hidden-md-only hidden-xl-only" 585 class="right hidden-lg-only hidden-md-only hidden-xl-only"
587 >LandLineNo:</label> 586 >LandLineNo:</label>
588 </v-flex> 587 </v-flex>
589 <v-flex xs8 class="ml-3"> 588 <v-flex xs8 class="ml-3">
590 <v-text-field 589 <v-text-field
591 v-model="addSchool.landLineNo" 590 v-model="addSchool.landLineNo"
592 :items="countries" 591 :items="countries"
593 :rules="landlineNoRule"
594 placeholder="fill your LandLine No" 592 placeholder="fill your LandLine No"
595 type="number" 593 type="number"
596 required 594 required
597 ></v-text-field> 595 ></v-text-field>
598 </v-flex> 596 </v-flex>
599 </v-layout> 597 </v-layout>
600 </v-flex> 598 </v-flex>
601 </v-layout> 599 </v-layout>
602 <v-layout wrap> 600 <v-layout wrap>
603 <v-flex xs12 sm6> 601 <v-flex xs12 sm6>
604 <v-layout> 602 <v-layout>
605 <v-flex xs4 class="pt-4 subheading"> 603 <v-flex xs4 class="pt-4 subheading">
606 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> 604 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
607 <label 605 <label
608 class="right hidden-lg-only hidden-md-only hidden-xl-only" 606 class="right hidden-lg-only hidden-md-only hidden-xl-only"
609 >Registration-No:</label> 607 >Registration-No:</label>
610 </v-flex> 608 </v-flex>
611 <v-flex xs8 class="ml-3"> 609 <v-flex xs8 class="ml-3">
612 <v-text-field 610 <v-text-field
613 v-model="addSchool.registrationNo" 611 v-model="addSchool.registrationNo"
614 placeholder="Fill your Registration No" 612 placeholder="Fill your Registration No"
615 required 613 required
616 ></v-text-field> 614 ></v-text-field>
617 </v-flex> 615 </v-flex>
618 </v-layout> 616 </v-layout>
619 </v-flex> 617 </v-flex>
620 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
621 <v-layout> 619 <v-layout>
622 <v-flex xs4 class="pt-4 subheading"> 620 <v-flex xs4 class="pt-4 subheading">
623 <label class="right hidden-xs-only hidden-sm-only">School Details:</label> 621 <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
624 <label 622 <label
625 class="right hidden-lg-only hidden-md-only hidden-xl-only" 623 class="right hidden-lg-only hidden-md-only hidden-xl-only"
626 >SchoolDetails:</label> 624 >SchoolDetails:</label>
627 </v-flex> 625 </v-flex>
628 <v-flex xs8 class="ml-3"> 626 <v-flex xs8 class="ml-3">
629 <v-text-field 627 <v-text-field
630 v-model="addSchool.schoolDetails" 628 v-model="addSchool.schoolDetails"
631 placeholder="Fill your School Details" 629 placeholder="Fill your School Details"
632 :rules="schoolDetailRule" 630 :rules="schoolDetailRule"
633 required 631 required
634 ></v-text-field> 632 ></v-text-field>
635 </v-flex> 633 </v-flex>
636 </v-layout> 634 </v-layout>
637 </v-flex> 635 </v-flex>
638 </v-layout> 636 </v-layout>
639 <v-layout wrap> 637 <v-layout wrap>
640 <v-flex xs12 sm6> 638 <v-flex xs12 sm6>
641 <v-layout> 639 <v-layout>
642 <v-flex xs4 class="pt-4 subheading"> 640 <v-flex xs4 class="pt-4 subheading">
643 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 641 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
644 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 642 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
645 </v-flex> 643 </v-flex>
646 <v-flex xs8 class="ml-3"> 644 <v-flex xs8 class="ml-3">
647 <v-text-field 645 <v-text-field
648 label="Select Image" 646 label="Select Image"
649 @click="pickFile" 647 @click="pickFile"
650 v-model="imageName" 648 v-model="imageName"
651 append-icon="attach_file" 649 append-icon="attach_file"
652 ></v-text-field> 650 ></v-text-field>
653 </v-flex> 651 </v-flex>
654 </v-layout> 652 </v-layout>
655 </v-flex> 653 </v-flex>
656 <v-flex xs12 sm6> 654 <v-flex xs12 sm6>
657 <v-layout> 655 <v-layout>
658 <v-flex xs4 class="pt-4 subheading"> 656 <v-flex xs4 class="pt-4 subheading">
659 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 657 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
660 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> 658 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
661 </v-flex> 659 </v-flex>
662 <v-flex xs8 class="ml-3"> 660 <v-flex xs8 class="ml-3">
663 <v-text-field 661 <v-text-field
664 v-model="addSchool.establishmentYear" 662 v-model="addSchool.establishmentYear"
665 placeholder="fill your Academic Year" 663 placeholder="fill your Academic Year"
666 :rules="establishmentYearRules" 664 :rules="establishmentYearRules"
667 required 665 required
668 ></v-text-field> 666 ></v-text-field>
669 </v-flex> 667 </v-flex>
670 </v-layout> 668 </v-layout>
671 </v-flex> 669 </v-flex>
672 </v-layout> 670 </v-layout>
673 <v-layout wrap> 671 <v-layout wrap>
674 <v-flex xs12 sm6> 672 <v-flex xs12 sm6>
675 <v-layout> 673 <v-layout>
676 <v-flex xs4 sm4 class="pt-4 subheading"> 674 <v-flex xs4 sm4 class="pt-4 subheading">
677 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label> 675 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>
678 <label 676 <label
679 class="right hidden-lg-only hidden-md-only hidden-xl-only" 677 class="right hidden-lg-only hidden-md-only hidden-xl-only"
680 >WebSiteUrl:</label> 678 >WebSiteUrl:</label>
681 </v-flex> 679 </v-flex>
682 <v-flex xs8 sm8 class="ml-3"> 680 <v-flex xs8 sm8 class="ml-3">
683 <v-text-field 681 <v-text-field
684 name="input-4-3" 682 name="input-4-3"
685 v-model="addSchool.websiteUrl" 683 v-model="addSchool.websiteUrl"
686 :rules="presentAddress" 684 placeholder="fill Your WebSite Url"
687 placeholder="fill Your Address"
688 required 685 required
689 ></v-text-field> 686 ></v-text-field>
690 </v-flex> 687 </v-flex>
691 </v-layout> 688 </v-layout>
692 </v-flex> 689 </v-flex>
693 <v-flex xs12 sm6> 690 <v-flex xs12 sm6>
694 <v-layout> 691 <v-layout>
695 <v-flex xs4 sm4 class="pt-4 subheading"> 692 <v-flex xs4 sm4 class="pt-4 subheading">
696 <label class="right">Address:</label> 693 <label class="right">Address:</label>
697 </v-flex> 694 </v-flex>
698 <v-flex xs8 sm8 class="ml-3"> 695 <v-flex xs8 sm8 class="ml-3">
699 <v-text-field 696 <v-text-field
700 name="input-4-3" 697 name="input-4-3"
701 v-model="addSchool.address" 698 v-model="addSchool.address"
702 :rules="presentAddress" 699 :rules="presentAddress"
703 placeholder="fill Your Address" 700 placeholder="fill Your Address"
704 required 701 required
705 ></v-text-field> 702 ></v-text-field>
706 </v-flex> 703 </v-flex>
707 </v-layout> 704 </v-layout>
708 </v-flex> 705 </v-flex>
709 </v-layout> 706 </v-layout>
710 <v-layout> 707 <v-layout>
711 <v-flex xs12 sm11 offset-md1> 708 <v-flex xs12 sm11 offset-md1>
712 <v-layout> 709 <v-layout>
713 <v-flex xs6> 710 <v-flex xs6>
714 <v-btn round dark @click="clear()">Clear</v-btn> 711 <v-btn round dark @click="clear()">Clear</v-btn>
715 </v-flex> 712 </v-flex>
716 <v-flex xs6> 713 <v-flex xs6>
717 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 714 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
718 </v-flex> 715 </v-flex>
719 </v-layout> 716 </v-layout>
720 </v-flex> 717 </v-flex>
721 </v-layout> 718 </v-layout>
722 </v-form> 719 </v-form>
723 </v-flex> 720 </v-flex>
724 </v-flex> 721 </v-flex>
725 </v-layout> 722 </v-layout>
726 </v-container> 723 </v-container>
727 </v-tab-item> 724 </v-tab-item>
728 </v-tabs> 725 </v-tabs>
729 <div class="loader" v-if="showLoader"> 726 <div class="loader" v-if="showLoader">
730 <v-progress-circular indeterminate color="white"></v-progress-circular> 727 <v-progress-circular indeterminate color="white"></v-progress-circular>
731 </div> 728 </div>
732 </div> 729 </div>
733 </template> 730 </template>
734 731
735 <script> 732 <script>
736 import http from "@/Services/http.js"; 733 import http from "@/Services/http.js";
737 import moment from "moment"; 734 import moment from "moment";
738 import countryList from "@/script/country.js"; 735 import countryList from "@/script/country.js";
739 736
740 export default { 737 export default {
741 data: () => ({ 738 data: () => ({
742 e2: 0, 739 e2: 0,
743 snackbar: false, 740 snackbar: false,
744 y: "top", 741 y: "top",
745 x: "right", 742 x: "right",
746 mode: "", 743 mode: "",
747 timeout: 3000, 744 timeout: 3000,
748 text: "", 745 text: "",
749 showLoader: false, 746 showLoader: false,
750 loading: false, 747 loading: false,
751 date: null, 748 date: null,
752 search: "", 749 search: "",
753 menu: false, 750 menu: false,
754 menu1: false, 751 menu1: false,
755 dialog: false, 752 dialog: false,
756 valid: true, 753 valid: true,
757 isActive: true, 754 isActive: true,
758 newActive: false, 755 newActive: false,
759 pagination: { 756 pagination: {
760 rowsPerPage: 15 757 rowsPerPage: 15
761 }, 758 },
762 imageData: {}, 759 imageData: {},
763 imageName: "", 760 imageName: "",
764 imageUrl: "", 761 imageUrl: "",
765 imageFile: "", 762 imageFile: "",
766 nameRules: [v => !!v || "Full Name is required"], 763 nameRules: [v => !!v || "Full Name is required"],
767 dateRules: [v => !!v || "DOB is required"], 764 dateRules: [v => !!v || "DOB is required"],
768 cityRules: [v => !!v || "City Name is required"], 765 cityRules: [v => !!v || "City Name is required"],
769 pincode: [v => !!v || " Pincode is required"], 766 pincode: [v => !!v || " Pincode is required"],
770 country: [v => !!v || " Country Name is required"], 767 country: [v => !!v || " Country Name is required"],
771 permanentAddress: [v => !!v || " Permanent Address is requiclearred"], 768 permanentAddress: [v => !!v || " Permanent Address is requiclearred"],
772 presentAddress: [v => !!v || " Present Address is required"], 769 presentAddress: [v => !!v || " Present Address is required"],
773 landlineNoRule: [v => !!v || " Present Address is required"],
774 mobileNoRules: [v => !!v || "Mobile Number is required"], 770 mobileNoRules: [v => !!v || "Mobile Number is required"],
775 stateRules: [v => !!v || "State Name is required"], 771 stateRules: [v => !!v || "State Name is required"],
776 schoolDetailRule: [v => !!v || "school Detail is required"], 772 schoolDetailRule: [v => !!v || "school Detail is required"],
777 sectionRules: [v => !!v || " Section Name is required"], 773 sectionRules: [v => !!v || " Section Name is required"],
778 genderRules: [v => !!v || " Select Gender is required"], 774 genderRules: [v => !!v || " Select Gender is required"],
779 establishmentYearRules: [v => !!v || " Academic Year is required"], 775 establishmentYearRules: [v => !!v || " Academic Year is required"],
780 errorMessages: "", 776 errorMessages: "",
781 emailRules: [ 777 emailRules: [
782 v => !!v || "E-mail is required", 778 v => !!v || "E-mail is required",
783 v => 779 v =>
784 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 780 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
785 "E-mail must be valid" 781 "E-mail must be valid"
786 ], 782 ],
787 countries: [], 783 countries: [],
788 headers: [ 784 headers: [
789 { 785 {
790 text: "No.", 786 text: "No.",
791 align: "center", 787 align: "center",
792 sortable: false, 788 sortable: false,
793 value: "rollNo" 789 value: "rollNo"
794 }, 790 },
795 { 791 {
796 text: "school Logo", 792 text: "school Logo",
797 value: "schoolLogoUrl", 793 value: "schoolLogoUrl",
798 sortable: false, 794 sortable: false,
799 align: "center" 795 align: "center"
800 }, 796 },
801 { text: "Name", value: "name", sortable: false, align: "center" }, 797 { text: "Name", value: "name", sortable: false, align: "center" },
802 { text: "Email", value: "email", sortable: false, align: "center" }, 798 { text: "Email", value: "email", sortable: false, align: "center" },
803 { text: "City", value: "city", sortable: false, align: "center" }, 799 { text: "City", value: "city", sortable: false, align: "center" },
804 { 800 {
805 text: "State", 801 text: "State",
806 value: "state", 802 value: "state",
807 sortable: false, 803 sortable: false,
808 align: "center" 804 align: "center"
809 }, 805 },
810 { 806 {
811 text: "Mobile", 807 text: "Mobile",
812 value: "mobile", 808 value: "mobile",
813 sortable: false, 809 sortable: false,
814 align: "center" 810 align: "center"
815 }, 811 },
816 { text: "Action", value: "", sortable: false, align: "center" } 812 { text: "Action", value: "", sortable: false, align: "center" }
817 ], 813 ],
818 schoolList: [], 814 schoolList: [],
819 editedIndex: -1, 815 editedIndex: -1,
820 addSchool: { 816 addSchool: {
821 role: "ADMIN" 817 role: "ADMIN"
822 }, 818 },
823 editedItem: {} 819 editedItem: {}
824 }), 820 }),
825 methods: { 821 methods: {
826 getSchool() { 822 getSchool() {
827 this.showLoader = true; 823 this.showLoader = true;
828 http() 824 http()
829 .get("/getSchoolList", { 825 .get("/getSchoolList", {
830 headers: { Authorization: "Bearer " + this.token } 826 headers: { Authorization: "Bearer " + this.token }
831 }) 827 })
832 .then(response => { 828 .then(response => {
833 this.schoolList = response.data.data; 829 this.schoolList = response.data.data;
834 this.showLoader = false; 830 this.showLoader = false;
835 }) 831 })
836 .catch(error => { 832 .catch(error => {
837 this.showLoader = false; 833 this.showLoader = false;
838 if (error.response.status === 401) { 834 if (error.response.status === 401) {
839 this.$router.replace({ path: "/" }); 835 this.$router.replace({ path: "/" });
840 this.$store.dispatch("setToken", null); 836 this.$store.dispatch("setToken", null);
841 this.$store.dispatch("Id", null); 837 this.$store.dispatch("Id", null);
842 this.$store.dispatch("Role", null); 838 this.$store.dispatch("Role", null);
843 } 839 }
844 }); 840 });
845 }, 841 },
846 pickFile() { 842 pickFile() {
847 this.$refs.image.click(); 843 this.$refs.image.click();
848 }, 844 },
849 dates: function(date) { 845 dates: function(date) {
850 return moment(date).format("MMMM DD, YYYY"); 846 return moment(date).format("MMMM DD, YYYY");
851 }, 847 },
852 onFilePicked(e) { 848 onFilePicked(e) {
853 // console.log(e) 849 // console.log(e)
854 const files = e.target.files; 850 const files = e.target.files;
855 this.imageData.upload = e.target.files[0]; 851 this.imageData.upload = e.target.files[0];
856 if (files[0] !== undefined) { 852 if (files[0] !== undefined) {
857 this.imageName = files[0].name; 853 this.imageName = files[0].name;
858 if (this.imageName.lastIndexOf(".") <= 0) { 854 if (this.imageName.lastIndexOf(".") <= 0) {
859 return; 855 return;
860 } 856 }
861 const fr = new FileReader(); 857 const fr = new FileReader();
862 fr.readAsDataURL(files[0]); 858 fr.readAsDataURL(files[0]);
863 fr.addEventListener("load", () => { 859 fr.addEventListener("load", () => {
864 this.imageUrl = fr.result; 860 this.imageUrl = fr.result;
865 this.imageFile = files[0]; // this is an image file that can be sent to server... 861 this.imageFile = files[0]; // this is an image file that can be sent to server...
866 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 862 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
867 }); 863 });
868 } else { 864 } else {
869 this.imageName = ""; 865 this.imageName = "";
870 this.imageFile = ""; 866 this.imageFile = "";
871 this.imageUrl = ""; 867 this.imageUrl = "";
872 } 868 }
873 }, 869 },
874 editItem(item) { 870 editItem(item) {
875 this.editedIndex = this.schoolList.indexOf(item); 871 this.editedIndex = this.schoolList.indexOf(item);
876 this.editedItem = Object.assign({}, item); 872 this.editedItem = Object.assign({}, item);
877 this.dialog = true; 873 this.dialog = true;
878 }, 874 },
879 activeTab(type) { 875 activeTab(type) {
880 switch (type) { 876 switch (type) {
881 case "existing": 877 case "existing":
882 this.newActive = false; 878 this.newActive = false;
883 this.isActive = true; 879 this.isActive = true;
884 break; 880 break;
885 881
886 default: 882 default:
887 this.newActive = true; 883 this.newActive = true;
888 this.isActive = false; 884 this.isActive = false;
889 break; 885 break;
890 } 886 }
891 }, 887 },
892 close() { 888 close() {
893 this.dialog = false; 889 this.dialog = false;
894 setTimeout(() => { 890 setTimeout(() => {
895 this.editedItem = Object.assign({}, this.defaultItem); 891 this.editedItem = Object.assign({}, this.defaultItem);
896 this.editedIndex = -1; 892 this.editedIndex = -1;
897 }, 300); 893 }, 300);
898 }, 894 },
899 submit() { 895 submit() {
900 if (this.$refs.form.validate()) { 896 if (this.$refs.form.validate()) {
901 if (this.imageUrl) { 897 if (this.imageUrl) {
902 var str = this.imageUrl; 898 var str = this.imageUrl;
903 const [baseUrl, imageUrl] = str.split(/,/); 899 const [baseUrl, imageUrl] = str.split(/,/);
904 this.addSchool.upload = imageUrl; 900 this.addSchool.upload = imageUrl;
905 } 901 }
906 this.loading = true; 902 this.loading = true;
907 http() 903 http()
908 .post("/createSchool", this.addSchool) 904 .post("/createSchool", this.addSchool)
909 .then(response => { 905 .then(response => {
910 this.snackbar = true; 906 this.snackbar = true;
911 this.text = "New School added successfully"; 907 this.text = "New School added successfully";
912 this.clear(); 908 this.clear();
913 this.getSchool(); 909 this.getSchool();
914 this.loading = false; 910 this.loading = false;
915 }) 911 })
916 .catch(error => { 912 .catch(error => {
917 this.snackbar = true; 913 this.snackbar = true;
918 this.text = error.response.data.message; 914 this.text = error.response.data.message;
919 this.loading = false; 915 this.loading = false;
920 }); 916 });
921 } 917 }
922 }, 918 },
923 clear() { 919 clear() {
924 this.$refs.form.reset(); 920 this.$refs.form.reset();
925 this.imageUrl = ""; 921 this.imageUrl = "";
926 }, 922 },
927 save() { 923 save() {
928 if (this.imageUrl) { 924 if (this.imageUrl) {
929 var str = this.imageUrl; 925 var str = this.imageUrl;
930 const [baseUrl, imageUrl] = str.split(/,/); 926 const [baseUrl, imageUrl] = str.split(/,/);
931 this.editedItem.upload = imageUrl; 927 this.editedItem.upload = imageUrl;
932 } 928 }
933 this.editedItem.schoolId = this.editedItem._id; 929 this.editedItem.schoolId = this.editedItem._id;
934 http() 930 http()
935 .put("/updateSchool", this.editedItem) 931 .put("/updateSchool", this.editedItem)
936 .then(response => { 932 .then(response => {
937 this.snackbar = true; 933 this.snackbar = true;
938 this.text = "Successfully School Existing User"; 934 this.text = "Successfully School Existing User";
939 this.imageUrl = ""; 935 this.imageUrl = "";
940 this.getSchool(); 936 this.getSchool();
941 this.close(); 937 this.close();
942 }) 938 })
943 .catch(error => { 939 .catch(error => {
944 // console.log(error); 940 // console.log(error);
945 if ((this.snackbar = true)) { 941 if ((this.snackbar = true)) {
946 this.text = error.response.data.statusText; 942 this.text = error.response.data.statusText;
947 } 943 }
948 }); 944 });
949 } 945 }
950 }, 946 },
951 mounted() { 947 mounted() {
952 const getCountryList = countryList(); 948 const getCountryList = countryList();
953 this.countries = getCountryList; 949 this.countries = getCountryList;
954 this.token = this.$store.state.token; 950 this.token = this.$store.state.token;
955 this.getSchool(); 951 this.getSchool();
956 }, 952 },
957 created() { 953 created() {
958 this.$root.$on("app:search", search => { 954 this.$root.$on("app:search", search => {
959 this.search = search; 955 this.search = search;
960 }); 956 });
961 }, 957 },
962 beforeDestroy() { 958 beforeDestroy() {
963 // dont forget to remove the listener 959 // dont forget to remove the listener
964 this.$root.$off("app:search"); 960 this.$root.$off("app:search");
965 } 961 }
966 }; 962 };
967 </script> 963 </script>
968 <style scoped> 964 <style scoped>
969 .active { 965 .active {
970 background-color: gray; 966 background-color: gray;
971 color: white !important; 967 color: white !important;
972 } 968 }
973 .activebtn { 969 .activebtn {
974 color: black !important; 970 color: black !important;
975 } 971 }
976 </style> 972 </style>
src/pages/Section/section.vue
Diff comments   View file @d9bb52b
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-card-text> 108 <v-card-text>
109 <v-container grid-list-md> 109 <v-container grid-list-md>
110 <v-layout wrap> 110 <v-layout wrap>
111 <v-flex> 111 <v-flex>
112 <v-layout> 112 <v-layout>
113 <v-flex xs7 sm6> 113 <v-flex xs7 sm6>
114 <h5 class="right my-1 hidden-xs-only hidden-sm-only"> 114 <h5 class="right my-1 hidden-xs-only hidden-sm-only">
115 <b>Class Name:</b> 115 <b>Class Name:</b>
116 </h5> 116 </h5>
117 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> 117 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
118 <b>Class:</b> 118 <b>Class:</b>
119 </h5> 119 </h5>
120 </v-flex> 120 </v-flex>
121 <v-flex sm6 xs5> 121 <v-flex sm6 xs5>
122 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 122 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 <v-layout> 125 <v-layout>
126 <v-flex xs7 sm6> 126 <v-flex xs7 sm6>
127 <h5 class="right my-1"> 127 <h5 class="right my-1">
128 <b>Section Name:</b> 128 <b>Section Name:</b>
129 </h5> 129 </h5>
130 </v-flex> 130 </v-flex>
131 <v-flex sm6 xs5> 131 <v-flex sm6 xs5>
132 <h5 class="my-1">{{ editedItem.name }}</h5> 132 <h5 class="my-1">{{ editedItem.name }}</h5>
133 </v-flex> 133 </v-flex>
134 </v-layout> 134 </v-layout>
135 <v-layout> 135 <v-layout>
136 <v-flex xs7 sm6> 136 <v-flex xs7 sm6>
137 <h5 class="right my-1"> 137 <h5 class="right my-1">
138 <b>Class Incharge:</b> 138 <b>Class Incharge:</b>
139 </h5> 139 </h5>
140 </v-flex> 140 </v-flex>
141 <v-flex sm6 xs5> 141 <v-flex sm6 xs5>
142 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> 142 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 <v-layout> 145 <v-layout>
146 <v-flex xs7 sm6> 146 <v-flex xs7 sm6>
147 <h5 class="right my-1"> 147 <h5 class="right my-1">
148 <b>Session:</b> 148 <b>Session:</b>
149 </h5> 149 </h5>
150 </v-flex> 150 </v-flex>
151 <v-flex sm6 xs5> 151 <v-flex sm6 xs5>
152 <h5 class="my-1">{{ editedItem.session }}</h5> 152 <h5 class="my-1">{{ editedItem.session }}</h5>
153 </v-flex> 153 </v-flex>
154 </v-layout> 154 </v-layout>
155 </v-flex> 155 </v-flex>
156 </v-layout> 156 </v-layout>
157 </v-container> 157 </v-container>
158 </v-card-text> 158 </v-card-text>
159 </v-card> 159 </v-card>
160 </v-dialog> 160 </v-dialog>
161 161
162 <v-snackbar 162 <v-snackbar
163 :timeout="timeout" 163 :timeout="timeout"
164 :top="y === 'top'" 164 :top="y === 'top'"
165 :right="x === 'right'" 165 :right="x === 'right'"
166 :vertical="mode === 'vertical'" 166 :vertical="mode === 'vertical'"
167 v-model="snackbar" 167 v-model="snackbar"
168 color="success" 168 color="success"
169 >{{ text }}</v-snackbar> 169 >{{ text }}</v-snackbar>
170 170
171 <!-- ****** EXISTING-USERS StudentS Table ****** --> 171 <!-- ****** EXISTING-USERS StudentS Table ****** -->
172 172
173 <v-data-table 173 <v-data-table
174 :headers="headers" 174 :headers="headers"
175 :items="desserts" 175 :items="desserts"
176 :pagination.sync="pagination" 176 :pagination.sync="pagination"
177 :search="search" 177 :search="search"
178 > 178 >
179 <template slot="items" slot-scope="props"> 179 <template slot="items" slot-scope="props">
180 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td> 180 <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
181 <td id="td" class="text-xs-center">{{ props.item.classData.classNum }}</td> 181 <td id="td" class="text-xs-center">{{ props.item.classData.classNum }}</td>
182 <td id="td" class="text-xs-center">{{ props.item.name }}</td> 182 <td id="td" class="text-xs-center">{{ props.item.name }}</td>
183 <td id="td" class="text-xs-center">{{ props.item.session }}</td> 183 <td id="td" class="text-xs-center">{{ props.item.session }}</td>
184 184
185 <td class="text-xs-center"> 185 <td class="text-xs-center">
186 <span> 186 <span>
187 <v-tooltip top> 187 <v-tooltip top>
188 <img 188 <img
189 slot="activator" 189 slot="activator"
190 style="cursor:pointer; width:25px; height:18px; " 190 style="cursor:pointer; width:25px; height:18px; "
191 class="mr5" 191 class="mr5"
192 @click="profile(props.item)" 192 @click="profile(props.item)"
193 src="/static/icon/eye1.png" 193 src="/static/icon/eye1.png"
194 /> 194 />
195 <span>View</span> 195 <span>View</span>
196 </v-tooltip> 196 </v-tooltip>
197 <v-tooltip top> 197 <v-tooltip top>
198 <img 198 <img
199 slot="activator" 199 slot="activator"
200 style="cursor:pointer; width:20px; height:18px; " 200 style="cursor:pointer; width:20px; height:18px; "
201 class="mr5" 201 class="mr5"
202 @click="editItem(props.item)" 202 @click="editItem(props.item)"
203 src="/static/icon/edit1.png" 203 src="/static/icon/edit1.png"
204 /> 204 />
205 <span>Edit</span> 205 <span>Edit</span>
206 </v-tooltip> 206 </v-tooltip>
207 <v-tooltip top> 207 <v-tooltip top>
208 <img 208 <img
209 slot="activator" 209 slot="activator"
210 style="cursor:pointer; width:20px; height:20px; " 210 style="cursor:pointer; width:20px; height:20px; "
211 class="mr5" 211 class="mr5"
212 @click="deleteItem(props.item)" 212 @click="deleteItem(props.item)"
213 src="/static/icon/delete1.png" 213 src="/static/icon/delete1.png"
214 /> 214 />
215 <span>Delete</span> 215 <span>Delete</span>
216 </v-tooltip> 216 </v-tooltip>
217 </span> 217 </span>
218 </td> 218 </td>
219 </template> 219 </template>
220 <v-alert 220 <v-alert
221 slot="no-results" 221 slot="no-results"
222 :value="true" 222 :value="true"
223 color="error" 223 color="error"
224 icon="warning" 224 icon="warning"
225 >Your search for "{{ search }}" found no results.</v-alert> 225 >Your search for "{{ search }}" found no results.</v-alert>
226 </v-data-table> 226 </v-data-table>
227 </v-tab-item> 227 </v-tab-item>
228 228
229 <!-- ****** ADD multiple Students ****** --> 229 <!-- ****** ADD multiple Students ****** -->
230 230
231 <v-tab-item> 231 <v-tab-item>
232 <v-container> 232 <v-container>
233 <v-snackbar 233 <v-snackbar
234 :timeout="timeout" 234 :timeout="timeout"
235 :top="y === 'top'" 235 :top="y === 'top'"
236 :right="x === 'right'" 236 :right="x === 'right'"
237 :vertical="mode === 'vertical'" 237 :vertical="mode === 'vertical'"
238 v-model="snackbar" 238 v-model="snackbar"
239 color="success" 239 color="success"
240 >{{ text }}</v-snackbar> 240 >{{ text }}</v-snackbar>
241 <v-flex xs12 sm8 offset-sm2 class="top"> 241 <v-flex xs12 sm8 offset-sm2 class="top">
242 <v-card flat> 242 <v-card flat>
243 <v-container fluid fill-height> 243 <v-container fluid fill-height>
244 <v-layout align-center> 244 <v-layout align-center>
245 <v-flex xs12 class="mt-4"> 245 <v-flex xs12 class="mt-4">
246 <v-form ref="form" v-model="valid" lazy-validation> 246 <v-form ref="form" v-model="valid" lazy-validation>
247 <v-layout> 247 <v-layout>
248 <v-flex xs4 class="pt-4 subheading"> 248 <v-flex xs4 class="pt-4 subheading">
249 <label class="right">Section:</label> 249 <label class="right">Section:</label>
250 </v-flex> 250 </v-flex>
251 <v-flex xs6 class="ml-3"> 251 <v-flex xs6 class="ml-3">
252 <v-autocomplete 252 <v-autocomplete
253 v-model="sectionData.name" 253 v-model="sectionData.name"
254 placeholder="fill your Section Name" 254 placeholder="fill your Section Name"
255 :items="SectionName" 255 :items="SectionName"
256 :rules="nameRules" 256 :rules="nameRules"
257 required 257 required
258 ></v-autocomplete> 258 ></v-autocomplete>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 <v-layout> 261 <v-layout>
262 <v-flex xs4 class="pt-4 subheading"> 262 <v-flex xs4 class="pt-4 subheading">
263 <label class="right">Class:</label> 263 <label class="right">Class:</label>
264 </v-flex> 264 </v-flex>
265 <v-flex xs6 class="ml-3"> 265 <v-flex xs6 class="ml-3">
266 <v-select 266 <v-select
267 :items="addclass" 267 :items="addclass"
268 label="Select Class" 268 label="Select Class"
269 v-model="sectionData.classNum" 269 v-model="sectionData.classNum"
270 item-text="classNum" 270 item-text="classNum"
271 item-value="_id" 271 item-value="_id"
272 name="Select Class" 272 name="Select Class"
273 :rules="classRules" 273 :rules="classRules"
274 required 274 required
275 ></v-select> 275 ></v-select>
276 </v-flex> 276 </v-flex>
277 </v-layout> 277 </v-layout>
278 <v-layout> 278 <v-layout>
279 <v-flex xs4 class="pt-4 subheading"> 279 <v-flex xs4 class="pt-4 subheading">
280 <label class="right">Incharge:</label> 280 <label class="right">Incharge:</label>
281 </v-flex> 281 </v-flex>
282 <v-flex xs6 class="ml-3"> 282 <v-flex xs6 class="ml-3">
283 <v-select 283 <v-select
284 :items="teacherList" 284 :items="teacherList"
285 label="Select Incharge" 285 label="Select Incharge"
286 v-model="sectionData.sectionId" 286 v-model="sectionData.sectionId"
287 item-text="name" 287 item-text="name"
288 item-value="_id" 288 item-value="_id"
289 name="Select Class" 289 name="Select Class"
290 :rules="inchargeRules" 290 :rules="inchargeRules"
291 required 291 required
292 ></v-select> 292 ></v-select>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 <v-layout> 295 <v-layout>
296 <v-flex xs4 class="pt-4 subheading"> 296 <v-flex xs4 class="pt-4 subheading">
297 <label class="right">Session:</label> 297 <label class="right">Session:</label>
298 </v-flex> 298 </v-flex>
299 <v-flex xs6 class="ml-3"> 299 <v-flex xs6 class="ml-3">
300 <v-text-field 300 <v-text-field
301 v-model="sectionData.session" 301 v-model="sectionData.session"
302 placeholder="fill your Session" 302 placeholder="fill your Session"
303 name="name" 303 name="name"
304 type="text" 304 type="text"
305 :rules="sessionRules" 305 :rules="sessionRules"
306 required 306 required
307 ></v-text-field> 307 ></v-text-field>
308 </v-flex> 308 </v-flex>
309 </v-layout> 309 </v-layout>
310 <v-layout> 310 <v-layout>
311 <v-flex xs12 sm9 offset-sm2> 311 <v-flex xs12 sm9 offset-sm2>
312 <v-card-actions> 312 <v-card-actions>
313 <v-btn @click="clear" round dark>clear</v-btn> 313 <v-btn @click="clear" round dark>clear</v-btn>
314 <v-spacer></v-spacer> 314 <v-spacer></v-spacer>
315 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 315 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
316 </v-card-actions> 316 </v-card-actions>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 </v-form> 319 </v-form>
320 </v-flex> 320 </v-flex>
321 </v-layout> 321 </v-layout>
322 </v-container> 322 </v-container>
323 </v-card> 323 </v-card>
324 </v-flex> 324 </v-flex>
325 </v-container> 325 </v-container>
326 </v-tab-item> 326 </v-tab-item>
327 </v-tabs> 327 </v-tabs>
328 <div class="loader" v-if="showLoader"> 328 <div class="loader" v-if="showLoader">
329 <v-progress-circular indeterminate color="white"></v-progress-circular> 329 <v-progress-circular indeterminate color="white"></v-progress-circular>
330 </div> 330 </div>
331 </v-app> 331 </v-app>
332 </template> 332 </template>
333 333
334 <script> 334 <script>
335 import http from "@/Services/http.js"; 335 import http from "@/Services/http.js";
336 // import { apiCollection } from "@/schoolApi/apiCollection"; 336 // import { apiCollection } from "@/schoolApi/apiCollection";
337 // const getSectionData = apiCollection.get("posts"); 337 // const getSectionData = apiCollection.get("posts");
338 338
339 export default { 339 export default {
340 data: () => ({ 340 data: () => ({
341 snackbar: false, 341 snackbar: false,
342 y: "top", 342 y: "top",
343 x: "right", 343 x: "right",
344 mode: "", 344 mode: "",
345 timeout: 3000, 345 timeout: 3000,
346 text: "", 346 text: "",
347 showLoader: false, 347 showLoader: false,
348 loading: false, 348 loading: false,
349 date: null, 349 date: null,
350 search: "", 350 search: "",
351 dialog: false, 351 dialog: false,
352 dialog1: false, 352 dialog1: false,
353 valid: true, 353 valid: true,
354 validEdit: true, 354 validEdit: true,
355 isActive: true, 355 isActive: true,
356 newActive: false, 356 newActive: false,
357 details: [], 357 details: [],
358 AddUsercredentials: {}, 358 AddUsercredentials: {},
359 pagination: { 359 pagination: {
360 rowsPerPage: 15 360 rowsPerPage: 15
361 }, 361 },
362 nameRules: [v => !!v || " Section Name is required"], 362 nameRules: [v => !!v || " Section Name is required"],
363 classRules: [v => !!v || " Class Name is required"], 363 classRules: [v => !!v || " Class Name is required"],
364 sessionRules: [v => !!v || " Session is required"], 364 sessionRules: [v => !!v || " Session is required"],
365 inchargeRules: [v => !!v || " Incharge Name is required"], 365 inchargeRules: [v => !!v || " Incharge Name is required"],
366 SectionName: ["A", "B", "C", "D", "E", "F"], 366 SectionName: ["A", "B", "C", "D", "E", "F"],
367 headers: [ 367 headers: [
368 { 368 {
369 text: "No", 369 text: "No",
370 align: "center", 370 align: "center",
371 sortable: false, 371 sortable: false,
372 value: "No" 372 value: "No"
373 }, 373 },
374 { 374 {
375 text: "Class Name", 375 text: "Class Name",
376 value: "classData.classNum", 376 value: "classData.classNum",
377 sortable: false, 377 sortable: false,
378 align: "center" 378 align: "center"
379 }, 379 },
380 { text: "Section Name", value: "name", sortable: false, align: "center" }, 380 { text: "Section Name", value: "name", sortable: false, align: "center" },
381 { text: "Session", value: "session", sortable: false, align: "center" }, 381 { text: "Session", value: "session", sortable: false, align: "center" },
382 { text: "Action", value: "", sortable: false, align: "center" } 382 { text: "Action", value: "", sortable: false, align: "center" }
383 ], 383 ],
384 desserts: [], 384 desserts: [],
385 addclass: [], 385 addclass: [],
386 teacherList: [], 386 teacherList: [],
387 select: "", 387 select: "",
388 selectId: "", 388 selectId: "",
389 token: "", 389 token: "",
390 editedIndex: -1, 390 editedIndex: -1,
391 editedItem: { 391 editedItem: {
392 classData: { 392 classData: {
393 classNum: "" 393 classNum: ""
394 }, 394 },
395 classId: "", 395 // classId: "",
396 classInchargeId: "", 396 // classInchargeId: "",
397 teacherData: [ 397 teacherData: [
398 { 398 {
399 name: "" 399 name: ""
400 } 400 }
401 ], 401 ]
402 name: "", 402 // name: "",
403 session: new Date().getFullYear() 403 // session: new Date().getFullYear()
404 }, 404 },
405 sectionData: { 405 sectionData: {
406 session: new Date().getFullYear() 406 session: new Date().getFullYear()
407 } 407 }
408 }), 408 }),
409 methods: { 409 methods: {
410 async getSectionList() { 410 async getSectionList() {
411 // const { data } = await getSectionData.get(); 411 // const { data } = await getSectionData.get();
412 this.showLoader = true; 412 this.showLoader = true;
413 await http() 413 await http()
414 .get("/getAllSections", { 414 .get("/getAllSections", {
415 headers: { Authorization: "Bearer " + this.token } 415 headers: { Authorization: "Bearer " + this.token }
416 }) 416 })
417 .then(response => { 417 .then(response => {
418 this.desserts = response.data.data; 418 this.desserts = response.data.data;
419 this.showLoader = false; 419 this.showLoader = false;
420 // console.log("getAllSections=====>",response.data.data) 420 // console.log("getAllSections=====>",response.data.data)
421 }) 421 })
422 .catch(error => { 422 .catch(error => {
423 this.showLoader = false; 423 this.showLoader = false;
424 if (error.response.status === 401) { 424 if (error.response.status === 401) {
425 this.$router.replace({ path: "/" }); 425 this.$router.replace({ path: "/" });
426 this.$store.dispatch("setToken", null); 426 this.$store.dispatch("setToken", null);
427 this.$store.dispatch("Id", null); 427 this.$store.dispatch("Id", null);
428 } 428 }
429 }); 429 });
430 }, 430 },
431 editItem(item) { 431 editItem(item) {
432 this.editedIndex = this.desserts.indexOf(item); 432 this.editedIndex = this.desserts.indexOf(item);
433 this.editedItem = Object.assign({}, item); 433 this.editedItem = Object.assign({}, item);
434 console.log(this.editedItem);
435 this.dialog = true; 434 this.dialog = true;
436 }, 435 },
437 profile(item) { 436 profile(item) {
438 this.editedIndex = this.desserts.indexOf(item); 437 this.editedIndex = this.desserts.indexOf(item);
439 this.editedItem = Object.assign({}, item); 438 this.editedItem = Object.assign({}, item);
440 this.dialog1 = true; 439 this.dialog1 = true;
441 }, 440 },
442 deleteItem(item) { 441 deleteItem(item) {
443 let deleteStudent = { 442 let deleteStudent = {
444 sectionId: item._id 443 sectionId: item._id
445 }; 444 };
446 http() 445 http()
447 .delete( 446 .delete(
448 "/deleteSection", 447 "/deleteSection",
449 confirm("Are you sure you want to delete this?") && { 448 confirm("Are you sure you want to delete this?") && {
450 params: deleteStudent 449 params: deleteStudent
451 } 450 }
452 ) 451 )
453 .then(response => { 452 .then(response => {
454 if ((this.snackbar = true)) { 453 this.snackbar = true;
455 this.text = "Successfully delete Existing Section"; 454 this.text = "Successfully delete Existing Section";
456 }
457 this.getSectionList(); 455 this.getSectionList();
458 }) 456 })
459 .catch(error => { 457 .catch(error => {
460 // console.log(error); 458 // console.log(error);
461 }); 459 });
462 }, 460 },
463 activeTab(type) { 461 activeTab(type) {
464 switch (type) { 462 switch (type) {
465 case "existing": 463 case "existing":
466 this.newActive = false; 464 this.newActive = false;
467 this.isActive = true; 465 this.isActive = true;
468 break; 466 break;
469 467
470 default: 468 default:
471 this.newActive = true; 469 this.newActive = true;
472 this.isActive = false; 470 this.isActive = false;
473 break; 471 break;
474 } 472 }
475 }, 473 },
476 close() { 474 close() {
477 this.dialog = false; 475 this.dialog = false;
478 setTimeout(() => { 476 setTimeout(() => {
479 this.editedItem = Object.assign({}, this.defaultItem); 477 this.editedItem = Object.assign({}, this.defaultItem);
480 this.editedIndex = -1; 478 this.editedIndex = -1;
481 }, 300); 479 }, 300);
482 }, 480 },
483 close1() { 481 close1() {
484 this.dialog1 = false; 482 this.dialog1 = false;
485 }, 483 },
486 close2() { 484 close2() {
487 this.dialog2 = false; 485 this.dialog2 = false;
488 }, 486 },
489 submit() { 487 submit() {
490 if (this.$refs.form.validate()) { 488 if (this.$refs.form.validate()) {
491 let addSection = { 489 let addSection = {
492 name: this.sectionData.name, 490 name: this.sectionData.name,
493 classId: this.sectionData.classNum, 491 classId: this.sectionData.classNum,
494 session: this.sectionData.session, 492 session: this.sectionData.session,
495 classInchargeId: this.sectionData._id 493 classInchargeId: this.sectionData.sectionId
496 }; 494 };
497 this.loading = true; 495 this.loading = true;
498 http() 496 http()
499 .post("/createSection", addSection) 497 .post("/createSection", addSection)
500 .then(response => { 498 .then(response => {
501 console.log(response);
502 this.getSectionList(); 499 this.getSectionList();
503 if ((this.snackbar = true)) { 500 this.snackbar = true;
504 this.text = "New Section added successfully"; 501 this.text = "New Section added successfully";
505 }
506
507 this.clear(); 502 this.clear();
508 this.loading = false; 503 this.loading = false;
509 }) 504 })
510 .catch(error => { 505 .catch(error => {
511 // console.log(error); 506 // console.log(error);
512 if ((this.snackbar = true)) { 507 this.snackbar = true;
513 this.text = error.response.data.message; 508 this.text = error.response.data.message;
514 }
515 this.loading = false; 509 this.loading = false;
516 }); 510 });
517 } 511 }
518 }, 512 },
519 clear() { 513 clear() {
520 this.$refs.form.reset(); 514 this.$refs.form.reset();
521 }, 515 },
522 save() { 516 save() {
523 this.editedItem.sectionId = this.editedItem._id; 517 this.editedItem.sectionId = this.editedItem._id;
524 http() 518 http()
525 .put("/updateSection", this.editedItem) 519 .put("/updateSection", this.editedItem)
526 .then(response => { 520 .then(response => {
527 // console.log("editStudent",editStudent); 521 this.snackbar = true;
528 if ((this.snackbar = true)) { 522 this.text = "Successfully Edit Existing Section";
529 this.text = "Successfully Edit Existing Section";
530 }
531 this.getSectionList(); 523 this.getSectionList();
532 this.close(); 524 this.close();
533 }) 525 })
534 .catch(error => { 526 .catch(error => {
535 this.text = error.response.data.message; 527 this.text = error.response.data.message;
536 // console.log(error);
537 }); 528 });
538 }, 529 },
539 getAllTeacher() { 530 getAllTeacher() {
540 http() 531 http()
541 .get("/getTeachersList", { 532 .get("/getTeachersList", {
542 headers: { Authorization: "Bearer " + this.token } 533 headers: { Authorization: "Bearer " + this.token }
543 }) 534 })
544 .then(response => { 535 .then(response => {
545 this.teacherList = response.data.data; 536 this.teacherList = response.data.data;
546 this.showLoader = false; 537 this.showLoader = false;
547 }) 538 })
548 .catch(err => { 539 .catch(err => {
549 // console.log("err====>", err); 540 // console.log("err====>", err);
550 this.showLoader = false; 541 this.showLoader = false;
551 }); 542 });
552 }, 543 },
553 getAllClasses() { 544 getAllClasses() {
554 http() 545 http()
555 .get("/getClassesList", { 546 .get("/getClassesList", {
556 headers: { Authorization: "Bearer " + this.token } 547 headers: { Authorization: "Bearer " + this.token }
557 }) 548 })
558 .then(response => { 549 .then(response => {
559 this.addclass = response.data.data; 550 this.addclass = response.data.data;
560 }) 551 })
561 .catch(err => { 552 .catch(err => {
562 // console.log("err====>", err); 553 // console.log("err====>", err);
563 // this.$router.replace({ path: "/" }); 554 // this.$router.replace({ path: "/" });
564 }); 555 });
565 } 556 }
566 }, 557 },
567 mounted() { 558 mounted() {
568 this.token = this.$store.state.token; 559 this.token = this.$store.state.token;
569 this.getSectionList(); 560 this.getSectionList();
570 this.getAllClasses(); 561 this.getAllClasses();
571 this.getAllTeacher(); 562 this.getAllTeacher();
572 }, 563 },
573 created() { 564 created() {
574 this.$root.$on("app:search", search => { 565 this.$root.$on("app:search", search => {
575 this.search = search; 566 this.search = search;
576 }); 567 });
577 }, 568 },
578 beforeDestroy() { 569 beforeDestroy() {
579 // dont forget to remove the listener 570 // dont forget to remove the listener
580 this.$root.$off("app:search"); 571 this.$root.$off("app:search");
581 } 572 }
582 }; 573 };
583 </script> 574 </script>
584 575
585 <style scoped> 576 <style scoped>
586 .active { 577 .active {
587 background-color: gray; 578 background-color: gray;
588 color: white !important; 579 color: white !important;
589 } 580 }
590 .activebtn { 581 .activebtn {
591 color: black !important; 582 color: black !important;
592 } 583 }
593 </style> 584 </style>
src/pages/Students/students.vue
Diff comments   View file @d9bb52b
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="170 0px" scrollable> 31 <v-dialog v-model="dialog" max-width="170 0px" 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: 680px;"> 40 <v-card-text style="height: 680px;">
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.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 hidden-xs-only hidden-sm-only">Email Id:</label> 135 <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
136 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> 136 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label>
137 </v-flex> 137 </v-flex>
138 <v-flex xs8 class="ml-3"> 138 <v-flex xs8 class="ml-3">
139 <v-text-field 139 <v-text-field
140 placeholder="fill your email" 140 placeholder="fill your email"
141 v-model="editedItem.email" 141 v-model="editedItem.email"
142 type="text" 142 type="text"
143 name="email" 143 name="email"
144 required 144 required
145 ></v-text-field> 145 ></v-text-field>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 </v-flex> 148 </v-flex>
149 <v-flex xs12 sm4> 149 <v-flex xs12 sm4>
150 <v-layout> 150 <v-layout>
151 <v-flex xs4 class="pt-4 subheading"> 151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 152 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
153 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 153 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
154 </v-flex> 154 </v-flex>
155 <v-flex xs8 class="ml-3"> 155 <v-flex xs8 class="ml-3">
156 <v-menu 156 <v-menu
157 ref="menu" 157 ref="menu"
158 :close-on-content-click="false" 158 :close-on-content-click="false"
159 v-model="menu1" 159 v-model="menu1"
160 :nudge-right="40" 160 :nudge-right="40"
161 lazy 161 lazy
162 transition="scale-transition" 162 transition="scale-transition"
163 offset-y 163 offset-y
164 full-width 164 full-width
165 min-width="290px" 165 min-width="290px"
166 > 166 >
167 <v-text-field 167 <v-text-field
168 slot="activator" 168 slot="activator"
169 v-model="editedItem.dob" 169 v-model="editedItem.dob"
170 placeholder="Select Dob" 170 placeholder="Select Dob"
171 ></v-text-field> 171 ></v-text-field>
172 <v-date-picker 172 <v-date-picker
173 ref="picker" 173 ref="picker"
174 v-model="editedItem.dob" 174 v-model="editedItem.dob"
175 :max="new Date().toISOString().substr(0, 10)" 175 :max="new Date().toISOString().substr(0, 10)"
176 min="1950-01-01" 176 min="1950-01-01"
177 @input="menu1 = false" 177 @input="menu1 = false"
178 ></v-date-picker> 178 ></v-date-picker>
179 </v-menu> 179 </v-menu>
180 </v-flex> 180 </v-flex>
181 </v-layout> 181 </v-layout>
182 </v-flex> 182 </v-flex>
183 <v-flex xs12 sm4> 183 <v-flex xs12 sm4>
184 <v-layout> 184 <v-layout>
185 <v-flex xs4 class="pt-4 subheading"> 185 <v-flex xs4 class="pt-4 subheading">
186 <label class="right">City:</label> 186 <label class="right">City:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs8 class="ml-3"> 188 <v-flex xs8 class="ml-3">
189 <v-text-field 189 <v-text-field
190 v-model="editedItem.city" 190 v-model="editedItem.city"
191 placeholder="fill your City Name" 191 placeholder="fill your City Name"
192 name="City" 192 name="City"
193 type="text" 193 type="text"
194 required 194 required
195 ></v-text-field> 195 ></v-text-field>
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-layout> 200 <v-layout>
201 <v-flex xs12 sm4> 201 <v-flex xs12 sm4>
202 <v-layout> 202 <v-layout>
203 <v-flex xs4 class="pt-4 subheading"> 203 <v-flex xs4 class="pt-4 subheading">
204 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 204 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
205 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 205 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
206 </v-flex> 206 </v-flex>
207 <v-flex xs8 class="ml-3"> 207 <v-flex xs8 class="ml-3">
208 <v-text-field 208 <v-text-field
209 v-model="editedItem.bloodGroup" 209 v-model="editedItem.bloodGroup"
210 placeholder="fill your BloodGroup" 210 placeholder="fill your BloodGroup"
211 name="state" 211 name="state"
212 type="text" 212 type="text"
213 required 213 required
214 ></v-text-field> 214 ></v-text-field>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 </v-flex> 217 </v-flex>
218 <v-flex xs12 sm4> 218 <v-flex xs12 sm4>
219 <v-layout> 219 <v-layout>
220 <v-flex xs4 class="pt-4 subheading"> 220 <v-flex xs4 class="pt-4 subheading">
221 <label class="right">Gender:</label> 221 <label class="right">Gender:</label>
222 </v-flex> 222 </v-flex>
223 <v-flex xs8 class="ml-3"> 223 <v-flex xs8 class="ml-3">
224 <v-select 224 <v-select
225 :items="gender" 225 :items="gender"
226 v-model="editedItem.gender" 226 v-model="editedItem.gender"
227 placeholder="Select Gender" 227 placeholder="Select Gender"
228 required 228 required
229 ></v-select> 229 ></v-select>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-flex> 232 </v-flex>
233 <v-flex xs12 sm4> 233 <v-flex xs12 sm4>
234 <v-layout> 234 <v-layout>
235 <v-flex xs4 class="pt-4 subheading"> 235 <v-flex xs4 class="pt-4 subheading">
236 <label class="right">Medical Notes:</label> 236 <label class="right">Medical Notes:</label>
237 </v-flex> 237 </v-flex>
238 <v-flex xs8 class="ml-3"> 238 <v-flex xs8 class="ml-3">
239 <v-text-field 239 <v-text-field
240 v-model="editedItem.medicalNotes" 240 v-model="editedItem.medicalNotes"
241 placeholder="fill your medicalNotes" 241 placeholder="fill your medicalNotes"
242 name="mobileNo" 242 name="mobileNo"
243 required 243 required
244 ></v-text-field> 244 ></v-text-field>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 <v-layout> 249 <v-layout>
250 <v-flex xs12 sm4> 250 <v-flex xs12 sm4>
251 <v-layout> 251 <v-layout>
252 <v-flex xs4 class="pt-4 subheading"> 252 <v-flex xs4 class="pt-4 subheading">
253 <label class="right">Height:</label> 253 <label class="right">Height:</label>
254 </v-flex> 254 </v-flex>
255 <v-flex xs8 class="ml-3"> 255 <v-flex xs8 class="ml-3">
256 <v-text-field 256 <v-text-field
257 v-model="editedItem.height" 257 v-model="editedItem.height"
258 placeholder="fill your Height" 258 placeholder="fill your Height"
259 name="state" 259 name="state"
260 type="text" 260 type="text"
261 required 261 required
262 ></v-text-field> 262 ></v-text-field>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 </v-flex> 265 </v-flex>
266 <v-flex xs12 sm4> 266 <v-flex xs12 sm4>
267 <v-layout> 267 <v-layout>
268 <v-flex xs4 class="pt-4 subheading"> 268 <v-flex xs4 class="pt-4 subheading">
269 <label class="right">Weight:</label> 269 <label class="right">Weight:</label>
270 </v-flex> 270 </v-flex>
271 <v-flex xs8 class="ml-3"> 271 <v-flex xs8 class="ml-3">
272 <v-text-field 272 <v-text-field
273 v-model="editedItem.weight" 273 v-model="editedItem.weight"
274 placeholder="fill your Weight" 274 placeholder="fill your Weight"
275 name="pincode" 275 name="pincode"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm4> 281 <v-flex xs12 sm4>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 class="pt-4 subheading"> 283 <v-flex xs4 class="pt-4 subheading">
284 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 284 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
285 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 285 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
286 </v-flex> 286 </v-flex>
287 <v-flex xs8 class="ml-3"> 287 <v-flex xs8 class="ml-3">
288 <v-text-field 288 <v-text-field
289 label="Select Image" 289 label="Select Image"
290 @click="pickFile" 290 @click="pickFile"
291 v-model="imageName" 291 v-model="imageName"
292 append-icon="attach_file" 292 append-icon="attach_file"
293 ></v-text-field> 293 ></v-text-field>
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> 298 <v-layout>
299 <v-flex xs12 sm4> 299 <v-flex xs12 sm4>
300 <v-layout> 300 <v-layout>
301 <v-flex xs4 class="pt-4 subheading"> 301 <v-flex xs4 class="pt-4 subheading">
302 <label class="right">State:</label> 302 <label class="right">State:</label>
303 </v-flex> 303 </v-flex>
304 <v-flex xs8 class="ml-3"> 304 <v-flex xs8 class="ml-3">
305 <v-text-field 305 <v-text-field
306 v-model="editedItem.state" 306 v-model="editedItem.state"
307 placeholder="fill your State Name" 307 placeholder="fill your State Name"
308 name="state" 308 name="state"
309 type="text" 309 type="text"
310 required 310 required
311 ></v-text-field> 311 ></v-text-field>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm4> 315 <v-flex xs12 sm4>
316 <v-layout> 316 <v-layout>
317 <v-flex xs4 class="pt-4 subheading"> 317 <v-flex xs4 class="pt-4 subheading">
318 <label class="right">Pincode:</label> 318 <label class="right">Pincode:</label>
319 </v-flex> 319 </v-flex>
320 <v-flex xs8 class="ml-3"> 320 <v-flex xs8 class="ml-3">
321 <v-text-field 321 <v-text-field
322 v-model="editedItem.pincode" 322 v-model="editedItem.pincode"
323 placeholder="fill your pincode" 323 placeholder="fill your pincode"
324 name="pincode" 324 name="pincode"
325 type="number" 325 type="number"
326 required 326 required
327 ></v-text-field> 327 ></v-text-field>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 <v-flex xs12 sm4> 331 <v-flex xs12 sm4>
332 <v-layout> 332 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 333 <v-flex xs4 class="pt-4 subheading">
334 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 334 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
335 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 335 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
336 </v-flex> 336 </v-flex>
337 <v-flex xs8 class="ml-3"> 337 <v-flex xs8 class="ml-3">
338 <v-text-field 338 <v-text-field
339 v-model="editedItem.mobile" 339 v-model="editedItem.mobile"
340 placeholder="fill your MobileNo" 340 placeholder="fill your MobileNo"
341 name="mobileNo" 341 name="mobileNo"
342 type="number" 342 type="number"
343 required 343 required
344 ></v-text-field> 344 ></v-text-field>
345 </v-flex> 345 </v-flex>
346 </v-layout> 346 </v-layout>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 <v-layout> 349 <v-layout>
350 <v-flex xs12 sm4> 350 <v-flex xs12 sm4>
351 <v-layout> 351 <v-layout>
352 <v-flex xs4 class="pt-4 subheading"> 352 <v-flex xs4 class="pt-4 subheading">
353 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 353 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
354 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 354 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
355 </v-flex> 355 </v-flex>
356 <v-flex xs8 class="ml-3"> 356 <v-flex xs8 class="ml-3">
357 <v-autocomplete 357 <v-autocomplete
358 v-model="editedItem.country" 358 v-model="editedItem.country"
359 :items="countries" 359 :items="countries"
360 placeholder="Select Country Name" 360 placeholder="Select Country Name"
361 required 361 required
362 ></v-autocomplete> 362 ></v-autocomplete>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 </v-flex> 365 </v-flex>
366 <v-flex xs12 sm4> 366 <v-flex xs12 sm4>
367 <v-layout> 367 <v-layout>
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 369 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
370 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 370 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
371 </v-flex> 371 </v-flex>
372 <v-flex xs8 class="ml-3"> 372 <v-flex xs8 class="ml-3">
373 <v-text-field 373 <v-text-field
374 :items="gender" 374 :items="gender"
375 v-model="editedItem.rollNo" 375 v-model="editedItem.rollNo"
376 placeholder="fill roll number" 376 placeholder="fill roll number"
377 required 377 required
378 ></v-text-field> 378 ></v-text-field>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 </v-flex> 381 </v-flex>
382 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 382 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
383 <v-layout> 383 <v-layout>
384 <v-flex xs4 sm4 class="pt-4 subheading"> 384 <v-flex xs4 sm4 class="pt-4 subheading">
385 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> 385 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
386 <label 386 <label
387 class="right hidden-lg-only hidden-md-only hidden-xl-only" 387 class="right hidden-lg-only hidden-md-only hidden-xl-only"
388 >Permanent Address:</label> 388 >Permanent Address:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs12 sm8 class="ml-3"> 390 <v-flex xs12 sm8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 v-model="editedItem.permanentAddress" 392 v-model="editedItem.permanentAddress"
393 placeholder="fill Your Permanent Address" 393 placeholder="fill Your Permanent Address"
394 required 394 required
395 ></v-text-field> 395 ></v-text-field>
396 </v-flex> 396 </v-flex>
397 </v-layout> 397 </v-layout>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <v-layout class="hidden-xs-only hidden-sm-only"> 400 <v-layout class="hidden-xs-only hidden-sm-only">
401 <v-flex xs12 sm4> 401 <v-flex xs12 sm4>
402 <v-layout> 402 <v-layout>
403 <v-flex xs4 class="pt-4 subheading"> 403 <v-flex xs4 class="pt-4 subheading">
404 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> 404 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
405 <label 405 <label
406 class="right hidden-lg-only hidden-md-only hidden-xl-only" 406 class="right hidden-lg-only hidden-md-only hidden-xl-only"
407 >Present Address:</label> 407 >Present Address:</label>
408 </v-flex> 408 </v-flex>
409 <v-flex xs8 class="ml-3"> 409 <v-flex xs8 class="ml-3">
410 <v-text-field 410 <v-text-field
411 v-model="editedItem.presentAddress" 411 v-model="editedItem.presentAddress"
412 placeholder="Select Country Name" 412 placeholder="Select Country Name"
413 required 413 required
414 ></v-text-field> 414 ></v-text-field>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </v-flex> 417 </v-flex>
418 </v-layout> 418 </v-layout>
419 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 419 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
420 <v-flex xs12 sm12> 420 <v-flex xs12 sm12>
421 <v-layout> 421 <v-layout>
422 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 422 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
423 <label class>Present Address :</label> 423 <label class>Present Address :</label>
424 </v-flex> 424 </v-flex>
425 </v-layout> 425 </v-layout>
426 <v-layout> 426 <v-layout>
427 <v-flex xs12 sm12> 427 <v-flex xs12 sm12>
428 <v-textarea 428 <v-textarea
429 v-model="editedItem.presentAddress" 429 v-model="editedItem.presentAddress"
430 placeholder="fill Your present Address" 430 placeholder="fill Your present Address"
431 required 431 required
432 ></v-textarea> 432 ></v-textarea>
433 </v-flex> 433 </v-flex>
434 </v-layout> 434 </v-layout>
435 </v-flex> 435 </v-flex>
436 <v-flex xs12 sm12> 436 <v-flex xs12 sm12>
437 <v-layout> 437 <v-layout>
438 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 438 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
439 <label>Permanent addr:</label> 439 <label>Permanent addr:</label>
440 </v-flex> 440 </v-flex>
441 </v-layout> 441 </v-layout>
442 <v-layout> 442 <v-layout>
443 <v-flex xs12 sm12> 443 <v-flex xs12 sm12>
444 <v-textarea 444 <v-textarea
445 name="input-4-3" 445 name="input-4-3"
446 v-model="editedItem.permanentAddress" 446 v-model="editedItem.permanentAddress"
447 placeholder="fill Your Permanent Address" 447 placeholder="fill Your Permanent Address"
448 required 448 required
449 ></v-textarea> 449 ></v-textarea>
450 </v-flex> 450 </v-flex>
451 </v-layout> 451 </v-layout>
452 </v-flex> 452 </v-flex>
453 </v-layout> 453 </v-layout>
454 <v-layout> 454 <v-layout>
455 <v-flex xs12 sm12> 455 <v-flex xs12 sm12>
456 <v-layout> 456 <v-layout>
457 <v-flex xs6> 457 <v-flex xs6>
458 <v-btn round dark @click.native="close">Cancel</v-btn> 458 <v-btn round dark @click.native="close">Cancel</v-btn>
459 </v-flex> 459 </v-flex>
460 <v-flex xs6> 460 <v-flex xs6>
461 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 461 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
462 </v-flex> 462 </v-flex>
463 </v-layout> 463 </v-layout>
464 </v-flex> 464 </v-flex>
465 </v-layout> 465 </v-layout>
466 </v-container> 466 </v-container>
467 </v-form> 467 </v-form>
468 </v-card-text> 468 </v-card-text>
469 </v-card> 469 </v-card>
470 </v-dialog> 470 </v-dialog>
471 471
472 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 472 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
473 473
474 <v-dialog v-model="dialog1" max-width="1100px" scrollable> 474 <v-dialog v-model="dialog1" max-width="1100px" scrollable>
475 <v-card> 475 <v-card>
476 <v-toolbar color="grey lighten-2" flat> 476 <v-toolbar color="grey lighten-2" flat>
477 <v-spacer></v-spacer> 477 <v-spacer></v-spacer>
478 <v-toolbar-title>Student Profile</v-toolbar-title> 478 <v-toolbar-title>Student Profile</v-toolbar-title>
479 <v-spacer></v-spacer> 479 <v-spacer></v-spacer>
480 <v-icon @click="close1">close</v-icon> 480 <v-icon @click="close1">close</v-icon>
481 </v-toolbar> 481 </v-toolbar>
482 <v-card-text style="height: 700px;"> 482 <v-card-text style="height: 700px;">
483 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 483 <v-flex align-center justify-center layout text-xs-center class="mt-3">
484 <v-avatar size="160px"> 484 <v-avatar size="160px">
485 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 485 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
486 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 486 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
487 </v-avatar> 487 </v-avatar>
488 </v-flex> 488 </v-flex>
489 <v-container grid-list-md> 489 <v-container grid-list-md>
490 <v-layout wrap> 490 <v-layout wrap>
491 <v-flex xs12 sm6> 491 <v-flex xs12 sm6>
492 <v-layout> 492 <v-layout>
493 <v-flex xs6 sm5> 493 <v-flex xs6 sm5>
494 <h5 class="right my-1"> 494 <h5 class="right my-1">
495 <b>Full Name:</b> 495 <b>Full Name:</b>
496 </h5> 496 </h5>
497 </v-flex> 497 </v-flex>
498 <v-flex sm7 xs6> 498 <v-flex sm7 xs6>
499 <h5 class="my-1 left">{{ editedItem.name }}</h5> 499 <h5 class="my-1 left">{{ editedItem.name }}</h5>
500 </v-flex> 500 </v-flex>
501 </v-layout> 501 </v-layout>
502 </v-flex> 502 </v-flex>
503 <v-flex xs12 sm6> 503 <v-flex xs12 sm6>
504 <v-layout> 504 <v-layout>
505 <v-flex xs6 sm4> 505 <v-flex xs6 sm4>
506 <h5 class="right my-1"> 506 <h5 class="right my-1">
507 <b>Email:</b> 507 <b>Email:</b>
508 </h5> 508 </h5>
509 </v-flex> 509 </v-flex>
510 <v-flex sm8 xs6> 510 <v-flex sm8 xs6>
511 <h5 class="my-1 left">{{ editedItem.email }}</h5> 511 <h5 class="my-1 left">{{ editedItem.email }}</h5>
512 </v-flex> 512 </v-flex>
513 </v-layout> 513 </v-layout>
514 </v-flex> 514 </v-flex>
515 </v-layout> 515 </v-layout>
516 <v-layout wrap> 516 <v-layout wrap>
517 <v-flex xs12 sm6> 517 <v-flex xs12 sm6>
518 <v-layout> 518 <v-layout>
519 <v-flex xs6 sm5> 519 <v-flex xs6 sm5>
520 <b> 520 <b>
521 <h5 class="right my-1"> 521 <h5 class="right my-1">
522 <b>Gender:</b> 522 <b>Gender:</b>
523 </h5> 523 </h5>
524 </b> 524 </b>
525 </v-flex> 525 </v-flex>
526 <v-flex sm7 xs6> 526 <v-flex sm7 xs6>
527 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 527 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
528 </v-flex> 528 </v-flex>
529 </v-layout> 529 </v-layout>
530 </v-flex> 530 </v-flex>
531 <v-flex xs12 sm6> 531 <v-flex xs12 sm6>
532 <v-layout> 532 <v-layout>
533 <v-flex xs6 sm4> 533 <v-flex xs6 sm4>
534 <b> 534 <b>
535 <h5 class="right my-1"> 535 <h5 class="right my-1">
536 <b>D.O.B:</b> 536 <b>D.O.B:</b>
537 </h5> 537 </h5>
538 </b> 538 </b>
539 </v-flex> 539 </v-flex>
540 <v-flex sm7 xs6> 540 <v-flex sm7 xs6>
541 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 541 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
542 </v-flex> 542 </v-flex>
543 </v-layout> 543 </v-layout>
544 </v-flex> 544 </v-flex>
545 </v-layout> 545 </v-layout>
546 <v-layout wrap> 546 <v-layout wrap>
547 <v-flex xs12 sm6> 547 <v-flex xs12 sm6>
548 <v-layout> 548 <v-layout>
549 <v-flex xs6 sm5> 549 <v-flex xs6 sm5>
550 <b> 550 <b>
551 <h5 class="right my-1"> 551 <h5 class="right my-1">
552 <b>Blood Group:</b> 552 <b>Blood Group:</b>
553 </h5> 553 </h5>
554 </b> 554 </b>
555 </v-flex> 555 </v-flex>
556 <v-flex sm7 xs6> 556 <v-flex sm7 xs6>
557 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 557 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
558 </v-flex> 558 </v-flex>
559 </v-layout> 559 </v-layout>
560 </v-flex> 560 </v-flex>
561 <!-- <v-flex xs12 sm6> 561 <!-- <v-flex xs12 sm6>
562 <v-layout> 562 <v-layout>
563 <v-flex xs6 sm4> 563 <v-flex xs6 sm4>
564 <b> 564 <b>
565 <h5 class="right my-1"> 565 <h5 class="right my-1">
566 <b>Allergies:</b> 566 <b>Allergies:</b>
567 </h5> 567 </h5>
568 </b> 568 </b>
569 </v-flex> 569 </v-flex>
570 <v-flex sm8 xs6> 570 <v-flex sm8 xs6>
571 <h5 class="my-1">{{ editedItem.allergies }}</h5> 571 <h5 class="my-1">{{ editedItem.allergies }}</h5>
572 </v-flex> 572 </v-flex>
573 </v-layout> 573 </v-layout>
574 </v-flex>--> 574 </v-flex>-->
575 <v-flex xs12 sm6> 575 <v-flex xs12 sm6>
576 <v-layout> 576 <v-layout>
577 <v-flex xs6 sm4> 577 <v-flex xs6 sm4>
578 <b> 578 <b>
579 <h5 class="right my-1"> 579 <h5 class="right my-1">
580 <b>Roll No. :</b> 580 <b>Roll No. :</b>
581 </h5> 581 </h5>
582 </b> 582 </b>
583 </v-flex> 583 </v-flex>
584 <v-flex sm6 xs6> 584 <v-flex sm6 xs6>
585 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 585 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
586 </v-flex> 586 </v-flex>
587 </v-layout> 587 </v-layout>
588 </v-flex> 588 </v-flex>
589 </v-layout> 589 </v-layout>
590 <v-layout wrap> 590 <v-layout wrap>
591 <v-flex xs12 sm6> 591 <v-flex xs12 sm6>
592 <v-layout> 592 <v-layout>
593 <v-flex xs6 sm5> 593 <v-flex xs6 sm5>
594 <b> 594 <b>
595 <h5 class="right my-1"> 595 <h5 class="right my-1">
596 <b>Height:</b> 596 <b>Height:</b>
597 </h5> 597 </h5>
598 </b> 598 </b>
599 </v-flex> 599 </v-flex>
600 <v-flex sm7 xs6> 600 <v-flex sm7 xs6>
601 <h5 class="my-1 left">{{ editedItem.height }}</h5> 601 <h5 class="my-1 left">{{ editedItem.height }}</h5>
602 </v-flex> 602 </v-flex>
603 </v-layout> 603 </v-layout>
604 </v-flex> 604 </v-flex>
605 <v-flex xs12 sm6> 605 <v-flex xs12 sm6>
606 <v-layout> 606 <v-layout>
607 <v-flex xs6 sm4> 607 <v-flex xs6 sm4>
608 <b> 608 <b>
609 <h5 class="right my-1"> 609 <h5 class="right my-1">
610 <b>Weight:</b> 610 <b>Weight:</b>
611 </h5> 611 </h5>
612 </b> 612 </b>
613 </v-flex> 613 </v-flex>
614 <v-flex sm8 xs6> 614 <v-flex sm8 xs6>
615 <h5 class="my-1">{{ editedItem.weight }}</h5> 615 <h5 class="my-1">{{ editedItem.weight }}</h5>
616 </v-flex> 616 </v-flex>
617 </v-layout> 617 </v-layout>
618 </v-flex> 618 </v-flex>
619 </v-layout> 619 </v-layout>
620 <v-layout wrap> 620 <v-layout wrap>
621 <v-flex xs12 sm6> 621 <v-flex xs12 sm6>
622 <v-layout> 622 <v-layout>
623 <v-flex xs6 sm5> 623 <v-flex xs6 sm5>
624 <b> 624 <b>
625 <h5 class="right my-1"> 625 <h5 class="right my-1">
626 <b>City:</b> 626 <b>City:</b>
627 </h5> 627 </h5>
628 </b> 628 </b>
629 </v-flex> 629 </v-flex>
630 <v-flex sm7 xs6> 630 <v-flex sm7 xs6>
631 <h5 class="my-1 left">{{ editedItem.city }}</h5> 631 <h5 class="my-1 left">{{ editedItem.city }}</h5>
632 </v-flex> 632 </v-flex>
633 </v-layout> 633 </v-layout>
634 </v-flex> 634 </v-flex>
635 <v-flex xs12 sm6> 635 <v-flex xs12 sm6>
636 <v-layout> 636 <v-layout>
637 <v-flex xs6 sm4> 637 <v-flex xs6 sm4>
638 <b> 638 <b>
639 <h5 class="right my-1"> 639 <h5 class="right my-1">
640 <b>State:</b> 640 <b>State:</b>
641 </h5> 641 </h5>
642 </b> 642 </b>
643 </v-flex> 643 </v-flex>
644 <v-flex sm8 xs6> 644 <v-flex sm8 xs6>
645 <h5 class="my-1">{{ editedItem.state }}</h5> 645 <h5 class="my-1">{{ editedItem.state }}</h5>
646 </v-flex> 646 </v-flex>
647 </v-layout> 647 </v-layout>
648 </v-flex> 648 </v-flex>
649 </v-layout> 649 </v-layout>
650 <v-layout wrap> 650 <v-layout wrap>
651 <v-flex xs12 sm6> 651 <v-flex xs12 sm6>
652 <v-layout> 652 <v-layout>
653 <v-flex xs6 sm5> 653 <v-flex xs6 sm5>
654 <b> 654 <b>
655 <h5 class="right my-1"> 655 <h5 class="right my-1">
656 <b>Pincode:</b> 656 <b>Pincode:</b>
657 </h5> 657 </h5>
658 </b> 658 </b>
659 </v-flex> 659 </v-flex>
660 <v-flex sm7 xs6> 660 <v-flex sm7 xs6>
661 <h5 class="my-1">{{ editedItem.pincode }}</h5> 661 <h5 class="my-1">{{ editedItem.pincode }}</h5>
662 </v-flex> 662 </v-flex>
663 </v-layout> 663 </v-layout>
664 </v-flex> 664 </v-flex>
665 <v-flex xs12 sm5> 665 <v-flex xs12 sm5>
666 <v-layout> 666 <v-layout>
667 <v-flex xs6 sm5> 667 <v-flex xs6 sm5>
668 <b> 668 <b>
669 <h5 class="right my-1"> 669 <h5 class="right my-1">
670 <b>Country:</b> 670 <b>Country:</b>
671 </h5> 671 </h5>
672 </b> 672 </b>
673 </v-flex> 673 </v-flex>
674 <v-flex sm7 xs6> 674 <v-flex sm7 xs6>
675 <h5 class="my-1">{{ editedItem.country }}</h5> 675 <h5 class="my-1">{{ editedItem.country }}</h5>
676 </v-flex> 676 </v-flex>
677 </v-layout> 677 </v-layout>
678 </v-flex> 678 </v-flex>
679 </v-layout> 679 </v-layout>
680 <v-layout wrap> 680 <v-layout wrap>
681 <v-flex xs12 sm6> 681 <v-flex xs12 sm6>
682 <v-layout> 682 <v-layout>
683 <v-flex sm5 xs6> 683 <v-flex sm5 xs6>
684 <b> 684 <b>
685 <h5 class="right my-1"> 685 <h5 class="right my-1">
686 <b>Mobile No:</b> 686 <b>Mobile No:</b>
687 </h5> 687 </h5>
688 </b> 688 </b>
689 </v-flex> 689 </v-flex>
690 <v-flex sm6 xs6> 690 <v-flex sm6 xs6>
691 <h5 class="my-1">{{ editedItem.mobile }}</h5> 691 <h5 class="my-1">{{ editedItem.mobile }}</h5>
692 </v-flex> 692 </v-flex>
693 </v-layout> 693 </v-layout>
694 </v-flex> 694 </v-flex>
695 <v-flex xs12 sm6> 695 <v-flex xs12 sm6>
696 <v-layout> 696 <v-layout>
697 <v-flex xs6 sm4> 697 <v-flex xs6 sm4>
698 <b> 698 <b>
699 <h5 class="right my-1"> 699 <h5 class="right my-1">
700 <b>FahterName:</b> 700 <b>FahterName:</b>
701 </h5> 701 </h5>
702 </b> 702 </b>
703 </v-flex> 703 </v-flex>
704 <v-flex sm8 xs6> 704 <v-flex sm8 xs6>
705 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 705 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
706 </v-flex> 706 </v-flex>
707 </v-layout> 707 </v-layout>
708 </v-flex> 708 </v-flex>
709 </v-layout> 709 </v-layout>
710 <v-layout wrap> 710 <v-layout wrap>
711 <v-flex xs12 sm5> 711 <v-flex xs12 sm5>
712 <v-layout> 712 <v-layout>
713 <v-flex xs6 sm6> 713 <v-flex xs6 sm6>
714 <b> 714 <b>
715 <h5 class="right my-1"> 715 <h5 class="right my-1">
716 <b>MotherName:</b> 716 <b>MotherName:</b>
717 </h5> 717 </h5>
718 </b> 718 </b>
719 </v-flex> 719 </v-flex>
720 <v-flex sm6 xs6> 720 <v-flex sm6 xs6>
721 <h5 class="my-1">{{ editedItem.motherName }}</h5> 721 <h5 class="my-1">{{ editedItem.motherName }}</h5>
722 </v-flex> 722 </v-flex>
723 </v-layout> 723 </v-layout>
724 </v-flex> 724 </v-flex>
725 <v-flex xs12 sm6> 725 <v-flex xs12 sm6>
726 <v-layout> 726 <v-layout>
727 <v-flex xs6 sm6> 727 <v-flex xs6 sm6>
728 <b> 728 <b>
729 <h5 class="right my-1"> 729 <h5 class="right my-1">
730 <b>FatherCellNo:</b> 730 <b>FatherCellNo:</b>
731 </h5> 731 </h5>
732 </b> 732 </b>
733 </v-flex> 733 </v-flex>
734 <v-flex sm6 xs6> 734 <v-flex sm6 xs6>
735 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 735 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
736 </v-flex> 736 </v-flex>
737 </v-layout> 737 </v-layout>
738 </v-flex> 738 </v-flex>
739 </v-layout> 739 </v-layout>
740 <v-layout wrap> 740 <v-layout wrap>
741 <v-flex xs12 sm5> 741 <v-flex xs12 sm5>
742 <v-layout> 742 <v-layout>
743 <v-flex xs6 sm6> 743 <v-flex xs6 sm6>
744 <b> 744 <b>
745 <h5 class="right my-1"> 745 <h5 class="right my-1">
746 <b>MotherCellNo:</b> 746 <b>MotherCellNo:</b>
747 </h5> 747 </h5>
748 </b> 748 </b>
749 </v-flex> 749 </v-flex>
750 <v-flex sm6 xs6> 750 <v-flex sm6 xs6>
751 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 751 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
752 </v-flex> 752 </v-flex>
753 </v-layout> 753 </v-layout>
754 </v-flex> 754 </v-flex>
755 <v-flex xs12 sm6> 755 <v-flex xs12 sm6>
756 <v-layout> 756 <v-layout>
757 <v-flex xs6 sm6> 757 <v-flex xs6 sm6>
758 <b> 758 <b>
759 <h5 class="my-1 right"> 759 <h5 class="my-1 right">
760 <b>AcademicYear:</b> 760 <b>AcademicYear:</b>
761 </h5> 761 </h5>
762 </b> 762 </b>
763 </v-flex> 763 </v-flex>
764 <v-flex sm5 xs6> 764 <v-flex sm5 xs6>
765 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 765 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
766 </v-flex> 766 </v-flex>
767 </v-layout> 767 </v-layout>
768 </v-flex> 768 </v-flex>
769 </v-layout> 769 </v-layout>
770 <v-layout wrap> 770 <v-layout wrap>
771 <v-flex xs12 sm5> 771 <v-flex xs12 sm5>
772 <v-layout> 772 <v-layout>
773 <v-flex xs6 sm6> 773 <v-flex xs6 sm6>
774 <b> 774 <b>
775 <h5 class="my-1 right"> 775 <h5 class="my-1 right">
776 <b>MedicalNotes:</b> 776 <b>MedicalNotes:</b>
777 </h5> 777 </h5>
778 </b> 778 </b>
779 </v-flex> 779 </v-flex>
780 <v-flex sm5 xs6> 780 <v-flex sm5 xs6>
781 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 781 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
782 </v-flex> 782 </v-flex>
783 </v-layout> 783 </v-layout>
784 </v-flex> 784 </v-flex>
785 <v-flex xs12 sm5 class="hidden-xs-only"> 785 <v-flex xs12 sm5 class="hidden-xs-only">
786 <v-layout wrap> 786 <v-layout wrap>
787 <v-flex sm6> 787 <v-flex sm6>
788 <b> 788 <b>
789 <h5 class="my-1 right"> 789 <h5 class="my-1 right">
790 <b>present Address:</b> 790 <b>present Address:</b>
791 </h5> 791 </h5>
792 </b> 792 </b>
793 </v-flex> 793 </v-flex>
794 <v-flex sm5> 794 <v-flex sm5>
795 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 795 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
796 </v-flex> 796 </v-flex>
797 </v-layout> 797 </v-layout>
798 </v-flex> 798 </v-flex>
799 <v-flex sm6 class="hidden-xs-only"> 799 <v-flex sm6 class="hidden-xs-only">
800 <v-layout wrap> 800 <v-layout wrap>
801 <v-flex sm6> 801 <v-flex sm6>
802 <b> 802 <b>
803 <h5 class="my-1 right"> 803 <h5 class="my-1 right">
804 <b>Permanent Address:</b> 804 <b>Permanent Address:</b>
805 </h5> 805 </h5>
806 </b> 806 </b>
807 </v-flex> 807 </v-flex>
808 <v-flex sm6> 808 <v-flex sm6>
809 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 809 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
810 </v-flex> 810 </v-flex>
811 </v-layout> 811 </v-layout>
812 </v-flex> 812 </v-flex>
813 </v-layout> 813 </v-layout>
814 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 814 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
815 <v-flex xs12 sm5> 815 <v-flex xs12 sm5>
816 <v-layout wrap> 816 <v-layout wrap>
817 <v-flex xs12 sm6> 817 <v-flex xs12 sm6>
818 <b> 818 <b>
819 <h5 class="my-1"> 819 <h5 class="my-1">
820 <b>present Address:-</b> 820 <b>present Address:-</b>
821 </h5> 821 </h5>
822 </b> 822 </b>
823 </v-flex> 823 </v-flex>
824 <v-flex sm5 xs12> 824 <v-flex sm5 xs12>
825 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 825 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
826 </v-flex> 826 </v-flex>
827 </v-layout> 827 </v-layout>
828 </v-flex> 828 </v-flex>
829 <v-flex xs12 sm6> 829 <v-flex xs12 sm6>
830 <v-layout wrap> 830 <v-layout wrap>
831 <v-flex xs12 sm6> 831 <v-flex xs12 sm6>
832 <b> 832 <b>
833 <h5 class="my-1"> 833 <h5 class="my-1">
834 <b>Permanent Address:-</b> 834 <b>Permanent Address:-</b>
835 </h5> 835 </h5>
836 </b> 836 </b>
837 </v-flex> 837 </v-flex>
838 <v-flex sm6 xs12> 838 <v-flex sm6 xs12>
839 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 839 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
840 </v-flex> 840 </v-flex>
841 </v-layout> 841 </v-layout>
842 </v-flex> 842 </v-flex>
843 </v-layout> 843 </v-layout>
844 </v-container> 844 </v-container>
845 </v-card-text> 845 </v-card-text>
846 </v-card> 846 </v-card>
847 </v-dialog> 847 </v-dialog>
848 848
849 <v-snackbar 849 <v-snackbar
850 :timeout="timeout" 850 :timeout="timeout"
851 :top="y === 'top'" 851 :top="y === 'top'"
852 :right="x === 'right'" 852 :right="x === 'right'"
853 :vertical="mode === 'vertical'" 853 :vertical="mode === 'vertical'"
854 v-model="snackbar" 854 v-model="snackbar"
855 color="success" 855 color="success"
856 >{{ text }}</v-snackbar> 856 >{{ text }}</v-snackbar>
857 857
858 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 858 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
859 <v-card flat> 859 <v-card flat>
860 <v-card-actions class="hidden-xs-only hidden-sm-only"> 860 <v-card-actions class="hidden-xs-only hidden-sm-only">
861 <v-layout> 861 <v-layout>
862 <label class="right mt-4 ml-5">Select Class:</label> 862 <label class="right mt-4 ml-5">Select Class:</label>
863 <v-select 863 <v-select
864 :items="addclass" 864 :items="addclass"
865 label="Select Class" 865 label="Select Class"
866 v-model="selectStudents.select" 866 v-model="selectStudents.select"
867 item-text="classNum" 867 item-text="classNum"
868 item-value="_id" 868 item-value="_id"
869 name="Select Class" 869 name="Select Class"
870 :rules="classRules" 870 :rules="classRules"
871 @change="getSections(selectStudents.select)" 871 @change="getSections(selectStudents.select)"
872 class="px-4" 872 class="px-4"
873 required 873 required
874 ></v-select> 874 ></v-select>
875 <label class="right mt-4">Select Section:</label> 875 <label class="right mt-4">Select Section:</label>
876 <v-select 876 <v-select
877 :items="addSection" 877 :items="addSection"
878 label="Select Section" 878 label="Select Section"
879 v-model="selectStudents.selectSection" 879 v-model="selectStudents.selectSection"
880 item-text="name" 880 item-text="name"
881 item-value="_id" 881 item-value="_id"
882 name="Select Section" 882 name="Select Section"
883 :rules="sectionRules" 883 :rules="sectionRules"
884 class="pl-3" 884 class="pl-3"
885 required 885 required
886 ></v-select> 886 ></v-select>
887 </v-layout> 887 </v-layout>
888 <v-spacer></v-spacer> 888 <v-spacer></v-spacer>
889 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn> 889 <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
890 </v-card-actions> 890 </v-card-actions>
891 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 891 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
892 <v-layout> 892 <v-layout>
893 <v-flex xs4> 893 <v-flex xs4>
894 <label class="right mt-4">Select Class:</label> 894 <label class="right mt-4">Select Class:</label>
895 </v-flex> 895 </v-flex>
896 <v-flex xs8> 896 <v-flex xs8>
897 <v-select 897 <v-select
898 :items="addclass" 898 :items="addclass"
899 label="Select Class" 899 label="Select Class"
900 v-model="selectStudents.select" 900 v-model="selectStudents.select"
901 item-text="classNum" 901 item-text="classNum"
902 item-value="_id" 902 item-value="_id"
903 name="Select Class" 903 name="Select Class"
904 :rules="classRules" 904 :rules="classRules"
905 @change="getSections(selectStudents.select)" 905 @change="getSections(selectStudents.select)"
906 class="px-2" 906 class="px-2"
907 required 907 required
908 ></v-select> 908 ></v-select>
909 </v-flex> 909 </v-flex>
910 </v-layout> 910 </v-layout>
911 <v-layout> 911 <v-layout>
912 <v-flex xs4> 912 <v-flex xs4>
913 <label class="right mt-4">Select Section:</label> 913 <label class="right mt-4">Select Section:</label>
914 </v-flex> 914 </v-flex>
915 <v-flex xs8> 915 <v-flex xs8>
916 <v-select 916 <v-select
917 :items="addSection" 917 :items="addSection"
918 label="Select Section" 918 label="Select Section"
919 v-model="selectStudents.selectSection" 919 v-model="selectStudents.selectSection"
920 item-text="name" 920 item-text="name"
921 item-value="_id" 921 item-value="_id"
922 name="Select Section" 922 name="Select Section"
923 :rules="sectionRules" 923 :rules="sectionRules"
924 class="px-2" 924 class="px-2"
925 required 925 required
926 ></v-select> 926 ></v-select>
927 </v-flex> 927 </v-flex>
928 </v-layout> 928 </v-layout>
929 <v-layout> 929 <v-layout>
930 <v-flex xs5 class="mx-auto mb-2"> 930 <v-flex xs5 class="mx-auto mb-2">
931 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn> 931 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
932 </v-flex> 932 </v-flex>
933 </v-layout> 933 </v-layout>
934 </v-flex> 934 </v-flex>
935 </v-card> 935 </v-card>
936 <v-data-table 936 <v-data-table
937 :headers="headers" 937 :headers="headers"
938 :items="desserts" 938 :items="desserts"
939 :pagination.sync="pagination" 939 :pagination.sync="pagination"
940 :search="search" 940 :search="search"
941 > 941 >
942 <template slot="items" slot-scope="props"> 942 <template slot="items" slot-scope="props">
943 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td> 943 <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
944 <td id="td" class="text-xs-center"> 944 <td id="td" class="text-xs-center">
945 <v-avatar> 945 <v-avatar>
946 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 946 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
947 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 947 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
948 </v-avatar> 948 </v-avatar>
949 </td> 949 </td>
950 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 950 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
951 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 951 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
952 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 952 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
953 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 953 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
954 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td> 954 <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
955 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td> 955 <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
956 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 956 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
957 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 957 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
958 958
959 <td class="text-xs-center"> 959 <td class="text-xs-center">
960 <span> 960 <span>
961 <v-tooltip top> 961 <v-tooltip top>
962 <img 962 <img
963 slot="activator" 963 slot="activator"
964 style="cursor:pointer; width:25px; height:18px; " 964 style="cursor:pointer; width:25px; height:18px; "
965 class="mr5" 965 class="mr5"
966 @click="profile(props.item)" 966 @click="profile(props.item)"
967 src="/static/icon/eye1.png" 967 src="/static/icon/eye1.png"
968 /> 968 />
969 <span>View</span> 969 <span>View</span>
970 </v-tooltip> 970 </v-tooltip>
971 <v-tooltip top> 971 <v-tooltip top>
972 <img 972 <img
973 slot="activator" 973 slot="activator"
974 style="cursor:pointer; width:20px; height:18px; " 974 style="cursor:pointer; width:20px; height:18px; "
975 class="mr5" 975 class="mr5"
976 @click="editItem(props.item)" 976 @click="editItem(props.item)"
977 src="/static/icon/edit1.png" 977 src="/static/icon/edit1.png"
978 /> 978 />
979 <span>Edit</span> 979 <span>Edit</span>
980 </v-tooltip> 980 </v-tooltip>
981 <v-tooltip top> 981 <v-tooltip top>
982 <img 982 <img
983 slot="activator" 983 slot="activator"
984 style="cursor:pointer; width:20px; height:20px; " 984 style="cursor:pointer; width:20px; height:20px; "
985 class="mr5" 985 class="mr5"
986 @click="deleteItem(props.item)" 986 @click="deleteItem(props.item)"
987 src="/static/icon/delete1.png" 987 src="/static/icon/delete1.png"
988 /> 988 />
989 <span>Delete</span> 989 <span>Delete</span>
990 </v-tooltip> 990 </v-tooltip>
991 </span> 991 </span>
992 </td> 992 </td>
993 </template> 993 </template>
994 <v-alert 994 <v-alert
995 slot="no-results" 995 slot="no-results"
996 :value="true" 996 :value="true"
997 color="error" 997 color="error"
998 icon="warning" 998 icon="warning"
999 >Your search for "{{ search }}" found no results.</v-alert> 999 >Your search for "{{ search }}" found no results.</v-alert>
1000 </v-data-table> 1000 </v-data-table>
1001 </v-tab-item> 1001 </v-tab-item>
1002 1002
1003 <!-- ****** ADD STUDENTS DETAILS****** --> 1003 <!-- ****** ADD STUDENTS DETAILS****** -->
1004 <v-tab-item> 1004 <v-tab-item>
1005 <v-container fluid> 1005 <v-container fluid>
1006 <v-layout align-center justify-center fill-height> 1006 <v-layout align-center justify-center fill-height>
1007 <v-flex xs12 sm12 md10 lg11> 1007 <v-flex xs12 sm12 md10 lg11>
1008 <div> 1008 <div>
1009 <v-app> 1009 <v-app>
1010 <v-stepper v-model="e2"> 1010 <v-stepper v-model="e2">
1011 <v-stepper-header> 1011 <v-stepper-header>
1012 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1012 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1013 <v-divider></v-divider> 1013 <v-divider></v-divider>
1014 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1014 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1015 </v-stepper-header> 1015 </v-stepper-header>
1016 <v-stepper-items> 1016 <v-stepper-items>
1017 <v-stepper-content step="1"> 1017 <v-stepper-content step="1">
1018 <v-container fluid class> 1018 <v-container fluid class>
1019 <v-snackbar 1019 <v-snackbar
1020 :timeout="timeout" 1020 :timeout="timeout"
1021 :top="y === 'top'" 1021 :top="y === 'top'"
1022 :right="x === 'right'" 1022 :right="x === 'right'"
1023 :vertical="mode === 'vertical'" 1023 :vertical="mode === 'vertical'"
1024 v-model="snackbar" 1024 v-model="snackbar"
1025 color="success" 1025 color="success"
1026 >{{ text }}</v-snackbar> 1026 >{{ text }}</v-snackbar>
1027 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> 1027 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
1028 <v-form ref="parentForm" v-model="valid" lazy-validation> 1028 <v-form ref="parentForm" v-model="valid" lazy-validation>
1029 <v-layout wrap> 1029 <v-layout wrap>
1030 <v-flex xs12 sm6> 1030 <v-flex xs12 sm6>
1031 <v-layout wrap> 1031 <v-layout wrap>
1032 <v-flex xs12 class="pt-4 subheading"> 1032 <v-flex xs12 class="pt-4 subheading">
1033 <label>Father Cell No:</label> 1033 <label>Father Cell No:</label>
1034 </v-flex> 1034 </v-flex>
1035 <v-flex xs12> 1035 <v-flex xs12>
1036 <v-text-field 1036 <v-text-field
1037 v-model.trim="parentData.fatherCellNo" 1037 v-model.trim="parentData.fatherCellNo"
1038 placeholder="fill your father Cell Number" 1038 placeholder="fill your father Cell Number"
1039 type="number" 1039 type="number"
1040 :rules="fatheCellNoRules" 1040 :rules="fatheCellNoRules"
1041 v-on:keyup="getParentDetails()" 1041 v-on:keyup="getParentDetails()"
1042 required 1042 required
1043 ></v-text-field> 1043 ></v-text-field>
1044 </v-flex> 1044 </v-flex>
1045 </v-layout> 1045 </v-layout>
1046 </v-flex> 1046 </v-flex>
1047 <v-flex xs12 sm6> 1047 <v-flex xs12 sm6>
1048 <v-layout wrap> 1048 <v-layout wrap>
1049 <v-flex xs12 class="pt-4 subheading"> 1049 <v-flex xs12 class="pt-4 subheading">
1050 <label>Parent Email Id:</label> 1050 <label>Parent Email Id:</label>
1051 </v-flex> 1051 </v-flex>
1052 <v-flex xs12> 1052 <v-flex xs12>
1053 <v-text-field 1053 <v-text-field
1054 placeholder="fill Parent email" 1054 placeholder="fill Parent email"
1055 v-model="parentData.email" 1055 v-model="parentData.email"
1056 type="text" 1056 type="text"
1057 required 1057 required
1058 ></v-text-field> 1058 ></v-text-field>
1059 </v-flex> 1059 </v-flex>
1060 </v-layout> 1060 </v-layout>
1061 </v-flex> 1061 </v-flex>
1062 </v-layout> 1062 </v-layout>
1063 <v-layout wrap> 1063 <v-layout wrap>
1064 <v-flex xs12 sm6> 1064 <v-flex xs12 sm6>
1065 <v-layout wrap> 1065 <v-layout wrap>
1066 <v-flex xs12 class="pt-4 subheading"> 1066 <v-flex xs12 class="pt-4 subheading">
1067 <label>Father Name:</label> 1067 <label>Father Name:</label>
1068 </v-flex> 1068 </v-flex>
1069 <v-flex xs12> 1069 <v-flex xs12>
1070 <v-text-field 1070 <v-text-field
1071 v-model="parentData.fatherName" 1071 v-model="parentData.fatherName"
1072 placeholder="Fill your father Name" 1072 placeholder="Fill your father Name"
1073 required 1073 required
1074 ></v-text-field> 1074 ></v-text-field>
1075 </v-flex> 1075 </v-flex>
1076 </v-layout> 1076 </v-layout>
1077 </v-flex> 1077 </v-flex>
1078 <v-flex xs12 sm6> 1078 <v-flex xs12 sm6>
1079 <v-layout wrap> 1079 <v-layout wrap>
1080 <v-flex xs12 class="pt-4 subheading"> 1080 <v-flex xs12 class="pt-4 subheading">
1081 <label>Mother Name:</label> 1081 <label>Mother Name:</label>
1082 </v-flex> 1082 </v-flex>
1083 <v-flex xs12> 1083 <v-flex xs12>
1084 <v-text-field 1084 <v-text-field
1085 v-model="parentData.motherName" 1085 v-model="parentData.motherName"
1086 placeholder="fill your Mother Name" 1086 placeholder="fill your Mother Name"
1087 name="state" 1087 name="state"
1088 type="text" 1088 type="text"
1089 required 1089 required
1090 ></v-text-field> 1090 ></v-text-field>
1091 </v-flex> 1091 </v-flex>
1092 </v-layout> 1092 </v-layout>
1093 </v-flex> 1093 </v-flex>
1094 </v-layout> 1094 </v-layout>
1095 <v-layout wrap> 1095 <v-layout wrap>
1096 <v-flex xs12 sm6> 1096 <v-flex xs12 sm6>
1097 <v-layout wrap> 1097 <v-layout wrap>
1098 <v-flex xs12 class="pt-4 subheading"> 1098 <v-flex xs12 class="pt-4 subheading">
1099 <label>Mother Cell No:</label> 1099 <label>Mother Cell No:</label>
1100 </v-flex> 1100 </v-flex>
1101 <v-flex xs12> 1101 <v-flex xs12>
1102 <v-text-field 1102 <v-text-field
1103 v-model="parentData.motherCellNo" 1103 v-model="parentData.motherCellNo"
1104 placeholder="fill your Mother Cell Number" 1104 placeholder="fill your Mother Cell Number"
1105 name="state" 1105 name="state"
1106 type="number" 1106 type="number"
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-flex xs12 sm6> 1112 <v-flex xs12 sm6>
1113 <v-layout wrap> 1113 <v-layout wrap>
1114 <v-flex xs12 class="pt-4 subheading"> 1114 <v-flex xs12 class="pt-4 subheading">
1115 <label>Father Profession:</label> 1115 <label>Father Profession:</label>
1116 </v-flex> 1116 </v-flex>
1117 <v-flex xs12> 1117 <v-flex xs12>
1118 <v-text-field 1118 <v-text-field
1119 v-model="parentData.fatherProfession" 1119 v-model="parentData.fatherProfession"
1120 placeholder="fill your father profession" 1120 placeholder="fill your father profession"
1121 ></v-text-field> 1121 ></v-text-field>
1122 </v-flex> 1122 </v-flex>
1123 </v-layout> 1123 </v-layout>
1124 </v-flex> 1124 </v-flex>
1125 </v-layout> 1125 </v-layout>
1126 <v-layout wrap> 1126 <v-layout wrap>
1127 <v-flex xs12 sm6> 1127 <v-flex xs12 sm6>
1128 <v-layout wrap> 1128 <v-layout wrap>
1129 <v-flex xs12 class="pt-4 subheading"> 1129 <v-flex xs12 class="pt-4 subheading">
1130 <label>Mother Profession:</label> 1130 <label>Mother Profession:</label>
1131 </v-flex> 1131 </v-flex>
1132 <v-flex xs12> 1132 <v-flex xs12>
1133 <v-text-field 1133 <v-text-field
1134 v-model="parentData.motherProfession" 1134 v-model="parentData.motherProfession"
1135 placeholder="fill your mother profession" 1135 placeholder="fill your mother profession"
1136 ></v-text-field> 1136 ></v-text-field>
1137 </v-flex> 1137 </v-flex>
1138 </v-layout> 1138 </v-layout>
1139 </v-flex> 1139 </v-flex>
1140 </v-layout> 1140 </v-layout>
1141 <v-flex sm12 class="hidden-xs-only"> 1141 <v-flex sm12 class="hidden-xs-only">
1142 <v-card-actions> 1142 <v-card-actions>
1143 <v-spacer></v-spacer> 1143 <v-spacer></v-spacer>
1144 <v-btn 1144 <v-btn
1145 @click="submitParentDetails" 1145 @click="submitParentDetails"
1146 round 1146 round
1147 dark 1147 dark
1148 :loading="loading" 1148 :loading="loading"
1149 v-show="showParent" 1149 v-show="showParent"
1150 >Add</v-btn> 1150 >Add</v-btn>
1151 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1151 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1152 </v-card-actions> 1152 </v-card-actions>
1153 </v-flex> 1153 </v-flex>
1154 <v-flex 1154 <v-flex
1155 xs6 1155 xs6
1156 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1156 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1157 > 1157 >
1158 <v-btn 1158 <v-btn
1159 @click="submitParentDetails" 1159 @click="submitParentDetails"
1160 round 1160 round
1161 dark 1161 dark
1162 :loading="loading" 1162 :loading="loading"
1163 v-show="showParent" 1163 v-show="showParent"
1164 >Add</v-btn> 1164 >Add</v-btn>
1165 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1165 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1166 </v-flex> 1166 </v-flex>
1167 </v-form> 1167 </v-form>
1168 </v-flex> 1168 </v-flex>
1169 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> 1169 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
1170 <v-form ref="parentForm" v-model="valid" lazy-validation> 1170 <v-form ref="parentForm" v-model="valid" lazy-validation>
1171 <v-layout wrap> 1171 <v-layout wrap>
1172 <v-flex xs12 sm6> 1172 <v-flex xs12 sm6>
1173 <v-layout> 1173 <v-layout>
1174 <v-flex xs4 class="pt-4 subheading"> 1174 <v-flex xs4 class="pt-4 subheading">
1175 <label class="right">Father Cell No:</label> 1175 <label class="right">Father Cell No:</label>
1176 </v-flex> 1176 </v-flex>
1177 <v-flex xs8 class="ml-3"> 1177 <v-flex xs8 class="ml-3">
1178 <v-text-field 1178 <v-text-field
1179 v-model.trim="parentData.fatherCellNo" 1179 v-model.trim="parentData.fatherCellNo"
1180 placeholder="fill your father Cell Number" 1180 placeholder="fill your father Cell Number"
1181 type="number" 1181 type="number"
1182 :rules="fatheCellNoRules" 1182 :rules="fatheCellNoRules"
1183 v-on:keyup="getParentDetails()" 1183 v-on:keyup="getParentDetails()"
1184 required 1184 required
1185 ></v-text-field> 1185 ></v-text-field>
1186 </v-flex> 1186 </v-flex>
1187 </v-layout> 1187 </v-layout>
1188 </v-flex> 1188 </v-flex>
1189 <v-flex xs12 sm6> 1189 <v-flex xs12 sm6>
1190 <v-layout> 1190 <v-layout>
1191 <v-flex xs4 class="pt-4 subheading"> 1191 <v-flex xs4 class="pt-4 subheading">
1192 <label class="right">Parent Email Id:</label> 1192 <label class="right">Parent Email Id:</label>
1193 </v-flex> 1193 </v-flex>
1194 <v-flex xs8 class="ml-3"> 1194 <v-flex xs8 class="ml-3">
1195 <v-text-field 1195 <v-text-field
1196 placeholder="fill Parent email" 1196 placeholder="fill Parent email"
1197 v-model="parentData.email" 1197 v-model="parentData.email"
1198 type="text" 1198 type="text"
1199 required 1199 required
1200 ></v-text-field> 1200 ></v-text-field>
1201 </v-flex> 1201 </v-flex>
1202 </v-layout> 1202 </v-layout>
1203 </v-flex> 1203 </v-flex>
1204 </v-layout> 1204 </v-layout>
1205 <v-layout wrap> 1205 <v-layout wrap>
1206 <v-flex xs12 sm6> 1206 <v-flex xs12 sm6>
1207 <v-layout> 1207 <v-layout>
1208 <v-flex xs4 class="pt-4 subheading"> 1208 <v-flex xs4 class="pt-4 subheading">
1209 <label class="right">Father Name:</label> 1209 <label class="right">Father Name:</label>
1210 </v-flex> 1210 </v-flex>
1211 <v-flex xs8 class="ml-3"> 1211 <v-flex xs8 class="ml-3">
1212 <v-text-field 1212 <v-text-field
1213 v-model="parentData.fatherName" 1213 v-model="parentData.fatherName"
1214 placeholder="Fill your father Name" 1214 placeholder="Fill your father Name"
1215 required 1215 required
1216 ></v-text-field> 1216 ></v-text-field>
1217 </v-flex> 1217 </v-flex>
1218 </v-layout> 1218 </v-layout>
1219 </v-flex> 1219 </v-flex>
1220 <v-flex xs12 sm6> 1220 <v-flex xs12 sm6>
1221 <v-layout> 1221 <v-layout>
1222 <v-flex xs4 class="pt-4 subheading"> 1222 <v-flex xs4 class="pt-4 subheading">
1223 <label class="right">Mother Name:</label> 1223 <label class="right">Mother Name:</label>
1224 </v-flex> 1224 </v-flex>
1225 <v-flex xs8 class="ml-3"> 1225 <v-flex xs8 class="ml-3">
1226 <v-text-field 1226 <v-text-field
1227 v-model="parentData.motherName" 1227 v-model="parentData.motherName"
1228 placeholder="fill your Mother Name" 1228 placeholder="fill your Mother Name"
1229 name="state" 1229 name="state"
1230 type="text" 1230 type="text"
1231 required 1231 required
1232 ></v-text-field> 1232 ></v-text-field>
1233 </v-flex> 1233 </v-flex>
1234 </v-layout> 1234 </v-layout>
1235 </v-flex> 1235 </v-flex>
1236 </v-layout> 1236 </v-layout>
1237 <v-layout wrap> 1237 <v-layout wrap>
1238 <v-flex xs12 sm6> 1238 <v-flex xs12 sm6>
1239 <v-layout> 1239 <v-layout>
1240 <v-flex xs4 class="pt-4 subheading"> 1240 <v-flex xs4 class="pt-4 subheading">
1241 <label class="right">Mother Cell No:</label> 1241 <label class="right">Mother Cell No:</label>
1242 </v-flex> 1242 </v-flex>
1243 <v-flex xs8 class="ml-3"> 1243 <v-flex xs8 class="ml-3">
1244 <v-text-field 1244 <v-text-field
1245 v-model="parentData.motherCellNo" 1245 v-model="parentData.motherCellNo"
1246 placeholder="fill your Mother Cell Number" 1246 placeholder="fill your Mother Cell Number"
1247 name="state" 1247 name="state"
1248 type="number" 1248 type="number"
1249 required 1249 required
1250 ></v-text-field> 1250 ></v-text-field>
1251 </v-flex> 1251 </v-flex>
1252 </v-layout> 1252 </v-layout>
1253 </v-flex> 1253 </v-flex>
1254 <v-flex xs12 sm6> 1254 <v-flex xs12 sm6>
1255 <v-layout> 1255 <v-layout>
1256 <v-flex xs4 class="pt-4 subheading"> 1256 <v-flex xs4 class="pt-4 subheading">
1257 <label class="right">Father Profession:</label> 1257 <label class="right">Father Profession:</label>
1258 </v-flex> 1258 </v-flex>
1259 <v-flex xs8 class="ml-3"> 1259 <v-flex xs8 class="ml-3">
1260 <v-text-field 1260 <v-text-field
1261 v-model="parentData.fatherProfession" 1261 v-model="parentData.fatherProfession"
1262 placeholder="fill your father profession" 1262 placeholder="fill your father profession"
1263 ></v-text-field> 1263 ></v-text-field>
1264 </v-flex> 1264 </v-flex>
1265 </v-layout> 1265 </v-layout>
1266 </v-flex> 1266 </v-flex>
1267 </v-layout> 1267 </v-layout>
1268 <v-layout wrap> 1268 <v-layout wrap>
1269 <v-flex xs12 sm6> 1269 <v-flex xs12 sm6>
1270 <v-layout> 1270 <v-layout>
1271 <v-flex xs4 class="pt-4 subheading"> 1271 <v-flex xs4 class="pt-4 subheading">
1272 <label class="right">Mother Profession:</label> 1272 <label class="right">Mother Profession:</label>
1273 </v-flex> 1273 </v-flex>
1274 <v-flex xs8 class="ml-3"> 1274 <v-flex xs8 class="ml-3">
1275 <v-text-field 1275 <v-text-field
1276 v-model="parentData.motherProfession" 1276 v-model="parentData.motherProfession"
1277 placeholder="fill your mother profession" 1277 placeholder="fill your mother profession"
1278 ></v-text-field> 1278 ></v-text-field>
1279 </v-flex> 1279 </v-flex>
1280 </v-layout> 1280 </v-layout>
1281 </v-flex> 1281 </v-flex>
1282 </v-layout> 1282 </v-layout>
1283 <v-flex sm12 class="hidden-xs-only"> 1283 <v-flex sm12 class="hidden-xs-only">
1284 <v-card-actions> 1284 <v-card-actions>
1285 <v-spacer></v-spacer> 1285 <v-spacer></v-spacer>
1286 <v-btn 1286 <v-btn
1287 @click="submitParentDetails" 1287 @click="submitParentDetails"
1288 round 1288 round
1289 dark 1289 dark
1290 :loading="loading" 1290 :loading="loading"
1291 v-show="showParent" 1291 v-show="showParent"
1292 >Add</v-btn> 1292 >Add</v-btn>
1293 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1293 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1294 </v-card-actions> 1294 </v-card-actions>
1295 </v-flex> 1295 </v-flex>
1296 <v-flex 1296 <v-flex
1297 xs6 1297 xs6
1298 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1298 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1299 > 1299 >
1300 <v-btn 1300 <v-btn
1301 @click="submitParentDetails" 1301 @click="submitParentDetails"
1302 round 1302 round
1303 dark 1303 dark
1304 :loading="loading" 1304 :loading="loading"
1305 v-show="showParent" 1305 v-show="showParent"
1306 >Add</v-btn> 1306 >Add</v-btn>
1307 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn> 1307 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
1308 </v-flex> 1308 </v-flex>
1309 </v-form> 1309 </v-form>
1310 </v-flex> 1310 </v-flex>
1311 </v-container> 1311 </v-container>
1312 </v-stepper-content> 1312 </v-stepper-content>
1313 <v-stepper-content step="2"> 1313 <v-stepper-content step="2">
1314 <v-snackbar 1314 <v-snackbar
1315 :timeout="timeout" 1315 :timeout="timeout"
1316 :top="y === 'top'" 1316 :top="y === 'top'"
1317 :right="x === 'right'" 1317 :right="x === 'right'"
1318 :vertical="mode === 'vertical'" 1318 :vertical="mode === 'vertical'"
1319 v-model="snackbar" 1319 v-model="snackbar"
1320 color="success" 1320 color="success"
1321 >{{ text }}</v-snackbar> 1321 >{{ text }}</v-snackbar>
1322 <v-flex xs12 sm12> 1322 <v-flex xs12 sm12>
1323 <v-form ref="form" v-model="valid" lazy-validation> 1323 <v-form ref="form" v-model="valid" lazy-validation>
1324 <v-layout> 1324 <v-layout>
1325 <v-flex 1325 <v-flex
1326 xs12 1326 xs12
1327 class="text-xs-center text-sm-center text-md-center text-lg-center" 1327 class="text-xs-center text-sm-center text-md-center text-lg-center"
1328 > 1328 >
1329 <v-avatar size="100px"> 1329 <v-avatar size="100px">
1330 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1330 <img src="/static/icon/user.png" v-if="!imageUrl" />
1331 </v-avatar> 1331 </v-avatar>
1332 <input 1332 <input
1333 type="file" 1333 type="file"
1334 style="display: none" 1334 style="display: none"
1335 ref="image" 1335 ref="image"
1336 accept="image/*" 1336 accept="image/*"
1337 @change="onFilePicked" 1337 @change="onFilePicked"
1338 /> 1338 />
1339 <img 1339 <img
1340 :src="imageData.imageUrl" 1340 :src="imageData.imageUrl"
1341 height="150" 1341 height="150"
1342 v-if="imageUrl" 1342 v-if="imageUrl"
1343 style="border-radius:50%; width:200px" 1343 style="border-radius:50%; width:200px"
1344 /> 1344 />
1345 </v-flex> 1345 </v-flex>
1346 </v-layout> 1346 </v-layout>
1347 <v-layout wrap> 1347 <v-layout wrap>
1348 <v-flex xs12 sm6> 1348 <v-flex xs12 sm6>
1349 <v-layout> 1349 <v-layout>
1350 <v-flex x4 sm4 class="pt-4 subheading"> 1350 <v-flex x4 sm4 class="pt-4 subheading">
1351 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1351 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1352 <label 1352 <label
1353 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1353 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1354 >Class:</label> 1354 >Class:</label>
1355 </v-flex> 1355 </v-flex>
1356 <v-flex xs8 sm8 class="ml-3"> 1356 <v-flex xs8 sm8 class="ml-3">
1357 <v-select 1357 <v-select
1358 :items="addclass" 1358 :items="addclass"
1359 label="Select Class" 1359 label="Select Class"
1360 v-model="addStudents.select" 1360 v-model="addStudents.select"
1361 item-text="classNum" 1361 item-text="classNum"
1362 item-value="_id" 1362 item-value="_id"
1363 name="Select Class" 1363 name="Select Class"
1364 :rules="classRules" 1364 :rules="classRules"
1365 @change="getSection(addStudents.select)" 1365 @change="getSection(addStudents.select)"
1366 required 1366 required
1367 ></v-select> 1367 ></v-select>
1368 </v-flex> 1368 </v-flex>
1369 </v-layout> 1369 </v-layout>
1370 </v-flex> 1370 </v-flex>
1371 <v-flex xs12 sm6> 1371 <v-flex xs12 sm6>
1372 <v-layout> 1372 <v-layout>
1373 <v-flex xs4 class="pt-4 subheading"> 1373 <v-flex xs4 class="pt-4 subheading">
1374 <label 1374 <label
1375 class="right hidden-xs-only hidden-sm-only" 1375 class="right hidden-xs-only hidden-sm-only"
1376 >Select Section:</label> 1376 >Select Section:</label>
1377 <label 1377 <label
1378 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1378 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1379 >Section:</label> 1379 >Section:</label>
1380 </v-flex> 1380 </v-flex>
1381 <v-flex xs8 class="ml-3"> 1381 <v-flex xs8 class="ml-3">
1382 <v-select 1382 <v-select
1383 :items="addSection" 1383 :items="addSection"
1384 label="Select Section" 1384 label="Select Section"
1385 v-model="addStudents.selectSection" 1385 v-model="addStudents.selectSection"
1386 item-text="name" 1386 item-text="name"
1387 item-value="_id" 1387 item-value="_id"
1388 name="Select Section" 1388 name="Select Section"
1389 :rules="sectionRules" 1389 :rules="sectionRules"
1390 required 1390 required
1391 ></v-select> 1391 ></v-select>
1392 </v-flex> 1392 </v-flex>
1393 </v-layout> 1393 </v-layout>
1394 </v-flex> 1394 </v-flex>
1395 </v-layout> 1395 </v-layout>
1396 <v-layout wrap> 1396 <v-layout wrap>
1397 <v-flex xs12 sm6> 1397 <v-flex xs12 sm6>
1398 <v-layout> 1398 <v-layout>
1399 <v-flex xs4 sm4 class="pt-4 subheading"> 1399 <v-flex xs4 sm4 class="pt-4 subheading">
1400 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1400 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1401 <label 1401 <label
1402 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1402 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1403 >Name:</label> 1403 >Name:</label>
1404 </v-flex> 1404 </v-flex>
1405 <v-flex xs8 sm8 class="ml-3"> 1405 <v-flex xs8 sm8 class="ml-3">
1406 <v-text-field 1406 <v-text-field
1407 v-model="addStudents.name" 1407 v-model="addStudents.name"
1408 placeholder="fill your full Name" 1408 placeholder="fill your full Name"
1409 name="name" 1409 name="name"
1410 type="text" 1410 type="text"
1411 :rules="nameRules" 1411 :rules="nameRules"
1412 required 1412 required
1413 ></v-text-field> 1413 ></v-text-field>
1414 </v-flex> 1414 </v-flex>
1415 </v-layout> 1415 </v-layout>
1416 </v-flex> 1416 </v-flex>
1417 <v-flex xs12 sm6> 1417 <v-flex xs12 sm6>
1418 <v-layout> 1418 <v-layout>
1419 <v-flex xs4 sm4 class="pt-4 subheading"> 1419 <v-flex xs4 sm4 class="pt-4 subheading">
1420 <label class="right">Email ID:</label> 1420 <label class="right">Email ID:</label>
1421 </v-flex> 1421 </v-flex>
1422 <v-flex xs8 sm8 class="ml-3"> 1422 <v-flex xs8 sm8 class="ml-3">
1423 <v-text-field 1423 <v-text-field
1424 placeholder="fill your email" 1424 placeholder="fill your email"
1425 v-model="addStudents.email" 1425 v-model="addStudents.email"
1426 type="text" 1426 type="text"
1427 name="email" 1427 name="email"
1428 required 1428 required
1429 ></v-text-field> 1429 ></v-text-field>
1430 </v-flex> 1430 </v-flex>
1431 </v-layout> 1431 </v-layout>
1432 </v-flex> 1432 </v-flex>
1433 </v-layout> 1433 </v-layout>
1434 <v-layout wrap> 1434 <v-layout wrap>
1435 <v-flex xs12 sm6> 1435 <v-flex xs12 sm6>
1436 <v-layout> 1436 <v-layout>
1437 <v-flex xs4 sm4 class="pt-4 subheading"> 1437 <v-flex xs4 sm4 class="pt-4 subheading">
1438 <label 1438 <label
1439 class="right hidden-sm-only hidden-xs-only" 1439 class="right hidden-sm-only hidden-xs-only"
1440 >Date of Birth:</label> 1440 >Date of Birth:</label>
1441 <label 1441 <label
1442 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1442 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1443 >D.O.B:</label> 1443 >D.O.B:</label>
1444 </v-flex> 1444 </v-flex>
1445 <v-flex xs8 sm8 class="ml-3"> 1445 <v-flex xs8 sm8 class="ml-3">
1446 <v-menu 1446 <v-menu
1447 ref="menu" 1447 ref="menu"
1448 :close-on-content-click="false" 1448 :close-on-content-click="false"
1449 v-model="menu" 1449 v-model="menu"
1450 :nudge-right="40" 1450 :nudge-right="40"
1451 lazy 1451 lazy
1452 transition="scale-transition" 1452 transition="scale-transition"
1453 offset-y 1453 offset-y
1454 full-width 1454 full-width
1455 min-width="290px" 1455 min-width="290px"
1456 > 1456 >
1457 <v-text-field 1457 <v-text-field
1458 slot="activator" 1458 slot="activator"
1459 :rules="dateRules" 1459 :rules="dateRules"
1460 v-model="addStudents.date" 1460 v-model="addStudents.date"
1461 placeholder="Select date" 1461 placeholder="Select date"
1462 ></v-text-field> 1462 ></v-text-field>
1463 <v-date-picker 1463 <v-date-picker
1464 ref="picker" 1464 ref="picker"
1465 v-model="addStudents.date" 1465 v-model="addStudents.date"
1466 :max="new Date().toISOString().substr(0, 10)" 1466 :max="new Date().toISOString().substr(0, 10)"
1467 min="1950-01-01" 1467 min="1950-01-01"
1468 @input="menu = false" 1468 @input="menu = false"
1469 ></v-date-picker> 1469 ></v-date-picker>
1470 </v-menu> 1470 </v-menu>
1471 </v-flex> 1471 </v-flex>
1472 </v-layout> 1472 </v-layout>
1473 </v-flex> 1473 </v-flex>
1474 <v-flex xs12 sm6> 1474 <v-flex xs12 sm6>
1475 <v-layout> 1475 <v-layout>
1476 <v-flex xs4 class="pt-4 subheading"> 1476 <v-flex xs4 class="pt-4 subheading">
1477 <label class="right">City:</label> 1477 <label class="right">City:</label>
1478 </v-flex> 1478 </v-flex>
1479 <v-flex xs8 class="ml-3"> 1479 <v-flex xs8 class="ml-3">
1480 <v-text-field 1480 <v-text-field
1481 v-model="addStudents.city" 1481 v-model="addStudents.city"
1482 placeholder="fill your City Name" 1482 placeholder="fill your City Name"
1483 name="City" 1483 name="City"
1484 type="text" 1484 type="text"
1485 :rules="cityRules" 1485 :rules="cityRules"
1486 required 1486 required
1487 ></v-text-field> 1487 ></v-text-field>
1488 </v-flex> 1488 </v-flex>
1489 </v-layout> 1489 </v-layout>
1490 </v-flex> 1490 </v-flex>
1491 </v-layout> 1491 </v-layout>
1492 <v-layout wrap> 1492 <v-layout wrap>
1493 <v-flex xs12 sm6> 1493 <v-flex xs12 sm6>
1494 <v-layout> 1494 <v-layout>
1495 <v-flex xs4 class="pt-4 subheading"> 1495 <v-flex xs4 class="pt-4 subheading">
1496 <label class="right">State:</label> 1496 <label class="right">State:</label>
1497 </v-flex> 1497 </v-flex>
1498 <v-flex xs8 class="ml-3"> 1498 <v-flex xs8 class="ml-3">
1499 <v-text-field 1499 <v-text-field
1500 v-model="addStudents.state" 1500 v-model="addStudents.state"
1501 placeholder="fill your State Name" 1501 placeholder="fill your State Name"
1502 name="state" 1502 name="state"
1503 type="text" 1503 type="text"
1504 :rules="stateRules" 1504 :rules="stateRules"
1505 required 1505 required
1506 ></v-text-field> 1506 ></v-text-field>
1507 </v-flex> 1507 </v-flex>
1508 </v-layout> 1508 </v-layout>
1509 </v-flex> 1509 </v-flex>
1510 <v-flex xs12 sm6> 1510 <v-flex xs12 sm6>
1511 <v-layout> 1511 <v-layout>
1512 <v-flex xs4 class="pt-4 subheading"> 1512 <v-flex xs4 class="pt-4 subheading">
1513 <label class="right">Pincode:</label> 1513 <label class="right">Pincode:</label>
1514 </v-flex> 1514 </v-flex>
1515 <v-flex xs8 class="ml-3"> 1515 <v-flex xs8 class="ml-3">
1516 <v-text-field 1516 <v-text-field
1517 v-model="addStudents.pincode" 1517 v-model="addStudents.pincode"
1518 placeholder="fill your pincode" 1518 placeholder="fill your pincode"
1519 name="pincode" 1519 name="pincode"
1520 type="number" 1520 type="number"
1521 :rules="pincode" 1521 :rules="pincode"
1522 required 1522 required
1523 ></v-text-field> 1523 ></v-text-field>
1524 </v-flex> 1524 </v-flex>
1525 </v-layout> 1525 </v-layout>
1526 </v-flex> 1526 </v-flex>
1527 </v-layout> 1527 </v-layout>
1528 <v-layout wrap> 1528 <v-layout wrap>
1529 <v-flex xs12 sm6> 1529 <v-flex xs12 sm6>
1530 <v-layout> 1530 <v-layout>
1531 <v-flex xs4 class="pt-4 subheading"> 1531 <v-flex xs4 class="pt-4 subheading">
1532 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1532 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1533 <label 1533 <label
1534 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1534 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1535 >Mobile:</label> 1535 >Mobile:</label>
1536 </v-flex> 1536 </v-flex>
1537 <v-flex xs8 class="ml-3"> 1537 <v-flex xs8 class="ml-3">
1538 <v-text-field 1538 <v-text-field
1539 v-model="addStudents.mobile" 1539 v-model="addStudents.mobile"
1540 placeholder="fill your MobileNo" 1540 placeholder="fill your MobileNo"
1541 name="mobileNo" 1541 name="mobileNo"
1542 type="number" 1542 type="number"
1543 required 1543 required
1544 ></v-text-field> 1544 ></v-text-field>
1545 </v-flex> 1545 </v-flex>
1546 </v-layout> 1546 </v-layout>
1547 </v-flex> 1547 </v-flex>
1548 <v-flex xs12 sm6> 1548 <v-flex xs12 sm6>
1549 <v-layout> 1549 <v-layout>
1550 <v-flex xs4 class="pt-4 subheading"> 1550 <v-flex xs4 class="pt-4 subheading">
1551 <label 1551 <label
1552 class="right hidden-xs-only hidden-sm-only" 1552 class="right hidden-xs-only hidden-sm-only"
1553 >Select Country:</label> 1553 >Select Country:</label>
1554 <label 1554 <label
1555 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1555 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1556 >Country:</label> 1556 >Country:</label>
1557 </v-flex> 1557 </v-flex>
1558 <v-flex xs8 class="ml-3"> 1558 <v-flex xs8 class="ml-3">
1559 <v-autocomplete 1559 <v-autocomplete
1560 v-model="addStudents.country" 1560 v-model="addStudents.country"
1561 :rules="country" 1561 :rules="country"
1562 :items="countries" 1562 :items="countries"
1563 placeholder="Select Country Name" 1563 placeholder="Select Country Name"
1564 required 1564 required
1565 ></v-autocomplete> 1565 ></v-autocomplete>
1566 </v-flex> 1566 </v-flex>
1567 </v-layout> 1567 </v-layout>
1568 </v-flex> 1568 </v-flex>
1569 </v-layout> 1569 </v-layout>
1570 <v-layout wrap> 1570 <v-layout wrap>
1571 <v-flex xs12 sm6> 1571 <v-flex xs12 sm6>
1572 <v-layout> 1572 <v-layout>
1573 <v-flex xs4 class="pt-4 subheading"> 1573 <v-flex xs4 class="pt-4 subheading">
1574 <label class="right">Gender:</label> 1574 <label class="right">Gender:</label>
1575 </v-flex> 1575 </v-flex>
1576 <v-flex xs8 class="ml-3"> 1576 <v-flex xs8 class="ml-3">
1577 <v-select 1577 <v-select
1578 :items="gender" 1578 :items="gender"
1579 v-model="addStudents.gender" 1579 v-model="addStudents.gender"
1580 :rules="genderRules" 1580 :rules="genderRules"
1581 label="Select Gender" 1581 label="Select Gender"
1582 required 1582 required
1583 ></v-select> 1583 ></v-select>
1584 </v-flex> 1584 </v-flex>
1585 </v-layout> 1585 </v-layout>
1586 </v-flex> 1586 </v-flex>
1587 <v-flex xs12 sm6> 1587 <v-flex xs12 sm6>
1588 <v-layout> 1588 <v-layout>
1589 <v-flex xs4 class="pt-4 subheading"> 1589 <v-flex xs4 class="pt-4 subheading">
1590 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1590 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1591 <label 1591 <label
1592 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1592 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1593 >Blood:</label> 1593 >Blood:</label>
1594 </v-flex> 1594 </v-flex>
1595 <v-flex xs8 class="ml-3"> 1595 <v-flex xs8 class="ml-3">
1596 <v-text-field 1596 <v-text-field
1597 v-model="addStudents.bloodGroup" 1597 v-model="addStudents.bloodGroup"
1598 placeholder="Fill your Blood Group" 1598 placeholder="Fill your Blood Group"
1599 required 1599 required
1600 ></v-text-field> 1600 ></v-text-field>
1601 </v-flex> 1601 </v-flex>
1602 </v-layout> 1602 </v-layout>
1603 </v-flex> 1603 </v-flex>
1604 </v-layout> 1604 </v-layout>
1605 <v-layout wrap> 1605 <v-layout wrap>
1606 <!-- <v-flex xs12 sm6> 1606 <!-- <v-flex xs12 sm6>
1607 <v-layout> 1607 <v-layout>
1608 <v-flex xs4 class="pt-4 subheading"> 1608 <v-flex xs4 class="pt-4 subheading">
1609 <label class="right">Allergies:</label> 1609 <label class="right">Allergies:</label>
1610 </v-flex> 1610 </v-flex>
1611 <v-flex xs8 class="ml-3"> 1611 <v-flex xs8 class="ml-3">
1612 <v-text-field 1612 <v-text-field
1613 v-model="addStudents.allergies" 1613 v-model="addStudents.allergies"
1614 placeholder="Fill your Allergies" 1614 placeholder="Fill your Allergies"
1615 required 1615 required
1616 ></v-text-field> 1616 ></v-text-field>
1617 </v-flex> 1617 </v-flex>
1618 </v-layout> 1618 </v-layout>
1619 </v-flex>--> 1619 </v-flex>-->
1620 <v-flex xs12 sm6> 1620 <v-flex xs12 sm6>
1621 <v-layout> 1621 <v-layout>
1622 <v-flex xs4 class="pt-4 subheading"> 1622 <v-flex xs4 class="pt-4 subheading">
1623 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1623 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1624 <label 1624 <label
1625 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1625 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1626 >Roll No:</label> 1626 >Roll No:</label>
1627 </v-flex> 1627 </v-flex>
1628 <v-flex xs8 class="ml-3"> 1628 <v-flex xs8 class="ml-3">
1629 <v-text-field 1629 <v-text-field
1630 v-model="addStudents.rollNo" 1630 v-model="addStudents.rollNo"
1631 placeholder="Fill your Roll Number" 1631 placeholder="Fill your Roll Number"
1632 required 1632 required
1633 ></v-text-field> 1633 ></v-text-field>
1634 </v-flex> 1634 </v-flex>
1635 </v-layout> 1635 </v-layout>
1636 </v-flex> 1636 </v-flex>
1637 <v-flex xs12 sm6> 1637 <v-flex xs12 sm6>
1638 <v-layout> 1638 <v-layout>
1639 <v-flex xs4 class="pt-4 subheading"> 1639 <v-flex xs4 class="pt-4 subheading">
1640 <label 1640 <label
1641 class="right hidden-xs-only hidden-sm-only" 1641 class="right hidden-xs-only hidden-sm-only"
1642 >Medical Notes:</label> 1642 >Medical Notes:</label>
1643 <label 1643 <label
1644 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1644 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1645 >Medical:</label> 1645 >Medical:</label>
1646 </v-flex> 1646 </v-flex>
1647 <v-flex xs8 class="ml-3"> 1647 <v-flex xs8 class="ml-3">
1648 <v-text-field 1648 <v-text-field
1649 v-model="addStudents.medicalNotes" 1649 v-model="addStudents.medicalNotes"
1650 placeholder="Fill your Medical Notes" 1650 placeholder="Fill your Medical Notes"
1651 required 1651 required
1652 ></v-text-field> 1652 ></v-text-field>
1653 </v-flex> 1653 </v-flex>
1654 </v-layout> 1654 </v-layout>
1655 </v-flex> 1655 </v-flex>
1656 </v-layout> 1656 </v-layout>
1657 <v-layout wrap> 1657 <v-layout wrap>
1658 <v-flex xs12 sm6> 1658 <v-flex xs12 sm6>
1659 <v-layout> 1659 <v-layout>
1660 <v-flex xs4 class="pt-4 subheading"> 1660 <v-flex xs4 class="pt-4 subheading">
1661 <label class="right">Height:</label> 1661 <label class="right">Height:</label>
1662 </v-flex> 1662 </v-flex>
1663 <v-flex xs8 class="ml-3"> 1663 <v-flex xs8 class="ml-3">
1664 <v-text-field 1664 <v-text-field
1665 v-model="addStudents.height" 1665 v-model="addStudents.height"
1666 placeholder="Fill your Height" 1666 placeholder="Fill your Height"
1667 required 1667 required
1668 ></v-text-field> 1668 ></v-text-field>
1669 </v-flex> 1669 </v-flex>
1670 </v-layout> 1670 </v-layout>
1671 </v-flex> 1671 </v-flex>
1672 <v-flex xs12 sm6> 1672 <v-flex xs12 sm6>
1673 <v-layout> 1673 <v-layout>
1674 <v-flex xs4 class="pt-4 subheading"> 1674 <v-flex xs4 class="pt-4 subheading">
1675 <label class="right">Weight:</label> 1675 <label class="right">Weight:</label>
1676 </v-flex> 1676 </v-flex>
1677 <v-flex xs8 class="ml-3"> 1677 <v-flex xs8 class="ml-3">
1678 <v-text-field 1678 <v-text-field
1679 v-model="addStudents.weight" 1679 v-model="addStudents.weight"
1680 placeholder="Fill your Weight" 1680 placeholder="Fill your Weight"
1681 required 1681 required
1682 ></v-text-field> 1682 ></v-text-field>
1683 </v-flex> 1683 </v-flex>
1684 </v-layout> 1684 </v-layout>
1685 </v-flex> 1685 </v-flex>
1686 </v-layout> 1686 </v-layout>
1687 <v-layout wrap> 1687 <v-layout wrap>
1688 <v-flex xs12 sm6> 1688 <v-flex xs12 sm6>
1689 <v-layout> 1689 <v-layout>
1690 <v-flex xs4 class="pt-4 subheading"> 1690 <v-flex xs4 class="pt-4 subheading">
1691 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1691 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1692 <label 1692 <label
1693 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1693 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1694 >Uplaod :</label> 1694 >Uplaod :</label>
1695 </v-flex> 1695 </v-flex>
1696 <v-flex xs8 class="ml-3"> 1696 <v-flex xs8 class="ml-3">
1697 <v-text-field 1697 <v-text-field
1698 label="Select Image" 1698 label="Select Image"
1699 @click="pickFile" 1699 @click="pickFile"
1700 v-model="imageName" 1700 v-model="imageName"
1701 append-icon="attach_file" 1701 append-icon="attach_file"
1702 ></v-text-field> 1702 ></v-text-field>
1703 </v-flex> 1703 </v-flex>
1704 </v-layout> 1704 </v-layout>
1705 </v-flex> 1705 </v-flex>
1706 <v-flex xs12 sm6> 1706 <v-flex xs12 sm6>
1707 <v-layout> 1707 <v-layout>
1708 <v-flex xs4 class="pt-4 subheading"> 1708 <v-flex xs4 class="pt-4 subheading">
1709 <label 1709 <label
1710 class="right hidden-xs-only hidden-sm-only" 1710 class="right hidden-xs-only hidden-sm-only"
1711 >Academic Year:</label> 1711 >Academic Year:</label>
1712 <label 1712 <label
1713 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1713 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1714 >Year:</label> 1714 >Year:</label>
1715 </v-flex> 1715 </v-flex>
1716 <v-flex xs8 class="ml-3"> 1716 <v-flex xs8 class="ml-3">
1717 <v-text-field 1717 <v-text-field
1718 v-model="addStudents.establishmentYear" 1718 v-model="addStudents.establishmentYear"
1719 placeholder="fill your Academic Year" 1719 placeholder="fill your Academic Year"
1720 name="state" 1720 name="state"
1721 type="number" 1721 type="number"
1722 :rules="establishmentYearRules" 1722 :rules="establishmentYearRules"
1723 required 1723 required
1724 ></v-text-field> 1724 ></v-text-field>
1725 </v-flex> 1725 </v-flex>
1726 </v-layout> 1726 </v-layout>
1727 </v-flex> 1727 </v-flex>
1728 </v-layout> 1728 </v-layout>
1729 <v-layout wrap class="hidden-xs-only hidden-sm-only"> 1729 <v-layout wrap class="hidden-xs-only hidden-sm-only">
1730 <v-flex xs12 sm6> 1730 <v-flex xs12 sm6>
1731 <v-layout> 1731 <v-layout>
1732 <v-flex xs4 sm4 class="pt-4 subheading"> 1732 <v-flex xs4 sm4 class="pt-4 subheading">
1733 <label class="right pr-4">Present Address:</label> 1733 <label class="right">Present Address:</label>
1734 </v-flex> 1734 </v-flex>
1735 <v-flex xs8 sm8 class="ml-3"> 1735 <v-flex xs8 sm8 class="ml-3">
1736 <v-text-field 1736 <v-text-field
1737 name="input-4-3"
1738 v-model="addStudents.presentAddress" 1737 v-model="addStudents.presentAddress"
1739 :rules="presentAddress" 1738 :rules="presentAddress"
1740 placeholder="fill Your present Address" 1739 placeholder="fill Your present Address"
1741 required 1740 @keyup="copyData"
1742 ></v-text-field> 1741 ></v-text-field>
1743 </v-flex> 1742 </v-flex>
1744 </v-layout> 1743 </v-layout>
1745 </v-flex> 1744 </v-flex>
1746 <v-flex xs12 sm6> 1745 <v-flex xs12 sm6>
1747 <v-layout> 1746 <v-layout>
1748 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1747 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1749 <label class="right">Permanent Address:</label> 1748 <label class="right">Permanent Address:</label>
1750 </v-flex> 1749 </v-flex>
1751 <v-flex xs12 sm8 class="ml-3"> 1750 <v-flex xs12 sm8 class="ml-3">
1751 <v-switch
1752 v-model="addStudents.permanentAddress"
1753 label="Select Permanent Address"
1754 :value="addStudents.presentAddress"
1755 ></v-switch>
1756 </v-flex>
1757 </v-layout>
1758 </v-flex>
1759 </v-layout>
1760 <v-layout class="hidden-xs-only hidden-sm-only">
1761 <v-flex xs12 sm6>
1762 <v-layout>
1763 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1764 <label class="right">Permanent Address:</label>
1765 </v-flex>
1766 <v-flex xs12 sm8 class="ml-3">
1752 <v-text-field 1767 <v-text-field
1753 name="input-4-3"
1754 v-model="addStudents.permanentAddress" 1768 v-model="addStudents.permanentAddress"
1755 :rules="permanentAddress" 1769 :rules="permanentAddress"
1756 placeholder="fill Your Permanent Address" 1770 placeholder="fill Your Permanent Address"
1757 required
1758 ></v-text-field> 1771 ></v-text-field>
1759 </v-flex> 1772 </v-flex>
1760 </v-layout> 1773 </v-layout>
1761 </v-flex> 1774 </v-flex>
1762 </v-layout> 1775 </v-layout>
1763 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1776 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1764 <v-flex xs12 sm12> 1777 <v-flex xs12 sm12>
1765 <v-layout> 1778 <v-layout>
1766 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1779 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1767 <label class>Present Address :</label> 1780 <label class>Present Address:</label>
1768 </v-flex> 1781 </v-flex>
1769 </v-layout> 1782 </v-layout>
1770 <v-layout> 1783 <v-layout>
1771 <v-flex xs12 sm12> 1784 <v-flex xs12 sm12>
1772 <v-textarea 1785 <v-textarea
1773 name="input-4-3" 1786 name="input-4-3"
1774 v-model="addStudents.presentAddress" 1787 v-model="addStudents.presentAddress"
1775 :rules="presentAddress" 1788 :rules="presentAddress"
1776 placeholder="fill Your present Address" 1789 placeholder="fill Your present Address"
1777 required 1790 required
1778 ></v-textarea> 1791 ></v-textarea>
1779 </v-flex> 1792 </v-flex>
1780 </v-layout> 1793 </v-layout>
1781 </v-flex> 1794 </v-flex>
1782 <v-flex xs12 sm12> 1795 <v-flex xs12 sm12>
1783 <v-layout> 1796 <v-layout>
1784 <v-flex 1797 <v-flex
1785 xs12 1798 xs12
1786 sm12 1799 sm12
1787 class="pt-4 pr-4 subheading text-xs-center addressForm" 1800 class="pt-4 pr-4 subheading text-xs-center addressForm"
1788 > 1801 >
1789 <label>Permanent addr:</label> 1802 <label>Permanent Address:</label>
1790 </v-flex> 1803 </v-flex>
1791 </v-layout> 1804 </v-layout>
1792 <v-layout> 1805 <v-layout>
1793 <v-flex xs12 sm12> 1806 <v-flex xs12 sm12>
1794 <v-textarea 1807 <v-textarea
1795 name="input-4-3" 1808 name="input-4-3"
1796 v-model="addStudents.permanentAddress" 1809 v-model="addStudents.permanentAddress"
1797 :rules="permanentAddress" 1810 :rules="permanentAddress"
1798 placeholder="fill Your Permanent Address" 1811 placeholder="fill Your Permanent Address"
1799 required 1812 required
1800 ></v-textarea> 1813 ></v-textarea>
1801 </v-flex> 1814 </v-flex>
1802 </v-layout> 1815 </v-layout>
1803 </v-flex> 1816 </v-flex>
1804 </v-layout> 1817 </v-layout>
1805 <v-layout> 1818 <v-layout>
1806 <v-flex xs12 sm11 offset-sm1> 1819 <v-flex xs12 sm11 offset-sm1>
1807 <v-layout> 1820 <v-layout>
1808 <v-flex xs6> 1821 <v-flex xs6>
1809 <v-btn round dark @click="e2 = 1">Back</v-btn> 1822 <v-btn round dark @click="e2 = 1">Back</v-btn>
1810 </v-flex> 1823 </v-flex>
1811 <v-flex xs6> 1824 <v-flex xs6>
1812 <v-btn 1825 <v-btn
1813 @click="submit" 1826 @click="submit"
1814 round 1827 round
1815 dark 1828 dark
1816 :loading="loading" 1829 :loading="loading"
1817 class="right" 1830 class="right"
1818 >Add</v-btn> 1831 >Add</v-btn>
1819 </v-flex> 1832 </v-flex>
1820 </v-layout> 1833 </v-layout>
1821 </v-flex> 1834 </v-flex>
1822 </v-layout> 1835 </v-layout>
1823 </v-form> 1836 </v-form>
1824 </v-flex> 1837 </v-flex>
1825 </v-stepper-content> 1838 </v-stepper-content>
1826 </v-stepper-items> 1839 </v-stepper-items>
1827 </v-stepper> 1840 </v-stepper>
1828 </v-app> 1841 </v-app>
1829 </div> 1842 </div>
1830 </v-flex> 1843 </v-flex>
1831 </v-layout> 1844 </v-layout>
1832 </v-container> 1845 </v-container>
1833 </v-tab-item> 1846 </v-tab-item>
1834 </v-tabs> 1847 </v-tabs>
1835 <div class="loader" v-if="showLoader"> 1848 <div class="loader" v-if="showLoader">
1836 <v-progress-circular indeterminate color="white"></v-progress-circular> 1849 <v-progress-circular indeterminate color="white"></v-progress-circular>
1837 </div> 1850 </div>
1838 </div> 1851 </div>
1839 </template> 1852 </template>
1840 1853
1841 <script> 1854 <script>
1842 import http from "@/Services/http.js"; 1855 import http from "@/Services/http.js";
1843 import moment from "moment"; 1856 import moment from "moment";
1844 import countryList from "@/script/country.js"; 1857 import countryList from "@/script/country.js";
1845 import parent from "@/script/parents.js"; 1858 import parent from "@/script/parents.js";
1846 1859
1847 export default { 1860 export default {
1848 data: () => ({ 1861 data: () => ({
1849 e2: 0, 1862 e2: 0,
1850 showParent: true, 1863 showParent: true,
1851 showNext: false, 1864 showNext: false,
1852 snackbar: false, 1865 snackbar: false,
1853 y: "top", 1866 y: "top",
1854 x: "right", 1867 x: "right",
1855 mode: "", 1868 mode: "",
1856 timeout: 3000, 1869 timeout: 3000,
1857 text: "", 1870 text: "",
1858 showLoader: false, 1871 showLoader: false,
1859 loading: false, 1872 loading: false,
1860 date: null, 1873 date: null,
1861 search: "", 1874 search: "",
1862 menu: false, 1875 menu: false,
1863 menu1: false, 1876 menu1: false,
1864 dialog: false, 1877 dialog: false,
1865 dialog1: false, 1878 dialog1: false,
1866 valid: true, 1879 valid: true,
1867 isActive: true, 1880 isActive: true,
1868 newActive: false, 1881 newActive: false,
1869 addclass: [], 1882 addclass: [],
1870 addSection: [], 1883 addSection: [],
1871 gender: ["Male", "Female"], 1884 gender: ["Male", "Female"],
1872 pagination: { 1885 pagination: {
1873 rowsPerPage: 15 1886 rowsPerPage: 15
1874 }, 1887 },
1875 imageData: {}, 1888 imageData: {},
1876 imageName: "", 1889 imageName: "",
1877 imageUrl: "", 1890 imageUrl: "",
1878 imageFile: "", 1891 imageFile: "",
1879 nameRules: [v => !!v || " Full Name is required"], 1892 nameRules: [v => !!v || " Full Name is required"],
1880 dateRules: [v => !!v || " DOB is required"], 1893 dateRules: [v => !!v || " DOB is required"],
1881 cityRules: [v => !!v || " City Name is required"], 1894 cityRules: [v => !!v || " City Name is required"],
1882 pincode: [v => !!v || " Pincode is required"], 1895 pincode: [v => !!v || " Pincode is required"],
1883 country: [v => !!v || " Country Name is required"], 1896 country: [v => !!v || " Country Name is required"],
1884 permanentAddress: [v => !!v || " Permanent Address is required"], 1897 permanentAddress: [v => !!v || " Permanent Address is required"],
1885 presentAddress: [v => !!v || " Present Address is required"], 1898 presentAddress: [v => !!v || " Present Address is required"],
1886 stateRules: [v => !!v || "State Name is required"], 1899 stateRules: [v => !!v || "State Name is required"],
1887 classRules: [v => !!v || " Class Name is required"], 1900 classRules: [v => !!v || " Class Name is required"],
1888 sectionRules: [v => !!v || " Section Name is required"], 1901 sectionRules: [v => !!v || " Section Name is required"],
1889 genderRules: [v => !!v || " Select Gender is required"], 1902 genderRules: [v => !!v || " Select Gender is required"],
1890 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1903 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1891 establishmentYearRules: [v => !!v || " Academic Year is required"], 1904 establishmentYearRules: [v => !!v || " Academic Year is required"],
1892 errorMessages: "", 1905 errorMessages: "",
1893 countries: [], 1906 countries: [],
1894 headers: [ 1907 headers: [
1895 { 1908 {
1896 text: "Roll No.", 1909 text: "Roll No.",
1897 align: "center", 1910 align: "center",
1898 sortable: false, 1911 sortable: false,
1899 value: "rollNo" 1912 value: "rollNo"
1900 }, 1913 },
1901 { 1914 {
1902 text: "Profile Pic", 1915 text: "Profile Pic",
1903 value: "profilePicUrl", 1916 value: "profilePicUrl",
1904 sortable: false, 1917 sortable: false,
1905 align: "center" 1918 align: "center"
1906 }, 1919 },
1907 { text: "Name", value: "name", sortable: false, align: "center" }, 1920 { text: "Name", value: "name", sortable: false, align: "center" },
1908 { text: "Email", value: "email", sortable: false, align: "center" }, 1921 { text: "Email", value: "email", sortable: false, align: "center" },
1909 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1922 { text: "Dob", value: "dob", sortable: false, align: "center" },
1910 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1923 { text: "Gender", value: "gender", sortable: false, align: "center" },
1911 { 1924 {
1912 text: "Father Name", 1925 text: "Father Name",
1913 value: "fatherName", 1926 value: "fatherName",
1914 sortable: false, 1927 sortable: false,
1915 align: "center" 1928 align: "center"
1916 }, 1929 },
1917 { 1930 {
1918 text: "Mother Name", 1931 text: "Mother Name",
1919 value: "motherName", 1932 value: "motherName",
1920 sortable: false, 1933 sortable: false,
1921 align: "center" 1934 align: "center"
1922 }, 1935 },
1923 { 1936 {
1924 text: "Academic Year", 1937 text: "Academic Year",
1925 value: "establishmentYear", 1938 value: "establishmentYear",
1926 sortable: false, 1939 sortable: false,
1927 align: "center" 1940 align: "center"
1928 }, 1941 },
1929 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1942 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1930 { text: "Action", value: "", sortable: false, align: "center" } 1943 { text: "Action", value: "", sortable: false, align: "center" }
1931 ], 1944 ],
1932 desserts: [], 1945 desserts: [],
1933 parentId: "", 1946 parentId: "",
1934 editedIndex: -1, 1947 editedIndex: -1,
1935 parentData: {}, 1948 parentData: {},
1936 addStudents: { 1949 addStudents: {
1937 role: "STUDENT", 1950 role: "STUDENT",
1938 name: "", 1951 name: "",
1939 email: "", 1952 email: "",
1940 date: "", 1953 date: "",
1941 city: "", 1954 city: "",
1942 pincode: "", 1955 pincode: "",
1943 country: "", 1956 country: "",
1944 permanentAddress: "", 1957 permanentAddress: "",
1945 presentAddress: "", 1958 presentAddress: "",
1946 mobile: "", 1959 mobile: "",
1947 state: "", 1960 state: "",
1948 gender: "", 1961 gender: "",
1949 select: "", 1962 select: "",
1950 selectSection: "", 1963 selectSection: "",
1951 bloodGroup: "", 1964 bloodGroup: "",
1952 allergies: "", 1965 allergies: "",
1953 medicalNotes: "", 1966 medicalNotes: "",
1954 height: "", 1967 height: "",
1955 weight: "", 1968 weight: "",
1956 rollNo: "", 1969 rollNo: "",
1957 establishmentYear: new Date().getFullYear() 1970 establishmentYear: new Date().getFullYear()
1958 }, 1971 },
1959 selectStudents: { 1972 selectStudents: {
1960 select: "", 1973 select: "",
1961 selectSection: "" 1974 selectSection: ""
1962 }, 1975 },
1963 editedItem: { 1976 editedItem: {
1964 role: "STUDENT", 1977 role: "STUDENT",
1965 name: "", 1978 name: "",
1966 email: "", 1979 email: "",
1967 dob: "", 1980 dob: "",
1968 city: "", 1981 city: "",
1969 pincode: "", 1982 pincode: "",
1970 country: "", 1983 country: "",
1971 permanentAddress: "", 1984 permanentAddress: "",
1972 presentAddress: "", 1985 presentAddress: "",
1973 mobile: "", 1986 mobile: "",
1974 state: "", 1987 state: "",
1975 gender: "", 1988 gender: "",
1976 select: "", 1989 select: "",
1977 selectSection: "", 1990 selectSection: "",
1978 bloodGroup: "", 1991 bloodGroup: "",
1979 allergies: "", 1992 allergies: "",
1980 medicalNotes: "", 1993 medicalNotes: "",
1981 height: "", 1994 height: "",
1982 weight: "", 1995 weight: "",
1983 rollNo: "", 1996 rollNo: "",
1984 establishmentYear: new Date().getFullYear() 1997 establishmentYear: new Date().getFullYear()
1985 } 1998 }
1986 }), 1999 }),
1987 watch: { 2000 watch: {
1988 menu(val) { 2001 menu(val) {
1989 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2002 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1990 }, 2003 },
1991 menu1(val) { 2004 menu1(val) {
1992 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2005 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1993 } 2006 }
1994 }, 2007 },
1995 methods: { 2008 methods: {
1996 findStudents() { 2009 findStudents() {
1997 this.showLoader = true; 2010 this.showLoader = true;
1998 http() 2011 http()
1999 .get("/getStudentWithClass", { 2012 .get("/getStudentWithClass", {
2000 params: { 2013 params: {
2001 classId: this.selectStudents.select, 2014 classId: this.selectStudents.select,
2002 sectionId: this.selectStudents.selectSection 2015 sectionId: this.selectStudents.selectSection
2003 } 2016 }
2004 }) 2017 })
2005 .then(response => { 2018 .then(response => {
2006 this.desserts = response.data.data; 2019 this.desserts = response.data.data;
2007 this.showLoader = false; 2020 this.showLoader = false;
2008 }) 2021 })
2009 .catch(err => { 2022 .catch(err => {
2010 console.log("err====>", err); 2023 console.log("err====>", err);
2011 this.showLoader = false; 2024 this.showLoader = false;
2012 }); 2025 });
2013 }, 2026 },
2014 getSections(_id) { 2027 getSections(_id) {
2015 var token = this.$store.state.token; 2028 var token = this.$store.state.token;
2016 this.showLoader = true; 2029 this.showLoader = true;
2017 http() 2030 http()
2018 .get( 2031 .get(
2019 "/getSectionsList", 2032 "/getSectionsList",
2020 { params: { classId: _id } }, 2033 { params: { classId: _id } },
2021 { 2034 {
2022 headers: { Authorization: "Bearer " + token } 2035 headers: { Authorization: "Bearer " + token }
2023 } 2036 }
2024 ) 2037 )
2025 .then(response => { 2038 .then(response => {
2026 this.addSection = response.data.data; 2039 this.addSection = response.data.data;
2027 this.showLoader = false; 2040 this.showLoader = false;
2028 }) 2041 })
2029 .catch(err => { 2042 .catch(err => {
2030 this.showLoader = false; 2043 this.showLoader = false;
2031 // console.log("err====>", err); 2044 // console.log("err====>", err);
2032 // this.$router.replace({ path: '/' }); 2045 // this.$router.replace({ path: '/' });
2033 }); 2046 });
2034 }, 2047 },
2035 getSection(_id) { 2048 getSection(_id) {
2036 var token = this.$store.state.token; 2049 var token = this.$store.state.token;
2037 this.showLoader = true; 2050 this.showLoader = true;
2038 http() 2051 http()
2039 .get( 2052 .get(
2040 "/getSectionsList", 2053 "/getSectionsList",
2041 { params: { classId: _id } }, 2054 { params: { classId: _id } },
2042 { 2055 {
2043 headers: { Authorization: "Bearer " + token } 2056 headers: { Authorization: "Bearer " + token }
2044 } 2057 }
2045 ) 2058 )
2046 .then(response => { 2059 .then(response => {
2047 this.addSection = response.data.data; 2060 this.addSection = response.data.data;
2048 this.showLoader = false; 2061 this.showLoader = false;
2049 // console.log("getSectionsList=====>", this.addSection); 2062 // console.log("getSectionsList=====>", this.addSection);
2050 }) 2063 })
2051 .catch(err => { 2064 .catch(err => {
2052 this.showLoader = false; 2065 this.showLoader = false;
2053 // console.log("err====>", err); 2066 // console.log("err====>", err);
2054 // this.$router.replace({ path: '/' }); 2067 // this.$router.replace({ path: '/' });
2055 }); 2068 });
2056 }, 2069 },
2057 pickFile() { 2070 pickFile() {
2058 this.$refs.image.click(); 2071 this.$refs.image.click();
2059 }, 2072 },
2060 dates: function(date) { 2073 dates: function(date) {
2061 return moment(date).format("MMMM DD, YYYY"); 2074 return moment(date).format("MMMM DD, YYYY");
2062 }, 2075 },
2063 onFilePicked(e) { 2076 onFilePicked(e) {
2064 // console.log(e) 2077 // console.log(e)
2065 const files = e.target.files; 2078 const files = e.target.files;
2066 this.imageData.upload = e.target.files[0]; 2079 this.imageData.upload = e.target.files[0];
2067 if (files[0] !== undefined) { 2080 if (files[0] !== undefined) {
2068 this.imageName = files[0].name; 2081 this.imageName = files[0].name;
2069 if (this.imageName.lastIndexOf(".") <= 0) { 2082 if (this.imageName.lastIndexOf(".") <= 0) {
2070 return; 2083 return;
2071 } 2084 }
2072 const fr = new FileReader(); 2085 const fr = new FileReader();
2073 fr.readAsDataURL(files[0]); 2086 fr.readAsDataURL(files[0]);
2074 fr.addEventListener("load", () => { 2087 fr.addEventListener("load", () => {
2075 this.imageUrl = fr.result; 2088 this.imageUrl = fr.result;
2076 this.imageFile = files[0]; // this is an image file that can be sent to server... 2089 this.imageFile = files[0]; // this is an image file that can be sent to server...
2077 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 2090 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2078 }); 2091 });
2079 } else { 2092 } else {
2080 this.imageName = ""; 2093 this.imageName = "";
2081 this.imageFile = ""; 2094 this.imageFile = "";
2082 this.imageUrl = ""; 2095 this.imageUrl = "";
2083 } 2096 }
2084 }, 2097 },
2085 // getStudentList() { 2098 // getStudentList() {
2086 // this.showLoader = true; 2099 // this.showLoader = true;
2087 // var token = this.$store.state.token; 2100 // var token = this.$store.state.token;
2088 // http() 2101 // http()
2089 // .get("/getStudentsList", { 2102 // .get("/getStudentsList", {
2090 // headers: { Authorization: "Bearer " + token } 2103 // headers: { Authorization: "Bearer " + token }
2091 // }) 2104 // })
2092 // .then(response => { 2105 // .then(response => {
2093 // this.desserts = response.data.data; 2106 // this.desserts = response.data.data;
2094 // this.showLoader = false; 2107 // this.showLoader = false;
2095 // // console.log("getStudentList=====>",this.desserts) 2108 // // console.log("getStudentList=====>",this.desserts)
2096 // }) 2109 // })
2097 // .catch(err => { 2110 // .catch(err => {
2098 // // console.log("err====>", err); 2111 // // console.log("err====>", err);
2099 // this.showLoader = false; 2112 // this.showLoader = false;
2100 // this.$router.replace({ path: "/" }); 2113 // this.$router.replace({ path: "/" });
2101 // }); 2114 // });
2102 // }, 2115 // },
2103 editItem(item) { 2116 editItem(item) {
2104 this.editedIndex = this.desserts.indexOf(item); 2117 this.editedIndex = this.desserts.indexOf(item);
2105 this.editedItem = Object.assign({}, item); 2118 this.editedItem = Object.assign({}, item);
2106 this.editedItem.fatherName = item.parentId.fatherName; 2119 this.editedItem.fatherName = item.parentId.fatherName;
2107 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2120 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2108 this.editedItem.motherName = item.parentId.motherName; 2121 this.editedItem.motherName = item.parentId.motherName;
2109 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2122 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2110 this.editedItem.dob = 2123 this.editedItem.dob =
2111 this.editedItem.dob != undefined 2124 this.editedItem.dob != undefined
2112 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 2125 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2113 : (this.editedItem.dob = ""); 2126 : (this.editedItem.dob = "");
2114 this.dialog = true; 2127 this.dialog = true;
2115 }, 2128 },
2116 profile(item) { 2129 profile(item) {
2117 // console.log("item", item); 2130 // console.log("item", item);
2118 this.editedIndex = this.desserts.indexOf(item); 2131 this.editedIndex = this.desserts.indexOf(item);
2119 this.editedItem = Object.assign({}, item); 2132 this.editedItem = Object.assign({}, item);
2120 this.editedItem.fatherName = item.parentId.fatherName; 2133 this.editedItem.fatherName = item.parentId.fatherName;
2121 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2134 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2122 this.editedItem.motherName = item.parentId.motherName; 2135 this.editedItem.motherName = item.parentId.motherName;
2123 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2136 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2124 2137
2125 this.dialog1 = true; 2138 this.dialog1 = true;
2126 }, 2139 },
2127 deleteItem(item) { 2140 deleteItem(item) {
2128 let deleteStudent = { 2141 let deleteStudent = {
2129 studentId: item._id 2142 studentId: item._id
2130 }; 2143 };
2131 http() 2144 http()
2132 .delete( 2145 .delete(
2133 "/deleteStudent", 2146 "/deleteStudent",
2134 confirm("Are you sure you want to delete this?") && { 2147 confirm("Are you sure you want to delete this?") && {
2135 params: deleteStudent 2148 params: deleteStudent
2136 } 2149 }
2137 ) 2150 )
2138 .then(response => { 2151 .then(response => {
2139 // console.log("deleteUers",deleteStudent) 2152 // console.log("deleteUers",deleteStudent)
2140 this.snackbar = true; 2153 this.snackbar = true;
2141 this.text = "Successfully delete Existing Student"; 2154 this.text = "Successfully delete Existing Student";
2142 this.getStudentList(); 2155 this.getStudentList();
2143 }) 2156 })
2144 .catch(error => { 2157 .catch(error => {
2145 // console.log(error); 2158 // console.log(error);
2146 }); 2159 });
2147 }, 2160 },
2148 activeTab(type) { 2161 activeTab(type) {
2149 switch (type) { 2162 switch (type) {
2150 case "existing": 2163 case "existing":
2151 this.newActive = false; 2164 this.newActive = false;
2152 this.isActive = true; 2165 this.isActive = true;
2153 break; 2166 break;
2154 2167
2155 default: 2168 default:
2156 this.newActive = true; 2169 this.newActive = true;
2157 this.isActive = false; 2170 this.isActive = false;
2158 break; 2171 break;
2159 } 2172 }
2160 }, 2173 },
2161 close() { 2174 close() {
2162 this.dialog = false; 2175 this.dialog = false;
2163 setTimeout(() => { 2176 setTimeout(() => {
2164 this.editedItem = Object.assign({}, this.defaultItem); 2177 this.editedItem = Object.assign({}, this.defaultItem);
2165 this.editedIndex = -1; 2178 this.editedIndex = -1;
2166 }, 300); 2179 }, 300);
2167 }, 2180 },
2168 close1() { 2181 close1() {
2169 this.dialog1 = false; 2182 this.dialog1 = false;
2170 }, 2183 },
2184 copyData() {
2185 this.addStudents.permanentAddress = this.addStudents.presentAddress;
2186 },
2171 submit() { 2187 submit() {
2172 if (this.$refs.form.validate()) { 2188 if (this.$refs.form.validate()) {
2173 let addStudent = { 2189 let addStudent = {
2174 parentId: this.parentId, 2190 parentId: this.parentId,
2175 name: this.addStudents.name, 2191 name: this.addStudents.name,
2176 email: this.addStudents.email, 2192 email: this.addStudents.email,
2177 role: this.addStudents.role, 2193 role: this.addStudents.role,
2178 dob: this.addStudents.date, 2194 dob: this.addStudents.date,
2179 city: this.addStudents.city, 2195 city: this.addStudents.city,
2180 pincode: this.addStudents.pincode, 2196 pincode: this.addStudents.pincode,
2181 country: this.addStudents.country, 2197 country: this.addStudents.country,
2182 permanentAddress: this.addStudents.permanentAddress, 2198 permanentAddress: this.addStudents.permanentAddress,
2183 presentAddress: this.addStudents.presentAddress, 2199 presentAddress: this.addStudents.presentAddress,
2184 mobile: this.addStudents.mobile, 2200 mobile: this.addStudents.mobile,
2185 state: this.addStudents.state, 2201 state: this.addStudents.state,
2186 gender: this.addStudents.gender, 2202 gender: this.addStudents.gender,
2187 establishmentYear: this.addStudents.establishmentYear, 2203 establishmentYear: this.addStudents.establishmentYear,
2188 classId: this.addStudents.select, 2204 classId: this.addStudents.select,
2189 sectionId: this.addStudents.selectSection, 2205 sectionId: this.addStudents.selectSection,
2190 bloodGroup: this.addStudents.bloodGroup, 2206 bloodGroup: this.addStudents.bloodGroup,
2191 medicalNotes: this.addStudents.medicalNotes, 2207 medicalNotes: this.addStudents.medicalNotes,
2192 height: this.addStudents.height, 2208 height: this.addStudents.height,
2193 weight: this.addStudents.weight, 2209 weight: this.addStudents.weight,
2194 rollNo: this.addStudents.rollNo 2210 rollNo: this.addStudents.rollNo
2195 }; 2211 };
2196 if (this.imageUrl) { 2212 if (this.imageUrl) {
2197 var str = this.imageUrl; 2213 var str = this.imageUrl;
2198 const [baseUrl, imageUrl] = str.split(/,/); 2214 const [baseUrl, imageUrl] = str.split(/,/);
2199 addStudent.upload = imageUrl; 2215 addStudent.upload = imageUrl;
2200 } 2216 }
2201 this.loading = true; 2217 this.loading = true;
2202 http() 2218 http()
2203 .post("/createStudent", addStudent) 2219 .post("/createStudent", addStudent)
2204 .then(response => { 2220 .then(response => {
2205 // console.log(addStudent); 2221 // console.log(addStudent);
2206 this.snackbar = true; 2222 this.snackbar = true;
2207 this.text = "New Student added successfully"; 2223 this.text = "New Student added successfully";
2208 // this.getStudentList(); 2224 // this.getStudentList();
2209 this.clear(); 2225 this.clear();
2210 this.loading = false; 2226 this.loading = false;
2211 }) 2227 })
2212 .catch(error => { 2228 .catch(error => {
2213 // console.log(error); 2229 // console.log(error);
2214 this.snackbar = true; 2230 this.snackbar = true;
2215 this.text = error.response.data.message; 2231 this.text = error.response.data.message;
2216 this.loading = false; 2232 this.loading = false;
2217 }); 2233 });
2218 } 2234 }
2219 }, 2235 },
2220 clear() { 2236 clear() {
2221 this.$refs.form.reset(); 2237 this.$refs.form.reset();
2222 this.imageUrl = ""; 2238 this.imageUrl = "";
2223 }, 2239 },
2224 save() { 2240 save() {
2225 let editStudent = { 2241 let editStudent = {
2226 studentId: this.editedItem._id, 2242 studentId: this.editedItem._id,
2227 name: this.editedItem.name, 2243 name: this.editedItem.name,
2228 email: this.editedItem.email, 2244 email: this.editedItem.email,
2229 role: this.editedItem.role, 2245 role: this.editedItem.role,
2230 dob: this.editedItem.dob, 2246 dob: this.editedItem.dob,
2231 city: this.editedItem.city, 2247 city: this.editedItem.city,
2232 pincode: this.editedItem.pincode, 2248 pincode: this.editedItem.pincode,
2233 country: this.editedItem.country, 2249 country: this.editedItem.country,
2234 permanentAddress: this.editedItem.permanentAddress, 2250 permanentAddress: this.editedItem.permanentAddress,
2235 presentAddress: this.editedItem.presentAddress, 2251 presentAddress: this.editedItem.presentAddress,
2236 mobile: this.editedItem.mobile, 2252 mobile: this.editedItem.mobile,
2237 state: this.editedItem.state, 2253 state: this.editedItem.state,
2238 gender: this.editedItem.gender, 2254 gender: this.editedItem.gender,
2239 establishmentYear: this.editedItem.establishmentYear, 2255 establishmentYear: this.editedItem.establishmentYear,
2240 classId: this.editedItem.select, 2256 classId: this.editedItem.select,
2241 sectionId: this.editedItem.selectSection, 2257 sectionId: this.editedItem.selectSection,
2242 bloodGroup: this.editedItem.bloodGroup, 2258 bloodGroup: this.editedItem.bloodGroup,
2243 medicalNotes: this.editedItem.medicalNotes, 2259 medicalNotes: this.editedItem.medicalNotes,
2244 height: this.editedItem.height, 2260 height: this.editedItem.height,
2245 weight: this.editedItem.weight, 2261 weight: this.editedItem.weight,
2246 rollNo: this.editedItem.rollNo 2262 rollNo: this.editedItem.rollNo
2247 }; 2263 };
2248 if (this.imageUrl) { 2264 if (this.imageUrl) {
2249 var str = this.imageUrl; 2265 var str = this.imageUrl;
2250 const [baseUrl, imageUrl] = str.split(/,/); 2266 const [baseUrl, imageUrl] = str.split(/,/);
2251 editStudent.upload = imageUrl; 2267 editStudent.upload = imageUrl;
2252 } 2268 }
2253 http() 2269 http()
2254 .put("/updateStudent", editStudent) 2270 .put("/updateStudent", editStudent)
2255 .then(response => { 2271 .then(response => {
2256 this.snackbar = true; 2272 this.snackbar = true;
2257 this.text = response.data.message; 2273 this.text = response.data.message;
2258 this.imageUrl = ""; 2274 this.imageUrl = "";
2259 this.findStudents(); 2275 this.findStudents();
2260 this.close(); 2276 this.close();
2261 }) 2277 })
2262 .catch(error => { 2278 .catch(error => {
2263 // console.log(error); 2279 // console.log(error);
2264 this.snackbar = true; 2280 this.snackbar = true;
2265 this.text = error.response.data.statusText; 2281 this.text = error.response.data.statusText;
2266 }); 2282 });
2267 }, 2283 },
2268 submitParentDetails() { 2284 submitParentDetails() {
2269 if (this.$refs.parentForm.validate()) { 2285 if (this.$refs.parentForm.validate()) {
2270 let addparentDetails = { 2286 let addparentDetails = {
2271 email: this.parentData.email, 2287 email: this.parentData.email,
2272 fatherName: this.parentData.fatherName, 2288 fatherName: this.parentData.fatherName,
2273 fatherCellNo: this.parentData.fatherCellNo, 2289 fatherCellNo: this.parentData.fatherCellNo,
2274 motherName: this.parentData.motherName, 2290 motherName: this.parentData.motherName,
2275 motherCellNo: this.parentData.motherCellNo, 2291 motherCellNo: this.parentData.motherCellNo,
2276 role: "PARENT" 2292 role: "PARENT"
2277 }; 2293 };
2278 this.loading = true; 2294 this.loading = true;
2279 http() 2295 http()
2280 .post("/createParent", addparentDetails) 2296 .post("/createParent", addparentDetails)
2281 .then(response => { 2297 .then(response => {
2282 this.parentId = response.data.data.id; 2298 this.parentId = response.data.data.id;
2283 this.e2 = 2; 2299 this.e2 = 2;
2284 this.snackbar = true; 2300 this.snackbar = true;
2285 this.text = "successfully"; 2301 this.text = "successfully";
2286 // this.getStudentList(); 2302 // this.getStudentList();
2287 this.clear(); 2303 this.clear();
2288 this.loading = false; 2304 this.loading = false;
2289 }) 2305 })
2290 .catch(error => { 2306 .catch(error => {
2291 this.snackbar = true; 2307 this.snackbar = true;
2292 this.text = error.response.data.message; 2308 this.text = error.response.data.message;
2293 this.text = error.response.data.statusText; 2309 this.text = error.response.data.statusText;
2294 this.loading = false; 2310 this.loading = false;
2295 }); 2311 });
2296 } 2312 }
2297 }, 2313 },
2298 getParentDetails() { 2314 getParentDetails() {
2299 if (this.parentData.fatherCellNo.length > 9) { 2315 if (this.parentData.fatherCellNo.length > 9) {
2316 this.showLoader = true;
2300 http() 2317 http()
2301 .get("getParticularParent", { 2318 .get("getParticularParent", {
2302 params: { fatherCellNo: this.parentData.fatherCellNo }, 2319 params: { fatherCellNo: this.parentData.fatherCellNo },
2303 headers: { 2320 headers: {
2304 Authorization: "Bearer " + this.$store.state.token 2321 Authorization: "Bearer " + this.$store.state.token
2305 } 2322 }
2306 }) 2323 })
2307 .then(response => { 2324 .then(response => {
2308 this.showNext = true; 2325 this.showNext = true;
2309 this.showParent = false; 2326 this.showParent = false;
2310 this.parentData = response.data.data; 2327 this.parentData = response.data.data;
2311 this.parentId = response.data.data._id; 2328 this.parentId = response.data.data._id;
2329 this.showLoader = false;
2312 }) 2330 })
2313 .catch(error => { 2331 .catch(error => {
2314 console.log("err====>", error.response.data.message); 2332 console.log("err====>", error.response.data.message);
2333 this.text = error.response.data.message;
2334 this.snackbar = true;
2335 this.showLoader = false;
2315 }); 2336 });
2316 } 2337 }
2317 } 2338 }
2318 }, 2339 },
2319 mounted() { 2340 mounted() {
2320 const getCountryList = countryList(); 2341 const getCountryList = countryList();
2321 this.countries = getCountryList; 2342 this.countries = getCountryList;
2322 var token = this.$store.state.token; 2343 var token = this.$store.state.token;
2323 http() 2344 http()
2324 .get("/getClassesList", { 2345 .get("/getClassesList", {
2325 headers: { Authorization: "Bearer " + token } 2346 headers: { Authorization: "Bearer " + token }
2326 }) 2347 })
2327 .then(response => { 2348 .then(response => {
2328 this.addclass = response.data.data; 2349 this.addclass = response.data.data;
2329 }) 2350 })
2330 .catch(error => { 2351 .catch(error => {
2331 this.showLoader = false; 2352 this.showLoader = false;
2332 if (error.response.status === 401) { 2353 if (error.response.status === 401) {
2333 this.$router.replace({ path: "/" }); 2354 this.$router.replace({ path: "/" });
2334 this.$store.dispatch("setToken", null); 2355 this.$store.dispatch("setToken", null);
2335 this.$store.dispatch("Id", null); 2356 this.$store.dispatch("Id", null);
2336 this.$store.dispatch("Role", null); 2357 this.$store.dispatch("Role", null);
2337 } 2358 }
2338 }); 2359 });
2339 }, 2360 },
2340 created() { 2361 created() {
2341 this.$root.$on("app:search", search => { 2362 this.$root.$on("app:search", search => {
2342 this.search = search; 2363 this.search = search;
2343 }); 2364 });
2344 }, 2365 },
2345 beforeDestroy() { 2366 beforeDestroy() {
2346 // dont forget to remove the listener 2367 // dont forget to remove the listener
2347 this.$root.$off("app:search"); 2368 this.$root.$off("app:search");
2348 } 2369 }
2349 }; 2370 };
2350 </script> 2371 </script>
2351 <style scoped> 2372 <style scoped>
2352 .active { 2373 .active {
2353 background-color: gray; 2374 background-color: gray;
2354 color: white !important; 2375 color: white !important;
2355 } 2376 }
2356 .activebtn { 2377 .activebtn {
src/pages/Teachers/teachers.vue
Diff comments   View file @d9bb52b
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 Teachers</v-tab> 10 >Existing Teachers</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 Teachers</v-tab> 18 >Add New Teachers</v-tab>
19 <!-- ****** EDIT TEACHERS DETAILS ****** --> 19 <!-- ****** EDIT TEACHERS DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="1400px" scrollable> 29 <v-dialog v-model="dialog" max-width="1400px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 740px;"> 36 <v-card-text style="height: 740px;">
37 <v-layout> 37 <v-layout>
38 <v-flex 38 <v-flex
39 xs12 39 xs12
40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 40 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
41 > 41 >
42 <v-avatar size="160px"> 42 <v-avatar size="160px">
43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 43 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
44 <img 44 <img
45 :src="editedItem.profilePicUrl" 45 :src="editedItem.profilePicUrl"
46 v-else-if="editedItem.profilePicUrl && !imageUrl" 46 v-else-if="editedItem.profilePicUrl && !imageUrl"
47 /> 47 />
48 <img 48 <img
49 v-if="imageUrl" 49 v-if="imageUrl"
50 :src="imageUrl" 50 :src="imageUrl"
51 height="150" 51 height="150"
52 style="border-radius:50%; width:200px" 52 style="border-radius:50%; width:200px"
53 /> 53 />
54 </v-avatar> 54 </v-avatar>
55 <input 55 <input
56 type="file" 56 type="file"
57 style="display:none" 57 style="display:none"
58 ref="image" 58 ref="image"
59 accept="image/*" 59 accept="image/*"
60 @change="onFilePicked" 60 @change="onFilePicked"
61 /> 61 />
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout wrap> 64 <v-layout wrap>
65 <v-flex xs12 sm6> 65 <v-flex xs12 sm6>
66 <v-layout> 66 <v-layout>
67 <v-flex xs4 sm4 class="pt-4 subheading"> 67 <v-flex xs4 sm4 class="pt-4 subheading">
68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 68 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 69 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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.name" 73 v-model="editedItem.name"
74 placeholder="fill your full Name" 74 placeholder="fill your full Name"
75 type="text" 75 type="text"
76 required 76 required
77 ></v-text-field> 77 ></v-text-field>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm6> 81 <v-flex xs12 sm6>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 sm4 class="pt-4 subheading"> 83 <v-flex xs4 sm4 class="pt-4 subheading">
84 <label class="right">Email ID:</label> 84 <label class="right">Email ID:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs8 sm6 class="ml-3"> 86 <v-flex xs8 sm6 class="ml-3">
87 <v-text-field 87 <v-text-field
88 placeholder="fill your email" 88 placeholder="fill your email"
89 v-model="editedItem.email" 89 v-model="editedItem.email"
90 type="text" 90 type="text"
91 required 91 required
92 ></v-text-field> 92 ></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 <v-layout wrap> 97 <v-layout wrap>
98 <v-flex xs12 sm6> 98 <v-flex xs12 sm6>
99 <v-layout> 99 <v-layout>
100 <v-flex xs4 sm4 class="pt-4 subheading"> 100 <v-flex xs4 sm4 class="pt-4 subheading">
101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 101 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 102 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
103 </v-flex> 103 </v-flex>
104 <v-flex xs8 sm6 class="ml-3"> 104 <v-flex xs8 sm6 class="ml-3">
105 <v-menu 105 <v-menu
106 ref="menu" 106 ref="menu"
107 :close-on-content-click="false" 107 :close-on-content-click="false"
108 v-model="menu2" 108 v-model="menu2"
109 :nudge-right="40" 109 :nudge-right="40"
110 lazy 110 lazy
111 transition="scale-transition" 111 transition="scale-transition"
112 offset-y 112 offset-y
113 full-width 113 full-width
114 min-width="290px" 114 min-width="290px"
115 > 115 >
116 <v-text-field 116 <v-text-field
117 slot="activator" 117 slot="activator"
118 v-model="editedItem.dob" 118 v-model="editedItem.dob"
119 placeholder="Select date" 119 placeholder="Select date"
120 ></v-text-field> 120 ></v-text-field>
121 <v-date-picker 121 <v-date-picker
122 ref="picker" 122 ref="picker"
123 v-model="editedItem.dob" 123 v-model="editedItem.dob"
124 :max="new Date().toISOString().substr(0, 10)" 124 :max="new Date().toISOString().substr(0, 10)"
125 min="1950-01-01" 125 min="1950-01-01"
126 @input="menu2 = false" 126 @input="menu2 = false"
127 ></v-date-picker> 127 ></v-date-picker>
128 </v-menu> 128 </v-menu>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 </v-flex> 131 </v-flex>
132 <v-flex xs12 sm6> 132 <v-flex xs12 sm6>
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">City:</label> 135 <label class="right">City:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 sm6 class="ml-3"> 137 <v-flex xs8 sm6 class="ml-3">
138 <v-text-field 138 <v-text-field
139 v-model="editedItem.city" 139 v-model="editedItem.city"
140 placeholder="fill your City Name" 140 placeholder="fill your City Name"
141 type="text" 141 type="text"
142 required 142 required
143 ></v-text-field> 143 ></v-text-field>
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 xs4 class="pt-4 subheading"> 151 <v-flex xs4 class="pt-4 subheading">
152 <label class="right">State:</label> 152 <label class="right">State:</label>
153 </v-flex> 153 </v-flex>
154 <v-flex xs8 sm6 class="ml-3"> 154 <v-flex xs8 sm6 class="ml-3">
155 <v-text-field 155 <v-text-field
156 v-model="editedItem.state" 156 v-model="editedItem.state"
157 placeholder="fill your State Name" 157 placeholder="fill your State Name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">PinCode:</label> 167 <label class="right">PinCode:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 sm6 class="ml-3"> 169 <v-flex xs8 sm6 class="ml-3">
170 <v-text-field 170 <v-text-field
171 v-model="editedItem.pincode" 171 v-model="editedItem.pincode"
172 placeholder="fill your pincode" 172 placeholder="fill your pincode"
173 type="number" 173 type="number"
174 required 174 required
175 ></v-text-field> 175 ></v-text-field>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout wrap> 180 <v-layout wrap>
181 <v-flex xs12 sm6> 181 <v-flex xs12 sm6>
182 <v-layout> 182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading"> 183 <v-flex xs4 class="pt-4 subheading">
184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 184 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 sm6 class="ml-3"> 187 <v-flex xs8 sm6 class="ml-3">
188 <v-text-field 188 <v-text-field
189 v-model="editedItem.mobileNo" 189 v-model="editedItem.mobileNo"
190 placeholder="fill your MobileNo" 190 placeholder="fill your MobileNo"
191 type="number" 191 type="number"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 <v-flex xs12 sm6> 197 <v-flex xs12 sm6>
198 <v-layout> 198 <v-layout>
199 <v-flex xs4 class="pt-4 subheading"> 199 <v-flex xs4 class="pt-4 subheading">
200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 200 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 201 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs8 sm6 class="ml-3"> 203 <v-flex xs8 sm6 class="ml-3">
204 <v-autocomplete 204 <v-autocomplete
205 v-model="editedItem.country" 205 v-model="editedItem.country"
206 :items="countries" 206 :items="countries"
207 placeholder="Select Country Name" 207 placeholder="Select Country Name"
208 required 208 required
209 ></v-autocomplete> 209 ></v-autocomplete>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout wrap> 214 <v-layout wrap>
215 <v-flex xs12 sm6> 215 <v-flex xs12 sm6>
216 <v-layout> 216 <v-layout>
217 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
218 <label class="right">Join Date:</label> 218 <label class="right">Join Date:</label>
219 </v-flex> 219 </v-flex>
220 <v-flex xs8 sm6 class="ml-3"> 220 <v-flex xs8 sm6 class="ml-3">
221 <v-menu 221 <v-menu
222 ref="menu" 222 ref="menu"
223 :close-on-content-click="false" 223 :close-on-content-click="false"
224 v-model="menu3" 224 v-model="menu3"
225 :nudge-right="40" 225 :nudge-right="40"
226 lazy 226 lazy
227 transition="scale-transition" 227 transition="scale-transition"
228 offset-y 228 offset-y
229 full-width 229 full-width
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 v-model="editedItem.joinDate" 234 v-model="editedItem.joinDate"
235 placeholder="Select date" 235 placeholder="Select date"
236 ></v-text-field> 236 ></v-text-field>
237 <v-date-picker 237 <v-date-picker
238 ref="picker" 238 ref="picker"
239 v-model="editedItem.joinDate" 239 v-model="editedItem.joinDate"
240 :max="new Date().toISOString().substr(0, 10)" 240 :max="new Date().toISOString().substr(0, 10)"
241 min="1950-01-01" 241 min="1950-01-01"
242 @input="menu3 = false" 242 @input="menu3 = false"
243 ></v-date-picker> 243 ></v-date-picker>
244 </v-menu> 244 </v-menu>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 <v-flex xs12 sm6> 248 <v-flex xs12 sm6>
249 <v-layout> 249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading"> 250 <v-flex xs4 class="pt-4 subheading">
251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 251 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 252 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 sm6 class="ml-3"> 254 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field 255 <v-text-field
256 label="Select Image" 256 label="Select Image"
257 @click="pickFile" 257 @click="pickFile"
258 v-model="imageName" 258 v-model="imageName"
259 append-icon="attach_file" 259 append-icon="attach_file"
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 265 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
266 <v-flex xs12 sm6> 266 <v-flex xs12 sm6>
267 <v-layout> 267 <v-layout>
268 <v-flex xs4 sm4 class="pt-4 subheading"> 268 <v-flex xs4 sm4 class="pt-4 subheading">
269 <label class="right">Present Address:</label> 269 <label class="right">Present Address:</label>
270 </v-flex> 270 </v-flex>
271 <v-flex xs8 sm6 class="ml-3"> 271 <v-flex xs8 sm6 class="ml-3">
272 <v-text-field 272 <v-text-field
273 name="input-4-3" 273 name="input-4-3"
274 v-model="editedItem.presentAddress" 274 v-model="editedItem.presentAddress"
275 placeholder="fill Your present Address" 275 placeholder="fill Your present Address"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm6> 281 <v-flex xs12 sm6>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 sm4 class="pt-4 subheading"> 283 <v-flex xs4 sm4 class="pt-4 subheading">
284 <label class="right">Permanent Address:</label> 284 <label class="right">Permanent Address:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs12 sm6 class="ml-3"> 286 <v-flex xs12 sm6 class="ml-3">
287 <v-text-field 287 <v-text-field
288 name="input-4-3" 288 name="input-4-3"
289 v-model="editedItem.permanentAddress" 289 v-model="editedItem.permanentAddress"
290 placeholder="fill Your Permanent Address" 290 placeholder="fill Your Permanent Address"
291 required 291 required
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 class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 297 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 300 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
301 <label class>Present Address:</label> 301 <label class>Present Address:</label>
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-textarea 306 <v-textarea
307 name="input-4-3" 307 name="input-4-3"
308 v-model="editedItem.presentAddress" 308 v-model="editedItem.presentAddress"
309 placeholder="fill Your present Address" 309 placeholder="fill Your present Address"
310 required 310 required
311 ></v-textarea> 311 ></v-textarea>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm12> 315 <v-flex xs12 sm12>
316 <v-layout> 316 <v-layout>
317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 317 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
318 <label>Permanent Address:</label> 318 <label>Permanent Address:</label>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 <v-layout> 321 <v-layout>
322 <v-flex xs12 sm12> 322 <v-flex xs12 sm12>
323 <v-textarea 323 <v-textarea
324 name="input-4-3" 324 name="input-4-3"
325 v-model="editedItem.permanentAddress" 325 v-model="editedItem.permanentAddress"
326 placeholder="fill Your Permanent Address" 326 placeholder="fill Your Permanent Address"
327 required 327 required
328 ></v-textarea> 328 ></v-textarea>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <v-layout> 333 <v-layout>
334 <v-flex xs12 sm10 offset-sm1> 334 <v-flex xs12 sm10 offset-sm1>
335 <v-layout> 335 <v-layout>
336 <v-flex xs6> 336 <v-flex xs6>
337 <v-btn round dark @click.native="close">Cancel</v-btn> 337 <v-btn round dark @click.native="close">Cancel</v-btn>
338 </v-flex> 338 </v-flex>
339 <v-flex xs6> 339 <v-flex xs6>
340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 340 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 </v-card-text> 345 </v-card-text>
346 </v-card> 346 </v-card>
347 </v-dialog> 347 </v-dialog>
348 348
349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 349 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
350 350
351 <v-dialog v-model="dialog1" max-width="600px" scrollable> 351 <v-dialog v-model="dialog1" max-width="600px" scrollable>
352 <v-card> 352 <v-card>
353 <v-toolbar color="grey lighten-2" flat> 353 <v-toolbar color="grey lighten-2" flat>
354 <v-spacer></v-spacer> 354 <v-spacer></v-spacer>
355 <v-toolbar-title> 355 <v-toolbar-title>
356 <h3>Teacher Profile</h3> 356 <h3>Teacher Profile</h3>
357 </v-toolbar-title> 357 </v-toolbar-title>
358 <v-spacer></v-spacer> 358 <v-spacer></v-spacer>
359 <v-icon @click="close1">close</v-icon> 359 <v-icon @click="close1">close</v-icon>
360 </v-toolbar> 360 </v-toolbar>
361 <v-card-text style="height: 700px;"> 361 <v-card-text style="height: 700px;">
362 <v-container grid-list-md> 362 <v-container grid-list-md>
363 <v-layout wrap> 363 <v-layout wrap>
364 <v-flex> 364 <v-flex>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="160px"> 366 <v-avatar size="160px">
367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 367 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 368 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
369 </v-avatar> 369 </v-avatar>
370 </v-flex> 370 </v-flex>
371 <v-layout> 371 <v-layout>
372 <v-flex xs5 sm6> 372 <v-flex xs5 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>Full Name:</b> 374 <b>Full Name:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.name }}</h5> 378 <h5 class="my-1">{{ editedItem.name }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs5 sm6> 382 <v-flex xs5 sm6>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Email:</b> 384 <b>Email:</b>
385 </h5> 385 </h5>
386 </v-flex> 386 </v-flex>
387 <v-flex sm6 xs8> 387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.email }}</h5> 388 <h5 class="my-1">{{ editedItem.email }}</h5>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout> 391 <v-layout>
392 <v-flex xs5 sm6> 392 <v-flex xs5 sm6>
393 <h5 class="right my-1"> 393 <h5 class="right my-1">
394 <b>City:</b> 394 <b>City:</b>
395 </h5> 395 </h5>
396 </v-flex> 396 </v-flex>
397 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.city }}</h5> 398 <h5 class="my-1">{{ editedItem.city }}</h5>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
403 <h5 class="right my-1"> 403 <h5 class="right my-1">
404 <b>State:</b> 404 <b>State:</b>
405 </h5> 405 </h5>
406 </v-flex> 406 </v-flex>
407 <v-flex sm6 xs8> 407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.state }}</h5> 408 <h5 class="my-1">{{ editedItem.state }}</h5>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs5 sm6> 412 <v-flex xs5 sm6>
413 <h5 class="right my-1"> 413 <h5 class="right my-1">
414 <b>Country:</b> 414 <b>Country:</b>
415 </h5> 415 </h5>
416 </v-flex> 416 </v-flex>
417 <v-flex sm6 xs8> 417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.country }}</h5> 418 <h5 class="my-1">{{ editedItem.country }}</h5>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 <v-layout> 421 <v-layout>
422 <v-flex xs5 sm6> 422 <v-flex xs5 sm6>
423 <h5 class="right my-1"> 423 <h5 class="right my-1">
424 <b>Pincode:</b> 424 <b>Pincode:</b>
425 </h5> 425 </h5>
426 </v-flex> 426 </v-flex>
427 <v-flex sm6 xs8> 427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ editedItem.pincode }}</h5> 428 <h5 class="my-1">{{ editedItem.pincode }}</h5>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 sm6> 432 <v-flex xs5 sm6>
433 <h5 class="right my-1"> 433 <h5 class="right my-1">
434 <b>Mobile No:</b> 434 <b>Mobile No:</b>
435 </h5> 435 </h5>
436 </v-flex> 436 </v-flex>
437 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 438 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-layout> 441 <v-layout>
442 <v-flex xs5 sm6> 442 <v-flex xs5 sm6>
443 <h5 class="right my-1"> 443 <h5 class="right my-1">
444 <b>Join Date:</b> 444 <b>Join Date:</b>
445 </h5> 445 </h5>
446 </v-flex> 446 </v-flex>
447 <v-flex sm6 xs8> 447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 448 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 <v-layout> 451 <v-layout>
452 <v-flex xs5 sm6> 452 <v-flex xs5 sm6>
453 <h5 class="right my-1"> 453 <h5 class="right my-1">
454 <b>D.O.B :</b> 454 <b>D.O.B :</b>
455 </h5> 455 </h5>
456 </v-flex> 456 </v-flex>
457 <v-flex sm6 xs8> 457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 458 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 <v-layout> 461 <v-layout>
462 <v-flex xs6 sm6> 462 <v-flex xs6 sm6>
463 <h5 class="right my-1"> 463 <h5 class="right my-1">
464 <b>Permanent Address:</b> 464 <b>Permanent Address:</b>
465 </h5> 465 </h5>
466 </v-flex> 466 </v-flex>
467 <v-flex sm6 xs8> 467 <v-flex sm6 xs8>
468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 468 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 <v-layout> 471 <v-layout>
472 <v-flex xs6 sm6> 472 <v-flex xs6 sm6>
473 <h5 class="right my-1"> 473 <h5 class="right my-1">
474 <b>present Address:</b> 474 <b>present Address:</b>
475 </h5> 475 </h5>
476 </v-flex> 476 </v-flex>
477 <v-flex sm6 xs8> 477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 478 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 </v-flex> 481 </v-flex>
482 </v-layout> 482 </v-layout>
483 </v-container> 483 </v-container>
484 </v-card-text> 484 </v-card-text>
485 </v-card> 485 </v-card>
486 </v-dialog> 486 </v-dialog>
487 <v-snackbar 487 <v-snackbar
488 :timeout="timeout" 488 :timeout="timeout"
489 :top="y === 'top'" 489 :top="y === 'top'"
490 :right="x === 'right'" 490 :right="x === 'right'"
491 :vertical="mode === 'vertical'" 491 :vertical="mode === 'vertical'"
492 v-model="snackbar" 492 v-model="snackbar"
493 color="success" 493 color="success"
494 >{{ text }}</v-snackbar> 494 >{{ text }}</v-snackbar>
495 495
496 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 496 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
497 497
498 <v-data-table 498 <v-data-table
499 :headers="headers" 499 :headers="headers"
500 :items="desserts" 500 :items="desserts"
501 :pagination.sync="pagination" 501 :pagination.sync="pagination"
502 :search="search" 502 :search="search"
503 > 503 >
504 <template slot="items" slot-scope="props"> 504 <template slot="items" slot-scope="props">
505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 505 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
506 <td id="td" class="text-xs-center"> 506 <td id="td" class="text-xs-center">
507 <v-avatar> 507 <v-avatar>
508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 508 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 509 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
510 </v-avatar> 510 </v-avatar>
511 </td> 511 </td>
512 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 512 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
513 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 513 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 514 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td> 515 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 516 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
517 <td class="text-xs-center"> 517 <td class="text-xs-center">
518 <span> 518 <span>
519 <v-tooltip top> 519 <v-tooltip top>
520 <img 520 <img
521 slot="activator" 521 slot="activator"
522 style="cursor:pointer; width:25px; height:18px; " 522 style="cursor:pointer; width:25px; height:18px; "
523 class="mr5" 523 class="mr5"
524 @click="profile(props.item)" 524 @click="profile(props.item)"
525 src="/static/icon/eye1.png" 525 src="/static/icon/eye1.png"
526 /> 526 />
527 <span>View</span> 527 <span>View</span>
528 </v-tooltip> 528 </v-tooltip>
529 <v-tooltip top> 529 <v-tooltip top>
530 <img 530 <img
531 slot="activator" 531 slot="activator"
532 style="cursor:pointer; width:20px; height:18px; " 532 style="cursor:pointer; width:20px; height:18px; "
533 class="mr5" 533 class="mr5"
534 @click="editItem(props.item)" 534 @click="editItem(props.item)"
535 src="/static/icon/edit1.png" 535 src="/static/icon/edit1.png"
536 /> 536 />
537 <span>Edit</span> 537 <span>Edit</span>
538 </v-tooltip> 538 </v-tooltip>
539 <v-tooltip top> 539 <v-tooltip top>
540 <img 540 <img
541 slot="activator" 541 slot="activator"
542 style="cursor:pointer; width:20px; height:20px; " 542 style="cursor:pointer; width:20px; height:20px; "
543 class="mr5" 543 class="mr5"
544 @click="deleteItem(props.item)" 544 @click="deleteItem(props.item)"
545 src="/static/icon/delete1.png" 545 src="/static/icon/delete1.png"
546 /> 546 />
547 <span>Delete</span> 547 <span>Delete</span>
548 </v-tooltip> 548 </v-tooltip>
549 </span> 549 </span>
550 </td> 550 </td>
551 </template> 551 </template>
552 <v-alert 552 <v-alert
553 slot="no-results" 553 slot="no-results"
554 :value="true" 554 :value="true"
555 color="error" 555 color="error"
556 icon="warning" 556 icon="warning"
557 >Your search for "{{ search }}" found no results.</v-alert> 557 >Your search for "{{ search }}" found no results.</v-alert>
558 </v-data-table> 558 </v-data-table>
559 </v-tab-item> 559 </v-tab-item>
560 560
561 <!-- ****** Add Teachers Data****** --> 561 <!-- ****** Add Teachers Data****** -->
562 <v-tab-item> 562 <v-tab-item>
563 <v-container fluid> 563 <v-container fluid>
564 <v-snackbar 564 <v-snackbar
565 :timeout="timeout" 565 :timeout="timeout"
566 :top="y === 'top'" 566 :top="y === 'top'"
567 :right="x === 'right'" 567 :right="x === 'right'"
568 :vertical="mode === 'vertical'" 568 :vertical="mode === 'vertical'"
569 v-model="snackbar" 569 v-model="snackbar"
570 color="success" 570 color="success"
571 >{{ text }}</v-snackbar> 571 >{{ text }}</v-snackbar>
572 <v-flex xs12 sm12 class="my-4"> 572 <v-flex xs12 sm12 class="my-4">
573 <v-card flat> 573 <v-card flat>
574 <v-form ref="form" v-model="valid" lazy-validation> 574 <v-form ref="form" v-model="valid" lazy-validation>
575 <v-container fluid> 575 <v-container fluid>
576 <v-layout> 576 <v-layout>
577 <v-flex 577 <v-flex
578 xs12 578 xs12
579 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 579 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
580 > 580 >
581 <v-avatar size="100px"> 581 <v-avatar size="100px">
582 <img src="/static/icon/user.png" v-if="!imageUrl" /> 582 <img src="/static/icon/user.png" v-if="!imageUrl" />
583 </v-avatar> 583 </v-avatar>
584 <img 584 <img
585 :src="imageUrl" 585 :src="imageUrl"
586 height="150" 586 height="150"
587 v-if="imageUrl" 587 v-if="imageUrl"
588 style="border-radius:50%; width:200px" 588 style="border-radius:50%; width:200px"
589 /> 589 />
590 </v-flex> 590 </v-flex>
591 </v-layout> 591 </v-layout>
592 <v-layout> 592 <v-layout>
593 <v-flex xs12 sm6> 593 <v-flex xs12 sm6>
594 <v-layout> 594 <v-layout>
595 <v-flex xs4 class="pt-4 subheading"> 595 <v-flex xs4 class="pt-4 subheading">
596 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> 596 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
597 <label 597 <label
598 class="right hidden-lg-only hidden-xl-only hidden-md-only" 598 class="right hidden-lg-only hidden-xl-only hidden-md-only"
599 >Full Name</label> 599 >Full Name</label>
600 </v-flex> 600 </v-flex>
601 <v-flex xs8 class="ml-3"> 601 <v-flex xs8 class="ml-3">
602 <v-text-field 602 <v-text-field
603 v-model="addTeachers.name" 603 v-model="addTeachers.name"
604 placeholder="fill your full Name" 604 placeholder="fill your full Name"
605 name="name" 605 name="name"
606 type="text" 606 type="text"
607 :rules="nameRules" 607 :rules="nameRules"
608 required 608 required
609 ></v-text-field> 609 ></v-text-field>
610 </v-flex> 610 </v-flex>
611 </v-layout> 611 </v-layout>
612 </v-flex> 612 </v-flex>
613 <v-flex xs12 sm6> 613 <v-flex xs12 sm6>
614 <v-layout> 614 <v-layout>
615 <v-flex xs4 class="pt-4 subheading"> 615 <v-flex xs4 class="pt-4 subheading">
616 <label class="right">Email ID:</label> 616 <label class="right">Email ID:</label>
617 </v-flex> 617 </v-flex>
618 <v-flex xs8 class="ml-3"> 618 <v-flex xs8 class="ml-3">
619 <v-text-field 619 <v-text-field
620 placeholder="fill your email" 620 placeholder="fill your email"
621 v-model="addTeachers.email" 621 v-model="addTeachers.email"
622 type="text" 622 type="text"
623 name="email" 623 name="email"
624 required 624 required
625 ></v-text-field> 625 ></v-text-field>
626 </v-flex> 626 </v-flex>
627 </v-layout> 627 </v-layout>
628 </v-flex> 628 </v-flex>
629 </v-layout> 629 </v-layout>
630 <v-layout> 630 <v-layout>
631 <v-flex xs12 sm6> 631 <v-flex xs12 sm6>
632 <v-layout> 632 <v-layout>
633 <v-flex xs4 sm4 class="pt-4 subheading"> 633 <v-flex xs4 sm4 class="pt-4 subheading">
634 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 634 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
635 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 635 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
636 </v-flex> 636 </v-flex>
637 <v-flex xs8 class="ml-3"> 637 <v-flex xs8 class="ml-3">
638 <v-menu 638 <v-menu
639 ref="menu" 639 ref="menu"
640 :close-on-content-click="false" 640 :close-on-content-click="false"
641 v-model="menu" 641 v-model="menu"
642 :nudge-right="40" 642 :nudge-right="40"
643 lazy 643 lazy
644 transition="scale-transition" 644 transition="scale-transition"
645 offset-y 645 offset-y
646 full-width 646 full-width
647 min-width="290px" 647 min-width="290px"
648 > 648 >
649 <v-text-field 649 <v-text-field
650 slot="activator" 650 slot="activator"
651 :rules="dateRules" 651 :rules="dateRules"
652 v-model="addTeachers.date" 652 v-model="addTeachers.date"
653 placeholder="Select date" 653 placeholder="Select date"
654 ></v-text-field> 654 ></v-text-field>
655 <v-date-picker 655 <v-date-picker
656 ref="picker" 656 ref="picker"
657 v-model="addTeachers.date" 657 v-model="addTeachers.date"
658 :max="new Date().toISOString().substr(0, 10)" 658 :max="new Date().toISOString().substr(0, 10)"
659 min="1950-01-01" 659 min="1950-01-01"
660 @input="menu = false" 660 @input="menu = false"
661 ></v-date-picker> 661 ></v-date-picker>
662 </v-menu> 662 </v-menu>
663 </v-flex> 663 </v-flex>
664 </v-layout> 664 </v-layout>
665 </v-flex> 665 </v-flex>
666 <v-flex xs12 sm6> 666 <v-flex xs12 sm6>
667 <v-layout> 667 <v-layout>
668 <v-flex xs4 class="pt-4 subheading"> 668 <v-flex xs4 class="pt-4 subheading">
669 <label class="right">City:</label> 669 <label class="right">City:</label>
670 </v-flex> 670 </v-flex>
671 <v-flex xs8 class="ml-3"> 671 <v-flex xs8 class="ml-3">
672 <v-text-field 672 <v-text-field
673 v-model="addTeachers.city" 673 v-model="addTeachers.city"
674 placeholder="fill your City Name" 674 placeholder="fill your City Name"
675 name="City" 675 name="City"
676 type="text" 676 type="text"
677 :rules="cityRules" 677 :rules="cityRules"
678 required 678 required
679 ></v-text-field> 679 ></v-text-field>
680 </v-flex> 680 </v-flex>
681 </v-layout> 681 </v-layout>
682 </v-flex> 682 </v-flex>
683 </v-layout> 683 </v-layout>
684 <v-layout> 684 <v-layout>
685 <v-flex xs12 sm6> 685 <v-flex xs12 sm6>
686 <v-layout> 686 <v-layout>
687 <v-flex xs4 class="pt-4 subheading"> 687 <v-flex xs4 class="pt-4 subheading">
688 <label class="right">State:</label> 688 <label class="right">State:</label>
689 </v-flex> 689 </v-flex>
690 <v-flex xs8 class="ml-3"> 690 <v-flex xs8 class="ml-3">
691 <v-text-field 691 <v-text-field
692 v-model="addTeachers.state" 692 v-model="addTeachers.state"
693 placeholder="fill your State Name" 693 placeholder="fill your State Name"
694 name="state" 694 name="state"
695 type="text" 695 type="text"
696 :rules="stateRules" 696 :rules="stateRules"
697 required 697 required
698 ></v-text-field> 698 ></v-text-field>
699 </v-flex> 699 </v-flex>
700 </v-layout> 700 </v-layout>
701 </v-flex> 701 </v-flex>
702 <v-flex xs12 sm6> 702 <v-flex xs12 sm6>
703 <v-layout> 703 <v-layout>
704 <v-flex xs4 class="pt-4 subheading"> 704 <v-flex xs4 class="pt-4 subheading">
705 <label class="right">PinCode:</label> 705 <label class="right">PinCode:</label>
706 </v-flex> 706 </v-flex>
707 <v-flex xs8 class="ml-3"> 707 <v-flex xs8 class="ml-3">
708 <v-text-field 708 <v-text-field
709 v-model="addTeachers.pincode" 709 v-model="addTeachers.pincode"
710 placeholder="fill your pincode" 710 placeholder="fill your pincode"
711 name="pincode" 711 name="pincode"
712 type="number" 712 type="number"
713 :rules="pincode" 713 :rules="pincode"
714 required 714 required
715 ></v-text-field> 715 ></v-text-field>
716 </v-flex> 716 </v-flex>
717 </v-layout> 717 </v-layout>
718 </v-flex> 718 </v-flex>
719 </v-layout> 719 </v-layout>
720 <v-layout> 720 <v-layout>
721 <v-flex xs12 sm6> 721 <v-flex xs12 sm6>
722 <v-layout> 722 <v-layout>
723 <v-flex xs4 class="pt-4 subheading"> 723 <v-flex xs4 class="pt-4 subheading">
724 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 724 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
725 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 725 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
726 </v-flex> 726 </v-flex>
727 <v-flex xs8 class="ml-3"> 727 <v-flex xs8 class="ml-3">
728 <v-text-field 728 <v-text-field
729 v-model="addTeachers.mobileNo" 729 v-model="addTeachers.mobileNo"
730 placeholder="fill your Mobile No." 730 placeholder="fill your Mobile No."
731 name="mobileNo" 731 name="mobileNo"
732 type="number" 732 type="number"
733 :rules="mobileNoRules" 733 :rules="mobileNoRules"
734 required 734 required
735 ></v-text-field> 735 ></v-text-field>
736 </v-flex> 736 </v-flex>
737 </v-layout> 737 </v-layout>
738 </v-flex> 738 </v-flex>
739 <v-flex xs12 sm6> 739 <v-flex xs12 sm6>
740 <v-layout> 740 <v-layout>
741 <v-flex xs4 class="pt-4 subheading"> 741 <v-flex xs4 class="pt-4 subheading">
742 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 742 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
743 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 743 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
744 </v-flex> 744 </v-flex>
745 <v-flex xs8 class="ml-3"> 745 <v-flex xs8 class="ml-3">
746 <v-autocomplete 746 <v-autocomplete
747 v-model="addTeachers.country" 747 v-model="addTeachers.country"
748 :rules="country" 748 :rules="country"
749 :items="countries" 749 :items="countries"
750 placeholder="Select Country Name" 750 placeholder="Select Country Name"
751 required 751 required
752 ></v-autocomplete> 752 ></v-autocomplete>
753 </v-flex> 753 </v-flex>
754 </v-layout> 754 </v-layout>
755 </v-flex> 755 </v-flex>
756 </v-layout> 756 </v-layout>
757 <v-layout> 757 <v-layout>
758 <v-flex xs12 sm6> 758 <v-flex xs12 sm6>
759 <v-layout> 759 <v-layout>
760 <v-flex xs4 class="pt-4 subheading"> 760 <v-flex xs4 class="pt-4 subheading">
761 <label class="right">Join Date:</label> 761 <label class="right">Join Date:</label>
762 </v-flex> 762 </v-flex>
763 <v-flex xs8 class="ml-3"> 763 <v-flex xs8 class="ml-3">
764 <v-menu 764 <v-menu
765 ref="menu1" 765 ref="menu1"
766 :close-on-content-click="false" 766 :close-on-content-click="false"
767 v-model="menu1" 767 v-model="menu1"
768 :nudge-right="40" 768 :nudge-right="40"
769 lazy 769 lazy
770 transition="scale-transition" 770 transition="scale-transition"
771 offset-y 771 offset-y
772 full-width 772 full-width
773 min-width="290px" 773 min-width="290px"
774 > 774 >
775 <v-text-field 775 <v-text-field
776 slot="activator" 776 slot="activator"
777 :rules="joinDateRules" 777 :rules="joinDateRules"
778 v-model="addTeachers.joinDate" 778 v-model="addTeachers.joinDate"
779 placeholder="Select date" 779 placeholder="Select date"
780 ></v-text-field> 780 ></v-text-field>
781 <v-date-picker 781 <v-date-picker
782 ref="picker" 782 ref="picker"
783 v-model="addTeachers.joinDate" 783 v-model="addTeachers.joinDate"
784 :max="new Date().toISOString().substr(0, 10)" 784 :max="new Date().toISOString().substr(0, 10)"
785 min="1950-01-01" 785 min="1950-01-01"
786 @input="menu1 = false" 786 @input="menu1 = false"
787 ></v-date-picker> 787 ></v-date-picker>
788 </v-menu> 788 </v-menu>
789 </v-flex> 789 </v-flex>
790 </v-layout> 790 </v-layout>
791 </v-flex> 791 </v-flex>
792 <v-flex xs12 sm6> 792 <v-flex xs12 sm6>
793 <v-layout> 793 <v-layout>
794 <v-flex xs4 class="pt-4 subheading"> 794 <v-flex xs4 class="pt-4 subheading">
795 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 795 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
796 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 796 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
797 </v-flex> 797 </v-flex>
798 <v-flex xs8 class="ml-3"> 798 <v-flex xs8 class="ml-3">
799 <v-text-field 799 <v-text-field
800 label="Select Image" 800 label="Select Image"
801 @click="pickFile" 801 @click="pickFile"
802 v-model="imageName" 802 v-model="imageName"
803 append-icon="attach_file" 803 append-icon="attach_file"
804 ></v-text-field> 804 ></v-text-field>
805 <input 805 <input
806 type="file" 806 type="file"
807 style="display:none" 807 style="display:none"
808 ref="image" 808 ref="image"
809 accept="image/*" 809 accept="image/*"
810 @change="onFilePicked" 810 @change="onFilePicked"
811 /> 811 />
812 </v-flex> 812 </v-flex>
813 </v-layout> 813 </v-layout>
814 </v-flex> 814 </v-flex>
815 </v-layout> 815 </v-layout>
816 <v-layout class="hidden-xs-only hidden-sm-only"> 816 <v-layout class="hidden-xs-only hidden-sm-only">
817 <v-flex xs12 sm6> 817 <v-flex xs12 sm6>
818 <v-layout> 818 <v-layout>
819 <v-flex xs4 md4 class="pt-4 subheading"> 819 <v-flex xs4 md4 class="pt-4 subheading">
820 <label class="right">Present Address:</label> 820 <label class="right">Present Address:</label>
821 </v-flex> 821 </v-flex>
822 <v-flex xs8 md8 class="ml-3"> 822 <v-flex xs8 md8 class="ml-3">
823 <v-text-field 823 <v-text-field
824 name="input-4-3" 824 name="input-4-3"
825 v-model="addTeachers.presentAddress" 825 v-model="addTeachers.presentAddress"
826 :rules="presentAddress" 826 :rules="presentAddress"
827 placeholder="fill Your present Address" 827 placeholder="fill Your present Address"
828 required 828 @keyup="copyData"
829 ></v-text-field> 829 ></v-text-field>
830 </v-flex> 830 </v-flex>
831 </v-layout> 831 </v-layout>
832 </v-flex> 832 </v-flex>
833 <v-flex xs12 sm6> 833 <v-flex xs12 sm6>
834 <v-layout> 834 <v-layout>
835 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 835 <v-flex xs4 md4 class="pt-4 subheading addressForm">
836 <label class="right">Permanent Address:</label> 836 <label class="right">Permanent Address:</label>
837 </v-flex> 837 </v-flex>
838 <v-flex xs12 md8 class="ml-3"> 838 <v-flex xs12 md8 class="ml-3">
839 <v-switch
840 v-model="addTeachers.permanentAddress"
841 label="Select Permanent Address"
842 :value="addTeachers.presentAddress"
843 ></v-switch>
844 </v-flex>
845 </v-layout>
846 </v-flex>
847 </v-layout>
848 <v-layout class="hidden-xs-only hidden-sm-only">
849 <v-flex xs12 sm6>
850 <v-layout>
851 <v-flex xs4 md4 class="pt-4 subheading addressForm">
852 <label class="right">Permanent Address:</label>
853 </v-flex>
854 <v-flex xs12 md8 class="ml-3">
839 <v-text-field 855 <v-text-field
840 name="input-4-3" 856 name="input-4-3"
841 v-model="addTeachers.permanentAddress" 857 v-model="addTeachers.permanentAddress"
842 :rules="permanentAddress" 858 :rules="permanentAddress"
843 placeholder="fill Your Permanent Address" 859 placeholder="fill Your Permanent Address"
844 required 860 required
845 ></v-text-field> 861 ></v-text-field>
846 </v-flex> 862 </v-flex>
847 </v-layout> 863 </v-layout>
848 </v-flex> 864 </v-flex>
849 </v-layout> 865 </v-layout>
850 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> 866 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
851 <v-flex xs12 sm12> 867 <v-flex xs12 sm12>
852 <v-layout> 868 <v-layout>
853 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 869 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
854 <label class>Present Addres:</label> 870 <label class>Present Addres:</label>
855 </v-flex> 871 </v-flex>
856 </v-layout> 872 </v-layout>
857 <v-layout> 873 <v-layout>
858 <v-flex xs12 sm12> 874 <v-flex xs12 sm12>
859 <v-textarea 875 <v-textarea
860 name="input-4-3" 876 name="input-4-3"
861 v-model="addTeachers.presentAddress" 877 v-model="addTeachers.presentAddress"
862 :rules="presentAddress" 878 :rules="presentAddress"
863 placeholder="fill Your present Address" 879 placeholder="fill Your present Address"
864 required 880 required
865 ></v-textarea> 881 ></v-textarea>
866 </v-flex> 882 </v-flex>
867 </v-layout> 883 </v-layout>
868 </v-flex> 884 </v-flex>
869 <v-flex xs12 sm12> 885 <v-flex xs12 sm12>
870 <v-layout> 886 <v-layout>
871 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 887 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
872 <label>Permanent Address:</label> 888 <label>Permanent Address:</label>
873 </v-flex> 889 </v-flex>
874 </v-layout> 890 </v-layout>
875 <v-layout> 891 <v-layout>
876 <v-flex xs12 sm12> 892 <v-flex xs12 sm12>
877 <v-textarea 893 <v-textarea
878 name="input-4-3" 894 name="input-4-3"
879 v-model="addTeachers.permanentAddress" 895 v-model="addTeachers.permanentAddress"
880 :rules="permanentAddress" 896 :rules="permanentAddress"
881 placeholder="fill Your Permanent Address" 897 placeholder="fill Your Permanent Address"
882 required 898 required
883 ></v-textarea> 899 ></v-textarea>
884 </v-flex> 900 </v-flex>
885 </v-layout> 901 </v-layout>
886 </v-flex> 902 </v-flex>
887 </v-layout> 903 </v-layout>
888 <v-layout class="mx-2"> 904 <v-layout class="mx-2">
889 <v-flex xs12 sm11 offset-sm1> 905 <v-flex xs12 sm11 offset-sm1>
890 <v-layout> 906 <v-layout>
891 <v-flex xs6 class> 907 <v-flex xs6 class>
892 <v-btn @click="clear" round dark>clear</v-btn> 908 <v-btn @click="clear" round dark>clear</v-btn>
893 </v-flex> 909 </v-flex>
894 <v-flex xs6> 910 <v-flex xs6>
895 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 911 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
896 </v-flex> 912 </v-flex>
897 </v-layout> 913 </v-layout>
898 </v-flex> 914 </v-flex>
899 </v-layout> 915 </v-layout>
900 </v-container> 916 </v-container>
901 </v-form> 917 </v-form>
902 </v-card> 918 </v-card>
903 </v-flex> 919 </v-flex>
904 </v-container> 920 </v-container>
905 </v-tab-item> 921 </v-tab-item>
906 </v-tabs> 922 </v-tabs>
907 <div class="loader" v-if="showLoader"> 923 <div class="loader" v-if="showLoader">
908 <v-progress-circular indeterminate color="white"></v-progress-circular> 924 <v-progress-circular indeterminate color="white"></v-progress-circular>
909 </div> 925 </div>
910 </v-app> 926 </v-app>
911 </template> 927 </template>
912 928
913 <script> 929 <script>
914 import http from "@/Services/http.js"; 930 import http from "@/Services/http.js";
915 import moment from "moment"; 931 import moment from "moment";
916 import countryList from "@/script/country.js"; 932 import countryList from "@/script/country.js";
917 933
918 export default { 934 export default {
919 data: () => ({ 935 data: () => ({
920 component: "report-generate", 936 component: "report-generate",
921 snackbar: false, 937 snackbar: false,
922 y: "top", 938 y: "top",
923 x: "right", 939 x: "right",
924 mode: "", 940 mode: "",
925 timeout: 3000, 941 timeout: 3000,
926 text: "", 942 text: "",
927 showLoader: false, 943 showLoader: false,
928 loading: false, 944 loading: false,
929 date: null, 945 date: null,
930 search: "", 946 search: "",
931 menu: false, 947 menu: false,
932 menu1: false, 948 menu1: false,
933 menu2: false, 949 menu2: false,
934 menu3: false, 950 menu3: false,
935 dialog: false, 951 dialog: false,
936 dialog1: false, 952 dialog1: false,
937 valid: true, 953 valid: true,
938 isActive: true, 954 isActive: true,
939 newActive: false, 955 newActive: false,
940 pagination: { 956 pagination: {
941 rowsPerPage: 15 957 rowsPerPage: 15
942 }, 958 },
943 imageData: {}, 959 imageData: {},
944 imageName: "", 960 imageName: "",
945 imageUrl: "", 961 imageUrl: "",
946 imageFile: "", 962 imageFile: "",
947 nameRules: [v => !!v || " Full Name is required"], 963 nameRules: [v => !!v || " Full Name is required"],
948 dateRules: [v => !!v || " DOB is required"], 964 dateRules: [v => !!v || " DOB is required"],
949 cityRules: [v => !!v || " City Name is required"], 965 cityRules: [v => !!v || " City Name is required"],
950 pincode: [v => !!v || " Pincode is required"], 966 pincode: [v => !!v || " Pincode is required"],
951 country: [v => !!v || " Country Name is required"], 967 country: [v => !!v || " Country Name is required"],
952 permanentAddress: [v => !!v || " Permanent Address is required"], 968 permanentAddress: [v => !!v || " Permanent Address is required"],
953 presentAddress: [v => !!v || " Present Address is required"], 969 presentAddress: [v => !!v || " Present Address is required"],
954 mobileNoRules: [v => !!v || "Mobile Number is required"], 970 mobileNoRules: [v => !!v || "Mobile Number is required"],
955 stateRules: [v => !!v || "State Name is required"], 971 stateRules: [v => !!v || "State Name is required"],
956 joinDateRules: [v => !!v || " Join Date is required"], 972 joinDateRules: [v => !!v || " Join Date is required"],
957 errorMessages: "", 973 errorMessages: "",
958 countries: [], 974 countries: [],
959 headers: [ 975 headers: [
960 { 976 {
961 text: "No", 977 text: "No",
962 align: "center", 978 align: "center",
963 sortable: false, 979 sortable: false,
964 value: "No" 980 value: "No"
965 }, 981 },
966 { 982 {
967 text: "Profile Pic", 983 text: "Profile Pic",
968 value: "profilePicUrl", 984 value: "profilePicUrl",
969 sortable: false, 985 sortable: false,
970 align: "center" 986 align: "center"
971 }, 987 },
972 { text: "Name", value: "name", sortable: false, align: "center" }, 988 { text: "Name", value: "name", sortable: false, align: "center" },
973 { text: "Email", value: "email", sortable: false, align: "center" }, 989 { text: "Email", value: "email", sortable: false, align: "center" },
974 { text: "DOB", value: "dob", sortable: false, align: "center" }, 990 { text: "DOB", value: "dob", sortable: false, align: "center" },
975 { 991 {
976 text: "Join Date", 992 text: "Join Date",
977 value: "joinDate", 993 value: "joinDate",
978 sortable: false, 994 sortable: false,
979 align: "center" 995 align: "center"
980 }, 996 },
981 { 997 {
982 text: "Mobile No", 998 text: "Mobile No",
983 value: "mobileNo", 999 value: "mobileNo",
984 sortable: false, 1000 sortable: false,
985 align: "center" 1001 align: "center"
986 }, 1002 },
987 { text: "Action", value: "", sortable: false, align: "center" } 1003 { text: "Action", value: "", sortable: false, align: "center" }
988 ], 1004 ],
989 desserts: [], 1005 desserts: [],
990 editedIndex: -1, 1006 editedIndex: -1,
991 upload: "", 1007 upload: "",
992 editedItem: { 1008 editedItem: {
993 role: "TEACHER", 1009 role: "TEACHER",
994 name: "", 1010 name: "",
995 email: "", 1011 email: "",
996 date: null, 1012 date: null,
997 city: "", 1013 city: "",
998 pincode: "", 1014 pincode: "",
999 country: "", 1015 country: "",
1000 permanentAddress: "", 1016 permanentAddress: "",
1001 presentAddress: "", 1017 presentAddress: "",
1002 mobileNo: "", 1018 mobileNo: "",
1003 state: "", 1019 state: "",
1004 joinDate: null 1020 joinDate: null
1005 }, 1021 },
1006 addTeachers: { 1022 addTeachers: {
1007 role: "TEACHER", 1023 role: "TEACHER",
1008 name: "", 1024 name: "",
1009 email: "", 1025 email: "",
1010 date: null, 1026 date: null,
1011 city: "", 1027 city: "",
1012 pincode: "", 1028 pincode: "",
1013 country: "", 1029 country: "",
1014 permanentAddress: "", 1030 permanentAddress: "",
1015 presentAddress: "", 1031 presentAddress: "",
1016 mobileNo: "", 1032 mobileNo: "",
1017 state: "", 1033 state: "",
1018 joinDate: null 1034 joinDate: null
1019 }, 1035 },
1020 defaultItem: { 1036 defaultItem: {
1021 role: "TEACHER", 1037 role: "TEACHER",
1022 name: "", 1038 name: "",
1023 email: "" 1039 email: ""
1024 } 1040 }
1025 }), 1041 }),
1026 watch: { 1042 watch: {
1027 menu(val) { 1043 menu(val) {
1028 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1044 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1029 }, 1045 },
1030 menu1(val) { 1046 menu1(val) {
1031 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1047 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1032 } 1048 }
1033 }, 1049 },
1034 methods: { 1050 methods: {
1035 save(date) { 1051 save(date) {
1036 this.$refs.menu.save(date); 1052 this.$refs.menu.save(date);
1037 }, 1053 },
1038 save(date) { 1054 save(date) {
1039 this.$refs.menu1.save(date); 1055 this.$refs.menu1.save(date);
1040 }, 1056 },
1041 pickFile() { 1057 pickFile() {
1042 this.$refs.image.click(); 1058 this.$refs.image.click();
1043 }, 1059 },
1044 onFilePicked(e) { 1060 onFilePicked(e) {
1045 // console.log(e) 1061 // console.log(e)
1046 const files = e.target.files; 1062 const files = e.target.files;
1047 this.upload = e.target.files[0]; 1063 this.upload = e.target.files[0];
1048 console.log("imageData-upload========>", this.upload); 1064 console.log("imageData-upload========>", this.upload);
1049 if (files[0] !== undefined) { 1065 if (files[0] !== undefined) {
1050 this.imageName = files[0].name; 1066 this.imageName = files[0].name;
1051 if (this.imageName.lastIndexOf(".") <= 0) { 1067 if (this.imageName.lastIndexOf(".") <= 0) {
1052 return; 1068 return;
1053 } 1069 }
1054 const fr = new FileReader(); 1070 const fr = new FileReader();
1055 fr.readAsDataURL(files[0]); 1071 fr.readAsDataURL(files[0]);
1056 fr.addEventListener("load", () => { 1072 fr.addEventListener("load", () => {
1057 this.imageUrl = fr.result; 1073 this.imageUrl = fr.result;
1058 this.imageFile = files[0]; // this is an image file that can be sent to server... 1074 this.imageFile = files[0]; // this is an image file that can be sent to server...
1059 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1075 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1060 // console.log("upload=======>", this.imageData.imageUrl); 1076 // console.log("upload=======>", this.imageData.imageUrl);
1061 console.log("imageFile", this.imageUrl); 1077 console.log("imageFile", this.imageUrl);
1062 }); 1078 });
1063 } else { 1079 } else {
1064 this.imageName = ""; 1080 this.imageName = "";
1065 this.imageFile = ""; 1081 this.imageFile = "";
1066 this.imageUrl = ""; 1082 this.imageUrl = "";
1067 } 1083 }
1068 }, 1084 },
1069 dates: function(date) { 1085 dates: function(date) {
1070 return moment(date).format("MMMM DD, YYYY"); 1086 return moment(date).format("MMMM DD, YYYY");
1071 }, 1087 },
1072 getTeacherList() { 1088 getTeacherList() {
1073 this.showLoader = true; 1089 this.showLoader = true;
1074 var token = this.$store.state.token; 1090 var token = this.$store.state.token;
1075 http() 1091 http()
1076 .get("/getTeachersList", { 1092 .get("/getTeachersList", {
1077 headers: { Authorization: "Bearer " + token } 1093 headers: { Authorization: "Bearer " + token }
1078 }) 1094 })
1079 .then(response => { 1095 .then(response => {
1080 this.desserts = response.data.data; 1096 this.desserts = response.data.data;
1081 this.showLoader = false; 1097 this.showLoader = false;
1082 // console.log("getTeacherList=====>",this.desserts) 1098 // console.log("getTeacherList=====>",this.desserts)
1083 }) 1099 })
1084 .catch(error => { 1100 .catch(error => {
1085 this.showLoader = false; 1101 this.showLoader = false;
1086 if (error.response.status === 401) { 1102 if (error.response.status === 401) {
1087 this.$router.replace({ path: "/" }); 1103 this.$router.replace({ path: "/" });
1088 this.$store.dispatch("setToken", null); 1104 this.$store.dispatch("setToken", null);
1089 this.$store.dispatch("Id", null); 1105 this.$store.dispatch("Id", null);
1090 } 1106 }
1091 }); 1107 });
1092 }, 1108 },
1093 editItem(item) { 1109 editItem(item) {
1094 this.editedIndex = this.desserts.indexOf(item); 1110 this.editedIndex = this.desserts.indexOf(item);
1095 this.editedItem = Object.assign({}, item); 1111 this.editedItem = Object.assign({}, item);
1096 this.editedItem.dob = 1112 this.editedItem.dob =
1097 this.editedItem.dob != undefined 1113 this.editedItem.dob != undefined
1098 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1114 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1099 : (this.editedItem.dob = ""); 1115 : (this.editedItem.dob = "");
1100 this.editedItem.joinDate = 1116 this.editedItem.joinDate =
1101 this.editedItem.joinDate != undefined 1117 this.editedItem.joinDate != undefined
1102 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1118 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1103 0, 1119 0,
1104 10 1120 10
1105 )) 1121 ))
1106 : (this.editedItem.joinDate = ""); 1122 : (this.editedItem.joinDate = "");
1107 1123
1108 this.dialog = true; 1124 this.dialog = true;
1109 }, 1125 },
1110 profile(item) { 1126 profile(item) {
1111 this.editedIndex = this.desserts.indexOf(item); 1127 this.editedIndex = this.desserts.indexOf(item);
1112 this.editedItem = Object.assign({}, item); 1128 this.editedItem = Object.assign({}, item);
1113 this.dialog1 = true; 1129 this.dialog1 = true;
1114 }, 1130 },
1115 deleteItem(item) { 1131 deleteItem(item) {
1116 let deleteTeachers = { 1132 let deleteTeachers = {
1117 teacherId: item._id 1133 teacherId: item._id
1118 }; 1134 };
1119 // console.log("deleteUers",deleteTeachers) 1135 // console.log("deleteUers",deleteTeachers)
1120 http() 1136 http()
1121 .delete( 1137 .delete(
1122 "/deleteTeacher", 1138 "/deleteTeacher",
1123 confirm("Are you sure you want to delete this?") && { 1139 confirm("Are you sure you want to delete this?") && {
1124 params: deleteTeachers 1140 params: deleteTeachers
1125 } 1141 }
1126 ) 1142 )
1127 .then(response => { 1143 .then(response => {
1128 // console.log("deleteUers",deleteTeachers) 1144 // console.log("deleteUers",deleteTeachers)
1129 if ((this.snackbar = true)) { 1145 if ((this.snackbar = true)) {
1130 this.text = "Successfully delete Existing Teacher"; 1146 this.text = "Successfully delete Existing Teacher";
1131 } 1147 }
1132 this.getTeacherList(); 1148 this.getTeacherList();
1133 }) 1149 })
1134 .catch(error => { 1150 .catch(error => {
1135 console.log(error); 1151 console.log(error);
1136 }); 1152 });
1137 }, 1153 },
1138 activeTab(type) { 1154 activeTab(type) {
1139 switch (type) { 1155 switch (type) {
1140 case "existing": 1156 case "existing":
1141 this.newActive = false; 1157 this.newActive = false;
1142 this.isActive = true; 1158 this.isActive = true;
1143 break; 1159 break;
1144 1160
1145 default: 1161 default:
1146 this.newActive = true; 1162 this.newActive = true;
1147 this.isActive = false; 1163 this.isActive = false;
1148 break; 1164 break;
1149 } 1165 }
1150 }, 1166 },
1151 close() { 1167 close() {
1152 this.dialog = false; 1168 this.dialog = false;
1153 setTimeout(() => { 1169 setTimeout(() => {
1154 this.editedItem = Object.assign({}, this.defaultItem); 1170 this.editedItem = Object.assign({}, this.defaultItem);
1155 this.editedIndex = -1; 1171 this.editedIndex = -1;
1156 }, 300); 1172 }, 300);
1157 }, 1173 },
1158 close1() { 1174 close1() {
1159 this.dialog1 = false; 1175 this.dialog1 = false;
1160 }, 1176 },
1177 copyData() {
1178 this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
1179 },
1161 submit() { 1180 submit() {
1162 if (this.$refs.form.validate()) { 1181 if (this.$refs.form.validate()) {
1163 let addTeacher = { 1182 let addTeacher = {
1164 name: this.addTeachers.name, 1183 name: this.addTeachers.name,
1165 email: this.addTeachers.email, 1184 email: this.addTeachers.email,
1166 role: this.addTeachers.role, 1185 role: this.addTeachers.role,
1167 dob: this.addTeachers.date, 1186 dob: this.addTeachers.date,
1168 city: this.addTeachers.city, 1187 city: this.addTeachers.city,
1169 pincode: this.addTeachers.pincode, 1188 pincode: this.addTeachers.pincode,
1170 country: this.addTeachers.country, 1189 country: this.addTeachers.country,
1171 permanentAddress: this.addTeachers.permanentAddress, 1190 permanentAddress: this.addTeachers.permanentAddress,
1172 presentAddress: this.addTeachers.presentAddress, 1191 presentAddress: this.addTeachers.presentAddress,
1173 mobileNo: this.addTeachers.mobileNo, 1192 mobileNo: this.addTeachers.mobileNo,
1174 state: this.addTeachers.state, 1193 state: this.addTeachers.state,
1175 joinDate: this.addTeachers.joinDate 1194 joinDate: this.addTeachers.joinDate
1176 }; 1195 };
1177 if (this.imageUrl) { 1196 if (this.imageUrl) {
1178 var str = this.imageUrl; 1197 var str = this.imageUrl;
1179 const [baseUrl, imageUrl] = str.split(/,/); 1198 const [baseUrl, imageUrl] = str.split(/,/);
1180 addTeacher.upload = imageUrl; 1199 addTeacher.upload = imageUrl;
1181 } 1200 }
1182 this.loading = true; 1201 this.loading = true;
1183 http() 1202 http()
1184 .post("/createTeacher", addTeacher) 1203 .post("/createTeacher", addTeacher)
1185 .then(response => { 1204 .then(response => {
1186 this.imageUrl = ""; 1205 this.imageUrl = "";
1187 this.getTeacherList(); 1206 this.getTeacherList();
1188 this.snackbar = true; 1207 this.snackbar = true;
1189 this.text = "New Teacher added successfully"; 1208 this.text = "New Teacher added successfully";
1190 this.clear(); 1209 this.clear();
1191 this.loading = false; 1210 this.loading = false;
1192 }) 1211 })
1193 .catch(error => { 1212 .catch(error => {
1194 // console.log(error); 1213 // console.log(error);
1195 if ((this.snackbar = true)) { 1214 if ((this.snackbar = true)) {
1196 this.text = error.response.data.message; 1215 this.text = error.response.data.message;
1197 } 1216 }
1198 this.loading = false; 1217 this.loading = false;
1199 }); 1218 });
1200 } 1219 }
1201 }, 1220 },
1202 clear() { 1221 clear() {
1203 this.$refs.form.reset(); 1222 this.$refs.form.reset();
1204 this.imageUrl = ""; 1223 this.imageUrl = "";
1205 }, 1224 },
1206 save() { 1225 save() {
1207 this.loading = true; 1226 this.loading = true;
1208 let editTeacher = { 1227 let editTeacher = {
1209 teacherId: this.editedItem._id, 1228 teacherId: this.editedItem._id,
1210 name: this.editedItem.name, 1229 name: this.editedItem.name,
1211 email: this.editedItem.email, 1230 email: this.editedItem.email,
1212 role: this.editedItem.role, 1231 role: this.editedItem.role,
1213 dob: this.editedItem.dob, 1232 dob: this.editedItem.dob,
1214 city: this.editedItem.city, 1233 city: this.editedItem.city,
1215 pincode: this.editedItem.pincode, 1234 pincode: this.editedItem.pincode,
1216 country: this.editedItem.country, 1235 country: this.editedItem.country,
1217 permanentAddress: this.editedItem.permanentAddress, 1236 permanentAddress: this.editedItem.permanentAddress,
1218 presentAddress: this.editedItem.presentAddress, 1237 presentAddress: this.editedItem.presentAddress,
1219 mobileNo: this.editedItem.mobileNo, 1238 mobileNo: this.editedItem.mobileNo,
1220 state: this.editedItem.state, 1239 state: this.editedItem.state,
1221 joinDate: this.editedItem.joinDate 1240 joinDate: this.editedItem.joinDate
1222 }; 1241 };
1223 if (this.imageUrl) { 1242 if (this.imageUrl) {
1224 var str = this.imageUrl; 1243 var str = this.imageUrl;
1225 const [baseUrl, imageUrl] = str.split(/,/); 1244 const [baseUrl, imageUrl] = str.split(/,/);
1226 editTeacher.upload = imageUrl; 1245 editTeacher.upload = imageUrl;
1227 } 1246 }
1228 http() 1247 http()
1229 .put("/updateTeacher", editTeacher) 1248 .put("/updateTeacher", editTeacher)
1230 .then(response => { 1249 .then(response => {
1231 console.log("editTeacher", editTeacher); 1250 console.log("editTeacher", editTeacher);
1232 this.snackbar = true; 1251 this.snackbar = true;
1233 this.text = "Successfully Edit Existing Teacher"; 1252 this.text = "Successfully Edit Existing Teacher";
1234 this.loading = false; 1253 this.loading = false;
1235 this.getTeacherList(); 1254 this.getTeacherList();
1236 this.close(); 1255 this.close();
1237 }) 1256 })
1238 .catch(error => { 1257 .catch(error => {
1239 console.log(error); 1258 console.log(error);
1240 this.loading = false; 1259 this.loading = false;
1241 }); 1260 });
1242 } 1261 }
1243 }, 1262 },
1244 mounted() { 1263 mounted() {
1245 const getCountryList = countryList(); 1264 const getCountryList = countryList();
1246 this.countries = getCountryList; 1265 this.countries = getCountryList;
1247 this.getTeacherList(); 1266 this.getTeacherList();
1248 }, 1267 },
1249 created() { 1268 created() {
1250 this.$root.$on("app:search", search => { 1269 this.$root.$on("app:search", search => {
1251 this.search = search; 1270 this.search = search;
1252 }); 1271 });
1253 }, 1272 },
1254 beforeDestroy() { 1273 beforeDestroy() {
1255 // dont forget to remove the listener 1274 // dont forget to remove the listener
1256 this.$root.$off("app:search"); 1275 this.$root.$off("app:search");
1257 } 1276 }
1258 }; 1277 };
1259 </script> 1278 </script>
1260 <style scoped> 1279 <style scoped>
1261 .active { 1280 .active {
1262 background-color: gray; 1281 background-color: gray;
1263 color: white !important; 1282 color: white !important;
1264 } 1283 }
1265 .activebtn { 1284 .activebtn {
1266 color: black !important; 1285 color: black !important;
1267 } 1286 }
1268 </style> 1287 </style>
src/pages/generalSetting/generalSetting.vue
Diff comments   View file @d9bb52b
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-container fill-height> 3 <v-container>
4 <v-layout> 4 <v-layout>
5 <v-flex xs12 sm12 md12 lg12 class="mt-5"> 5 <v-flex xs12 sm12 md12 lg12 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>General Setting</v-toolbar-title> 8 <v-toolbar-title>General Setting</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" id="form">
12 <v-card-text> 12 <v-card-text>
13 <v-flex xs12> 13 <v-flex xs12>
14 <v-form class="mt-3" ref="form" v-model="valid" lazy-validation> 14 <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
15 <v-layout>
16 <v-flex
17 xs12
18 class="text-xs-center text-sm-center text-md-center text-lg-center mb-4"
19 >
20 <v-avatar size="100px">
21 <img src="/static/icon/user.png" v-if="!imageUrl" />
22 </v-avatar>
23 <input
24 type="file"
25 style="display: none"
26 ref="image"
27 accept="image/*"
28 @change="onFilePicked"
29 />
30 <img :src="imageData.imageUrl" height="150" width="200" v-if="imageUrl" />
31 </v-flex>
32 </v-layout>
15 <v-flex xs12> 33 <v-flex xs12>
16 <!-- <v-layout> --> 34 <!-- <v-layout> -->
17 <v-flex xs12> 35 <v-flex xs12>
18 <v-layout> 36 <v-layout>
19 <v-flex xs4 sm4> 37 <v-flex xs4 sm4>
20 <label class="subheading right pt-4">Site Title:</label> 38 <label class="subheading right pt-4">Site Title:</label>
21 </v-flex> 39 </v-flex>
22 <v-flex xs8 sm5> 40 <v-flex xs8 sm5>
23 <v-text-field 41 <v-text-field
24 class="ml-3" 42 class="ml-3"
25 placeholder="fill your Site title" 43 placeholder="fill your Site title"
26 v-model="setting.name" 44 v-model="setting.name"
27 ></v-text-field> 45 ></v-text-field>
28 </v-flex> 46 </v-flex>
29 </v-layout> 47 </v-layout>
30 </v-flex> 48 </v-flex>
31 <v-flex xs12> 49 <v-flex xs12>
32 <v-layout> 50 <v-layout>
33 <v-flex xs4 sm4> 51 <v-flex xs4 sm4>
34 <label class="subheading right pt-4">Phone:</label> 52 <label class="subheading right pt-4">Phone:</label>
35 </v-flex> 53 </v-flex>
36 <v-flex xs8 sm5> 54 <v-flex xs8 sm5>
37 <v-text-field 55 <v-text-field
38 class="ml-3" 56 class="ml-3"
39 placeholder="fill your Phone number" 57 placeholder="fill your Phone number"
40 v-model="setting.mobile" 58 v-model="setting.mobile"
41 ></v-text-field> 59 ></v-text-field>
42 </v-flex> 60 </v-flex>
43 </v-layout> 61 </v-layout>
44 </v-flex> 62 </v-flex>
45 <!-- </v-layout> --> 63 <!-- </v-layout> -->
46 <!-- <v-layout> --> 64 <!-- <v-layout> -->
47 <v-flex xs12> 65 <v-flex xs12>
48 <v-layout> 66 <v-layout>
49 <v-flex xs4 sm4> 67 <v-flex xs4 sm4>
50 <label class="subheading right pt-4">Email:</label> 68 <label class="subheading right pt-4">Email:</label>
51 </v-flex> 69 </v-flex>
52 <v-flex xs8 sm5> 70 <v-flex xs8 sm5>
53 <v-text-field 71 <v-text-field
54 class="ml-3" 72 class="ml-3"
55 placeholder="fill your email" 73 placeholder="fill your email"
56 v-model="setting.email" 74 v-model="setting.email"
57 ></v-text-field> 75 ></v-text-field>
58 </v-flex> 76 </v-flex>
59 </v-layout> 77 </v-layout>
60 </v-flex> 78 </v-flex>
61 <v-flex xs12> 79 <v-flex xs12>
62 <v-layout> 80 <v-layout>
63 <v-flex xs4 sm4> 81 <v-flex xs4 sm4>
64 <label class="subheading right pt-4">Address:</label> 82 <label class="subheading right pt-4">Address:</label>
65 </v-flex> 83 </v-flex>
66 <v-flex xs8 sm5> 84 <v-flex xs8 sm5>
67 <v-text-field 85 <v-text-field
68 class="ml-3" 86 class="ml-3"
69 placeholder="fill your Address" 87 placeholder="fill your Address"
70 v-model="setting.address" 88 v-model="setting.address"
71 ></v-text-field> 89 ></v-text-field>
72 </v-flex> 90 </v-flex>
73 </v-layout> 91 </v-layout>
74 </v-flex> 92 </v-flex>
93 <v-flex xs12>
94 <v-layout>
95 <v-flex xs4 sm4>
96 <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label>
97 <label
98 class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4"
99 >Uplaod :</label>
100 </v-flex>
101 <v-flex xs8 sm5>
102 <v-text-field
103 class="ml-3"
104 label="Select Image"
105 @click="pickFile"
106 v-model="imageName"
107 append-icon="attach_file"
108 ></v-text-field>
109 </v-flex>
110 </v-layout>
111 </v-flex>
75 <!-- </v-layout> --> 112 <!-- </v-layout> -->
76 </v-flex> 113 </v-flex>
77 </v-form> 114 </v-form>
78 </v-flex> 115 </v-flex>
79 </v-card-text> 116 </v-card-text>
80 <v-card-actions> 117 <v-card-actions>
81 <v-flex text-xs-center> 118 <v-flex text-xs-center>
82 <v-btn 119 <v-btn
83 class="mt-3" 120 class="mt-3"
84 round 121 round
85 color="black" 122 color="black"
86 dark 123 dark
87 large 124 large
88 :loading="loading" 125 :loading="loading"
89 @click="reset" 126 @click="reset"
90 >submit</v-btn> 127 >submit</v-btn>
91 </v-flex> 128 </v-flex>
92 </v-card-actions> 129 </v-card-actions>
93 <v-snackbar 130 <v-snackbar
94 :timeout="timeout" 131 :timeout="timeout"
95 :top="y === 'top'" 132 :top="y === 'top'"
96 :right="x === 'right'" 133 :right="x === 'right'"
97 :vertical="mode === 'vertical'" 134 :vertical="mode === 'vertical'"
98 v-model="snackbar" 135 v-model="snackbar"
99 :color="color" 136 :color="color"
100 >{{ text }}</v-snackbar> 137 >{{ text }}</v-snackbar>
101 </v-card> 138 </v-card>
102 </v-flex> 139 </v-flex>
103 </v-layout> 140 </v-layout>
104 </v-container> 141 </v-container>
105 </v-app> 142 </v-app>
106 </template> 143 </template>
107 <script> 144 <script>
108 import http from "@/Services/http.js"; 145 import http from "@/Services/http.js";
109 146
110 export default { 147 export default {
111 data() { 148 data() {
112 return { 149 return {
113 snackbar: false, 150 snackbar: false,
114 y: "top", 151 y: "top",
115 x: "right", 152 x: "right",
116 mode: "", 153 mode: "",
117 timeout: 4000, 154 timeout: 4000,
118 text: "", 155 text: "",
119 color: "", 156 color: "",
120 setting: {}, 157 setting: {},
121 valid: true, 158 valid: true,
122 loading: false, 159 loading: false,
123 text: "" 160 text: "",
161 imageData: {},
162 imageName: "",
163 imageUrl: "",
164 imageFile: ""
124 }; 165 };
125 }, 166 },
126 mounted() { 167 mounted() {
127 this.token = this.$store.state.token; 168 this.token = this.$store.state.token;
128 // this.getRole(); 169 // this.getRole();
129 }, 170 },
130 methods: { 171 methods: {
172 pickFile() {
173 this.$refs.image.click();
174 },
175 onFilePicked(e) {
176 // console.log(e)
177 const files = e.target.files;
178 this.imageData.upload = e.target.files[0];
179 if (files[0] !== undefined) {
180 this.imageName = files[0].name;
181 if (this.imageName.lastIndexOf(".") <= 0) {
182 return;
183 }
184 const fr = new FileReader();
185 fr.readAsDataURL(files[0]);
186 fr.addEventListener("load", () => {
187 this.imageUrl = fr.result;
188 this.imageFile = files[0]; // this is an image file that can be sent to server...
189 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
190 });
191 } else {
192 this.imageName = "";
193 this.imageFile = "";
194 this.imageUrl = "";
195 }
196 },
131 reset() { 197 reset() {
132 if (this.$refs.form.validate()) { 198 if (this.$refs.form.validate()) {
133 this.loading = true; 199 this.loading = true;
200 if (this.imageUrl) {
201 var str = this.imageUrl;
202 const [baseUrl, imageUrl] = str.split(/,/);
203 this.setting.upload = imageUrl;
204 }
134 this.setting.schoolId = this.$store.state.id; 205 this.setting.schoolId = this.$store.state.id;
135 http() 206 http()
136 .put("/updateSchool", this.setting, { 207 .put("/updateSchool", this.setting, {
137 headers: { Authorization: "Bearer " + this.token } 208 headers: { Authorization: "Bearer " + this.token }
138 }) 209 })
139 .then(response => { 210 .then(response => {
140 this.loading = false; 211 this.loading = false;
141 this.snackbar = true; 212 this.snackbar = true;
142 this.text = response.data.message; 213 this.text = response.data.message;
143 this.color = "green"; 214 this.color = "green";
215 this.imageUrl = "";
144 this.clear(); 216 this.clear();
145 }) 217 })
146 .catch(error => { 218 .catch(error => {
147 // console.log("err====>",err); 219 // console.log("err====>",err);
148 this.snackbar = true; 220 this.snackbar = true;
149 this.text = error.response.data.message; 221 this.text = error.response.data.message;
150 this.color = "error"; 222 this.color = "error";
151 this.loading = false; 223 this.loading = false;
152 }); 224 });
153 } 225 }
154 }, 226 },
155 // getRole() { 227 // getRole() {
156 // this.showLoader = true; 228 // this.showLoader = true;
157 // http() 229 // http()
158 // .get("/getRolesList", { 230 // .get("/getRolesList", {
159 // headers: { Authorization: "Bearer " + this.token } 231 // headers: { Authorization: "Bearer " + this.token }
160 // }) 232 // })
161 // .then(response => { 233 // .then(response => {
162 // for (let i = 0; i < response.data.data.length; i++) { 234 // for (let i = 0; i < response.data.data.length; i++) {
163 // if ( 235 // if (
164 // response.data.data[i].name != "SUPERADMIN" && 236 // response.data.data[i].name != "SUPERADMIN" &&
165 // response.data.data[i].name != "ADMIN" 237 // response.data.data[i].name != "ADMIN"
166 // ) { 238 // ) {
167 // this.getRoles.push(response.data.data[i]); 239 // this.getRoles.push(response.data.data[i]);
168 // this.showLoader = false; 240 // this.showLoader = false;
169 // } 241 // }
170 // } 242 // }
171 // }) 243 // })
172 // .catch(error => { 244 // .catch(error => {
173 // this.showLoader = false; 245 // this.showLoader = false;
174 // if (error.response.status === 401) { 246 // if (error.response.status === 401) {
175 // this.$router.replace({ path: "/" }); 247 // this.$router.replace({ path: "/" });
176 // this.$store.dispatch("setToken", null); 248 // this.$store.dispatch("setToken", null);
177 // this.$store.dispatch("Id", null); 249 // this.$store.dispatch("Id", null);
178 // } 250 // }
179 // }); 251 // });
180 // }, 252 // },
181 clear() { 253 clear() {
182 this.$refs.form.reset(); 254 this.$refs.form.reset();
183 } 255 }
184 // getUsers(roles) { 256 // getUsers(roles) {
185 // this.showLoader = true; 257 // this.showLoader = true;
186 // http() 258 // http()
187 // .get("/getUserWithRole", { 259 // .get("/getUserWithRole", {
188 // params: { 260 // params: {
189 // name: roles 261 // name: roles
190 // }, 262 // },
191 // headers: { Authorization: "Bearer " + this.token } 263 // headers: { Authorization: "Bearer " + this.token }
192 // }) 264 // })
193 // .then(response => { 265 // .then(response => {
194 // this.getUsersName = response.data.data; 266 // this.getUsersName = response.data.data;
195 // }) 267 // })
196 // .catch(error => { 268 // .catch(error => {
197 // this.showLoader = false; 269 // this.showLoader = false;
198 // if (error.response.status === 401) { 270 // if (error.response.status === 401) {
199 // this.$router.replace({ path: "/" }); 271 // this.$router.replace({ path: "/" });
200 // this.$store.dispatch("setToken", null); 272 // this.$store.dispatch("setToken", null);
201 // this.$store.dispatch("Id", null); 273 // this.$store.dispatch("Id", null);
202 // } 274 // }
203 // }); 275 // });
204 // } 276 // }
205 } 277 }
206 }; 278 };
207 </script> 279 </script>
208 <style scoped> 280 <style scoped>
209 img {
210 position: absolute;
211 top: 13px;
212 left: 50px;
213 }
214 .v-btn--large { 281 .v-btn--large {
215 padding: 0px 74px; 282 padding: 0px 74px;
216 } 283 }
217 @media screen and (max-width: 769px) { 284 @media screen and (max-width: 769px) {
218 .v-btn--large { 285 .v-btn--large {
219 font-size: 14px; 286 font-size: 14px;
220 height: 44px; 287 height: 44px;