viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit fc82ac6677991998767f775a4856bce3b69415a7

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

fix design and responsive dashboard School Management

Showing 9 changed files with 86 additions and 49 deletions   Show diff stats
src/pages/Class/addclass.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 7
8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
9 <v-flex xs7 sm3 class="userSearch"> 9 <v-flex xs7 sm3 class="userSearch">
10 <v-text-field 10 <v-text-field
11 flat 11 flat
12 append-icon="search" 12 append-icon="search"
13 label="Find your Class" 13 label="Find your Class"
14 v-model="search" 14 v-model="search"
15 color="white" 15 color="white"
16 dark 16 dark
17 ></v-text-field> 17 ></v-text-field>
18 </v-flex> 18 </v-flex>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
21 <v-btn icon large flat slot="activator"> 21 <v-btn icon large flat slot="activator">
22 <v-avatar size="40px"> 22 <v-avatar size="40px">
23 <img src="/static/icon/user.png"> 23 <img src="/static/icon/user.png">
24 </v-avatar> 24 </v-avatar>
25 </v-btn> 25 </v-btn>
26 <v-list class="pa-0"> 26 <v-list class="pa-0">
27 <v-list-tile 27 <v-list-tile
28 v-for="(item,index) in items" 28 v-for="(item,index) in items"
29 :to="!item.href ? { name: item.name } : null" 29 :to="!item.href ? { name: item.name } : null"
30 :href="item.href" 30 :href="item.href"
31 @click="item.click" 31 @click="item.click"
32 ripple="ripple" 32 ripple="ripple"
33 :disabled="item.disabled" 33 :disabled="item.disabled"
34 :target="item.target" 34 :target="item.target"
35 rel="noopener" 35 rel="noopener"
36 :key="index" 36 :key="index"
37 > 37 >
38 <v-list-tile-action v-if="item.icon"> 38 <v-list-tile-action v-if="item.icon">
39 <v-icon>{{ item.icon }}</v-icon> 39 <v-icon>{{ item.icon }}</v-icon>
40 </v-list-tile-action> 40 </v-list-tile-action>
41 <v-list-tile-content> 41 <v-list-tile-content>
42 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 42 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
43 </v-list-tile-content> 43 </v-list-tile-content>
44 </v-list-tile> 44 </v-list-tile>
45 </v-list> 45 </v-list>
46 </v-menu> 46 </v-menu>
47 </v-toolbar> 47 </v-toolbar>
48 <v-tabs grow slider-color="black"> 48 <v-tabs grow slider-color="black">
49 <v-tab 49 <v-tab
50 ripple 50 ripple
51 @click="activeTab('existing')" 51 @click="activeTab('existing')"
52 v-bind:class="{ active: isActive }" 52 v-bind:class="{ active: isActive }"
53 id="tab" 53 id="tab"
54 class="subheading" 54 class="subheading"
55 >Existing Class</v-tab> 55 >Existing Class</v-tab>
56 <v-tab 56 <v-tab
57 ripple 57 ripple
58 @click="activeTab('new')" 58 @click="activeTab('new')"
59 v-bind:class="{ active: newActive }" 59 v-bind:class="{ active: newActive }"
60 id="tab1" 60 id="tab1"
61 User 61 User
62 class="subheading" 62 class="subheading"
63 >Add New Class</v-tab> 63 >Add New Class</v-tab>
64 64
65 <!-- ****** EDITS ADD ClASS ****** --> 65 <!-- ****** EDITS ADD ClASS ****** -->
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="500px"> 75 <v-dialog v-model="dialog" max-width="500px">
76 <v-toolbar color="white"> 76 <v-toolbar color="white">
77 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
78 <v-toolbar-title>Edit Profile</v-toolbar-title> 78 <v-toolbar-title>Edit Class</v-toolbar-title>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 </v-toolbar> 80 </v-toolbar>
81 <v-card> 81 <v-card>
82 <v-card-text> 82 <v-card-text>
83 <v-container> 83 <v-container>
84 <v-layout wrap justify-center> 84 <v-layout wrap justify-center>
85 <v-flex xs12 sm9> 85 <v-flex xs12 sm9>
86 <v-form ref="form" v-model="valid" lazy-validation> 86 <v-form ref="form" v-model="valid" lazy-validation>
87 <v-layout style="position:relative;"> 87 <v-layout style="position:relative;">
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label>Class Name:</label> 89 <label>Class Name:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8> 91 <v-flex xs8>
92 <v-text-field 92 <v-text-field
93 v-model="editedItem.classNum" 93 v-model="editedItem.classNum"
94 v-validate="'required'" 94 v-validate="'required'"
95 :rules="nameRules" 95 :rules="nameRules"
96 data-vv-name="Name" 96 data-vv-name="Name"
97 required 97 required
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 <v-card-actions> 101 <v-card-actions>
102 <v-btn round dark @click.native="close">Cancel</v-btn> 102 <v-btn round dark @click.native="close">Cancel</v-btn>
103 <v-spacer></v-spacer> 103 <v-spacer></v-spacer>
104 <v-btn round dark @click="save">Save</v-btn> 104 <v-btn round dark @click="save">Save</v-btn>
105 </v-card-actions> 105 </v-card-actions>
106 </v-form> 106 </v-form>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-container> 109 </v-container>
110 </v-card-text> 110 </v-card-text>
111 </v-card> 111 </v-card>
112 </v-dialog> 112 </v-dialog>
113 113
114 <!-- ****** PROFILE VIEW STUDENTS ****** --> 114 <!-- ****** PROFILE VIEW STUDENTS ****** -->
115 <v-dialog v-model="dialog1" max-width="600px"> 115 <v-dialog v-model="dialog1" max-width="600px">
116 <v-toolbar color="white"> 116 <v-toolbar color="white">
117 <v-spacer></v-spacer> 117 <v-spacer></v-spacer>
118 <v-toolbar-title>Profile</v-toolbar-title> 118 <v-toolbar-title>Profile</v-toolbar-title>
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-icon @click="close1">close</v-icon> 120 <v-icon @click="close1">close</v-icon>
121 </v-toolbar> 121 </v-toolbar>
122 <v-card> 122 <v-card>
123 <v-flex align-center justify-center layout text-xs-center> 123 <v-flex align-center justify-center layout text-xs-center>
124 <v-avatar size="50px" style="position:absolute; top:20px;"> 124 <v-avatar size="50px" style="position:absolute; top:20px;">
125 <img src="/static/icon/user.png"> 125 <img src="/static/icon/user.png">
126 </v-avatar> 126 </v-avatar>
127 </v-flex> 127 </v-flex>
128 <v-card-text> 128 <v-card-text>
129 <v-container grid-list-md> 129 <v-container grid-list-md>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex> 131 <v-flex>
132 <br> 132 <br>
133 <br> 133 <br>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1">Class Name:</h5> 136 <h5 class="right my-1">Class Name:</h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.classNum }}</h5> 139 <h5 class="my-1">{{ editedItem.classNum }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-card-text> 145 </v-card-text>
146 </v-card> 146 </v-card>
147 </v-dialog> 147 </v-dialog>
148 148
149 <v-snackbar 149 <v-snackbar
150 :timeout="timeout" 150 :timeout="timeout"
151 :top="y === 'top'" 151 :top="y === 'top'"
152 :right="x === 'right'" 152 :right="x === 'right'"
153 :vertical="mode === 'vertical'" 153 :vertical="mode === 'vertical'"
154 v-model="snackbar" 154 v-model="snackbar"
155 color="success" 155 color="success"
156 >{{ text }}</v-snackbar> 156 >{{ text }}</v-snackbar>
157 157
158 <!-- ****** EXISTING-USERS Classess Table ****** --> 158 <!-- ****** EXISTING-USERS Classess Table ****** -->
159 <v-data-table 159 <v-data-table
160 :headers="headers" 160 :headers="headers"
161 :items="desserts" 161 :items="desserts"
162 :pagination.sync="pagination" 162 :pagination.sync="pagination"
163 :search="search" 163 :search="search"
164 > 164 >
165 <template slot="items" slot-scope="props"> 165 <template slot="items" slot-scope="props">
166 <td id="td" class="text-xs-center">{{ props.index}}</td> 166 <td id="td" class="text-xs-center">{{ props.index}}</td>
167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td> 167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td>
168 <td class="text-xs-center"> 168 <td class="text-xs-center">
169 <span> 169 <span>
170 <img 170 <img
171 style="cursor:pointer; width:25px; height:18px; " 171 style="cursor:pointer; width:25px; height:18px; "
172 class="mr-5" 172 class="mr-5"
173 @click="profile(props.item)" 173 @click="profile(props.item)"
174 src="/static/icon/eye1.png" 174 src="/static/icon/eye1.png"
175 > 175 >
176 <img 176 <img
177 style="cursor:pointer; width:20px; height:18px; " 177 style="cursor:pointer; width:20px; height:18px; "
178 class="mr-5" 178 class="mr-5"
179 @click="editItem(props.item)" 179 @click="editItem(props.item)"
180 src="/static/icon/edit1.png" 180 src="/static/icon/edit1.png"
181 > 181 >
182 <img 182 <img
183 style="cursor:pointer; height:20px; " 183 style="cursor:pointer; height:20px; "
184 class="mr-5" 184 class="mr-5"
185 @click="deleteItem(props.item)" 185 @click="deleteItem(props.item)"
186 src="/static/icon/delete1.png" 186 src="/static/icon/delete1.png"
187 > 187 >
188 </span> 188 </span>
189 </td> 189 </td>
190 </template> 190 </template>
191 <v-alert 191 <v-alert
192 slot="no-results" 192 slot="no-results"
193 :value="true" 193 :value="true"
194 color="error" 194 color="error"
195 icon="warning" 195 icon="warning"
196 >Your search for "{{ search }}" found no results.</v-alert> 196 >Your search for "{{ search }}" found no results.</v-alert>
197 </v-data-table> 197 </v-data-table>
198 </v-tab-item> 198 </v-tab-item>
199 199
200 <!-- ****** ADD multiple Classess ****** --> 200 <!-- ****** ADD multiple Classess ****** -->
201 <v-tab-item> 201 <v-tab-item>
202 <v-container> 202 <v-container>
203 <v-snackbar 203 <v-snackbar
204 :timeout="timeout" 204 :timeout="timeout"
205 :top="y === 'top'" 205 :top="y === 'top'"
206 :right="x === 'right'" 206 :right="x === 'right'"
207 :vertical="mode === 'vertical'" 207 :vertical="mode === 'vertical'"
208 v-model="snackbar" 208 v-model="snackbar"
209 color="success" 209 color="success"
210 >{{ text }}</v-snackbar> 210 >{{ text }}</v-snackbar>
211 <v-flex xs12 sm8 offset-sm2 class="top"> 211 <v-flex xs12 sm8 offset-sm2 class="top">
212 <v-card flat> 212 <v-card flat>
213 <v-container fluid fill-height> 213 <v-container fluid fill-height>
214 <v-layout align-center> 214 <v-layout align-center>
215 <v-flex xs12> 215 <v-flex xs12>
216 <v-flex offset-xs5> 216 <v-flex offset-xs5>
217 <v-avatar size="55px"> 217 <v-avatar size="55px">
218 <img src="/static/icon/user.png"> 218 <img src="/static/icon/user.png">
219 </v-avatar> 219 </v-avatar>
220 </v-flex> 220 </v-flex>
221 <v-form ref="form" v-model="valid" lazy-validation> 221 <v-form ref="form" v-model="valid" lazy-validation>
222 <v-layout> 222 <v-layout>
223 <v-flex xs4 class="pt-4 subheading"> 223 <v-flex xs4 class="pt-4 subheading">
224 <label class="right">Class Name:</label> 224 <label class="right">Class Name:</label>
225 </v-flex> 225 </v-flex>
226 <v-flex xs6 class="ml-3"> 226 <v-flex xs6 class="ml-3">
227 <v-text-field 227 <v-text-field
228 v-model="addclasses.classNum" 228 v-model="addclasses.classNum"
229 placeholder="fill your class Name" 229 placeholder="fill your class Name"
230 name="name" 230 name="name"
231 type="text" 231 type="text"
232 :rules="nameRules" 232 :rules="nameRules"
233 required 233 required
234 ></v-text-field> 234 ></v-text-field>
235 </v-flex> 235 </v-flex>
236 </v-layout> 236 </v-layout>
237 <v-layout> 237 <v-layout>
238 <v-flex xs12 sm9 offset-sm2> 238 <v-flex xs12 sm9 offset-sm2>
239 <v-card-actions> 239 <v-card-actions>
240 <v-btn @click="clear" round dark>clear</v-btn> 240 <v-btn @click="clear" round dark>clear</v-btn>
241 <v-spacer></v-spacer> 241 <v-spacer></v-spacer>
242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
243 </v-card-actions> 243 </v-card-actions>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-form> 246 </v-form>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 </v-container> 249 </v-container>
250 </v-card> 250 </v-card>
251 </v-flex> 251 </v-flex>
252 </v-container> 252 </v-container>
253 </v-tab-item> 253 </v-tab-item>
254 </v-tabs> 254 </v-tabs>
255 <div class="loader" v-if="showLoader"> 255 <div class="loader" v-if="showLoader">
256 <v-progress-circular indeterminate color="white"></v-progress-circular> 256 <v-progress-circular indeterminate color="white"></v-progress-circular>
257 </div> 257 </div>
258 </v-app> 258 </v-app>
259 </template> 259 </template>
260 260
261 <script> 261 <script>
262 import http from "@/Services/http.js"; 262 import http from "@/Services/http.js";
263 import Util from "@/util"; 263 import Util from "@/util";
264 264
265 export default { 265 export default {
266 data: () => ({ 266 data: () => ({
267 snackbar: false, 267 snackbar: false,
268 y: "top", 268 y: "top",
269 x: "right", 269 x: "right",
270 mode: "", 270 mode: "",
271 timeout: 3000, 271 timeout: 3000,
272 text: "", 272 text: "",
273 showLoader:false, 273 showLoader:false,
274 loading: false, 274 loading: false,
275 date: null, 275 date: null,
276 search: "", 276 search: "",
277 dialog: false, 277 dialog: false,
278 dialog1: false, 278 dialog1: false,
279 valid: true, 279 valid: true,
280 isActive: true, 280 isActive: true,
281 newActive: false, 281 newActive: false,
282 AddUsercredentials: {}, 282 AddUsercredentials: {},
283 pagination: { 283 pagination: {
284 rowsPerPage: 15 284 rowsPerPage: 15
285 }, 285 },
286 nameRules: [v => !!v || " Full Name is required"], 286 nameRules: [v => !!v || " Full Name is required"],
287 headers: [ 287 headers: [
288 { 288 {
289 text: "No", 289 text: "No",
290 align: "center", 290 align: "center",
291 sortable: false, 291 sortable: false,
292 value: "No" 292 value: "No"
293 }, 293 },
294 { text: "Class Name", value: "classNum", sortable: false, align: "center" }, 294 { text: "Class Name", value: "classNum", sortable: false, align: "center" },
295 { text: "Action", value: "", sortable: false, align: "center" } 295 { text: "Action", value: "", sortable: false, align: "center" }
296 ], 296 ],
297 desserts: [], 297 desserts: [],
298 editedIndex: -1, 298 editedIndex: -1,
299 editedItem: { 299 editedItem: {
300 classNum: "" 300 classNum: ""
301 }, 301 },
302 addclasses:{ 302 addclasses:{
303 classNum: "" 303 classNum: ""
304 }, 304 },
305 defaultItem: { 305 defaultItem: {
306 classNum: "" 306 classNum: ""
307 }, 307 },
308 items: [ 308 items: [
309 { 309 {
310 href: "/changepassword", 310 href: "/changepassword",
311 title: "Change Password", 311 title: "Change Password",
312 click: e => { 312 click: e => {
313 console.log(e); 313 console.log(e);
314 } 314 }
315 }, 315 },
316 { 316 {
317 href: "#", 317 href: "#",
318 title: "Logout", 318 title: "Logout",
319 click: e => { 319 click: e => {
320 window.getApp.$emit("APP_LOGOUT"); 320 window.getApp.$emit("APP_LOGOUT");
321 } 321 }
322 } 322 }
323 ] 323 ]
324 }), 324 }),
325 methods: { 325 methods: {
326 getClassList() { 326 getClassList() {
327 this.showLoader = true; 327 this.showLoader = true;
328 var token = this.$store.state.token; 328 var token = this.$store.state.token;
329 http() 329 http()
330 .get("/getClassesList", { 330 .get("/getClassesList", {
331 headers: { Authorization: "Bearer " + token } 331 headers: { Authorization: "Bearer " + token }
332 }) 332 })
333 .then(response => { 333 .then(response => {
334 this.desserts = response.data.data; 334 this.desserts = response.data.data;
335 this.showLoader = false; 335 this.showLoader = false;
336 // console.log("getClassList=====>", this.desserts); 336 // console.log("getClassList=====>", this.desserts);
337 }) 337 })
338 .catch(err => { 338 .catch(err => {
339 // console.log("err====>", err); 339 // console.log("err====>", err);
340 this.showLoader = false; 340 this.showLoader = false;
341 this.$router.replace({ path: "/" }); 341 this.$router.replace({ path: "/" });
342 }); 342 });
343 }, 343 },
344 editItem(item) { 344 editItem(item) {
345 this.editedIndex = this.desserts.indexOf(item); 345 this.editedIndex = this.desserts.indexOf(item);
346 this.editedItem = Object.assign({}, item); 346 this.editedItem = Object.assign({}, item);
347 this.dialog = true; 347 this.dialog = true;
348 }, 348 },
349 profile(item) { 349 profile(item) {
350 this.editedIndex = this.desserts.indexOf(item); 350 this.editedIndex = this.desserts.indexOf(item);
351 this.editedItem = Object.assign({}, item); 351 this.editedItem = Object.assign({}, item);
352 this.dialog1 = true; 352 this.dialog1 = true;
353 }, 353 },
354 deleteItem(item) { 354 deleteItem(item) {
355 let deleteStudent = { 355 let deleteStudent = {
356 classId: item._id 356 classId: item._id
357 }; 357 };
358 http() 358 http()
359 .delete( 359 .delete(
360 "/deleteClass", 360 "/deleteClass",
361 confirm("Are you sure you want to delete this?") && { 361 confirm("Are you sure you want to delete this?") && {
362 params: deleteStudent 362 params: deleteStudent
363 } 363 }
364 ) 364 )
365 .then(response => { 365 .then(response => {
366 // console.log("deleteUers",deleteStudent) 366 // console.log("deleteUers",deleteStudent)
367 if ((this.snackbar = true)) { 367 if ((this.snackbar = true)) {
368 this.text = "Successfully delete Existing User"; 368 this.text = "Successfully delete Existing User";
369 } 369 }
370 this.getClassList(); 370 this.getClassList();
371 }) 371 })
372 .catch(error => { 372 .catch(error => {
373 // console.log(error); 373 // console.log(error);
374 }); 374 });
375 }, 375 },
376 activeTab(type) { 376 activeTab(type) {
377 switch (type) { 377 switch (type) {
378 case "existing": 378 case "existing":
379 this.newActive = false; 379 this.newActive = false;
380 this.isActive = true; 380 this.isActive = true;
381 break; 381 break;
382 382
383 default: 383 default:
384 this.newActive = true; 384 this.newActive = true;
385 this.isActive = false; 385 this.isActive = false;
386 break; 386 break;
387 } 387 }
388 }, 388 },
389 close() { 389 close() {
390 this.dialog = false; 390 this.dialog = false;
391 setTimeout(() => { 391 setTimeout(() => {
392 this.editedItem = Object.assign({}, this.defaultItem); 392 this.editedItem = Object.assign({}, this.defaultItem);
393 this.editedIndex = -1; 393 this.editedIndex = -1;
394 }, 300); 394 }, 300);
395 }, 395 },
396 close1() { 396 close1() {
397 this.dialog1 = false; 397 this.dialog1 = false;
398 }, 398 },
399 submit() { 399 submit() {
400 if (this.$refs.form.validate()) { 400 if (this.$refs.form.validate()) {
401 let addClass = { 401 let addClass = {
402 classNum: this.addclasses.classNum 402 classNum: this.addclasses.classNum
403 }; 403 };
404 console.log(addClass); 404 console.log(addClass);
405 http() 405 http()
406 .post("/createClass", addClass) 406 .post("/createClass", addClass)
407 .then(response => { 407 .then(response => {
408 this.getClassList(); 408 this.getClassList();
409 if ((this.snackbar = true)) { 409 if ((this.snackbar = true)) {
410 this.text = "New user added successfully"; 410 this.text = "New user added successfully";
411 } 411 }
412 412
413 this.clear(); 413 this.clear();
414 }) 414 })
415 .catch(error => { 415 .catch(error => {
416 // console.log(error); 416 // console.log(error);
417 if ((this.snackbar = true)) { 417 if ((this.snackbar = true)) {
418 this.text = error.response.data.message; 418 this.text = error.response.data.message;
419 } 419 }
420 }); 420 });
421 } 421 }
422 }, 422 },
423 mail() {}, 423 mail() {},
424 download() {}, 424 download() {},
425 clear() { 425 clear() {
426 this.$refs.form.reset(); 426 this.$refs.form.reset();
427 }, 427 },
428 save() { 428 save() {
429 let editClass = { 429 let editClass = {
430 classId: this.editedItem._id, 430 classId: this.editedItem._id,
431 classNum: this.editedItem.classNum 431 classNum: this.editedItem.classNum
432 }; 432 };
433 http() 433 http()
434 .put("/updateClass", editClass) 434 .put("/updateClass", editClass)
435 .then(response => { 435 .then(response => {
436 console.log("editClass", editClass); 436 console.log("editClass", editClass);
437 if ((this.snackbar = true)) { 437 if ((this.snackbar = true)) {
438 this.text = "Successfully Edit Existing User"; 438 this.text = "Successfully Edit Existing User";
439 } 439 }
440 this.getClassList(); 440 this.getClassList();
441 }) 441 })
442 .catch(error => { 442 .catch(error => {
443 // console.log(error); 443 // console.log(error);
444 }); 444 });
445 this.close(); 445 this.close();
446 }, 446 },
447 handleDrawerToggle() { 447 handleDrawerToggle() {
448 window.getApp.$emit("APP_DRAWER_TOGGLED"); 448 window.getApp.$emit("APP_DRAWER_TOGGLED");
449 }, 449 },
450 handleFullScreen() { 450 handleFullScreen() {
451 Util.toggleFullScreen(); 451 Util.toggleFullScreen();
452 } 452 }
453 }, 453 },
454 mounted() { 454 mounted() {
455 this.getClassList(); 455 this.getClassList();
456 // console.log("Id",this.$store.state.id) 456 // console.log("Id",this.$store.state.id)
457 // console.log("token",this.$store.state.token) 457 // console.log("token",this.$store.state.token)
458 }, 458 },
459 computed: { 459 computed: {
460 toolbarColor() { 460 toolbarColor() {
461 return this.$vuetify.options.extra.mainNav; 461 return this.$vuetify.options.extra.mainNav;
462 } 462 }
463 } 463 }
464 }; 464 };
465 </script> 465 </script>
466 <style scoped> 466 <style scoped>
467 .v-tabs__div { 467 .v-tabs__div {
468 text-transform: none; 468 text-transform: none;
469 } 469 }
470 .v-input__prepend-outer { 470 .v-input__prepend-outer {
471 margin-right: 0px !important; 471 margin-right: 0px !important;
472 } 472 }
473 .v-card__actions .v-btn { 473 .v-card__actions .v-btn {
474 margin: 0 15px; 474 margin: 0 15px;
475 min-width: 120px; 475 min-width: 120px;
476 } 476 }
477 .primary { 477 .primary {
478 background-color: #aaa !important; 478 background-color: #aaa !important;
479 border-color: #aaa !important; 479 border-color: #aaa !important;
480 } 480 }
481 h4 { 481 h4 {
482 background-repeat: no-repeat; 482 background-repeat: no-repeat;
483 padding: 8px; 483 padding: 8px;
484 margin: auto; 484 margin: auto;
485 font-size: 25px; 485 font-size: 25px;
486 } 486 }
487 #name { 487 #name {
488 position: absolute; 488 position: absolute;
489 left: 100px; 489 left: 100px;
490 top: 17px; 490 top: 17px;
491 } 491 }
492 #icon { 492 #icon {
493 position: absolute; 493 position: absolute;
494 right: 8px; 494 right: 8px;
495 top: 8px; 495 top: 8px;
496 } 496 }
497 #m { 497 #m {
498 position: relative; 498 position: relative;
499 left: 135px; 499 left: 135px;
500 top: -15px; 500 top: -15px;
501 } 501 }
502 #G { 502 #G {
503 position: absolute; 503 position: absolute;
504 top: 38px; 504 top: 38px;
505 color: white; 505 color: white;
506 } 506 }
507 #bt { 507 #bt {
508 position: relative; 508 position: relative;
509 top: -20px; 509 top: -20px;
510 left: 115px; 510 left: 115px;
511 } 511 }
512 #e { 512 #e {
513 position: relative; 513 position: relative;
514 top: 5px; 514 top: 5px;
515 right: -30px; 515 right: -30px;
516 height: 17px; 516 height: 17px;
517 cursor: pointer; 517 cursor: pointer;
518 } 518 }
519 #d { 519 #d {
520 position: relative; 520 position: relative;
521 top: 5px; 521 top: 5px;
522 right: -70px; 522 right: -70px;
523 height: 17px; 523 height: 17px;
524 cursor: pointer; 524 cursor: pointer;
525 } 525 }
526 #td { 526 #td {
527 border: 1px solid #dddddd; 527 border: 1px solid #dddddd;
528 text-align: left; 528 text-align: left;
529 padding: 8px; 529 padding: 8px;
530 } 530 }
531 #dialog { 531 #dialog {
532 height: 550px; 532 height: 550px;
533 } 533 }
534 .active { 534 .active {
535 background-color: black; 535 background-color: black;
536 color: white !important; 536 color: white !important;
537 } 537 }
538 .activebtn { 538 .activebtn {
539 color: black !important; 539 color: black !important;
540 } 540 }
541 #flex { 541 #flex {
542 height: 300px; 542 height: 300px;
543 } 543 }
544 .top { 544 .top {
545 margin-top: 100px; 545 margin-top: 100px;
546 } 546 }
547 .v-tabs__item a { 547 .v-tabs__item a {
548 font-size: 16px !important; 548 font-size: 16px !important;
549 } 549 }
550 @media screen and (max-width: 769px) { 550 @media screen and (max-width: 769px) {
551 .top { 551 .top {
552 margin-top: 0 !important; 552 margin-top: 0 !important;
553 } 553 }
554 .userSearch .v-icon { 554 .userSearch .v-icon {
555 font-size: 20px !important; 555 font-size: 20px !important;
556 margin-left: 20px; 556 margin-left: 20px;
557 } 557 }
558 } 558 }
559 @media screen and (max-width: 380px) { 559 @media screen and (max-width: 380px) {
560 .pl-3 {
561 padding-left: 0px !important;
562 }
560 .right { 563 .right {
561 float: none !important; 564 float: none !important;
562 } 565 }
563 .subheading { 566 .subheading {
564 font-size: 14px !important; 567 font-size: 14px !important;
565 } 568 }
566 .v-card__actions .v-btn { 569 .v-card__actions .v-btn {
567 margin: 0 0px; 570 margin: 0 0px;
568 min-width: 100px; 571 min-width: 100px;
569 } 572 }
570 .subheading { 573 .subheading {
571 font-size: 12px !important; 574 font-size: 12px !important;
572 } 575 }
573 h5 { 576 h5 {
574 font-size: 13px; 577 font-size: 13px;
575 } 578 }
576 } 579 }
577 .v-icon { 580 .v-icon {
578 font-size: 30px; 581 font-size: 30px;
579 } 582 }
580 @media screen and (min-width: 1270px) { 583 @media screen and (min-width: 1270px) {
581 .hide { 584 .hide {
582 display: none; 585 display: none;
583 } 586 }
584 } 587 }
585 @media screen and (max-width: 420px) { 588 @media screen and (max-width: 420px) {
586 .userSearch .v-text-field .v-label { 589 .userSearch .v-text-field .v-label {
587 line-height: 24px !important; 590 line-height: 24px !important;
588 } 591 }
589 .userSearch .v-label { 592 .userSearch .v-label {
590 font-size: 13px !important; 593 font-size: 13px !important;
591 } 594 }
592 .v-list__tile { 595 .v-list__tile {
593 font-size: 14px; 596 font-size: 14px;
594 padding: 0 10px; 597 padding: 0 10px;
595 } 598 }
596 .name { 599 .name {
597 font-size: 15px; 600 font-size: 15px;
598 } 601 }
599 } 602 }
600 </style> 603 </style>
src/pages/Event/event.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING EVENTS ****** --> 7 <!-- ****** SEARCH ALL EXISTING EVENTS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Events" 12 label="Find your Events"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Event</v-tab> 54 >Existing Event</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Event</v-tab> 62 >Add New Event</v-tab>
63 63
64 <!-- ****** EDITS EVENTS DETAILS ****** --> 64 <!-- ****** EDITS EVENTS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Event</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <!-- <v-flex xs12 sm6> --> 109 <!-- <v-flex xs12 sm6> -->
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Title:</label> 112 <label class="right">Title:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs6 class="ml-3"> 114 <v-flex xs6 class="ml-3">
115 <v-text-field 115 <v-text-field
116 v-model="editedItem.title" 116 v-model="editedItem.title"
117 placeholder="fill your Title" 117 placeholder="fill your Title"
118 name="name" 118 name="name"
119 type="text" 119 type="text"
120 required 120 required
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <!-- </v-flex> --> 124 <!-- </v-flex> -->
125 <!-- <v-flex xs12 sm6> --> 125 <!-- <v-flex xs12 sm6> -->
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label> 128 <label class="right">Description:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs6 class="ml-3"> 130 <v-flex xs6 class="ml-3">
131 <v-text-field 131 <v-text-field
132 placeholder="fill your Description" 132 placeholder="fill your Description"
133 v-model="editedItem.description" 133 v-model="editedItem.description"
134 type="text" 134 type="text"
135 name="email" 135 name="email"
136 required 136 required
137 ></v-text-field> 137 ></v-text-field>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-layout>
141 <v-flex xs12 sm9 offset-sm2> 140 <v-flex xs12 sm9 offset-sm2>
142 <v-card-actions> 141 <v-card-actions>
143 <v-btn round dark @click.native="close">Cancel</v-btn> 142 <v-btn round dark @click.native="close">Cancel</v-btn>
144 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
145 <v-btn round dark @click="save">Save</v-btn> 144 <v-btn round dark @click="save">Save</v-btn>
146 </v-card-actions> 145 </v-card-actions>
147 </v-flex> 146 </v-flex>
148 </v-layout> 147 </v-layout>
149 </v-container> 148 </v-container>
150 </v-form> 149 </v-form>
151 </v-card> 150 </v-card>
152 </v-flex> 151 </v-flex>
153 </v-dialog> 152 </v-dialog>
154 153
155 <!-- ****** VIEW PROFIL EVENTS ****** --> 154 <!-- ****** VIEW PROFIL EVENTS ****** -->
156 155
157 <v-dialog v-model="dialog1" max-width="600px"> 156 <v-dialog v-model="dialog1" max-width="600px">
158 <v-toolbar color="white"> 157 <v-toolbar color="white">
159 <v-spacer></v-spacer> 158 <v-spacer></v-spacer>
160 <v-toolbar-title>Profile</v-toolbar-title> 159 <v-toolbar-title>Profile</v-toolbar-title>
161 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
162 <v-icon @click="close1">close</v-icon> 161 <v-icon @click="close1">close</v-icon>
163 </v-toolbar> 162 </v-toolbar>
164 <v-card> 163 <v-card>
165 <v-flex align-center justify-center layout text-xs-center> 164 <v-flex align-center justify-center layout text-xs-center>
166 <v-avatar size="50px" style="position:absolute; top:20px;"> 165 <v-avatar size="50px" style="position:absolute; top:20px;">
167 <img src="/static/icon/user.png"> 166 <img src="/static/icon/user.png">
168 </v-avatar> 167 </v-avatar>
169 </v-flex> 168 </v-flex>
170 <v-card-text> 169 <v-card-text>
171 <v-container grid-list-md> 170 <v-container grid-list-md>
172 <v-layout wrap> 171 <v-layout wrap>
173 <v-flex> 172 <v-flex>
174 <br> 173 <br>
175 <br> 174 <br>
176 <v-layout> 175 <v-layout>
177 <v-flex xs5 sm6> 176 <v-flex xs5 sm6>
178 <h5 class="right my-1">Title:</h5> 177 <h5 class="right my-1">Title:</h5>
179 </v-flex> 178 </v-flex>
180 <v-flex sm6 xs8> 179 <v-flex sm6 xs8>
181 <h5 class="my-1">{{ editedItem.title }}</h5> 180 <h5 class="my-1">{{ editedItem.title }}</h5>
182 </v-flex> 181 </v-flex>
183 </v-layout> 182 </v-layout>
184 <v-layout> 183 <v-layout>
185 <v-flex xs5 sm6> 184 <v-flex xs5 sm6>
186 <h5 class="right my-1">Description:</h5> 185 <h5 class="right my-1">Description:</h5>
187 </v-flex> 186 </v-flex>
188 <v-flex sm6 xs8> 187 <v-flex sm6 xs8>
189 <h5 class="my-1">{{ editedItem.description }}</h5> 188 <h5 class="my-1">{{ editedItem.description }}</h5>
190 </v-flex> 189 </v-flex>
191 </v-layout> 190 </v-layout>
192 </v-flex> 191 </v-flex>
193 </v-layout> 192 </v-layout>
194 </v-container> 193 </v-container>
195 </v-card-text> 194 </v-card-text>
196 </v-card> 195 </v-card>
197 </v-dialog> 196 </v-dialog>
198 197
199 <v-snackbar 198 <v-snackbar
200 :timeout="timeout" 199 :timeout="timeout"
201 :top="y === 'top'" 200 :top="y === 'top'"
202 :right="x === 'right'" 201 :right="x === 'right'"
203 :vertical="mode === 'vertical'" 202 :vertical="mode === 'vertical'"
204 v-model="snackbar" 203 v-model="snackbar"
205 color="success" 204 color="success"
206 >{{ text }}</v-snackbar> 205 >{{ text }}</v-snackbar>
207 206
208 <!-- ****** EXISTING-USERS EVENTS TABLE ****** --> 207 <!-- ****** EXISTING-USERS EVENTS TABLE ****** -->
209 <v-data-table 208 <v-data-table
210 :headers="headers" 209 :headers="headers"
211 :items="desserts" 210 :items="desserts"
212 :pagination.sync="pagination" 211 :pagination.sync="pagination"
213 :search="search" 212 :search="search"
214 > 213 >
215 <template slot="items" slot-scope="props"> 214 <template slot="items" slot-scope="props">
216 <td id="td" class="text-xs-center">{{ props.index}}</td> 215 <td id="td" class="text-xs-center">{{ props.index}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 216 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
218 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 217 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
219 218
220 <td class="text-xs-center"> 219 <td class="text-xs-center">
221 <span> 220 <span>
222 <img 221 <img
223 style="cursor:pointer; width:25px; height:18px; " 222 style="cursor:pointer; width:25px; height:18px; "
224 class="mr-5" 223 class="mr-5"
225 @click="profile(props.item)" 224 @click="profile(props.item)"
226 src="/static/icon/eye1.png" 225 src="/static/icon/eye1.png"
227 > 226 >
228 <img 227 <img
229 style="cursor:pointer; width:20px; height:18px; " 228 style="cursor:pointer; width:20px; height:18px; "
230 class="mr-5" 229 class="mr-5"
231 @click="editItem(props.item)" 230 @click="editItem(props.item)"
232 src="/static/icon/edit1.png" 231 src="/static/icon/edit1.png"
233 > 232 >
234 <img 233 <img
235 style="cursor:pointer; height:20px; " 234 style="cursor:pointer; height:20px; "
236 class="mr-5" 235 class="mr-5"
237 @click="deleteItem(props.item)" 236 @click="deleteItem(props.item)"
238 src="/static/icon/delete1.png" 237 src="/static/icon/delete1.png"
239 > 238 >
240 </span> 239 </span>
241 </td> 240 </td>
242 </template> 241 </template>
243 <v-alert 242 <v-alert
244 slot="no-results" 243 slot="no-results"
245 :value="true" 244 :value="true"
246 color="error" 245 color="error"
247 icon="warning" 246 icon="warning"
248 >Your search for "{{ search }}" found no results.</v-alert> 247 >Your search for "{{ search }}" found no results.</v-alert>
249 </v-data-table> 248 </v-data-table>
250 </v-tab-item> 249 </v-tab-item>
251 250
252 <!-- ****** ADD MULTIPLE EVENTS ****** --> 251 <!-- ****** ADD MULTIPLE EVENTS ****** -->
253 252
254 <v-tab-item> 253 <v-tab-item>
255 <v-container> 254 <v-container>
256 <v-snackbar 255 <v-snackbar
257 :timeout="timeout" 256 :timeout="timeout"
258 :top="y === 'top'" 257 :top="y === 'top'"
259 :right="x === 'right'" 258 :right="x === 'right'"
260 :vertical="mode === 'vertical'" 259 :vertical="mode === 'vertical'"
261 v-model="snackbar" 260 v-model="snackbar"
262 color="success" 261 color="success"
263 >{{ text }}</v-snackbar> 262 >{{ text }}</v-snackbar>
264 <v-flex xs12 sm8 offset-sm2 class="top"> 263 <v-flex xs12 sm8 offset-sm2 class="top">
265 <v-card flat> 264 <v-card flat>
266 <v-container fluid fill-height> 265 <v-container fluid fill-height>
267 <v-layout align-center> 266 <v-layout align-center>
268 <v-flex xs12> 267 <v-flex xs12>
269 <v-form ref="form" v-model="valid" lazy-validation> 268 <v-form ref="form" v-model="valid" lazy-validation>
270 <v-layout> 269 <v-layout>
271 <v-flex 270 <v-flex
272 xs12 271 xs12
273 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 272 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
274 > 273 >
275 <v-avatar size="100px"> 274 <v-avatar size="100px">
276 <img src="/static/icon/user.png" v-if="!imageUrl"> 275 <img src="/static/icon/user.png" v-if="!imageUrl">
277 </v-avatar> 276 </v-avatar>
278 <input 277 <input
279 type="file" 278 type="file"
280 style="display: none" 279 style="display: none"
281 ref="image" 280 ref="image"
282 accept="image/*" 281 accept="image/*"
283 @change="onFilePicked" 282 @change="onFilePicked"
284 > 283 >
285 <img 284 <img
286 :src="imageData.imageUrl" 285 :src="imageData.imageUrl"
287 height="150" 286 height="150"
288 v-if="imageUrl" 287 v-if="imageUrl"
289 style="border-radius:50%; width:200px" 288 style="border-radius:50%; width:200px"
290 > 289 >
291 </v-flex> 290 </v-flex>
292 </v-layout> 291 </v-layout>
293 <v-layout> 292 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 293 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Title:</label> 294 <label class="right">Title:</label>
296 </v-flex> 295 </v-flex>
297 <v-flex xs6 class="ml-3"> 296 <v-flex xs6 class="ml-3">
298 <v-text-field 297 <v-text-field
299 v-model="addEvents.title" 298 v-model="addEvents.title"
300 placeholder="fill your Title" 299 placeholder="fill your Title"
301 name="name" 300 name="name"
302 type="text" 301 type="text"
303 :rules="titleRules" 302 :rules="titleRules"
304 required 303 required
305 ></v-text-field> 304 ></v-text-field>
306 </v-flex> 305 </v-flex>
307 </v-layout> 306 </v-layout>
308 <v-layout> 307 <v-layout>
309 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
310 <label class="right">Description:</label> 309 <label class="right">Description:</label>
311 </v-flex> 310 </v-flex>
312 <v-flex xs6 class="ml-3"> 311 <v-flex xs6 class="ml-3">
313 <v-text-field 312 <v-text-field
314 v-model="addEvents.description" 313 v-model="addEvents.description"
315 placeholder="fill your Description" 314 placeholder="fill your Description"
316 name="name" 315 name="name"
317 type="text" 316 type="text"
318 :rules="descriptionRules" 317 :rules="descriptionRules"
319 required 318 required
320 ></v-text-field> 319 ></v-text-field>
321 </v-flex> 320 </v-flex>
322 </v-layout> 321 </v-layout>
323 <v-layout> 322 <v-layout>
324 <v-flex xs12 sm9 offset-sm2> 323 <v-flex xs12 sm9 offset-sm2>
325 <v-card-actions> 324 <v-card-actions>
326 <v-btn @click="clear" round dark>clear</v-btn> 325 <v-btn @click="clear" round dark>clear</v-btn>
327 <v-spacer></v-spacer> 326 <v-spacer></v-spacer>
328 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
329 </v-card-actions> 328 </v-card-actions>
330 </v-flex> 329 </v-flex>
331 </v-layout> 330 </v-layout>
332 </v-form> 331 </v-form>
333 </v-flex> 332 </v-flex>
334 </v-layout> 333 </v-layout>
335 </v-container> 334 </v-container>
336 </v-card> 335 </v-card>
337 </v-flex> 336 </v-flex>
338 </v-container> 337 </v-container>
339 </v-tab-item> 338 </v-tab-item>
340 </v-tabs> 339 </v-tabs>
341 <div class="loader" v-if="showLoader"> 340 <div class="loader" v-if="showLoader">
342 <v-progress-circular indeterminate color="white"></v-progress-circular> 341 <v-progress-circular indeterminate color="white"></v-progress-circular>
343 </div> 342 </div>
344 </v-app> 343 </v-app>
345 </template> 344 </template>
346 345
347 <script> 346 <script>
348 import http from "@/Services/http.js"; 347 import http from "@/Services/http.js";
349 import Util from "@/util"; 348 import Util from "@/util";
350 349
351 export default { 350 export default {
352 data: () => ({ 351 data: () => ({
353 snackbar: false, 352 snackbar: false,
354 y: "top", 353 y: "top",
355 x: "right", 354 x: "right",
356 mode: "", 355 mode: "",
357 timeout: 3000, 356 timeout: 3000,
358 text: "", 357 text: "",
359 showLoader:false, 358 showLoader: false,
360 loading: false, 359 loading: false,
361 date: null, 360 date: null,
362 search: "", 361 search: "",
363 dialog: false, 362 dialog: false,
364 dialog1: false, 363 dialog1: false,
365 valid: true, 364 valid: true,
366 isActive: true, 365 isActive: true,
367 newActive: false, 366 newActive: false,
368 addclass: [], 367 addclass: [],
369 addSection: [], 368 addSection: [],
370 gender: ["Male", "Female"], 369 gender: ["Male", "Female"],
371 AddUsercredentials: {}, 370 AddUsercredentials: {},
372 pagination: { 371 pagination: {
373 rowsPerPage: 15 372 rowsPerPage: 15
374 }, 373 },
375 imageData: {}, 374 imageData: {},
376 imageName: "", 375 imageName: "",
377 imageUrl: "", 376 imageUrl: "",
378 imageFile: "", 377 imageFile: "",
379 titleRules: [v => !!v || " Title is required"], 378 titleRules: [v => !!v || " Title is required"],
380 descriptionRules: [v => !!v || " Description is required"], 379 descriptionRules: [v => !!v || " Description is required"],
381 headers: [ 380 headers: [
382 { 381 {
383 text: "No", 382 text: "No",
384 align: "center", 383 align: "center",
385 sortable: false, 384 sortable: false,
386 value: "No" 385 value: "No"
387 }, 386 },
388 { text: "Title", value: "title", sortable: false, align: "center" }, 387 { text: "Title", value: "title", sortable: false, align: "center" },
389 { text: "Description", value: "description", sortable: false, align: "center" }, 388 {
389 text: "Description",
390 value: "description",
391 sortable: false,
392 align: "center"
393 },
390 { text: "Action", value: "", sortable: false, align: "center" } 394 { text: "Action", value: "", sortable: false, align: "center" }
391 ], 395 ],
392 desserts: [], 396 desserts: [],
393 editedIndex: -1, 397 editedIndex: -1,
394 addEvents: { 398 addEvents: {
395 title: "", 399 title: "",
396 description: "" 400 description: ""
397 }, 401 },
398 editedItem: { 402 editedItem: {
399 title: "", 403 title: "",
400 description: "" 404 description: ""
401 }, 405 },
402 defaultItem: { 406 defaultItem: {
403 title: "", 407 title: "",
404 description: "" 408 description: ""
405 }, 409 },
406 userName: "", 410 userName: "",
407 items: [ 411 items: [
408 { 412 {
409 href: "/changepassword", 413 href: "/changepassword",
410 title: "Change Password", 414 title: "Change Password",
411 click: e => { 415 click: e => {
412 console.log(e); 416 console.log(e);
413 } 417 }
414 }, 418 },
415 { 419 {
416 href: "#", 420 href: "#",
417 title: "Logout", 421 title: "Logout",
418 click: e => { 422 click: e => {
419 window.getApp.$emit("APP_LOGOUT"); 423 window.getApp.$emit("APP_LOGOUT");
420 } 424 }
421 } 425 }
422 ] 426 ]
423 }), 427 }),
424 methods: { 428 methods: {
425 pickFile() { 429 pickFile() {
426 this.$refs.image.click(); 430 this.$refs.image.click();
427 }, 431 },
428 432
429 onFilePicked(e) { 433 onFilePicked(e) {
430 // console.log(e) 434 // console.log(e)
431 const files = e.target.files; 435 const files = e.target.files;
432 this.imageData.upload = e.target.files[0]; 436 this.imageData.upload = e.target.files[0];
433 if (files[0] !== undefined) { 437 if (files[0] !== undefined) {
434 this.imageName = files[0].name; 438 this.imageName = files[0].name;
435 if (this.imageName.lastIndexOf(".") <= 0) { 439 if (this.imageName.lastIndexOf(".") <= 0) {
436 return; 440 return;
437 } 441 }
438 const fr = new FileReader(); 442 const fr = new FileReader();
439 fr.readAsDataURL(files[0]); 443 fr.readAsDataURL(files[0]);
440 fr.addEventListener("load", () => { 444 fr.addEventListener("load", () => {
441 this.imageUrl = fr.result; 445 this.imageUrl = fr.result;
442 this.imageFile = files[0]; // this is an image file that can be sent to server... 446 this.imageFile = files[0]; // this is an image file that can be sent to server...
443 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 447 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
444 console.log("upload=======>", this.imageData.imageUrl); 448 console.log("upload=======>", this.imageData.imageUrl);
445 console.log("imageFile", this.imageFile); 449 console.log("imageFile", this.imageFile);
446 }); 450 });
447 } else { 451 } else {
448 this.imageName = ""; 452 this.imageName = "";
449 this.imageFile = ""; 453 this.imageFile = "";
450 this.imageUrl = ""; 454 this.imageUrl = "";
451 } 455 }
452 }, 456 },
453 getEventList() { 457 getEventList() {
454 this.showLoader = true; 458 this.showLoader = true;
455 var token = this.$store.state.token; 459 var token = this.$store.state.token;
456 http() 460 http()
457 .get("/getEventsList", { 461 .get("/getEventsList", {
458 headers: { Authorization: "Bearer " + token } 462 headers: { Authorization: "Bearer " + token }
459 }) 463 })
460 .then(response => { 464 .then(response => {
461 this.desserts = response.data.data; 465 this.desserts = response.data.data;
462 this.showLoader = false; 466 this.showLoader = false;
463 // console.log("getEventList=====>",this.desserts) 467 // console.log("getEventList=====>",this.desserts)
464 }) 468 })
465 .catch(err => { 469 .catch(err => {
466 this.showLoader = false; 470 this.showLoader = false;
467 // console.log("err====>", err); 471 // console.log("err====>", err);
468 this.$router.replace({ path: "/" }); 472 this.$router.replace({ path: "/" });
469 }); 473 });
470 }, 474 },
471 editItem(item) { 475 editItem(item) {
472 this.editedIndex = this.desserts.indexOf(item); 476 this.editedIndex = this.desserts.indexOf(item);
473 this.editedItem = Object.assign({}, item); 477 this.editedItem = Object.assign({}, item);
474 this.dialog = true; 478 this.dialog = true;
475 }, 479 },
476 profile(item) { 480 profile(item) {
477 this.editedIndex = this.desserts.indexOf(item); 481 this.editedIndex = this.desserts.indexOf(item);
478 this.editedItem = Object.assign({}, item); 482 this.editedItem = Object.assign({}, item);
479 this.dialog1 = true; 483 this.dialog1 = true;
480 }, 484 },
481 deleteItem(item) { 485 deleteItem(item) {
482 let deleteEvent = { 486 let deleteEvent = {
483 eventId: item._id 487 eventId: item._id
484 }; 488 };
485 http() 489 http()
486 .delete( 490 .delete(
487 "/deleteEvent", 491 "/deleteEvent",
488 confirm("Are you sure you want to delete this?") && { 492 confirm("Are you sure you want to delete this?") && {
489 params: deleteEvent 493 params: deleteEvent
490 } 494 }
491 ) 495 )
492 .then(response => { 496 .then(response => {
493 // console.log("deleteUers",deleteEvent) 497 // console.log("deleteUers",deleteEvent)
494 if ((this.snackbar = true)) { 498 if ((this.snackbar = true)) {
495 this.text = "Successfully delete Existing User"; 499 this.text = "Successfully delete Existing User";
496 } 500 }
497 this.getEventList(); 501 this.getEventList();
498 }) 502 })
499 .catch(error => { 503 .catch(error => {
500 // console.log(error); 504 // console.log(error);
501 }); 505 });
502 }, 506 },
503 activeTab(type) { 507 activeTab(type) {
504 switch (type) { 508 switch (type) {
505 case "existing": 509 case "existing":
506 this.newActive = false; 510 this.newActive = false;
507 this.isActive = true; 511 this.isActive = true;
508 break; 512 break;
509 513
510 default: 514 default:
511 this.newActive = true; 515 this.newActive = true;
512 this.isActive = false; 516 this.isActive = false;
513 break; 517 break;
514 } 518 }
515 }, 519 },
516 close() { 520 close() {
517 this.dialog = false; 521 this.dialog = false;
518 setTimeout(() => { 522 setTimeout(() => {
519 this.editedItem = Object.assign({}, this.defaultItem); 523 this.editedItem = Object.assign({}, this.defaultItem);
520 this.editedIndex = -1; 524 this.editedIndex = -1;
521 }, 300); 525 }, 300);
522 }, 526 },
523 close1() { 527 close1() {
524 this.dialog1 = false; 528 this.dialog1 = false;
525 }, 529 },
526 submit() { 530 submit() {
527 if (this.$refs.form.validate()) { 531 if (this.$refs.form.validate()) {
528 let imageData = new FormData(); 532 let imageData = new FormData();
529 imageData.append("upload", this.imageFile); 533 imageData.append("upload", this.imageFile);
530 console.log(imageData); 534 console.log(imageData);
531 let addEvent = { 535 let addEvent = {
532 title: this.addEvents.title, 536 title: this.addEvents.title,
533 description: this.addEvents.description 537 description: this.addEvents.description
534 }; 538 };
535 http() 539 http()
536 .post("/createEvent", addEvent) 540 .post("/createEvent", addEvent)
537 .then(response => { 541 .then(response => {
538 // console.log("addEvent=====>",addEvent) 542 // console.log("addEvent=====>",addEvent)
539 if ((this.snackbar = true)) { 543 if ((this.snackbar = true)) {
540 this.text = "New user added successfully"; 544 this.text = "New user added successfully";
541 } 545 }
542 this.getEventList(); 546 this.getEventList();
543 this.clear(); 547 this.clear();
544 }) 548 })
545 .catch(error => { 549 .catch(error => {
546 // console.log(error); 550 // console.log(error);
547 if ((this.snackbar = true)) { 551 if ((this.snackbar = true)) {
548 this.text = error.response.data.message; 552 this.text = error.response.data.message;
549 } 553 }
550 }); 554 });
551 } 555 }
552 }, 556 },
553 mail() {}, 557 mail() {},
554 download() {}, 558 download() {},
555 clear() { 559 clear() {
556 this.$refs.form.reset(); 560 this.$refs.form.reset();
557 }, 561 },
558 save() { 562 save() {
559 let imageData = new FormData(); 563 let imageData = new FormData();
560 imageData.append("upload", this.imageFile); 564 imageData.append("upload", this.imageFile);
561 console.log(imageData); 565 console.log(imageData);
562 let editEvent = { 566 let editEvent = {
563 eventId: this.editedItem._id, 567 eventId: this.editedItem._id,
564 title: this.editedItem.title, 568 title: this.editedItem.title,
565 description: this.editedItem.description, 569 description: this.editedItem.description,
566 imageData 570 imageData
567 }; 571 };
568 http() 572 http()
569 .put("/updateEvent", editEvent) 573 .put("/updateEvent", editEvent)
570 .then(response => { 574 .then(response => {
571 // console.log("editEvent",editEvent); 575 // console.log("editEvent",editEvent);
572 if ((this.snackbar = true)) { 576 if ((this.snackbar = true)) {
573 this.text = "Successfully Edit Existing User"; 577 this.text = "Successfully Edit Existing User";
574 } 578 }
575 this.getEventList(); 579 this.getEventList();
576 }) 580 })
577 .catch(error => { 581 .catch(error => {
578 // console.log(error); 582 // console.log(error);
579 }); 583 });
580 this.close(); 584 this.close();
581 }, 585 },
582 handleDrawerToggle() { 586 handleDrawerToggle() {
583 window.getApp.$emit("APP_DRAWER_TOGGLED"); 587 window.getApp.$emit("APP_DRAWER_TOGGLED");
584 }, 588 },
585 handleFullScreen() { 589 handleFullScreen() {
586 Util.toggleFullScreen(); 590 Util.toggleFullScreen();
587 } 591 }
588 }, 592 },
589 mounted() { 593 mounted() {
590 this.getEventList(); 594 this.getEventList();
591 }, 595 },
592 computed: { 596 computed: {
593 toolbarColor() { 597 toolbarColor() {
594 return this.$vuetify.options.extra.mainNav; 598 return this.$vuetify.options.extra.mainNav;
595 } 599 }
596 } 600 }
597 }; 601 };
598 </script> 602 </script>
599 <style scoped> 603 <style scoped>
600 .v-tabs__div { 604 .v-tabs__div {
601 text-transform: none; 605 text-transform: none;
602 } 606 }
603 .v-input__prepend-outer { 607 .v-input__prepend-outer {
604 margin-right: 0px !important; 608 margin-right: 0px !important;
605 } 609 }
606 .v-card__actions .v-btn { 610 .v-card__actions .v-btn {
607 margin: 0 15px; 611 margin: 0 15px;
608 min-width: 120px; 612 min-width: 120px;
609 } 613 }
610 .primary { 614 .primary {
611 background-color: #aaa !important; 615 background-color: #aaa !important;
612 border-color: #aaa !important; 616 border-color: #aaa !important;
613 } 617 }
614 h4 { 618 h4 {
615 background-repeat: no-repeat; 619 background-repeat: no-repeat;
616 padding: 8px; 620 padding: 8px;
617 margin: auto; 621 margin: auto;
618 font-size: 25px; 622 font-size: 25px;
619 } 623 }
620 #name { 624 #name {
621 position: absolute; 625 position: absolute;
622 left: 100px; 626 left: 100px;
623 top: 17px; 627 top: 17px;
624 } 628 }
625 #icon { 629 #icon {
626 position: absolute; 630 position: absolute;
627 right: 8px; 631 right: 8px;
628 top: 8px; 632 top: 8px;
629 } 633 }
630 #m { 634 #m {
631 position: relative; 635 position: relative;
632 left: 135px; 636 left: 135px;
633 top: -15px; 637 top: -15px;
634 } 638 }
635 #G { 639 #G {
636 position: absolute; 640 position: absolute;
637 top: 38px; 641 top: 38px;
638 color: white; 642 color: white;
639 } 643 }
640 #bt { 644 #bt {
641 position: relative; 645 position: relative;
642 top: -20px; 646 top: -20px;
643 left: 115px; 647 left: 115px;
644 } 648 }
645 #e { 649 #e {
646 position: relative; 650 position: relative;
647 top: 5px; 651 top: 5px;
648 right: -30px; 652 right: -30px;
649 height: 17px; 653 height: 17px;
650 cursor: pointer; 654 cursor: pointer;
651 } 655 }
652 #d { 656 #d {
653 position: relative; 657 position: relative;
654 top: 5px; 658 top: 5px;
655 right: -70px; 659 right: -70px;
656 height: 17px; 660 height: 17px;
657 cursor: pointer; 661 cursor: pointer;
658 } 662 }
659 #td { 663 #td {
660 border: 1px solid #dddddd; 664 border: 1px solid #dddddd;
661 text-align: left; 665 text-align: left;
662 padding: 8px; 666 padding: 8px;
663 } 667 }
664 #dialog { 668 #dialog {
665 height: 550px; 669 height: 550px;
666 } 670 }
667 .active { 671 .active {
668 background-color: black; 672 background-color: black;
669 color: white !important; 673 color: white !important;
670 } 674 }
671 .activebtn { 675 .activebtn {
672 color: black !important; 676 color: black !important;
673 } 677 }
674 #flex { 678 #flex {
675 height: 300px; 679 height: 300px;
676 } 680 }
677 .top { 681 .top {
678 margin-top: 100px; 682 margin-top: 100px;
679 } 683 }
680 .v-tabs__item a { 684 .v-tabs__item a {
681 font-size: 16px !important; 685 font-size: 16px !important;
682 } 686 }
683 @media screen and (max-width: 769px) { 687 @media screen and (max-width: 769px) {
684 .top { 688 .top {
685 margin-top: 0 !important; 689 margin-top: 0 !important;
686 } 690 }
687 .userSearch .v-icon { 691 .userSearch .v-icon {
688 font-size: 20px !important; 692 font-size: 20px !important;
689 margin-left: 20px; 693 margin-left: 20px;
690 } 694 }
691 } 695 }
692 @media screen and (max-width: 380px) { 696 @media screen and (max-width: 380px) {
697 .pl-3 {
698 padding-left: 0px !important;
699 }
693 .right { 700 .right {
694 float: none !important; 701 float: none !important;
695 } 702 }
696 .subheading { 703 .subheading {
697 font-size: 14px !important; 704 font-size: 14px !important;
698 } 705 }
699 .v-card__actions .v-btn { 706 .v-card__actions .v-btn {
700 margin: 0 0px; 707 margin: 0 0px;
701 min-width: 100px; 708 min-width: 100px;
702 } 709 }
703 /* .searchIcon .v-icon { 710 /* .searchIcon .v-icon {
704 font-size: 20px; 711 font-size: 20px;
705 margin-left: 20px; 712 margin-left: 20px;
706 } */ 713 } */
707 .subheading { 714 .subheading {
708 font-size: 12px !important; 715 font-size: 12px !important;
709 } 716 }
710 h5 { 717 h5 {
711 font-size: 13px; 718 font-size: 13px;
712 } 719 }
713 } 720 }
714 .v-icon { 721 .v-icon {
715 font-size: 30px; 722 font-size: 30px;
716 } 723 }
717 @media screen and (min-width: 1270px) { 724 @media screen and (min-width: 1270px) {
718 .hide { 725 .hide {
719 display: none; 726 display: none;
720 } 727 }
721 /* } 728 /* }
722 @media screen and (max-width: 962px) { 729 @media screen and (max-width: 962px) {
723 .imglogo{ 730 .imglogo{
724 position: absolute; 731 position: absolute;
725 top: 13px; 732 top: 13px;
726 left: 13px !important; 733 left: 13px !important;
727 width: 70px; 734 width: 70px;
728 height: 24px; 735 height: 24px;
729 } */ 736 } */
730 } 737 }
731 @media screen and (max-width: 420px) { 738 @media screen and (max-width: 420px) {
732 .userSearch .v-text-field .v-label { 739 .userSearch .v-text-field .v-label {
733 line-height: 24px !important; 740 line-height: 24px !important;
734 } 741 }
735 .userSearch .v-label { 742 .userSearch .v-label {
736 font-size: 13px !important; 743 font-size: 13px !important;
737 } 744 }
738 .v-list__tile { 745 .v-list__tile {
739 font-size: 14px; 746 font-size: 14px;
740 padding: 0 10px; 747 padding: 0 10px;
741 } 748 }
742 .name { 749 .name {
743 font-size: 15px; 750 font-size: 15px;
744 } 751 }
745 } 752 }
src/pages/News/news.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING NEWS ****** --> 7 <!-- ****** SEARCH ALL EXISTING NEWS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your News" 12 label="Find your News"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing News</v-tab> 54 >Existing News</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add News</v-tab> 62 >Add News</v-tab>
63 63
64 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 64 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit News</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <v-flex xs12 sm6> 109 <v-flex xs12 sm6>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Select Class:</label> 112 <label class="right">Select Class:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
115 <v-select 115 <v-select
116 :items="addclass" 116 :items="addclass"
117 label="Select Class" 117 label="Select Class"
118 v-model="editedItem.select" 118 v-model="editedItem.select"
119 item-text="classNum" 119 item-text="classNum"
120 item-value="_id" 120 item-value="_id"
121 name="Select Class" 121 name="Select Class"
122 @change="getSections(editedItem.select)" 122 @change="getSections(editedItem.select)"
123 required 123 required
124 ></v-select> 124 ></v-select>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm6> 128 <v-flex xs12 sm6>
129 <v-layout> 129 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 130 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 131 <label class="right">Select Section:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs8 class="ml-3"> 133 <v-flex xs8 class="ml-3">
134 <v-select 134 <v-select
135 :items="addSection" 135 :items="addSection"
136 label="Select Section" 136 label="Select Section"
137 v-model="editedItem.selectSection" 137 v-model="editedItem.selectSection"
138 item-text="name" 138 item-text="name"
139 item-value="_id" 139 item-value="_id"
140 name="Select Section" 140 name="Select Section"
141 required 141 required
142 ></v-select> 142 ></v-select>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs12 sm6> 148 <v-flex xs12 sm6>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right">Title:</label> 151 <label class="right">Title:</label>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 class="ml-3"> 153 <v-flex xs8 class="ml-3">
154 <v-text-field 154 <v-text-field
155 v-model="editedItem.title" 155 v-model="editedItem.title"
156 placeholder="fill your Title" 156 placeholder="fill your Title"
157 name="name" 157 name="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">Description:</label> 167 <label class="right">Description:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 class="ml-3"> 169 <v-flex xs8 class="ml-3">
170 <v-text-field 170 <v-text-field
171 placeholder="fill your Description" 171 placeholder="fill your Description"
172 v-model="editedItem.description" 172 v-model="editedItem.description"
173 type="text" 173 type="text"
174 name="email" 174 name="email"
175 required 175 required
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 <v-layout> 181 <v-layout>
182 <v-flex xs12 sm12> 182 <v-flex xs12 sm12>
183 <v-card-actions> 183 <v-card-actions>
184 <v-btn round dark @click.native="close">Cancel</v-btn> 184 <v-btn round dark @click.native="close">Cancel</v-btn>
185 <v-spacer></v-spacer> 185 <v-spacer></v-spacer>
186 <v-btn round dark @click="save">Save</v-btn> 186 <v-btn round dark @click="save">Save</v-btn>
187 </v-card-actions> 187 </v-card-actions>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-form> 191 </v-form>
192 </v-card> 192 </v-card>
193 </v-flex> 193 </v-flex>
194 </v-dialog> 194 </v-dialog>
195 195
196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
197 <v-dialog v-model="dialog1" max-width="600px"> 197 <v-dialog v-model="dialog1" max-width="600px">
198 <v-toolbar color="white"> 198 <v-toolbar color="white">
199 <v-spacer></v-spacer> 199 <v-spacer></v-spacer>
200 <v-toolbar-title>Profile</v-toolbar-title> 200 <v-toolbar-title>Profile</v-toolbar-title>
201 <v-spacer></v-spacer> 201 <v-spacer></v-spacer>
202 <v-icon @click="close1">close</v-icon> 202 <v-icon @click="close1">close</v-icon>
203 </v-toolbar> 203 </v-toolbar>
204 <v-card> 204 <v-card>
205 <v-flex align-center justify-center layout text-xs-center> 205 <v-flex align-center justify-center layout text-xs-center>
206 <v-avatar size="50px" style="position:absolute; top:20px;"> 206 <v-avatar size="50px" style="position:absolute; top:20px;">
207 <img src="/static/icon/user.png"> 207 <img src="/static/icon/user.png">
208 </v-avatar> 208 </v-avatar>
209 </v-flex> 209 </v-flex>
210 <v-card-text> 210 <v-card-text>
211 <v-container grid-list-md> 211 <v-container grid-list-md>
212 <v-layout wrap> 212 <v-layout wrap>
213 <v-flex> 213 <v-flex>
214 <br> 214 <br>
215 <br> 215 <br>
216 <v-layout> 216 <v-layout>
217 <v-flex xs5 sm6> 217 <v-flex xs5 sm6>
218 <h5 class="right my-1">Title:</h5> 218 <h5 class="right my-1">Title:</h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm6 xs8> 220 <v-flex sm6 xs8>
221 <h5 class="my-1">{{ editedItem.title }}</h5> 221 <h5 class="my-1">{{ editedItem.title }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 sm6> 225 <v-flex xs5 sm6>
226 <h5 class="right my-1">Description:</h5> 226 <h5 class="right my-1">Description:</h5>
227 </v-flex> 227 </v-flex>
228 <v-flex sm6 xs8> 228 <v-flex sm6 xs8>
229 <h5 class="my-1">{{ editedItem.description }}</h5> 229 <h5 class="my-1">{{ editedItem.description }}</h5>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-container> 234 </v-container>
235 </v-card-text> 235 </v-card-text>
236 </v-card> 236 </v-card>
237 </v-dialog> 237 </v-dialog>
238 238
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 248 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
249 <v-data-table 249 <v-data-table
250 :headers="headers" 250 :headers="headers"
251 :items="desserts" 251 :items="desserts"
252 :pagination.sync="pagination" 252 :pagination.sync="pagination"
253 :search="search" 253 :search="search"
254 > 254 >
255 <template slot="items" slot-scope="props"> 255 <template slot="items" slot-scope="props">
256 <td id="td" class="text-xs-center">{{ props.index}}</td> 256 <td id="td" class="text-xs-center">{{ props.index}}</td>
257 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 257 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
258 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 258 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
259 259
260 <td class="text-xs-center"> 260 <td class="text-xs-center">
261 <span> 261 <span>
262 <img 262 <img
263 style="cursor:pointer; width:25px; height:18px; " 263 style="cursor:pointer; width:25px; height:18px; "
264 class="mr-5" 264 class="mr-5"
265 @click="profile(props.item)" 265 @click="profile(props.item)"
266 src="/static/icon/eye1.png" 266 src="/static/icon/eye1.png"
267 > 267 >
268 <img 268 <img
269 style="cursor:pointer; width:20px; height:18px; " 269 style="cursor:pointer; width:20px; height:18px; "
270 class="mr-5" 270 class="mr-5"
271 @click="editItem(props.item)" 271 @click="editItem(props.item)"
272 src="/static/icon/edit1.png" 272 src="/static/icon/edit1.png"
273 > 273 >
274 <img 274 <img
275 style="cursor:pointer; height:20px; " 275 style="cursor:pointer; height:20px; "
276 class="mr-5" 276 class="mr-5"
277 @click="deleteItem(props.item)" 277 @click="deleteItem(props.item)"
278 src="/static/icon/delete1.png" 278 src="/static/icon/delete1.png"
279 > 279 >
280 </span> 280 </span>
281 </td> 281 </td>
282 </template> 282 </template>
283 <v-alert 283 <v-alert
284 slot="no-results" 284 slot="no-results"
285 :value="true" 285 :value="true"
286 color="error" 286 color="error"
287 icon="warning" 287 icon="warning"
288 >Your search for "{{ search }}" found no results.</v-alert> 288 >Your search for "{{ search }}" found no results.</v-alert>
289 </v-data-table> 289 </v-data-table>
290 </v-tab-item> 290 </v-tab-item>
291 291
292 <!-- ****** ADD MULTIPLE NEWS ****** --> 292 <!-- ****** ADD MULTIPLE NEWS ****** -->
293 293
294 <v-tab-item> 294 <v-tab-item>
295 <v-container> 295 <v-container>
296 <v-snackbar 296 <v-snackbar
297 :timeout="timeout" 297 :timeout="timeout"
298 :top="y === 'top'" 298 :top="y === 'top'"
299 :right="x === 'right'" 299 :right="x === 'right'"
300 :vertical="mode === 'vertical'" 300 :vertical="mode === 'vertical'"
301 v-model="snackbar" 301 v-model="snackbar"
302 color="success" 302 color="success"
303 >{{ text }}</v-snackbar> 303 >{{ text }}</v-snackbar>
304 <v-flex xs12 sm12 class="my-4"> 304 <v-flex xs12 sm12 class="my-4">
305 <v-card flat> 305 <v-card flat>
306 <v-form ref="form" v-model="valid" lazy-validation> 306 <v-form ref="form" v-model="valid" lazy-validation>
307 <v-container fluid> 307 <v-container fluid>
308 <v-layout> 308 <v-layout>
309 <v-flex 309 <v-flex
310 xs12 310 xs12
311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
312 > 312 >
313 <v-avatar size="100px"> 313 <v-avatar size="100px">
314 <img src="/static/icon/user.png" v-if="!imageUrl"> 314 <img src="/static/icon/user.png" v-if="!imageUrl">
315 </v-avatar> 315 </v-avatar>
316 <input 316 <input
317 type="file" 317 type="file"
318 style="display: none" 318 style="display: none"
319 ref="image" 319 ref="image"
320 accept="image/*" 320 accept="image/*"
321 @change="onFilePicked" 321 @change="onFilePicked"
322 > 322 >
323 <img 323 <img
324 :src="imageData.imageUrl" 324 :src="imageData.imageUrl"
325 height="150" 325 height="150"
326 v-if="imageUrl" 326 v-if="imageUrl"
327 style="border-radius:50%; width:200px" 327 style="border-radius:50%; width:200px"
328 > 328 >
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 <v-flex xs12> 331 <v-flex xs12>
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">Select Class:</label> 334 <label class="right">Select Class:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs4 class="ml-3"> 336 <v-flex xs4 class="ml-3">
337 <v-select 337 <v-select
338 :items="addclass" 338 :items="addclass"
339 label="Select Class" 339 label="Select Class"
340 v-model="editedItem.select" 340 v-model="editedItem.select"
341 item-text="classNum" 341 item-text="classNum"
342 item-value="_id" 342 item-value="_id"
343 name="Select Class" 343 name="Select Class"
344 @change="getSections(editedItem.select)" 344 @change="getSections(editedItem.select)"
345 required 345 required
346 ></v-select> 346 ></v-select>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-flex> 349 </v-flex>
350 <v-flex xs12> 350 <v-flex xs12>
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">Select Section:</label> 353 <label class="right">Select Section:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs4 class="ml-3"> 355 <v-flex xs4 class="ml-3">
356 <v-select 356 <v-select
357 :items="addSection" 357 :items="addSection"
358 label="Select Section" 358 label="Select Section"
359 v-model="editedItem.selectSection" 359 v-model="editedItem.selectSection"
360 item-text="name" 360 item-text="name"
361 item-value="_id" 361 item-value="_id"
362 name="Select Section" 362 name="Select Section"
363 required 363 required
364 ></v-select> 364 ></v-select>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 </v-flex> 367 </v-flex>
368 <v-flex xs12> 368 <v-flex xs12>
369 <v-layout> 369 <v-layout>
370 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
371 <label class="right">Title:</label> 371 <label class="right">Title:</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs4 class="ml-3"> 373 <v-flex xs4 class="ml-3">
374 <v-text-field 374 <v-text-field
375 v-model="addNews.title" 375 v-model="addNews.title"
376 placeholder="fill your Title" 376 placeholder="fill your Title"
377 name="name" 377 name="name"
378 type="text" 378 type="text"
379 :rules="titleRules" 379 :rules="titleRules"
380 required 380 required
381 ></v-text-field> 381 ></v-text-field>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 </v-flex> 384 </v-flex>
385 <v-flex xs12> 385 <v-flex xs12>
386 <v-layout> 386 <v-layout>
387 <v-flex xs4 class="pt-4 subheading"> 387 <v-flex xs4 class="pt-4 subheading">
388 <label class="right">Description:</label> 388 <label class="right">Description:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs4 class="ml-3"> 390 <v-flex xs4 class="ml-3">
391 <v-text-field 391 <v-text-field
392 placeholder="fill your Description" 392 placeholder="fill your Description"
393 :rules="descriptionRules" 393 :rules="descriptionRules"
394 v-model="addNews.description" 394 v-model="addNews.description"
395 type="text" 395 type="text"
396 name="email" 396 name="email"
397 required 397 required
398 ></v-text-field> 398 ></v-text-field>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 </v-flex> 401 </v-flex>
402 <v-layout> 402 <v-layout>
403 <v-flex xs12 sm6 offset-sm3> 403 <v-flex xs12 sm6 offset-sm3>
404 <v-card-actions> 404 <v-card-actions>
405 <v-btn @click="clear" round dark>clear</v-btn> 405 <v-btn @click="clear" round dark>clear</v-btn>
406 <v-spacer></v-spacer> 406 <v-spacer></v-spacer>
407 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 407 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
408 </v-card-actions> 408 </v-card-actions>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card> 413 </v-card>
414 </v-flex> 414 </v-flex>
415 </v-container> 415 </v-container>
416 </v-tab-item> 416 </v-tab-item>
417 </v-tabs> 417 </v-tabs>
418 <div class="loader" v-if="showLoader"> 418 <div class="loader" v-if="showLoader">
419 <v-progress-circular indeterminate color="white"></v-progress-circular> 419 <v-progress-circular indeterminate color="white"></v-progress-circular>
420 </div> 420 </div>
421 </v-app> 421 </v-app>
422 </template> 422 </template>
423 423
424 <script> 424 <script>
425 import http from "@/Services/http.js"; 425 import http from "@/Services/http.js";
426 import Util from "@/util"; 426 import Util from "@/util";
427 427
428 export default { 428 export default {
429 data: () => ({ 429 data: () => ({
430 snackbar: false, 430 snackbar: false,
431 y: "top", 431 y: "top",
432 x: "right", 432 x: "right",
433 mode: "", 433 mode: "",
434 timeout: 3000, 434 timeout: 3000,
435 text: "", 435 text: "",
436 loading: false, 436 loading: false,
437 date: null, 437 date: null,
438 search: "", 438 search: "",
439 showLoader:false, 439 showLoader:false,
440 dialog: false, 440 dialog: false,
441 dialog1: false, 441 dialog1: false,
442 valid: true, 442 valid: true,
443 isActive: true, 443 isActive: true,
444 newActive: false, 444 newActive: false,
445 addclass: [], 445 addclass: [],
446 addSection: [], 446 addSection: [],
447 AddUsercredentials: {}, 447 AddUsercredentials: {},
448 pagination: { 448 pagination: {
449 rowsPerPage: 15 449 rowsPerPage: 15
450 }, 450 },
451 imageData: {}, 451 imageData: {},
452 imageName: "", 452 imageName: "",
453 imageUrl: "", 453 imageUrl: "",
454 imageFile: "", 454 imageFile: "",
455 titleRules: [v => !!v || " Tilte is required"], 455 titleRules: [v => !!v || " Tilte is required"],
456 descriptionRules: [v => !!v || " Description is required"], 456 descriptionRules: [v => !!v || " Description is required"],
457 headers: [ 457 headers: [
458 { 458 {
459 text: "No", 459 text: "No",
460 align: "center", 460 align: "center",
461 sortable: false, 461 sortable: false,
462 value: "No" 462 value: "No"
463 }, 463 },
464 { text: "Title", value: "title", sortable: false, align: "center" }, 464 { text: "Title", value: "title", sortable: false, align: "center" },
465 { text: "Description", value: "description", sortable: false, align: "center" }, 465 { text: "Description", value: "description", sortable: false, align: "center" },
466 { text: "Action", value: "", sortable: false, align: "center" } 466 { text: "Action", value: "", sortable: false, align: "center" }
467 ], 467 ],
468 desserts: [], 468 desserts: [],
469 editedIndex: -1, 469 editedIndex: -1,
470 addNews: { 470 addNews: {
471 title: "", 471 title: "",
472 description: "" 472 description: ""
473 }, 473 },
474 editedItem: { 474 editedItem: {
475 title: "", 475 title: "",
476 description: "" 476 description: ""
477 }, 477 },
478 defaultItem: { 478 defaultItem: {
479 title: "", 479 title: "",
480 description: "" 480 description: ""
481 }, 481 },
482 userName: "", 482 userName: "",
483 items: [ 483 items: [
484 { 484 {
485 href: "/changepassword", 485 href: "/changepassword",
486 title: "Change Password", 486 title: "Change Password",
487 click: e => { 487 click: e => {
488 console.log(e); 488 console.log(e);
489 } 489 }
490 }, 490 },
491 { 491 {
492 href: "#", 492 href: "#",
493 title: "Logout", 493 title: "Logout",
494 click: e => { 494 click: e => {
495 window.getApp.$emit("APP_LOGOUT"); 495 window.getApp.$emit("APP_LOGOUT");
496 } 496 }
497 } 497 }
498 ] 498 ]
499 }), 499 }),
500 methods: { 500 methods: {
501 getSections(_id) { 501 getSections(_id) {
502 var token = this.$store.state.token; 502 var token = this.$store.state.token;
503 http() 503 http()
504 .get( 504 .get(
505 "/getSectionsList", 505 "/getSectionsList",
506 { params: { classId: _id } }, 506 { params: { classId: _id } },
507 { 507 {
508 headers: { Authorization: "Bearer " + token } 508 headers: { Authorization: "Bearer " + token }
509 } 509 }
510 ) 510 )
511 .then(response => { 511 .then(response => {
512 this.addSection = response.data.data; 512 this.addSection = response.data.data;
513 // console.log("getSectionsList=====>", this.addSection); 513 // console.log("getSectionsList=====>", this.addSection);
514 }) 514 })
515 .catch(err => { 515 .catch(err => {
516 // console.log("err====>", err); 516 // console.log("err====>", err);
517 // this.$router.replace({ path: '/' }); 517 // this.$router.replace({ path: '/' });
518 }); 518 });
519 }, 519 },
520 pickFile() { 520 pickFile() {
521 this.$refs.image.click(); 521 this.$refs.image.click();
522 }, 522 },
523 523
524 onFilePicked(e) { 524 onFilePicked(e) {
525 // console.log(e) 525 // console.log(e)
526 const files = e.target.files; 526 const files = e.target.files;
527 this.imageData.upload = e.target.files[0]; 527 this.imageData.upload = e.target.files[0];
528 if (files[0] !== undefined) { 528 if (files[0] !== undefined) {
529 this.imageName = files[0].name; 529 this.imageName = files[0].name;
530 if (this.imageName.lastIndexOf(".") <= 0) { 530 if (this.imageName.lastIndexOf(".") <= 0) {
531 return; 531 return;
532 } 532 }
533 const fr = new FileReader(); 533 const fr = new FileReader();
534 fr.readAsDataURL(files[0]); 534 fr.readAsDataURL(files[0]);
535 fr.addEventListener("load", () => { 535 fr.addEventListener("load", () => {
536 this.imageUrl = fr.result; 536 this.imageUrl = fr.result;
537 this.imageFile = files[0]; // this is an image file that can be sent to server... 537 this.imageFile = files[0]; // this is an image file that can be sent to server...
538 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 538 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
539 console.log("upload=======>", this.imageData.imageUrl); 539 console.log("upload=======>", this.imageData.imageUrl);
540 console.log("imageFile", this.imageFile); 540 console.log("imageFile", this.imageFile);
541 }); 541 });
542 } else { 542 } else {
543 this.imageName = ""; 543 this.imageName = "";
544 this.imageFile = ""; 544 this.imageFile = "";
545 this.imageUrl = ""; 545 this.imageUrl = "";
546 } 546 }
547 }, 547 },
548 getNewsList() { 548 getNewsList() {
549 this.showLoader = true; 549 this.showLoader = true;
550 var token = this.$store.state.token; 550 var token = this.$store.state.token;
551 http() 551 http()
552 .get("/getNewsList", { 552 .get("/getNewsList", {
553 headers: { Authorization: "Bearer " + token } 553 headers: { Authorization: "Bearer " + token }
554 }) 554 })
555 .then(response => { 555 .then(response => {
556 this.desserts = response.data.data; 556 this.desserts = response.data.data;
557 this.showLoader = false; 557 this.showLoader = false;
558 // console.log("getNewsList=====>",this.desserts) 558 // console.log("getNewsList=====>",this.desserts)
559 }) 559 })
560 .catch(err => { 560 .catch(err => {
561 // console.log("err====>", err); 561 // console.log("err====>", err);
562 this.showLoader = false; 562 this.showLoader = false;
563 this.$router.replace({ path: "/" }); 563 this.$router.replace({ path: "/" });
564 }); 564 });
565 }, 565 },
566 editItem(item) { 566 editItem(item) {
567 this.editedIndex = this.desserts.indexOf(item); 567 this.editedIndex = this.desserts.indexOf(item);
568 this.editedItem = Object.assign({}, item); 568 this.editedItem = Object.assign({}, item);
569 this.dialog = true; 569 this.dialog = true;
570 }, 570 },
571 profile(item) { 571 profile(item) {
572 this.editedIndex = this.desserts.indexOf(item); 572 this.editedIndex = this.desserts.indexOf(item);
573 this.editedItem = Object.assign({}, item); 573 this.editedItem = Object.assign({}, item);
574 this.dialog1 = true; 574 this.dialog1 = true;
575 }, 575 },
576 deleteItem(item) { 576 deleteItem(item) {
577 let deleteNews = { 577 let deleteNews = {
578 newsId: item._id 578 newsId: item._id
579 }; 579 };
580 http() 580 http()
581 .delete( 581 .delete(
582 "/deleteNews", 582 "/deleteNews",
583 confirm("Are you sure you want to delete this?") && { 583 confirm("Are you sure you want to delete this?") && {
584 params: deleteNews 584 params: deleteNews
585 } 585 }
586 ) 586 )
587 .then(response => { 587 .then(response => {
588 // console.log("deleteNews",deleteNews) 588 // console.log("deleteNews",deleteNews)
589 if ((this.snackbar = true)) { 589 if ((this.snackbar = true)) {
590 this.text = "Successfully delete Existing User"; 590 this.text = "Successfully delete Existing User";
591 } 591 }
592 this.getNewsList(); 592 this.getNewsList();
593 }) 593 })
594 .catch(error => { 594 .catch(error => {
595 // console.log(error); 595 // console.log(error);
596 }); 596 });
597 }, 597 },
598 activeTab(type) { 598 activeTab(type) {
599 switch (type) { 599 switch (type) {
600 case "existing": 600 case "existing":
601 this.newActive = false; 601 this.newActive = false;
602 this.isActive = true; 602 this.isActive = true;
603 break; 603 break;
604 604
605 default: 605 default:
606 this.newActive = true; 606 this.newActive = true;
607 this.isActive = false; 607 this.isActive = false;
608 break; 608 break;
609 } 609 }
610 }, 610 },
611 close() { 611 close() {
612 this.dialog = false; 612 this.dialog = false;
613 setTimeout(() => { 613 setTimeout(() => {
614 this.editedItem = Object.assign({}, this.defaultItem); 614 this.editedItem = Object.assign({}, this.defaultItem);
615 this.editedIndex = -1; 615 this.editedIndex = -1;
616 }, 300); 616 }, 300);
617 }, 617 },
618 close1() { 618 close1() {
619 this.dialog1 = false; 619 this.dialog1 = false;
620 }, 620 },
621 submit() { 621 submit() {
622 if (this.$refs.form.validate()) { 622 if (this.$refs.form.validate()) {
623 let imageData = new FormData(); 623 let imageData = new FormData();
624 imageData.append("upload", this.imageFile); 624 imageData.append("upload", this.imageFile);
625 console.log(imageData); 625 console.log(imageData);
626 let addNewses = { 626 let addNewses = {
627 title: this.addNews.title, 627 title: this.addNews.title,
628 description: this.addNews.description, 628 description: this.addNews.description,
629 // imageData 629 // imageData
630 }; 630 };
631 http() 631 http()
632 .post("/createNews", addNewses) 632 .post("/createNews", addNewses)
633 .then(response => { 633 .then(response => {
634 // console.log(addNewses) 634 // console.log(addNewses)
635 if ((this.snackbar = true)) { 635 if ((this.snackbar = true)) {
636 this.text = "New user added successfully"; 636 this.text = "New user added successfully";
637 } 637 }
638 this.getNewsList(); 638 this.getNewsList();
639 this.clear(); 639 this.clear();
640 }) 640 })
641 .catch(error => { 641 .catch(error => {
642 // console.log(error); 642 // console.log(error);
643 if ((this.snackbar = true)) { 643 if ((this.snackbar = true)) {
644 this.text = error.response.data.message; 644 this.text = error.response.data.message;
645 } 645 }
646 }); 646 });
647 } 647 }
648 }, 648 },
649 mail() {}, 649 mail() {},
650 download() {}, 650 download() {},
651 clear() { 651 clear() {
652 this.$refs.form.reset(); 652 this.$refs.form.reset();
653 }, 653 },
654 save() { 654 save() {
655 let imageData = new FormData(); 655 let imageData = new FormData();
656 imageData.append("upload", this.imageFile); 656 imageData.append("upload", this.imageFile);
657 console.log(imageData); 657 console.log(imageData);
658 let editNews = { 658 let editNews = {
659 newsId: this.editedItem._id, 659 newsId: this.editedItem._id,
660 title: this.editedItem.title, 660 title: this.editedItem.title,
661 description: this.editedItem.description, 661 description: this.editedItem.description,
662 // imageData 662 // imageData
663 }; 663 };
664 http() 664 http()
665 .put("/updateNews", editNews) 665 .put("/updateNews", editNews)
666 .then(response => { 666 .then(response => {
667 // console.log("updateNews",updateNews); 667 // console.log("updateNews",updateNews);
668 if ((this.snackbar = true)) { 668 if ((this.snackbar = true)) {
669 this.text = "Successfully Edit Existing User"; 669 this.text = "Successfully Edit Existing User";
670 } 670 }
671 this.getNewsList(); 671 this.getNewsList();
672 }) 672 })
673 .catch(error => { 673 .catch(error => {
674 // console.log(error); 674 // console.log(error);
675 }); 675 });
676 this.close(); 676 this.close();
677 }, 677 },
678 handleDrawerToggle() { 678 handleDrawerToggle() {
679 window.getApp.$emit("APP_DRAWER_TOGGLED"); 679 window.getApp.$emit("APP_DRAWER_TOGGLED");
680 }, 680 },
681 handleFullScreen() { 681 handleFullScreen() {
682 Util.toggleFullScreen(); 682 Util.toggleFullScreen();
683 } 683 }
684 }, 684 },
685 mounted() { 685 mounted() {
686 this.getNewsList(); 686 this.getNewsList();
687 var token = this.$store.state.token; 687 var token = this.$store.state.token;
688 http() 688 http()
689 .get("/getClassesList", { 689 .get("/getClassesList", {
690 headers: { Authorization: "Bearer " + token } 690 headers: { Authorization: "Bearer " + token }
691 }) 691 })
692 .then(response => { 692 .then(response => {
693 this.addclass = response.data.data; 693 this.addclass = response.data.data;
694 // console.log("getClassesList=====>",this.addclass) 694 // console.log("getClassesList=====>",this.addclass)
695 }) 695 })
696 .catch(err => { 696 .catch(err => {
697 // console.log("err====>", err); 697 // console.log("err====>", err);
698 this.$router.replace({ path: "/" }); 698 this.$router.replace({ path: "/" });
699 }); 699 });
700 }, 700 },
701 computed: { 701 computed: {
702 toolbarColor() { 702 toolbarColor() {
703 return this.$vuetify.options.extra.mainNav; 703 return this.$vuetify.options.extra.mainNav;
704 } 704 }
705 } 705 }
706 }; 706 };
707 </script> 707 </script>
708 <style scoped> 708 <style scoped>
709 .pl-3 {
710 padding-left: 0px !important;
711 }
709 .v-tabs__div { 712 .v-tabs__div {
710 text-transform: none; 713 text-transform: none;
711 } 714 }
712 .v-input__prepend-outer { 715 .v-input__prepend-outer {
713 margin-right: 0px !important; 716 margin-right: 0px !important;
714 } 717 }
715 .v-card__actions .v-btn { 718 .v-card__actions .v-btn {
716 margin: 0 15px; 719 margin: 0 15px;
717 min-width: 120px; 720 min-width: 120px;
718 } 721 }
719 .primary { 722 .primary {
720 background-color: #aaa !important; 723 background-color: #aaa !important;
721 border-color: #aaa !important; 724 border-color: #aaa !important;
722 } 725 }
723 h4 { 726 h4 {
724 background-repeat: no-repeat; 727 background-repeat: no-repeat;
725 padding: 8px; 728 padding: 8px;
726 margin: auto; 729 margin: auto;
727 font-size: 25px; 730 font-size: 25px;
728 } 731 }
729 #name { 732 #name {
730 position: absolute; 733 position: absolute;
731 left: 100px; 734 left: 100px;
732 top: 17px; 735 top: 17px;
733 } 736 }
734 #icon { 737 #icon {
735 position: absolute; 738 position: absolute;
736 right: 8px; 739 right: 8px;
737 top: 8px; 740 top: 8px;
738 } 741 }
739 #m { 742 #m {
740 position: relative; 743 position: relative;
741 left: 135px; 744 left: 135px;
742 top: -15px; 745 top: -15px;
743 } 746 }
744 #G { 747 #G {
745 position: absolute; 748 position: absolute;
746 top: 38px; 749 top: 38px;
747 color: white; 750 color: white;
748 } 751 }
749 #bt { 752 #bt {
750 position: relative; 753 position: relative;
751 top: -20px; 754 top: -20px;
752 left: 115px; 755 left: 115px;
753 } 756 }
754 #e { 757 #e {
755 position: relative; 758 position: relative;
756 top: 5px; 759 top: 5px;
757 right: -30px; 760 right: -30px;
758 height: 17px; 761 height: 17px;
759 cursor: pointer; 762 cursor: pointer;
760 } 763 }
761 #d { 764 #d {
762 position: relative; 765 position: relative;
763 top: 5px; 766 top: 5px;
764 right: -70px; 767 right: -70px;
765 height: 17px; 768 height: 17px;
766 cursor: pointer; 769 cursor: pointer;
767 } 770 }
768 #td { 771 #td {
769 border: 1px solid #dddddd; 772 border: 1px solid #dddddd;
770 text-align: left; 773 text-align: left;
771 padding: 8px; 774 padding: 8px;
772 } 775 }
773 #dialog { 776 #dialog {
774 height: 550px; 777 height: 550px;
775 } 778 }
776 .active { 779 .active {
777 background-color: black; 780 background-color: black;
778 color: white !important; 781 color: white !important;
779 } 782 }
780 .activebtn { 783 .activebtn {
781 color: black !important; 784 color: black !important;
782 } 785 }
783 #flex { 786 #flex {
784 height: 300px; 787 height: 300px;
785 } 788 }
786 .top { 789 .top {
787 margin-top: 100px; 790 margin-top: 100px;
788 } 791 }
789 .v-tabs__item a { 792 .v-tabs__item a {
790 font-size: 16px !important; 793 font-size: 16px !important;
791 } 794 }
792 @media screen and (max-width: 769px) { 795 @media screen and (max-width: 769px) {
793 .top { 796 .top {
794 margin-top: 0 !important; 797 margin-top: 0 !important;
795 } 798 }
796 .userSearch .v-icon { 799 .userSearch .v-icon {
797 font-size: 20px !important; 800 font-size: 20px !important;
798 margin-left: 20px; 801 margin-left: 20px;
799 } 802 }
800 } 803 }
801 @media screen and (max-width: 380px) { 804 @media screen and (max-width: 380px) {
802 .right { 805 .right {
803 float: none !important; 806 float: none !important;
804 } 807 }
805 .subheading { 808 .subheading {
806 font-size: 14px !important; 809 font-size: 14px !important;
807 } 810 }
808 .v-card__actions .v-btn { 811 .v-card__actions .v-btn {
809 margin: 0 0px; 812 margin: 0 0px;
810 min-width: 100px; 813 min-width: 100px;
811 } 814 }
812 /* .searchIcon .v-icon { 815 /* .searchIcon .v-icon {
813 font-size: 20px; 816 font-size: 20px;
814 margin-left: 20px; 817 margin-left: 20px;
815 } */ 818 } */
816 .subheading { 819 .subheading {
817 font-size: 12px !important; 820 font-size: 12px !important;
818 } 821 }
819 h5 { 822 h5 {
820 font-size: 13px; 823 font-size: 13px;
821 } 824 }
822 } 825 }
823 .v-icon { 826 .v-icon {
824 font-size: 30px; 827 font-size: 30px;
825 } 828 }
826 @media screen and (min-width: 1270px) { 829 @media screen and (min-width: 1270px) {
827 .hide { 830 .hide {
828 display: none; 831 display: none;
829 } 832 }
830 /* } 833 /* }
831 @media screen and (max-width: 962px) { 834 @media screen and (max-width: 962px) {
832 .imglogo{ 835 .imglogo{
833 position: absolute; 836 position: absolute;
834 top: 13px; 837 top: 13px;
835 left: 13px !important; 838 left: 13px !important;
836 width: 70px; 839 width: 70px;
837 height: 24px; 840 height: 24px;
838 } */ 841 } */
839 } 842 }
840 @media screen and (max-width: 420px) { 843 @media screen and (max-width: 420px) {
841 .userSearch .v-text-field .v-label { 844 .userSearch .v-text-field .v-label {
842 line-height: 24px !important; 845 line-height: 24px !important;
843 } 846 }
844 .userSearch .v-label { 847 .userSearch .v-label {
845 font-size: 13px !important; 848 font-size: 13px !important;
846 } 849 }
847 .v-list__tile { 850 .v-list__tile {
848 font-size: 14px; 851 font-size: 14px;
849 padding: 0 10px; 852 padding: 0 10px;
850 } 853 }
851 .name { 854 .name {
852 font-size: 15px; 855 font-size: 15px;
853 } 856 }
854 } 857 }
855 </style> 858 </style>
src/pages/Notification/notification.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 7
8 <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> 8 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
9 9
10 <v-flex xs7 sm3 class="userSearch"> 10 <v-flex xs7 sm3 class="userSearch">
11 <v-text-field 11 <v-text-field
12 flat 12 flat
13 append-icon="search" 13 append-icon="search"
14 label="Find your Notifictaion" 14 label="Find your Notifictaion"
15 v-model="search" 15 v-model="search"
16 color="white" 16 color="white"
17 dark 17 dark
18 ></v-text-field> 18 ></v-text-field>
19 </v-flex> 19 </v-flex>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
22 <v-btn icon large flat slot="activator"> 22 <v-btn icon large flat slot="activator">
23 <v-avatar size="40px"> 23 <v-avatar size="40px">
24 <img src="/static/icon/user.png"> 24 <img src="/static/icon/user.png">
25 </v-avatar> 25 </v-avatar>
26 </v-btn> 26 </v-btn>
27 <v-list class="pa-0"> 27 <v-list class="pa-0">
28 <v-list-tile 28 <v-list-tile
29 v-for="(item,index) in items" 29 v-for="(item,index) in items"
30 :to="!item.href ? { name: item.name } : null" 30 :to="!item.href ? { name: item.name } : null"
31 :href="item.href" 31 :href="item.href"
32 @click="item.click" 32 @click="item.click"
33 ripple="ripple" 33 ripple="ripple"
34 :disabled="item.disabled" 34 :disabled="item.disabled"
35 :target="item.target" 35 :target="item.target"
36 rel="noopener" 36 rel="noopener"
37 :key="index" 37 :key="index"
38 > 38 >
39 <v-list-tile-action v-if="item.icon"> 39 <v-list-tile-action v-if="item.icon">
40 <v-icon>{{ item.icon }}</v-icon> 40 <v-icon>{{ item.icon }}</v-icon>
41 </v-list-tile-action> 41 </v-list-tile-action>
42 <v-list-tile-content> 42 <v-list-tile-content>
43 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 43 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
44 </v-list-tile-content> 44 </v-list-tile-content>
45 </v-list-tile> 45 </v-list-tile>
46 </v-list> 46 </v-list>
47 </v-menu> 47 </v-menu>
48 </v-toolbar> 48 </v-toolbar>
49 <v-tabs grow slider-color="black"> 49 <v-tabs grow slider-color="black">
50 <v-tab 50 <v-tab
51 ripple 51 ripple
52 @click="activeTab('existing')" 52 @click="activeTab('existing')"
53 v-bind:class="{ active: isActive }" 53 v-bind:class="{ active: isActive }"
54 id="tab" 54 id="tab"
55 class="subheading" 55 class="subheading"
56 >Existing Notifictaion</v-tab> 56 >Existing Notifictaion</v-tab>
57 <v-tab 57 <v-tab
58 ripple 58 ripple
59 @click="activeTab('new')" 59 @click="activeTab('new')"
60 v-bind:class="{ active: newActive }" 60 v-bind:class="{ active: newActive }"
61 id="tab1" 61 id="tab1"
62 User 62 User
63 class="subheading" 63 class="subheading"
64 >Add New Notifictaion</v-tab> 64 >Add New Notifictaion</v-tab>
65 65
66 <!-- ****** EDITS REMINDER DETAILS ****** --> 66 <!-- ****** EDITS REMINDER DETAILS ****** -->
67 67
68 <v-tab-item> 68 <v-tab-item>
69 <v-snackbar 69 <v-snackbar
70 :timeout="timeout" 70 :timeout="timeout"
71 :top="y === 'top'" 71 :top="y === 'top'"
72 :right="x === 'right'" 72 :right="x === 'right'"
73 :vertical="mode === 'vertical'" 73 :vertical="mode === 'vertical'"
74 v-model="snackbar" 74 v-model="snackbar"
75 color="success" 75 color="success"
76 >{{ text }}</v-snackbar> 76 >{{ text }}</v-snackbar>
77 <v-dialog v-model="dialog" max-width="600px"> 77 <v-dialog v-model="dialog" max-width="600px">
78 <v-flex xs12 sm12 class=""> 78 <v-flex xs12 sm12 class="">
79 <v-toolbar color="white"> 79 <v-toolbar color="white">
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 <v-toolbar-title>Edit Notifictaion</v-toolbar-title> 81 <v-toolbar-title>Edit Notifictaion</v-toolbar-title>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 </v-toolbar> 83 </v-toolbar>
84 <v-card flat> 84 <v-card flat>
85 <v-form ref="form"> 85 <v-form ref="form">
86 <v-container fluid> 86 <v-container fluid>
87 <v-layout> 87 <v-layout>
88 <v-flex 88 <v-flex
89 xs12 89 xs12
90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
91 > 91 >
92 <v-avatar size="100px"> 92 <v-avatar size="100px">
93 <img src="/static/icon/user.png" v-if="!imageUrl"> 93 <img src="/static/icon/user.png" v-if="!imageUrl">
94 </v-avatar> 94 </v-avatar>
95 <input 95 <input
96 type="file" 96 type="file"
97 style="display: none" 97 style="display: none"
98 ref="image" 98 ref="image"
99 accept="image/*" 99 accept="image/*"
100 @change="onFilePicked" 100 @change="onFilePicked"
101 > 101 >
102 <img 102 <img
103 :src="imageData.imageUrl" 103 :src="imageData.imageUrl"
104 height="150" 104 height="150"
105 v-if="imageUrl" 105 v-if="imageUrl"
106 style="border-radius:50%; width:200px" 106 style="border-radius:50%; width:200px"
107 > 107 >
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <v-flex xs12 sm12> 110 <v-flex xs12 sm12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">Title:</label> 113 <label class="right">Title:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex xs5 class="ml-3"> 115 <v-flex xs5 class="ml-3">
116 <v-text-field 116 <v-text-field
117 v-model="editedItem.title" 117 v-model="editedItem.title"
118 placeholder="fill your Title" 118 placeholder="fill your Title"
119 name="name" 119 name="name"
120 type="text" 120 type="text"
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-flex xs12 sm12> 125 <v-flex xs12 sm12>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label> 128 <label class="right">Description:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs5 class="ml-3"> 130 <v-flex xs5 class="ml-3">
131 <v-text-field 131 <v-text-field
132 placeholder="fill your Description" 132 placeholder="fill your Description"
133 v-model="editedItem.description" 133 v-model="editedItem.description"
134 type="text" 134 type="text"
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 <v-layout> 139 <v-layout>
140 <v-flex xs12 sm10 offset-sm1> 140 <v-flex xs12 sm10 offset-sm1>
141 <v-card-actions> 141 <v-card-actions>
142 <v-btn round dark @click.native="close">Cancel</v-btn> 142 <v-btn round dark @click.native="close">Cancel</v-btn>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-btn round dark @click="save">Save</v-btn> 144 <v-btn round dark @click="save">Save</v-btn>
145 </v-card-actions> 145 </v-card-actions>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 </v-container> 148 </v-container>
149 </v-form> 149 </v-form>
150 </v-card> 150 </v-card>
151 </v-flex> 151 </v-flex>
152 </v-dialog> 152 </v-dialog>
153 153
154 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 154 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
155 155
156 <v-dialog v-model="dialog1" max-width="600px"> 156 <v-dialog v-model="dialog1" max-width="600px">
157 <v-toolbar color="white"> 157 <v-toolbar color="white">
158 <v-spacer></v-spacer> 158 <v-spacer></v-spacer>
159 <v-toolbar-title>Notification</v-toolbar-title> 159 <v-toolbar-title>Notification</v-toolbar-title>
160 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
161 <v-icon @click="close1">close</v-icon> 161 <v-icon @click="close1">close</v-icon>
162 </v-toolbar> 162 </v-toolbar>
163 <v-card> 163 <v-card>
164 <v-flex align-center justify-center layout text-xs-center> 164 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="50px" style="position:absolute; top:20px;"> 165 <v-avatar size="50px" style="position:absolute; top:20px;">
166 <img src="/static/icon/user.png"> 166 <img src="/static/icon/user.png">
167 </v-avatar> 167 </v-avatar>
168 </v-flex> 168 </v-flex>
169 <v-card-text> 169 <v-card-text>
170 <v-container grid-list-md> 170 <v-container grid-list-md>
171 <v-layout wrap> 171 <v-layout wrap>
172 <v-flex> 172 <v-flex>
173 <br> 173 <br>
174 <br> 174 <br>
175 <v-layout> 175 <v-layout>
176 <v-flex xs5 sm6> 176 <v-flex xs5 sm6>
177 <h5 class="right my-1">Title:</h5> 177 <h5 class="right my-1">Title:</h5>
178 </v-flex> 178 </v-flex>
179 <v-flex sm6 xs8> 179 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.title }}</h5> 180 <h5 class="my-1">{{ editedItem.title }}</h5>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs5 sm6> 184 <v-flex xs5 sm6>
185 <h5 class="right my-1">Description:</h5> 185 <h5 class="right my-1">Description:</h5>
186 </v-flex> 186 </v-flex>
187 <v-flex sm6 xs8> 187 <v-flex sm6 xs8>
188 <h5 class="my-1">{{ editedItem.description }}</h5> 188 <h5 class="my-1">{{ editedItem.description }}</h5>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-flex> 191 </v-flex>
192 </v-layout> 192 </v-layout>
193 </v-container> 193 </v-container>
194 </v-card-text> 194 </v-card-text>
195 </v-card> 195 </v-card>
196 </v-dialog> 196 </v-dialog>
197 <v-snackbar 197 <v-snackbar
198 :timeout="timeout" 198 :timeout="timeout"
199 :top="y === 'top'" 199 :top="y === 'top'"
200 :right="x === 'right'" 200 :right="x === 'right'"
201 :vertical="mode === 'vertical'" 201 :vertical="mode === 'vertical'"
202 v-model="snackbar" 202 v-model="snackbar"
203 color="success" 203 color="success"
204 >{{ text }}</v-snackbar> 204 >{{ text }}</v-snackbar>
205 205
206 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 206 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
207 207
208 <v-data-table 208 <v-data-table
209 :headers="headers" 209 :headers="headers"
210 :items="desserts" 210 :items="desserts"
211 :pagination.sync="pagination" 211 :pagination.sync="pagination"
212 :search="search" 212 :search="search"
213 > 213 >
214 <template slot="items" slot-scope="props"> 214 <template slot="items" slot-scope="props">
215 <td id="td" class="text-xs-center">{{ props.index}}</td> 215 <td id="td" class="text-xs-center">{{ props.index}}</td>
216 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 216 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 217 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
218 218
219 <td class="text-xs-center"> 219 <td class="text-xs-center">
220 <span> 220 <span>
221 <img 221 <img
222 style="cursor:pointer; width:25px; height:18px; " 222 style="cursor:pointer; width:25px; height:18px; "
223 class="mr-5" 223 class="mr-5"
224 @click="profile(props.item)" 224 @click="profile(props.item)"
225 src="/static/icon/eye1.png" 225 src="/static/icon/eye1.png"
226 > 226 >
227 <img 227 <img
228 style="cursor:pointer; width:20px; height:18px; " 228 style="cursor:pointer; width:20px; height:18px; "
229 class="mr-5" 229 class="mr-5"
230 @click="editItem(props.item)" 230 @click="editItem(props.item)"
231 src="/static/icon/edit1.png" 231 src="/static/icon/edit1.png"
232 > 232 >
233 <img 233 <img
234 style="cursor:pointer; height:20px; " 234 style="cursor:pointer; height:20px; "
235 class="mr-5" 235 class="mr-5"
236 @click="deleteItem(props.item)" 236 @click="deleteItem(props.item)"
237 src="/static/icon/delete1.png" 237 src="/static/icon/delete1.png"
238 > 238 >
239 </span> 239 </span>
240 </td> 240 </td>
241 </template> 241 </template>
242 <v-alert 242 <v-alert
243 slot="no-results" 243 slot="no-results"
244 :value="true" 244 :value="true"
245 color="error" 245 color="error"
246 icon="warning" 246 icon="warning"
247 >Your search for "{{ search }}" found no results.</v-alert> 247 >Your search for "{{ search }}" found no results.</v-alert>
248 </v-data-table> 248 </v-data-table>
249 </v-tab-item> 249 </v-tab-item>
250 250
251 <!-- ****** ADD MULTIPLE REMINDER ****** --> 251 <!-- ****** ADD MULTIPLE REMINDER ****** -->
252 252
253 <v-tab-item> 253 <v-tab-item>
254 <v-container> 254 <v-container>
255 <v-snackbar 255 <v-snackbar
256 :timeout="timeout" 256 :timeout="timeout"
257 :top="y === 'top'" 257 :top="y === 'top'"
258 :right="x === 'right'" 258 :right="x === 'right'"
259 :vertical="mode === 'vertical'" 259 :vertical="mode === 'vertical'"
260 v-model="snackbar" 260 v-model="snackbar"
261 color="success" 261 color="success"
262 >{{ text }}</v-snackbar> 262 >{{ text }}</v-snackbar>
263 <v-flex xs12 sm12 class="my-4"> 263 <v-flex xs12 sm12 class="my-4">
264 <v-card flat> 264 <v-card flat>
265 <v-form ref="form" v-model="valid" lazy-validation> 265 <v-form ref="form" v-model="valid" lazy-validation>
266 <v-container fluid> 266 <v-container fluid>
267 <v-layout> 267 <v-layout>
268 <v-flex 268 <v-flex
269 xs12 269 xs12
270 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 270 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
271 > 271 >
272 <v-avatar size="100px"> 272 <v-avatar size="100px">
273 <img src="/static/icon/user.png" v-if="!imageUrl"> 273 <img src="/static/icon/user.png" v-if="!imageUrl">
274 </v-avatar> 274 </v-avatar>
275 <input 275 <input
276 type="file" 276 type="file"
277 style="display: none" 277 style="display: none"
278 ref="image" 278 ref="image"
279 accept="image/*" 279 accept="image/*"
280 @change="onFilePicked" 280 @change="onFilePicked"
281 > 281 >
282 <img 282 <img
283 :src="imageData.imageUrl" 283 :src="imageData.imageUrl"
284 height="150" 284 height="150"
285 v-if="imageUrl" 285 v-if="imageUrl"
286 style="border-radius:50%; width:200px" 286 style="border-radius:50%; width:200px"
287 > 287 >
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-flex xs12> 290 <v-flex xs12>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Title:</label> 293 <label class="right">Title:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs4 class="ml-3"> 295 <v-flex xs4 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="addNotification.title" 297 v-model="addNotification.title"
298 placeholder="fill your Title" 298 placeholder="fill your Title"
299 type="text" 299 type="text"
300 :rules="titleRules" 300 :rules="titleRules"
301 required 301 required
302 ></v-text-field> 302 ></v-text-field>
303 </v-flex> 303 </v-flex>
304 </v-layout> 304 </v-layout>
305 </v-flex> 305 </v-flex>
306 <v-flex xs12> 306 <v-flex xs12>
307 <v-layout> 307 <v-layout>
308 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Description:</label> 309 <label class="right">Description:</label>
310 </v-flex> 310 </v-flex>
311 <v-flex xs4 class="ml-3"> 311 <v-flex xs4 class="ml-3">
312 <v-text-field 312 <v-text-field
313 placeholder="fill your Description" 313 placeholder="fill your Description"
314 :rules="descriptionRules" 314 :rules="descriptionRules"
315 v-model="addNotification.description" 315 v-model="addNotification.description"
316 type="text" 316 type="text"
317 required 317 required
318 ></v-text-field> 318 ></v-text-field>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 </v-flex> 321 </v-flex>
322 <v-layout> 322 <v-layout>
323 <v-flex xs12 sm6 offset-sm3> 323 <v-flex xs12 sm6 offset-sm3>
324 <v-card-actions> 324 <v-card-actions>
325 <v-btn @click="clear" round dark>clear</v-btn> 325 <v-btn @click="clear" round dark>clear</v-btn>
326 <v-spacer></v-spacer> 326 <v-spacer></v-spacer>
327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
328 </v-card-actions> 328 </v-card-actions>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-container> 331 </v-container>
332 </v-form> 332 </v-form>
333 </v-card> 333 </v-card>
334 </v-flex> 334 </v-flex>
335 </v-container> 335 </v-container>
336 </v-tab-item> 336 </v-tab-item>
337 </v-tabs> 337 </v-tabs>
338 <div class="loader" v-if="showLoader"> 338 <div class="loader" v-if="showLoader">
339 <v-progress-circular indeterminate color="white"></v-progress-circular> 339 <v-progress-circular indeterminate color="white"></v-progress-circular>
340 </div> 340 </div>
341 </v-app> 341 </v-app>
342 </template> 342 </template>
343 343
344 <script> 344 <script>
345 import http from "@/Services/http.js"; 345 import http from "@/Services/http.js";
346 import Util from "@/util"; 346 import Util from "@/util";
347 347
348 export default { 348 export default {
349 data: () => ({ 349 data: () => ({
350 snackbar: false, 350 snackbar: false,
351 y: "top", 351 y: "top",
352 x: "right", 352 x: "right",
353 mode: "", 353 mode: "",
354 timeout: 3000, 354 timeout: 3000,
355 text: "", 355 text: "",
356 loading: false, 356 loading: false,
357 date: null, 357 date: null,
358 search: "", 358 search: "",
359 showLoader:false, 359 showLoader:false,
360 dialog: false, 360 dialog: false,
361 dialog1: false, 361 dialog1: false,
362 valid: true, 362 valid: true,
363 isActive: true, 363 isActive: true,
364 newActive: false, 364 newActive: false,
365 pagination: { 365 pagination: {
366 rowsPerPage: 15 366 rowsPerPage: 15
367 }, 367 },
368 imageData: {}, 368 imageData: {},
369 imageName: "", 369 imageName: "",
370 imageUrl: "", 370 imageUrl: "",
371 imageFile: "", 371 imageFile: "",
372 titleRules: [v => !!v || " Tilte is required"], 372 titleRules: [v => !!v || " Tilte is required"],
373 descriptionRules: [v => !!v || " Description is required"], 373 descriptionRules: [v => !!v || " Description is required"],
374 headers: [ 374 headers: [
375 { 375 {
376 text: "No", 376 text: "No",
377 align: "center", 377 align: "center",
378 sortable: false, 378 sortable: false,
379 value: "No" 379 value: "No"
380 }, 380 },
381 { text: "Title", value: "title", sortable: false, align: "center" }, 381 { text: "Title", value: "title", sortable: false, align: "center" },
382 { text: "Description", value: "description", sortable: false, align: "center" }, 382 { text: "Description", value: "description", sortable: false, align: "center" },
383 { text: "Action", value: "", sortable: false, align: "center" } 383 { text: "Action", value: "", sortable: false, align: "center" }
384 ], 384 ],
385 desserts: [], 385 desserts: [],
386 editedIndex: -1, 386 editedIndex: -1,
387 addNotification:{ 387 addNotification:{
388 title:'', 388 title:'',
389 description:'' 389 description:''
390 }, 390 },
391 editedItem: { 391 editedItem: {
392 title:'', 392 title:'',
393 description:'' 393 description:''
394 }, 394 },
395 defaultItem: { 395 defaultItem: {
396 title:'', 396 title:'',
397 description:'' 397 description:''
398 }, 398 },
399 userName: "", 399 userName: "",
400 items: [ 400 items: [
401 { 401 {
402 href: "/changepassword", 402 href: "/changepassword",
403 title: "Change Password", 403 title: "Change Password",
404 click: e => { 404 click: e => {
405 console.log(e); 405 console.log(e);
406 } 406 }
407 }, 407 },
408 { 408 {
409 href: "#", 409 href: "#",
410 title: "Logout", 410 title: "Logout",
411 click: e => { 411 click: e => {
412 window.getApp.$emit("APP_LOGOUT"); 412 window.getApp.$emit("APP_LOGOUT");
413 } 413 }
414 } 414 }
415 ] 415 ]
416 }), 416 }),
417 methods: { 417 methods: {
418 pickFile() { 418 pickFile() {
419 this.$refs.image.click(); 419 this.$refs.image.click();
420 }, 420 },
421 421
422 onFilePicked(e) { 422 onFilePicked(e) {
423 // console.log(e) 423 // console.log(e)
424 const files = e.target.files; 424 const files = e.target.files;
425 this.imageData.upload = e.target.files[0]; 425 this.imageData.upload = e.target.files[0];
426 if (files[0] !== undefined) { 426 if (files[0] !== undefined) {
427 this.imageName = files[0].name; 427 this.imageName = files[0].name;
428 if (this.imageName.lastIndexOf(".") <= 0) { 428 if (this.imageName.lastIndexOf(".") <= 0) {
429 return; 429 return;
430 } 430 }
431 const fr = new FileReader(); 431 const fr = new FileReader();
432 fr.readAsDataURL(files[0]); 432 fr.readAsDataURL(files[0]);
433 fr.addEventListener("load", () => { 433 fr.addEventListener("load", () => {
434 this.imageUrl = fr.result; 434 this.imageUrl = fr.result;
435 this.imageFile = files[0]; // this is an image file that can be sent to server... 435 this.imageFile = files[0]; // this is an image file that can be sent to server...
436 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 436 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
437 console.log("upload=======>", this.imageData.imageUrl); 437 console.log("upload=======>", this.imageData.imageUrl);
438 console.log("imageFile", this.imageFile); 438 console.log("imageFile", this.imageFile);
439 }); 439 });
440 } else { 440 } else {
441 this.imageName = ""; 441 this.imageName = "";
442 this.imageFile = ""; 442 this.imageFile = "";
443 this.imageUrl = ""; 443 this.imageUrl = "";
444 } 444 }
445 }, 445 },
446 getNotifications() { 446 getNotifications() {
447 this.showLoader = true; 447 this.showLoader = true;
448 var token = this.$store.state.token; 448 var token = this.$store.state.token;
449 http() 449 http()
450 .get("/getNotificationsList", { 450 .get("/getNotificationsList", {
451 headers: { Authorization: "Bearer " + token } 451 headers: { Authorization: "Bearer " + token }
452 }) 452 })
453 .then(response => { 453 .then(response => {
454 this.desserts = response.data.data; 454 this.desserts = response.data.data;
455 this.showLoader = false; 455 this.showLoader = false;
456 // console.log("getNotifications=====>",this.desserts) 456 // console.log("getNotifications=====>",this.desserts)
457 }) 457 })
458 .catch(err => { 458 .catch(err => {
459 // console.log("err====>", err); 459 // console.log("err====>", err);
460 this.showLoader = false; 460 this.showLoader = false;
461 this.$router.replace({ path: "/" }); 461 this.$router.replace({ path: "/" });
462 }); 462 });
463 }, 463 },
464 editItem(item) { 464 editItem(item) {
465 this.editedIndex = this.desserts.indexOf(item); 465 this.editedIndex = this.desserts.indexOf(item);
466 this.editedItem = Object.assign({}, item); 466 this.editedItem = Object.assign({}, item);
467 this.dialog = true; 467 this.dialog = true;
468 }, 468 },
469 profile(item) { 469 profile(item) {
470 this.editedIndex = this.desserts.indexOf(item); 470 this.editedIndex = this.desserts.indexOf(item);
471 this.editedItem = Object.assign({}, item); 471 this.editedItem = Object.assign({}, item);
472 this.dialog1 = true; 472 this.dialog1 = true;
473 }, 473 },
474 474
475 deleteItem(item) { 475 deleteItem(item) {
476 let deleteNotification = { 476 let deleteNotification = {
477 notificationId: item._id 477 notificationId: item._id
478 }; 478 };
479 http() 479 http()
480 .delete( 480 .delete(
481 "/deleteNotification", 481 "/deleteNotification",
482 confirm("Are you sure you want to delete this?") && { 482 confirm("Are you sure you want to delete this?") && {
483 params: deleteNotification 483 params: deleteNotification
484 } 484 }
485 ) 485 )
486 .then(response => { 486 .then(response => {
487 // console.log("deleteNotification",deleteNotification) 487 // console.log("deleteNotification",deleteNotification)
488 if ((this.snackbar = true)) { 488 if ((this.snackbar = true)) {
489 this.text = "Successfully Delete Notification"; 489 this.text = "Successfully Delete Notification";
490 } 490 }
491 this.getNotifications(); 491 this.getNotifications();
492 }) 492 })
493 .catch(error => { 493 .catch(error => {
494 console.log(error); 494 console.log(error);
495 }); 495 });
496 }, 496 },
497 activeTab(type) { 497 activeTab(type) {
498 switch (type) { 498 switch (type) {
499 case "existing": 499 case "existing":
500 this.newActive = false; 500 this.newActive = false;
501 this.isActive = true; 501 this.isActive = true;
502 break; 502 break;
503 503
504 default: 504 default:
505 this.newActive = true; 505 this.newActive = true;
506 this.isActive = false; 506 this.isActive = false;
507 break; 507 break;
508 } 508 }
509 }, 509 },
510 close() { 510 close() {
511 this.dialog = false; 511 this.dialog = false;
512 setTimeout(() => { 512 setTimeout(() => {
513 this.editedItem = Object.assign({}, this.defaultItem); 513 this.editedItem = Object.assign({}, this.defaultItem);
514 this.editedIndex = -1; 514 this.editedIndex = -1;
515 }, 300); 515 }, 300);
516 }, 516 },
517 close1() { 517 close1() {
518 this.dialog1 = false; 518 this.dialog1 = false;
519 }, 519 },
520 submit() { 520 submit() {
521 if (this.$refs.form.validate()) { 521 if (this.$refs.form.validate()) {
522 let imageData = new FormData(); 522 let imageData = new FormData();
523 imageData.append("upload", this.imageFile); 523 imageData.append("upload", this.imageFile);
524 console.log(imageData); 524 console.log(imageData);
525 let create = { 525 let create = {
526 title: this.addNotification.title, 526 title: this.addNotification.title,
527 description: this.addNotification.description, 527 description: this.addNotification.description,
528 // imageData 528 // imageData
529 }; 529 };
530 console.log(create) 530 console.log(create)
531 http() 531 http()
532 .post("/createNotification", create) 532 .post("/createNotification", create)
533 .then(response => { 533 .then(response => {
534 console.log(create) 534 console.log(create)
535 if ((this.snackbar = true)) { 535 if ((this.snackbar = true)) {
536 this.text = "New user added successfully"; 536 this.text = "New user added successfully";
537 } 537 }
538 this.getNotifications(); 538 this.getNotifications();
539 this.clear(); 539 this.clear();
540 }) 540 })
541 .catch(error => { 541 .catch(error => {
542 // console.log(error); 542 // console.log(error);
543 if ((this.snackbar = true)) { 543 if ((this.snackbar = true)) {
544 this.text = error.response.data.message; 544 this.text = error.response.data.message;
545 } 545 }
546 }); 546 });
547 } 547 }
548 }, 548 },
549 mail() {}, 549 mail() {},
550 download() {}, 550 download() {},
551 clear() { 551 clear() {
552 this.$refs.form.reset(); 552 this.$refs.form.reset();
553 }, 553 },
554 save() { 554 save() {
555 let imageData = new FormData(); 555 let imageData = new FormData();
556 imageData.append("upload", this.imageFile); 556 imageData.append("upload", this.imageFile);
557 console.log(imageData); 557 console.log(imageData);
558 let editNotification = { 558 let editNotification = {
559 notificationId:this.editedItem._id, 559 notificationId:this.editedItem._id,
560 title: this.editedItem.title, 560 title: this.editedItem.title,
561 description: this.editedItem.description, 561 description: this.editedItem.description,
562 // imageData 562 // imageData
563 }; 563 };
564 http() 564 http()
565 .put("/updateNotification", editNotification) 565 .put("/updateNotification", editNotification)
566 .then(response => { 566 .then(response => {
567 // console.log("editNotification",editNotification); 567 // console.log("editNotification",editNotification);
568 if ((this.snackbar = true)) { 568 if ((this.snackbar = true)) {
569 this.text = "Successfully Edit Notification"; 569 this.text = "Successfully Edit Notification";
570 } 570 }
571 this.getNotifications(); 571 this.getNotifications();
572 }) 572 })
573 .catch(error => { 573 .catch(error => {
574 // console.log(error); 574 // console.log(error);
575 }); 575 });
576 this.close(); 576 this.close();
577 }, 577 },
578 handleDrawerToggle() { 578 handleDrawerToggle() {
579 window.getApp.$emit("APP_DRAWER_TOGGLED"); 579 window.getApp.$emit("APP_DRAWER_TOGGLED");
580 }, 580 },
581 handleFullScreen() { 581 handleFullScreen() {
582 Util.toggleFullScreen(); 582 Util.toggleFullScreen();
583 } 583 }
584 }, 584 },
585 mounted() { 585 mounted() {
586 this.getNotifications(); 586 this.getNotifications();
587 }, 587 },
588 computed: { 588 computed: {
589 toolbarColor() { 589 toolbarColor() {
590 return this.$vuetify.options.extra.mainNav; 590 return this.$vuetify.options.extra.mainNav;
591 } 591 }
592 } 592 }
593 }; 593 };
594 </script> 594 </script>
595 <style scoped> 595 <style scoped>
596 .v-tabs__div { 596 .v-tabs__div {
597 text-transform: none; 597 text-transform: none;
598 } 598 }
599 .v-input__prepend-outer { 599 .v-input__prepend-outer {
600 margin-right: 0px !important; 600 margin-right: 0px !important;
601 } 601 }
602 .v-card__actions .v-btn { 602 .v-card__actions .v-btn {
603 margin: 0 15px; 603 margin: 0 15px;
604 min-width: 120px; 604 min-width: 120px;
605 } 605 }
606 .primary { 606 .primary {
607 background-color: #aaa !important; 607 background-color: #aaa !important;
608 border-color: #aaa !important; 608 border-color: #aaa !important;
609 } 609 }
610 h4 { 610 h4 {
611 background-repeat: no-repeat; 611 background-repeat: no-repeat;
612 padding: 8px; 612 padding: 8px;
613 margin: auto; 613 margin: auto;
614 font-size: 25px; 614 font-size: 25px;
615 } 615 }
616 #name { 616 #name {
617 position: absolute; 617 position: absolute;
618 left: 100px; 618 left: 100px;
619 top: 17px; 619 top: 17px;
620 } 620 }
621 #icon { 621 #icon {
622 position: absolute; 622 position: absolute;
623 right: 8px; 623 right: 8px;
624 top: 8px; 624 top: 8px;
625 } 625 }
626 #m { 626 #m {
627 position: relative; 627 position: relative;
628 left: 135px; 628 left: 135px;
629 top: -15px; 629 top: -15px;
630 } 630 }
631 #G { 631 #G {
632 position: absolute; 632 position: absolute;
633 top: 38px; 633 top: 38px;
634 color: white; 634 color: white;
635 } 635 }
636 #bt { 636 #bt {
637 position: relative; 637 position: relative;
638 top: -20px; 638 top: -20px;
639 left: 115px; 639 left: 115px;
640 } 640 }
641 #e { 641 #e {
642 position: relative; 642 position: relative;
643 top: 5px; 643 top: 5px;
644 right: -30px; 644 right: -30px;
645 height: 17px; 645 height: 17px;
646 cursor: pointer; 646 cursor: pointer;
647 } 647 }
648 #d { 648 #d {
649 position: relative; 649 position: relative;
650 top: 5px; 650 top: 5px;
651 right: -70px; 651 right: -70px;
652 height: 17px; 652 height: 17px;
653 cursor: pointer; 653 cursor: pointer;
654 } 654 }
655 #td { 655 #td {
656 border: 1px solid #dddddd; 656 border: 1px solid #dddddd;
657 text-align: left; 657 text-align: left;
658 padding: 8px; 658 padding: 8px;
659 } 659 }
660 #dialog { 660 #dialog {
661 height: 550px; 661 height: 550px;
662 } 662 }
663 .active { 663 .active {
664 background-color: black; 664 background-color: black;
665 color: white !important; 665 color: white !important;
666 } 666 }
667 .activebtn { 667 .activebtn {
668 color: black !important; 668 color: black !important;
669 } 669 }
670 #flex { 670 #flex {
671 height: 300px; 671 height: 300px;
672 } 672 }
673 .top { 673 .top {
674 margin-top: 100px; 674 margin-top: 100px;
675 } 675 }
676 .v-tabs__item a { 676 .v-tabs__item a {
677 font-size: 16px !important; 677 font-size: 16px !important;
678 } 678 }
679 @media screen and (max-width: 769px) { 679 @media screen and (max-width: 769px) {
680 .top { 680 .top {
681 margin-top: 0 !important; 681 margin-top: 0 !important;
682 } 682 }
683 .userSearch .v-icon { 683 .userSearch .v-icon {
684 font-size: 20px !important; 684 font-size: 20px !important;
685 margin-left: 20px; 685 margin-left: 20px;
686 } 686 }
687 } 687 }
688 @media screen and (max-width: 380px) { 688 @media screen and (max-width: 380px) {
689 .right { 689 .right {
690 float: none !important; 690 float: none !important;
691 } 691 }
692 .subheading { 692 .subheading {
693 font-size: 14px !important; 693 font-size: 14px !important;
694 } 694 }
695 .v-card__actions .v-btn { 695 .v-card__actions .v-btn {
696 margin: 0 0px; 696 margin: 0 0px;
697 min-width: 100px; 697 min-width: 100px;
698 } 698 }
699 /* .searchIcon .v-icon { 699 /* .searchIcon .v-icon {
700 font-size: 20px; 700 font-size: 20px;
701 margin-left: 20px; 701 margin-left: 20px;
702 } */ 702 } */
703 .subheading { 703 .subheading {
704 font-size: 12px !important; 704 font-size: 12px !important;
705 } 705 }
706 h5 { 706 h5 {
707 font-size: 13px; 707 font-size: 13px;
708 } 708 }
709 } 709 }
710 .v-icon { 710 .v-icon {
711 font-size: 30px; 711 font-size: 30px;
712 } 712 }
713 @media screen and (min-width: 1270px) { 713 @media screen and (min-width: 1270px) {
714 .hide { 714 .hide {
715 display: none; 715 display: none;
716 } 716 }
717 /* } 717 /* }
718 @media screen and (max-width: 962px) { 718 @media screen and (max-width: 962px) {
719 .imglogo{ 719 .imglogo{
720 position: absolute; 720 position: absolute;
721 top: 13px; 721 top: 13px;
722 left: 13px !important; 722 left: 13px !important;
723 width: 70px; 723 width: 70px;
724 height: 24px; 724 height: 24px;
725 } */ 725 } */
726 } 726 }
727 @media screen and (max-width: 420px) { 727 @media screen and (max-width: 420px) {
728 .pl-3 {
729 padding-left: 0px !important;
730 }
728 .userSearch .v-text-field .v-label { 731 .userSearch .v-text-field .v-label {
729 line-height: 24px !important; 732 line-height: 24px !important;
730 } 733 }
731 .userSearch .v-label { 734 .userSearch .v-label {
732 font-size: 13px !important; 735 font-size: 13px !important;
733 } 736 }
734 .v-list__tile { 737 .v-list__tile {
735 font-size: 14px; 738 font-size: 14px;
736 padding: 0 10px; 739 padding: 0 10px;
737 } 740 }
738 .name { 741 .name {
739 font-size: 15px; 742 font-size: 15px;
740 } 743 }
741 } 744 }
742 </style> 745 </style>
src/pages/Reminder/reminder.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> 7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Reminder Data" 12 label="Find your Reminder Data"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Reminder</v-tab> 54 >Existing Reminder</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Reminder</v-tab> 62 >Add New Reminder</v-tab>
63 63
64 <!-- ****** EDITS REMINDER DETAILS ****** --> 64 <!-- ****** EDITS REMINDER DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class=""> 76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Reminder</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">Title:</label> 111 <label class="right">Title:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs5 class="ml-3"> 113 <v-flex xs5 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.title" 115 v-model="editedItem.title"
116 placeholder="fill your Title" 116 placeholder="fill your Title"
117 name="name" 117 name="name"
118 type="text" 118 type="text"
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm12> 123 <v-flex xs12 sm12>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Description:</label> 126 <label class="right">Description:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs5 class="ml-3"> 128 <v-flex xs5 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your Description" 130 placeholder="fill your Description"
131 v-model="editedItem.description" 131 v-model="editedItem.description"
132 type="text" 132 type="text"
133 ></v-text-field> 133 ></v-text-field>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 <v-layout> 137 <v-layout>
138 <v-flex xs12 sm10 offset-sm1> 138 <v-flex xs12 sm10 offset-sm1>
139 <v-card-actions> 139 <v-card-actions>
140 <v-btn round dark @click.native="close">Cancel</v-btn> 140 <v-btn round dark @click.native="close">Cancel</v-btn>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <v-btn round dark @click="save">Save</v-btn> 142 <v-btn round dark @click="save">Save</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-container> 146 </v-container>
147 </v-form> 147 </v-form>
148 </v-card> 148 </v-card>
149 </v-flex> 149 </v-flex>
150 </v-dialog> 150 </v-dialog>
151 151
152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
153 <v-dialog v-model="dialog1" max-width="600px"> 153 <v-dialog v-model="dialog1" max-width="600px">
154 <v-toolbar color="white"> 154 <v-toolbar color="white">
155 <v-spacer></v-spacer> 155 <v-spacer></v-spacer>
156 <v-toolbar-title>Profile</v-toolbar-title> 156 <v-toolbar-title>Profile</v-toolbar-title>
157 <v-spacer></v-spacer> 157 <v-spacer></v-spacer>
158 <v-icon @click="close1">close</v-icon> 158 <v-icon @click="close1">close</v-icon>
159 </v-toolbar> 159 </v-toolbar>
160 <v-card> 160 <v-card>
161 <v-flex align-center justify-center layout text-xs-center> 161 <v-flex align-center justify-center layout text-xs-center>
162 <v-avatar size="50px" style="position:absolute; top:20px;"> 162 <v-avatar size="50px" style="position:absolute; top:20px;">
163 <img src="/static/icon/user.png"> 163 <img src="/static/icon/user.png">
164 </v-avatar> 164 </v-avatar>
165 </v-flex> 165 </v-flex>
166 <v-card-text> 166 <v-card-text>
167 <v-container grid-list-md> 167 <v-container grid-list-md>
168 <v-layout wrap> 168 <v-layout wrap>
169 <v-flex> 169 <v-flex>
170 <br> 170 <br>
171 <br> 171 <br>
172 <v-layout> 172 <v-layout>
173 <v-flex xs5 sm6> 173 <v-flex xs5 sm6>
174 <h5 class="right my-1">Title:</h5> 174 <h5 class="right my-1">Title:</h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.title }}</h5> 177 <h5 class="my-1">{{ editedItem.title }}</h5>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout> 180 <v-layout>
181 <v-flex xs5 sm6> 181 <v-flex xs5 sm6>
182 <h5 class="right my-1">Description:</h5> 182 <h5 class="right my-1">Description:</h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.description }}</h5> 185 <h5 class="my-1">{{ editedItem.description }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 203
204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
205 <v-data-table 205 <v-data-table
206 :headers="headers" 206 :headers="headers"
207 :items="desserts" 207 :items="desserts"
208 :pagination.sync="pagination" 208 :pagination.sync="pagination"
209 :search="search" 209 :search="search"
210 > 210 >
211 <template slot="items" slot-scope="props"> 211 <template slot="items" slot-scope="props">
212 <td id="td" class="text-xs-center">{{ props.index}}</td> 212 <td id="td" class="text-xs-center">{{ props.index}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215 215
216 <td class="text-xs-center"> 216 <td class="text-xs-center">
217 <span> 217 <span>
218 <img 218 <img
219 style="cursor:pointer; width:25px; height:18px; " 219 style="cursor:pointer; width:25px; height:18px; "
220 class="mr-5" 220 class="mr-5"
221 @click="profile(props.item)" 221 @click="profile(props.item)"
222 src="/static/icon/eye1.png" 222 src="/static/icon/eye1.png"
223 > 223 >
224 <img 224 <img
225 style="cursor:pointer; width:20px; height:18px; " 225 style="cursor:pointer; width:20px; height:18px; "
226 class="mr-5" 226 class="mr-5"
227 @click="editItem(props.item)" 227 @click="editItem(props.item)"
228 src="/static/icon/edit1.png" 228 src="/static/icon/edit1.png"
229 > 229 >
230 <img 230 <img
231 style="cursor:pointer; height:20px; " 231 style="cursor:pointer; height:20px; "
232 class="mr-5" 232 class="mr-5"
233 @click="deleteItem(props.item)" 233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png" 234 src="/static/icon/delete1.png"
235 > 235 >
236 </span> 236 </span>
237 </td> 237 </td>
238 </template> 238 </template>
239 <v-alert 239 <v-alert
240 slot="no-results" 240 slot="no-results"
241 :value="true" 241 :value="true"
242 color="error" 242 color="error"
243 icon="warning" 243 icon="warning"
244 >Your search for "{{ search }}" found no results.</v-alert> 244 >Your search for "{{ search }}" found no results.</v-alert>
245 </v-data-table> 245 </v-data-table>
246 </v-tab-item> 246 </v-tab-item>
247 247
248 <!-- ****** ADD MULTIPLE REMINDER ****** --> 248 <!-- ****** ADD MULTIPLE REMINDER ****** -->
249 249
250 <v-tab-item> 250 <v-tab-item>
251 <v-container> 251 <v-container>
252 <v-snackbar 252 <v-snackbar
253 :timeout="timeout" 253 :timeout="timeout"
254 :top="y === 'top'" 254 :top="y === 'top'"
255 :right="x === 'right'" 255 :right="x === 'right'"
256 :vertical="mode === 'vertical'" 256 :vertical="mode === 'vertical'"
257 v-model="snackbar" 257 v-model="snackbar"
258 color="success" 258 color="success"
259 >{{ text }}</v-snackbar> 259 >{{ text }}</v-snackbar>
260 <v-flex xs12 sm12 class="my-4"> 260 <v-flex xs12 sm12 class="my-4">
261 <v-card flat> 261 <v-card flat>
262 <v-form ref="form" v-model="valid" lazy-validation> 262 <v-form ref="form" v-model="valid" lazy-validation>
263 <v-container fluid> 263 <v-container fluid>
264 <v-layout> 264 <v-layout>
265 <v-flex 265 <v-flex
266 xs12 266 xs12
267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
268 > 268 >
269 <v-avatar size="100px"> 269 <v-avatar size="100px">
270 <img src="/static/icon/user.png" v-if="!imageUrl"> 270 <img src="/static/icon/user.png" v-if="!imageUrl">
271 </v-avatar> 271 </v-avatar>
272 <input 272 <input
273 type="file" 273 type="file"
274 style="display: none" 274 style="display: none"
275 ref="image" 275 ref="image"
276 accept="image/*" 276 accept="image/*"
277 @change="onFilePicked" 277 @change="onFilePicked"
278 > 278 >
279 <img 279 <img
280 :src="imageData.imageUrl" 280 :src="imageData.imageUrl"
281 height="150" 281 height="150"
282 v-if="imageUrl" 282 v-if="imageUrl"
283 style="border-radius:50%; width:200px" 283 style="border-radius:50%; width:200px"
284 > 284 >
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 <v-flex xs12> 287 <v-flex xs12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Title:</label> 290 <label class="right">Title:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs4 class="ml-3"> 292 <v-flex xs4 class="ml-3">
293 <v-text-field 293 <v-text-field
294 v-model="addRemind.title" 294 v-model="addRemind.title"
295 placeholder="fill your Title" 295 placeholder="fill your Title"
296 type="text" 296 type="text"
297 :rules="titleRules" 297 :rules="titleRules"
298 required 298 required
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 <v-flex xs12> 303 <v-flex xs12>
304 <v-layout> 304 <v-layout>
305 <v-flex xs4 class="pt-4 subheading"> 305 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label> 306 <label class="right">Description:</label>
307 </v-flex> 307 </v-flex>
308 <v-flex xs4 class="ml-3"> 308 <v-flex xs4 class="ml-3">
309 <v-text-field 309 <v-text-field
310 placeholder="fill your Description" 310 placeholder="fill your Description"
311 :rules="descriptionRules" 311 :rules="descriptionRules"
312 v-model="addRemind.description" 312 v-model="addRemind.description"
313 type="text" 313 type="text"
314 required 314 required
315 ></v-text-field> 315 ></v-text-field>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-flex> 318 </v-flex>
319 <v-layout> 319 <v-layout>
320 <v-flex xs12 sm6 offset-sm3> 320 <v-flex xs12 sm6 offset-sm3>
321 <v-card-actions> 321 <v-card-actions>
322 <v-btn @click="clear" round dark>clear</v-btn> 322 <v-btn @click="clear" round dark>clear</v-btn>
323 <v-spacer></v-spacer> 323 <v-spacer></v-spacer>
324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
325 </v-card-actions> 325 </v-card-actions>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-container> 328 </v-container>
329 </v-form> 329 </v-form>
330 </v-card> 330 </v-card>
331 </v-flex> 331 </v-flex>
332 </v-container> 332 </v-container>
333 </v-tab-item> 333 </v-tab-item>
334 </v-tabs> 334 </v-tabs>
335 <div class="loader" v-if="showLoader"> 335 <div class="loader" v-if="showLoader">
336 <v-progress-circular indeterminate color="white"></v-progress-circular> 336 <v-progress-circular indeterminate color="white"></v-progress-circular>
337 </div> 337 </div>
338 </v-app> 338 </v-app>
339 </template> 339 </template>
340 340
341 <script> 341 <script>
342 import http from "@/Services/http.js"; 342 import http from "@/Services/http.js";
343 import Util from "@/util"; 343 import Util from "@/util";
344 344
345 export default { 345 export default {
346 data: () => ({ 346 data: () => ({
347 snackbar: false, 347 snackbar: false,
348 y: "top", 348 y: "top",
349 x: "right", 349 x: "right",
350 mode: "", 350 mode: "",
351 timeout: 3000, 351 timeout: 3000,
352 text: "", 352 text: "",
353 loading: false, 353 loading: false,
354 date: null, 354 date: null,
355 search: "", 355 search: "",
356 showLoader:false, 356 showLoader:false,
357 dialog: false, 357 dialog: false,
358 dialog1: false, 358 dialog1: false,
359 valid: true, 359 valid: true,
360 isActive: true, 360 isActive: true,
361 newActive: false, 361 newActive: false,
362 AddUsercredentials: {}, 362 AddUsercredentials: {},
363 pagination: { 363 pagination: {
364 rowsPerPage: 15 364 rowsPerPage: 15
365 }, 365 },
366 imageData: {}, 366 imageData: {},
367 imageName: "", 367 imageName: "",
368 imageUrl: "", 368 imageUrl: "",
369 imageFile: "", 369 imageFile: "",
370 titleRules: [v => !!v || " Tilte is required"], 370 titleRules: [v => !!v || " Tilte is required"],
371 descriptionRules: [v => !!v || " Description is required"], 371 descriptionRules: [v => !!v || " Description is required"],
372 headers: [ 372 headers: [
373 { 373 {
374 text: "No", 374 text: "No",
375 align: "center", 375 align: "center",
376 sortable: false, 376 sortable: false,
377 value: "No" 377 value: "No"
378 }, 378 },
379 { text: "Title", value: "title", sortable: false, align: "center" }, 379 { text: "Title", value: "title", sortable: false, align: "center" },
380 { text: "Description", value: "description", sortable: false, align: "center" }, 380 { text: "Description", value: "description", sortable: false, align: "center" },
381 { text: "Action", value: "", sortable: false, align: "center" } 381 { text: "Action", value: "", sortable: false, align: "center" }
382 ], 382 ],
383 desserts: [], 383 desserts: [],
384 editedIndex: -1, 384 editedIndex: -1,
385 addRemind:{ 385 addRemind:{
386 title:'', 386 title:'',
387 description:'' 387 description:''
388 }, 388 },
389 editedItem: { 389 editedItem: {
390 title:'', 390 title:'',
391 description:'' 391 description:''
392 }, 392 },
393 defaultItem: { 393 defaultItem: {
394 title:'', 394 title:'',
395 description:'' 395 description:''
396 }, 396 },
397 userName: "", 397 userName: "",
398 items: [ 398 items: [
399 { 399 {
400 href: "/changepassword", 400 href: "/changepassword",
401 title: "Change Password", 401 title: "Change Password",
402 click: e => { 402 click: e => {
403 console.log(e); 403 console.log(e);
404 } 404 }
405 }, 405 },
406 { 406 {
407 href: "#", 407 href: "#",
408 title: "Logout", 408 title: "Logout",
409 click: e => { 409 click: e => {
410 window.getApp.$emit("APP_LOGOUT"); 410 window.getApp.$emit("APP_LOGOUT");
411 } 411 }
412 } 412 }
413 ] 413 ]
414 }), 414 }),
415 methods: { 415 methods: {
416 pickFile() { 416 pickFile() {
417 this.$refs.image.click(); 417 this.$refs.image.click();
418 }, 418 },
419 419
420 onFilePicked(e) { 420 onFilePicked(e) {
421 // console.log(e) 421 // console.log(e)
422 const files = e.target.files; 422 const files = e.target.files;
423 this.imageData.upload = e.target.files[0]; 423 this.imageData.upload = e.target.files[0];
424 if (files[0] !== undefined) { 424 if (files[0] !== undefined) {
425 this.imageName = files[0].name; 425 this.imageName = files[0].name;
426 if (this.imageName.lastIndexOf(".") <= 0) { 426 if (this.imageName.lastIndexOf(".") <= 0) {
427 return; 427 return;
428 } 428 }
429 const fr = new FileReader(); 429 const fr = new FileReader();
430 fr.readAsDataURL(files[0]); 430 fr.readAsDataURL(files[0]);
431 fr.addEventListener("load", () => { 431 fr.addEventListener("load", () => {
432 this.imageUrl = fr.result; 432 this.imageUrl = fr.result;
433 this.imageFile = files[0]; // this is an image file that can be sent to server... 433 this.imageFile = files[0]; // this is an image file that can be sent to server...
434 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 434 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
435 console.log("upload=======>", this.imageData.imageUrl); 435 console.log("upload=======>", this.imageData.imageUrl);
436 console.log("imageFile", this.imageFile); 436 console.log("imageFile", this.imageFile);
437 }); 437 });
438 } else { 438 } else {
439 this.imageName = ""; 439 this.imageName = "";
440 this.imageFile = ""; 440 this.imageFile = "";
441 this.imageUrl = ""; 441 this.imageUrl = "";
442 } 442 }
443 }, 443 },
444 getReminderList() { 444 getReminderList() {
445 this.showLoader = true; 445 this.showLoader = true;
446 var token = this.$store.state.token; 446 var token = this.$store.state.token;
447 http() 447 http()
448 .get("/getRemindersList", { 448 .get("/getRemindersList", {
449 headers: { Authorization: "Bearer " + token } 449 headers: { Authorization: "Bearer " + token }
450 }) 450 })
451 .then(response => { 451 .then(response => {
452 this.desserts = response.data.data; 452 this.desserts = response.data.data;
453 this.showLoader = false; 453 this.showLoader = false;
454 // console.log("getRemindersList=====>",this.desserts) 454 // console.log("getRemindersList=====>",this.desserts)
455 }) 455 })
456 .catch(err => { 456 .catch(err => {
457 // console.log("err====>", err); 457 // console.log("err====>", err);
458 this.showLoader = false; 458 this.showLoader = false;
459 this.$router.replace({ path: "/" }); 459 this.$router.replace({ path: "/" });
460 }); 460 });
461 }, 461 },
462 editItem(item) { 462 editItem(item) {
463 this.editedIndex = this.desserts.indexOf(item); 463 this.editedIndex = this.desserts.indexOf(item);
464 this.editedItem = Object.assign({}, item); 464 this.editedItem = Object.assign({}, item);
465 this.dialog = true; 465 this.dialog = true;
466 }, 466 },
467 profile(item) { 467 profile(item) {
468 this.editedIndex = this.desserts.indexOf(item); 468 this.editedIndex = this.desserts.indexOf(item);
469 this.editedItem = Object.assign({}, item); 469 this.editedItem = Object.assign({}, item);
470 this.dialog1 = true; 470 this.dialog1 = true;
471 }, 471 },
472 472
473 deleteItem(item) { 473 deleteItem(item) {
474 let deleteReminder = { 474 let deleteReminder = {
475 reminderId: item._id 475 reminderId: item._id
476 }; 476 };
477 http() 477 http()
478 .delete( 478 .delete(
479 "/deleteReminder", 479 "/deleteReminder",
480 confirm("Are you sure you want to delete this?") && { 480 confirm("Are you sure you want to delete this?") && {
481 params: deleteReminder 481 params: deleteReminder
482 } 482 }
483 ) 483 )
484 .then(response => { 484 .then(response => {
485 // console.log("deleteReminder",deleteReminder) 485 // console.log("deleteReminder",deleteReminder)
486 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
487 this.text = "Successfully delete Existing User"; 487 this.text = "Successfully delete Existing User";
488 } 488 }
489 this.getReminderList(); 489 this.getReminderList();
490 }) 490 })
491 .catch(error => { 491 .catch(error => {
492 // console.log(error); 492 // console.log(error);
493 }); 493 });
494 }, 494 },
495 activeTab(type) { 495 activeTab(type) {
496 switch (type) { 496 switch (type) {
497 case "existing": 497 case "existing":
498 this.newActive = false; 498 this.newActive = false;
499 this.isActive = true; 499 this.isActive = true;
500 break; 500 break;
501 501
502 default: 502 default:
503 this.newActive = true; 503 this.newActive = true;
504 this.isActive = false; 504 this.isActive = false;
505 break; 505 break;
506 } 506 }
507 }, 507 },
508 close() { 508 close() {
509 this.dialog = false; 509 this.dialog = false;
510 setTimeout(() => { 510 setTimeout(() => {
511 this.editedItem = Object.assign({}, this.defaultItem); 511 this.editedItem = Object.assign({}, this.defaultItem);
512 this.editedIndex = -1; 512 this.editedIndex = -1;
513 }, 300); 513 }, 300);
514 }, 514 },
515 close1() { 515 close1() {
516 this.dialog1 = false; 516 this.dialog1 = false;
517 }, 517 },
518 submit() { 518 submit() {
519 if (this.$refs.form.validate()) { 519 if (this.$refs.form.validate()) {
520 let imageData = new FormData(); 520 let imageData = new FormData();
521 imageData.append("upload", this.imageFile); 521 imageData.append("upload", this.imageFile);
522 console.log(imageData); 522 console.log(imageData);
523 let addReminds = { 523 let addReminds = {
524 title: this.addRemind.title, 524 title: this.addRemind.title,
525 description: this.addRemind.description, 525 description: this.addRemind.description,
526 // imageData 526 // imageData
527 }; 527 };
528 http() 528 http()
529 .post("/createReminder", addReminds) 529 .post("/createReminder", addReminds)
530 .then(response => { 530 .then(response => {
531 // console.log(addReminds) 531 // console.log(addReminds)
532 if ((this.snackbar = true)) { 532 if ((this.snackbar = true)) {
533 this.text = "New user added successfully"; 533 this.text = "New user added successfully";
534 } 534 }
535 this.getReminderList(); 535 this.getReminderList();
536 this.clear(); 536 this.clear();
537 }) 537 })
538 .catch(error => { 538 .catch(error => {
539 // console.log(error); 539 // console.log(error);
540 if ((this.snackbar = true)) { 540 if ((this.snackbar = true)) {
541 this.text = error.response.data.message; 541 this.text = error.response.data.message;
542 } 542 }
543 }); 543 });
544 } 544 }
545 }, 545 },
546 mail() {}, 546 mail() {},
547 download() {}, 547 download() {},
548 clear() { 548 clear() {
549 this.$refs.form.reset(); 549 this.$refs.form.reset();
550 }, 550 },
551 save() { 551 save() {
552 let imageData = new FormData(); 552 let imageData = new FormData();
553 imageData.append("upload", this.imageFile); 553 imageData.append("upload", this.imageFile);
554 console.log(imageData); 554 console.log(imageData);
555 let editReminder = { 555 let editReminder = {
556 reminderId:this.editedItem._id, 556 reminderId:this.editedItem._id,
557 title: this.editedItem.title, 557 title: this.editedItem.title,
558 description: this.editedItem.description, 558 description: this.editedItem.description,
559 // imageData 559 // imageData
560 }; 560 };
561 http() 561 http()
562 .put("/updateReminder", editReminder) 562 .put("/updateReminder", editReminder)
563 .then(response => { 563 .then(response => {
564 // console.log("updateReminder",updateReminder); 564 // console.log("updateReminder",updateReminder);
565 if ((this.snackbar = true)) { 565 if ((this.snackbar = true)) {
566 this.text = "Successfully Edit Existing User"; 566 this.text = "Successfully Edit Existing User";
567 } 567 }
568 this.getReminderList(); 568 this.getReminderList();
569 }) 569 })
570 .catch(error => { 570 .catch(error => {
571 // console.log(error); 571 // console.log(error);
572 }); 572 });
573 this.close(); 573 this.close();
574 }, 574 },
575 handleDrawerToggle() { 575 handleDrawerToggle() {
576 window.getApp.$emit("APP_DRAWER_TOGGLED"); 576 window.getApp.$emit("APP_DRAWER_TOGGLED");
577 }, 577 },
578 handleFullScreen() { 578 handleFullScreen() {
579 Util.toggleFullScreen(); 579 Util.toggleFullScreen();
580 } 580 }
581 }, 581 },
582 mounted() { 582 mounted() {
583 this.getReminderList(); 583 this.getReminderList();
584 }, 584 },
585 computed: { 585 computed: {
586 toolbarColor() { 586 toolbarColor() {
587 return this.$vuetify.options.extra.mainNav; 587 return this.$vuetify.options.extra.mainNav;
588 } 588 }
589 } 589 }
590 }; 590 };
591 </script> 591 </script>
592 <style scoped> 592 <style scoped>
593 .v-tabs__div { 593 .v-tabs__div {
594 text-transform: none; 594 text-transform: none;
595 } 595 }
596 .v-input__prepend-outer { 596 .v-input__prepend-outer {
597 margin-right: 0px !important; 597 margin-right: 0px !important;
598 } 598 }
599 .v-card__actions .v-btn { 599 .v-card__actions .v-btn {
600 margin: 0 15px; 600 margin: 0 15px;
601 min-width: 120px; 601 min-width: 120px;
602 } 602 }
603 .primary { 603 .primary {
604 background-color: #aaa !important; 604 background-color: #aaa !important;
605 border-color: #aaa !important; 605 border-color: #aaa !important;
606 } 606 }
607 h4 { 607 h4 {
608 background-repeat: no-repeat; 608 background-repeat: no-repeat;
609 padding: 8px; 609 padding: 8px;
610 margin: auto; 610 margin: auto;
611 font-size: 25px; 611 font-size: 25px;
612 } 612 }
613 #name { 613 #name {
614 position: absolute; 614 position: absolute;
615 left: 100px; 615 left: 100px;
616 top: 17px; 616 top: 17px;
617 } 617 }
618 #icon { 618 #icon {
619 position: absolute; 619 position: absolute;
620 right: 8px; 620 right: 8px;
621 top: 8px; 621 top: 8px;
622 } 622 }
623 #m { 623 #m {
624 position: relative; 624 position: relative;
625 left: 135px; 625 left: 135px;
626 top: -15px; 626 top: -15px;
627 } 627 }
628 #G { 628 #G {
629 position: absolute; 629 position: absolute;
630 top: 38px; 630 top: 38px;
631 color: white; 631 color: white;
632 } 632 }
633 #bt { 633 #bt {
634 position: relative; 634 position: relative;
635 top: -20px; 635 top: -20px;
636 left: 115px; 636 left: 115px;
637 } 637 }
638 #e { 638 #e {
639 position: relative; 639 position: relative;
640 top: 5px; 640 top: 5px;
641 right: -30px; 641 right: -30px;
642 height: 17px; 642 height: 17px;
643 cursor: pointer; 643 cursor: pointer;
644 } 644 }
645 #d { 645 #d {
646 position: relative; 646 position: relative;
647 top: 5px; 647 top: 5px;
648 right: -70px; 648 right: -70px;
649 height: 17px; 649 height: 17px;
650 cursor: pointer; 650 cursor: pointer;
651 } 651 }
652 #td { 652 #td {
653 border: 1px solid #dddddd; 653 border: 1px solid #dddddd;
654 text-align: left; 654 text-align: left;
655 padding: 8px; 655 padding: 8px;
656 } 656 }
657 #dialog { 657 #dialog {
658 height: 550px; 658 height: 550px;
659 } 659 }
660 .active { 660 .active {
661 background-color: black; 661 background-color: black;
662 color: white !important; 662 color: white !important;
663 } 663 }
664 .activebtn { 664 .activebtn {
665 color: black !important; 665 color: black !important;
666 } 666 }
667 #flex { 667 #flex {
668 height: 300px; 668 height: 300px;
669 } 669 }
670 .top { 670 .top {
671 margin-top: 100px; 671 margin-top: 100px;
672 } 672 }
673 .v-tabs__item a { 673 .v-tabs__item a {
674 font-size: 16px !important; 674 font-size: 16px !important;
675 } 675 }
676 @media screen and (max-width: 769px) { 676 @media screen and (max-width: 769px) {
677 .top { 677 .top {
678 margin-top: 0 !important; 678 margin-top: 0 !important;
679 } 679 }
680 .userSearch .v-icon { 680 .userSearch .v-icon {
681 font-size: 20px !important; 681 font-size: 20px !important;
682 margin-left: 20px; 682 margin-left: 20px;
683 } 683 }
684 } 684 }
685 @media screen and (max-width: 380px) { 685 @media screen and (max-width: 380px) {
686 .pl-3 {
687 padding-left: 0px !important;
688 }
686 .right { 689 .right {
687 float: none !important; 690 float: none !important;
688 } 691 }
689 .subheading { 692 .subheading {
690 font-size: 14px !important; 693 font-size: 14px !important;
691 } 694 }
692 .v-card__actions .v-btn { 695 .v-card__actions .v-btn {
693 margin: 0 0px; 696 margin: 0 0px;
694 min-width: 100px; 697 min-width: 100px;
695 } 698 }
696 /* .searchIcon .v-icon { 699 /* .searchIcon .v-icon {
697 font-size: 20px; 700 font-size: 20px;
698 margin-left: 20px; 701 margin-left: 20px;
699 } */ 702 } */
700 .subheading { 703 .subheading {
701 font-size: 12px !important; 704 font-size: 12px !important;
702 } 705 }
703 h5 { 706 h5 {
704 font-size: 13px; 707 font-size: 13px;
705 } 708 }
706 } 709 }
707 .v-icon { 710 .v-icon {
708 font-size: 30px; 711 font-size: 30px;
709 } 712 }
710 @media screen and (min-width: 1270px) { 713 @media screen and (min-width: 1270px) {
711 .hide { 714 .hide {
712 display: none; 715 display: none;
713 } 716 }
714 /* } 717 /* }
715 @media screen and (max-width: 962px) { 718 @media screen and (max-width: 962px) {
716 .imglogo{ 719 .imglogo{
717 position: absolute; 720 position: absolute;
718 top: 13px; 721 top: 13px;
719 left: 13px !important; 722 left: 13px !important;
720 width: 70px; 723 width: 70px;
721 height: 24px; 724 height: 24px;
722 } */ 725 } */
723 } 726 }
724 @media screen and (max-width: 420px) { 727 @media screen and (max-width: 420px) {
725 .userSearch .v-text-field .v-label { 728 .userSearch .v-text-field .v-label {
726 line-height: 24px !important; 729 line-height: 24px !important;
727 } 730 }
728 .userSearch .v-label { 731 .userSearch .v-label {
729 font-size: 13px !important; 732 font-size: 13px !important;
730 } 733 }
731 .v-list__tile { 734 .v-list__tile {
732 font-size: 14px; 735 font-size: 14px;
733 padding: 0 10px; 736 padding: 0 10px;
734 } 737 }
735 .name { 738 .name {
736 font-size: 15px; 739 font-size: 15px;
737 } 740 }
738 } 741 }
739 </style> 742 </style>
src/pages/Section/section.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar 3 <v-toolbar
4 class="fixcolors" 4 class="fixcolors"
5 fixed 5 fixed
6 app 6 app
7 > 7 >
8 <v-toolbar-title class="ml-0 pl-3"> 8 <v-toolbar-title class="ml-0 pl-3">
9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <!-- ****** SEARCH ALL EXISTING SECTION ****** --> 11 <!-- ****** SEARCH ALL EXISTING SECTION ****** -->
12 <v-flex xs7 sm3 class="userSearch"> 12 <v-flex xs7 sm3 class="userSearch">
13 <v-text-field 13 <v-text-field
14 flat 14 flat
15 append-icon="search" 15 append-icon="search"
16 label="Find your Section Data" 16 label="Find your Section Data"
17 v-model="search" 17 v-model="search"
18 color="white" 18 color="white"
19 dark 19 dark
20 > 20 >
21 </v-text-field> 21 </v-text-field>
22 </v-flex> 22 </v-flex>
23 <v-spacer></v-spacer> 23 <v-spacer></v-spacer>
24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
25 <v-btn icon large flat slot="activator"> 25 <v-btn icon large flat slot="activator">
26 <v-avatar size="40px"> 26 <v-avatar size="40px">
27 <img src="/static/icon/user.png"/> 27 <img src="/static/icon/user.png"/>
28 </v-avatar> 28 </v-avatar>
29 </v-btn> 29 </v-btn>
30 <v-list class="pa-0"> 30 <v-list class="pa-0">
31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index"> 31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
32 <v-list-tile-action v-if="item.icon"> 32 <v-list-tile-action v-if="item.icon">
33 <v-icon>{{ item.icon }}</v-icon> 33 <v-icon>{{ item.icon }}</v-icon>
34 </v-list-tile-action> 34 </v-list-tile-action>
35 <v-list-tile-content> 35 <v-list-tile-content>
36 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 36 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
37 </v-list-tile-content> 37 </v-list-tile-content>
38 </v-list-tile> 38 </v-list-tile>
39 </v-list> 39 </v-list>
40 </v-menu> 40 </v-menu>
41 </v-toolbar> 41 </v-toolbar>
42 <v-tabs grow slider-color="black"> 42 <v-tabs grow slider-color="black">
43 <v-tab 43 <v-tab
44 ripple 44 ripple
45 @click="activeTab('existing')" 45 @click="activeTab('existing')"
46 v-bind:class="{ active: isActive }" 46 v-bind:class="{ active: isActive }"
47 id="tab" 47 id="tab"
48 class="subheading" 48 class="subheading"
49 >Existing Section</v-tab> 49 >Existing Section</v-tab>
50 <v-tab 50 <v-tab
51 ripple 51 ripple
52 @click="activeTab('new')" 52 @click="activeTab('new')"
53 v-bind:class="{ active: newActive }" 53 v-bind:class="{ active: newActive }"
54 id="tab1"User 54 id="tab1"User
55 class="subheading" 55 class="subheading"
56 >Add New Section</v-tab> 56 >Add New Section</v-tab>
57 57
58 <!-- ****** EDIT SECTION ****** --> 58 <!-- ****** EDIT SECTION ****** -->
59 <v-tab-item> 59 <v-tab-item>
60 <v-snackbar 60 <v-snackbar
61 :timeout="timeout" 61 :timeout="timeout"
62 :top="y === 'top'" 62 :top="y === 'top'"
63 :right="x === 'right'" 63 :right="x === 'right'"
64 :vertical="mode === 'vertical'" 64 :vertical="mode === 'vertical'"
65 v-model="snackbar" 65 v-model="snackbar"
66 color="success" 66 color="success"
67 >{{ text }}</v-snackbar> 67 >{{ text }}</v-snackbar>
68 <v-dialog v-model="dialog" max-width="500px"> 68 <v-dialog v-model="dialog" max-width="600px">
69 <v-toolbar color="white"> 69 <v-toolbar color="white">
70 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
71 <v-toolbar-title>Edit Section</v-toolbar-title> 71 <v-toolbar-title>Edit Section</v-toolbar-title>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 </v-toolbar> 73 </v-toolbar>
74 <v-card> 74 <v-card>
75 <v-card-text> 75 <v-card-text>
76 <v-container> 76 <v-container>
77 <v-layout wrap justify-center> 77 <v-layout wrap justify-center>
78 <v-flex xs12 sm9> 78 <v-flex xs12 sm9>
79 <v-form ref="forms" v-model="validEdit" lazy-validation> 79 <v-form ref="forms" v-model="validEdit" lazy-validation>
80 <v-layout style="position:relative;"> 80 <v-layout style="position:relative;">
81 <v-flex xs4 class="pt-4 subheading"> 81 <v-flex xs4 class="pt-4 subheading pl-3">
82 <label>Class Name:</label> 82 <label>Class Name:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8> 84 <v-flex xs8>
85 <v-autocomplete 85 <v-autocomplete
86 :items="addclass" 86 :items="addclass"
87 :label="editedItem.classData.classNum" 87 :label="editedItem.classData.classNum"
88 v-model="select" 88 v-model="select"
89 item-text="classNum" 89 item-text="classNum"
90 :rules="classRules" 90 :rules="classRules"
91 item-value="_id" 91 item-value="_id"
92 name="Select Class" 92 name="Select Class"
93 ></v-autocomplete> 93 ></v-autocomplete>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <v-layout style="position:relative;"> 96 <v-layout style="position:relative;">
97 <v-flex xs4 class="pt-4 subheading"> 97 <v-flex xs4 class="pt-4 subheading">
98 <label>Section Name:</label> 98 <label>Section Name:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8> 100 <v-flex xs8>
101 <v-text-field 101 <v-text-field
102 v-model="editedItem.name" 102 v-model="editedItem.name"
103 placeholder="fill your Section Name" 103 placeholder="fill your Section Name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 108
109 </v-layout> 109 </v-layout>
110 <v-card-actions> 110 <v-card-actions>
111 <v-btn round dark @click.native="close">Cancel</v-btn> 111 <v-btn round dark @click.native="close">Cancel</v-btn>
112 <v-spacer></v-spacer> 112 <v-spacer></v-spacer>
113 <v-btn round dark @click="save">Save</v-btn> 113 <v-btn round dark @click="save">Save</v-btn>
114 </v-card-actions> 114 </v-card-actions>
115 </v-form> 115 </v-form>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 </v-container> 118 </v-container>
119 </v-card-text> 119 </v-card-text>
120 </v-card> 120 </v-card>
121 </v-dialog> 121 </v-dialog>
122 122
123 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 123 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
124 124
125 <v-dialog v-model="dialog1" max-width="600px"> 125 <v-dialog v-model="dialog1" max-width="600px">
126 <v-toolbar color="white"> 126 <v-toolbar color="white">
127 <v-spacer></v-spacer> 127 <v-spacer></v-spacer>
128 <v-toolbar-title>Section</v-toolbar-title> 128 <v-toolbar-title>Section</v-toolbar-title>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-icon @click="close1">close</v-icon> 130 <v-icon @click="close1">close</v-icon>
131 </v-toolbar> 131 </v-toolbar>
132 <v-card> 132 <v-card>
133 <v-flex align-center justify-center layout text-xs-center> 133 <v-flex align-center justify-center layout text-xs-center>
134 <v-avatar size="50px" style="position:absolute; top:20px;"> 134 <v-avatar size="50px" style="position:absolute; top:20px;">
135 <img src="/static/icon/user.png"> 135 <img src="/static/icon/user.png">
136 </v-avatar> 136 </v-avatar>
137 </v-flex> 137 </v-flex>
138 <v-card-text> 138 <v-card-text>
139 <v-container grid-list-md> 139 <v-container grid-list-md>
140 <v-layout wrap> 140 <v-layout wrap>
141 <v-flex><br><br> 141 <v-flex><br><br>
142 <v-layout> 142 <v-layout>
143 <v-flex xs5 sm6> 143 <v-flex xs5 sm6>
144 <h5 class="right my-1">Class Name:</h5> 144 <h5 class="right my-1">Class Name:</h5>
145 </v-flex> 145 </v-flex>
146 <v-flex sm6 xs8> 146 <v-flex sm6 xs8>
147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 <v-layout> 150 <v-layout>
151 <v-flex xs5 sm6> 151 <v-flex xs5 sm6>
152 <h5 class="right my-1">Section Name:</h5> 152 <h5 class="right my-1">Section Name:</h5>
153 </v-flex> 153 </v-flex>
154 <v-flex sm6 xs8> 154 <v-flex sm6 xs8>
155 <h5 class="my-1">{{ editedItem.name }}</h5> 155 <h5 class="my-1">{{ editedItem.name }}</h5>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-container> 160 </v-container>
161 </v-card-text> 161 </v-card-text>
162 </v-card> 162 </v-card>
163 </v-dialog> 163 </v-dialog>
164 164
165 <v-snackbar 165 <v-snackbar
166 :timeout="timeout" 166 :timeout="timeout"
167 :top="y === 'top'" 167 :top="y === 'top'"
168 :right="x === 'right'" 168 :right="x === 'right'"
169 :vertical="mode === 'vertical'" 169 :vertical="mode === 'vertical'"
170 v-model="snackbar" 170 v-model="snackbar"
171 color="success" 171 color="success"
172 >{{ text }}</v-snackbar> 172 >{{ text }}</v-snackbar>
173 173
174 <!-- ****** EXISTING-USERS StudentS Table ****** --> 174 <!-- ****** EXISTING-USERS StudentS Table ****** -->
175 175
176 <v-data-table 176 <v-data-table
177 :headers="headers" 177 :headers="headers"
178 :items="desserts" 178 :items="desserts"
179 :pagination.sync="pagination" 179 :pagination.sync="pagination"
180 :search="search" 180 :search="search"
181 > 181 >
182 <template slot="items" slot-scope="props"> 182 <template slot="items" slot-scope="props">
183 <td id="td" class="text-xs-center">{{ props.index}}</td> 183 <td id="td" class="text-xs-center">{{ props.index}}</td>
184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
185 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 185 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
186 <td class="text-xs-center"> 186 <td class="text-xs-center">
187 <span> 187 <span>
188 <img 188 <img
189 style="cursor:pointer; width:25px; height:18px; " 189 style="cursor:pointer; width:25px; height:18px; "
190 class="mr-5" 190 class="mr-5"
191 @click="profile(props.item)" 191 @click="profile(props.item)"
192 src="/static/icon/eye1.png" 192 src="/static/icon/eye1.png"
193 > 193 >
194 <img 194 <img
195 style="cursor:pointer; width:20px; height:18px; " 195 style="cursor:pointer; width:20px; height:18px; "
196 class="mr-5" 196 class="mr-5"
197 @click="editItem(props.item)" 197 @click="editItem(props.item)"
198 src="/static/icon/edit1.png" 198 src="/static/icon/edit1.png"
199 > 199 >
200 <img 200 <img
201 style="cursor:pointer; height:20px; " 201 style="cursor:pointer; height:20px; "
202 class="mr-5" 202 class="mr-5"
203 @click="deleteItem(props.item)" 203 @click="deleteItem(props.item)"
204 src="/static/icon/delete1.png" 204 src="/static/icon/delete1.png"
205 > 205 >
206 </span> 206 </span>
207 </td> 207 </td>
208 </template> 208 </template>
209 <v-alert 209 <v-alert
210 slot="no-results" 210 slot="no-results"
211 :value="true" 211 :value="true"
212 color="error" 212 color="error"
213 icon="warning" 213 icon="warning"
214 >Your search for "{{ search }}" found no results.</v-alert> 214 >Your search for "{{ search }}" found no results.</v-alert>
215 </v-data-table> 215 </v-data-table>
216 </v-tab-item> 216 </v-tab-item>
217 217
218 <!-- ****** ADD multiple Students ****** --> 218 <!-- ****** ADD multiple Students ****** -->
219 219
220 <v-tab-item> 220 <v-tab-item>
221 <v-container> 221 <v-container>
222 <v-snackbar 222 <v-snackbar
223 :timeout="timeout" 223 :timeout="timeout"
224 :top="y === 'top'" 224 :top="y === 'top'"
225 :right="x === 'right'" 225 :right="x === 'right'"
226 :vertical="mode === 'vertical'" 226 :vertical="mode === 'vertical'"
227 v-model="snackbar" 227 v-model="snackbar"
228 color="success" 228 color="success"
229 >{{ text }}</v-snackbar> 229 >{{ text }}</v-snackbar>
230 <v-flex xs12 sm8 offset-sm2 class="top"> 230 <v-flex xs12 sm8 offset-sm2 class="top">
231 <v-card flat> 231 <v-card flat>
232 <v-container fluid fill-height> 232 <v-container fluid fill-height>
233 <v-layout align-center> 233 <v-layout align-center>
234 <v-flex xs12> 234 <v-flex xs12>
235 <v-flex offset-xs5> 235 <v-flex offset-xs5>
236 <v-avatar size="55px"> 236 <v-avatar size="55px">
237 <img src="/static/icon/user.png"> 237 <img src="/static/icon/user.png">
238 </v-avatar> 238 </v-avatar>
239 </v-flex> 239 </v-flex>
240 <v-form ref="form" v-model="valid" lazy-validation> 240 <v-form ref="form" v-model="valid" lazy-validation>
241 <v-layout> 241 <v-layout>
242 <v-flex xs4 class="pt-4 subheading"> 242 <v-flex xs4 class="pt-4 subheading">
243 <label class="right">Section Name:</label> 243 <label class="right">Section Name:</label>
244 </v-flex> 244 </v-flex>
245 <v-flex xs6 class="ml-3"> 245 <v-flex xs6 class="ml-3">
246 <v-text-field 246 <v-text-field
247 v-model="editedItem.name" 247 v-model="editedItem.name"
248 placeholder="fill your Section Name" 248 placeholder="fill your Section Name"
249 name="name" 249 name="name"
250 type="text" 250 type="text"
251 :rules="nameRules" 251 :rules="nameRules"
252 required 252 required
253 ></v-text-field> 253 ></v-text-field>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 <v-layout> 256 <v-layout>
257 <v-flex xs4 class="pt-4 subheading"> 257 <v-flex xs4 class="pt-4 subheading">
258 <label class="right">Select Class:</label> 258 <label class="right">Select Class:</label>
259 </v-flex> 259 </v-flex>
260 <v-flex xs6 class="ml-3"> 260 <v-flex xs6 class="ml-3">
261 <v-autocomplete 261 <v-autocomplete
262 :items="addclass" 262 :items="addclass"
263 label="Select Class" 263 label="Select Class"
264 v-model="select" 264 v-model="select"
265 item-text="classNum" 265 item-text="classNum"
266 item-value="_id" 266 item-value="_id"
267 name="Select Class" 267 name="Select Class"
268 :rules="classRules" 268 :rules="classRules"
269 required 269 required
270 ></v-autocomplete> 270 ></v-autocomplete>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
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">Session:</label> 275 <label class="right">Session:</label>
276 </v-flex> 276 </v-flex>
277 <v-flex xs6 class="ml-3"> 277 <v-flex xs6 class="ml-3">
278 <v-text-field 278 <v-text-field
279 v-model="editedItem.session" 279 v-model="editedItem.session"
280 placeholder="fill your Session" 280 placeholder="fill your Session"
281 name="name" 281 name="name"
282 type="text" 282 type="text"
283 :rules="sessionRules" 283 :rules="sessionRules"
284 required 284 required
285 ></v-text-field> 285 ></v-text-field>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs12 sm9 offset-sm2> 289 <v-flex xs12 sm9 offset-sm2>
290 <v-card-actions> 290 <v-card-actions>
291 <v-btn @click="clear" round dark>clear</v-btn> 291 <v-btn @click="clear" round dark>clear</v-btn>
292 <v-spacer></v-spacer> 292 <v-spacer></v-spacer>
293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
294 </v-card-actions> 294 </v-card-actions>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 </v-form> 297 </v-form>
298 </v-flex> 298 </v-flex>
299 </v-layout> 299 </v-layout>
300 </v-container> 300 </v-container>
301 </v-card> 301 </v-card>
302 </v-flex> 302 </v-flex>
303 </v-container> 303 </v-container>
304 </v-tab-item> 304 </v-tab-item>
305 </v-tabs> 305 </v-tabs>
306 <div class="loader" v-if="showLoader"> 306 <div class="loader" v-if="showLoader">
307 <v-progress-circular indeterminate color="white"></v-progress-circular> 307 <v-progress-circular indeterminate color="white"></v-progress-circular>
308 </div> 308 </div>
309 </v-app> 309 </v-app>
310 </template> 310 </template>
311 311
312 <script> 312 <script>
313 import http from "@/Services/http.js"; 313 import http from "@/Services/http.js";
314 import Util from "@/util"; 314 import Util from "@/util";
315 315
316 export default { 316 export default {
317 data: () => ({ 317 data: () => ({
318 snackbar: false, 318 snackbar: false,
319 y: "top", 319 y: "top",
320 x: "right", 320 x: "right",
321 mode: "", 321 mode: "",
322 timeout: 3000, 322 timeout: 3000,
323 text: "", 323 text: "",
324 showLoader:false, 324 showLoader:false,
325 loading: false, 325 loading: false,
326 date:null, 326 date:null,
327 search: '', 327 search: '',
328 dialog: false, 328 dialog: false,
329 dialog1: false, 329 dialog1: false,
330 valid: true, 330 valid: true,
331 validEdit:true, 331 validEdit:true,
332 isActive: true, 332 isActive: true,
333 newActive: false, 333 newActive: false,
334 details: [], 334 details: [],
335 AddUsercredentials: {}, 335 AddUsercredentials: {},
336 pagination: { 336 pagination: {
337 rowsPerPage: 15 337 rowsPerPage: 15
338 }, 338 },
339 nameRules: [v => !!v || " Section Name is required"], 339 nameRules: [v => !!v || " Section Name is required"],
340 classRules: [v => !!v || " Class Name is required"], 340 classRules: [v => !!v || " Class Name is required"],
341 sessionRules: [v => !!v || " Session is required"], 341 sessionRules: [v => !!v || " Session is required"],
342 headers: [ 342 headers: [
343 { 343 {
344 text: "No", 344 text: "No",
345 align: "center", 345 align: "center",
346 sortable: false, 346 sortable: false,
347 value: "No" 347 value: "No"
348 }, 348 },
349 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" }, 349 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" },
350 { text: "Section Name", value: "name", sortable: false, align: "center" }, 350 { text: "Section Name", value: "name", sortable: false, align: "center" },
351 { text: "Action", value: "", sortable: false, align: "center" } 351 { text: "Action", value: "", sortable: false, align: "center" }
352 ], 352 ],
353 desserts: [], 353 desserts: [],
354 addclass:[], 354 addclass:[],
355 // addIncharge:[],
356 // selectIncharge:'',
357 select:'', 355 select:'',
358 selectId:'', 356 selectId:'',
359 editedIndex: -1, 357 editedIndex: -1,
360 editedItem: { 358 editedItem: {
361 classData:{ 359 classData:{
362 classNum:"", 360 classNum:"",
363 }, 361 },
364 name:'', 362 name:'',
365 session:new Date().getFullYear() 363 session:new Date().getFullYear()
366 364
367 }, 365 },
368 items: [ 366 items: [
369 { 367 {
370 href: "/changepassword", 368 href: "/changepassword",
371 title: "Change Password", 369 title: "Change Password",
372 click: e => { 370 click: e => {
373 console.log(e); 371 console.log(e);
374 } 372 }
375 }, 373 },
376 { 374 {
377 href: "#", 375 href: "#",
378 title: "Logout", 376 title: "Logout",
379 click: e => { 377 click: e => {
380 window.getApp.$emit("APP_LOGOUT"); 378 window.getApp.$emit("APP_LOGOUT");
381 } 379 }
382 } 380 }
383 ] 381 ]
384 }), 382 }),
385 methods: { 383 methods: {
386 getSectionList() { 384 getSectionList() {
387 this.showLoader = true; 385 this.showLoader = true;
388 var token = this.$store.state.token; 386 var token = this.$store.state.token;
389 http() 387 http()
390 .get("/getAllSections", { 388 .get("/getAllSections", {
391 headers: { Authorization: "Bearer " + token } 389 headers: { Authorization: "Bearer " + token }
392 }) 390 })
393 .then(response => { 391 .then(response => {
394 this.desserts = response.data.data; 392 this.desserts = response.data.data;
395 this.showLoader = false; 393 this.showLoader = false;
396 // console.log("getAllSections=====>",response.data.data) 394 // console.log("getAllSections=====>",response.data.data)
397 395
398 }) 396 })
399 .catch(err => { 397 .catch(err => {
400 // console.log("err====>", err); 398 // console.log("err====>", err);
401 this.showLoader = false; 399 this.showLoader = false;
402 this.$router.replace({ path: '/' }); 400 this.$router.replace({ path: '/' });
403 }); 401 });
404 }, 402 },
405 editItem(item) { 403 editItem(item) {
406 this.editedIndex = this.desserts.indexOf(item); 404 this.editedIndex = this.desserts.indexOf(item);
407 this.editedItem = Object.assign({}, item); 405 this.editedItem = Object.assign({}, item);
408 console.log(this.editedItem) 406 console.log(this.editedItem)
409 this.dialog = true; 407 this.dialog = true;
410 }, 408 },
411 profile(item) { 409 profile(item) {
412 this.editedIndex = this.desserts.indexOf(item); 410 this.editedIndex = this.desserts.indexOf(item);
413 this.editedItem = Object.assign({}, item); 411 this.editedItem = Object.assign({}, item);
414 this.dialog1 = true; 412 this.dialog1 = true;
415 }, 413 },
416 deleteItem(item) { 414 deleteItem(item) {
417 let deleteStudent = { 415 let deleteStudent = {
418 sectionId: item._id 416 sectionId: item._id
419 }; 417 };
420 http() 418 http()
421 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 419 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
422 .then(response => { 420 .then(response => {
423 // console.log("deleteUers",deleteStudent) 421 // console.log("deleteUers",deleteStudent)
424 if ((this.snackbar = true)) { 422 if ((this.snackbar = true)) {
425 this.text = "Successfully delete Existing User"; 423 this.text = "Successfully delete Existing User";
426 } 424 }
427 this.getSectionList(); 425 this.getSectionList();
428 }) 426 })
429 .catch(error => { 427 .catch(error => {
430 // console.log(error); 428 // console.log(error);
431 }); 429 });
432 }, 430 },
433 activeTab(type) { 431 activeTab(type) {
434 switch (type) { 432 switch (type) {
435 case "existing": 433 case "existing":
436 this.newActive = false; 434 this.newActive = false;
437 this.isActive = true; 435 this.isActive = true;
438 break; 436 break;
439 437
440 default: 438 default:
441 this.newActive = true; 439 this.newActive = true;
442 this.isActive = false; 440 this.isActive = false;
443 break; 441 break;
444 } 442 }
445 }, 443 },
446 close() { 444 close() {
447 this.dialog = false; 445 this.dialog = false;
448 setTimeout(() => { 446 setTimeout(() => {
449 this.editedItem = Object.assign({}, this.defaultItem); 447 this.editedItem = Object.assign({}, this.defaultItem);
450 this.editedIndex = -1; 448 this.editedIndex = -1;
451 }, 300); 449 }, 300);
452 }, 450 },
453 close1() { 451 close1() {
454 this.dialog1 = false; 452 this.dialog1 = false;
455 }, 453 },
456 close2() { 454 close2() {
457 this.dialog2 = false; 455 this.dialog2 = false;
458 }, 456 },
459 submit() { 457 submit() {
460 if (this.$refs.forms.validate()) { 458 if (this.$refs.forms.validate()) {
461 let addSection = { 459 let addSection = {
462 name: this.editedItem.name, 460 name: this.editedItem.name,
463 classId: this.select, 461 classId: this.select,
464 session:this.editedItem.session 462 session:this.editedItem.session
465 }; 463 };
466 console.log(addSection) 464 console.log(addSection)
467 http() 465 http()
468 .post("/createSection", addSection) 466 .post("/createSection", addSection)
469 .then(response => { 467 .then(response => {
470 console.log(addSection) 468 console.log(addSection)
471 // this.getStudentList(); 469 // this.getStudentList();
472 if (this.snackbar = true) { 470 if (this.snackbar = true) {
473 this.text = "New user added successfully"; 471 this.text = "New user added successfully";
474 } 472 }
475 473
476 this.clear(); 474 this.clear();
477 }) 475 })
478 .catch(error => { 476 .catch(error => {
479 // console.log(error); 477 // console.log(error);
480 if (this.snackbar = true) { 478 if (this.snackbar = true) {
481 this.text = error.response.data.message; 479 this.text = error.response.data.message;
482 } 480 }
483 }); 481 });
484 } 482 }
485 }, 483 },
486 mail() { 484 mail() {
487 }, 485 },
488 download() { 486 download() {
489 }, 487 },
490 clear() { 488 clear() {
491 this.$refs.form.reset(); 489 this.$refs.form.reset();
492 }, 490 },
493 save() { 491 save() {
494 // if (this.$refs.form.validate()) { 492 // if (this.$refs.form.validate()) {
495 let editStudent = { 493 let editStudent = {
496 name: this.editedItem.name, 494 name: this.editedItem.name,
497 classId: this.select, 495 classId: this.select,
498 sectionId: this.editedItem._id 496 sectionId: this.editedItem._id
499 }; 497 };
500 http() 498 http()
501 .put("/updateSection", editStudent) 499 .put("/updateSection", editStudent)
502 .then(response => { 500 .then(response => {
503 // console.log("editStudent",editStudent); 501 // console.log("editStudent",editStudent);
504 if ((this.snackbar = true)) { 502 if ((this.snackbar = true)) {
505 this.text = "Successfully Edit Existing User"; 503 this.text = "Successfully Edit Existing User";
506 } 504 }
507 this.getSectionList(); 505 this.getSectionList();
508 // this.showLoader = false; 506 // this.showLoader = false;
509 }) 507 })
510 .catch(error => { 508 .catch(error => {
511 this.text = error.response.data.message; 509 this.text = error.response.data.message;
512 // console.log(error); 510 // console.log(error);
513 }); 511 });
514 this.close(); 512 this.close();
515 // } 513 // }
516 }, 514 },
517 handleDrawerToggle() { 515 handleDrawerToggle() {
518 window.getApp.$emit("APP_DRAWER_TOGGLED"); 516 window.getApp.$emit("APP_DRAWER_TOGGLED");
519 }, 517 },
520 handleFullScreen() { 518 handleFullScreen() {
521 Util.toggleFullScreen(); 519 Util.toggleFullScreen();
522 } 520 }
523 }, 521 },
524 mounted() { 522 mounted() {
525 this.getSectionList(); 523 this.getSectionList();
526 524
527 var token = this.$store.state.token; 525 var token = this.$store.state.token;
528 http() 526 http()
529 .get("/getClassesList", { 527 .get("/getClassesList", {
530 headers: { Authorization: "Bearer " + token } 528 headers: { Authorization: "Bearer " + token }
531 }) 529 })
532 .then(response => { 530 .then(response => {
533 this.addclass = response.data.data; 531 this.addclass = response.data.data;
534 console.log("getClassesList=====>",this.addclass) 532 console.log("getClassesList=====>",this.addclass)
535 533
536 }) 534 })
537 .catch(err => { 535 .catch(err => {
538 // console.log("err====>", err); 536 // console.log("err====>", err);
539 this.$router.replace({ path: '/' }); 537 this.$router.replace({ path: '/' });
540 }); 538 });
541 }, 539 },
542 540
543 computed:{ 541 computed:{
544 toolbarColor() { 542 toolbarColor() {
545 return this.$vuetify.options.extra.mainNav; 543 return this.$vuetify.options.extra.mainNav;
546 } 544 }
547 } 545 }
548 }; 546 };
549 </script> 547 </script>
550 <style scoped> 548 <style scoped>
551 .v-tabs__div { 549 .v-tabs__div {
552 text-transform: none; 550 text-transform: none;
553 } 551 }
554 .v-input__prepend-outer { 552 .v-input__prepend-outer {
555 margin-right: 0px !important; 553 margin-right: 0px !important;
556 } 554 }
557 .v-card__actions .v-btn { 555 .v-card__actions .v-btn {
558 margin: 0 15px; 556 margin: 0 15px;
559 min-width: 120px; 557 min-width: 120px;
560 } 558 }
561 .primary { 559 .primary {
562 background-color: #aaa !important; 560 background-color: #aaa !important;
563 border-color: #aaa !important; 561 border-color: #aaa !important;
564 } 562 }
565 h4 { 563 h4 {
566 background-repeat: no-repeat; 564 background-repeat: no-repeat;
567 padding: 8px; 565 padding: 8px;
568 margin: auto; 566 margin: auto;
569 font-size: 25px; 567 font-size: 25px;
570 } 568 }
571 #name { 569 #name {
572 position: absolute; 570 position: absolute;
573 left: 100px; 571 left: 100px;
574 top: 17px; 572 top: 17px;
575 } 573 }
576 #icon { 574 #icon {
577 position: absolute; 575 position: absolute;
578 right: 8px; 576 right: 8px;
579 top: 8px; 577 top: 8px;
580 } 578 }
581 #m { 579 #m {
582 position: relative; 580 position: relative;
583 left: 135px; 581 left: 135px;
584 top: -15px; 582 top: -15px;
585 } 583 }
586 #G { 584 #G {
587 position: absolute; 585 position: absolute;
588 top: 38px; 586 top: 38px;
589 color: white; 587 color: white;
590 } 588 }
591 #bt { 589 #bt {
592 position: relative; 590 position: relative;
593 top: -20px; 591 top: -20px;
594 left: 115px; 592 left: 115px;
595 } 593 }
596 #e { 594 #e {
597 position: relative; 595 position: relative;
598 top: 5px; 596 top: 5px;
599 right: -30px; 597 right: -30px;
600 height: 17px; 598 height: 17px;
601 cursor: pointer; 599 cursor: pointer;
602 } 600 }
603 #d { 601 #d {
604 position: relative; 602 position: relative;
605 top: 5px; 603 top: 5px;
606 right: -70px; 604 right: -70px;
607 height: 17px; 605 height: 17px;
608 cursor: pointer; 606 cursor: pointer;
609 } 607 }
610 #td { 608 #td {
611 border: 1px solid #dddddd; 609 border: 1px solid #dddddd;
612 text-align: left; 610 text-align: left;
613 padding: 8px; 611 padding: 8px;
614 } 612 }
615 #dialog { 613 #dialog {
616 height: 550px; 614 height: 550px;
617 } 615 }
618 .active { 616 .active {
619 background-color: black; 617 background-color: black;
620 color: white !important; 618 color: white !important;
621 } 619 }
622 .activebtn { 620 .activebtn {
623 color: black !important; 621 color: black !important;
624 } 622 }
625 #flex { 623 #flex {
626 height: 300px; 624 height: 300px;
627 } 625 }
628 .top{ 626 .top{
629 margin-top:100px; 627 margin-top:100px;
630 } 628 }
631 .v-tabs__item a{ 629 .v-tabs__item a{
632 font-size:16px !important; 630 font-size:16px !important;
633 } 631 }
634 @media screen and (max-width: 769px){ 632 @media screen and (max-width: 769px){
635 .top{ 633 .top{
636 margin-top:0 !important; 634 margin-top:0 !important;
637 } 635 }
638 .userSearch .v-icon { 636 .userSearch .v-icon {
639 font-size: 20px !important; 637 font-size: 20px !important;
640 margin-left: 20px ; 638 margin-left: 20px ;
641 } 639 }
642 } 640 }
643 @media screen and (max-width: 380px) { 641 @media screen and (max-width: 380px) {
642 .pl-3 {
643 padding-left: 0px !important;
644 }
644 .right { 645 .right {
645 float: none !important; 646 float: none !important;
646 } 647 }
647 .subheading { 648 .subheading {
648 font-size: 14px !important; 649 font-size: 14px !important;
649 } 650 }
650 .v-card__actions .v-btn{ 651 .v-card__actions .v-btn{
651 margin: 0 0px; 652 margin: 0 0px;
652 min-width: 100px; 653 min-width: 100px;
653 } 654 }
654 /* .searchIcon .v-icon { 655 /* .searchIcon .v-icon {
655 font-size: 20px; 656 font-size: 20px;
656 margin-left: 20px; 657 margin-left: 20px;
657 } */ 658 } */
658 .subheading { 659 .subheading {
659 font-size: 12px !important; 660 font-size: 12px !important;
660 } 661 }
661 h5 { 662 h5 {
662 font-size: 13px; 663 font-size: 13px;
663 } 664 }
664 } 665 }
665 .v-icon{ 666 .v-icon{
666 font-size:30px; 667 font-size:30px;
667 } 668 }
668 @media screen and (min-width: 1270px){ 669 @media screen and (min-width: 1270px){
669 .hide{ 670 .hide{
670 display: none; 671 display: none;
671 } 672 }
672 /* } 673 /* }
673 @media screen and (max-width: 962px) { 674 @media screen and (max-width: 962px) {
674 .imglogo{ 675 .imglogo{
675 position: absolute; 676 position: absolute;
676 top: 13px; 677 top: 13px;
677 left: 13px !important; 678 left: 13px !important;
678 width: 70px; 679 width: 70px;
679 height: 24px; 680 height: 24px;
680 } */ 681 } */
681 } 682 }
682 @media screen and (max-width: 420px){ 683 @media screen and (max-width: 420px){
683 .userSearch .v-text-field .v-label{ 684 .userSearch .v-text-field .v-label{
684 line-height: 24px !important; 685 line-height: 24px !important;
685 } 686 }
686 .userSearch .v-label{ 687 .userSearch .v-label{
687 font-size: 13px !important; 688 font-size: 13px !important;
688 } 689 }
689 .v-list__tile { 690 .v-list__tile {
690 font-size:14px; 691 font-size:14px;
691 padding: 0 10px; 692 padding: 0 10px;
692 } 693 }
693 .name{ 694 .name{
694 font-size:15px; 695 font-size:15px;
695 } 696 }
src/pages/Students/students.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING StudentS ****** --> 7 <!-- ****** SEARCH ALL EXISTING StudentS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Students" 12 label="Find your Students"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Students</v-tab> 54 >Existing Students</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Students</v-tab> 62 >Add New Students</v-tab>
63 63
64 <!-- ****** EDITS STUDENTS DETAILS ****** --> 64 <!-- ****** EDITS STUDENTS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class=""> 76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Student Profile</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <v-flex xs12 sm6> 109 <v-flex xs12 sm6>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Select Class:</label> 112 <label class="right">Select Class:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
115 <v-select 115 <v-select
116 :items="addclass" 116 :items="addclass"
117 label="Select Class" 117 label="Select Class"
118 v-model="editedItem.select" 118 v-model="editedItem.select"
119 item-text="classNum" 119 item-text="classNum"
120 item-value="_id" 120 item-value="_id"
121 name="Select Class" 121 name="Select Class"
122 @change="getSections(editedItem.select)" 122 @change="getSections(editedItem.select)"
123 required 123 required
124 ></v-select> 124 ></v-select>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm6> 128 <v-flex xs12 sm6>
129 <v-layout> 129 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 130 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 131 <label class="right">Select Section:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs8 class="ml-3"> 133 <v-flex xs8 class="ml-3">
134 <v-select 134 <v-select
135 :items="addSection" 135 :items="addSection"
136 label="Select Section" 136 label="Select Section"
137 v-model="editedItem.selectSection" 137 v-model="editedItem.selectSection"
138 item-text="name" 138 item-text="name"
139 item-value="_id" 139 item-value="_id"
140 name="Select Section" 140 name="Select Section"
141 required 141 required
142 ></v-select> 142 ></v-select>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs12 sm6> 148 <v-flex xs12 sm6>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right">Full Name:</label> 151 <label class="right">Full Name:</label>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 class="ml-3"> 153 <v-flex xs8 class="ml-3">
154 <v-text-field 154 <v-text-field
155 v-model="editedItem.name" 155 v-model="editedItem.name"
156 placeholder="fill your full Name" 156 placeholder="fill your full Name"
157 name="name" 157 name="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">Email ID:</label> 167 <label class="right">Email ID:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 class="ml-3"> 169 <v-flex xs8 class="ml-3">
170 <v-text-field 170 <v-text-field
171 placeholder="fill your email" 171 placeholder="fill your email"
172 v-model="editedItem.email" 172 v-model="editedItem.email"
173 type="text" 173 type="text"
174 name="email" 174 name="email"
175 required 175 required
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 <v-layout> 181 <v-layout>
182 <v-flex xs12 sm6> 182 <v-flex xs12 sm6>
183 <v-layout> 183 <v-layout>
184 <v-flex xs4 class="pt-4 subheading"> 184 <v-flex xs4 class="pt-4 subheading">
185 <label class="right">Date of Birth:</label> 185 <label class="right">Date of Birth:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 class="ml-3"> 187 <v-flex xs8 class="ml-3">
188 <v-menu 188 <v-menu
189 ref="menu" 189 ref="menu"
190 :close-on-content-click="false" 190 :close-on-content-click="false"
191 v-model="menu1" 191 v-model="menu1"
192 :nudge-right="40" 192 :nudge-right="40"
193 lazy 193 lazy
194 transition="scale-transition" 194 transition="scale-transition"
195 offset-y 195 offset-y
196 full-width 196 full-width
197 min-width="290px" 197 min-width="290px"
198 > 198 >
199 <v-text-field 199 <v-text-field
200 slot="activator" 200 slot="activator"
201 v-model="editedItem.date" 201 v-model="editedItem.date"
202 placeholder="Select date" 202 placeholder="Select date"
203 ></v-text-field> 203 ></v-text-field>
204 <v-date-picker 204 <v-date-picker
205 ref="picker" 205 ref="picker"
206 v-model="editedItem.date" 206 v-model="editedItem.date"
207 :max="new Date().toISOString().substr(0, 10)" 207 :max="new Date().toISOString().substr(0, 10)"
208 min="1950-01-01" 208 min="1950-01-01"
209 @input="menu1 = false" 209 @input="menu1 = false"
210 ></v-date-picker> 210 ></v-date-picker>
211 </v-menu> 211 </v-menu>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 </v-flex> 214 </v-flex>
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">City:</label> 218 <label class="right">City:</label>
219 </v-flex> 219 </v-flex>
220 <v-flex xs8 class="ml-3"> 220 <v-flex xs8 class="ml-3">
221 <v-text-field 221 <v-text-field
222 v-model="editedItem.city" 222 v-model="editedItem.city"
223 placeholder="fill your City Name" 223 placeholder="fill your City Name"
224 name="City" 224 name="City"
225 type="text" 225 type="text"
226 required 226 required
227 ></v-text-field> 227 ></v-text-field>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 <v-layout> 232 <v-layout>
233 <v-flex xs12 sm6> 233 <v-flex xs12 sm6>
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">State:</label> 236 <label class="right">State:</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.state" 240 v-model="editedItem.state"
241 placeholder="fill your State Name" 241 placeholder="fill your State Name"
242 name="state" 242 name="state"
243 type="text" 243 type="text"
244 required 244 required
245 ></v-text-field> 245 ></v-text-field>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 </v-flex> 248 </v-flex>
249 <v-flex xs12 sm6> 249 <v-flex xs12 sm6>
250 <v-layout> 250 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Pincode:</label> 252 <label class="right">Pincode:</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs8 class="ml-3"> 254 <v-flex xs8 class="ml-3">
255 <v-text-field 255 <v-text-field
256 v-model="editedItem.pincode" 256 v-model="editedItem.pincode"
257 placeholder="fill your pincode" 257 placeholder="fill your pincode"
258 name="pincode" 258 name="pincode"
259 type="number" 259 type="number"
260 required 260 required
261 ></v-text-field> 261 ></v-text-field>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 <v-layout> 266 <v-layout>
267 <v-flex xs12 sm6> 267 <v-flex xs12 sm6>
268 <v-layout> 268 <v-layout>
269 <v-flex xs4 class="pt-4 subheading"> 269 <v-flex xs4 class="pt-4 subheading">
270 <label class="right">Mobile No:</label> 270 <label class="right">Mobile No:</label>
271 </v-flex> 271 </v-flex>
272 <v-flex xs8 class="ml-3"> 272 <v-flex xs8 class="ml-3">
273 <v-text-field 273 <v-text-field
274 v-model="editedItem.mobile" 274 v-model="editedItem.mobile"
275 placeholder="fill your MobileNo" 275 placeholder="fill your MobileNo"
276 name="mobileNo" 276 name="mobileNo"
277 type="number" 277 type="number"
278 required 278 required
279 ></v-text-field> 279 ></v-text-field>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-flex> 282 </v-flex>
283 <v-flex xs12 sm6> 283 <v-flex xs12 sm6>
284 <v-layout> 284 <v-layout>
285 <v-flex xs4 class="pt-4 subheading"> 285 <v-flex xs4 class="pt-4 subheading">
286 <label class="right">Select Country:</label> 286 <label class="right">Select Country:</label>
287 </v-flex> 287 </v-flex>
288 <v-flex xs8 class="ml-3"> 288 <v-flex xs8 class="ml-3">
289 <v-autocomplete 289 <v-autocomplete
290 v-model="editedItem.country" 290 v-model="editedItem.country"
291 :items="countries" 291 :items="countries"
292 placeholder="Select Country Name" 292 placeholder="Select Country Name"
293 required 293 required
294 ></v-autocomplete> 294 ></v-autocomplete>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12 sm6> 300 <v-flex xs12 sm6>
301 <v-layout> 301 <v-layout>
302 <v-flex xs4 class="pt-4 subheading"> 302 <v-flex xs4 class="pt-4 subheading">
303 <label class="right">Gender:</label> 303 <label class="right">Gender:</label>
304 </v-flex> 304 </v-flex>
305 <v-flex xs8 class="ml-3"> 305 <v-flex xs8 class="ml-3">
306 <v-select 306 <v-select
307 :items="gender" 307 :items="gender"
308 v-model="editedItem.gender" 308 v-model="editedItem.gender"
309 label="Select Gender" 309 label="Select Gender"
310 required 310 required
311 ></v-select> 311 ></v-select>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 <v-flex xs12 sm6> 315 <v-flex xs12 sm6>
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">Father Name:</label> 318 <label class="right">Father Name:</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.fatherName" 322 v-model="editedItem.fatherName"
323 :items="countries" 323 :items="countries"
324 placeholder="Fill your father Name" 324 placeholder="Fill your father Name"
325 required 325 required
326 ></v-text-field> 326 ></v-text-field>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 <v-layout> 331 <v-layout>
332 <v-flex xs12 sm6> 332 <v-flex xs12 sm6>
333 <v-layout> 333 <v-layout>
334 <v-flex xs4 class="pt-4 subheading"> 334 <v-flex xs4 class="pt-4 subheading">
335 <label class="right">Father Cell No:</label> 335 <label class="right">Father Cell No:</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.fatherCellNo" 339 v-model="editedItem.fatherCellNo"
340 placeholder="fill your father Cell Number" 340 placeholder="fill your father Cell Number"
341 name="state" 341 name="state"
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-flex xs12 sm6> 348 <v-flex xs12 sm6>
349 <v-layout> 349 <v-layout>
350 <v-flex xs4 class="pt-4 subheading"> 350 <v-flex xs4 class="pt-4 subheading">
351 <label class="right">Mother Name:</label> 351 <label class="right">Mother Name:</label>
352 </v-flex> 352 </v-flex>
353 <v-flex xs8 class="ml-3"> 353 <v-flex xs8 class="ml-3">
354 <v-text-field 354 <v-text-field
355 v-model="editedItem.motherName" 355 v-model="editedItem.motherName"
356 placeholder="fill your Mother Name" 356 placeholder="fill your Mother Name"
357 name="state" 357 name="state"
358 type="text" 358 type="text"
359 required 359 required
360 ></v-text-field> 360 ></v-text-field>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 <v-layout> 365 <v-layout>
366 <v-flex xs12 sm6> 366 <v-flex xs12 sm6>
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">Mother Cell No:</label> 369 <label class="right">Mother Cell No:</label>
370 </v-flex> 370 </v-flex>
371 <v-flex xs8 class="ml-3"> 371 <v-flex xs8 class="ml-3">
372 <v-text-field 372 <v-text-field
373 v-model="editedItem.motherCellNo" 373 v-model="editedItem.motherCellNo"
374 placeholder="fill your Mother Cell Number" 374 placeholder="fill your Mother Cell Number"
375 name="state" 375 name="state"
376 type="number" 376 type="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 sm6> 382 <v-flex xs12 sm6>
383 <v-layout> 383 <v-layout>
384 <v-flex xs4 class="pt-4 subheading"> 384 <v-flex xs4 class="pt-4 subheading">
385 <label class="right">Academic Year:</label> 385 <label class="right">Academic Year:</label>
386 </v-flex> 386 </v-flex>
387 <v-flex xs8 class="ml-3"> 387 <v-flex xs8 class="ml-3">
388 <v-text-field 388 <v-text-field
389 v-model="editedItem.establishmentYear" 389 v-model="editedItem.establishmentYear"
390 placeholder="fill your Mother Name" 390 placeholder="fill your Mother Name"
391 name="state" 391 name="state"
392 type="number" 392 type="number"
393 required 393 required
394 ></v-text-field> 394 ></v-text-field>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 <v-layout> 399 <v-layout>
400 <v-flex xs12 sm6> 400 <v-flex xs12 sm6>
401 <v-layout> 401 <v-layout>
402 <v-flex xs4 class="pt-4 subheading"> 402 <v-flex xs4 class="pt-4 subheading">
403 <label class="right">Uplaod Image:</label> 403 <label class="right">Uplaod Image:</label>
404 </v-flex> 404 </v-flex>
405 <v-flex xs8 class="ml-3"> 405 <v-flex xs8 class="ml-3">
406 <v-text-field 406 <v-text-field
407 label="Select Image" 407 label="Select Image"
408 @click="pickFile" 408 @click="pickFile"
409 v-model="imageName" 409 v-model="imageName"
410 prepend-icon="attach_file" 410 prepend-icon="attach_file"
411 ></v-text-field> 411 ></v-text-field>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 </v-flex> 414 </v-flex>
415 <v-flex xs12 sm6> 415 <v-flex xs12 sm6>
416 <v-layout> 416 <v-layout>
417 <v-flex xs4 class="pt-4 subheading"> 417 <v-flex xs4 class="pt-4 subheading">
418 <label class="right">Present Address:</label> 418 <label class="right">Present Address:</label>
419 </v-flex> 419 </v-flex>
420 <v-flex xs8 class="ml-3"> 420 <v-flex xs8 class="ml-3">
421 <v-text-field 421 <v-text-field
422 v-model="editedItem.presentAddress" 422 v-model="editedItem.presentAddress"
423 placeholder="fill Your present Address" 423 placeholder="fill Your present Address"
424 required 424 required
425 ></v-text-field> 425 ></v-text-field>
426 </v-flex> 426 </v-flex>
427 </v-layout> 427 </v-layout>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 <v-flex xs12 sm12> 430 <v-flex xs12 sm12>
431 <v-layout> 431 <v-layout>
432 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 432 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
433 <label>Permanent Address:</label> 433 <label>Permanent Address:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs12> 435 <v-flex xs12>
436 <v-text-field 436 <v-text-field
437 name="input-4-3" 437 name="input-4-3"
438 v-model="editedItem.permanentAddress" 438 v-model="editedItem.permanentAddress"
439 placeholder="fill Your Permanent Address" 439 placeholder="fill Your Permanent Address"
440 required 440 required
441 ></v-text-field> 441 ></v-text-field>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 <v-layout> 446 <v-layout>
447 <v-flex xs12 sm12> 447 <v-flex xs12 sm12>
448 <v-card-actions> 448 <v-card-actions>
449 <v-btn round dark @click.native="close">Cancel</v-btn> 449 <v-btn round dark @click.native="close">Cancel</v-btn>
450 <v-spacer></v-spacer> 450 <v-spacer></v-spacer>
451 <v-btn round dark @click="save">Save</v-btn> 451 <v-btn round dark @click="save">Save</v-btn>
452 </v-card-actions> 452 </v-card-actions>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 </v-container> 455 </v-container>
456 </v-form> 456 </v-form>
457 </v-card> 457 </v-card>
458 </v-flex> 458 </v-flex>
459 </v-dialog> 459 </v-dialog>
460 460
461 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 461 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
462 <v-dialog v-model="dialog1" max-width="600px"> 462 <v-dialog v-model="dialog1" max-width="600px">
463 <v-toolbar color="white"> 463 <v-toolbar color="white">
464 <v-spacer></v-spacer> 464 <v-spacer></v-spacer>
465 <v-toolbar-title>Profile</v-toolbar-title> 465 <v-toolbar-title>Profile</v-toolbar-title>
466 <v-spacer></v-spacer> 466 <v-spacer></v-spacer>
467 <v-icon @click="close1">close</v-icon> 467 <v-icon @click="close1">close</v-icon>
468 </v-toolbar> 468 </v-toolbar>
469 <v-card> 469 <v-card>
470 <v-flex align-center justify-center layout text-xs-center> 470 <v-flex align-center justify-center layout text-xs-center>
471 <v-avatar size="50px" style="position:absolute; top:20px;"> 471 <v-avatar size="50px" style="position:absolute; top:20px;">
472 <img src="/static/icon/user.png"> 472 <img src="/static/icon/user.png">
473 </v-avatar> 473 </v-avatar>
474 </v-flex> 474 </v-flex>
475 <v-card-text> 475 <v-card-text>
476 <v-container grid-list-md> 476 <v-container grid-list-md>
477 <v-layout wrap> 477 <v-layout wrap>
478 <v-flex> 478 <v-flex>
479 <br> 479 <br>
480 <br> 480 <br>
481 <v-layout> 481 <v-layout>
482 <v-flex xs5 sm6> 482 <v-flex xs5 sm6>
483 <h5 class="right my-1">Full Name:</h5> 483 <h5 class="right my-1">Full Name:</h5>
484 </v-flex> 484 </v-flex>
485 <v-flex sm6 xs8> 485 <v-flex sm6 xs8>
486 <h5 class="my-1">{{ editedItem.name }}</h5> 486 <h5 class="my-1">{{ editedItem.name }}</h5>
487 </v-flex> 487 </v-flex>
488 </v-layout> 488 </v-layout>
489 <v-layout> 489 <v-layout>
490 <v-flex xs5 sm6> 490 <v-flex xs5 sm6>
491 <h5 class="right my-1">Email:</h5> 491 <h5 class="right my-1">Email:</h5>
492 </v-flex> 492 </v-flex>
493 <v-flex sm6 xs8> 493 <v-flex sm6 xs8>
494 <h5 class="my-1">{{ editedItem.email }}</h5> 494 <h5 class="my-1">{{ editedItem.email }}</h5>
495 </v-flex> 495 </v-flex>
496 </v-layout> 496 </v-layout>
497 <v-layout> 497 <v-layout>
498 <v-flex xs6 sm6> 498 <v-flex xs6 sm6>
499 <h5 class="right my-1">Gender:</h5> 499 <h5 class="right my-1">Gender:</h5>
500 </v-flex> 500 </v-flex>
501 <v-flex sm6 xs8> 501 <v-flex sm6 xs8>
502 <h5 class="my-1">{{ editedItem.gender }}</h5> 502 <h5 class="my-1">{{ editedItem.gender }}</h5>
503 </v-flex> 503 </v-flex>
504 </v-layout> 504 </v-layout>
505 <v-layout> 505 <v-layout>
506 <v-flex xs5 sm6> 506 <v-flex xs5 sm6>
507 <h5 class="right my-1">City:</h5> 507 <h5 class="right my-1">City:</h5>
508 </v-flex> 508 </v-flex>
509 <v-flex sm6 xs8> 509 <v-flex sm6 xs8>
510 <h5 class="my-1">{{ editedItem.city }}</h5> 510 <h5 class="my-1">{{ editedItem.city }}</h5>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 <v-layout> 513 <v-layout>
514 <v-flex xs5 sm6> 514 <v-flex xs5 sm6>
515 <h5 class="right my-1">State:</h5> 515 <h5 class="right my-1">State:</h5>
516 </v-flex> 516 </v-flex>
517 <v-flex sm6 xs8> 517 <v-flex sm6 xs8>
518 <h5 class="my-1">{{ editedItem.state }}</h5> 518 <h5 class="my-1">{{ editedItem.state }}</h5>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 <v-layout> 521 <v-layout>
522 <v-flex xs5 sm6> 522 <v-flex xs5 sm6>
523 <h5 class="right my-1">Country:</h5> 523 <h5 class="right my-1">Country:</h5>
524 </v-flex> 524 </v-flex>
525 <v-flex sm6 xs8> 525 <v-flex sm6 xs8>
526 <h5 class="my-1">{{ editedItem.country }}</h5> 526 <h5 class="my-1">{{ editedItem.country }}</h5>
527 </v-flex> 527 </v-flex>
528 </v-layout> 528 </v-layout>
529 <v-layout> 529 <v-layout>
530 <v-flex xs5 sm6> 530 <v-flex xs5 sm6>
531 <h5 class="right my-1">Pincode:</h5> 531 <h5 class="right my-1">Pincode:</h5>
532 </v-flex> 532 </v-flex>
533 <v-flex sm6 xs8> 533 <v-flex sm6 xs8>
534 <h5 class="my-1">{{ editedItem.pincode }}</h5> 534 <h5 class="my-1">{{ editedItem.pincode }}</h5>
535 </v-flex> 535 </v-flex>
536 </v-layout> 536 </v-layout>
537 <v-layout> 537 <v-layout>
538 <v-flex xs5 sm6> 538 <v-flex xs5 sm6>
539 <h5 class="right my-1">Mobile No:</h5> 539 <h5 class="right my-1">Mobile No:</h5>
540 </v-flex> 540 </v-flex>
541 <v-flex sm6 xs8> 541 <v-flex sm6 xs8>
542 <h5 class="my-1">{{ editedItem.mobile }}</h5> 542 <h5 class="my-1">{{ editedItem.mobile }}</h5>
543 </v-flex> 543 </v-flex>
544 </v-layout> 544 </v-layout>
545 <v-layout> 545 <v-layout>
546 <v-flex xs5 sm6> 546 <v-flex xs5 sm6>
547 <h5 class="right my-1">Academic Year:</h5> 547 <h5 class="right my-1">Academic Year:</h5>
548 </v-flex> 548 </v-flex>
549 <v-flex sm6 xs8> 549 <v-flex sm6 xs8>
550 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 550 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 <v-layout> 553 <v-layout>
554 <v-flex xs5 sm6> 554 <v-flex xs5 sm6>
555 <h5 class="right my-1">Fahter Name:</h5> 555 <h5 class="right my-1">Fahter Name:</h5>
556 </v-flex> 556 </v-flex>
557 <v-flex sm6 xs8> 557 <v-flex sm6 xs8>
558 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 558 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
559 </v-flex> 559 </v-flex>
560 </v-layout> 560 </v-layout>
561 <v-layout> 561 <v-layout>
562 <v-flex xs5 sm6> 562 <v-flex xs5 sm6>
563 <h5 class="right my-1">Mother Name:</h5> 563 <h5 class="right my-1">Mother Name:</h5>
564 </v-flex> 564 </v-flex>
565 <v-flex sm6 xs8> 565 <v-flex sm6 xs8>
566 <h5 class="my-1">{{ editedItem.motherName }}</h5> 566 <h5 class="my-1">{{ editedItem.motherName }}</h5>
567 </v-flex> 567 </v-flex>
568 </v-layout> 568 </v-layout>
569 <v-layout> 569 <v-layout>
570 <v-flex xs5 sm6> 570 <v-flex xs5 sm6>
571 <h5 class="right my-1">Father Cell No:</h5> 571 <h5 class="right my-1">Father Cell No:</h5>
572 </v-flex> 572 </v-flex>
573 <v-flex sm6 xs8> 573 <v-flex sm6 xs8>
574 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 574 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
575 </v-flex> 575 </v-flex>
576 </v-layout> 576 </v-layout>
577 <v-layout> 577 <v-layout>
578 <v-flex xs5 sm6> 578 <v-flex xs5 sm6>
579 <h5 class="right my-1">Mother Cell No:</h5> 579 <h5 class="right my-1">Mother Cell No:</h5>
580 </v-flex> 580 </v-flex>
581 <v-flex sm6 xs8> 581 <v-flex sm6 xs8>
582 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 582 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
583 </v-flex> 583 </v-flex>
584 </v-layout> 584 </v-layout>
585 <v-layout> 585 <v-layout>
586 <v-flex xs5 sm6> 586 <v-flex xs5 sm6>
587 <h5 class="right my-1">Date Of Birth:</h5> 587 <h5 class="right my-1">Date Of Birth:</h5>
588 </v-flex> 588 </v-flex>
589 <v-flex sm6 xs8> 589 <v-flex sm6 xs8>
590 <h5 class="my-1">{{ editedItem.dob }}</h5> 590 <h5 class="my-1">{{ editedItem.dob }}</h5>
591 </v-flex> 591 </v-flex>
592 </v-layout> 592 </v-layout>
593 <v-layout> 593 <v-layout>
594 <v-flex xs6 sm6 > 594 <v-flex xs6 sm6 >
595 <h5 class="right my-1">Permanent Address:</h5> 595 <h5 class="right my-1">Permanent Address:</h5>
596 </v-flex> 596 </v-flex>
597 <v-flex sm6 xs8> 597 <v-flex sm6 xs8>
598 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 598 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
599 </v-flex> 599 </v-flex>
600 </v-layout> 600 </v-layout>
601 <v-layout> 601 <v-layout>
602 <v-flex xs6 sm6 > 602 <v-flex xs6 sm6 >
603 <h5 class="right my-1">present Address:</h5> 603 <h5 class="right my-1">present Address:</h5>
604 </v-flex> 604 </v-flex>
605 <v-flex sm6 xs8> 605 <v-flex sm6 xs8>
606 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 606 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
607 </v-flex> 607 </v-flex>
608 </v-layout> 608 </v-layout>
609 </v-flex> 609 </v-flex>
610 </v-layout> 610 </v-layout>
611 </v-container> 611 </v-container>
612 </v-card-text> 612 </v-card-text>
613 </v-card> 613 </v-card>
614 </v-dialog> 614 </v-dialog>
615 615
616 <v-snackbar 616 <v-snackbar
617 :timeout="timeout" 617 :timeout="timeout"
618 :top="y === 'top'" 618 :top="y === 'top'"
619 :right="x === 'right'" 619 :right="x === 'right'"
620 :vertical="mode === 'vertical'" 620 :vertical="mode === 'vertical'"
621 v-model="snackbar" 621 v-model="snackbar"
622 color="success" 622 color="success"
623 >{{ text }}</v-snackbar> 623 >{{ text }}</v-snackbar>
624 624
625 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 625 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
626 <v-data-table 626 <v-data-table
627 :headers="headers" 627 :headers="headers"
628 :items="desserts" 628 :items="desserts"
629 :pagination.sync="pagination" 629 :pagination.sync="pagination"
630 :search="search" 630 :search="search"
631 > 631 >
632 <template slot="items" slot-scope="props"> 632 <template slot="items" slot-scope="props">
633 <td id="td" class="text-xs-center">{{ props.index}}</td> 633 <td id="td" class="text-xs-center">{{ props.index}}</td>
634 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 634 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
635 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 635 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
636 <td id="td" class="text-xs-center">{{ props.item.dob }}</td> 636 <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
637 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 637 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
638 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td> 638 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
639 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td> 639 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
640 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 640 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
641 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 641 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
642 642
643 <td class="text-xs-center"> 643 <td class="text-xs-center">
644 <span> 644 <span>
645 <img 645 <img
646 style="cursor:pointer; width:25px; height:18px; " 646 style="cursor:pointer; width:25px; height:18px; "
647 class="mr-5" 647 class="mr-5"
648 @click="profile(props.item)" 648 @click="profile(props.item)"
649 src="/static/icon/eye1.png" 649 src="/static/icon/eye1.png"
650 > 650 >
651 <img 651 <img
652 style="cursor:pointer; width:20px; height:18px; " 652 style="cursor:pointer; width:20px; height:18px; "
653 class="mr-5" 653 class="mr-5"
654 @click="editItem(props.item)" 654 @click="editItem(props.item)"
655 src="/static/icon/edit1.png" 655 src="/static/icon/edit1.png"
656 > 656 >
657 <img 657 <img
658 style="cursor:pointer; height:20px; " 658 style="cursor:pointer; height:20px; "
659 class="mr-5" 659 class="mr-5"
660 @click="deleteItem(props.item)" 660 @click="deleteItem(props.item)"
661 src="/static/icon/delete1.png" 661 src="/static/icon/delete1.png"
662 > 662 >
663 </span> 663 </span>
664 </td> 664 </td>
665 </template> 665 </template>
666 <v-alert 666 <v-alert
667 slot="no-results" 667 slot="no-results"
668 :value="true" 668 :value="true"
669 color="error" 669 color="error"
670 icon="warning" 670 icon="warning"
671 >Your search for "{{ search }}" found no results.</v-alert> 671 >Your search for "{{ search }}" found no results.</v-alert>
672 </v-data-table> 672 </v-data-table>
673 </v-tab-item> 673 </v-tab-item>
674 674
675 <!-- ****** ADD MULTIPLE STUDENTS ****** --> 675 <!-- ****** ADD MULTIPLE STUDENTS ****** -->
676 676
677 <v-tab-item> 677 <v-tab-item>
678 <v-container> 678 <v-container>
679 <v-snackbar 679 <v-snackbar
680 :timeout="timeout" 680 :timeout="timeout"
681 :top="y === 'top'" 681 :top="y === 'top'"
682 :right="x === 'right'" 682 :right="x === 'right'"
683 :vertical="mode === 'vertical'" 683 :vertical="mode === 'vertical'"
684 v-model="snackbar" 684 v-model="snackbar"
685 color="success" 685 color="success"
686 >{{ text }}</v-snackbar> 686 >{{ text }}</v-snackbar>
687 <v-flex xs12 sm12 class="my-4"> 687 <v-flex xs12 sm12 class="my-4">
688 <v-card flat> 688 <v-card flat>
689 <v-form ref="form" v-model="valid" lazy-validation> 689 <v-form ref="form" v-model="valid" lazy-validation>
690 <v-container fluid> 690 <v-container fluid>
691 <v-layout> 691 <v-layout>
692 <v-flex 692 <v-flex
693 xs12 693 xs12
694 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 694 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
695 > 695 >
696 <v-avatar size="100px"> 696 <v-avatar size="100px">
697 <img src="/static/icon/user.png" v-if="!imageUrl"> 697 <img src="/static/icon/user.png" v-if="!imageUrl">
698 </v-avatar> 698 </v-avatar>
699 <input 699 <input
700 type="file" 700 type="file"
701 style="display: none" 701 style="display: none"
702 ref="image" 702 ref="image"
703 accept="image/*" 703 accept="image/*"
704 @change="onFilePicked" 704 @change="onFilePicked"
705 > 705 >
706 <img 706 <img
707 :src="imageData.imageUrl" 707 :src="imageData.imageUrl"
708 height="150" 708 height="150"
709 v-if="imageUrl" 709 v-if="imageUrl"
710 style="border-radius:50%; width:200px" 710 style="border-radius:50%; width:200px"
711 > 711 >
712 </v-flex> 712 </v-flex>
713 </v-layout> 713 </v-layout>
714 <v-layout> 714 <v-layout>
715 <v-flex xs12 sm6> 715 <v-flex xs12 sm6>
716 <v-layout> 716 <v-layout>
717 <v-flex xs4 class="pt-4 subheading"> 717 <v-flex xs4 class="pt-4 subheading">
718 <label class="right">Select Class:</label> 718 <label class="right">Select Class:</label>
719 </v-flex> 719 </v-flex>
720 <v-flex xs8 class="ml-3"> 720 <v-flex xs8 class="ml-3">
721 <v-select 721 <v-select
722 :items="addclass" 722 :items="addclass"
723 label="Select Class" 723 label="Select Class"
724 v-model="addStudents.select" 724 v-model="addStudents.select"
725 item-text="classNum" 725 item-text="classNum"
726 item-value="_id" 726 item-value="_id"
727 name="Select Class" 727 name="Select Class"
728 :rules="classRules" 728 :rules="classRules"
729 @change="getSections(addStudents.select)" 729 @change="getSections(addStudents.select)"
730 required 730 required
731 ></v-select> 731 ></v-select>
732 </v-flex> 732 </v-flex>
733 </v-layout> 733 </v-layout>
734 </v-flex> 734 </v-flex>
735 <v-flex xs12 sm6> 735 <v-flex xs12 sm6>
736 <v-layout> 736 <v-layout>
737 <v-flex xs4 class="pt-4 subheading"> 737 <v-flex xs4 class="pt-4 subheading">
738 <label class="right">Select Section:</label> 738 <label class="right">Select Section:</label>
739 </v-flex> 739 </v-flex>
740 <v-flex xs8 class="ml-3"> 740 <v-flex xs8 class="ml-3">
741 <v-select 741 <v-select
742 :items="addSection" 742 :items="addSection"
743 label="Select Section" 743 label="Select Section"
744 v-model="addStudents.selectSection" 744 v-model="addStudents.selectSection"
745 item-text="name" 745 item-text="name"
746 item-value="_id" 746 item-value="_id"
747 name="Select Section" 747 name="Select Section"
748 :rules="classRules" 748 :rules="classRules"
749 required 749 required
750 ></v-select> 750 ></v-select>
751 </v-flex> 751 </v-flex>
752 </v-layout> 752 </v-layout>
753 </v-flex> 753 </v-flex>
754 </v-layout> 754 </v-layout>
755 <v-layout> 755 <v-layout>
756 <v-flex xs12 sm6> 756 <v-flex xs12 sm6>
757 <v-layout> 757 <v-layout>
758 <v-flex xs4 class="pt-4 subheading"> 758 <v-flex xs4 class="pt-4 subheading">
759 <label class="right">Full Name:</label> 759 <label class="right">Full Name:</label>
760 </v-flex> 760 </v-flex>
761 <v-flex xs8 class="ml-3"> 761 <v-flex xs8 class="ml-3">
762 <v-text-field 762 <v-text-field
763 v-model="addStudents.name" 763 v-model="addStudents.name"
764 placeholder="fill your full Name" 764 placeholder="fill your full Name"
765 name="name" 765 name="name"
766 type="text" 766 type="text"
767 :rules="nameRules" 767 :rules="nameRules"
768 required 768 required
769 ></v-text-field> 769 ></v-text-field>
770 </v-flex> 770 </v-flex>
771 </v-layout> 771 </v-layout>
772 </v-flex> 772 </v-flex>
773 <v-flex xs12 sm6> 773 <v-flex xs12 sm6>
774 <v-layout> 774 <v-layout>
775 <v-flex xs4 class="pt-4 subheading"> 775 <v-flex xs4 class="pt-4 subheading">
776 <label class="right">Email ID:</label> 776 <label class="right">Email ID:</label>
777 </v-flex> 777 </v-flex>
778 <v-flex xs8 class="ml-3"> 778 <v-flex xs8 class="ml-3">
779 <v-text-field 779 <v-text-field
780 placeholder="fill your email" 780 placeholder="fill your email"
781 :rules="emailRules" 781 :rules="emailRules"
782 v-model="addStudents.email" 782 v-model="addStudents.email"
783 type="text" 783 type="text"
784 name="email" 784 name="email"
785 required 785 required
786 ></v-text-field> 786 ></v-text-field>
787 </v-flex> 787 </v-flex>
788 </v-layout> 788 </v-layout>
789 </v-flex> 789 </v-flex>
790 </v-layout> 790 </v-layout>
791 <v-layout> 791 <v-layout>
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">Date of Birth:</label> 795 <label class="right">Date of Birth:</label>
796 </v-flex> 796 </v-flex>
797 <v-flex xs8 class="ml-3"> 797 <v-flex xs8 class="ml-3">
798 <v-menu 798 <v-menu
799 ref="menu" 799 ref="menu"
800 :close-on-content-click="false" 800 :close-on-content-click="false"
801 v-model="menu" 801 v-model="menu"
802 :nudge-right="40" 802 :nudge-right="40"
803 lazy 803 lazy
804 transition="scale-transition" 804 transition="scale-transition"
805 offset-y 805 offset-y
806 full-width 806 full-width
807 min-width="290px" 807 min-width="290px"
808 > 808 >
809 <v-text-field 809 <v-text-field
810 slot="activator" 810 slot="activator"
811 :rules="dateRules" 811 :rules="dateRules"
812 v-model="addStudents.date" 812 v-model="addStudents.date"
813 placeholder="Select date" 813 placeholder="Select date"
814 ></v-text-field> 814 ></v-text-field>
815 <v-date-picker 815 <v-date-picker
816 ref="picker" 816 ref="picker"
817 v-model="addStudents.date" 817 v-model="addStudents.date"
818 :max="new Date().toISOString().substr(0, 10)" 818 :max="new Date().toISOString().substr(0, 10)"
819 min="1950-01-01" 819 min="1950-01-01"
820 @input="menu = false" 820 @input="menu = false"
821 ></v-date-picker> 821 ></v-date-picker>
822 </v-menu> 822 </v-menu>
823 </v-flex> 823 </v-flex>
824 </v-layout> 824 </v-layout>
825 </v-flex> 825 </v-flex>
826 <v-flex xs12 sm6> 826 <v-flex xs12 sm6>
827 <v-layout> 827 <v-layout>
828 <v-flex xs4 class="pt-4 subheading"> 828 <v-flex xs4 class="pt-4 subheading">
829 <label class="right">City:</label> 829 <label class="right">City:</label>
830 </v-flex> 830 </v-flex>
831 <v-flex xs8 class="ml-3"> 831 <v-flex xs8 class="ml-3">
832 <v-text-field 832 <v-text-field
833 v-model="addStudents.city" 833 v-model="addStudents.city"
834 placeholder="fill your City Name" 834 placeholder="fill your City Name"
835 name="City" 835 name="City"
836 type="text" 836 type="text"
837 :rules="cityRules" 837 :rules="cityRules"
838 required 838 required
839 ></v-text-field> 839 ></v-text-field>
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-layout> 844 <v-layout>
845 <v-flex xs12 sm6> 845 <v-flex xs12 sm6>
846 <v-layout> 846 <v-layout>
847 <v-flex xs4 class="pt-4 subheading"> 847 <v-flex xs4 class="pt-4 subheading">
848 <label class="right">State:</label> 848 <label class="right">State:</label>
849 </v-flex> 849 </v-flex>
850 <v-flex xs8 class="ml-3"> 850 <v-flex xs8 class="ml-3">
851 <v-text-field 851 <v-text-field
852 v-model="addStudents.state" 852 v-model="addStudents.state"
853 placeholder="fill your State Name" 853 placeholder="fill your State Name"
854 name="state" 854 name="state"
855 type="text" 855 type="text"
856 :rules="stateRules" 856 :rules="stateRules"
857 required 857 required
858 ></v-text-field> 858 ></v-text-field>
859 </v-flex> 859 </v-flex>
860 </v-layout> 860 </v-layout>
861 </v-flex> 861 </v-flex>
862 <v-flex xs12 sm6> 862 <v-flex xs12 sm6>
863 <v-layout> 863 <v-layout>
864 <v-flex xs4 class="pt-4 subheading"> 864 <v-flex xs4 class="pt-4 subheading">
865 <label class="right">Pincode:</label> 865 <label class="right">Pincode:</label>
866 </v-flex> 866 </v-flex>
867 <v-flex xs8 class="ml-3"> 867 <v-flex xs8 class="ml-3">
868 <v-text-field 868 <v-text-field
869 v-model="addStudents.pincode" 869 v-model="addStudents.pincode"
870 placeholder="fill your pincode" 870 placeholder="fill your pincode"
871 name="pincode" 871 name="pincode"
872 type="number" 872 type="number"
873 :rules="pincode" 873 :rules="pincode"
874 required 874 required
875 ></v-text-field> 875 ></v-text-field>
876 </v-flex> 876 </v-flex>
877 </v-layout> 877 </v-layout>
878 </v-flex> 878 </v-flex>
879 </v-layout> 879 </v-layout>
880 <v-layout> 880 <v-layout>
881 <v-flex xs12 sm6> 881 <v-flex xs12 sm6>
882 <v-layout> 882 <v-layout>
883 <v-flex xs4 class="pt-4 subheading"> 883 <v-flex xs4 class="pt-4 subheading">
884 <label class="right">Mobile No:</label> 884 <label class="right">Mobile No:</label>
885 </v-flex> 885 </v-flex>
886 <v-flex xs8 class="ml-3"> 886 <v-flex xs8 class="ml-3">
887 <v-text-field 887 <v-text-field
888 v-model="addStudents.mobile" 888 v-model="addStudents.mobile"
889 placeholder="fill your MobileNo" 889 placeholder="fill your MobileNo"
890 name="mobileNo" 890 name="mobileNo"
891 type="number" 891 type="number"
892 :rules="mobileNoRules" 892 :rules="mobileNoRules"
893 required 893 required
894 ></v-text-field> 894 ></v-text-field>
895 </v-flex> 895 </v-flex>
896 </v-layout> 896 </v-layout>
897 </v-flex> 897 </v-flex>
898 <v-flex xs12 sm6> 898 <v-flex xs12 sm6>
899 <v-layout> 899 <v-layout>
900 <v-flex xs4 class="pt-4 subheading"> 900 <v-flex xs4 class="pt-4 subheading">
901 <label class="right">Select Country:</label> 901 <label class="right">Select Country:</label>
902 </v-flex> 902 </v-flex>
903 <v-flex xs8 class="ml-3"> 903 <v-flex xs8 class="ml-3">
904 <v-autocomplete 904 <v-autocomplete
905 v-model="addStudents.country" 905 v-model="addStudents.country"
906 :rules="country" 906 :rules="country"
907 :items="countries" 907 :items="countries"
908 placeholder="Select Country Name" 908 placeholder="Select Country Name"
909 required 909 required
910 ></v-autocomplete> 910 ></v-autocomplete>
911 </v-flex> 911 </v-flex>
912 </v-layout> 912 </v-layout>
913 </v-flex> 913 </v-flex>
914 </v-layout> 914 </v-layout>
915 <v-layout> 915 <v-layout>
916 <v-flex xs12 sm6> 916 <v-flex xs12 sm6>
917 <v-layout> 917 <v-layout>
918 <v-flex xs4 class="pt-4 subheading"> 918 <v-flex xs4 class="pt-4 subheading">
919 <label class="right">Gender:</label> 919 <label class="right">Gender:</label>
920 </v-flex> 920 </v-flex>
921 <v-flex xs8 class="ml-3"> 921 <v-flex xs8 class="ml-3">
922 <v-select 922 <v-select
923 :items="gender" 923 :items="gender"
924 v-model="addStudents.gender" 924 v-model="addStudents.gender"
925 :rules="genderRules" 925 :rules="genderRules"
926 label="Select Gender" 926 label="Select Gender"
927 required 927 required
928 ></v-select> 928 ></v-select>
929 </v-flex> 929 </v-flex>
930 </v-layout> 930 </v-layout>
931 </v-flex> 931 </v-flex>
932 <v-flex xs12 sm6> 932 <v-flex xs12 sm6>
933 <v-layout> 933 <v-layout>
934 <v-flex xs4 class="pt-4 subheading"> 934 <v-flex xs4 class="pt-4 subheading">
935 <label class="right">Father Name:</label> 935 <label class="right">Father Name:</label>
936 </v-flex> 936 </v-flex>
937 <v-flex xs8 class="ml-3"> 937 <v-flex xs8 class="ml-3">
938 <v-text-field 938 <v-text-field
939 v-model="addStudents.fatherName" 939 v-model="addStudents.fatherName"
940 :rules="fatherNameRules" 940 :rules="fatherNameRules"
941 :items="countries" 941 :items="countries"
942 placeholder="Fill your father Name" 942 placeholder="Fill your father Name"
943 required 943 required
944 ></v-text-field> 944 ></v-text-field>
945 </v-flex> 945 </v-flex>
946 </v-layout> 946 </v-layout>
947 </v-flex> 947 </v-flex>
948 </v-layout> 948 </v-layout>
949 <v-layout> 949 <v-layout>
950 <v-flex xs12 sm6> 950 <v-flex xs12 sm6>
951 <v-layout> 951 <v-layout>
952 <v-flex xs4 class="pt-4 subheading"> 952 <v-flex xs4 class="pt-4 subheading">
953 <label class="right">Father Cell No:</label> 953 <label class="right">Father Cell No:</label>
954 </v-flex> 954 </v-flex>
955 <v-flex xs8 class="ml-3"> 955 <v-flex xs8 class="ml-3">
956 <v-text-field 956 <v-text-field
957 v-model="addStudents.fatherCellNo" 957 v-model="addStudents.fatherCellNo"
958 placeholder="fill your father Cell Number" 958 placeholder="fill your father Cell Number"
959 name="state" 959 name="state"
960 type="number" 960 type="number"
961 :rules="fatheCellNoRules" 961 :rules="fatheCellNoRules"
962 required 962 required
963 ></v-text-field> 963 ></v-text-field>
964 </v-flex> 964 </v-flex>
965 </v-layout> 965 </v-layout>
966 </v-flex> 966 </v-flex>
967 <v-flex xs12 sm6> 967 <v-flex xs12 sm6>
968 <v-layout> 968 <v-layout>
969 <v-flex xs4 class="pt-4 subheading"> 969 <v-flex xs4 class="pt-4 subheading">
970 <label class="right">Mother Name:</label> 970 <label class="right">Mother Name:</label>
971 </v-flex> 971 </v-flex>
972 <v-flex xs8 class="ml-3"> 972 <v-flex xs8 class="ml-3">
973 <v-text-field 973 <v-text-field
974 v-model="addStudents.motherName" 974 v-model="addStudents.motherName"
975 placeholder="fill your Mother Name" 975 placeholder="fill your Mother Name"
976 name="state" 976 name="state"
977 type="text" 977 type="text"
978 :rules="motherNameRules" 978 :rules="motherNameRules"
979 required 979 required
980 ></v-text-field> 980 ></v-text-field>
981 </v-flex> 981 </v-flex>
982 </v-layout> 982 </v-layout>
983 </v-flex> 983 </v-flex>
984 </v-layout> 984 </v-layout>
985 <v-layout> 985 <v-layout>
986 <v-flex xs12 sm6> 986 <v-flex xs12 sm6>
987 <v-layout> 987 <v-layout>
988 <v-flex xs4 class="pt-4 subheading"> 988 <v-flex xs4 class="pt-4 subheading">
989 <label class="right">Mother Cell No:</label> 989 <label class="right">Mother Cell No:</label>
990 </v-flex> 990 </v-flex>
991 <v-flex xs8 class="ml-3"> 991 <v-flex xs8 class="ml-3">
992 <v-text-field 992 <v-text-field
993 v-model="addStudents.motherCellNo" 993 v-model="addStudents.motherCellNo"
994 placeholder="fill your Mother Cell Number" 994 placeholder="fill your Mother Cell Number"
995 name="state" 995 name="state"
996 type="number" 996 type="number"
997 :rules="motherCellNoRules" 997 :rules="motherCellNoRules"
998 required 998 required
999 ></v-text-field> 999 ></v-text-field>
1000 </v-flex> 1000 </v-flex>
1001 </v-layout> 1001 </v-layout>
1002 </v-flex> 1002 </v-flex>
1003 <v-flex xs12 sm6> 1003 <v-flex xs12 sm6>
1004 <v-layout> 1004 <v-layout>
1005 <v-flex xs4 class="pt-4 subheading"> 1005 <v-flex xs4 class="pt-4 subheading">
1006 <label class="right">Academic Year:</label> 1006 <label class="right">Academic Year:</label>
1007 </v-flex> 1007 </v-flex>
1008 <v-flex xs8 class="ml-3"> 1008 <v-flex xs8 class="ml-3">
1009 <v-text-field 1009 <v-text-field
1010 v-model="addStudents.establishmentYear" 1010 v-model="addStudents.establishmentYear"
1011 placeholder="fill your Mother Name" 1011 placeholder="fill your Mother Name"
1012 name="state" 1012 name="state"
1013 type="number" 1013 type="number"
1014 :rules="establishmentYearRules" 1014 :rules="establishmentYearRules"
1015 required 1015 required
1016 ></v-text-field> 1016 ></v-text-field>
1017 </v-flex> 1017 </v-flex>
1018 </v-layout> 1018 </v-layout>
1019 </v-flex> 1019 </v-flex>
1020 </v-layout> 1020 </v-layout>
1021 <v-layout> 1021 <v-layout>
1022 <v-flex xs12 sm6> 1022 <v-flex xs12 sm6>
1023 <v-layout> 1023 <v-layout>
1024 <v-flex xs4 class="pt-4 subheading"> 1024 <v-flex xs4 class="pt-4 subheading">
1025 <label class="right">Uplaod Image:</label> 1025 <label class="right">Uplaod Image:</label>
1026 </v-flex> 1026 </v-flex>
1027 <v-flex xs8 class="ml-3"> 1027 <v-flex xs8 class="ml-3">
1028 <v-text-field 1028 <v-text-field
1029 label="Select Image" 1029 label="Select Image"
1030 @click="pickFile" 1030 @click="pickFile"
1031 v-model="imageName" 1031 v-model="imageName"
1032 prepend-icon="attach_file" 1032 append-icon="attach_file"
1033 ></v-text-field> 1033 ></v-text-field>
1034 </v-flex> 1034 </v-flex>
1035 </v-layout> 1035 </v-layout>
1036 </v-flex> 1036 </v-flex>
1037 </v-layout> 1037 </v-layout>
1038 <v-layout> 1038 <v-layout>
1039 <v-flex xs12 sm12> 1039 <v-flex xs12 sm12>
1040 <v-layout> 1040 <v-layout>
1041 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 1041 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
1042 <label class>Present Address:</label> 1042 <label class>Present Address:</label>
1043 </v-flex> 1043 </v-flex>
1044 <v-flex xs12> 1044 <v-flex xs12>
1045 <v-text-field 1045 <v-text-field
1046 name="input-4-3" 1046 name="input-4-3"
1047 v-model="addStudents.presentAddress" 1047 v-model="addStudents.presentAddress"
1048 :rules="presentAddress" 1048 :rules="presentAddress"
1049 placeholder="fill Your present Address" 1049 placeholder="fill Your present Address"
1050 required 1050 required
1051 ></v-text-field> 1051 ></v-text-field>
1052 </v-flex> 1052 </v-flex>
1053 </v-layout> 1053 </v-layout>
1054 </v-flex> 1054 </v-flex>
1055 <v-flex xs12 sm12> 1055 <v-flex xs12 sm12>
1056 <v-layout> 1056 <v-layout>
1057 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 1057 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
1058 <label>Permanent Address:</label> 1058 <label>Permanent Address:</label>
1059 </v-flex> 1059 </v-flex>
1060 <v-flex xs12> 1060 <v-flex xs12>
1061 <v-text-field 1061 <v-text-field
1062 name="input-4-3" 1062 name="input-4-3"
1063 v-model="addStudents.permanentAddress" 1063 v-model="addStudents.permanentAddress"
1064 :rules="permanentAddress" 1064 :rules="permanentAddress"
1065 placeholder="fill Your Permanent Address" 1065 placeholder="fill Your Permanent Address"
1066 required 1066 required
1067 ></v-text-field> 1067 ></v-text-field>
1068 </v-flex> 1068 </v-flex>
1069 </v-layout> 1069 </v-layout>
1070 </v-flex> 1070 </v-flex>
1071 </v-layout> 1071 </v-layout>
1072 <v-layout> 1072 <v-layout>
1073 <v-flex xs12 sm12> 1073 <v-flex xs12 sm12>
1074 <v-card-actions> 1074 <v-card-actions>
1075 <v-btn @click="clear" round dark>clear</v-btn> 1075 <v-btn @click="clear" round dark>clear</v-btn>
1076 <v-spacer></v-spacer> 1076 <v-spacer></v-spacer>
1077 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 1077 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
1078 </v-card-actions> 1078 </v-card-actions>
1079 </v-flex> 1079 </v-flex>
1080 </v-layout> 1080 </v-layout>
1081 </v-container> 1081 </v-container>
1082 </v-form> 1082 </v-form>
1083 </v-card> 1083 </v-card>
1084 </v-flex> 1084 </v-flex>
1085 </v-container> 1085 </v-container>
1086 </v-tab-item> 1086 </v-tab-item>
1087 </v-tabs> 1087 </v-tabs>
1088 <div class="loader" v-if="showLoader"> 1088 <div class="loader" v-if="showLoader">
1089 <v-progress-circular indeterminate color="white"></v-progress-circular> 1089 <v-progress-circular indeterminate color="white"></v-progress-circular>
1090 </div> 1090 </div>
1091 </v-app> 1091 </v-app>
1092 </template> 1092 </template>
1093 1093
1094 <script> 1094 <script>
1095 import http from "@/Services/http.js"; 1095 import http from "@/Services/http.js";
1096 import Util from "@/util"; 1096 import Util from "@/util";
1097 1097
1098 export default { 1098 export default {
1099 data: () => ({ 1099 data: () => ({
1100 snackbar: false, 1100 snackbar: false,
1101 y: "top", 1101 y: "top",
1102 x: "right", 1102 x: "right",
1103 mode: "", 1103 mode: "",
1104 timeout: 3000, 1104 timeout: 3000,
1105 text: "", 1105 text: "",
1106 showLoader:false, 1106 showLoader:false,
1107 loading: false, 1107 loading: false,
1108 date: null, 1108 date: null,
1109 search: "", 1109 search: "",
1110 menu: false, 1110 menu: false,
1111 menu1: false, 1111 menu1: false,
1112 dialog: false, 1112 dialog: false,
1113 dialog1: false, 1113 dialog1: false,
1114 valid: true, 1114 valid: true,
1115 isActive: true, 1115 isActive: true,
1116 newActive: false, 1116 newActive: false,
1117 addclass: [], 1117 addclass: [],
1118 addSection: [], 1118 addSection: [],
1119 gender: ["Male", "Female"], 1119 gender: ["Male", "Female"],
1120 AddUsercredentials: {}, 1120 AddUsercredentials: {},
1121 pagination: { 1121 pagination: {
1122 rowsPerPage: 15 1122 rowsPerPage: 15
1123 }, 1123 },
1124 imageData: {}, 1124 imageData: {},
1125 imageName: "", 1125 imageName: "",
1126 imageUrl: "", 1126 imageUrl: "",
1127 imageFile: "", 1127 imageFile: "",
1128 nameRules: [v => !!v || " Full Name is required"], 1128 nameRules: [v => !!v || " Full Name is required"],
1129 dateRules: [v => !!v || " DOB is required"], 1129 dateRules: [v => !!v || " DOB is required"],
1130 cityRules: [v => !!v || " City Name is required"], 1130 cityRules: [v => !!v || " City Name is required"],
1131 pincode: [v => !!v || " Pincode is required"], 1131 pincode: [v => !!v || " Pincode is required"],
1132 country: [v => !!v || " Country Name is required"], 1132 country: [v => !!v || " Country Name is required"],
1133 permanentAddress: [v => !!v || " Permanent Address is required"], 1133 permanentAddress: [v => !!v || " Permanent Address is required"],
1134 presentAddress: [v => !!v || " Present Address is required"], 1134 presentAddress: [v => !!v || " Present Address is required"],
1135 mobileNoRules: [v => !!v || "Mobile Number is required"], 1135 mobileNoRules: [v => !!v || "Mobile Number is required"],
1136 stateRules: [v => !!v || "State Name is required"], 1136 stateRules: [v => !!v || "State Name is required"],
1137 classRules: [v => !!v || " Class Name is required"], 1137 classRules: [v => !!v || " Class Name is required"],
1138 genderRules: [v => !!v || " Select Gender is required"], 1138 genderRules: [v => !!v || " Select Gender is required"],
1139 fatherNameRules: [v => !!v || " Father Name is required"], 1139 fatherNameRules: [v => !!v || " Father Name is required"],
1140 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1140 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1141 motherNameRules: [v => !!v || " Mother Name is required"], 1141 motherNameRules: [v => !!v || " Mother Name is required"],
1142 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1142 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1143 establishmentYearRules: [v => !!v || " Academic Year is required"], 1143 establishmentYearRules: [v => !!v || " Academic Year is required"],
1144 errorMessages: "", 1144 errorMessages: "",
1145 emailRules: [ 1145 emailRules: [
1146 v => !!v || "E-mail is required", 1146 v => !!v || "E-mail is required",
1147 v => 1147 v =>
1148 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1148 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1149 "E-mail must be valid" 1149 "E-mail must be valid"
1150 ], 1150 ],
1151 countries: [ 1151 countries: [
1152 "Afghanistan", 1152 "Afghanistan",
1153 "Albania", 1153 "Albania",
1154 "Algeria", 1154 "Algeria",
1155 "Andorra", 1155 "Andorra",
1156 "Angola", 1156 "Angola",
1157 "Anguilla", 1157 "Anguilla",
1158 "Antigua &amp; Barbuda", 1158 "Antigua &amp; Barbuda",
1159 "Argentina", 1159 "Argentina",
1160 "Armenia", 1160 "Armenia",
1161 "Aruba", 1161 "Aruba",
1162 "Australia", 1162 "Australia",
1163 "Austria", 1163 "Austria",
1164 "Azerbaijan", 1164 "Azerbaijan",
1165 "Bahamas", 1165 "Bahamas",
1166 "Bahrain", 1166 "Bahrain",
1167 "Bangladesh", 1167 "Bangladesh",
1168 "Barbados", 1168 "Barbados",
1169 "Belarus", 1169 "Belarus",
1170 "Belgium", 1170 "Belgium",
1171 "Belize", 1171 "Belize",
1172 "Benin", 1172 "Benin",
1173 "Bermuda", 1173 "Bermuda",
1174 "Bhutan", 1174 "Bhutan",
1175 "Bolivia", 1175 "Bolivia",
1176 "Bosnia &amp; Herzegovina", 1176 "Bosnia &amp; Herzegovina",
1177 "Botswana", 1177 "Botswana",
1178 "Brazil", 1178 "Brazil",
1179 "British Virgin Islands", 1179 "British Virgin Islands",
1180 "Brunei", 1180 "Brunei",
1181 "Bulgaria", 1181 "Bulgaria",
1182 "Burkina Faso", 1182 "Burkina Faso",
1183 "Burundi", 1183 "Burundi",
1184 "Cambodia", 1184 "Cambodia",
1185 "Cameroon", 1185 "Cameroon",
1186 "Cape Verde", 1186 "Cape Verde",
1187 "Cayman Islands", 1187 "Cayman Islands",
1188 "Chad", 1188 "Chad",
1189 "Chile", 1189 "Chile",
1190 "China", 1190 "China",
1191 "Colombia", 1191 "Colombia",
1192 "Congo", 1192 "Congo",
1193 "Cook Islands", 1193 "Cook Islands",
1194 "Costa Rica", 1194 "Costa Rica",
1195 "Cote D Ivoire", 1195 "Cote D Ivoire",
1196 "Croatia", 1196 "Croatia",
1197 "Cruise Ship", 1197 "Cruise Ship",
1198 "Cuba", 1198 "Cuba",
1199 "Cyprus", 1199 "Cyprus",
1200 "Czech Republic", 1200 "Czech Republic",
1201 "Denmark", 1201 "Denmark",
1202 "Djibouti", 1202 "Djibouti",
1203 "Dominica", 1203 "Dominica",
1204 "Dominican Republic", 1204 "Dominican Republic",
1205 "Ecuador", 1205 "Ecuador",
1206 "Egypt", 1206 "Egypt",
1207 "El Salvador", 1207 "El Salvador",
1208 "Equatorial Guinea", 1208 "Equatorial Guinea",
1209 "Estonia", 1209 "Estonia",
1210 "Ethiopia", 1210 "Ethiopia",
1211 "Falkland Islands", 1211 "Falkland Islands",
1212 "Faroe Islands", 1212 "Faroe Islands",
1213 "Fiji", 1213 "Fiji",
1214 "Finland", 1214 "Finland",
1215 "France", 1215 "France",
1216 "French Polynesia", 1216 "French Polynesia",
1217 "French West Indies", 1217 "French West Indies",
1218 "Gabon", 1218 "Gabon",
1219 "Gambia", 1219 "Gambia",
1220 "Georgia", 1220 "Georgia",
1221 "Germany", 1221 "Germany",
1222 "Ghana", 1222 "Ghana",
1223 "Gibraltar", 1223 "Gibraltar",
1224 "Greece", 1224 "Greece",
1225 "Greenland", 1225 "Greenland",
1226 "Grenada", 1226 "Grenada",
1227 "Guam", 1227 "Guam",
1228 "Guatemala", 1228 "Guatemala",
1229 "Guernsey", 1229 "Guernsey",
1230 "Guinea", 1230 "Guinea",
1231 "Guinea Bissau", 1231 "Guinea Bissau",
1232 "Guyana", 1232 "Guyana",
1233 "Haiti", 1233 "Haiti",
1234 "Honduras", 1234 "Honduras",
1235 "Hong Kong", 1235 "Hong Kong",
1236 "Hungary", 1236 "Hungary",
1237 "Iceland", 1237 "Iceland",
1238 "India", 1238 "India",
1239 "Indonesia", 1239 "Indonesia",
1240 "Iran", 1240 "Iran",
1241 "Iraq", 1241 "Iraq",
1242 "Ireland", 1242 "Ireland",
1243 "Isle of Man", 1243 "Isle of Man",
1244 "Israel", 1244 "Israel",
1245 "Italy", 1245 "Italy",
1246 "Jamaica", 1246 "Jamaica",
1247 "Japan", 1247 "Japan",
1248 "Jersey", 1248 "Jersey",
1249 "Jordan", 1249 "Jordan",
1250 "Kazakhstan", 1250 "Kazakhstan",
1251 "Kenya", 1251 "Kenya",
1252 "Kuwait", 1252 "Kuwait",
1253 "Kyrgyz Republic", 1253 "Kyrgyz Republic",
1254 "Laos", 1254 "Laos",
1255 "Latvia", 1255 "Latvia",
1256 "Lebanon", 1256 "Lebanon",
1257 "Lesotho", 1257 "Lesotho",
1258 "Liberia", 1258 "Liberia",
1259 "Libya", 1259 "Libya",
1260 "Liechtenstein", 1260 "Liechtenstein",
1261 "Lithuania", 1261 "Lithuania",
1262 "Luxembourg", 1262 "Luxembourg",
1263 "Macau", 1263 "Macau",
1264 "Macedonia", 1264 "Macedonia",
1265 "Madagascar", 1265 "Madagascar",
1266 "Malawi", 1266 "Malawi",
1267 "Malaysia", 1267 "Malaysia",
1268 "Maldives", 1268 "Maldives",
1269 "Mali", 1269 "Mali",
1270 "Malta", 1270 "Malta",
1271 "Mauritania", 1271 "Mauritania",
1272 "Mauritius", 1272 "Mauritius",
1273 "Mexico", 1273 "Mexico",
1274 "Moldova", 1274 "Moldova",
1275 "Monaco", 1275 "Monaco",
1276 "Mongolia", 1276 "Mongolia",
1277 "Montenegro", 1277 "Montenegro",
1278 "Montserrat", 1278 "Montserrat",
1279 "Morocco", 1279 "Morocco",
1280 "Mozambique", 1280 "Mozambique",
1281 "Namibia", 1281 "Namibia",
1282 "Nepal", 1282 "Nepal",
1283 "Netherlands", 1283 "Netherlands",
1284 "Netherlands Antilles", 1284 "Netherlands Antilles",
1285 "New Caledonia", 1285 "New Caledonia",
1286 "New Zealand", 1286 "New Zealand",
1287 "Nicaragua", 1287 "Nicaragua",
1288 "Niger", 1288 "Niger",
1289 "Nigeria", 1289 "Nigeria",
1290 "Norway", 1290 "Norway",
1291 "Oman", 1291 "Oman",
1292 "Pakistan", 1292 "Pakistan",
1293 "Palestine", 1293 "Palestine",
1294 "Panama", 1294 "Panama",
1295 "Papua New Guinea", 1295 "Papua New Guinea",
1296 "Paraguay", 1296 "Paraguay",
1297 "Peru", 1297 "Peru",
1298 "Philippines", 1298 "Philippines",
1299 "Poland", 1299 "Poland",
1300 "Portugal", 1300 "Portugal",
1301 "Puerto Rico", 1301 "Puerto Rico",
1302 "Qatar", 1302 "Qatar",
1303 "Reunion", 1303 "Reunion",
1304 "Romania", 1304 "Romania",
1305 "Russia", 1305 "Russia",
1306 "Rwanda", 1306 "Rwanda",
1307 "Saint Pierre &amp; Miquelon", 1307 "Saint Pierre &amp; Miquelon",
1308 "Samoa", 1308 "Samoa",
1309 "San Marino", 1309 "San Marino",
1310 "Satellite", 1310 "Satellite",
1311 "Saudi Arabia", 1311 "Saudi Arabia",
1312 "Senegal", 1312 "Senegal",
1313 "Serbia", 1313 "Serbia",
1314 "Seychelles", 1314 "Seychelles",
1315 "Sierra Leone", 1315 "Sierra Leone",
1316 "Singapore", 1316 "Singapore",
1317 "Slovakia", 1317 "Slovakia",
1318 "Slovenia", 1318 "Slovenia",
1319 "South Africa", 1319 "South Africa",
1320 "South Korea", 1320 "South Korea",
1321 "Spain", 1321 "Spain",
1322 "Sri Lanka", 1322 "Sri Lanka",
1323 "St Kitts &amp; Nevis", 1323 "St Kitts &amp; Nevis",
1324 "St Lucia", 1324 "St Lucia",
1325 "St Vincent", 1325 "St Vincent",
1326 "St. Lucia", 1326 "St. Lucia",
1327 "Sudan", 1327 "Sudan",
1328 "Suriname", 1328 "Suriname",
1329 "Swaziland", 1329 "Swaziland",
1330 "Sweden", 1330 "Sweden",
1331 "Switzerland", 1331 "Switzerland",
1332 "Syria", 1332 "Syria",
1333 "Taiwan", 1333 "Taiwan",
1334 "Tajikistan", 1334 "Tajikistan",
1335 "Tanzania", 1335 "Tanzania",
1336 "Thailand", 1336 "Thailand",
1337 "Timor L'Este", 1337 "Timor L'Este",
1338 "Togo", 1338 "Togo",
1339 "Tonga", 1339 "Tonga",
1340 "Trinidad &amp; Tobago", 1340 "Trinidad &amp; Tobago",
1341 "Tunisia", 1341 "Tunisia",
1342 "Turkey", 1342 "Turkey",
1343 "Turkmenistan", 1343 "Turkmenistan",
1344 "Turks &amp; Caicos", 1344 "Turks &amp; Caicos",
1345 "Uganda", 1345 "Uganda",
1346 "Ukraine", 1346 "Ukraine",
1347 "United Arab Emirates", 1347 "United Arab Emirates",
1348 "United Kingdom", 1348 "United Kingdom",
1349 "United States", 1349 "United States",
1350 "Uruguay", 1350 "Uruguay",
1351 "Uzbekistan", 1351 "Uzbekistan",
1352 "Venezuela", 1352 "Venezuela",
1353 "Vietnam", 1353 "Vietnam",
1354 "Virgin Islands (US)", 1354 "Virgin Islands (US)",
1355 "Yemen", 1355 "Yemen",
1356 "Zambia", 1356 "Zambia",
1357 "Zimbabwe" 1357 "Zimbabwe"
1358 ], 1358 ],
1359 headers: [ 1359 headers: [
1360 { 1360 {
1361 text: "No", 1361 text: "No",
1362 align: "center", 1362 align: "center",
1363 sortable: false, 1363 sortable: false,
1364 value: "No" 1364 value: "No"
1365 }, 1365 },
1366 { text: "Name", value: "name", sortable: false, align: "center" }, 1366 { text: "Name", value: "name", sortable: false, align: "center" },
1367 { text: "Email", value: "email", sortable: false, align: "center" }, 1367 { text: "Email", value: "email", sortable: false, align: "center" },
1368 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1368 { text: "Dob", value: "dob", sortable: false, align: "center" },
1369 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1369 { text: "Gender", value: "gender", sortable: false, align: "center" },
1370 { text: "Father Name", value: "fatherName", sortable: false, align: "center" }, 1370 { text: "Father Name", value: "fatherName", sortable: false, align: "center" },
1371 { text: "Mother Name", value: "motherName", sortable: false, align: "center" }, 1371 { text: "Mother Name", value: "motherName", sortable: false, align: "center" },
1372 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" }, 1372 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" },
1373 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1373 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1374 { text: "Action", value: "", sortable: false, align: "center" } 1374 { text: "Action", value: "", sortable: false, align: "center" }
1375 ], 1375 ],
1376 desserts: [], 1376 desserts: [],
1377 editedIndex: -1, 1377 editedIndex: -1,
1378 addStudents: { 1378 addStudents: {
1379 role: "STUDENT", 1379 role: "STUDENT",
1380 name: "", 1380 name: "",
1381 email: "", 1381 email: "",
1382 date: "", 1382 date: "",
1383 city: "", 1383 city: "",
1384 pincode: "", 1384 pincode: "",
1385 country: "", 1385 country: "",
1386 permanentAddress: "", 1386 permanentAddress: "",
1387 presentAddress: "", 1387 presentAddress: "",
1388 mobile: "", 1388 mobile: "",
1389 state: "", 1389 state: "",
1390 gender: "", 1390 gender: "",
1391 fatherName: "", 1391 fatherName: "",
1392 fatheCellNo: "", 1392 fatheCellNo: "",
1393 motherName: "", 1393 motherName: "",
1394 motherCellNo: "", 1394 motherCellNo: "",
1395 select: "", 1395 select: "",
1396 selectSection: "", 1396 selectSection: "",
1397 establishmentYear: new Date().getFullYear() 1397 establishmentYear: new Date().getFullYear()
1398 }, 1398 },
1399 editedItem: { 1399 editedItem: {
1400 role: "STUDENT", 1400 role: "STUDENT",
1401 name: "", 1401 name: "",
1402 email: "", 1402 email: "",
1403 date: "", 1403 date: "",
1404 city: "", 1404 city: "",
1405 pincode: "", 1405 pincode: "",
1406 country: "", 1406 country: "",
1407 permanentAddress: "", 1407 permanentAddress: "",
1408 presentAddress: "", 1408 presentAddress: "",
1409 mobile: "", 1409 mobile: "",
1410 state: "", 1410 state: "",
1411 gender: "", 1411 gender: "",
1412 fatherName: "", 1412 fatherName: "",
1413 fatheCellNo: "", 1413 fatheCellNo: "",
1414 motherName: "", 1414 motherName: "",
1415 motherCellNo: "", 1415 motherCellNo: "",
1416 select: "", 1416 select: "",
1417 selectSection: "", 1417 selectSection: "",
1418 establishmentYear: new Date().getFullYear() 1418 establishmentYear: new Date().getFullYear()
1419 }, 1419 },
1420 defaultItem: { 1420 defaultItem: {
1421 role: "STUDENT", 1421 role: "STUDENT",
1422 name: "", 1422 name: "",
1423 email: "" 1423 email: ""
1424 }, 1424 },
1425 userName: "", 1425 userName: "",
1426 items: [ 1426 items: [
1427 { 1427 {
1428 href: "/changepassword", 1428 href: "/changepassword",
1429 title: "Change Password", 1429 title: "Change Password",
1430 click: e => { 1430 click: e => {
1431 console.log(e); 1431 console.log(e);
1432 } 1432 }
1433 }, 1433 },
1434 { 1434 {
1435 href: "#", 1435 href: "#",
1436 title: "Logout", 1436 title: "Logout",
1437 click: e => { 1437 click: e => {
1438 window.getApp.$emit("APP_LOGOUT"); 1438 window.getApp.$emit("APP_LOGOUT");
1439 } 1439 }
1440 } 1440 }
1441 ] 1441 ]
1442 }), 1442 }),
1443 watch: { 1443 watch: {
1444 menu(val) { 1444 menu(val) {
1445 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1445 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1446 }, 1446 },
1447 menu1(val) { 1447 menu1(val) {
1448 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1448 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1449 } 1449 }
1450 }, 1450 },
1451 methods: { 1451 methods: {
1452 getSections(_id) { 1452 getSections(_id) {
1453 var token = this.$store.state.token; 1453 var token = this.$store.state.token;
1454 http() 1454 http()
1455 .get( 1455 .get(
1456 "/getSectionsList", 1456 "/getSectionsList",
1457 { params: { classId: _id } }, 1457 { params: { classId: _id } },
1458 { 1458 {
1459 headers: { Authorization: "Bearer " + token } 1459 headers: { Authorization: "Bearer " + token }
1460 } 1460 }
1461 ) 1461 )
1462 .then(response => { 1462 .then(response => {
1463 this.addSection = response.data.data; 1463 this.addSection = response.data.data;
1464 console.log("getSectionsList=====>", this.addSection); 1464 console.log("getSectionsList=====>", this.addSection);
1465 }) 1465 })
1466 .catch(err => { 1466 .catch(err => {
1467 // console.log("err====>", err); 1467 // console.log("err====>", err);
1468 // this.$router.replace({ path: '/' }); 1468 // this.$router.replace({ path: '/' });
1469 }); 1469 });
1470 }, 1470 },
1471 pickFile() { 1471 pickFile() {
1472 this.$refs.image.click(); 1472 this.$refs.image.click();
1473 }, 1473 },
1474 1474
1475 onFilePicked(e) { 1475 onFilePicked(e) {
1476 // console.log(e) 1476 // console.log(e)
1477 const files = e.target.files; 1477 const files = e.target.files;
1478 this.imageData.upload = e.target.files[0]; 1478 this.imageData.upload = e.target.files[0];
1479 if (files[0] !== undefined) { 1479 if (files[0] !== undefined) {
1480 this.imageName = files[0].name; 1480 this.imageName = files[0].name;
1481 if (this.imageName.lastIndexOf(".") <= 0) { 1481 if (this.imageName.lastIndexOf(".") <= 0) {
1482 return; 1482 return;
1483 } 1483 }
1484 const fr = new FileReader(); 1484 const fr = new FileReader();
1485 fr.readAsDataURL(files[0]); 1485 fr.readAsDataURL(files[0]);
1486 fr.addEventListener("load", () => { 1486 fr.addEventListener("load", () => {
1487 this.imageUrl = fr.result; 1487 this.imageUrl = fr.result;
1488 this.imageFile = files[0]; // this is an image file that can be sent to server... 1488 this.imageFile = files[0]; // this is an image file that can be sent to server...
1489 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1489 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1490 console.log("upload=======>", this.imageData.imageUrl); 1490 console.log("upload=======>", this.imageData.imageUrl);
1491 console.log("imageFile", this.imageFile); 1491 console.log("imageFile", this.imageFile);
1492 }); 1492 });
1493 } else { 1493 } else {
1494 this.imageName = ""; 1494 this.imageName = "";
1495 this.imageFile = ""; 1495 this.imageFile = "";
1496 this.imageUrl = ""; 1496 this.imageUrl = "";
1497 } 1497 }
1498 }, 1498 },
1499 getStudentList() { 1499 getStudentList() {
1500 this.showLoader = true; 1500 this.showLoader = true;
1501 var token = this.$store.state.token; 1501 var token = this.$store.state.token;
1502 http() 1502 http()
1503 .get("/getStudentsList", { 1503 .get("/getStudentsList", {
1504 headers: { Authorization: "Bearer " + token } 1504 headers: { Authorization: "Bearer " + token }
1505 }) 1505 })
1506 .then(response => { 1506 .then(response => {
1507 this.desserts = response.data.data; 1507 this.desserts = response.data.data;
1508 this.showLoader = false; 1508 this.showLoader = false;
1509 // console.log("getStudentList=====>",this.desserts) 1509 // console.log("getStudentList=====>",this.desserts)
1510 }) 1510 })
1511 .catch(err => { 1511 .catch(err => {
1512 // console.log("err====>", err); 1512 // console.log("err====>", err);
1513 this.showLoader = false; 1513 this.showLoader = false;
1514 this.$router.replace({ path: "/" }); 1514 this.$router.replace({ path: "/" });
1515 }); 1515 });
1516 }, 1516 },
1517 editItem(item) { 1517 editItem(item) {
1518 this.editedIndex = this.desserts.indexOf(item); 1518 this.editedIndex = this.desserts.indexOf(item);
1519 this.editedItem = Object.assign({}, item); 1519 this.editedItem = Object.assign({}, item);
1520 this.dialog = true; 1520 this.dialog = true;
1521 }, 1521 },
1522 profile(item) { 1522 profile(item) {
1523 this.editedIndex = this.desserts.indexOf(item); 1523 this.editedIndex = this.desserts.indexOf(item);
1524 this.editedItem = Object.assign({}, item); 1524 this.editedItem = Object.assign({}, item);
1525 this.dialog1 = true; 1525 this.dialog1 = true;
1526 }, 1526 },
1527 // report(item) { 1527 // report(item) {
1528 // this.editedIndex = this.desserts.indexOf(item); 1528 // this.editedIndex = this.desserts.indexOf(item);
1529 // this.editedItem = Object.assign({}, item); 1529 // this.editedItem = Object.assign({}, item);
1530 // this.dialog2 = true; 1530 // this.dialog2 = true;
1531 // }, 1531 // },
1532 1532
1533 deleteItem(item) { 1533 deleteItem(item) {
1534 let deleteStudent = { 1534 let deleteStudent = {
1535 studentId: item._id 1535 studentId: item._id
1536 }; 1536 };
1537 http() 1537 http()
1538 .delete( 1538 .delete(
1539 "/deleteStudent", 1539 "/deleteStudent",
1540 confirm("Are you sure you want to delete this?") && { 1540 confirm("Are you sure you want to delete this?") && {
1541 params: deleteStudent 1541 params: deleteStudent
1542 } 1542 }
1543 ) 1543 )
1544 .then(response => { 1544 .then(response => {
1545 // console.log("deleteUers",deleteStudent) 1545 // console.log("deleteUers",deleteStudent)
1546 if ((this.snackbar = true)) { 1546 if ((this.snackbar = true)) {
1547 this.text = "Successfully delete Existing User"; 1547 this.text = "Successfully delete Existing User";
1548 } 1548 }
1549 this.getStudentList(); 1549 this.getStudentList();
1550 }) 1550 })
1551 .catch(error => { 1551 .catch(error => {
1552 // console.log(error); 1552 // console.log(error);
1553 }); 1553 });
1554 }, 1554 },
1555 activeTab(type) { 1555 activeTab(type) {
1556 switch (type) { 1556 switch (type) {
1557 case "existing": 1557 case "existing":
1558 this.newActive = false; 1558 this.newActive = false;
1559 this.isActive = true; 1559 this.isActive = true;
1560 break; 1560 break;
1561 1561
1562 default: 1562 default:
1563 this.newActive = true; 1563 this.newActive = true;
1564 this.isActive = false; 1564 this.isActive = false;
1565 break; 1565 break;
1566 } 1566 }
1567 }, 1567 },
1568 close() { 1568 close() {
1569 this.dialog = false; 1569 this.dialog = false;
1570 setTimeout(() => { 1570 setTimeout(() => {
1571 this.editedItem = Object.assign({}, this.defaultItem); 1571 this.editedItem = Object.assign({}, this.defaultItem);
1572 this.editedIndex = -1; 1572 this.editedIndex = -1;
1573 }, 300); 1573 }, 300);
1574 }, 1574 },
1575 close1() { 1575 close1() {
1576 this.dialog1 = false; 1576 this.dialog1 = false;
1577 }, 1577 },
1578 // close2() { 1578 // close2() {
1579 // this.dialog2 = false; 1579 // this.dialog2 = false;
1580 // }, 1580 // },
1581 submit() { 1581 submit() {
1582 if (this.$refs.form.validate()) { 1582 if (this.$refs.form.validate()) {
1583 let imageData = new FormData(); 1583 let imageData = new FormData();
1584 imageData.append("upload", this.imageFile); 1584 imageData.append("upload", this.imageFile);
1585 console.log(imageData); 1585 console.log(imageData);
1586 let addStudent = { 1586 let addStudent = {
1587 name: this.addStudents.name, 1587 name: this.addStudents.name,
1588 email: this.addStudents.email, 1588 email: this.addStudents.email,
1589 role: this.addStudents.role, 1589 role: this.addStudents.role,
1590 dob: this.addStudents.date, 1590 dob: this.addStudents.date,
1591 city: this.addStudents.city, 1591 city: this.addStudents.city,
1592 pincode: this.addStudents.pincode, 1592 pincode: this.addStudents.pincode,
1593 country: this.addStudents.country, 1593 country: this.addStudents.country,
1594 permanentAddress: this.addStudents.permanentAddress, 1594 permanentAddress: this.addStudents.permanentAddress,
1595 presentAddress: this.addStudents.presentAddress, 1595 presentAddress: this.addStudents.presentAddress,
1596 mobile: this.addStudents.mobile, 1596 mobile: this.addStudents.mobile,
1597 state: this.addStudents.state, 1597 state: this.addStudents.state,
1598 gender: this.addStudents.gender, 1598 gender: this.addStudents.gender,
1599 fatherName: this.addStudents.fatherName, 1599 fatherName: this.addStudents.fatherName,
1600 fatherCellNo: this.addStudents.fatherCellNo, 1600 fatherCellNo: this.addStudents.fatherCellNo,
1601 motherName: this.addStudents.motherName, 1601 motherName: this.addStudents.motherName,
1602 motherCellNo: this.addStudents.motherCellNo, 1602 motherCellNo: this.addStudents.motherCellNo,
1603 establishmentYear: this.addStudents.establishmentYear, 1603 establishmentYear: this.addStudents.establishmentYear,
1604 classId: this.addStudents.select, 1604 classId: this.addStudents.select,
1605 sectionId: this.addStudents.selectSection, 1605 sectionId: this.addStudents.selectSection,
1606 imageData 1606 imageData
1607 // upload:this.imageFile 1607 // upload:this.imageFile
1608 }; 1608 };
1609 http() 1609 http()
1610 .post("/createStudent", addStudent) 1610 .post("/createStudent", addStudent)
1611 .then(response => { 1611 .then(response => {
1612 // console.log(addStudent) 1612 // console.log(addStudent)
1613 if ((this.snackbar = true)) { 1613 if ((this.snackbar = true)) {
1614 this.text = "New user added successfully"; 1614 this.text = "New user added successfully";
1615 } 1615 }
1616 this.getStudentList(); 1616 this.getStudentList();
1617 this.clear(); 1617 this.clear();
1618 }) 1618 })
1619 .catch(error => { 1619 .catch(error => {
1620 // console.log(error); 1620 // console.log(error);
1621 if ((this.snackbar = true)) { 1621 if ((this.snackbar = true)) {
1622 this.text = error.response.data.message; 1622 this.text = error.response.data.message;
1623 } 1623 }
1624 }); 1624 });
1625 } 1625 }
1626 }, 1626 },
1627 mail() {}, 1627 mail() {},
1628 download() {}, 1628 download() {},
1629 clear() { 1629 clear() {
1630 this.$refs.form.reset(); 1630 this.$refs.form.reset();
1631 }, 1631 },
1632 save() { 1632 save() {
1633 let imageData = new FormData(); 1633 let imageData = new FormData();
1634 imageData.append("upload", this.imageFile); 1634 imageData.append("upload", this.imageFile);
1635 console.log(imageData); 1635 console.log(imageData);
1636 let editStudent = { 1636 let editStudent = {
1637 studentId:this.editedItem._id, 1637 studentId:this.editedItem._id,
1638 name: this.editedItem.name, 1638 name: this.editedItem.name,
1639 email: this.editedItem.email, 1639 email: this.editedItem.email,
1640 role: this.editedItem.role, 1640 role: this.editedItem.role,
1641 dob: this.editedItem.date, 1641 dob: this.editedItem.date,
1642 city: this.editedItem.city, 1642 city: this.editedItem.city,
1643 pincode: this.editedItem.pincode, 1643 pincode: this.editedItem.pincode,
1644 country: this.editedItem.country, 1644 country: this.editedItem.country,
1645 permanentAddress: this.editedItem.permanentAddress, 1645 permanentAddress: this.editedItem.permanentAddress,
1646 presentAddress: this.editedItem.presentAddress, 1646 presentAddress: this.editedItem.presentAddress,
1647 mobile: this.editedItem.mobile, 1647 mobile: this.editedItem.mobile,
1648 state: this.editedItem.state, 1648 state: this.editedItem.state,
1649 gender: this.editedItem.gender, 1649 gender: this.editedItem.gender,
1650 fatherName: this.editedItem.fatherName, 1650 fatherName: this.editedItem.fatherName,
1651 fatherCellNo: this.editedItem.fatherCellNo, 1651 fatherCellNo: this.editedItem.fatherCellNo,
1652 motherName: this.editedItem.motherName, 1652 motherName: this.editedItem.motherName,
1653 motherCellNo: this.editedItem.motherCellNo, 1653 motherCellNo: this.editedItem.motherCellNo,
1654 establishmentYear: this.editedItem.establishmentYear, 1654 establishmentYear: this.editedItem.establishmentYear,
1655 classId: this.editedItem.select, 1655 classId: this.editedItem.select,
1656 sectionId: this.editedItem.selectSection, 1656 sectionId: this.editedItem.selectSection,
1657 imageData 1657 imageData
1658 }; 1658 };
1659 http() 1659 http()
1660 .put("/updateStudent", editStudent) 1660 .put("/updateStudent", editStudent)
1661 .then(response => { 1661 .then(response => {
1662 // console.log("editStudent",editStudent); 1662 // console.log("editStudent",editStudent);
1663 if ((this.snackbar = true)) { 1663 if ((this.snackbar = true)) {
1664 this.text = "Successfully Edit Existing User"; 1664 this.text = "Successfully Edit Existing User";
1665 } 1665 }
1666 this.getStudentList(); 1666 this.getStudentList();
1667 }) 1667 })
1668 .catch(error => { 1668 .catch(error => {
1669 // console.log(error); 1669 // console.log(error);
1670 }); 1670 });
1671 this.close(); 1671 this.close();
1672 }, 1672 },
1673 handleDrawerToggle() { 1673 handleDrawerToggle() {
1674 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1674 window.getApp.$emit("APP_DRAWER_TOGGLED");
1675 }, 1675 },
1676 handleFullScreen() { 1676 handleFullScreen() {
1677 Util.toggleFullScreen(); 1677 Util.toggleFullScreen();
1678 } 1678 }
1679 }, 1679 },
1680 mounted() { 1680 mounted() {
1681 this.getStudentList(); 1681 this.getStudentList();
1682 var token = this.$store.state.token; 1682 var token = this.$store.state.token;
1683 http() 1683 http()
1684 .get("/getClassesList", { 1684 .get("/getClassesList", {
1685 headers: { Authorization: "Bearer " + token } 1685 headers: { Authorization: "Bearer " + token }
1686 }) 1686 })
1687 .then(response => { 1687 .then(response => {
1688 this.addclass = response.data.data; 1688 this.addclass = response.data.data;
1689 // console.log("getClassesList=====>",this.addclass) 1689 // console.log("getClassesList=====>",this.addclass)
1690 }) 1690 })
1691 .catch(err => { 1691 .catch(err => {
1692 // console.log("err====>", err); 1692 // console.log("err====>", err);
1693 this.$router.replace({ path: "/" }); 1693 this.$router.replace({ path: "/" });
1694 }); 1694 });
1695 }, 1695 },
1696 1696
1697 // console.log("Id",this.$store.state.id) 1697 // console.log("Id",this.$store.state.id)
1698 // console.log("token",this.$store.state.token) 1698 // console.log("token",this.$store.state.token)
1699 computed: { 1699 computed: {
1700 toolbarColor() { 1700 toolbarColor() {
1701 return this.$vuetify.options.extra.mainNav; 1701 return this.$vuetify.options.extra.mainNav;
1702 } 1702 }
1703 } 1703 }
1704 }; 1704 };
1705 </script> 1705 </script>
1706 <style scoped> 1706 <style scoped>
1707 .v-tabs__div { 1707 .v-tabs__div {
1708 text-transform: none; 1708 text-transform: none;
1709 } 1709 }
1710 .v-input__prepend-outer { 1710 .v-input__prepend-outer {
1711 margin-right: 0px !important; 1711 margin-right: 0px !important;
1712 } 1712 }
1713 .v-card__actions .v-btn { 1713 .v-card__actions .v-btn {
1714 margin: 0 15px; 1714 margin: 0 15px;
1715 min-width: 120px; 1715 min-width: 120px;
1716 } 1716 }
1717 .primary { 1717 .primary {
1718 background-color: #aaa !important; 1718 background-color: #aaa !important;
1719 border-color: #aaa !important; 1719 border-color: #aaa !important;
1720 } 1720 }
1721 h4 { 1721 h4 {
1722 background-repeat: no-repeat; 1722 background-repeat: no-repeat;
1723 padding: 8px; 1723 padding: 8px;
1724 margin: auto; 1724 margin: auto;
1725 font-size: 25px; 1725 font-size: 25px;
1726 } 1726 }
1727 #name { 1727 #name {
1728 position: absolute; 1728 position: absolute;
1729 left: 100px; 1729 left: 100px;
1730 top: 17px; 1730 top: 17px;
1731 } 1731 }
1732 #icon { 1732 #icon {
1733 position: absolute; 1733 position: absolute;
1734 right: 8px; 1734 right: 8px;
1735 top: 8px; 1735 top: 8px;
1736 } 1736 }
1737 #m { 1737 #m {
1738 position: relative; 1738 position: relative;
1739 left: 135px; 1739 left: 135px;
1740 top: -15px; 1740 top: -15px;
1741 } 1741 }
1742 #G { 1742 #G {
1743 position: absolute; 1743 position: absolute;
1744 top: 38px; 1744 top: 38px;
1745 color: white; 1745 color: white;
1746 } 1746 }
1747 #bt { 1747 #bt {
1748 position: relative; 1748 position: relative;
1749 top: -20px; 1749 top: -20px;
1750 left: 115px; 1750 left: 115px;
1751 } 1751 }
1752 #e { 1752 #e {
1753 position: relative; 1753 position: relative;
1754 top: 5px; 1754 top: 5px;
1755 right: -30px; 1755 right: -30px;
1756 height: 17px; 1756 height: 17px;
1757 cursor: pointer; 1757 cursor: pointer;
1758 } 1758 }
1759 #d { 1759 #d {
1760 position: relative; 1760 position: relative;
1761 top: 5px; 1761 top: 5px;
1762 right: -70px; 1762 right: -70px;
1763 height: 17px; 1763 height: 17px;
1764 cursor: pointer; 1764 cursor: pointer;
1765 } 1765 }
1766 #td { 1766 #td {
1767 border: 1px solid #dddddd; 1767 border: 1px solid #dddddd;
1768 text-align: left; 1768 text-align: left;
1769 padding: 8px; 1769 padding: 8px;
1770 } 1770 }
1771 #dialog { 1771 #dialog {
1772 height: 550px; 1772 height: 550px;
1773 } 1773 }
1774 .active { 1774 .active {
1775 background-color: black; 1775 background-color: black;
1776 color: white !important; 1776 color: white !important;
1777 } 1777 }
1778 .activebtn { 1778 .activebtn {
1779 color: black !important; 1779 color: black !important;
1780 } 1780 }
1781 #flex { 1781 #flex {
1782 height: 300px; 1782 height: 300px;
1783 } 1783 }
1784 .top { 1784 .top {
1785 margin-top: 100px; 1785 margin-top: 100px;
1786 } 1786 }
1787 .v-tabs__item a { 1787 .v-tabs__item a {
1788 font-size: 16px !important; 1788 font-size: 16px !important;
1789 } 1789 }
1790 @media screen and (max-width: 769px) { 1790 @media screen and (max-width: 769px) {
1791 .top { 1791 .top {
1792 margin-top: 0 !important; 1792 margin-top: 0 !important;
1793 } 1793 }
1794 .userSearch .v-icon { 1794 .userSearch .v-icon {
1795 font-size: 20px !important; 1795 font-size: 20px !important;
1796 margin-left: 20px; 1796 margin-left: 20px;
1797 } 1797 }
1798 } 1798 }
1799 @media screen and (max-width: 380px) { 1799 @media screen and (max-width: 380px) {
1800 .pl-3 {
1801 padding-left: 0px !important;
1802 }
1800 .right { 1803 .right {
1801 float: none !important; 1804 float: none !important;
1802 } 1805 }
1803 .subheading { 1806 .subheading {
1804 font-size: 14px !important; 1807 font-size: 14px !important;
1805 } 1808 }
1806 .v-card__actions .v-btn { 1809 .v-card__actions .v-btn {
1807 margin: 0 0px; 1810 margin: 0 0px;
1808 min-width: 100px; 1811 min-width: 100px;
1809 } 1812 }
1810 /* .searchIcon .v-icon { 1813 /* .searchIcon .v-icon {
1811 font-size: 20px; 1814 font-size: 20px;
1812 margin-left: 20px; 1815 margin-left: 20px;
1813 } */ 1816 } */
1814 .subheading { 1817 .subheading {
1815 font-size: 12px !important; 1818 font-size: 12px !important;
1816 } 1819 }
1817 h5 { 1820 h5 {
1818 font-size: 13px; 1821 font-size: 13px;
1819 } 1822 }
1820 } 1823 }
1821 .v-icon { 1824 .v-icon {
1822 font-size: 30px; 1825 font-size: 30px;
1823 } 1826 }
1824 @media screen and (min-width: 1270px) { 1827 @media screen and (min-width: 1270px) {
1825 .hide { 1828 .hide {
1826 display: none; 1829 display: none;
1827 } 1830 }
1828 /* } 1831 /* }
1829 @media screen and (max-width: 962px) { 1832 @media screen and (max-width: 962px) {
1830 .imglogo{ 1833 .imglogo{
1831 position: absolute; 1834 position: absolute;
1832 top: 13px; 1835 top: 13px;
1833 left: 13px !important; 1836 left: 13px !important;
1834 width: 70px; 1837 width: 70px;
1835 height: 24px; 1838 height: 24px;
1836 } */ 1839 } */
1837 } 1840 }
1838 @media screen and (max-width: 420px) { 1841 @media screen and (max-width: 420px) {
1839 .userSearch .v-text-field .v-label { 1842 .userSearch .v-text-field .v-label {
1840 line-height: 24px !important; 1843 line-height: 24px !important;
1841 } 1844 }
1842 .userSearch .v-label { 1845 .userSearch .v-label {
1843 font-size: 13px !important; 1846 font-size: 13px !important;
1844 } 1847 }
1845 .v-list__tile { 1848 .v-list__tile {
1846 font-size: 14px; 1849 font-size: 14px;
1847 padding: 0 10px; 1850 padding: 0 10px;
1848 } 1851 }
1849 .name { 1852 .name {
1850 font-size: 15px; 1853 font-size: 15px;
1851 } 1854 }
1852 } 1855 }
1853 </style> 1856 </style>
src/pages/Teachers/teachers.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL Teachers ****** --> 7 <!-- ****** SEARCH ALL Teachers ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Teachers"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Teachers</v-tab> 54 >Existing Teachers</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Teachers</v-tab> 62 >Add New Teachers</v-tab>
63 <!-- ****** EDIT TEACHERS DETAILS ****** --> 63 <!-- ****** EDIT TEACHERS DETAILS ****** -->
64 <v-tab-item> 64 <v-tab-item>
65 <v-snackbar 65 <v-snackbar
66 :timeout="timeout" 66 :timeout="timeout"
67 :top="y === 'top'" 67 :top="y === 'top'"
68 :right="x === 'right'" 68 :right="x === 'right'"
69 :vertical="mode === 'vertical'" 69 :vertical="mode === 'vertical'"
70 v-model="snackbar" 70 v-model="snackbar"
71 color="success" 71 color="success"
72 >{{ text }}</v-snackbar> 72 >{{ text }}</v-snackbar>
73 <v-dialog v-model="dialog" max-width="1000px"> 73 <v-dialog v-model="dialog" max-width="1100px">
74 <v-flex xs12 sm12 class="my-4"> 74 <v-flex xs12 sm12 class="my-4">
75 <v-toolbar color="white"> 75 <v-toolbar color="white">
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-toolbar-title>Edit Profile</v-toolbar-title> 77 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-toolbar> 79 </v-toolbar>
80 <v-card flat> 80 <v-card flat>
81 <v-form ref="form"> 81 <v-form ref="form">
82 <v-container fluid> 82 <v-container fluid>
83 <v-layout> 83 <v-layout>
84 <v-flex 84 <v-flex
85 xs12 85 xs12
86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
87 > 87 >
88 <v-avatar size="100px"> 88 <v-avatar size="100px">
89 <img src="/static/icon/user.png" v-if="!imageUrl"> 89 <img src="/static/icon/user.png" v-if="!imageUrl">
90 </v-avatar> 90 </v-avatar>
91 <input 91 <input
92 type="file" 92 type="file"
93 style="display: none" 93 style="display: none"
94 ref="image" 94 ref="image"
95 accept="image/*" 95 accept="image/*"
96 @change="onFilePicked" 96 @change="onFilePicked"
97 > 97 >
98 <img 98 <img
99 :src="imageData.imageUrl" 99 :src="imageData.imageUrl"
100 height="150" 100 height="150"
101 v-if="imageUrl" 101 v-if="imageUrl"
102 style="border-radius:50%; width:200px" 102 style="border-radius:50%; width:200px"
103 > 103 >
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 <v-layout> 106 <v-layout>
107 <v-flex xs12 sm6> 107 <v-flex xs12 sm6>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Full Name:</label> 110 <label class="right">Full Name:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 class="ml-3"> 112 <v-flex xs8 class="ml-3">
113 <v-text-field 113 <v-text-field
114 v-model="editedItem.name" 114 v-model="editedItem.name"
115 placeholder="fill your full Name" 115 placeholder="fill your full Name"
116 name="name" 116 name="name"
117 type="text" 117 type="text"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm6> 123 <v-flex xs12 sm6>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Email ID:</label> 126 <label class="right">Email ID:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs8 class="ml-3"> 128 <v-flex xs8 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your email" 130 placeholder="fill your email"
131 v-model="editedItem.email" 131 v-model="editedItem.email"
132 type="text" 132 type="text"
133 name="email" 133 name="email"
134 required 134 required
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm6> 141 <v-flex xs12 sm6>
142 <v-layout> 142 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 143 <v-flex xs4 class="pt-4 subheading">
144 <label class="right">Date of Birth:</label> 144 <label class="right">Date of Birth:</label>
145 </v-flex> 145 </v-flex>
146 <v-flex xs8 class="ml-3"> 146 <v-flex xs8 class="ml-3">
147 <v-menu 147 <v-menu
148 ref="menu" 148 ref="menu"
149 :close-on-content-click="false" 149 :close-on-content-click="false"
150 v-model="menu2" 150 v-model="menu2"
151 :nudge-right="40" 151 :nudge-right="40"
152 lazy 152 lazy
153 transition="scale-transition" 153 transition="scale-transition"
154 offset-y 154 offset-y
155 full-width 155 full-width
156 min-width="290px" 156 min-width="290px"
157 > 157 >
158 <v-text-field 158 <v-text-field
159 slot="activator" 159 slot="activator"
160 v-model="editedItem.dob" 160 v-model="editedItem.dob"
161 placeholder="Select date" 161 placeholder="Select date"
162 ></v-text-field> 162 ></v-text-field>
163 <v-date-picker 163 <v-date-picker
164 ref="picker" 164 ref="picker"
165 v-model="editedItem.dob" 165 v-model="editedItem.dob"
166 :max="new Date().toISOString().substr(0, 10)" 166 :max="new Date().toISOString().substr(0, 10)"
167 min="1950-01-01" 167 min="1950-01-01"
168 @input="menu2 = false" 168 @input="menu2 = false"
169 ></v-date-picker> 169 ></v-date-picker>
170 </v-menu> 170 </v-menu>
171 </v-flex> 171 </v-flex>
172 </v-layout> 172 </v-layout>
173 </v-flex> 173 </v-flex>
174 <v-flex xs12 sm6> 174 <v-flex xs12 sm6>
175 <v-layout> 175 <v-layout>
176 <v-flex xs4 class="pt-4 subheading"> 176 <v-flex xs4 class="pt-4 subheading">
177 <label class="right">City:</label> 177 <label class="right">City:</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.city" 181 v-model="editedItem.city"
182 placeholder="fill your City Name" 182 placeholder="fill your City Name"
183 name="City" 183 name="City"
184 type="text" 184 type="text"
185 required 185 required
186 ></v-text-field> 186 ></v-text-field>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 <v-layout> 191 <v-layout>
192 <v-flex xs12 sm6> 192 <v-flex xs12 sm6>
193 <v-layout> 193 <v-layout>
194 <v-flex xs4 class="pt-4 subheading"> 194 <v-flex xs4 class="pt-4 subheading">
195 <label class="right">State:</label> 195 <label class="right">State:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs8 class="ml-3"> 197 <v-flex xs8 class="ml-3">
198 <v-text-field 198 <v-text-field
199 v-model="editedItem.state" 199 v-model="editedItem.state"
200 placeholder="fill your State Name" 200 placeholder="fill your State Name"
201 name="state" 201 name="state"
202 type="text" 202 type="text"
203 required 203 required
204 ></v-text-field> 204 ></v-text-field>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm6> 208 <v-flex xs12 sm6>
209 <v-layout> 209 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 210 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">PinCode:</label> 211 <label class="right">PinCode:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs8 class="ml-3"> 213 <v-flex xs8 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="editedItem.pincode" 215 v-model="editedItem.pincode"
216 placeholder="fill your pincode" 216 placeholder="fill your pincode"
217 name="pincode" 217 name="pincode"
218 type="number" 218 type="number"
219 required 219 required
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 <v-layout> 225 <v-layout>
226 <v-flex xs12 sm6> 226 <v-flex xs12 sm6>
227 <v-layout> 227 <v-layout>
228 <v-flex xs4 class="pt-4 subheading"> 228 <v-flex xs4 class="pt-4 subheading">
229 <label class="right">Mobile NO:</label> 229 <label class="right">Mobile NO:</label>
230 </v-flex> 230 </v-flex>
231 <v-flex xs8 class="ml-3"> 231 <v-flex xs8 class="ml-3">
232 <v-text-field 232 <v-text-field
233 v-model="editedItem.mobileNo" 233 v-model="editedItem.mobileNo"
234 placeholder="fill your MobileNo" 234 placeholder="fill your MobileNo"
235 name="mobileNo" 235 name="mobileNo"
236 type="number" 236 type="number"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 <v-flex xs12 sm6> 242 <v-flex xs12 sm6>
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">Select Country:</label> 245 <label class="right">Select Country:</label>
246 </v-flex> 246 </v-flex>
247 <v-flex xs8 class="ml-3"> 247 <v-flex xs8 class="ml-3">
248 <v-autocomplete 248 <v-autocomplete
249 v-model="editedItem.country" 249 v-model="editedItem.country"
250 :items="countries" 250 :items="countries"
251 placeholder="Select Country Name" 251 placeholder="Select Country Name"
252 required 252 required
253 ></v-autocomplete> 253 ></v-autocomplete>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-flex> 256 </v-flex>
257 </v-layout> 257 </v-layout>
258 <v-layout> 258 <v-layout>
259 <v-flex xs12 sm6> 259 <v-flex xs12 sm6>
260 <v-layout> 260 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Join Date</label> 262 <label class="right">Join Date:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 class="ml-3"> 264 <v-flex xs8 class="ml-3">
265 <v-menu 265 <v-menu
266 ref="menu" 266 ref="menu"
267 :close-on-content-click="false" 267 :close-on-content-click="false"
268 v-model="menu3" 268 v-model="menu3"
269 :nudge-right="40" 269 :nudge-right="40"
270 lazy 270 lazy
271 transition="scale-transition" 271 transition="scale-transition"
272 offset-y 272 offset-y
273 full-width 273 full-width
274 min-width="290px" 274 min-width="290px"
275 > 275 >
276 <v-text-field 276 <v-text-field
277 slot="activator" 277 slot="activator"
278 v-model="editedItem.joinDate" 278 v-model="editedItem.joinDate"
279 placeholder="Select date" 279 placeholder="Select date"
280 ></v-text-field> 280 ></v-text-field>
281 <v-date-picker 281 <v-date-picker
282 ref="picker" 282 ref="picker"
283 v-model="editedItem.joinDate" 283 v-model="editedItem.joinDate"
284 :max="new Date().toISOString().substr(0, 10)" 284 :max="new Date().toISOString().substr(0, 10)"
285 min="1950-01-01" 285 min="1950-01-01"
286 @input="menu3 = false" 286 @input="menu3 = false"
287 ></v-date-picker> 287 ></v-date-picker>
288 </v-menu> 288 </v-menu>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-flex> 291 </v-flex>
292 <v-flex xs12 sm6> 292 <v-flex xs12 sm6>
293 <v-layout> 293 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Uplaod Image:</label> 295 <label class="right">Uplaod Image:</label>
296 </v-flex> 296 </v-flex>
297 <v-flex xs8 class="ml-3"> 297 <v-flex xs8 class="ml-3">
298 <v-text-field 298 <v-text-field
299 label="Select Image" 299 label="Select Image"
300 @click="pickFile" 300 @click="pickFile"
301 v-model="imageName" 301 v-model="imageName"
302 prepend-icon="attach_file" 302 prepend-icon="attach_file"
303 ></v-text-field> 303 ></v-text-field>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs12 sm12> 309 <v-flex xs12 sm12>
310 <v-layout> 310 <v-layout>
311 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
312 <label class>Present Address:</label> 312 <label class>Present Address:</label>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-text-field 315 <v-text-field
316 name="input-4-3" 316 name="input-4-3"
317 v-model="editedItem.presentAddress" 317 v-model="editedItem.presentAddress"
318 placeholder="fill Your present Address" 318 placeholder="fill Your present Address"
319 required 319 required
320 ></v-text-field> 320 ></v-text-field>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 </v-flex> 323 </v-flex>
324 <v-flex xs12 sm12> 324 <v-flex xs12 sm12>
325 <v-layout> 325 <v-layout>
326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
327 <label>Permanent Address:</label> 327 <label>Permanent Address:</label>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12> 329 <v-flex xs12>
330 <v-text-field 330 <v-text-field
331 name="input-4-3" 331 name="input-4-3"
332 v-model="editedItem.permanentAddress" 332 v-model="editedItem.permanentAddress"
333 placeholder="fill Your Permanent Address" 333 placeholder="fill Your Permanent Address"
334 required 334 required
335 ></v-text-field> 335 ></v-text-field>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 </v-flex> 338 </v-flex>
339 </v-layout> 339 </v-layout>
340 <v-layout> 340 <v-layout>
341 <v-flex xs12 sm12> 341 <v-flex xs12 sm12>
342 <v-card-actions> 342 <v-card-actions>
343 <v-btn round dark @click.native="close">Cancel</v-btn> 343 <v-btn round dark @click.native="close">Cancel</v-btn>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 <v-btn round dark @click="save">Save</v-btn> 345 <v-btn round dark @click="save">Save</v-btn>
346 </v-card-actions> 346 </v-card-actions>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-container> 349 </v-container>
350 </v-form> 350 </v-form>
351 </v-card> 351 </v-card>
352 </v-flex> 352 </v-flex>
353 </v-dialog> 353 </v-dialog>
354 354
355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
356 356
357 <v-dialog v-model="dialog1" max-width="600px"> 357 <v-dialog v-model="dialog1" max-width="600px">
358 <v-toolbar color="white"> 358 <v-toolbar color="white">
359 <v-spacer></v-spacer> 359 <v-spacer></v-spacer>
360 <v-toolbar-title>Profile</v-toolbar-title> 360 <v-toolbar-title>Profile</v-toolbar-title>
361 <v-spacer></v-spacer> 361 <v-spacer></v-spacer>
362 <v-icon @click="close1">close</v-icon> 362 <v-icon @click="close1">close</v-icon>
363 </v-toolbar> 363 </v-toolbar>
364 <v-card> 364 <v-card>
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="50px" style="position:absolute; top:20px;"> 366 <v-avatar size="50px" style="position:absolute; top:20px;">
367 <img src="/static/icon/user.png"> 367 <img src="/static/icon/user.png">
368 </v-avatar> 368 </v-avatar>
369 </v-flex> 369 </v-flex>
370 <v-card-text> 370 <v-card-text>
371 <v-container grid-list-md> 371 <v-container grid-list-md>
372 <v-layout wrap> 372 <v-layout wrap>
373 <v-flex> 373 <v-flex>
374 <br> 374 <br>
375 <br> 375 <br>
376 <v-layout> 376 <v-layout>
377 <v-flex xs5 sm6> 377 <v-flex xs5 sm6>
378 <h5 class="right my-1">Full Name:</h5> 378 <h5 class="right my-1">Full Name:</h5>
379 </v-flex> 379 </v-flex>
380 <v-flex sm6 xs8> 380 <v-flex sm6 xs8>
381 <h5 class="my-1">{{ editedItem.name }}</h5> 381 <h5 class="my-1">{{ editedItem.name }}</h5>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout> 384 <v-layout>
385 <v-flex xs5 sm6> 385 <v-flex xs5 sm6>
386 <h5 class="right my-1">Email:</h5> 386 <h5 class="right my-1">Email:</h5>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs8> 388 <v-flex sm6 xs8>
389 <h5 class="my-1">{{ editedItem.email }}</h5> 389 <h5 class="my-1">{{ editedItem.email }}</h5>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 <v-layout> 392 <v-layout>
393 <v-flex xs5 sm6> 393 <v-flex xs5 sm6>
394 <h5 class="right my-1">City:</h5> 394 <h5 class="right my-1">City:</h5>
395 </v-flex> 395 </v-flex>
396 <v-flex sm6 xs8> 396 <v-flex sm6 xs8>
397 <h5 class="my-1">{{ editedItem.city }}</h5> 397 <h5 class="my-1">{{ editedItem.city }}</h5>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <v-layout> 400 <v-layout>
401 <v-flex xs5 sm6> 401 <v-flex xs5 sm6>
402 <h5 class="right my-1">State:</h5> 402 <h5 class="right my-1">State:</h5>
403 </v-flex> 403 </v-flex>
404 <v-flex sm6 xs8> 404 <v-flex sm6 xs8>
405 <h5 class="my-1">{{ editedItem.state }}</h5> 405 <h5 class="my-1">{{ editedItem.state }}</h5>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 <v-layout> 408 <v-layout>
409 <v-flex xs5 sm6> 409 <v-flex xs5 sm6>
410 <h5 class="right my-1">Country:</h5> 410 <h5 class="right my-1">Country:</h5>
411 </v-flex> 411 </v-flex>
412 <v-flex sm6 xs8> 412 <v-flex sm6 xs8>
413 <h5 class="my-1">{{ editedItem.country }}</h5> 413 <h5 class="my-1">{{ editedItem.country }}</h5>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs5 sm6> 417 <v-flex xs5 sm6>
418 <h5 class="right my-1">Pincode:</h5> 418 <h5 class="right my-1">Pincode:</h5>
419 </v-flex> 419 </v-flex>
420 <v-flex sm6 xs8> 420 <v-flex sm6 xs8>
421 <h5 class="my-1">{{ editedItem.pincode }}</h5> 421 <h5 class="my-1">{{ editedItem.pincode }}</h5>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout> 424 <v-layout>
425 <v-flex xs5 sm6> 425 <v-flex xs5 sm6>
426 <h5 class="right my-1">Mobile No:</h5> 426 <h5 class="right my-1">Mobile No:</h5>
427 </v-flex> 427 </v-flex>
428 <v-flex sm6 xs8> 428 <v-flex sm6 xs8>
429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs5 sm6> 433 <v-flex xs5 sm6>
434 <h5 class="right my-1">Join Date:</h5> 434 <h5 class="right my-1">Join Date:</h5>
435 </v-flex> 435 </v-flex>
436 <v-flex sm6 xs8> 436 <v-flex sm6 xs8>
437 <h5 class="my-1">{{ editedItem.joinDate }}</h5> 437 <h5 class="my-1">{{ editedItem.joinDate }}</h5>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 <v-layout> 440 <v-layout>
441 <v-flex xs5 sm6> 441 <v-flex xs5 sm6>
442 <h5 class="right my-1">Date Of Birth:</h5> 442 <h5 class="right my-1">Date Of Birth:</h5>
443 </v-flex> 443 </v-flex>
444 <v-flex sm6 xs8> 444 <v-flex sm6 xs8>
445 <h5 class="my-1">{{ editedItem.dob }}</h5> 445 <h5 class="my-1">{{ editedItem.dob }}</h5>
446 </v-flex> 446 </v-flex>
447 </v-layout> 447 </v-layout>
448 <v-layout> 448 <v-layout>
449 <v-flex xs6 sm6 > 449 <v-flex xs6 sm6 >
450 <h5 class="right my-1">Permanent Address:</h5> 450 <h5 class="right my-1">Permanent Address:</h5>
451 </v-flex> 451 </v-flex>
452 <v-flex sm6 xs8> 452 <v-flex sm6 xs8>
453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
454 </v-flex> 454 </v-flex>
455 </v-layout> 455 </v-layout>
456 <v-layout> 456 <v-layout>
457 <v-flex xs6 sm6 > 457 <v-flex xs6 sm6 >
458 <h5 class="right my-1">present Address:</h5> 458 <h5 class="right my-1">present Address:</h5>
459 </v-flex> 459 </v-flex>
460 <v-flex sm6 xs8> 460 <v-flex sm6 xs8>
461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
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-card-text> 467 </v-card-text>
468 </v-card> 468 </v-card>
469 </v-dialog> 469 </v-dialog>
470 <v-snackbar 470 <v-snackbar
471 :timeout="timeout" 471 :timeout="timeout"
472 :top="y === 'top'" 472 :top="y === 'top'"
473 :right="x === 'right'" 473 :right="x === 'right'"
474 :vertical="mode === 'vertical'" 474 :vertical="mode === 'vertical'"
475 v-model="snackbar" 475 v-model="snackbar"
476 color="success" 476 color="success"
477 >{{ text }}</v-snackbar> 477 >{{ text }}</v-snackbar>
478 478
479 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 479 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
480 <v-data-table 480 <v-data-table
481 :headers="headers" 481 :headers="headers"
482 :items="desserts" 482 :items="desserts"
483 :pagination.sync="pagination" 483 :pagination.sync="pagination"
484 :search="search" 484 :search="search"
485 > 485 >
486 <template slot="items" slot-scope="props"> 486 <template slot="items" slot-scope="props">
487 <td id="td" class="text-xs-center">{{ props.index}}</td> 487 <td id="td" class="text-xs-center">{{ props.index}}</td>
488 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 488 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
489 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 489 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
490 <td id="td" class="text-xs-center">{{ props.item.dob }}</td> 490 <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
491 <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td> 491 <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td>
492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
493 <td class="text-xs-center"> 493 <td class="text-xs-center">
494 <span> 494 <span>
495 <img 495 <img
496 style="cursor:pointer; width:25px; height:18px; " 496 style="cursor:pointer; width:25px; height:18px; "
497 class="mr-5" 497 class="mr-5"
498 @click="profile(props.item)" 498 @click="profile(props.item)"
499 src="/static/icon/eye1.png" 499 src="/static/icon/eye1.png"
500 > 500 >
501 <img 501 <img
502 style="cursor:pointer; width:20px; height:18px; " 502 style="cursor:pointer; width:20px; height:18px; "
503 class="mr-5" 503 class="mr-5"
504 @click="editItem(props.item)" 504 @click="editItem(props.item)"
505 src="/static/icon/edit1.png" 505 src="/static/icon/edit1.png"
506 > 506 >
507 <img 507 <img
508 style="cursor:pointer; height:20px; " 508 style="cursor:pointer; height:20px; "
509 class="mr-5" 509 class="mr-5"
510 @click="deleteItem(props.item)" 510 @click="deleteItem(props.item)"
511 src="/static/icon/delete1.png" 511 src="/static/icon/delete1.png"
512 > 512 >
513 </span> 513 </span>
514 </td> 514 </td>
515 </template> 515 </template>
516 <v-alert 516 <v-alert
517 slot="no-results" 517 slot="no-results"
518 :value="true" 518 :value="true"
519 color="error" 519 color="error"
520 icon="warning" 520 icon="warning"
521 >Your search for "{{ search }}" found no results.</v-alert> 521 >Your search for "{{ search }}" found no results.</v-alert>
522 </v-data-table> 522 </v-data-table>
523 </v-tab-item> 523 </v-tab-item>
524 524
525 <!-- ****** Add Teachers Data****** --> 525 <!-- ****** Add Teachers Data****** -->
526 <v-tab-item> 526 <v-tab-item>
527 <v-container> 527 <v-container>
528 <v-snackbar 528 <v-snackbar
529 :timeout="timeout" 529 :timeout="timeout"
530 :top="y === 'top'" 530 :top="y === 'top'"
531 :right="x === 'right'" 531 :right="x === 'right'"
532 :vertical="mode === 'vertical'" 532 :vertical="mode === 'vertical'"
533 v-model="snackbar" 533 v-model="snackbar"
534 color="success" 534 color="success"
535 >{{ text }}</v-snackbar> 535 >{{ text }}</v-snackbar>
536 <v-flex xs12 sm12 class="my-4"> 536 <v-flex xs12 sm12 class="my-4">
537 <v-card flat> 537 <v-card flat>
538 <v-form ref="form" v-model="valid" lazy-validation> 538 <v-form ref="form" v-model="valid" lazy-validation>
539 <v-container fluid> 539 <v-container fluid>
540 <v-layout> 540 <v-layout>
541 <v-flex 541 <v-flex
542 xs12 542 xs12
543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
544 > 544 >
545 <v-avatar size="100px"> 545 <v-avatar size="100px">
546 <img src="/static/icon/user.png" v-if="!imageUrl"> 546 <img src="/static/icon/user.png" v-if="!imageUrl">
547 </v-avatar> 547 </v-avatar>
548 <!-- <input 548 <!-- <input
549 type="file" 549 type="file"
550 style="display: none" 550 style="display: none"
551 ref="image" 551 ref="image"
552 accept="image/*" 552 accept="image/*"
553 @change="onFilePicked" 553 @change="onFilePicked"
554 > --> 554 > -->
555 <img 555 <img
556 :src="imageData.imageUrl" 556 :src="imageData.imageUrl"
557 height="150" 557 height="150"
558 v-if="imageUrl" 558 v-if="imageUrl"
559 style="border-radius:50%; width:200px" 559 style="border-radius:50%; width:200px"
560 > 560 >
561 </v-flex> 561 </v-flex>
562 </v-layout> 562 </v-layout>
563 <v-layout> 563 <v-layout>
564 <v-flex xs12 sm6> 564 <v-flex xs12 sm6>
565 <v-layout> 565 <v-layout>
566 <v-flex xs4 class="pt-4 subheading"> 566 <v-flex xs4 class="pt-4 subheading">
567 <label class="right">Full Name:</label> 567 <label class="right">Full Name:</label>
568 </v-flex> 568 </v-flex>
569 <v-flex xs8 class="ml-3"> 569 <v-flex xs8 class="ml-3">
570 <v-text-field 570 <v-text-field
571 v-model="addTeachers.name" 571 v-model="addTeachers.name"
572 placeholder="fill your full Name" 572 placeholder="fill your full Name"
573 name="name" 573 name="name"
574 type="text" 574 type="text"
575 :rules="nameRules" 575 :rules="nameRules"
576 required 576 required
577 ></v-text-field> 577 ></v-text-field>
578 </v-flex> 578 </v-flex>
579 </v-layout> 579 </v-layout>
580 </v-flex> 580 </v-flex>
581 <v-flex xs12 sm6> 581 <v-flex xs12 sm6>
582 <v-layout> 582 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 583 <v-flex xs4 class="pt-4 subheading">
584 <label class="right">Email ID:</label> 584 <label class="right">Email ID:</label>
585 </v-flex> 585 </v-flex>
586 <v-flex xs8 class="ml-3"> 586 <v-flex xs8 class="ml-3">
587 <v-text-field 587 <v-text-field
588 placeholder="fill your email" 588 placeholder="fill your email"
589 :rules="emailRules" 589 :rules="emailRules"
590 v-model="addTeachers.email" 590 v-model="addTeachers.email"
591 type="text" 591 type="text"
592 name="email" 592 name="email"
593 required 593 required
594 ></v-text-field> 594 ></v-text-field>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 </v-layout> 598 </v-layout>
599 <v-layout> 599 <v-layout>
600 <v-flex xs12 sm6> 600 <v-flex xs12 sm6>
601 <v-layout> 601 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 602 <v-flex xs4 class="pt-4 subheading">
603 <label class="right">Date of Birth:</label> 603 <label class="right">Date of Birth:</label>
604 </v-flex> 604 </v-flex>
605 <v-flex xs8 class="ml-3"> 605 <v-flex xs8 class="ml-3">
606 <v-menu 606 <v-menu
607 ref="menu" 607 ref="menu"
608 :close-on-content-click="false" 608 :close-on-content-click="false"
609 v-model="menu" 609 v-model="menu"
610 :nudge-right="40" 610 :nudge-right="40"
611 lazy 611 lazy
612 transition="scale-transition" 612 transition="scale-transition"
613 offset-y 613 offset-y
614 full-width 614 full-width
615 min-width="290px" 615 min-width="290px"
616 > 616 >
617 <v-text-field 617 <v-text-field
618 slot="activator" 618 slot="activator"
619 :rules="dateRules" 619 :rules="dateRules"
620 v-model="addTeachers.date" 620 v-model="addTeachers.date"
621 placeholder="Select date" 621 placeholder="Select date"
622 ></v-text-field> 622 ></v-text-field>
623 <v-date-picker 623 <v-date-picker
624 ref="picker" 624 ref="picker"
625 v-model="addTeachers.date" 625 v-model="addTeachers.date"
626 :max="new Date().toISOString().substr(0, 10)" 626 :max="new Date().toISOString().substr(0, 10)"
627 min="1950-01-01" 627 min="1950-01-01"
628 @input="menu = false" 628 @input="menu = false"
629 ></v-date-picker> 629 ></v-date-picker>
630 </v-menu> 630 </v-menu>
631 </v-flex> 631 </v-flex>
632 </v-layout> 632 </v-layout>
633 </v-flex> 633 </v-flex>
634 <v-flex xs12 sm6> 634 <v-flex xs12 sm6>
635 <v-layout> 635 <v-layout>
636 <v-flex xs4 class="pt-4 subheading"> 636 <v-flex xs4 class="pt-4 subheading">
637 <label class="right">City:</label> 637 <label class="right">City:</label>
638 </v-flex> 638 </v-flex>
639 <v-flex xs8 class="ml-3"> 639 <v-flex xs8 class="ml-3">
640 <v-text-field 640 <v-text-field
641 v-model="addTeachers.city" 641 v-model="addTeachers.city"
642 placeholder="fill your City Name" 642 placeholder="fill your City Name"
643 name="City" 643 name="City"
644 type="text" 644 type="text"
645 :rules="cityRules" 645 :rules="cityRules"
646 required 646 required
647 ></v-text-field> 647 ></v-text-field>
648 </v-flex> 648 </v-flex>
649 </v-layout> 649 </v-layout>
650 </v-flex> 650 </v-flex>
651 </v-layout> 651 </v-layout>
652 <v-layout> 652 <v-layout>
653 <v-flex xs12 sm6> 653 <v-flex xs12 sm6>
654 <v-layout> 654 <v-layout>
655 <v-flex xs4 class="pt-4 subheading"> 655 <v-flex xs4 class="pt-4 subheading">
656 <label class="right">State:</label> 656 <label class="right">State:</label>
657 </v-flex> 657 </v-flex>
658 <v-flex xs8 class="ml-3"> 658 <v-flex xs8 class="ml-3">
659 <v-text-field 659 <v-text-field
660 v-model="addTeachers.state" 660 v-model="addTeachers.state"
661 placeholder="fill your State Name" 661 placeholder="fill your State Name"
662 name="state" 662 name="state"
663 type="text" 663 type="text"
664 :rules="stateRules" 664 :rules="stateRules"
665 required 665 required
666 ></v-text-field> 666 ></v-text-field>
667 </v-flex> 667 </v-flex>
668 </v-layout> 668 </v-layout>
669 </v-flex> 669 </v-flex>
670 <v-flex xs12 sm6> 670 <v-flex xs12 sm6>
671 <v-layout> 671 <v-layout>
672 <v-flex xs4 class="pt-4 subheading"> 672 <v-flex xs4 class="pt-4 subheading">
673 <label class="right">PinCode:</label> 673 <label class="right">PinCode:</label>
674 </v-flex> 674 </v-flex>
675 <v-flex xs8 class="ml-3"> 675 <v-flex xs8 class="ml-3">
676 <v-text-field 676 <v-text-field
677 v-model="addTeachers.pincode" 677 v-model="addTeachers.pincode"
678 placeholder="fill your pincode" 678 placeholder="fill your pincode"
679 name="pincode" 679 name="pincode"
680 type="number" 680 type="number"
681 :rules="pincode" 681 :rules="pincode"
682 required 682 required
683 ></v-text-field> 683 ></v-text-field>
684 </v-flex> 684 </v-flex>
685 </v-layout> 685 </v-layout>
686 </v-flex> 686 </v-flex>
687 </v-layout> 687 </v-layout>
688 <v-layout> 688 <v-layout>
689 <v-flex xs12 sm6> 689 <v-flex xs12 sm6>
690 <v-layout> 690 <v-layout>
691 <v-flex xs4 class="pt-4 subheading"> 691 <v-flex xs4 class="pt-4 subheading">
692 <label class="right">Mobile NO:</label> 692 <label class="right">Mobile NO:</label>
693 </v-flex> 693 </v-flex>
694 <v-flex xs8 class="ml-3"> 694 <v-flex xs8 class="ml-3">
695 <v-text-field 695 <v-text-field
696 v-model="addTeachers.mobileNo" 696 v-model="addTeachers.mobileNo"
697 placeholder="fill your MobileNo" 697 placeholder="fill your MobileNo"
698 name="mobileNo" 698 name="mobileNo"
699 type="number" 699 type="number"
700 :rules="mobileNoRules" 700 :rules="mobileNoRules"
701 required 701 required
702 ></v-text-field> 702 ></v-text-field>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 <v-flex xs12 sm6> 706 <v-flex xs12 sm6>
707 <v-layout> 707 <v-layout>
708 <v-flex xs4 class="pt-4 subheading"> 708 <v-flex xs4 class="pt-4 subheading">
709 <label class="right">Select Country:</label> 709 <label class="right">Select Country:</label>
710 </v-flex> 710 </v-flex>
711 <v-flex xs8 class="ml-3"> 711 <v-flex xs8 class="ml-3">
712 <v-autocomplete 712 <v-autocomplete
713 v-model="addTeachers.country" 713 v-model="addTeachers.country"
714 :rules="country" 714 :rules="country"
715 :items="countries" 715 :items="countries"
716 placeholder="Select Country Name" 716 placeholder="Select Country Name"
717 required 717 required
718 ></v-autocomplete> 718 ></v-autocomplete>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 </v-layout> 722 </v-layout>
723 <v-layout> 723 <v-layout>
724 <v-flex xs12 sm6> 724 <v-flex xs12 sm6>
725 <v-layout> 725 <v-layout>
726 <v-flex xs4 class="pt-4 subheading"> 726 <v-flex xs4 class="pt-4 subheading">
727 <label class="right">Join Date</label> 727 <label class="right">Join Date</label>
728 </v-flex> 728 </v-flex>
729 <v-flex xs8 class="ml-3"> 729 <v-flex xs8 class="ml-3">
730 <v-menu 730 <v-menu
731 ref="menu1" 731 ref="menu1"
732 :close-on-content-click="false" 732 :close-on-content-click="false"
733 v-model="menu1" 733 v-model="menu1"
734 :nudge-right="40" 734 :nudge-right="40"
735 lazy 735 lazy
736 transition="scale-transition" 736 transition="scale-transition"
737 offset-y 737 offset-y
738 full-width 738 full-width
739 min-width="290px" 739 min-width="290px"
740 > 740 >
741 <v-text-field 741 <v-text-field
742 slot="activator" 742 slot="activator"
743 :rules="joinDateRules" 743 :rules="joinDateRules"
744 v-model="addTeachers.joinDate" 744 v-model="addTeachers.joinDate"
745 placeholder="Select date" 745 placeholder="Select date"
746 ></v-text-field> 746 ></v-text-field>
747 <v-date-picker 747 <v-date-picker
748 ref="picker" 748 ref="picker"
749 v-model="addTeachers.joinDate" 749 v-model="addTeachers.joinDate"
750 :max="new Date().toISOString().substr(0, 10)" 750 :max="new Date().toISOString().substr(0, 10)"
751 min="1950-01-01" 751 min="1950-01-01"
752 @input="menu1 = false" 752 @input="menu1 = false"
753 ></v-date-picker> 753 ></v-date-picker>
754 </v-menu> 754 </v-menu>
755 </v-flex> 755 </v-flex>
756 </v-layout> 756 </v-layout>
757 </v-flex> 757 </v-flex>
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">Uplaod Image:</label> 761 <label class="right">Uplaod Image:</label>
762 </v-flex> 762 </v-flex>
763 <v-flex xs8 class="ml-3"> 763 <v-flex xs8 class="ml-3">
764 <v-text-field 764 <v-text-field
765 label="Select Image" 765 label="Select Image"
766 @click="pickFile" 766 @click="pickFile"
767 v-model="imageName" 767 v-model="imageName"
768 prepend-icon="attach_file" 768 append-icon="attach_file"
769 ></v-text-field> 769 ></v-text-field>
770 <input 770 <input
771 type="file" 771 type="file"
772 style="display: none" 772 style="display: none"
773 ref="image" 773 ref="image"
774 accept="image/*" 774 accept="image/*"
775 @change="onFilePicked" 775 @change="onFilePicked"
776 > 776 >
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 <v-layout> 781 <v-layout>
782 <v-flex xs12 sm12> 782 <v-flex xs12 sm12>
783 <v-layout> 783 <v-layout>
784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
785 <label class>Present Address:</label> 785 <label class>Present Address:</label>
786 </v-flex> 786 </v-flex>
787 <v-flex xs12> 787 <v-flex xs12 class="presentInput">
788 <v-text-field 788 <v-text-field
789 name="input-4-3" 789 name="input-4-3"
790 v-model="addTeachers.presentAddress" 790 v-model="addTeachers.presentAddress"
791 :rules="presentAddress" 791 :rules="presentAddress"
792 placeholder="fill Your present Address" 792 placeholder="fill Your present Address"
793 required 793 required
794 ></v-text-field> 794 ></v-text-field>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 </v-flex> 797 </v-flex>
798 <v-flex xs12 sm12> 798 <v-flex xs12 sm12>
799 <v-layout> 799 <v-layout>
800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
801 <label>Permanent Address:</label> 801 <label>Permanent Address:</label>
802 </v-flex> 802 </v-flex>
803 <v-flex xs12> 803 <v-flex xs12 class="presentInput">
804 <v-text-field 804 <v-text-field
805 name="input-4-3" 805 name="input-4-3"
806 v-model="addTeachers.permanentAddress" 806 v-model="addTeachers.permanentAddress"
807 :rules="permanentAddress" 807 :rules="permanentAddress"
808 placeholder="fill Your Permanent Address" 808 placeholder="fill Your Permanent Address"
809 required 809 required
810 ></v-text-field> 810 ></v-text-field>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 </v-layout> 814 </v-layout>
815 <v-layout> 815 <v-layout>
816 <v-flex xs12 sm12> 816 <v-flex xs12 sm12>
817 <v-card-actions> 817 <v-card-actions>
818 <v-btn @click="clear" round dark>clear</v-btn> 818 <v-btn @click="clear" round dark>clear</v-btn>
819 <v-spacer></v-spacer> 819 <v-spacer></v-spacer>
820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
821 </v-card-actions> 821 </v-card-actions>
822 </v-flex> 822 </v-flex>
823 </v-layout> 823 </v-layout>
824 </v-container> 824 </v-container>
825 </v-form> 825 </v-form>
826 </v-card> 826 </v-card>
827 </v-flex> 827 </v-flex>
828 </v-container> 828 </v-container>
829 </v-tab-item> 829 </v-tab-item>
830 </v-tabs> 830 </v-tabs>
831 <div class="loader" v-if="showLoader"> 831 <div class="loader" v-if="showLoader">
832 <v-progress-circular indeterminate color="white"></v-progress-circular> 832 <v-progress-circular indeterminate color="white"></v-progress-circular>
833 </div> 833 </div>
834 </v-app> 834 </v-app>
835 </template> 835 </template>
836 836
837 <script> 837 <script>
838 // import AppToolbar from '@/components/AppToolbar'; 838 // import AppToolbar from '@/components/AppToolbar';
839 import http from "@/Services/http.js"; 839 import http from "@/Services/http.js";
840 import Util from "@/util"; 840 import Util from "@/util";
841 841
842 export default { 842 export default {
843 components: { 843 components: {
844 // "one-month": onemonth, 844 // "one-month": onemonth,
845 }, 845 },
846 data: () => ({ 846 data: () => ({
847 component: "report-generate", 847 component: "report-generate",
848 snackbar: false, 848 snackbar: false,
849 y: "top", 849 y: "top",
850 x: "right", 850 x: "right",
851 mode: "", 851 mode: "",
852 timeout: 3000, 852 timeout: 3000,
853 text: "", 853 text: "",
854 showLoader:false, 854 showLoader:false,
855 loading: false, 855 loading: false,
856 date: null, 856 date: null,
857 search: "", 857 search: "",
858 menu: false, 858 menu: false,
859 menu1: false, 859 menu1: false,
860 menu2: false, 860 menu2: false,
861 menu3: false, 861 menu3: false,
862 dialog: false, 862 dialog: false,
863 dialog1: false, 863 dialog1: false,
864 valid: true, 864 valid: true,
865 isActive: true, 865 isActive: true,
866 newActive: false, 866 newActive: false,
867 pagination: { 867 pagination: {
868 rowsPerPage: 15 868 rowsPerPage: 15
869 }, 869 },
870 imageData: {}, 870 imageData: {},
871 imageName: "", 871 imageName: "",
872 imageUrl: "", 872 imageUrl: "",
873 imageFile: "", 873 imageFile: "",
874 nameRules: [v => !!v || " Full Name is required"], 874 nameRules: [v => !!v || " Full Name is required"],
875 dateRules: [v => !!v || " DOB is required"], 875 dateRules: [v => !!v || " DOB is required"],
876 cityRules: [v => !!v || " City Name is required"], 876 cityRules: [v => !!v || " City Name is required"],
877 pincode: [v => !!v || " Pincode is required"], 877 pincode: [v => !!v || " Pincode is required"],
878 country: [v => !!v || " Country Name is required"], 878 country: [v => !!v || " Country Name is required"],
879 permanentAddress: [v => !!v || " Permanent Address is required"], 879 permanentAddress: [v => !!v || " Permanent Address is required"],
880 presentAddress: [v => !!v || " Present Address is required"], 880 presentAddress: [v => !!v || " Present Address is required"],
881 mobileNoRules: [v => !!v || "Mobile Number is required"], 881 mobileNoRules: [v => !!v || "Mobile Number is required"],
882 stateRules: [v => !!v || "State Name is required"], 882 stateRules: [v => !!v || "State Name is required"],
883 joinDateRules: [v => !!v || " Join Date is required"], 883 joinDateRules: [v => !!v || " Join Date is required"],
884 errorMessages: "", 884 errorMessages: "",
885 emailRules: [ 885 emailRules: [
886 v => !!v || "E-mail is required", 886 v => !!v || "E-mail is required",
887 v => 887 v =>
888 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 888 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
889 "E-mail must be valid" 889 "E-mail must be valid"
890 ], 890 ],
891 countries: [ 891 countries: [
892 "Afghanistan", 892 "Afghanistan",
893 "Albania", 893 "Albania",
894 "Algeria", 894 "Algeria",
895 "Andorra", 895 "Andorra",
896 "Angola", 896 "Angola",
897 "Anguilla", 897 "Anguilla",
898 "Antigua &amp; Barbuda", 898 "Antigua &amp; Barbuda",
899 "Argentina", 899 "Argentina",
900 "Armenia", 900 "Armenia",
901 "Aruba", 901 "Aruba",
902 "Australia", 902 "Australia",
903 "Austria", 903 "Austria",
904 "Azerbaijan", 904 "Azerbaijan",
905 "Bahamas", 905 "Bahamas",
906 "Bahrain", 906 "Bahrain",
907 "Bangladesh", 907 "Bangladesh",
908 "Barbados", 908 "Barbados",
909 "Belarus", 909 "Belarus",
910 "Belgium", 910 "Belgium",
911 "Belize", 911 "Belize",
912 "Benin", 912 "Benin",
913 "Bermuda", 913 "Bermuda",
914 "Bhutan", 914 "Bhutan",
915 "Bolivia", 915 "Bolivia",
916 "Bosnia &amp; Herzegovina", 916 "Bosnia &amp; Herzegovina",
917 "Botswana", 917 "Botswana",
918 "Brazil", 918 "Brazil",
919 "British Virgin Islands", 919 "British Virgin Islands",
920 "Brunei", 920 "Brunei",
921 "Bulgaria", 921 "Bulgaria",
922 "Burkina Faso", 922 "Burkina Faso",
923 "Burundi", 923 "Burundi",
924 "Cambodia", 924 "Cambodia",
925 "Cameroon", 925 "Cameroon",
926 "Cape Verde", 926 "Cape Verde",
927 "Cayman Islands", 927 "Cayman Islands",
928 "Chad", 928 "Chad",
929 "Chile", 929 "Chile",
930 "China", 930 "China",
931 "Colombia", 931 "Colombia",
932 "Congo", 932 "Congo",
933 "Cook Islands", 933 "Cook Islands",
934 "Costa Rica", 934 "Costa Rica",
935 "Cote D Ivoire", 935 "Cote D Ivoire",
936 "Croatia", 936 "Croatia",
937 "Cruise Ship", 937 "Cruise Ship",
938 "Cuba", 938 "Cuba",
939 "Cyprus", 939 "Cyprus",
940 "Czech Republic", 940 "Czech Republic",
941 "Denmark", 941 "Denmark",
942 "Djibouti", 942 "Djibouti",
943 "Dominica", 943 "Dominica",
944 "Dominican Republic", 944 "Dominican Republic",
945 "Ecuador", 945 "Ecuador",
946 "Egypt", 946 "Egypt",
947 "El Salvador", 947 "El Salvador",
948 "Equatorial Guinea", 948 "Equatorial Guinea",
949 "Estonia", 949 "Estonia",
950 "Ethiopia", 950 "Ethiopia",
951 "Falkland Islands", 951 "Falkland Islands",
952 "Faroe Islands", 952 "Faroe Islands",
953 "Fiji", 953 "Fiji",
954 "Finland", 954 "Finland",
955 "France", 955 "France",
956 "French Polynesia", 956 "French Polynesia",
957 "French West Indies", 957 "French West Indies",
958 "Gabon", 958 "Gabon",
959 "Gambia", 959 "Gambia",
960 "Georgia", 960 "Georgia",
961 "Germany", 961 "Germany",
962 "Ghana", 962 "Ghana",
963 "Gibraltar", 963 "Gibraltar",
964 "Greece", 964 "Greece",
965 "Greenland", 965 "Greenland",
966 "Grenada", 966 "Grenada",
967 "Guam", 967 "Guam",
968 "Guatemala", 968 "Guatemala",
969 "Guernsey", 969 "Guernsey",
970 "Guinea", 970 "Guinea",
971 "Guinea Bissau", 971 "Guinea Bissau",
972 "Guyana", 972 "Guyana",
973 "Haiti", 973 "Haiti",
974 "Honduras", 974 "Honduras",
975 "Hong Kong", 975 "Hong Kong",
976 "Hungary", 976 "Hungary",
977 "Iceland", 977 "Iceland",
978 "India", 978 "India",
979 "Indonesia", 979 "Indonesia",
980 "Iran", 980 "Iran",
981 "Iraq", 981 "Iraq",
982 "Ireland", 982 "Ireland",
983 "Isle of Man", 983 "Isle of Man",
984 "Israel", 984 "Israel",
985 "Italy", 985 "Italy",
986 "Jamaica", 986 "Jamaica",
987 "Japan", 987 "Japan",
988 "Jersey", 988 "Jersey",
989 "Jordan", 989 "Jordan",
990 "Kazakhstan", 990 "Kazakhstan",
991 "Kenya", 991 "Kenya",
992 "Kuwait", 992 "Kuwait",
993 "Kyrgyz Republic", 993 "Kyrgyz Republic",
994 "Laos", 994 "Laos",
995 "Latvia", 995 "Latvia",
996 "Lebanon", 996 "Lebanon",
997 "Lesotho", 997 "Lesotho",
998 "Liberia", 998 "Liberia",
999 "Libya", 999 "Libya",
1000 "Liechtenstein", 1000 "Liechtenstein",
1001 "Lithuania", 1001 "Lithuania",
1002 "Luxembourg", 1002 "Luxembourg",
1003 "Macau", 1003 "Macau",
1004 "Macedonia", 1004 "Macedonia",
1005 "Madagascar", 1005 "Madagascar",
1006 "Malawi", 1006 "Malawi",
1007 "Malaysia", 1007 "Malaysia",
1008 "Maldives", 1008 "Maldives",
1009 "Mali", 1009 "Mali",
1010 "Malta", 1010 "Malta",
1011 "Mauritania", 1011 "Mauritania",
1012 "Mauritius", 1012 "Mauritius",
1013 "Mexico", 1013 "Mexico",
1014 "Moldova", 1014 "Moldova",
1015 "Monaco", 1015 "Monaco",
1016 "Mongolia", 1016 "Mongolia",
1017 "Montenegro", 1017 "Montenegro",
1018 "Montserrat", 1018 "Montserrat",
1019 "Morocco", 1019 "Morocco",
1020 "Mozambique", 1020 "Mozambique",
1021 "Namibia", 1021 "Namibia",
1022 "Nepal", 1022 "Nepal",
1023 "Netherlands", 1023 "Netherlands",
1024 "Netherlands Antilles", 1024 "Netherlands Antilles",
1025 "New Caledonia", 1025 "New Caledonia",
1026 "New Zealand", 1026 "New Zealand",
1027 "Nicaragua", 1027 "Nicaragua",
1028 "Niger", 1028 "Niger",
1029 "Nigeria", 1029 "Nigeria",
1030 "Norway", 1030 "Norway",
1031 "Oman", 1031 "Oman",
1032 "Pakistan", 1032 "Pakistan",
1033 "Palestine", 1033 "Palestine",
1034 "Panama", 1034 "Panama",
1035 "Papua New Guinea", 1035 "Papua New Guinea",
1036 "Paraguay", 1036 "Paraguay",
1037 "Peru", 1037 "Peru",
1038 "Philippines", 1038 "Philippines",
1039 "Poland", 1039 "Poland",
1040 "Portugal", 1040 "Portugal",
1041 "Puerto Rico", 1041 "Puerto Rico",
1042 "Qatar", 1042 "Qatar",
1043 "Reunion", 1043 "Reunion",
1044 "Romania", 1044 "Romania",
1045 "Russia", 1045 "Russia",
1046 "Rwanda", 1046 "Rwanda",
1047 "Saint Pierre &amp; Miquelon", 1047 "Saint Pierre &amp; Miquelon",
1048 "Samoa", 1048 "Samoa",
1049 "San Marino", 1049 "San Marino",
1050 "Satellite", 1050 "Satellite",
1051 "Saudi Arabia", 1051 "Saudi Arabia",
1052 "Senegal", 1052 "Senegal",
1053 "Serbia", 1053 "Serbia",
1054 "Seychelles", 1054 "Seychelles",
1055 "Sierra Leone", 1055 "Sierra Leone",
1056 "Singapore", 1056 "Singapore",
1057 "Slovakia", 1057 "Slovakia",
1058 "Slovenia", 1058 "Slovenia",
1059 "South Africa", 1059 "South Africa",
1060 "South Korea", 1060 "South Korea",
1061 "Spain", 1061 "Spain",
1062 "Sri Lanka", 1062 "Sri Lanka",
1063 "St Kitts &amp; Nevis", 1063 "St Kitts &amp; Nevis",
1064 "St Lucia", 1064 "St Lucia",
1065 "St Vincent", 1065 "St Vincent",
1066 "St. Lucia", 1066 "St. Lucia",
1067 "Sudan", 1067 "Sudan",
1068 "Suriname", 1068 "Suriname",
1069 "Swaziland", 1069 "Swaziland",
1070 "Sweden", 1070 "Sweden",
1071 "Switzerland", 1071 "Switzerland",
1072 "Syria", 1072 "Syria",
1073 "Taiwan", 1073 "Taiwan",
1074 "Tajikistan", 1074 "Tajikistan",
1075 "Tanzania", 1075 "Tanzania",
1076 "Thailand", 1076 "Thailand",
1077 "Timor L'Este", 1077 "Timor L'Este",
1078 "Togo", 1078 "Togo",
1079 "Tonga", 1079 "Tonga",
1080 "Trinidad &amp; Tobago", 1080 "Trinidad &amp; Tobago",
1081 "Tunisia", 1081 "Tunisia",
1082 "Turkey", 1082 "Turkey",
1083 "Turkmenistan", 1083 "Turkmenistan",
1084 "Turks &amp; Caicos", 1084 "Turks &amp; Caicos",
1085 "Uganda", 1085 "Uganda",
1086 "Ukraine", 1086 "Ukraine",
1087 "United Arab Emirates", 1087 "United Arab Emirates",
1088 "United Kingdom", 1088 "United Kingdom",
1089 "United States", 1089 "United States",
1090 "Uruguay", 1090 "Uruguay",
1091 "Uzbekistan", 1091 "Uzbekistan",
1092 "Venezuela", 1092 "Venezuela",
1093 "Vietnam", 1093 "Vietnam",
1094 "Virgin Islands (US)", 1094 "Virgin Islands (US)",
1095 "Yemen", 1095 "Yemen",
1096 "Zambia", 1096 "Zambia",
1097 "Zimbabwe" 1097 "Zimbabwe"
1098 ], 1098 ],
1099 headers: [ 1099 headers: [
1100 { 1100 {
1101 text: "No", 1101 text: "No",
1102 align: "center", 1102 align: "center",
1103 sortable: false, 1103 sortable: false,
1104 value: "No" 1104 value: "No"
1105 }, 1105 },
1106 { text: "Name", value: "name", sortable: false, align: "center" }, 1106 { text: "Name", value: "name", sortable: false, align: "center" },
1107 { text: "Email", value: "email", sortable: false, align: "center" }, 1107 { text: "Email", value: "email", sortable: false, align: "center" },
1108 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1108 { text: "DOB", value: "dob", sortable: false, align: "center" },
1109 { text: "Join Date", value: "joinDate", sortable: false, align: "center" }, 1109 { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
1110 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" }, 1110 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
1111 { text: "Action", value: "", sortable: false, align: "center" } 1111 { text: "Action", value: "", sortable: false, align: "center" }
1112 ], 1112 ],
1113 desserts: [], 1113 desserts: [],
1114 editedIndex: -1, 1114 editedIndex: -1,
1115 upload:'', 1115 upload:'',
1116 editedItem: { 1116 editedItem: {
1117 role: "TEACHER", 1117 role: "TEACHER",
1118 name: "", 1118 name: "",
1119 email: "", 1119 email: "",
1120 date: null, 1120 date: null,
1121 city: "", 1121 city: "",
1122 pincode: "", 1122 pincode: "",
1123 country: "", 1123 country: "",
1124 permanentAddress: "", 1124 permanentAddress: "",
1125 presentAddress: "", 1125 presentAddress: "",
1126 mobileNo: "", 1126 mobileNo: "",
1127 state: "", 1127 state: "",
1128 joinDate: null 1128 joinDate: null
1129 }, 1129 },
1130 addTeachers: { 1130 addTeachers: {
1131 role: "TEACHER", 1131 role: "TEACHER",
1132 name: "", 1132 name: "",
1133 email: "", 1133 email: "",
1134 date: null, 1134 date: null,
1135 city: "", 1135 city: "",
1136 pincode: "", 1136 pincode: "",
1137 country: "", 1137 country: "",
1138 permanentAddress: "", 1138 permanentAddress: "",
1139 presentAddress: "", 1139 presentAddress: "",
1140 mobileNo: "", 1140 mobileNo: "",
1141 state: "", 1141 state: "",
1142 joinDate: null 1142 joinDate: null
1143 }, 1143 },
1144 defaultItem: { 1144 defaultItem: {
1145 role: "TEACHER", 1145 role: "TEACHER",
1146 name: "", 1146 name: "",
1147 email: "" 1147 email: ""
1148 }, 1148 },
1149 userName: "", 1149 userName: "",
1150 items: [ 1150 items: [
1151 { 1151 {
1152 href: "/changepassword", 1152 href: "/changepassword",
1153 title: "Change Password", 1153 title: "Change Password",
1154 click: e => { 1154 click: e => {
1155 console.log(e); 1155 console.log(e);
1156 } 1156 }
1157 }, 1157 },
1158 { 1158 {
1159 href: "#", 1159 href: "#",
1160 title: "Logout", 1160 title: "Logout",
1161 click: e => { 1161 click: e => {
1162 window.getApp.$emit("APP_LOGOUT"); 1162 window.getApp.$emit("APP_LOGOUT");
1163 } 1163 }
1164 } 1164 }
1165 ] 1165 ]
1166 }), 1166 }),
1167 watch: { 1167 watch: {
1168 menu(val) { 1168 menu(val) {
1169 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1169 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1170 }, 1170 },
1171 menu1(val) { 1171 menu1(val) {
1172 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1172 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1173 } 1173 }
1174 }, 1174 },
1175 methods: { 1175 methods: {
1176 save (date) { 1176 save (date) {
1177 this.$refs.menu.save(date) 1177 this.$refs.menu.save(date)
1178 }, 1178 },
1179 save (date) { 1179 save (date) {
1180 this.$refs.menu1.save(date) 1180 this.$refs.menu1.save(date)
1181 }, 1181 },
1182 pickFile() { 1182 pickFile() {
1183 this.$refs.image.click(); 1183 this.$refs.image.click();
1184 }, 1184 },
1185 1185
1186 onFilePicked(e) { 1186 onFilePicked(e) {
1187 // console.log(e) 1187 // console.log(e)
1188 const files = e.target.files; 1188 const files = e.target.files;
1189 this.upload = e.target.files[0]; 1189 this.upload = e.target.files[0];
1190 console.log("imageData-upload========>",this.upload) 1190 console.log("imageData-upload========>",this.upload)
1191 if (files[0] !== undefined) { 1191 if (files[0] !== undefined) {
1192 this.imageName = files[0].name; 1192 this.imageName = files[0].name;
1193 if (this.imageName.lastIndexOf(".") <= 0) { 1193 if (this.imageName.lastIndexOf(".") <= 0) {
1194 return; 1194 return;
1195 } 1195 }
1196 const fr = new FileReader(); 1196 const fr = new FileReader();
1197 fr.readAsDataURL(files[0]); 1197 fr.readAsDataURL(files[0]);
1198 fr.addEventListener("load", () => { 1198 fr.addEventListener("load", () => {
1199 this.imageUrl = fr.result; 1199 this.imageUrl = fr.result;
1200 this.imageFile = files[0]; // this is an image file that can be sent to server... 1200 this.imageFile = files[0]; // this is an image file that can be sent to server...
1201 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1201 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1202 // console.log("upload=======>", this.imageData.imageUrl); 1202 // console.log("upload=======>", this.imageData.imageUrl);
1203 console.log("imageFile", this.imageFile); 1203 console.log("imageFile", this.imageFile);
1204 }); 1204 });
1205 } else { 1205 } else {
1206 this.imageName = ""; 1206 this.imageName = "";
1207 this.imageFile = ""; 1207 this.imageFile = "";
1208 this.imageUrl = ""; 1208 this.imageUrl = "";
1209 } 1209 }
1210 }, 1210 },
1211 getTeacherList() { 1211 getTeacherList() {
1212 this.showLoader = true; 1212 this.showLoader = true;
1213 var token = this.$store.state.token; 1213 var token = this.$store.state.token;
1214 http() 1214 http()
1215 .get("/getTeachersList", { 1215 .get("/getTeachersList", {
1216 headers: { Authorization: "Bearer " + token } 1216 headers: { Authorization: "Bearer " + token }
1217 }) 1217 })
1218 .then(response => { 1218 .then(response => {
1219 this.desserts = response.data.data; 1219 this.desserts = response.data.data;
1220 this.showLoader = false; 1220 this.showLoader = false;
1221 // console.log("getTeacherList=====>",this.desserts) 1221 // console.log("getTeacherList=====>",this.desserts)
1222 }) 1222 })
1223 .catch(err => { 1223 .catch(err => {
1224 // console.log("err====>", err); 1224 // console.log("err====>", err);
1225 this.showLoader = false; 1225 this.showLoader = false;
1226 this.$router.replace({ path: "/" }); 1226 this.$router.replace({ path: "/" });
1227 }); 1227 });
1228 }, 1228 },
1229 editItem(item) { 1229 editItem(item) {
1230 this.editedIndex = this.desserts.indexOf(item); 1230 this.editedIndex = this.desserts.indexOf(item);
1231 this.editedItem = Object.assign({}, item); 1231 this.editedItem = Object.assign({}, item);
1232 this.dialog = true; 1232 this.dialog = true;
1233 }, 1233 },
1234 profile(item) { 1234 profile(item) {
1235 this.editedIndex = this.desserts.indexOf(item); 1235 this.editedIndex = this.desserts.indexOf(item);
1236 this.editedItem = Object.assign({}, item); 1236 this.editedItem = Object.assign({}, item);
1237 this.dialog1 = true; 1237 this.dialog1 = true;
1238 }, 1238 },
1239 deleteItem(item) { 1239 deleteItem(item) {
1240 let deleteTeachers = { 1240 let deleteTeachers = {
1241 teacherId: item._id 1241 teacherId: item._id
1242 }; 1242 };
1243 // console.log("deleteUers",deleteTeachers) 1243 // console.log("deleteUers",deleteTeachers)
1244 http() 1244 http()
1245 .delete( 1245 .delete(
1246 "/deleteTeacher", 1246 "/deleteTeacher",
1247 confirm("Are you sure you want to delete this?") && { 1247 confirm("Are you sure you want to delete this?") && {
1248 params: deleteTeachers 1248 params: deleteTeachers
1249 } 1249 }
1250 ) 1250 )
1251 .then(response => { 1251 .then(response => {
1252 // console.log("deleteUers",deleteTeachers) 1252 // console.log("deleteUers",deleteTeachers)
1253 if ((this.snackbar = true)) { 1253 if ((this.snackbar = true)) {
1254 this.text = "Successfully delete Existing User"; 1254 this.text = "Successfully delete Existing User";
1255 } 1255 }
1256 this.getTeacherList(); 1256 this.getTeacherList();
1257 }) 1257 })
1258 .catch(error => { 1258 .catch(error => {
1259 console.log(error); 1259 console.log(error);
1260 }); 1260 });
1261 }, 1261 },
1262 activeTab(type) { 1262 activeTab(type) {
1263 switch (type) { 1263 switch (type) {
1264 case "existing": 1264 case "existing":
1265 this.newActive = false; 1265 this.newActive = false;
1266 this.isActive = true; 1266 this.isActive = true;
1267 break; 1267 break;
1268 1268
1269 default: 1269 default:
1270 this.newActive = true; 1270 this.newActive = true;
1271 this.isActive = false; 1271 this.isActive = false;
1272 break; 1272 break;
1273 } 1273 }
1274 }, 1274 },
1275 close() { 1275 close() {
1276 this.dialog = false; 1276 this.dialog = false;
1277 setTimeout(() => { 1277 setTimeout(() => {
1278 this.editedItem = Object.assign({}, this.defaultItem); 1278 this.editedItem = Object.assign({}, this.defaultItem);
1279 this.editedIndex = -1; 1279 this.editedIndex = -1;
1280 }, 300); 1280 }, 300);
1281 }, 1281 },
1282 close1() { 1282 close1() {
1283 this.dialog1 = false; 1283 this.dialog1 = false;
1284 }, 1284 },
1285 // close2() { 1285 // close2() {
1286 // this.dialog2 = false; 1286 // this.dialog2 = false;
1287 // }, 1287 // },
1288 submit() { 1288 submit() {
1289 if (this.$refs.form.validate()) { 1289 if (this.$refs.form.validate()) {
1290 let images = new FormData(); 1290 let images = new FormData();
1291 images.append("upload", this.imageFile); 1291 images.append("upload", this.imageFile);
1292 console.log(images); 1292 console.log(images);
1293 // var form_data = new FormData(); 1293 // var form_data = new FormData();
1294 // for (var key in addTeacher) { 1294 // for (var key in addTeacher) {
1295 // if (key === 'upload') { 1295 // if (key === 'upload') {
1296 // form_data.append(key, this.imageFile); 1296 // form_data.append(key, this.imageFile);
1297 // } else { 1297 // } else {
1298 // form_data.append(key, addTeacher[key]) 1298 // form_data.append(key, addTeacher[key])
1299 // } 1299 // }
1300 // } 1300 // }
1301 console.log("images",images) 1301 console.log("images",images)
1302 let addTeacher = { 1302 let addTeacher = {
1303 name: this.addTeachers.name, 1303 name: this.addTeachers.name,
1304 email: this.addTeachers.email, 1304 email: this.addTeachers.email,
1305 role: this.addTeachers.role, 1305 role: this.addTeachers.role,
1306 dob: this.addTeachers.date, 1306 dob: this.addTeachers.date,
1307 city: this.addTeachers.city, 1307 city: this.addTeachers.city,
1308 pincode: this.addTeachers.pincode, 1308 pincode: this.addTeachers.pincode,
1309 country: this.addTeachers.country, 1309 country: this.addTeachers.country,
1310 permanentAddress: this.addTeachers.permanentAddress, 1310 permanentAddress: this.addTeachers.permanentAddress,
1311 presentAddress: this.addTeachers.presentAddress, 1311 presentAddress: this.addTeachers.presentAddress,
1312 mobileNo: this.addTeachers.mobileNo, 1312 mobileNo: this.addTeachers.mobileNo,
1313 state: this.addTeachers.state, 1313 state: this.addTeachers.state,
1314 joinDate: this.addTeachers.joinDate, 1314 joinDate: this.addTeachers.joinDate,
1315 images 1315 images
1316 // upload:this.imageFile 1316 // upload:this.imageFile
1317 }; 1317 };
1318 // console.log("addTeacher============>", addTeacher); 1318 // console.log("addTeacher============>", addTeacher);
1319 http() 1319 http()
1320 .post("/createTeacher", addTeacher) 1320 .post("/createTeacher", addTeacher)
1321 .then(response => { 1321 .then(response => {
1322 console.log("addTeacher", addTeacher); 1322 console.log("addTeacher", addTeacher);
1323 this.getTeacherList(); 1323 this.getTeacherList();
1324 if ((this.snackbar = true)) { 1324 if ((this.snackbar = true)) {
1325 this.text = "New user added successfully"; 1325 this.text = "New user added successfully";
1326 } 1326 }
1327 1327
1328 this.clear(); 1328 this.clear();
1329 }) 1329 })
1330 .catch(error => { 1330 .catch(error => {
1331 // console.log(error); 1331 // console.log(error);
1332 if ((this.snackbar = true)) { 1332 if ((this.snackbar = true)) {
1333 this.text = error.response.data.message; 1333 this.text = error.response.data.message;
1334 } 1334 }
1335 }); 1335 });
1336 } 1336 }
1337 }, 1337 },
1338 mail() {}, 1338 mail() {},
1339 download() {}, 1339 download() {},
1340 clear() { 1340 clear() {
1341 this.$refs.form.reset(); 1341 this.$refs.form.reset();
1342 }, 1342 },
1343 save() { 1343 save() {
1344 let editTeacher = { 1344 let editTeacher = {
1345 teacherId: this.editedItem._id, 1345 teacherId: this.editedItem._id,
1346 name: this.editedItem.name, 1346 name: this.editedItem.name,
1347 email: this.editedItem.email, 1347 email: this.editedItem.email,
1348 role: this.editedItem.role, 1348 role: this.editedItem.role,
1349 dob: this.editedItem.date, 1349 dob: this.editedItem.date,
1350 city: this.editedItem.city, 1350 city: this.editedItem.city,
1351 pincode: this.editedItem.pincode, 1351 pincode: this.editedItem.pincode,
1352 country: this.editedItem.country, 1352 country: this.editedItem.country,
1353 permanentAddress: this.editedItem.permanentAddress, 1353 permanentAddress: this.editedItem.permanentAddress,
1354 presentAddress: this.editedItem.presentAddress, 1354 presentAddress: this.editedItem.presentAddress,
1355 mobileNo: this.editedItem.mobileNo, 1355 mobileNo: this.editedItem.mobileNo,
1356 state: this.editedItem.state, 1356 state: this.editedItem.state,
1357 joinDate: this.editedItem.joinDate, 1357 joinDate: this.editedItem.joinDate,
1358 // imageData, 1358 // imageData,
1359 }; 1359 };
1360 http() 1360 http()
1361 .put("/updateTeacher", editTeacher) 1361 .put("/updateTeacher", editTeacher)
1362 .then(response => { 1362 .then(response => {
1363 console.log("editTeacher",editTeacher); 1363 console.log("editTeacher",editTeacher);
1364 if ((this.snackbar = true)) { 1364 if ((this.snackbar = true)) {
1365 this.text = "Successfully Edit Existing User"; 1365 this.text = "Successfully Edit Existing User";
1366 } 1366 }
1367 this.getTeacherList(); 1367 this.getTeacherList();
1368 }) 1368 })
1369 .catch(error => { 1369 .catch(error => {
1370 console.log(error); 1370 console.log(error);
1371 }); 1371 });
1372 this.close(); 1372 this.close();
1373 }, 1373 },
1374 handleDrawerToggle() { 1374 handleDrawerToggle() {
1375 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1375 window.getApp.$emit("APP_DRAWER_TOGGLED");
1376 }, 1376 },
1377 handleFullScreen() { 1377 handleFullScreen() {
1378 Util.toggleFullScreen(); 1378 Util.toggleFullScreen();
1379 } 1379 }
1380 }, 1380 },
1381 mounted() { 1381 mounted() {
1382 this.getTeacherList(); 1382 this.getTeacherList();
1383 // console.log("Id",this.$store.state.id) 1383 // console.log("Id",this.$store.state.id)
1384 // console.log("token",this.$store.state.token) 1384 // console.log("token",this.$store.state.token)
1385 }, 1385 },
1386 computed: { 1386 computed: {
1387 toolbarColor() { 1387 toolbarColor() {
1388 return this.$vuetify.options.extra.mainNav; 1388 return this.$vuetify.options.extra.mainNav;
1389 } 1389 }
1390 } 1390 }
1391 }; 1391 };
1392 </script> 1392 </script>
1393 <style scoped> 1393 <style scoped>
1394 .v-tabs__div { 1394 .v-tabs__div {
1395 text-transform: none; 1395 text-transform: none;
1396 } 1396 }
1397 .v-input__prepend-outer { 1397 .v-input__prepend-outer {
1398 margin-right: 0px !important; 1398 margin-right: 0px !important;
1399 } 1399 }
1400 .v-card__actions .v-btn { 1400 .v-card__actions .v-btn {
1401 margin: 0 15px; 1401 margin: 0 15px;
1402 min-width: 120px; 1402 min-width: 120px;
1403 } 1403 }
1404 .primary { 1404 .primary {
1405 background-color: #aaa !important; 1405 background-color: #aaa !important;
1406 border-color: #aaa !important; 1406 border-color: #aaa !important;
1407 } 1407 }
1408 h4 { 1408 h4 {
1409 background-repeat: no-repeat; 1409 background-repeat: no-repeat;
1410 padding: 8px; 1410 padding: 8px;
1411 margin: auto; 1411 margin: auto;
1412 font-size: 25px; 1412 font-size: 25px;
1413 } 1413 }
1414 #name { 1414 #name {
1415 position: absolute; 1415 position: absolute;
1416 left: 100px; 1416 left: 100px;
1417 top: 17px; 1417 top: 17px;
1418 } 1418 }
1419 #icon { 1419 #icon {
1420 position: absolute; 1420 position: absolute;
1421 right: 8px; 1421 right: 8px;
1422 top: 8px; 1422 top: 8px;
1423 } 1423 }
1424 #m { 1424 #m {
1425 position: relative; 1425 position: relative;
1426 left: 135px; 1426 left: 135px;
1427 top: -15px; 1427 top: -15px;
1428 } 1428 }
1429 #G { 1429 #G {
1430 position: absolute; 1430 position: absolute;
1431 top: 38px; 1431 top: 38px;
1432 color: white; 1432 color: white;
1433 } 1433 }
1434 #bt { 1434 #bt {
1435 position: relative; 1435 position: relative;
1436 top: -20px; 1436 top: -20px;
1437 left: 115px; 1437 left: 115px;
1438 } 1438 }
1439 #e { 1439 #e {
1440 position: relative; 1440 position: relative;
1441 top: 5px; 1441 top: 5px;
1442 right: -30px; 1442 right: -30px;
1443 height: 17px; 1443 height: 17px;
1444 cursor: pointer; 1444 cursor: pointer;
1445 } 1445 }
1446 #d { 1446 #d {
1447 position: relative; 1447 position: relative;
1448 top: 5px; 1448 top: 5px;
1449 right: -70px; 1449 right: -70px;
1450 height: 17px; 1450 height: 17px;
1451 cursor: pointer; 1451 cursor: pointer;
1452 } 1452 }
1453 #td { 1453 #td {
1454 border: 1px solid #dddddd; 1454 border: 1px solid #dddddd;
1455 text-align: left; 1455 text-align: left;
1456 padding: 8px; 1456 padding: 8px;
1457 } 1457 }
1458 #dialog { 1458 #dialog {
1459 height: 550px; 1459 height: 550px;
1460 } 1460 }
1461 .active { 1461 .active {
1462 background-color: black; 1462 background-color: black;
1463 color: white !important; 1463 color: white !important;
1464 } 1464 }
1465 .activebtn { 1465 .activebtn {
1466 color: black !important; 1466 color: black !important;
1467 } 1467 }
1468 #flex { 1468 #flex {
1469 height: 300px; 1469 height: 300px;
1470 } 1470 }
1471 .v-tabs__item a { 1471 .v-tabs__item a {
1472 font-size: 16px !important; 1472 font-size: 16px !important;
1473 } 1473 }
1474 @media screen and (max-width: 769px) { 1474 @media screen and (max-width: 769px) {
1475 .top { 1475 .top {
1476 margin-top: 0 !important; 1476 margin-top: 0 !important;
1477 } 1477 }
1478 .userSearch .v-icon { 1478 .userSearch .v-icon {
1479 font-size: 20px !important; 1479 font-size: 20px !important;
1480 margin-left: 20px; 1480 margin-left: 20px;
1481 } 1481 }
1482 } 1482 }
1483
1483 @media screen and (max-width: 380px) { 1484 @media screen and (max-width: 380px) {
1485 .pl-3 {
1486 padding-left: 0px !important;
1487 }
1484 .right { 1488 .right {
1485 float: none !important; 1489 float: none !important;
1486 } 1490 }
1487 .subheading { 1491 .subheading {
1488 font-size: 14px !important; 1492 font-size: 14px !important;
1489 } 1493 }
1490 .v-card__actions .v-btn { 1494 .v-card__actions .v-btn {
1491 margin: 0 0px; 1495 margin: 0 0px;
1492 min-width: 100px; 1496 min-width: 100px;
1493 } 1497 }
1498 .presentInput{
1499 padding-left:48px !important;
1500 }
1494 /* .searchIcon .v-icon { 1501 /* .searchIcon .v-icon {
1495 font-size: 20px; 1502 font-size: 20px;
1496 margin-left: 20px; 1503 margin-left: 20px;
1497 } */ 1504 } */
1498 .subheading { 1505 .subheading {
1499 font-size: 12px !important; 1506 font-size: 12px !important;
1500 } 1507 }
1501 h5 { 1508 h5 {
1502 font-size: 13px; 1509 font-size: 13px;
1503 } 1510 }
1511 .pl-4{
1512 padding-left: 0px !important;
1513
1514 }
1504 } 1515 }
1505 .v-icon { 1516 .v-icon {
1506 font-size: 30px; 1517 font-size: 30px;
1507 } 1518 }
1508 @media screen and (min-width: 1270px) { 1519 @media screen and (min-width: 1270px) {
1509 .hide { 1520 .hide {
1510 display: none; 1521 display: none;
1511 } 1522 }
1512 /* } 1523 /* }
1513 @media screen and (max-width: 962px) { 1524 @media screen and (max-width: 962px) {
1514 .imglogo{ 1525 .imglogo{
1515 position: absolute; 1526 position: absolute;
1516 top: 13px; 1527 top: 13px;
1517 left: 13px !important; 1528 left: 13px !important;
1518 width: 70px; 1529 width: 70px;
1519 height: 24px; 1530 height: 24px;
1520 } */ 1531 } */
1521 } 1532 }
1522 @media screen and (max-width: 420px) { 1533 @media screen and (max-width: 420px) {
1523 .userSearch .v-text-field .v-label { 1534 .userSearch .v-text-field .v-label {
1524 line-height: 24px !important; 1535 line-height: 24px !important;
1525 } 1536 }
1526 .userSearch .v-label { 1537 .userSearch .v-label {
1527 font-size: 13px !important; 1538 font-size: 13px !important;
1528 } 1539 }
1529 .v-list__tile { 1540 .v-list__tile {
1530 font-size: 14px; 1541 font-size: 14px;
1531 padding: 0 10px; 1542 padding: 0 10px;
1532 } 1543 }
1533 .name { 1544 .name {
1534 font-size: 15px; 1545 font-size: 15px;
1535 } 1546 }
1536 } 1547 }
1537 </style> 1548 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @fc82ac6
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** --> 7 <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Time Talbe" 12 label="Find your Time Talbe"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Time Table</v-tab> 54 >Existing Time Table</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Time Table</v-tab> 62 >Add New Time Table</v-tab>
63 63
64 <!-- ****** EDITS TIME-TABLE****** --> 64 <!-- ****** EDITS TIME-TABLE****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Time Table</v-toolbar-title> 79 <v-toolbar-title>Edit Time Table</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">class No:</label> 111 <label class="right">class No:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm5 class="ml-3"> 113 <v-flex xs12 sm5 class="ml-3">
114 <v-select 114 <v-select
115 :items="addclass" 115 :items="addclass"
116 label="Select Class" 116 label="Select Class"
117 v-model="editedItem.classNum" 117 v-model="editedItem.classNum"
118 item-text="classNum" 118 item-text="classNum"
119 item-value="_id" 119 item-value="_id"
120 @change="getSections(editedItem.classNum)" 120 @change="getSections(editedItem.classNum)"
121 ></v-select> 121 ></v-select>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-flex xs12 sm12> 125 <v-flex xs12 sm12>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Section Name:</label> 128 <label class="right">Section Name:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs5 class="ml-3"> 130 <v-flex xs5 class="ml-3">
131 <v-select 131 <v-select
132 :items="addSection" 132 :items="addSection"
133 label="Select Section" 133 label="Select Section"
134 v-model="editedItem.selectSection" 134 v-model="editedItem.selectSection"
135 item-text="name" 135 item-text="name"
136 item-value="_id" 136 item-value="_id"
137 ></v-select> 137 ></v-select>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-flex> 140 </v-flex>
141 <v-layout> 141 <v-layout>
142 <v-flex xs12 sm8 offset-sm2> 142 <v-flex xs12 sm8 offset-sm2>
143 <v-card-actions> 143 <v-card-actions>
144 <v-btn round dark @click.native="close">Cancel</v-btn> 144 <v-btn round dark @click.native="close">Cancel</v-btn>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-btn round dark @click="save">Save</v-btn> 146 <v-btn round dark @click="save">Save</v-btn>
147 </v-card-actions> 147 </v-card-actions>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-container> 150 </v-container>
151 </v-form> 151 </v-form>
152 </v-card> 152 </v-card>
153 </v-flex> 153 </v-flex>
154 </v-dialog> 154 </v-dialog>
155 155
156 <!-- ****** ADD LECTURES TIME-TABLE ****** --> 156 <!-- ****** ADD LECTURES TIME-TABLE ****** -->
157 157
158 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 158 <v-dialog v-model="dialogAddLecture" max-width="1000px">
159 <v-flex xs12 sm12 class> 159 <v-flex xs12 sm12 class>
160 <v-toolbar color="white"> 160 <v-toolbar color="white">
161 <v-spacer></v-spacer> 161 <v-spacer></v-spacer>
162 <v-toolbar-title>Add Lecture</v-toolbar-title> 162 <v-toolbar-title>Add Lecture</v-toolbar-title>
163 <v-spacer></v-spacer> 163 <v-spacer></v-spacer>
164 </v-toolbar> 164 </v-toolbar>
165 <v-card flat> 165 <v-card flat>
166 <v-form ref="form" v-model="valid" lazy-validation> 166 <v-form ref="form" v-model="valid" lazy-validation>
167 <v-container fluid> 167 <v-container fluid>
168 <v-flex xs12 sm12> 168 <v-flex xs12 sm12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right">Subject Name:</label> 171 <label class="right">Subject Name:</label>
172 </v-flex> 172 </v-flex>
173 <v-flex xs5 class="ml-3"> 173 <v-flex xs5 class="ml-3">
174 <v-text-field 174 <v-text-field
175 v-model="addlectures.subjectName" 175 v-model="addlectures.subjectName"
176 :rules="subjectNameRules" 176 :rules="subjectNameRules"
177 placeholder="fill your Subject Name" 177 placeholder="fill your Subject Name"
178 type="text" 178 type="text"
179 ></v-text-field> 179 ></v-text-field>
180 </v-flex> 180 </v-flex>
181 </v-layout> 181 </v-layout>
182 </v-flex> 182 </v-flex>
183 <v-flex xs12 sm12> 183 <v-flex xs12 sm12>
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">Time In:</label> 186 <label class="right">Time In:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs5 class="ml-3"> 188 <v-flex xs5 class="ml-3">
189 <v-text-field 189 <v-text-field
190 v-model="addlectures.timeIn" 190 v-model="addlectures.timeIn"
191 :rules="timeInRules" 191 :rules="timeInRules"
192 placeholder="fill your Time In" 192 placeholder="fill your Time In"
193 type="text" 193 type="text"
194 ></v-text-field> 194 ></v-text-field>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 <v-flex xs12 sm12> 198 <v-flex xs12 sm12>
199 <v-layout> 199 <v-layout>
200 <v-flex xs4 class="pt-4 subheading"> 200 <v-flex xs4 class="pt-4 subheading">
201 <label class="right">Time Out:</label> 201 <label class="right">Time Out:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs5 class="ml-3"> 203 <v-flex xs5 class="ml-3">
204 <v-text-field 204 <v-text-field
205 v-model="addlectures.timeOut" 205 v-model="addlectures.timeOut"
206 :rules="timeOutRules" 206 :rules="timeOutRules"
207 placeholder="fill your Time Out" 207 placeholder="fill your Time Out"
208 type="text" 208 type="text"
209 ></v-text-field> 209 ></v-text-field>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 <v-flex xs12 sm12> 213 <v-flex xs12 sm12>
214 <v-layout> 214 <v-layout>
215 <v-flex xs4 class="pt-4 subheading"> 215 <v-flex xs4 class="pt-4 subheading">
216 <label class="right">Select Teacher:</label> 216 <label class="right">Select Teacher:</label>
217 </v-flex> 217 </v-flex>
218 <v-flex xs5 class="ml-3"> 218 <v-flex xs5 class="ml-3">
219 <v-select 219 <v-select
220 :items="addTeachers" 220 :items="addTeachers"
221 label="Select Teacher" 221 label="Select Teacher"
222 v-model="addlectures.teacherId" 222 v-model="addlectures.teacherId"
223 :rules="subjectNameRules" 223 :rules="subjectNameRules"
224 item-text="name" 224 item-text="name"
225 item-value="_id" 225 item-value="_id"
226 required 226 required
227 ></v-select> 227 ></v-select>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 <v-layout> 231 <v-layout>
232 <v-flex xs12 sm8 offset-sm2> 232 <v-flex xs12 sm8 offset-sm2>
233 <v-card-actions> 233 <v-card-actions>
234 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 234 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
235 <v-spacer></v-spacer> 235 <v-spacer></v-spacer>
236 <!-- <v-btn round dark @click="updateParticularTable">Save</v-btn> --> 236 <!-- <v-btn round dark @click="updateParticularTable">Save</v-btn> -->
237 <v-btn round dark @click="AddLecture">Save</v-btn> 237 <v-btn round dark @click="AddLecture">Save</v-btn>
238 </v-card-actions> 238 </v-card-actions>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-container> 241 </v-container>
242 </v-form> 242 </v-form>
243 </v-card> 243 </v-card>
244 </v-flex> 244 </v-flex>
245 </v-dialog> 245 </v-dialog>
246 246
247 <!-- ****** EDIT LECTURES TIME-TABLE ****** --> 247 <!-- ****** EDIT LECTURES TIME-TABLE ****** -->
248 248
249 <v-dialog v-model="dialogUpdateLectures" max-width="1000px"> 249 <v-dialog v-model="dialogUpdateLectures" max-width="1000px">
250 <v-flex xs12 sm12 class> 250 <v-flex xs12 sm12 class>
251 <v-toolbar color="white"> 251 <v-toolbar color="white">
252 <v-spacer></v-spacer> 252 <v-spacer></v-spacer>
253 <v-toolbar-title>Edit Lecture</v-toolbar-title> 253 <v-toolbar-title>Edit Lecture</v-toolbar-title>
254 <v-spacer></v-spacer> 254 <v-spacer></v-spacer>
255 </v-toolbar> 255 </v-toolbar>
256 <v-card flat> 256 <v-card flat>
257 <v-form ref="form"> 257 <v-form ref="form">
258 <v-container fluid> 258 <v-container fluid>
259 <v-flex xs12 sm12> 259 <v-flex xs12 sm12>
260 <v-layout> 260 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Subject Name:</label> 262 <label class="right">Subject Name:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs5 class="ml-3"> 264 <v-flex xs5 class="ml-3">
265 <v-text-field 265 <v-text-field
266 v-model="updateLectures.subjectName" 266 v-model="updateLectures.subjectName"
267 placeholder="fill your Subject Name" 267 placeholder="fill your Subject Name"
268 type="text" 268 type="text"
269 ></v-text-field> 269 ></v-text-field>
270 </v-flex> 270 </v-flex>
271 </v-layout> 271 </v-layout>
272 </v-flex> 272 </v-flex>
273 <v-flex xs12 sm12> 273 <v-flex xs12 sm12>
274 <v-layout> 274 <v-layout>
275 <v-flex xs4 class="pt-4 subheading"> 275 <v-flex xs4 class="pt-4 subheading">
276 <label class="right">Time In:</label> 276 <label class="right">Time In:</label>
277 </v-flex> 277 </v-flex>
278 <v-flex xs5 class="ml-3"> 278 <v-flex xs5 class="ml-3">
279 <v-text-field 279 <v-text-field
280 v-model="updateLectures.timeIn" 280 v-model="updateLectures.timeIn"
281 placeholder="fill your Time In" 281 placeholder="fill your Time In"
282 type="text" 282 type="text"
283 ></v-text-field> 283 ></v-text-field>
284 </v-flex> 284 </v-flex>
285 </v-layout> 285 </v-layout>
286 </v-flex> 286 </v-flex>
287 <v-flex xs12 sm12> 287 <v-flex xs12 sm12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Time Out:</label> 290 <label class="right">Time Out:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs5 class="ml-3"> 292 <v-flex xs5 class="ml-3">
293 <v-text-field 293 <v-text-field
294 v-model="updateLectures.timeOut" 294 v-model="updateLectures.timeOut"
295 placeholder="fill your Time Out" 295 placeholder="fill your Time Out"
296 type="text" 296 type="text"
297 ></v-text-field> 297 ></v-text-field>
298 </v-flex> 298 </v-flex>
299 </v-layout> 299 </v-layout>
300 </v-flex> 300 </v-flex>
301 <v-flex xs12 sm12> 301 <v-flex xs12 sm12>
302 <v-layout> 302 <v-layout>
303 <v-flex xs4 class="pt-4 subheading"> 303 <v-flex xs4 class="pt-4 subheading">
304 <label class="right">Select Teacher:</label> 304 <label class="right">Select Teacher:</label>
305 </v-flex> 305 </v-flex>
306 <v-flex xs5 class="ml-3"> 306 <v-flex xs5 class="ml-3">
307 <v-select 307 <v-select
308 :items="addTeachers" 308 :items="addTeachers"
309 label="Select Teacher" 309 label="Select Teacher"
310 v-model="updateLectures.teacherId" 310 v-model="updateLectures.teacherId"
311 item-text="name" 311 item-text="name"
312 item-value="_id" 312 item-value="_id"
313 required 313 required
314 ></v-select> 314 ></v-select>
315 </v-flex> 315 </v-flex>
316 </v-layout> 316 </v-layout>
317 </v-flex> 317 </v-flex>
318 <v-layout> 318 <v-layout>
319 <v-flex xs12 sm8 offset-sm2> 319 <v-flex xs12 sm8 offset-sm2>
320 <v-card-actions> 320 <v-card-actions>
321 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 321 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
322 <v-spacer></v-spacer> 322 <v-spacer></v-spacer>
323 <v-btn round dark @click="updateParticularTable">Save</v-btn> 323 <v-btn round dark @click="updateParticularTable">Save</v-btn>
324 </v-card-actions> 324 </v-card-actions>
325 </v-flex> 325 </v-flex>
326 </v-layout> 326 </v-layout>
327 </v-container> 327 </v-container>
328 </v-form> 328 </v-form>
329 </v-card> 329 </v-card>
330 </v-flex> 330 </v-flex>
331 </v-dialog> 331 </v-dialog>
332 332
333 <v-snackbar 333 <v-snackbar
334 :timeout="timeout" 334 :timeout="timeout"
335 :top="y === 'top'" 335 :top="y === 'top'"
336 :right="x === 'right'" 336 :right="x === 'right'"
337 :vertical="mode === 'vertical'" 337 :vertical="mode === 'vertical'"
338 v-model="snackbar" 338 v-model="snackbar"
339 color="success" 339 color="success"
340 >{{ text }}</v-snackbar> 340 >{{ text }}</v-snackbar>
341 341
342 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 342 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
343 <v-flex xs12> 343 <v-flex xs12>
344 <v-data-table 344 <v-data-table
345 :headers="headers" 345 :headers="headers"
346 :items="desserts" 346 :items="desserts"
347 :pagination.sync="pagination" 347 :pagination.sync="pagination"
348 :search="search" 348 :search="search"
349 item-key="_id" 349 item-key="_id"
350 > 350 >
351 <template slot="items" slot-scope="props"> 351 <template slot="items" slot-scope="props">
352 <tr 352 <tr
353 style="cursor: pointer;" 353 style="cursor: pointer;"
354 @click="getTimeTable(props.item), props.expanded = !props.expanded" 354 @click="getTimeTable(props.item), props.expanded = !props.expanded"
355 > 355 >
356 <td class="text-xs-center">{{ props.index }}</td> 356 <td class="text-xs-center">{{ props.index }}</td>
357 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 357 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
358 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 358 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
359 <td class="text-xs-center"> 359 <td class="text-xs-center">
360 <span> 360 <span>
361 <img 361 <img
362 style="cursor:pointer; width:20px; height:18px; " 362 style="cursor:pointer; width:20px; height:18px; "
363 class="mr-5" 363 class="mr-5"
364 @click="editItem(props.item)" 364 @click="editItem(props.item)"
365 src="/static/icon/edit1.png" 365 src="/static/icon/edit1.png"
366 > 366 >
367 <img 367 <img
368 style="cursor:pointer; height:20px; " 368 style="cursor:pointer; height:20px; "
369 class="mr-5" 369 class="mr-5"
370 @click="deleteItem(props.item)" 370 @click="deleteItem(props.item)"
371 src="/static/icon/delete1.png" 371 src="/static/icon/delete1.png"
372 > 372 >
373 </span> 373 </span>
374 </td> 374 </td>
375 </tr> 375 </tr>
376 </template> 376 </template>
377 <template slot="expand" slot-scope="props"> 377 <template slot="expand" slot-scope="props">
378 <v-data-table 378 <v-data-table
379 :items="timeTableList.schedule" 379 :items="timeTableList.schedule"
380 hide-actions 380 hide-actions
381 item-key="title" 381 item-key="title"
382 style="width: auto;" 382 style="width: auto;"
383 > 383 >
384 <template slot="items" slot-scope="props"> 384 <template slot="items" slot-scope="props">
385 <tr> 385 <tr>
386 <td class="text-xs-left subheading"> 386 <td class="text-xs-left subheading">
387 <b>{{ props.item.day }}</b> 387 <b>{{ props.item.day }}</b>
388 </td> 388 </td>
389 <td> 389 <td>
390 <b>Subject</b> 390 <b>Subject</b>
391 <br> 391 <br>
392 <b>Time In</b> 392 <b>Time In</b>
393 <br> 393 <br>
394 <b>Time Out</b> 394 <b>Time Out</b>
395 </td> 395 </td>
396 <td v-for="list in props.item.lectures"> 396 <td v-for="list in props.item.lectures">
397 <b>{{ list.subjectName }}</b> 397 <b>{{ list.subjectName }}</b>
398 <img 398 <img
399 style="cursor:pointer; width:20px; height:18px; " 399 style="cursor:pointer; width:20px; height:18px; "
400 class="mr-2 ml-2" 400 class="mr-2 ml-2"
401 src="/static/icon/edit1.png" 401 src="/static/icon/edit1.png"
402 @click="updateTimeTable(list, timeTableList)" 402 @click="updateTimeTable(list, timeTableList)"
403 > 403 >
404 <img 404 <img
405 style="cursor:pointer; height:20px; " 405 style="cursor:pointer; height:20px; "
406 src="/static/icon/delete1.png" 406 src="/static/icon/delete1.png"
407 @click="deleteTimeTable(list, timeTableList)" 407 @click="deleteTimeTable(list, timeTableList)"
408 > 408 >
409 <br> 409 <br>
410 {{list.timeIn.slice(0,16)}} 410 {{list.timeIn.slice(0,16)}}
411 <br> 411 <br>
412 {{list.timeOut.slice(0,16)}} 412 {{list.timeOut.slice(0,16)}}
413 </td> 413 </td>
414 <td> 414 <td>
415 <v-icon 415 <v-icon
416 color="black" 416 color="black"
417 @click="addLecture(props.item._id, timeTableList._id)" 417 @click="addLecture(props.item._id, timeTableList._id)"
418 >add_circle_outline</v-icon> 418 >add_circle_outline</v-icon>
419 </td> 419 </td>
420 </tr> 420 </tr>
421 </template> 421 </template>
422 </v-data-table> 422 </v-data-table>
423 </template> 423 </template>
424 <v-alert 424 <v-alert
425 slot="no-results" 425 slot="no-results"
426 :value="true" 426 :value="true"
427 color="error" 427 color="error"
428 icon="warning" 428 icon="warning"
429 >Your search for "{{ search }}" found no results.</v-alert> 429 >Your search for "{{ search }}" found no results.</v-alert>
430 </v-data-table> 430 </v-data-table>
431 <br> 431 <br>
432 <br> 432 <br>
433 </v-flex> 433 </v-flex>
434 </v-tab-item> 434 </v-tab-item>
435 435
436 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 436 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
437 437
438 <v-tab-item> 438 <v-tab-item>
439 <v-container> 439 <v-container>
440 <v-snackbar 440 <v-snackbar
441 :timeout="timeout" 441 :timeout="timeout"
442 :top="y === 'top'" 442 :top="y === 'top'"
443 :right="x === 'right'" 443 :right="x === 'right'"
444 :vertical="mode === 'vertical'" 444 :vertical="mode === 'vertical'"
445 v-model="snackbar" 445 v-model="snackbar"
446 color="success" 446 color="success"
447 >{{ text }}</v-snackbar> 447 >{{ text }}</v-snackbar>
448 <v-flex xs12 sm12 class="my-4"> 448 <v-flex xs12 sm12 class="my-4">
449 <v-card flat> 449 <v-card flat>
450 <v-form ref="form" v-model="valid" lazy-validation> 450 <v-form ref="form" v-model="valid" lazy-validation>
451 <v-container fluid> 451 <v-container fluid>
452 <v-layout> 452 <v-layout>
453 <v-flex 453 <v-flex
454 xs12 454 xs12
455 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 455 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
456 > 456 >
457 <v-avatar size="100px"> 457 <v-avatar size="100px">
458 <img src="/static/icon/user.png" v-if="!imageUrl"> 458 <img src="/static/icon/user.png" v-if="!imageUrl">
459 </v-avatar> 459 </v-avatar>
460 <input 460 <input
461 type="file" 461 type="file"
462 style="display: none" 462 style="display: none"
463 ref="image" 463 ref="image"
464 accept="image/*" 464 accept="image/*"
465 @change="onFilePicked" 465 @change="onFilePicked"
466 > 466 >
467 <img 467 <img
468 :src="imageData.imageUrl" 468 :src="imageData.imageUrl"
469 height="150" 469 height="150"
470 v-if="imageUrl" 470 v-if="imageUrl"
471 style="border-radius:50%; width:200px" 471 style="border-radius:50%; width:200px"
472 > 472 >
473 </v-flex> 473 </v-flex>
474 </v-layout> 474 </v-layout>
475 <v-flex xs12> 475 <v-flex xs12>
476 <v-layout> 476 <v-layout>
477 <v-flex xs4 class="pt-4 subheading"> 477 <v-flex xs4 class="pt-4 subheading">
478 <label class="right">Select Class:</label> 478 <label class="right">Select Class:</label>
479 </v-flex> 479 </v-flex>
480 <v-flex xs4 class="ml-3"> 480 <v-flex xs4 class="ml-3">
481 <v-select 481 <v-select
482 :items="addclass" 482 :items="addclass"
483 label="Select Class" 483 label="Select Class"
484 v-model="timeTable.select" 484 v-model="timeTable.select"
485 item-text="classNum" 485 item-text="classNum"
486 item-value="_id" 486 item-value="_id"
487 @change="getSections(timeTable.select)" 487 @change="getSections(timeTable.select)"
488 required 488 required
489 ></v-select> 489 ></v-select>
490 </v-flex> 490 </v-flex>
491 </v-layout> 491 </v-layout>
492 </v-flex> 492 </v-flex>
493 <v-flex xs12> 493 <v-flex xs12>
494 <v-layout> 494 <v-layout>
495 <v-flex xs4 class="pt-4 subheading"> 495 <v-flex xs4 class="pt-4 subheading">
496 <label class="right">Select Section:</label> 496 <label class="right">Select Section:</label>
497 </v-flex> 497 </v-flex>
498 <v-flex xs4 class="ml-3"> 498 <v-flex xs4 class="ml-3">
499 <v-select 499 <v-select
500 :items="addSection" 500 :items="addSection"
501 label="Select Section" 501 label="Select Section"
502 v-model="timeTable.selectSection" 502 v-model="timeTable.selectSection"
503 item-text="name" 503 item-text="name"
504 item-value="_id" 504 item-value="_id"
505 required 505 required
506 ></v-select> 506 ></v-select>
507 </v-flex> 507 </v-flex>
508 </v-layout> 508 </v-layout>
509 </v-flex> 509 </v-flex>
510 <v-flex xs12> 510 <v-flex xs12>
511 <v-layout> 511 <v-layout>
512 <v-flex xs4 class="pt-4 subheading"> 512 <v-flex xs4 class="pt-4 subheading">
513 <label class="right">Select Teacher:</label> 513 <label class="right">Select Teacher:</label>
514 </v-flex> 514 </v-flex>
515 <v-flex xs4 class="ml-3"> 515 <v-flex xs4 class="ml-3">
516 <v-select 516 <v-select
517 :items="addTeachers" 517 :items="addTeachers"
518 label="Select Teacher" 518 label="Select Teacher"
519 v-model="timeTable.selectTeacher" 519 v-model="timeTable.selectTeacher"
520 item-text="name" 520 item-text="name"
521 item-value="_id" 521 item-value="_id"
522 required 522 required
523 ></v-select> 523 ></v-select>
524 </v-flex> 524 </v-flex>
525 </v-layout> 525 </v-layout>
526 </v-flex> 526 </v-flex>
527 <v-flex xs12> 527 <v-flex xs12>
528 <v-layout> 528 <v-layout>
529 <v-flex xs4 class="pt-4 subheading"> 529 <v-flex xs4 class="pt-4 subheading">
530 <label class="right">Select Day:</label> 530 <label class="right">Select Day:</label>
531 </v-flex> 531 </v-flex>
532 <v-flex xs4 class="ml-3"> 532 <v-flex xs4 class="ml-3">
533 <v-select 533 <v-select
534 :items="addOneDay" 534 :items="addOneDay"
535 label="Select Day" 535 label="Select Day"
536 v-model="timeTable.selectDay" 536 v-model="timeTable.selectDay"
537 item-text="name" 537 item-text="name"
538 item-value="_id" 538 item-value="_id"
539 required 539 required
540 ></v-select> 540 ></v-select>
541 </v-flex> 541 </v-flex>
542 </v-layout> 542 </v-layout>
543 </v-flex> 543 </v-flex>
544 <v-flex xs12> 544 <v-flex xs12>
545 <v-layout> 545 <v-layout>
546 <v-flex xs4 class="pt-4 subheading"> 546 <v-flex xs4 class="pt-4 subheading">
547 <label class="right">Time In:</label> 547 <label class="right">Time In:</label>
548 </v-flex> 548 </v-flex>
549 <v-flex xs4 class="ml-3"> 549 <v-flex xs4 class="ml-3">
550 <v-text-field 550 <v-text-field
551 v-model="timeTable.timeIn" 551 v-model="timeTable.timeIn"
552 placeholder="fill your Time In" 552 placeholder="fill your Time In"
553 type="text" 553 type="text"
554 :rules="timeInRules" 554 :rules="timeInRules"
555 required 555 required
556 ></v-text-field> 556 ></v-text-field>
557 </v-flex> 557 </v-flex>
558 </v-layout> 558 </v-layout>
559 </v-flex> 559 </v-flex>
560 <v-flex xs12> 560 <v-flex xs12>
561 <v-layout> 561 <v-layout>
562 <v-flex xs4 class="pt-4 subheading"> 562 <v-flex xs4 class="pt-4 subheading">
563 <label class="right">Time Out:</label> 563 <label class="right">Time Out:</label>
564 </v-flex> 564 </v-flex>
565 <v-flex xs4 class="ml-3"> 565 <v-flex xs4 class="ml-3">
566 <v-text-field 566 <v-text-field
567 placeholder="fill your Time Out" 567 placeholder="fill your Time Out"
568 :rules="timeOutRules" 568 :rules="timeOutRules"
569 v-model="timeTable.timeOut" 569 v-model="timeTable.timeOut"
570 type="text" 570 type="text"
571 required 571 required
572 ></v-text-field> 572 ></v-text-field>
573 </v-flex> 573 </v-flex>
574 </v-layout> 574 </v-layout>
575 </v-flex> 575 </v-flex>
576 <v-flex xs12> 576 <v-flex xs12>
577 <v-layout> 577 <v-layout>
578 <v-flex xs4 class="pt-4 subheading"> 578 <v-flex xs4 class="pt-4 subheading">
579 <label class="right">Lecture No:</label> 579 <label class="right">Lecture No:</label>
580 </v-flex> 580 </v-flex>
581 <v-flex xs4 class="ml-3"> 581 <v-flex xs4 class="ml-3">
582 <v-text-field 582 <v-text-field
583 placeholder="fill your Lecture No" 583 placeholder="fill your Lecture No"
584 :rules="lectureRules" 584 :rules="lectureRules"
585 v-model="timeTable.lectureNum" 585 v-model="timeTable.lectureNum"
586 type="number" 586 type="number"
587 required 587 required
588 ></v-text-field> 588 ></v-text-field>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 </v-flex> 591 </v-flex>
592 <v-flex xs12> 592 <v-flex xs12>
593 <v-layout> 593 <v-layout>
594 <v-flex xs4 class="pt-4 subheading"> 594 <v-flex xs4 class="pt-4 subheading">
595 <label class="right">Subject Name:</label> 595 <label class="right">Subject Name:</label>
596 </v-flex> 596 </v-flex>
597 <v-flex xs4 class="ml-3"> 597 <v-flex xs4 class="ml-3">
598 <v-text-field 598 <v-text-field
599 placeholder="fill your Subject Name" 599 placeholder="fill your Subject Name"
600 :rules="subjectNameRules" 600 :rules="subjectNameRules"
601 v-model="timeTable.subjectName" 601 v-model="timeTable.subjectName"
602 type="text" 602 type="text"
603 required 603 required
604 ></v-text-field> 604 ></v-text-field>
605 </v-flex> 605 </v-flex>
606 </v-layout> 606 </v-layout>
607 </v-flex> 607 </v-flex>
608 <v-layout> 608 <v-layout>
609 <v-flex xs12 sm6 offset-sm3> 609 <v-flex xs12 sm6 offset-sm3>
610 <v-card-actions> 610 <v-card-actions>
611 <v-btn @click="clear" round dark>clear</v-btn> 611 <v-btn @click="clear" round dark>clear</v-btn>
612 <v-spacer></v-spacer> 612 <v-spacer></v-spacer>
613 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 613 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
614 </v-card-actions> 614 </v-card-actions>
615 </v-flex> 615 </v-flex>
616 </v-layout> 616 </v-layout>
617 </v-container> 617 </v-container>
618 </v-form> 618 </v-form>
619 </v-card> 619 </v-card>
620 </v-flex> 620 </v-flex>
621 </v-container> 621 </v-container>
622 </v-tab-item> 622 </v-tab-item>
623 </v-tabs> 623 </v-tabs>
624 <div class="loader" v-if="showLoader"> 624 <div class="loader" v-if="showLoader">
625 <v-progress-circular indeterminate color="white"></v-progress-circular> 625 <v-progress-circular indeterminate color="white"></v-progress-circular>
626 </div> 626 </div>
627 </v-app> 627 </v-app>
628 </template> 628 </template>
629 629
630 <script> 630 <script>
631 import http from "@/Services/http.js"; 631 import http from "@/Services/http.js";
632 import Util from "@/util"; 632 import Util from "@/util";
633 633
634 export default { 634 export default {
635 data: () => ({ 635 data: () => ({
636 y: "top", 636 y: "top",
637 x: "right", 637 x: "right",
638 mode: "", 638 mode: "",
639 timeout: 3000, 639 timeout: 3000,
640 text: "", 640 text: "",
641 search: "", 641 search: "",
642 snackbar: false, 642 snackbar: false,
643 loading: false, 643 loading: false,
644 showLoader: false, 644 showLoader: false,
645 dialog: false, 645 dialog: false,
646 dialogAddLecture: false, 646 dialogAddLecture: false,
647 dialogUpdateLectures: false, 647 dialogUpdateLectures: false,
648 dialog1: false, 648 dialog1: false,
649 valid: true, 649 valid: true,
650 // validLeacture:true, 650 // validLeacture:true,
651 isActive: true, 651 isActive: true,
652 newActive: false, 652 newActive: false,
653 addclass: [], 653 addclass: [],
654 addSection: [], 654 addSection: [],
655 addTeachers: [], 655 addTeachers: [],
656 gender: ["Male", "Female"], 656 gender: ["Male", "Female"],
657 AddUsercredentials: {}, 657 AddUsercredentials: {},
658 pagination: { 658 pagination: {
659 rowsPerPage: 15 659 rowsPerPage: 15
660 }, 660 },
661 imageData: {}, 661 imageData: {},
662 imageName: "", 662 imageName: "",
663 imageUrl: "", 663 imageUrl: "",
664 imageFile: "", 664 imageFile: "",
665 timeInRules: [v => !!v || "Time In is required"], 665 timeInRules: [v => !!v || "Time In is required"],
666 timeOutRules: [v => !!v || "Time Out is required"], 666 timeOutRules: [v => !!v || "Time Out is required"],
667 lectureRules: [v => !!v || "Lecture No is required"], 667 lectureRules: [v => !!v || "Lecture No is required"],
668 subjectNameRules: [v => !!v || "Subject Name is required"], 668 subjectNameRules: [v => !!v || "Subject Name is required"],
669 headers: [ 669 headers: [
670 { 670 {
671 text: "No", 671 text: "No",
672 align: "center", 672 align: "center",
673 sortable: false, 673 sortable: false,
674 value: "No" 674 value: "No"
675 }, 675 },
676 { 676 {
677 text: "Class Name", 677 text: "Class Name",
678 value: "classData.classNum", 678 value: "classData.classNum",
679 sortable: false, 679 sortable: false,
680 align: "center" 680 align: "center"
681 }, 681 },
682 { 682 {
683 text: "Section Name", 683 text: "Section Name",
684 value: "sectionData.name", 684 value: "sectionData.name",
685 sortable: false, 685 sortable: false,
686 align: "center" 686 align: "center"
687 }, 687 },
688 { text: "Action", value: "", sortable: false, align: "center" } 688 { text: "Action", value: "", sortable: false, align: "center" }
689 ], 689 ],
690 daysHeaders: [ 690 daysHeaders: [
691 { text: "Day", value: "dayday", sortable: false, align: "center" }, 691 { text: "Day", value: "dayday", sortable: false, align: "center" },
692 { 692 {
693 text: "Subject Name", 693 text: "Subject Name",
694 value: "subjectName", 694 value: "subjectName",
695 sortable: false, 695 sortable: false,
696 align: "center" 696 align: "center"
697 }, 697 },
698 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 698 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
699 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 699 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
700 ], 700 ],
701 addOneDay: [ 701 addOneDay: [
702 "Monday", 702 "Monday",
703 "Tuesday", 703 "Tuesday",
704 "Wednesday", 704 "Wednesday",
705 "Thursday", 705 "Thursday",
706 "Friday", 706 "Friday",
707 "Saturday", 707 "Saturday",
708 "Sunday" 708 "Sunday"
709 ], 709 ],
710 desserts: [], 710 desserts: [],
711 timeTableList: [], 711 timeTableList: [],
712 editedIndex: -1, 712 editedIndex: -1,
713 timeTable: { 713 timeTable: {
714 select: "", 714 select: "",
715 selectSection: "", 715 selectSection: "",
716 selectDay: "", 716 selectDay: "",
717 timeIn: "", 717 timeIn: "",
718 timeOut: "", 718 timeOut: "",
719 lectureNum: "", 719 lectureNum: "",
720 subjectName: "", 720 subjectName: "",
721 selectTeacher: "" 721 selectTeacher: ""
722 }, 722 },
723 editedItem: { 723 editedItem: {
724 classNum: "", 724 classNum: "",
725 selectSection: "" 725 selectSection: ""
726 }, 726 },
727 addlectures: { 727 addlectures: {
728 timeIn: "", 728 timeIn: "",
729 timeOut: "", 729 timeOut: "",
730 subjectName: "", 730 subjectName: "",
731 teacherId: "", 731 teacherId: "",
732 scheduleId: "", 732 scheduleId: "",
733 timeTableId: "" 733 timeTableId: ""
734 }, 734 },
735 updateLectures: { 735 updateLectures: {
736 timeIn: "", 736 timeIn: "",
737 timeOut: "", 737 timeOut: "",
738 subjectName: "", 738 subjectName: "",
739 teacherId: "", 739 teacherId: "",
740 lectureId: "", 740 lectureId: "",
741 scheduleId: "" 741 scheduleId: ""
742 }, 742 },
743 items: [ 743 items: [
744 { 744 {
745 href: "/changepassword", 745 href: "/changepassword",
746 title: "Change Password", 746 title: "Change Password",
747 click: e => { 747 click: e => {
748 console.log(e); 748 console.log(e);
749 } 749 }
750 }, 750 },
751 { 751 {
752 href: "#", 752 href: "#",
753 title: "Logout", 753 title: "Logout",
754 click: e => { 754 click: e => {
755 window.getApp.$emit("APP_LOGOUT"); 755 window.getApp.$emit("APP_LOGOUT");
756 } 756 }
757 } 757 }
758 ] 758 ]
759 }), 759 }),
760 methods: { 760 methods: {
761 getSections(_id) { 761 getSections(_id) {
762 var token = this.$store.state.token; 762 var token = this.$store.state.token;
763 http() 763 http()
764 .get( 764 .get(
765 "/getSectionsList", 765 "/getSectionsList",
766 { params: { classId: _id } }, 766 { params: { classId: _id } },
767 { 767 {
768 headers: { Authorization: "Bearer " + token } 768 headers: { Authorization: "Bearer " + token }
769 } 769 }
770 ) 770 )
771 .then(response => { 771 .then(response => {
772 this.addSection = response.data.data; 772 this.addSection = response.data.data;
773 // console.log("getSectionsList=====>", this.addSection); 773 // console.log("getSectionsList=====>", this.addSection);
774 }) 774 })
775 .catch(err => { 775 .catch(err => {
776 // console.log("err====>", err); 776 // console.log("err====>", err);
777 }); 777 });
778 }, 778 },
779 getTimeTable(item) { 779 getTimeTable(item) {
780 this.showLoader = true; 780 this.showLoader = true;
781 var token = this.$store.state.token; 781 var token = this.$store.state.token;
782 http() 782 http()
783 .get( 783 .get(
784 "/getParticularTimeTable", 784 "/getParticularTimeTable",
785 { params: { timeTableId: item._id } }, 785 { params: { timeTableId: item._id } },
786 { 786 {
787 headers: { Authorization: "Bearer " + token } 787 headers: { Authorization: "Bearer " + token }
788 } 788 }
789 ) 789 )
790 .then(response => { 790 .then(response => {
791 this.timeTableList = response.data.data; 791 this.timeTableList = response.data.data;
792 this.showLoader = false; 792 this.showLoader = false;
793 // console.log("getParticularTimeTable=====>", this.timeTableList); 793 // console.log("getParticularTimeTable=====>", this.timeTableList);
794 }) 794 })
795 .catch(err => { 795 .catch(err => {
796 this.showLoader = false; 796 this.showLoader = false;
797 // console.log("err====>", err); 797 // console.log("err====>", err);
798 }); 798 });
799 }, 799 },
800 pickFile() { 800 pickFile() {
801 this.$refs.image.click(); 801 this.$refs.image.click();
802 }, 802 },
803 803
804 onFilePicked(e) { 804 onFilePicked(e) {
805 // console.log(e) 805 // console.log(e)
806 const files = e.target.files; 806 const files = e.target.files;
807 this.imageData.upload = e.target.files[0]; 807 this.imageData.upload = e.target.files[0];
808 if (files[0] !== undefined) { 808 if (files[0] !== undefined) {
809 this.imageName = files[0].name; 809 this.imageName = files[0].name;
810 if (this.imageName.lastIndexOf(".") <= 0) { 810 if (this.imageName.lastIndexOf(".") <= 0) {
811 return; 811 return;
812 } 812 }
813 const fr = new FileReader(); 813 const fr = new FileReader();
814 fr.readAsDataURL(files[0]); 814 fr.readAsDataURL(files[0]);
815 fr.addEventListener("load", () => { 815 fr.addEventListener("load", () => {
816 this.imageUrl = fr.result; 816 this.imageUrl = fr.result;
817 this.imageFile = files[0]; // this is an image file that can be sent to server... 817 this.imageFile = files[0]; // this is an image file that can be sent to server...
818 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 818 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
819 // console.log("upload=======>", this.imageData.imageUrl); 819 // console.log("upload=======>", this.imageData.imageUrl);
820 // console.log("imageFile", this.imageFile); 820 // console.log("imageFile", this.imageFile);
821 }); 821 });
822 } else { 822 } else {
823 this.imageName = ""; 823 this.imageName = "";
824 this.imageFile = ""; 824 this.imageFile = "";
825 this.imageUrl = ""; 825 this.imageUrl = "";
826 } 826 }
827 }, 827 },
828 getTimeTableList() { 828 getTimeTableList() {
829 this.showLoader = true; 829 this.showLoader = true;
830 var token = this.$store.state.token; 830 var token = this.$store.state.token;
831 http() 831 http()
832 .get("/getTimeTablesList", { 832 .get("/getTimeTablesList", {
833 headers: { Authorization: "Bearer " + token } 833 headers: { Authorization: "Bearer " + token }
834 }) 834 })
835 .then(response => { 835 .then(response => {
836 this.desserts = response.data.data; 836 this.desserts = response.data.data;
837 this.showLoader = false; 837 this.showLoader = false;
838 // console.log("getTimeTableList=====>", response.data.data); 838 // console.log("getTimeTableList=====>", response.data.data);
839 }) 839 })
840 .catch(err => { 840 .catch(err => {
841 // console.log("err====>", err); 841 // console.log("err====>", err);
842 this.showLoader = false; 842 this.showLoader = false;
843 this.$router.replace({ path: "/" }); 843 this.$router.replace({ path: "/" });
844 }); 844 });
845 }, 845 },
846 editItem(item) { 846 editItem(item) {
847 this.editedIndex = this.desserts.indexOf(item); 847 this.editedIndex = this.desserts.indexOf(item);
848 this.editedItem = Object.assign({}, item); 848 this.editedItem = Object.assign({}, item);
849 this.dialog = true; 849 this.dialog = true;
850 }, 850 },
851 updateTimeTable(timeToUpdate, classToUpdate) { 851 updateTimeTable(timeToUpdate, classToUpdate) {
852 console.log( 852 console.log(
853 "timeToUpdate, classToUpdate", 853 "timeToUpdate, classToUpdate",
854 timeToUpdate._id, 854 timeToUpdate._id,
855 classToUpdate.schedule 855 classToUpdate.schedule
856 ); 856 );
857 for (let i = 0; i < classToUpdate.schedule.length; i++) { 857 for (let i = 0; i < classToUpdate.schedule.length; i++) {
858 this.updateLectures.scheduleId = classToUpdate.schedule[i]._id; 858 this.updateLectures.scheduleId = classToUpdate.schedule[i]._id;
859 } 859 }
860 (this.updateLectures.lectureId = timeToUpdate._id), 860 (this.updateLectures.lectureId = timeToUpdate._id),
861 (this.updateLectures = timeToUpdate); 861 (this.updateLectures = timeToUpdate);
862 this.dialogUpdateLectures = true; 862 this.dialogUpdateLectures = true;
863 }, 863 },
864 addLecture(scheduleId, timeTableId) { 864 addLecture(scheduleId, timeTableId) {
865 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId); 865 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId);
866 this.addlectures.scheduleId = scheduleId; 866 this.addlectures.scheduleId = scheduleId;
867 this.addlectures.timeTableId = timeTableId; 867 this.addlectures.timeTableId = timeTableId;
868 this.dialogAddLecture = true; 868 this.dialogAddLecture = true;
869 }, 869 },
870 AddLecture() { 870 AddLecture() {
871 if (this.$refs.form.validate()) { 871 if (this.$refs.form.validate()) {
872 http() 872 http()
873 .post("/addLecture", this.addlectures) 873 .post("/addLecture", this.addlectures)
874 .then(response => { 874 .then(response => {
875 // console.log("addTimeTable=====>", this.addlectures); 875 // console.log("addTimeTable=====>", this.addlectures);
876 if ((this.snackbar = true)) { 876 if ((this.snackbar = true)) {
877 this.text = "New Add Lecture successfully"; 877 this.text = "New Add Lecture successfully";
878 } 878 }
879 this.closedialogLecture(); 879 this.closedialogLecture();
880 }) 880 })
881 .catch(error => { 881 .catch(error => {
882 if ((this.snackbar = true)) { 882 if ((this.snackbar = true)) {
883 this.text = error.response.data.message; 883 this.text = error.response.data.message;
884 } 884 }
885 }); 885 });
886 } 886 }
887 }, 887 },
888 updateParticularTable() { 888 updateParticularTable() {
889 let EditLecture = { 889 let EditLecture = {
890 lectureId: this.updateLectures.lectureId, 890 lectureId: this.updateLectures.lectureId,
891 scheduleId: this.updateLectures.scheduleId, 891 scheduleId: this.updateLectures.scheduleId,
892 updatedLecture: { 892 updatedLecture: {
893 timeIn: this.updateLectures.timeIn, 893 timeIn: this.updateLectures.timeIn,
894 timeOut: this.updateLectures.timeOut, 894 timeOut: this.updateLectures.timeOut,
895 subjectName: this.updateLectures.subjectName, 895 subjectName: this.updateLectures.subjectName,
896 teacherId: this.updateLectures.teacherId 896 teacherId: this.updateLectures.teacherId
897 } 897 }
898 }; 898 };
899 console.log("updateLecture", EditLecture); 899 console.log("updateLecture", EditLecture);
900 http() 900 http()
901 .put("/updateLecture", EditLecture) 901 .put("/updateLecture", EditLecture)
902 .then(response => { 902 .then(response => {
903 console.log("updateLecture", EditLecture); 903 console.log("updateLecture", EditLecture);
904 if ((this.snackbar = true)) { 904 if ((this.snackbar = true)) {
905 this.text = "Successfully Edit Update Lecture"; 905 this.text = "Successfully Edit Update Lecture";
906 } 906 }
907 this.$router.go(0); 907 this.$router.go(0);
908 }) 908 })
909 .catch(error => { 909 .catch(error => {
910 // console.log(error); 910 // console.log(error);
911 }); 911 });
912 this.closeUpdateLectures(); 912 this.closeUpdateLectures();
913 }, 913 },
914 deleteItem(item) { 914 deleteItem(item) {
915 let deleteTimeTable = { 915 let deleteTimeTable = {
916 timeTableId: item._id 916 timeTableId: item._id
917 }; 917 };
918 http() 918 http()
919 .delete( 919 .delete(
920 "/deleteTimeTable", 920 "/deleteTimeTable",
921 confirm("Are you sure you want to delete this?") && { 921 confirm("Are you sure you want to delete this?") && {
922 params: deleteTimeTable 922 params: deleteTimeTable
923 } 923 }
924 ) 924 )
925 .then(response => { 925 .then(response => {
926 // console.log("deleteUers",deleteTimeTable) 926 // console.log("deleteUers",deleteTimeTable)
927 if ((this.snackbar = true)) { 927 if ((this.snackbar = true)) {
928 this.text = "Successfully delete Existing User"; 928 this.text = "Successfully delete Existing User";
929 } 929 }
930 this.getTimeTableList(); 930 this.getTimeTableList();
931 }) 931 })
932 .catch(error => { 932 .catch(error => {
933 // console.log(error); 933 // console.log(error);
934 }); 934 });
935 }, 935 },
936 activeTab(type) { 936 activeTab(type) {
937 switch (type) { 937 switch (type) {
938 case "existing": 938 case "existing":
939 this.newActive = false; 939 this.newActive = false;
940 this.isActive = true; 940 this.isActive = true;
941 break; 941 break;
942 942
943 default: 943 default:
944 this.newActive = true; 944 this.newActive = true;
945 this.isActive = false; 945 this.isActive = false;
946 break; 946 break;
947 } 947 }
948 }, 948 },
949 close() { 949 close() {
950 this.dialog = false; 950 this.dialog = false;
951 setTimeout(() => { 951 setTimeout(() => {
952 this.editedItem = Object.assign({}, this.defaultItem); 952 this.editedItem = Object.assign({}, this.defaultItem);
953 this.editedIndex = -1; 953 this.editedIndex = -1;
954 }, 300); 954 }, 300);
955 }, 955 },
956 close1() { 956 close1() {
957 this.dialog1 = false; 957 this.dialog1 = false;
958 }, 958 },
959 closedialogLecture() { 959 closedialogLecture() {
960 this.dialogAddLecture = false; 960 this.dialogAddLecture = false;
961 this.$router.go(0); 961 this.$router.go(0);
962 }, 962 },
963 closeUpdateLectures() { 963 closeUpdateLectures() {
964 this.dialogUpdateLectures = false; 964 this.dialogUpdateLectures = false;
965 }, 965 },
966 submit() { 966 submit() {
967 if (this.$refs.form.validate()) { 967 if (this.$refs.form.validate()) {
968 let imageData = new FormData(); 968 let imageData = new FormData();
969 imageData.append("upload", this.imageFile); 969 imageData.append("upload", this.imageFile);
970 // console.log(imageData); 970 // console.log(imageData);
971 let addTimeTable = { 971 let addTimeTable = {
972 sectionId: this.timeTable.selectSection, 972 sectionId: this.timeTable.selectSection,
973 classId: this.timeTable.select, 973 classId: this.timeTable.select,
974 schedule: [ 974 schedule: [
975 { 975 {
976 day: this.timeTable.selectDay, 976 day: this.timeTable.selectDay,
977 lectures: [ 977 lectures: [
978 { 978 {
979 timeIn: this.timeTable.timeIn, 979 timeIn: this.timeTable.timeIn,
980 timeOut: this.timeTable.timeOut, 980 timeOut: this.timeTable.timeOut,
981 lectureNum: this.timeTable.lectureNum, 981 lectureNum: this.timeTable.lectureNum,
982 subjectName: this.timeTable.subjectName, 982 subjectName: this.timeTable.subjectName,
983 teacherId: this.timeTable.selectTeacher 983 teacherId: this.timeTable.selectTeacher
984 } 984 }
985 ] 985 ]
986 } 986 }
987 ] 987 ]
988 }; 988 };
989 http() 989 http()
990 .post("/createTimeTable", addTimeTable) 990 .post("/createTimeTable", addTimeTable)
991 .then(response => { 991 .then(response => {
992 // console.log("addTimeTable=====>", addTimeTable); 992 // console.log("addTimeTable=====>", addTimeTable);
993 if ((this.snackbar = true)) { 993 if ((this.snackbar = true)) {
994 this.text = "New Time Table added successfully"; 994 this.text = "New Time Table added successfully";
995 } 995 }
996 this.getTimeTableList(); 996 this.getTimeTableList();
997 this.clear(); 997 this.clear();
998 }) 998 })
999 .catch(error => { 999 .catch(error => {
1000 // console.log(error); 1000 // console.log(error);
1001 if ((this.snackbar = true)) { 1001 if ((this.snackbar = true)) {
1002 this.text = error.response.data.message; 1002 this.text = error.response.data.message;
1003 } 1003 }
1004 }); 1004 });
1005 } 1005 }
1006 }, 1006 },
1007 mail() {}, 1007 mail() {},
1008 download() {}, 1008 download() {},
1009 clear() { 1009 clear() {
1010 this.$refs.form.reset(); 1010 this.$refs.form.reset();
1011 }, 1011 },
1012 save() { 1012 save() {
1013 let imageData = new FormData(); 1013 let imageData = new FormData();
1014 imageData.append("upload", this.imageFile); 1014 imageData.append("upload", this.imageFile);
1015 // console.log(imageData); 1015 // console.log(imageData);
1016 let editTimeTable = { 1016 let editTimeTable = {
1017 timeTableId: this.editedItem._id, 1017 timeTableId: this.editedItem._id,
1018 classId: this.editedItem.classNum, 1018 classId: this.editedItem.classNum,
1019 sectionId: this.editedItem.selectSection 1019 sectionId: this.editedItem.selectSection
1020 // imageData 1020 // imageData
1021 }; 1021 };
1022 http() 1022 http()
1023 .put("/updateTimeTable", editTimeTable) 1023 .put("/updateTimeTable", editTimeTable)
1024 .then(response => { 1024 .then(response => {
1025 console.log("editTimeTable", editTimeTable); 1025 console.log("editTimeTable", editTimeTable);
1026 if ((this.snackbar = true)) { 1026 if ((this.snackbar = true)) {
1027 this.text = "Successfully Edit Existing User"; 1027 this.text = "Successfully Edit Existing User";
1028 } 1028 }
1029 this.getTimeTableList(); 1029 this.getTimeTableList();
1030 }) 1030 })
1031 .catch(error => { 1031 .catch(error => {
1032 // console.log(error); 1032 // console.log(error);
1033 }); 1033 });
1034 this.close(); 1034 this.close();
1035 }, 1035 },
1036 handleDrawerToggle() { 1036 handleDrawerToggle() {
1037 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1037 window.getApp.$emit("APP_DRAWER_TOGGLED");
1038 }, 1038 },
1039 handleFullScreen() { 1039 handleFullScreen() {
1040 Util.toggleFullScreen(); 1040 Util.toggleFullScreen();
1041 }, 1041 },
1042 deleteTimeTable(timeToDelete) { 1042 deleteTimeTable(timeToDelete) {
1043 // console.log('timeToUpdate', timeToDelete._id); 1043 // console.log('timeToUpdate', timeToDelete._id);
1044 let deleteLecture = { 1044 let deleteLecture = {
1045 lectureId: timeToDelete._id 1045 lectureId: timeToDelete._id
1046 }; 1046 };
1047 http() 1047 http()
1048 .delete( 1048 .delete(
1049 "/deleteLecture", 1049 "/deleteLecture",
1050 confirm("Are you sure you want to delete this?") && { 1050 confirm("Are you sure you want to delete this?") && {
1051 params: deleteLecture 1051 params: deleteLecture
1052 } 1052 }
1053 ) 1053 )
1054 .then(response => { 1054 .then(response => {
1055 // console.log("deleteLecture",deleteLecture) 1055 // console.log("deleteLecture",deleteLecture)
1056 if ((this.snackbar = true)) { 1056 if ((this.snackbar = true)) {
1057 this.text = "Successfully delete Existing User"; 1057 this.text = "Successfully delete Existing User";
1058 } 1058 }
1059 this.$router.go(0); 1059 this.$router.go(0);
1060 // this.getTimeTable(); 1060 // this.getTimeTable();
1061 }) 1061 })
1062 .catch(error => { 1062 .catch(error => {
1063 console.log(error); 1063 console.log(error);
1064 }); 1064 });
1065 } 1065 }
1066 }, 1066 },
1067 mounted() { 1067 mounted() {
1068 this.getTimeTableList(); 1068 this.getTimeTableList();
1069 var token = this.$store.state.token; 1069 var token = this.$store.state.token;
1070 http() 1070 http()
1071 .get("/getClassesList", { 1071 .get("/getClassesList", {
1072 headers: { Authorization: "Bearer " + token } 1072 headers: { Authorization: "Bearer " + token }
1073 }) 1073 })
1074 .then(response => { 1074 .then(response => {
1075 this.addclass = response.data.data; 1075 this.addclass = response.data.data;
1076 // console.log("getClassesList=====>",this.addclass) 1076 // console.log("getClassesList=====>",this.addclass)
1077 }) 1077 })
1078 .catch(err => { 1078 .catch(err => {
1079 // console.log("err====>", err); 1079 // console.log("err====>", err);
1080 }); 1080 });
1081 1081
1082 http() 1082 http()
1083 .get("/getTeachersList", { 1083 .get("/getTeachersList", {
1084 headers: { Authorization: "Bearer " + token } 1084 headers: { Authorization: "Bearer " + token }
1085 }) 1085 })
1086 .then(response => { 1086 .then(response => {
1087 this.addTeachers = response.data.data; 1087 this.addTeachers = response.data.data;
1088 // console.log("getClassesList=====>",this.addTeachers) 1088 // console.log("getClassesList=====>",this.addTeachers)
1089 }) 1089 })
1090 .catch(err => { 1090 .catch(err => {
1091 // console.log("err====>", err); 1091 // console.log("err====>", err);
1092 }); 1092 });
1093 }, 1093 },
1094 computed: { 1094 computed: {
1095 toolbarColor() { 1095 toolbarColor() {
1096 return this.$vuetify.options.extra.mainNav; 1096 return this.$vuetify.options.extra.mainNav;
1097 } 1097 }
1098 } 1098 }
1099 }; 1099 };
1100 </script> 1100 </script>
1101 <style scoped> 1101 <style scoped>
1102 .theme--light .v-label, 1102 .theme--light .v-label,
1103 .application .theme--light.v-label { 1103 .application .theme--light.v-label {
1104 color: black; 1104 color: black;
1105 } 1105 }
1106 .v-tabs__div { 1106 .v-tabs__div {
1107 text-transform: none; 1107 text-transform: none;
1108 } 1108 }
1109 .v-input__prepend-outer { 1109 .v-input__prepend-outer {
1110 margin-right: 0px !important; 1110 margin-right: 0px !important;
1111 } 1111 }
1112 .v-card__actions .v-btn { 1112 .v-card__actions .v-btn {
1113 margin: 0 15px; 1113 margin: 0 15px;
1114 min-width: 120px; 1114 min-width: 120px;
1115 } 1115 }
1116 .primary { 1116 .primary {
1117 background-color: #aaa !important; 1117 background-color: #aaa !important;
1118 border-color: #aaa !important; 1118 border-color: #aaa !important;
1119 } 1119 }
1120 h4 { 1120 h4 {
1121 background-repeat: no-repeat; 1121 background-repeat: no-repeat;
1122 padding: 8px; 1122 padding: 8px;
1123 margin: auto; 1123 margin: auto;
1124 font-size: 25px; 1124 font-size: 25px;
1125 } 1125 }
1126 #name { 1126 #name {
1127 position: absolute; 1127 position: absolute;
1128 left: 100px; 1128 left: 100px;
1129 top: 17px; 1129 top: 17px;
1130 } 1130 }
1131 #icon { 1131 #icon {
1132 position: absolute; 1132 position: absolute;
1133 right: 8px; 1133 right: 8px;
1134 top: 8px; 1134 top: 8px;
1135 } 1135 }
1136 #m { 1136 #m {
1137 position: relative; 1137 position: relative;
1138 left: 135px; 1138 left: 135px;
1139 top: -15px; 1139 top: -15px;
1140 } 1140 }
1141 #G { 1141 #G {
1142 position: absolute; 1142 position: absolute;
1143 top: 38px; 1143 top: 38px;
1144 color: white; 1144 color: white;
1145 } 1145 }
1146 #bt { 1146 #bt {
1147 position: relative; 1147 position: relative;
1148 top: -20px; 1148 top: -20px;
1149 left: 115px; 1149 left: 115px;
1150 } 1150 }
1151 #e { 1151 #e {
1152 position: relative; 1152 position: relative;
1153 top: 5px; 1153 top: 5px;
1154 right: -30px; 1154 right: -30px;
1155 height: 17px; 1155 height: 17px;
1156 cursor: pointer; 1156 cursor: pointer;
1157 } 1157 }
1158 #d { 1158 #d {
1159 position: relative; 1159 position: relative;
1160 top: 5px; 1160 top: 5px;
1161 right: -70px; 1161 right: -70px;
1162 height: 17px; 1162 height: 17px;
1163 cursor: pointer; 1163 cursor: pointer;
1164 } 1164 }
1165 #td { 1165 #td {
1166 border: 1px solid #dddddd; 1166 border: 1px solid #dddddd;
1167 text-align: left; 1167 text-align: left;
1168 padding: 8px; 1168 padding: 8px;
1169 } 1169 }
1170 #dialog { 1170 #dialog {
1171 height: 550px; 1171 height: 550px;
1172 } 1172 }
1173 .active { 1173 .active {
1174 background-color: black; 1174 background-color: black;
1175 color: white !important; 1175 color: white !important;
1176 } 1176 }
1177 .activebtn { 1177 .activebtn {
1178 color: black !important; 1178 color: black !important;
1179 } 1179 }
1180 #flex { 1180 #flex {
1181 height: 300px; 1181 height: 300px;
1182 } 1182 }
1183 .top { 1183 .top {
1184 margin-top: 100px; 1184 margin-top: 100px;
1185 } 1185 }
1186 .v-tabs__item a { 1186 .v-tabs__item a {
1187 font-size: 16px !important; 1187 font-size: 16px !important;
1188 } 1188 }
1189 @media screen and (max-width: 769px) { 1189 @media screen and (max-width: 769px) {
1190 .top { 1190 .top {
1191 margin-top: 0 !important; 1191 margin-top: 0 !important;
1192 } 1192 }
1193 .userSearch .v-icon { 1193 .userSearch .v-icon {
1194 font-size: 20px !important; 1194 font-size: 20px !important;
1195 margin-left: 20px; 1195 margin-left: 20px;
1196 } 1196 }
1197 } 1197 }
1198 @media screen and (max-width: 380px) { 1198 @media screen and (max-width: 380px) {
1199 .pl-3 {
1200 padding-left: 0px !important;
1201 }
1199 .right { 1202 .right {
1200 float: none !important; 1203 float: none !important;
1201 } 1204 }
1202 .subheading { 1205 .subheading {
1203 font-size: 14px !important; 1206 font-size: 14px !important;
1204 } 1207 }
1205 .v-card__actions .v-btn { 1208 .v-card__actions .v-btn {
1206 margin: 0 0px; 1209 margin: 0 0px;
1207 min-width: 100px; 1210 min-width: 100px;
1208 } 1211 }
1209 /* .searchIcon .v-icon { 1212 /* .searchIcon .v-icon {
1210 font-size: 20px; 1213 font-size: 20px;
1211 margin-left: 20px; 1214 margin-left: 20px;
1212 } */ 1215 } */
1213 .subheading { 1216 .subheading {
1214 font-size: 12px !important; 1217 font-size: 12px !important;
1215 } 1218 }
1216 h5 { 1219 h5 {
1217 font-size: 13px; 1220 font-size: 13px;
1218 } 1221 }
1219 } 1222 }
1220 .v-icon { 1223 .v-icon {
1221 font-size: 30px; 1224 font-size: 30px;
1222 } 1225 }
1223 @media screen and (min-width: 1270px) { 1226 @media screen and (min-width: 1270px) {
1224 .hide { 1227 .hide {
1225 display: none; 1228 display: none;
1226 } 1229 }
1227 /* } 1230 /* }
1228 @media screen and (max-width: 962px) { 1231 @media screen and (max-width: 962px) {
1229 .imglogo{ 1232 .imglogo{
1230 position: absolute; 1233 position: absolute;
1231 top: 13px; 1234 top: 13px;
1232 left: 13px !important; 1235 left: 13px !important;
1233 width: 70px; 1236 width: 70px;
1234 height: 24px; 1237 height: 24px;
1235 } */ 1238 } */
1236 } 1239 }
1237 @media screen and (max-width: 420px) { 1240 @media screen and (max-width: 420px) {
1238 .userSearch .v-text-field .v-label { 1241 .userSearch .v-text-field .v-label {
1239 line-height: 24px !important; 1242 line-height: 24px !important;
1240 } 1243 }
1241 .userSearch .v-label { 1244 .userSearch .v-label {
1242 font-size: 13px !important; 1245 font-size: 13px !important;
1243 } 1246 }
1244 .v-list__tile { 1247 .v-list__tile {
1245 font-size: 14px; 1248 font-size: 14px;
1246 padding: 0 10px; 1249 padding: 0 10px;
1247 } 1250 }
1248 .name { 1251 .name {
1249 font-size: 15px; 1252 font-size: 15px;
1250 } 1253 }
1251 } 1254 }
1252 </style> 1255 </style>