viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit f0281dd43ca369fd5213ec2c5fe06a16eb97cc69

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

add run api of retlated students,forget&change password and related teacher api

Showing 4 changed files with 192 additions and 68 deletions   Show diff stats
src/pages/Dashboard.vue
Diff comments   View file @f0281dd
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar 3 <v-toolbar
4 color="grey" 4 color="grey"
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 Teachers ****** --> 11 <!-- ****** SEARCH ALL Teachers ****** -->
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 prepend-icon="search" 15 prepend-icon="search"
16 label="Find your Teachers" 16 label="Find your Teachers"
17 v-model="search" 17 v-model="search"
18 color="black" 18 color="black"
19 @change="getTeacherList" 19 @change="getTeacherList"
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 Teachers</v-tab> 49 >Existing Teachers</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 Teachers</v-tab> 56 >Add New Teachers</v-tab>
57 <!-- ****** EDIT Teachers Dtails ****** --> 57 <!-- ****** EDIT Teachers Dtails ****** -->
58 <v-tab-item> 58 <v-tab-item>
59 <v-snackbar 59 <v-snackbar
60 :timeout="timeout" 60 :timeout="timeout"
61 :top="y === 'top'" 61 :top="y === 'top'"
62 :right="x === 'right'" 62 :right="x === 'right'"
63 :vertical="mode === 'vertical'" 63 :vertical="mode === 'vertical'"
64 v-model="snackbar" 64 v-model="snackbar"
65 color="success" 65 color="success"
66 >{{ text }}</v-snackbar> 66 >{{ text }}</v-snackbar>
67 <v-dialog v-model="dialog" max-width="500px"> 67 <v-dialog v-model="dialog" max-width="500px">
68 <v-toolbar color="white"> 68 <v-toolbar color="white">
69 <v-spacer></v-spacer> 69 <v-spacer></v-spacer>
70 <v-toolbar-title>Edit Profile</v-toolbar-title> 70 <v-toolbar-title>Edit Profile</v-toolbar-title>
71 <v-spacer></v-spacer> 71 <v-spacer></v-spacer>
72 </v-toolbar> 72 </v-toolbar>
73 <v-card> 73 <v-card>
74 <v-flex align-center justify-center layout text-xs-center> 74 <!-- <v-flex align-center justify-center layout text-xs-center>
75 <v-avatar size="50px" style="position:absolute; top:10px; "> 75 <v-avatar size="50px" style="position:absolute; top:10px; ">
76 <img src="/static/icon/user.png"> 76 <img src="/static/icon/user.png">
77 </v-avatar> 77 </v-avatar>
78 </v-flex> 78 </v-flex> -->
79 <v-card-text> 79 <v-card-text>
80 <v-container> 80 <v-container>
81 <v-layout wrap justify-center> 81 <v-layout wrap justify-center>
82 <v-flex xs12 sm9> 82 <v-flex xs12 sm9>
83 <v-form ref="form" v-model="valid" lazy-validation> 83 <v-form ref="form" v-model="valid" lazy-validation>
84 <v-layout style="position:relative; top:15px;"> 84 <v-layout style="position:relative;">
85 <v-flex xs4 class="pt-4 subheading"> 85 <v-flex xs4 class="pt-4 subheading">
86 <label>Full Name:</label> 86 <label>Full Name:</label>
87 </v-flex> 87 </v-flex>
88 <v-flex xs8> 88 <v-flex xs8>
89 <v-text-field 89 <v-text-field
90 v-model="editedItem.name" 90 v-model="editedItem.name"
91 v-validate="'required'" 91 v-validate="'required'"
92 :rules="nameRules" 92 :rules="nameRules"
93 data-vv-name="Name" 93 data-vv-name="Name"
94 required 94 required
95 ></v-text-field> 95 ></v-text-field>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 <v-layout> 98 <v-layout>
99 <v-flex xs4 class="pt-4 subheading"> 99 <v-flex xs4 class="pt-4 subheading">
100 <label>Email ID:</label> 100 <label>Email ID:</label>
101 </v-flex> 101 </v-flex>
102 <v-flex xs8> 102 <v-flex xs8>
103 <v-text-field 103 <v-text-field
104 v-model="editedItem.email" 104 v-model="editedItem.email"
105 v-validate="'required|email'" 105 v-validate="'required|email'"
106 :rules="emailRules" 106 :rules="emailRules"
107 data-vv-name="E-mail" 107 data-vv-name="E-mail"
108 required 108 required
109 ></v-text-field> 109 ></v-text-field>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 <!-- <v-layout> 112 <!-- <v-layout>
113 <v-flex xs4 class="pt-4 subheading"> 113 <v-flex xs4 class="pt-4 subheading">
114 <label>Date of Birth:</label> 114 <label>Date of Birth:</label>
115 </v-flex> 115 </v-flex>
116 <v-flex xs8> 116 <v-flex xs8>
117 <v-menu 117 <v-menu
118 ref="menu1" 118 ref="menu1"
119 :close-on-content-click="false" 119 :close-on-content-click="false"
120 v-model="menu1" 120 v-model="menu1"
121 :nudge-right="40" 121 :nudge-right="40"
122 lazy 122 lazy
123 transition="scale-transition" 123 transition="scale-transition"
124 offset-y 124 offset-y
125 full-width 125 full-width
126 min-width="290px" 126 min-width="290px"
127 > 127 >
128 <v-text-field 128 <v-text-field
129 slot="activator" 129 slot="activator"
130 v-model="editedItem.dob" 130 v-model="editedItem.dob"
131 placeholder="Select date" 131 placeholder="Select date"
132 ></v-text-field> 132 ></v-text-field>
133 <v-date-picker 133 <v-date-picker
134 ref="picker" 134 ref="picker"
135 v-model="editedItem.dob" 135 v-model="editedItem.dob"
136 :max="new Date().toISOString().substr(0, 10)" 136 :max="new Date().toISOString().substr(0, 10)"
137 min="1950-01-01" 137 min="1950-01-01"
138 @input="menu1 = false" 138 @input="menu1 = false"
139 ></v-date-picker> 139 ></v-date-picker>
140 </v-menu> 140 </v-menu>
141 </v-flex> 141 </v-flex>
142 </v-layout> --> 142 </v-layout> -->
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-form> 148 </v-form>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 </v-container> 151 </v-container>
152 </v-card-text> 152 </v-card-text>
153 </v-card> 153 </v-card>
154 </v-dialog> 154 </v-dialog>
155 <!-- ****** PROFILE VIEW Teachers Details ****** --> 155 <!-- ****** PROFILE VIEW Teachers Details ****** -->
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>Profile</v-toolbar-title> 159 <v-toolbar-title>Profile</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><br><br> 172 <v-flex><br><br>
173 <v-layout> 173 <v-layout>
174 <v-flex xs5 sm6> 174 <v-flex xs5 sm6>
175 <h5 class="right">Full Name:</h5> 175 <h5 class="right">Full Name:</h5>
176 </v-flex> 176 </v-flex>
177 <v-flex sm6 xs8> 177 <v-flex sm6 xs8>
178 <h5>{{ editedItem.name }}</h5> 178 <h5>{{ editedItem.name }}</h5>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 <v-layout> 181 <v-layout>
182 <v-flex xs5 sm6> 182 <v-flex xs5 sm6>
183 <h5 class="right">Email:</h5> 183 <h5 class="right">Email:</h5>
184 </v-flex> 184 </v-flex>
185 <v-flex sm6 xs8> 185 <v-flex sm6 xs8>
186 <h5>{{ editedItem.email }}</h5> 186 <h5>{{ editedItem.email }}</h5>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 <!-- <v-layout> 189 <!-- <v-layout>
190 <v-flex xs6 sm6 > 190 <v-flex xs6 sm6 >
191 <h5 class="right my-3">Date Of Birth:</h5> 191 <h5 class="right my-3">Date Of Birth:</h5>
192 </v-flex> 192 </v-flex>
193 <v-flex sm6 xs8> 193 <v-flex sm6 xs8>
194 <h5 class="my-3">{{ editedItem.dob }}</h5> 194 <h5 class="my-3">{{ editedItem.dob }}</h5>
195 </v-flex> 195 </v-flex>
196 </v-layout> --> 196 </v-layout> -->
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 </v-container> 199 </v-container>
200 </v-card-text> 200 </v-card-text>
201 </v-card> 201 </v-card>
202 </v-dialog> 202 </v-dialog>
203 203
204 <!-- <v-dialog v-model="dialog2" width="700px"> 204 <!-- <v-dialog v-model="dialog2" width="700px">
205 <v-card> 205 <v-card>
206 <div id="dialog"> 206 <div id="dialog">
207 <h4> 207 <h4>
208 <b>Report</b> 208 <b>Report</b>
209 </h4> 209 </h4>
210 <h5 id="name"> 210 <h5 id="name">
211 <b>Patient Name:</b> 211 <b>Patient Name:</b>
212 {{ editedItem.name }} 212 {{ editedItem.name }}
213 </h5> 213 </h5>
214 <h5 id="m">Select Month:</h5> 214 <h5 id="m">Select Month:</h5>
215 <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn> 215 <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn>
216 <v-spacer></v-spacer> 216 <v-spacer></v-spacer>
217 <v-icon id="icon" @click="close2">close</v-icon> 217 <v-icon id="icon" @click="close2">close</v-icon>
218 218
219 <span id="bt"> 219 <span id="bt">
220 <v-btn 220 <v-btn
221 color="grey darken-2" 221 color="grey darken-2"
222 v-on:click="component='one-month' , activebtn('existing')" 222 v-on:click="component='one-month' , activebtn('existing')"
223 v-bind:class="{ activebtn: isActivebtn }" 223 v-bind:class="{ activebtn: isActivebtn }"
224 flat 224 flat
225 >1 month</v-btn> 225 >1 month</v-btn>
226 <v-btn 226 <v-btn
227 color="grey darken-2" 227 color="grey darken-2"
228 v-on:click="component='three-month' , activebtn('new')" 228 v-on:click="component='three-month' , activebtn('new')"
229 v-bind:class="{ activebtn: Activebtn1 }" 229 v-bind:class="{ activebtn: Activebtn1 }"
230 flat 230 flat
231 >3 Month</v-btn> 231 >3 Month</v-btn>
232 <v-btn 232 <v-btn
233 color="grey darken-2" 233 color="grey darken-2"
234 v-on:click="component='six-month' , activebtn('new1')" 234 v-on:click="component='six-month' , activebtn('new1')"
235 v-bind:class="{ activebtn: Activebtn2 }" 235 v-bind:class="{ activebtn: Activebtn2 }"
236 flat 236 flat
237 >6 Month</v-btn> 237 >6 Month</v-btn>
238 <v-btn 238 <v-btn
239 color="grey darken-2" 239 color="grey darken-2"
240 v-on:click="component='nine-month' , activebtn('new2')" 240 v-on:click="component='nine-month' , activebtn('new2')"
241 v-bind:class="{ activebtn: Activebtn3 }" 241 v-bind:class="{ activebtn: Activebtn3 }"
242 flat 242 flat
243 >9 Month</v-btn> 243 >9 Month</v-btn>
244 <img id="e" @click="mail" src="/static/icon/email1.png"> 244 <img id="e" @click="mail" src="/static/icon/email1.png">
245 <img id="d" @click="download" src="/static/icon/download1.png"> 245 <img id="d" @click="download" src="/static/icon/download1.png">
246 </span> 246 </span>
247 <component v-bind:is="component"></component> 247 <component v-bind:is="component"></component>
248 </div> 248 </div>
249 </v-card> 249 </v-card>
250 </v-dialog> --> 250 </v-dialog> -->
251 <v-snackbar 251 <v-snackbar
252 :timeout="timeout" 252 :timeout="timeout"
253 :top="y === 'top'" 253 :top="y === 'top'"
254 :right="x === 'right'" 254 :right="x === 'right'"
255 :vertical="mode === 'vertical'" 255 :vertical="mode === 'vertical'"
256 v-model="snackbar" 256 v-model="snackbar"
257 color="success" 257 color="success"
258 >{{ text }}</v-snackbar> 258 >{{ text }}</v-snackbar>
259 259
260 <!-- ****** EXISTING-Teachers Table Data****** --> 260 <!-- ****** EXISTING-Teachers Table Data****** -->
261 <v-data-table 261 <v-data-table
262 :headers="headers" 262 :headers="headers"
263 :items="desserts" 263 :items="desserts"
264 :pagination.sync="pagination" 264 :pagination.sync="pagination"
265 :search="search" 265 :search="search"
266 > <!-- </v-content> 266 > <!-- </v-content>
267 <v-footer class="pa-4" color="grey darken-2"> 267 <v-footer class="pa-4" color="grey darken-2">
268 268
269 </v-footer> --> 269 </v-footer> -->
270 <template slot="items" slot-scope="props"> 270 <template slot="items" slot-scope="props">
271 <td id="td" class="text-xs-center">{{ props.index}}</td> 271 <td id="td" class="text-xs-center">{{ props.index}}</td>
272 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 272 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
273 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 273 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
274 274
275 <td class="text-xs-center"> 275 <td class="text-xs-center">
276 <span> 276 <span>
277 <!-- <img 277 <!-- <img
278 style="cursor:pointer; height:20px; " 278 style="cursor:pointer; height:20px; "
279 class="mr-5" 279 class="mr-5"
280 @click="report(props.item)" 280 @click="report(props.item)"
281 src="/static/icon/List1.png" 281 src="/static/icon/List1.png"
282 > --> 282 > -->
283 <img 283 <img
284 style="cursor:pointer; width:25px; height:18px; " 284 style="cursor:pointer; width:25px; height:18px; "
285 class="mr-5" 285 class="mr-5"
286 @click="profile(props.item)" 286 @click="profile(props.item)"
287 src="/static/icon/eye1.png" 287 src="/static/icon/eye1.png"
288 > 288 >
289 <img 289 <img
290 style="cursor:pointer; width:20px; height:18px; " 290 style="cursor:pointer; width:20px; height:18px; "
291 class="mr-5" 291 class="mr-5"
292 @click="editItem(props.item)" 292 @click="editItem(props.item)"
293 src="/static/icon/edit1.png" 293 src="/static/icon/edit1.png"
294 > 294 >
295 <img 295 <img
296 style="cursor:pointer; height:20px; " 296 style="cursor:pointer; height:20px; "
297 class="mr-5" 297 class="mr-5"
298 @click="deleteItem(props.item)" 298 @click="deleteItem(props.item)"
299 src="/static/icon/delete1.png" 299 src="/static/icon/delete1.png"
300 > 300 >
301 </span> 301 </span>
302 </td> 302 </td>
303 </template> 303 </template>
304 <v-alert 304 <v-alert
305 slot="no-results" 305 slot="no-results"
306 :value="true" 306 :value="true"
307 color="error" 307 color="error"
308 icon="warning" 308 icon="warning"
309 >Your search for "{{ search }}" found no results.</v-alert> 309 >Your search for "{{ search }}" found no results.</v-alert>
310 </v-data-table> 310 </v-data-table>
311 </v-tab-item> 311 </v-tab-item>
312 <!-- ****** ADD Teachers ****** --> 312 <!-- ****** ADD Teachers ****** -->
313 <v-tab-item> 313 <v-tab-item>
314 <v-container> 314 <v-container>
315 <v-snackbar 315 <v-snackbar
316 :timeout="timeout" 316 :timeout="timeout"
317 :top="y === 'top'" 317 :top="y === 'top'"
318 :right="x === 'right'" 318 :right="x === 'right'"
319 :vertical="mode === 'vertical'" 319 :vertical="mode === 'vertical'"
320 v-model="snackbar" 320 v-model="snackbar"
321 color="success" 321 color="success"
322 >{{ text }}</v-snackbar> 322 >{{ text }}</v-snackbar>
323 <v-flex xs12 sm8 offset-sm2 class="top"> 323 <v-flex xs12 sm8 offset-sm2 class="top">
324 <v-card flat> 324 <v-card flat>
325 <v-container fluid fill-height> 325 <v-container fluid fill-height>
326 <v-layout align-center> 326 <v-layout align-center>
327 <v-flex xs12> 327 <v-flex xs12>
328 <v-flex offset-xs5> 328 <v-flex offset-xs5>
329 <v-avatar size="55px"> 329 <v-avatar size="55px">
330 <img src="/static/icon/user.png"> 330 <img src="/static/icon/user.png">
331 </v-avatar> 331 </v-avatar>
332 </v-flex> 332 </v-flex>
333 <v-form ref="form" v-model="valid" lazy-validation> 333 <v-form ref="form" v-model="valid" lazy-validation>
334 <v-layout> 334 <v-layout>
335 <v-flex xs4 class="pt-4 subheading"> 335 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Full Name:</label> 336 <label class="right">Full Name:</label>
337 </v-flex> 337 </v-flex>
338 <v-flex xs6 class="ml-3"> 338 <v-flex xs6 class="ml-3">
339 <v-text-field 339 <v-text-field
340 v-model="editedItem.name" 340 v-model="editedItem.name"
341 placeholder="fill your full Name" 341 placeholder="fill your full Name"
342 name="name" 342 name="name"
343 type="text" 343 type="text"
344 :rules="nameRules" 344 :rules="nameRules"
345 required 345 required
346 ></v-text-field> 346 ></v-text-field>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
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">Country:</label> 351 <label class="right">Country:</label>
352 </v-flex> 352 </v-flex>
353 <v-flex xs6 class="ml-3"> 353 <v-flex xs6 class="ml-3">
354 <v-select 354 <v-select
355 v-model="editedItem.country" 355 v-model="editedItem.country"
356 :items="countries" 356 :items="countries"
357 label="Select Country" 357 label="Select Country"
358 single-line 358 single-line
359 ></v-select> 359 ></v-select>
360 </v-flex> 360 </v-flex>
361 </v-layout> --> 361 </v-layout> -->
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 class="pt-4 subheading"> 363 <v-flex xs4 class="pt-4 subheading">
364 <label class="right">Email ID:</label> 364 <label class="right">Email ID:</label>
365 </v-flex> 365 </v-flex>
366 <v-flex xs6 class="ml-3"> 366 <v-flex xs6 class="ml-3">
367 <v-text-field 367 <v-text-field
368 placeholder="fill your email" 368 placeholder="fill your email"
369 :rules="emailRules" 369 :rules="emailRules"
370 v-model="editedItem.email" 370 v-model="editedItem.email"
371 type="text" 371 type="text"
372 name="email" 372 name="email"
373 required 373 required
374 ></v-text-field> 374 ></v-text-field>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 <!-- <v-layout> 377 <!-- <v-layout>
378 <v-flex xs4 class="pt-4 subheading"> 378 <v-flex xs4 class="pt-4 subheading">
379 <label class="right">Date of Birth:</label> 379 <label class="right">Date of Birth:</label>
380 </v-flex> 380 </v-flex>
381 <v-flex xs6 class="ml-3"> 381 <v-flex xs6 class="ml-3">
382 <v-menu 382 <v-menu
383 ref="menu" 383 ref="menu"
384 :close-on-content-click="false" 384 :close-on-content-click="false"
385 v-model="menu" 385 v-model="menu"
386 :nudge-right="40" 386 :nudge-right="40"
387 lazy 387 lazy
388 transition="scale-transition" 388 transition="scale-transition"
389 offset-y 389 offset-y
390 full-width 390 full-width
391 min-width="290px" 391 min-width="290px"
392 > 392 >
393 <v-text-field 393 <v-text-field
394 slot="activator" 394 slot="activator"
395 v-model="editedItem.date" 395 v-model="editedItem.date"
396 placeholder="Select date" 396 placeholder="Select date"
397 ></v-text-field> 397 ></v-text-field>
398 <v-date-picker 398 <v-date-picker
399 ref="picker" 399 ref="picker"
400 v-model="editedItem.date" 400 v-model="editedItem.date"
401 :max="new Date().toISOString().substr(0, 10)" 401 :max="new Date().toISOString().substr(0, 10)"
402 min="1950-01-01" 402 min="1950-01-01"
403 @input="menu = false" 403 @input="menu = false"
404 ></v-date-picker> 404 ></v-date-picker>
405 </v-menu> 405 </v-menu>
406 </v-flex> 406 </v-flex>
407 </v-layout> --> 407 </v-layout> -->
408 <v-layout> 408 <v-layout>
409 <v-flex xs12 sm9 offset-sm2> 409 <v-flex xs12 sm9 offset-sm2>
410 <v-card-actions> 410 <v-card-actions>
411 <v-btn @click="clear" round dark>clear</v-btn> 411 <v-btn @click="clear" round dark>clear</v-btn>
412 <v-spacer></v-spacer> 412 <v-spacer></v-spacer>
413 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 413 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
414 </v-card-actions> 414 </v-card-actions>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </v-form> 417 </v-form>
418 </v-flex> 418 </v-flex>
419 </v-layout> 419 </v-layout>
420 </v-container> 420 </v-container>
421 </v-card> 421 </v-card>
422 </v-flex> 422 </v-flex>
423 </v-container> 423 </v-container>
424 </v-tab-item> 424 </v-tab-item>
425 </v-tabs> 425 </v-tabs>
426 </v-app> 426 </v-app>
427 </template> 427 </template>
428 428
429 <script> 429 <script>
430 // import AppToolbar from '@/components/AppToolbar'; 430 // import AppToolbar from '@/components/AppToolbar';
431 // import onemonth from "@/components/report/onemonth.vue"; 431 // import onemonth from "@/components/report/onemonth.vue";
432 // import threemonth from "@/components/report/threemonth.vue"; 432 // import threemonth from "@/components/report/threemonth.vue";
433 // import sixmonth from "@/components/report/sixmonth.vue"; 433 // import sixmonth from "@/components/report/sixmonth.vue";
434 // import ninemonth from "@/components/report/ninemonth.vue"; 434 // import ninemonth from "@/components/report/ninemonth.vue";
435 // import generatereport from "@/components/report/generatereport.vue"; 435 // import generatereport from "@/components/report/generatereport.vue";
436 import http from "@/Services/http.js"; 436 import http from "@/Services/http.js";
437 import NotificationList from "@/components/widgets/list/NotificationList"; 437 import NotificationList from "@/components/widgets/list/NotificationList";
438 import Util from "@/util"; 438 import Util from "@/util";
439 439
440 export default { 440 export default {
441 components: { 441 components: {
442 // "one-month": onemonth, 442 // "one-month": onemonth,
443 // "three-month": threemonth, 443 // "three-month": threemonth,
444 // "six-month": sixmonth, 444 // "six-month": sixmonth,
445 // "nine-month": ninemonth, 445 // "nine-month": ninemonth,
446 // "report-generate": generatereport, 446 // "report-generate": generatereport,
447 }, 447 },
448 data: () => ({ 448 data: () => ({
449 component: "report-generate", 449 component: "report-generate",
450 snackbar: false, 450 snackbar: false,
451 y: "top", 451 y: "top",
452 x: "right", 452 x: "right",
453 mode: "", 453 mode: "",
454 timeout: 3000, 454 timeout: 3000,
455 text: "", 455 text: "",
456 loading: false, 456 loading: false,
457 date:null, 457 date:null,
458 search: '', 458 search: '',
459 modal: false, 459 modal: false,
460 modaledit:false, 460 modaledit:false,
461 menu: false, 461 menu: false,
462 menu1:false, 462 menu1:false,
463 dialog: false, 463 dialog: false,
464 dialog1: false, 464 dialog1: false,
465 dialog2: false, 465 dialog2: false,
466 valid: true, 466 valid: true,
467 isActive: true, 467 isActive: true,
468 newActive: false, 468 newActive: false,
469 isActivebtn: false, 469 isActivebtn: false,
470 Activebtn1: false, 470 Activebtn1: false,
471 Activebtn2: false, 471 Activebtn2: false,
472 Activebtn3: false, 472 Activebtn3: false,
473 loader: null, 473 loader: null,
474 loading: false, 474 loading: false,
475 loading2: false, 475 loading2: false,
476 loading3: false, 476 loading3: false,
477 loading4: false, 477 loading4: false,
478 details: [], 478 details: [],
479 pagination: { 479 pagination: {
480 rowsPerPage: 15 480 rowsPerPage: 15
481 }, 481 },
482 nameRules: [v => !!v || " Full Name is required"], 482 nameRules: [v => !!v || " Full Name is required"],
483 emailRules: [ 483 emailRules: [
484 v => !!v || "E-mail is required", 484 v => !!v || "E-mail is required",
485 v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid' 485 v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
486 ], 486 ],
487 headers: [ 487 headers: [
488 { 488 {
489 text: "No", 489 text: "No",
490 align: "center", 490 align: "center",
491 sortable: false, 491 sortable: false,
492 value: "No" 492 value: "No"
493 }, 493 },
494 { text: "Name", value: "name", sortable: false, align: "center" }, 494 { text: "Name", value: "name", sortable: false, align: "center" },
495 { text: "Email", value: "email", sortable: false, align: "center" }, 495 { text: "Email", value: "email", sortable: false, align: "center" },
496 { text: "", value: "", sortable: false, align: "center" } 496 { text: "", value: "", sortable: false, align: "center" }
497 ], 497 ],
498 desserts: [], 498 desserts: [],
499 editedIndex: -1, 499 editedIndex: -1,
500 editedItem: { 500 editedItem: {
501 role: "TEACHER", 501 role: "TEACHER",
502 name: "", 502 name: "",
503 email: "", 503 email: "",
504 }, 504 },
505 defaultItem: { 505 defaultItem: {
506 role: "TEACHER", 506 role: "TEACHER",
507 name: "", 507 name: "",
508 email: "", 508 email: "",
509 }, 509 },
510 userName:'', 510 userName:'',
511 items: [ 511 items: [
512 { 512 {
513 href: "/changepassword", 513 href: "/changepassword",
514 title: "Change Password", 514 title: "Change Password",
515 click: e => { 515 click: e => {
516 console.log(e); 516 console.log(e);
517 } 517 }
518 }, 518 },
519 { 519 {
520 href: "#", 520 href: "#",
521 title: "Logout", 521 title: "Logout",
522 click: e => { 522 click: e => {
523 window.getApp.$emit("APP_LOGOUT"); 523 window.getApp.$emit("APP_LOGOUT");
524 } 524 }
525 } 525 }
526 ] 526 ]
527 }), 527 }),
528 watch: { 528 watch: {
529 menu (val) { 529 menu (val) {
530 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR')) 530 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
531 }, 531 },
532 menu1 (val) { 532 menu1 (val) {
533 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR')) 533 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
534 } 534 }
535 }, 535 },
536 methods: { 536 methods: {
537 getTeacherList() { 537 getTeacherList() {
538 var token = this.$store.state.token; 538 var token = this.$store.state.token;
539 http() 539 http()
540 .get("/getTeachersList", { 540 .get("/getTeachersList", {
541 headers: { Authorization: "Bearer " + token } 541 headers: { Authorization: "Bearer " + token }
542 }) 542 })
543 .then(response => { 543 .then(response => {
544 this.desserts = response.data.data; 544 this.desserts = response.data.data;
545 console.log("getTeacherList=====>",this.desserts) 545 console.log("getTeacherList=====>",this.desserts)
546 546
547 }) 547 })
548 .catch(err => { 548 .catch(err => {
549 // console.log("err====>", err); 549 // console.log("err====>", err);
550 this.$router.replace({ path: '/' }); 550 this.$router.replace({ path: '/' });
551 }); 551 });
552 }, 552 },
553 editItem(item) { 553 editItem(item) {
554 this.editedIndex = this.desserts.indexOf(item); 554 this.editedIndex = this.desserts.indexOf(item);
555 this.editedItem = Object.assign({}, item); 555 this.editedItem = Object.assign({}, item);
556 this.dialog = true; 556 this.dialog = true;
557 }, 557 },
558 profile(item) { 558 profile(item) {
559 this.editedIndex = this.desserts.indexOf(item); 559 this.editedIndex = this.desserts.indexOf(item);
560 this.editedItem = Object.assign({}, item); 560 this.editedItem = Object.assign({}, item);
561 this.dialog1 = true; 561 this.dialog1 = true;
562 }, 562 },
563 // report(item) { 563 // report(item) {
564 // this.editedIndex = this.desserts.indexOf(item); 564 // this.editedIndex = this.desserts.indexOf(item);
565 // this.editedItem = Object.assign({}, item); 565 // this.editedItem = Object.assign({}, item);
566 // this.dialog2 = true; 566 // this.dialog2 = true;
567 // }, 567 // },
568 568
569 deleteItem(item) { 569 deleteItem(item) {
570 let deleteTeachers = { 570 let deleteTeachers = {
571 teacherId: item._id 571 teacherId: item._id
572 }; 572 };
573 console.log("deleteUers",deleteTeachers) 573 console.log("deleteUers",deleteTeachers)
574 http() 574 http()
575 .delete("/deleteTeacher", confirm('Are you sure you want to delete this?') && { params: deleteTeachers }) 575 .delete("/deleteTeacher", confirm('Are you sure you want to delete this?') && { params: deleteTeachers })
576 .then(response => { 576 .then(response => {
577 console.log("deleteUers",deleteTeachers) 577 console.log("deleteUers",deleteTeachers)
578 if ((this.snackbar = true)) { 578 if ((this.snackbar = true)) {
579 this.text = "Successfully delete Existing User"; 579 this.text = "Successfully delete Existing User";
580 } 580 }
581 this.getTeacherList(); 581 this.getTeacherList();
582 }) 582 })
583 .catch(error => { 583 .catch(error => {
584 console.log(error); 584 console.log(error);
585 }); 585 });
586 }, 586 },
587 activeTab(type) { 587 activeTab(type) {
588 switch (type) { 588 switch (type) {
589 case "existing": 589 case "existing":
590 this.newActive = false; 590 this.newActive = false;
591 this.isActive = true; 591 this.isActive = true;
592 break; 592 break;
593 593
594 default: 594 default:
595 this.newActive = true; 595 this.newActive = true;
596 this.isActive = false; 596 this.isActive = false;
597 break; 597 break;
598 } 598 }
599 }, 599 },
600 activebtn(type) { 600 activebtn(type) {
601 switch (type) { 601 switch (type) {
602 case "existing": 602 case "existing":
603 this.Activebtn3 = false; 603 this.Activebtn3 = false;
604 this.Activebtn2 = false; 604 this.Activebtn2 = false;
605 this.Activebtn1 = false; 605 this.Activebtn1 = false;
606 this.isActivebtn = true; 606 this.isActivebtn = true;
607 break; 607 break;
608 case "new": 608 case "new":
609 this.Activebtn3 = false; 609 this.Activebtn3 = false;
610 this.Activebtn2 = false; 610 this.Activebtn2 = false;
611 this.Activebtn1 = true; 611 this.Activebtn1 = true;
612 this.isActivebtn = false; 612 this.isActivebtn = false;
613 break; 613 break;
614 case "new1": 614 case "new1":
615 this.Activebtn3 = false; 615 this.Activebtn3 = false;
616 this.Activebtn2 = true; 616 this.Activebtn2 = true;
617 this.Activebtn1 = false; 617 this.Activebtn1 = false;
618 this.isActivebtn = false; 618 this.isActivebtn = false;
619 break; 619 break;
620 default: 620 default:
621 this.Activebtn3 = true; 621 this.Activebtn3 = true;
622 this.Activebtn2 = false; 622 this.Activebtn2 = false;
623 this.Activebtn1 = false; 623 this.Activebtn1 = false;
624 this.isActivebtn = false; 624 this.isActivebtn = false;
625 break; 625 break;
626 } 626 }
627 }, 627 },
628 close() { 628 close() {
629 this.dialog = false; 629 this.dialog = false;
630 setTimeout(() => { 630 setTimeout(() => {
631 this.editedItem = Object.assign({}, this.defaultItem); 631 this.editedItem = Object.assign({}, this.defaultItem);
632 this.editedIndex = -1; 632 this.editedIndex = -1;
633 }, 300); 633 }, 300);
634 }, 634 },
635 close1() { 635 close1() {
636 this.dialog1 = false; 636 this.dialog1 = false;
637 }, 637 },
638 close2() { 638 close2() {
639 this.dialog2 = false; 639 this.dialog2 = false;
640 }, 640 },
641 submit() { 641 submit() {
642 if (this.$refs.form.validate()) { 642 if (this.$refs.form.validate()) {
643 let addUsers = { 643 let addUsers = {
644 name: this.editedItem.name, 644 name: this.editedItem.name,
645 email: this.editedItem.email, 645 email: this.editedItem.email,
646 role: this.editedItem.role 646 role: this.editedItem.role
647 }; 647 };
648 // console.log(addUsers) 648 // console.log(addUsers)
649 http() 649 http()
650 .post("/createTeacher", addUsers) 650 .post("/createTeacher", addUsers)
651 .then(response => { 651 .then(response => {
652 this.getTeacherList(); 652 this.getTeacherList();
653 if (this.snackbar = true) { 653 if (this.snackbar = true) {
654 this.text = "New user added successfully"; 654 this.text = "New user added successfully";
655 } 655 }
656 656
657 this.clear(); 657 this.clear();
658 }) 658 })
659 .catch(error => { 659 .catch(error => {
660 // console.log(error); 660 // console.log(error);
661 if (this.snackbar = true) { 661 if (this.snackbar = true) {
662 this.text = error.response.data.message; 662 this.text = error.response.data.message;
663 } 663 }
664 }); 664 });
665 } 665 }
666 }, 666 },
667 mail() { 667 mail() {
668 }, 668 },
669 download() { 669 download() {
670 }, 670 },
671 clear() { 671 clear() {
672 this.$refs.form.reset(); 672 this.$refs.form.reset();
673 }, 673 },
674 save() { 674 save() {
675 let editUsers = { 675 let editUsers = {
676 name: this.editedItem.name, 676 name: this.editedItem.name,
677 email: this.editedItem.email, 677 email: this.editedItem.email,
678 teacherId: this.editedItem._id 678 teacherId: this.editedItem._id
679 }; 679 };
680 http() 680 http()
681 .put("/updateTeacher", editUsers) 681 .put("/updateTeacher", editUsers)
682 .then(response => { 682 .then(response => {
683 console.log("editUsers",editUsers); 683 console.log("editUsers",editUsers);
684 if ((this.snackbar = true)) { 684 if ((this.snackbar = true)) {
685 this.text = "Successfully Edit Existing User"; 685 this.text = "Successfully Edit Existing User";
686 } 686 }
687 this.getTeacherList(); 687 this.getTeacherList();
688 }) 688 })
689 .catch(error => { 689 .catch(error => {
690 // console.log(error); 690 // console.log(error);
691 }); 691 });
692 this.close(); 692 this.close();
693 }, 693 },
694 handleDrawerToggle() { 694 handleDrawerToggle() {
695 window.getApp.$emit("APP_DRAWER_TOGGLED"); 695 window.getApp.$emit("APP_DRAWER_TOGGLED");
696 }, 696 },
697 handleFullScreen() { 697 handleFullScreen() {
698 Util.toggleFullScreen(); 698 Util.toggleFullScreen();
699 } 699 }
700 }, 700 },
701 mounted() { 701 mounted() {
702 this.getTeacherList(); 702 this.getTeacherList();
703 // console.log("Id",this.$store.state.id) 703 // console.log("Id",this.$store.state.id)
704 // console.log("token",this.$store.state.token) 704 // console.log("token",this.$store.state.token)
705 }, 705 },
706 computed:{ 706 computed:{
707 toolbarColor() { 707 toolbarColor() {
708 return this.$vuetify.options.extra.mainNav; 708 return this.$vuetify.options.extra.mainNav;
709 } 709 }
710 } 710 }
711 }; 711 };
712 </script> 712 </script>
713 <style scoped> 713 <style scoped>
714 .v-tabs__div { 714 .v-tabs__div {
715 text-transform: none; 715 text-transform: none;
716 } 716 }
717 .v-input__prepend-outer { 717 .v-input__prepend-outer {
718 margin-right: 0px !important; 718 margin-right: 0px !important;
719 } 719 }
720 .v-card__actions .v-btn { 720 .v-card__actions .v-btn {
721 margin: 0 15px; 721 margin: 0 15px;
722 min-width: 120px; 722 min-width: 120px;
723 } 723 }
724 .primary { 724 .primary {
725 background-color: #aaa !important; 725 background-color: #aaa !important;
726 border-color: #aaa !important; 726 border-color: #aaa !important;
727 } 727 }
728 h4 { 728 h4 {
729 background-repeat: no-repeat; 729 background-repeat: no-repeat;
730 padding: 8px; 730 padding: 8px;
731 margin: auto; 731 margin: auto;
732 font-size: 25px; 732 font-size: 25px;
733 } 733 }
734 #name { 734 #name {
735 position: absolute; 735 position: absolute;
736 left: 100px; 736 left: 100px;
737 top: 17px; 737 top: 17px;
738 } 738 }
739 #icon { 739 #icon {
740 position: absolute; 740 position: absolute;
741 right: 8px; 741 right: 8px;
742 top: 8px; 742 top: 8px;
743 } 743 }
744 #m { 744 #m {
745 position: relative; 745 position: relative;
746 left: 135px; 746 left: 135px;
747 top: -15px; 747 top: -15px;
748 } 748 }
749 #G { 749 #G {
750 position: absolute; 750 position: absolute;
751 top: 38px; 751 top: 38px;
752 color: white; 752 color: white;
753 } 753 }
754 #bt { 754 #bt {
755 position: relative; 755 position: relative;
756 top: -20px; 756 top: -20px;
757 left: 115px; 757 left: 115px;
758 } 758 }
759 #e { 759 #e {
760 position: relative; 760 position: relative;
761 top: 5px; 761 top: 5px;
762 right: -30px; 762 right: -30px;
763 height: 17px; 763 height: 17px;
764 cursor: pointer; 764 cursor: pointer;
765 } 765 }
766 #d { 766 #d {
767 position: relative; 767 position: relative;
768 top: 5px; 768 top: 5px;
769 right: -70px; 769 right: -70px;
770 height: 17px; 770 height: 17px;
771 cursor: pointer; 771 cursor: pointer;
772 } 772 }
773 #td { 773 #td {
774 border: 1px solid #dddddd; 774 border: 1px solid #dddddd;
775 text-align: left; 775 text-align: left;
776 padding: 8px; 776 padding: 8px;
777 } 777 }
778 #dialog { 778 #dialog {
779 height: 550px; 779 height: 550px;
780 } 780 }
781 .active { 781 .active {
782 background-color: black; 782 background-color: black;
783 color: white !important; 783 color: white !important;
784 } 784 }
785 .activebtn { 785 .activebtn {
786 color: black !important; 786 color: black !important;
787 } 787 }
788 #flex { 788 #flex {
789 height: 300px; 789 height: 300px;
790 } 790 }
791 .top{ 791 .top{
792 margin-top:100px; 792 margin-top:100px;
793 } 793 }
794 .v-tabs__item a{ 794 .v-tabs__item a{
795 font-size:16px !important; 795 font-size:16px !important;
796 } 796 }
797 @media screen and (max-width: 769px){ 797 @media screen and (max-width: 769px){
798 .top{ 798 .top{
799 margin-top:0 !important; 799 margin-top:0 !important;
800 } 800 }
801 .userSearch .v-icon { 801 .userSearch .v-icon {
802 font-size: 20px !important; 802 font-size: 20px !important;
803 margin-left: 20px ; 803 margin-left: 20px ;
804 } 804 }
805 } 805 }
806 @media screen and (max-width: 380px) { 806 @media screen and (max-width: 380px) {
807 .right { 807 .right {
808 float: none !important; 808 float: none !important;
809 } 809 }
810 .subheading { 810 .subheading {
811 font-size: 14px !important; 811 font-size: 14px !important;
812 } 812 }
813 .v-card__actions .v-btn{ 813 .v-card__actions .v-btn{
814 margin: 0 0px; 814 margin: 0 0px;
815 min-width: 100px; 815 min-width: 100px;
816 } 816 }
817 /* .searchIcon .v-icon { 817 /* .searchIcon .v-icon {
818 font-size: 20px; 818 font-size: 20px;
819 margin-left: 20px; 819 margin-left: 20px;
820 } */ 820 } */
821 .subheading { 821 .subheading {
822 font-size: 12px !important; 822 font-size: 12px !important;
823 } 823 }
824 h5 { 824 h5 {
825 font-size: 13px; 825 font-size: 13px;
826 } 826 }
827 } 827 }
828 .v-icon{ 828 .v-icon{
829 font-size:30px; 829 font-size:30px;
830 } 830 }
831 @media screen and (min-width: 1270px){ 831 @media screen and (min-width: 1270px){
832 .hide{ 832 .hide{
833 display: none; 833 display: none;
834 } 834 }
835 /* } 835 /* }
836 @media screen and (max-width: 962px) { 836 @media screen and (max-width: 962px) {
837 .imglogo{ 837 .imglogo{
838 position: absolute; 838 position: absolute;
839 top: 13px; 839 top: 13px;
840 left: 13px !important; 840 left: 13px !important;
841 width: 70px; 841 width: 70px;
842 height: 24px; 842 height: 24px;
843 } */ 843 } */
844 } 844 }
845 @media screen and (max-width: 420px){ 845 @media screen and (max-width: 420px){
846 .userSearch .v-text-field .v-label{ 846 .userSearch .v-text-field .v-label{
847 line-height: 24px !important; 847 line-height: 24px !important;
848 } 848 }
849 .userSearch .v-label{ 849 .userSearch .v-label{
850 font-size: 13px !important; 850 font-size: 13px !important;
851 } 851 }
852 .v-list__tile { 852 .v-list__tile {
853 font-size:14px; 853 font-size:14px;
854 padding: 0 10px; 854 padding: 0 10px;
855 } 855 }
856 .name{ 856 .name{
857 font-size:15px; 857 font-size:15px;
858 } 858 }
859 } 859 }
860 </style> 860 </style>
src/pages/Login.vue
Diff comments   View file @f0281dd
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar color="grey lighten"> 3 <v-toolbar color="grey lighten">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> --> 5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> -->
6 <h3 class="white--text my-3 ml-4">School-Management</h3> 6 <h3 class="white--text my-3 ml-4">School-Management</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-content>
10 <v-container fluid fill-height> 10 <v-container fluid fill-height>
11 <v-snackbar 11 <v-snackbar
12 :timeout="timeout" 12 :timeout="timeout"
13 :top="y === 'top'" 13 :top="y === 'top'"
14 :right="x === 'right'" 14 :right="x === 'right'"
15 :vertical="mode === 'vertical'" 15 :vertical="mode === 'vertical'"
16 v-model="snackbar" 16 v-model="snackbar"
17 :color="color" 17 :color="color"
18 >{{ text }}</v-snackbar> 18 >{{ text }}</v-snackbar>
19 <v-layout align-center justify-center> 19 <v-layout align-center justify-center>
20 <v-flex xs12 sm10 md6 lg4> 20 <v-flex xs12 sm10 md6 lg4>
21 <v-toolbar color="black" dark> 21 <v-toolbar color="black" dark>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-toolbar-title>School Login</v-toolbar-title> 23 <v-toolbar-title>School Login</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 </v-toolbar> 25 </v-toolbar>
26 26
27 <v-card class="elevation-1 pa-1"> 27 <v-card class="elevation-1 pa-1">
28 <v-card-text> 28 <v-card-text>
29 <v-flex xs12 sm12 md12 lg12> 29 <v-flex xs12 sm12 md12 lg12>
30 <v-form ref="form" v-model="valid" lazy-validation> 30 <v-form ref="form" v-model="valid" lazy-validation>
31 <v-text-field 31 <v-text-field
32 v-model="userLogincredentials.email" 32 v-model="userLogincredentials.email"
33 :rules="nameRules" 33 :rules="nameRules"
34 label="Username" 34 label="Username"
35 required 35 required
36 ></v-text-field> 36 ></v-text-field>
37 <v-text-field 37 <v-text-field
38 :rules="[rules.required]" 38 :rules="[rules.required]"
39 v-model="userLogincredentials.password" 39 v-model="userLogincredentials.password"
40 :append-icon="e1 ? 'visibility_off' : 'visibility'" 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 :append-icon-cb="() => (e1 = !e1)" 41 :append-icon-cb="() => (e1 = !e1)"
42 :type="e1 ? 'password' : 'text'" 42 :type="e1 ? 'password' : 'text'"
43 name="input-10-1" 43 name="input-10-1"
44 label="Password" 44 label="Password"
45 counter 45 counter
46 ></v-text-field> 46 ></v-text-field>
47 </v-form> 47 </v-form>
48 <v-layout row wrap> 48 <v-layout row wrap>
49 <v-flex xs6> 49 <v-flex xs6>
50 <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> 50 <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox>
51 </v-flex> 51 </v-flex>
52 <v-flex xs6> 52 <v-flex xs6>
53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> 53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-card-text> 57 </v-card-text>
58 <v-layout> 58 <v-layout>
59 <v-flex sm12 class="my-3"> 59 <v-flex sm12 class="my-3">
60 <v-btn style="margin: auto;display: block;" round color="black" dark large @click="login" :loading="loading">Login</v-btn> 60 <v-btn style="margin: auto;display: block;" round color="black" dark large @click="login" :loading="loading">Login</v-btn>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 </v-layout> 64 </v-layout>
65 </v-card> 65 </v-card>
66 </v-flex> 66 </v-flex>
67 </v-layout> 67 </v-layout>
68 </v-container> 68 </v-container>
69 </v-content> 69 </v-content>
70 <v-footer class="pa-4" color="grey darken-2"></v-footer> 70 <v-footer class="pa-4" color="grey darken-2"></v-footer>
71 </v-app> 71 </v-app>
72 </template> 72 </template>
73 73
74 <script> 74 <script>
75 import http from "@/Services/http.js"; 75 import http from "@/Services/http.js";
76 export default { 76 export default {
77 data() { 77 data() {
78 return { 78 return {
79 snackbar: false, 79 snackbar: false,
80 y: "top", 80 y: "top",
81 x: "right", 81 x: "right",
82 mode: "", 82 mode: "",
83 timeout: 3000, 83 timeout: 3000,
84 text: "", 84 text: "",
85 e1: true, 85 e1: true,
86 loading: false, 86 loading: false,
87 remember: false, 87 remember: false,
88 valid: false, 88 valid: false,
89 userLogincredentials: {}, 89 userLogincredentials: {},
90 nameRules: [ 90 nameRules: [
91 v => !!v || "Username is required" 91 v => !!v || "Username is required"
92 92
93 ], 93 ],
94 password: "", 94 password: "",
95 email:"", 95 email:"",
96 rules: { 96 rules: {
97 required: value => !!value || "password is Required.", 97 required: value => !!value || "password is Required.",
98 // min: v => 98 // min: v =>
99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
100 // v 100 // v
101 // ) && 101 // ) &&
102 // v.length >= 4) || 102 // v.length >= 6) ||
103 // "Min 4 characters upper case lower case symbol required" 103 // "Min 4 characters upper case lower case symbol required"
104 } 104 }
105 }; 105 };
106 }, 106 },
107 methods: { 107 methods: {
108 login() { 108 login() {
109 var userdata = { 109 var userdata = {
110 email: this.userLogincredentials.email, 110 email: this.userLogincredentials.email,
111 password: this.userLogincredentials.password, 111 password: this.userLogincredentials.password,
112 role:"ADMIN" 112 role:"ADMIN"
113 113
114 }; 114 };
115 http() 115 http()
116 .post("/schoolLogin", userdata) 116 .post("/schoolLogin", userdata)
117 .then(response => { 117 .then(response => {
118 this.$store.dispatch("setToken", response.data.data.token); 118 this.$store.dispatch("setToken", response.data.data.token);
119 this.$store.dispatch("Id", response.data.data.id); 119 this.$store.dispatch("Id", response.data.data.id);
120 this.loading = true; 120 this.loading = true;
121 if ((this.snackbar = true)) { 121 if ((this.snackbar = true)) {
122 this.text = "Successfully Login"; 122 this.text = "Successfully Login";
123 } 123 }
124 setTimeout(() => { 124 setTimeout(() => {
125 this.$router.push("/dashboard"); 125 this.$router.push("/dashboard");
126 }, 2000); 126 }, 2000);
127 }) 127 })
128 .catch(err => { 128 .catch(err => {
129 this.text = "Email or Password not matched !!"; 129 this.text = "Email or Password not matched !!";
130 this.snackbar = true; 130 this.snackbar = true;
131 this.loading = false; 131 this.loading = false;
132 }); 132 });
133 } 133 }
134 }, 134 },
135 computed: { 135 computed: {
136 color() { 136 color() {
137 return this.loading ? "success" : "error"; 137 return this.loading ? "success" : "error";
138 } 138 }
139 } 139 }
140 }; 140 };
141 </script> 141 </script>
142 142
143 <style scoped lang="css"> 143 <style scoped lang="css">
144 #login { 144 #login {
145 width: 100%; 145 width: 100%;
146 position: absolute; 146 position: absolute;
147 top: 0; 147 top: 0;
148 left: 0; 148 left: 0;
149 content: ""; 149 content: "";
150 z-index: 0; 150 z-index: 0;
151 } 151 }
152 </style> 152 </style>
153 <style scoped> 153 <style scoped>
154 img { 154 img {
155 position: absolute; 155 position: absolute;
156 top: 13px; 156 top: 13px;
157 left: 50px; 157 left: 50px;
158 } 158 }
159 .v-btn--large { 159 .v-btn--large {
160 padding: 0px 84px; 160 padding: 0px 84px;
161 } 161 }
162 .link{ 162 .link{
163 text-decoration:none; 163 text-decoration:none;
164 } 164 }
165 a { 165 a {
166 color: #696969; 166 color: #696969;
167 } 167 }
168 .forget{ 168 .forget{
169 margin-top:20px; 169 margin-top:20px;
170 } 170 }
171 .mt-4 { 171 .mt-4 {
172 margin-top: 21px !important; 172 margin-top: 21px !important;
173 } 173 }
174 @media screen and (max-width: 600px) { 174 @media screen and (max-width: 600px) {
175 .forget{ 175 .forget{
176 margin-top:none; 176 margin-top:none;
177 margin-left:18px; 177 margin-left:18px;
178 } 178 }
179 img{ 179 img{
180 top:16px; 180 top:16px;
181 left:10px; 181 left:10px;
182 height: 24px; 182 height: 24px;
183 width: 66px;; 183 width: 66px;;
184 } 184 }
185 } 185 }
186 </style> 186 </style>
src/pages/Students.vue
Diff comments   View file @f0281dd
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar 3 <v-toolbar
4 color="grey" 4 color="grey"
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 StudentS ****** --> 11 <!-- ****** SEARCH ALL EXISTING StudentS ****** -->
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 prepend-icon="search" 15 prepend-icon="search"
16 label="Find your Teachers" 16 label="Find your Teachers"
17 v-model="search" 17 v-model="search"
18 color="black" 18 color="black"
19 @change="getStudentList" 19 @change="getStudentList"
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 Students</v-tab> 49 >Existing Students</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 Students</v-tab> 56 >Add New Students</v-tab>
57 <!-- ****** EDITS StudentS Dtails ****** --> 57 <!-- ****** EDITS StudentS Dtails ****** -->
58 <v-tab-item> 58 <v-tab-item>
59 <v-snackbar 59 <v-snackbar
60 :timeout="timeout" 60 :timeout="timeout"
61 :top="y === 'top'" 61 :top="y === 'top'"
62 :right="x === 'right'" 62 :right="x === 'right'"
63 :vertical="mode === 'vertical'" 63 :vertical="mode === 'vertical'"
64 v-model="snackbar" 64 v-model="snackbar"
65 color="success" 65 color="success"
66 >{{ text }}</v-snackbar> 66 >{{ text }}</v-snackbar>
67 <v-dialog v-model="dialog" max-width="500px"> 67 <v-dialog v-model="dialog" max-width="500px">
68 <v-toolbar color="white"> 68 <v-toolbar color="white">
69 <v-spacer></v-spacer> 69 <v-spacer></v-spacer>
70 <v-toolbar-title>Edit Profile</v-toolbar-title> 70 <v-toolbar-title>Edit Profile</v-toolbar-title>
71 <v-spacer></v-spacer> 71 <v-spacer></v-spacer>
72 </v-toolbar> 72 </v-toolbar>
73 <v-card> 73 <v-card>
74 <v-flex align-center justify-center layout text-xs-center> 74 <!-- <v-flex align-center justify-center layout text-xs-center>
75 <v-avatar size="50px" style="position:absolute; top:10px; "> 75 <v-avatar size="50px" style="position:absolute; top:10px; ">
76 <img src="/static/icon/user.png"> 76 <img src="/static/icon/user.png">
77 </v-avatar> 77 </v-avatar>
78 </v-flex> 78 </v-flex> -->
79 <v-card-text> 79 <v-card-text>
80 <v-container> 80 <v-container>
81 <v-layout wrap justify-center> 81 <v-layout wrap justify-center>
82 <v-flex xs12 sm9> 82 <v-flex xs12 sm9>
83 <v-form ref="form" v-model="valid" lazy-validation> 83 <v-form ref="form" v-model="valid" lazy-validation>
84 <v-layout style="position:relative; top:15px;"> 84 <v-layout style="position:relative;">
85 <v-flex xs4 class="pt-4 subheading"> 85 <v-flex xs4 class="pt-4 subheading">
86 <label>Full Name:</label> 86 <label>Full Name:</label>
87 </v-flex> 87 </v-flex>
88 <v-flex xs8> 88 <v-flex xs8>
89 <v-text-field 89 <v-text-field
90 v-model="editedItem.name" 90 v-model="editedItem.name"
91 v-validate="'required'" 91 v-validate="'required'"
92 :rules="nameRules" 92 :rules="nameRules"
93 data-vv-name="Name" 93 data-vv-name="Name"
94 required 94 required
95 ></v-text-field> 95 ></v-text-field>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 <v-layout> 98 <v-layout>
99 <v-flex xs4 class="pt-4 subheading"> 99 <v-flex xs4 class="pt-4 subheading">
100 <label>Email No.:</label> 100 <label>Email No.:</label>
101 </v-flex> 101 </v-flex>
102 <v-flex xs8> 102 <v-flex xs8>
103 <v-text-field 103 <v-text-field
104 v-model="editedItem.email" 104 v-model="editedItem.email"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label>Mobile No.:</label> 111 <label>Mobile No.:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs8> 113 <v-flex xs8>
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.mobile" 115 v-model="editedItem.mobile"
116 required 116 required
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 class="pt-4 subheading"> 121 <v-flex xs4 class="pt-4 subheading">
122 <label>Date of Birth:</label> 122 <label>Date of Birth:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8> 124 <v-flex xs8>
125 <v-menu 125 <v-menu
126 ref="menu1" 126 ref="menu1"
127 :close-on-content-click="false" 127 :close-on-content-click="false"
128 v-model="menu1" 128 v-model="menu1"
129 :nudge-right="40" 129 :nudge-right="40"
130 lazy 130 lazy
131 transition="scale-transition" 131 transition="scale-transition"
132 offset-y 132 offset-y
133 full-width 133 full-width
134 min-width="290px" 134 min-width="290px"
135 > 135 >
136 <v-text-field 136 <v-text-field
137 slot="activator" 137 slot="activator"
138 v-model="editedItem.dob" 138 v-model="editedItem.dob"
139 placeholder="Select date" 139 placeholder="Select date"
140 ></v-text-field> 140 ></v-text-field>
141 <v-date-picker 141 <v-date-picker
142 ref="picker" 142 ref="picker"
143 v-model="editedItem.dob" 143 v-model="editedItem.dob"
144 :max="new Date().toISOString().substr(0, 10)" 144 :max="new Date().toISOString().substr(0, 10)"
145 min="1950-01-01" 145 min="1950-01-01"
146 @input="menu1 = false" 146 @input="menu1 = false"
147 ></v-date-picker> 147 ></v-date-picker>
148 </v-menu> 148 </v-menu>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 <v-card-actions> 151 <v-card-actions>
152 <v-btn round dark @click.native="close">Cancel</v-btn> 152 <v-btn round dark @click.native="close">Cancel</v-btn>
153 <v-spacer></v-spacer> 153 <v-spacer></v-spacer>
154 <v-btn round dark @click="save">Save</v-btn> 154 <v-btn round dark @click="save">Save</v-btn>
155 </v-card-actions> 155 </v-card-actions>
156 </v-form> 156 </v-form>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-container> 159 </v-container>
160 </v-card-text> 160 </v-card-text>
161 </v-card> 161 </v-card>
162 </v-dialog> 162 </v-dialog>
163 <!-- ****** PROFILE VIEW StudentS Details ****** --> 163 <!-- ****** PROFILE VIEW StudentS Details ****** -->
164 <v-dialog v-model="dialog1" max-width="600px"> 164 <v-dialog v-model="dialog1" max-width="600px">
165 <v-toolbar color="white"> 165 <v-toolbar color="white">
166 <v-spacer></v-spacer> 166 <v-spacer></v-spacer>
167 <v-toolbar-title>Profile</v-toolbar-title> 167 <v-toolbar-title>Profile</v-toolbar-title>
168 <v-spacer></v-spacer> 168 <v-spacer></v-spacer>
169 <v-icon @click="close1">close</v-icon> 169 <v-icon @click="close1">close</v-icon>
170 </v-toolbar> 170 </v-toolbar>
171 <v-card> 171 <v-card>
172 <v-flex align-center justify-center layout text-xs-center> 172 <v-flex align-center justify-center layout text-xs-center>
173 <v-avatar size="50px" style="position:absolute; top:20px;"> 173 <v-avatar size="50px" style="position:absolute; top:20px;">
174 <img src="/static/icon/user.png"> 174 <img src="/static/icon/user.png">
175 </v-avatar> 175 </v-avatar>
176 </v-flex> 176 </v-flex>
177 <v-card-text> 177 <v-card-text>
178 <v-container grid-list-md> 178 <v-container grid-list-md>
179 <v-layout wrap> 179 <v-layout wrap>
180 <v-flex><br><br> 180 <v-flex><br><br>
181 <v-layout> 181 <v-layout>
182 <v-flex xs5 sm6> 182 <v-flex xs5 sm6>
183 <h5 class="right my-1">Full Name:</h5> 183 <h5 class="right my-1">Full Name:</h5>
184 </v-flex> 184 </v-flex>
185 <v-flex sm6 xs8> 185 <v-flex sm6 xs8>
186 <h5 class="my-1">{{ editedItem.name }}</h5> 186 <h5 class="my-1">{{ editedItem.name }}</h5>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 <v-layout> 189 <v-layout>
190 <v-flex xs5 sm6> 190 <v-flex xs5 sm6>
191 <h5 class="right my-1">Email:</h5> 191 <h5 class="right my-1">Email:</h5>
192 </v-flex> 192 </v-flex>
193 <v-flex sm6 xs8> 193 <v-flex sm6 xs8>
194 <h5 class="my-1">{{ editedItem.email }}</h5> 194 <h5 class="my-1">{{ editedItem.email }}</h5>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 <v-layout> 197 <v-layout>
198 <v-flex xs6 sm6 > 198 <v-flex xs6 sm6 >
199 <h5 class="right my-1">Mobile No. :</h5> 199 <h5 class="right my-1">Mobile No. :</h5>
200 </v-flex> 200 </v-flex>
201 <v-flex sm6 xs8> 201 <v-flex sm6 xs8>
202 <h5 class="my-1">{{ editedItem.mobile }}</h5> 202 <h5 class="my-1">{{ editedItem.mobile }}</h5>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 <v-layout> 205 <v-layout>
206 <v-flex xs6 sm6 > 206 <v-flex xs6 sm6 >
207 <h5 class="right my-1">Date Of Birth:</h5> 207 <h5 class="right my-1">Date Of Birth:</h5>
208 </v-flex> 208 </v-flex>
209 <v-flex sm6 xs8> 209 <v-flex sm6 xs8>
210 <h5 class="my-1">{{ editedItem.dob }}</h5> 210 <h5 class="my-1">{{ editedItem.dob }}</h5>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 </v-container> 215 </v-container>
216 </v-card-text> 216 </v-card-text>
217 </v-card> 217 </v-card>
218 </v-dialog> 218 </v-dialog>
219 219
220 <!-- <v-dialog v-model="dialog2" width="700px"> 220 <!-- <v-dialog v-model="dialog2" width="700px">
221 <v-card> 221 <v-card>
222 <div id="dialog"> 222 <div id="dialog">
223 <h4> 223 <h4>
224 <b>Report</b> 224 <b>Report</b>
225 </h4> 225 </h4>
226 <h5 id="name"> 226 <h5 id="name">
227 <b>Patient Name:</b> 227 <b>Patient Name:</b>
228 {{ editedItem.name }} 228 {{ editedItem.name }}
229 </h5> 229 </h5>
230 <h5 id="m">Select Month:</h5> 230 <h5 id="m">Select Month:</h5>
231 <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn> 231 <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn>
232 <v-spacer></v-spacer> 232 <v-spacer></v-spacer>
233 <v-icon id="icon" @click="close2">close</v-icon> 233 <v-icon id="icon" @click="close2">close</v-icon>
234 234
235 <span id="bt"> 235 <span id="bt">
236 <v-btn 236 <v-btn
237 color="grey darken-2" 237 color="grey darken-2"
238 v-on:click="component='one-month' , activebtn('existing')" 238 v-on:click="component='one-month' , activebtn('existing')"
239 v-bind:class="{ activebtn: isActivebtn }" 239 v-bind:class="{ activebtn: isActivebtn }"
240 flat 240 flat
241 >1 month</v-btn> 241 >1 month</v-btn>
242 <v-btn 242 <v-btn
243 color="grey darken-2" 243 color="grey darken-2"
244 v-on:click="component='three-month' , activebtn('new')" 244 v-on:click="component='three-month' , activebtn('new')"
245 v-bind:class="{ activebtn: Activebtn1 }" 245 v-bind:class="{ activebtn: Activebtn1 }"
246 flat 246 flat
247 >3 Month</v-btn> 247 >3 Month</v-btn>
248 <v-btn 248 <v-btn
249 color="grey darken-2" 249 color="grey darken-2"
250 v-on:click="component='six-month' , activebtn('new1')" 250 v-on:click="component='six-month' , activebtn('new1')"
251 v-bind:class="{ activebtn: Activebtn2 }" 251 v-bind:class="{ activebtn: Activebtn2 }"
252 flat 252 flat
253 >6 Month</v-btn> 253 >6 Month</v-btn>
254 <v-btn 254 <v-btn
255 color="grey darken-2" 255 color="grey darken-2"
256 v-on:click="component='nine-month' , activebtn('new2')" 256 v-on:click="component='nine-month' , activebtn('new2')"
257 v-bind:class="{ activebtn: Activebtn3 }" 257 v-bind:class="{ activebtn: Activebtn3 }"
258 flat 258 flat
259 >9 Month</v-btn> 259 >9 Month</v-btn>
260 <img id="e" @click="mail" src="/static/icon/email1.png"> 260 <img id="e" @click="mail" src="/static/icon/email1.png">
261 <img id="d" @click="download" src="/static/icon/download1.png"> 261 <img id="d" @click="download" src="/static/icon/download1.png">
262 </span> 262 </span>
263 <component v-bind:is="component"></component> 263 <component v-bind:is="component"></component>
264 </div> 264 </div>
265 </v-card> 265 </v-card>
266 </v-dialog> --> 266 </v-dialog> -->
267 <v-snackbar 267 <v-snackbar
268 :timeout="timeout" 268 :timeout="timeout"
269 :top="y === 'top'" 269 :top="y === 'top'"
270 :right="x === 'right'" 270 :right="x === 'right'"
271 :vertical="mode === 'vertical'" 271 :vertical="mode === 'vertical'"
272 v-model="snackbar" 272 v-model="snackbar"
273 color="success" 273 color="success"
274 >{{ text }}</v-snackbar> 274 >{{ text }}</v-snackbar>
275 <!-- ****** EXISTING-USERS StudentS Table ****** --> 275 <!-- ****** EXISTING-USERS StudentS Table ****** -->
276 <v-data-table 276 <v-data-table
277 :headers="headers" 277 :headers="headers"
278 :items="desserts" 278 :items="desserts"
279 :pagination.sync="pagination" 279 :pagination.sync="pagination"
280 :search="search" 280 :search="search"
281 > <!-- </v-content> 281 > <!-- </v-content>
282 <v-footer class="pa-4" color="grey darken-2"> 282 <v-footer class="pa-4" color="grey darken-2">
283 283
284 </v-footer> --> 284 </v-footer> -->
285 <template slot="items" slot-scope="props"> 285 <template slot="items" slot-scope="props">
286 <td id="td" class="text-xs-center">{{ props.index}}</td> 286 <td id="td" class="text-xs-center">{{ props.index}}</td>
287 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 287 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
288 <!-- <td id="td" class="text-xs-center">{{ props.item.dob }}</td> --> 288 <!-- <td id="td" class="text-xs-center">{{ props.item.dob }}</td> -->
289 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 289 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
290 290
291 <td class="text-xs-center"> 291 <td class="text-xs-center">
292 <span> 292 <span>
293 <!-- <img 293 <!-- <img
294 style="cursor:pointer; height:20px; " 294 style="cursor:pointer; height:20px; "
295 class="mr-5" 295 class="mr-5"
296 @click="report(props.item)" 296 @click="report(props.item)"
297 src="/static/icon/List1.png" 297 src="/static/icon/List1.png"
298 > --> 298 > -->
299 <img 299 <img
300 style="cursor:pointer; width:25px; height:18px; " 300 style="cursor:pointer; width:25px; height:18px; "
301 class="mr-5" 301 class="mr-5"
302 @click="profile(props.item)" 302 @click="profile(props.item)"
303 src="/static/icon/eye1.png" 303 src="/static/icon/eye1.png"
304 > 304 >
305 <img 305 <img
306 style="cursor:pointer; width:20px; height:18px; " 306 style="cursor:pointer; width:20px; height:18px; "
307 class="mr-5" 307 class="mr-5"
308 @click="editItem(props.item)" 308 @click="editItem(props.item)"
309 src="/static/icon/edit1.png" 309 src="/static/icon/edit1.png"
310 > 310 >
311 <img 311 <img
312 style="cursor:pointer; height:20px; " 312 style="cursor:pointer; height:20px; "
313 class="mr-5" 313 class="mr-5"
314 @click="deleteItem(props.item)" 314 @click="deleteItem(props.item)"
315 src="/static/icon/delete1.png" 315 src="/static/icon/delete1.png"
316 > 316 >
317 </span> 317 </span>
318 </td> 318 </td>
319 </template> 319 </template>
320 <v-alert 320 <v-alert
321 slot="no-results" 321 slot="no-results"
322 :value="true" 322 :value="true"
323 color="error" 323 color="error"
324 icon="warning" 324 icon="warning"
325 >Your search for "{{ search }}" found no results.</v-alert> 325 >Your search for "{{ search }}" found no results.</v-alert>
326 </v-data-table> 326 </v-data-table>
327 </v-tab-item> 327 </v-tab-item>
328 <!-- ****** ADD multiple Students ****** --> 328 <!-- ****** ADD multiple Students ****** -->
329 <v-tab-item> 329 <v-tab-item>
330 <v-container> 330 <v-container>
331 <v-snackbar 331 <v-snackbar
332 :timeout="timeout" 332 :timeout="timeout"
333 :top="y === 'top'" 333 :top="y === 'top'"
334 :right="x === 'right'" 334 :right="x === 'right'"
335 :vertical="mode === 'vertical'" 335 :vertical="mode === 'vertical'"
336 v-model="snackbar" 336 v-model="snackbar"
337 color="success" 337 color="success"
338 >{{ text }}</v-snackbar> 338 >{{ text }}</v-snackbar>
339 <v-flex xs12 sm8 offset-sm2 class="top"> 339 <v-flex xs12 sm8 offset-sm2 class="top">
340 <v-card flat> 340 <v-card flat>
341 <v-container fluid fill-height> 341 <v-container fluid fill-height>
342 <v-layout align-center> 342 <v-layout align-center>
343 <v-flex xs12> 343 <v-flex xs12>
344 <v-flex offset-xs5> 344 <v-flex offset-xs5>
345 <v-avatar size="55px"> 345 <v-avatar size="55px">
346 <img src="/static/icon/user.png"> 346 <img src="/static/icon/user.png">
347 </v-avatar> 347 </v-avatar>
348 </v-flex> 348 </v-flex>
349 <v-form ref="form" v-model="valid" lazy-validation> 349 <v-form ref="form" v-model="valid" lazy-validation>
350 <v-layout> 350 <v-layout>
351 <v-flex xs4 class="pt-4 subheading"> 351 <v-flex xs4 class="pt-4 subheading">
352 <label class="right">Full Name:</label> 352 <label class="right">Full Name:</label>
353 </v-flex> 353 </v-flex>
354 <v-flex xs6 class="ml-3"> 354 <v-flex xs6 class="ml-3">
355 <v-text-field 355 <v-text-field
356 v-model="editedItem.name" 356 v-model="editedItem.name"
357 placeholder="fill your full Name" 357 placeholder="fill your full Name"
358 name="name" 358 name="name"
359 type="text" 359 type="text"
360 :rules="nameRules" 360 :rules="nameRules"
361 required 361 required
362 ></v-text-field> 362 ></v-text-field>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 <!-- <v-layout> 365 <!-- <v-layout>
366 <v-flex xs4 class="pt-4 subheading"> 366 <v-flex xs4 class="pt-4 subheading">
367 <label class="right">Country:</label> 367 <label class="right">Country:</label>
368 </v-flex> 368 </v-flex>
369 <v-flex xs6 class="ml-3"> 369 <v-flex xs6 class="ml-3">
370 <v-select 370 <v-select
371 v-model="editedItem.country" 371 v-model="editedItem.country"
372 :items="countries" 372 :items="countries"
373 label="Select Country" 373 label="Select Country"
374 single-line 374 single-line
375 ></v-select> 375 ></v-select>
376 </v-flex> 376 </v-flex>
377 </v-layout> --> 377 </v-layout> -->
378 <v-layout> 378 <v-layout>
379 <v-flex xs4 class="pt-4 subheading"> 379 <v-flex xs4 class="pt-4 subheading">
380 <label class="right">Email ID:</label> 380 <label class="right">Email ID:</label>
381 </v-flex> 381 </v-flex>
382 <v-flex xs6 class="ml-3"> 382 <v-flex xs6 class="ml-3">
383 <v-text-field 383 <v-text-field
384 placeholder="fill your email" 384 placeholder="fill your email"
385 :rules="emailRules" 385 :rules="emailRules"
386 v-model="editedItem.email" 386 v-model="editedItem.email"
387 type="text" 387 type="text"
388 name="email" 388 name="email"
389 required 389 required
390 ></v-text-field> 390 ></v-text-field>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 <!-- <v-layout> 393 <!-- <v-layout>
394 <v-flex xs4 class="pt-4 subheading"> 394 <v-flex xs4 class="pt-4 subheading">
395 <label class="right">Date of Birth:</label> 395 <label class="right">Date of Birth:</label>
396 </v-flex> 396 </v-flex>
397 <v-flex xs6 class="ml-3"> 397 <v-flex xs6 class="ml-3">
398 <v-menu 398 <v-menu
399 ref="menu" 399 ref="menu"
400 :close-on-content-click="false" 400 :close-on-content-click="false"
401 v-model="menu" 401 v-model="menu"
402 :nudge-right="40" 402 :nudge-right="40"
403 lazy 403 lazy
404 transition="scale-transition" 404 transition="scale-transition"
405 offset-y 405 offset-y
406 full-width 406 full-width
407 min-width="290px" 407 min-width="290px"
408 > 408 >
409 <v-text-field 409 <v-text-field
410 slot="activator" 410 slot="activator"
411 v-model="editedItem.date" 411 v-model="editedItem.date"
412 placeholder="Select date" 412 placeholder="Select date"
413 ></v-text-field> 413 ></v-text-field>
414 <v-date-picker 414 <v-date-picker
415 ref="picker" 415 ref="picker"
416 v-model="editedItem.date" 416 v-model="editedItem.date"
417 :max="new Date().toISOString().substr(0, 10)" 417 :max="new Date().toISOString().substr(0, 10)"
418 min="1950-01-01" 418 min="1950-01-01"
419 @input="menu = false" 419 @input="menu = false"
420 ></v-date-picker> 420 ></v-date-picker>
421 </v-menu> 421 </v-menu>
422 </v-flex> 422 </v-flex>
423 </v-layout> --> 423 </v-layout> -->
424 <v-layout> 424 <v-layout>
425 <v-flex xs12 sm9 offset-sm2> 425 <v-flex xs12 sm9 offset-sm2>
426 <v-card-actions> 426 <v-card-actions>
427 <v-btn @click="clear" round dark>clear</v-btn> 427 <v-btn @click="clear" round dark>clear</v-btn>
428 <v-spacer></v-spacer> 428 <v-spacer></v-spacer>
429 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 429 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
430 </v-card-actions> 430 </v-card-actions>
431 </v-flex> 431 </v-flex>
432 </v-layout> 432 </v-layout>
433 </v-form> 433 </v-form>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 </v-container> 436 </v-container>
437 </v-card> 437 </v-card>
438 </v-flex> 438 </v-flex>
439 </v-container> 439 </v-container>
440 </v-tab-item> 440 </v-tab-item>
441 </v-tabs> 441 </v-tabs>
442 </v-app> 442 </v-app>
443 </template> 443 </template>
444 444
445 <script> 445 <script>
446 // import AppToolbar from '@/components/AppToolbar'; 446 // import AppToolbar from '@/components/AppToolbar';
447 // import onemonth from "@/components/report/onemonth.vue"; 447 // import onemonth from "@/components/report/onemonth.vue";
448 // import threemonth from "@/components/report/threemonth.vue"; 448 // import threemonth from "@/components/report/threemonth.vue";
449 // import sixmonth from "@/components/report/sixmonth.vue"; 449 // import sixmonth from "@/components/report/sixmonth.vue";
450 // import ninemonth from "@/components/report/ninemonth.vue"; 450 // import ninemonth from "@/components/report/ninemonth.vue";
451 // import generatereport from "@/components/report/generatereport.vue"; 451 // import generatereport from "@/components/report/generatereport.vue";
452 import http from "@/Services/http.js"; 452 import http from "@/Services/http.js";
453 import NotificationList from "@/components/widgets/list/NotificationList"; 453 import NotificationList from "@/components/widgets/list/NotificationList";
454 import Util from "@/util"; 454 import Util from "@/util";
455 455
456 export default { 456 export default {
457 components: { 457 components: {
458 // "one-month": onemonth, 458 // "one-month": onemonth,
459 // "three-month": threemonth, 459 // "three-month": threemonth,
460 // "six-month": sixmonth, 460 // "six-month": sixmonth,
461 // "nine-month": ninemonth, 461 // "nine-month": ninemonth,
462 // "report-generate": generatereport, 462 // "report-generate": generatereport,
463 }, 463 },
464 data: () => ({ 464 data: () => ({
465 component: "report-generate", 465 component: "report-generate",
466 snackbar: false, 466 snackbar: false,
467 y: "top", 467 y: "top",
468 x: "right", 468 x: "right",
469 mode: "", 469 mode: "",
470 timeout: 3000, 470 timeout: 3000,
471 text: "", 471 text: "",
472 loading: false, 472 loading: false,
473 date:null, 473 date:null,
474 search: '', 474 search: '',
475 modal: false, 475 modal: false,
476 modaledit:false, 476 modaledit:false,
477 menu: false, 477 menu: false,
478 menu1:false, 478 menu1:false,
479 dialog: false, 479 dialog: false,
480 dialog1: false, 480 dialog1: false,
481 dialog2: false, 481 dialog2: false,
482 valid: true, 482 valid: true,
483 isActive: true, 483 isActive: true,
484 newActive: false, 484 newActive: false,
485 isActivebtn: false, 485 isActivebtn: false,
486 Activebtn1: false, 486 Activebtn1: false,
487 Activebtn2: false, 487 Activebtn2: false,
488 Activebtn3: false, 488 Activebtn3: false,
489 loader: null, 489 loader: null,
490 loading: false, 490 loading: false,
491 loading2: false, 491 loading2: false,
492 loading3: false, 492 loading3: false,
493 loading4: false, 493 loading4: false,
494 details: [], 494 details: [],
495 countries:['US','Canada'], 495 countries:['US','Canada'],
496 AddUsercredentials: {}, 496 AddUsercredentials: {},
497 pagination: { 497 pagination: {
498 rowsPerPage: 15 498 rowsPerPage: 15
499 }, 499 },
500 // rules: { 500 // rules: {
501 // required: value => !!value || "Date of Birth is Required.", 501 // required: value => !!value || "Date of Birth is Required.",
502 // min: v => 502 // min: v =>
503 // (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test( 503 // (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
504 // v 504 // v
505 // ) && 505 // ) &&
506 // v.length > 0) || 506 // v.length > 0) ||
507 // "Please enter a date in the format dd/mm/yyyy" 507 // "Please enter a date in the format dd/mm/yyyy"
508 // }, 508 // },
509 nameRules: [v => !!v || " Full Name is required"], 509 nameRules: [v => !!v || " Full Name is required"],
510 emailRules: [ 510 emailRules: [
511 v => !!v || "E-mail is required", 511 v => !!v || "E-mail is required",
512 v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid' 512 v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
513 ], 513 ],
514 headers: [ 514 headers: [
515 { 515 {
516 text: "No", 516 text: "No",
517 align: "center", 517 align: "center",
518 sortable: false, 518 sortable: false,
519 value: "No" 519 value: "No"
520 }, 520 },
521 { text: "Name", value: "name", sortable: false, align: "center" }, 521 { text: "Name", value: "name", sortable: false, align: "center" },
522 // { text: "Email", value: "email", sortable: false, align: "center" }, 522 // { text: "Email", value: "email", sortable: false, align: "center" },
523 { text: "Mobile", value: "mobile", sortable: false, align: "center" }, 523 { text: "Mobile", value: "mobile", sortable: false, align: "center" },
524 { text: "", value: "", sortable: false, align: "center" } 524 { text: "", value: "", sortable: false, align: "center" }
525 ], 525 ],
526 desserts: [], 526 desserts: [],
527 editedIndex: -1, 527 editedIndex: -1,
528 editedItem: { 528 editedItem: {
529 role: "STUDENT", 529 role: "STUDENT",
530 name: "", 530 name: "",
531 email: "", 531 email: "",
532 }, 532 },
533 defaultItem: { 533 defaultItem: {
534 role: "STUDENT", 534 role: "STUDENT",
535 name: "", 535 name: "",
536 email: "", 536 email: "",
537 }, 537 },
538 userName:'', 538 userName:'',
539 items: [ 539 items: [
540 { 540 {
541 href: "/changepassword", 541 href: "/changepassword",
542 title: "Change Password", 542 title: "Change Password",
543 click: e => { 543 click: e => {
544 console.log(e); 544 console.log(e);
545 } 545 }
546 }, 546 },
547 { 547 {
548 href: "#", 548 href: "#",
549 title: "Logout", 549 title: "Logout",
550 click: e => { 550 click: e => {
551 window.getApp.$emit("APP_LOGOUT"); 551 window.getApp.$emit("APP_LOGOUT");
552 } 552 }
553 } 553 }
554 ] 554 ]
555 }), 555 }),
556 watch: { 556 watch: {
557 menu (val) { 557 menu (val) {
558 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR')) 558 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
559 }, 559 },
560 menu1 (val) { 560 menu1 (val) {
561 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR')) 561 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
562 } 562 }
563 }, 563 },
564 methods: { 564 methods: {
565 getStudentList() { 565 getStudentList() {
566 var token = this.$store.state.token; 566 var token = this.$store.state.token;
567 http() 567 http()
568 .get("/getStudentsList", { 568 .get("/getStudentsList", {
569 headers: { Authorization: "Bearer " + token } 569 headers: { Authorization: "Bearer " + token }
570 }) 570 })
571 .then(response => { 571 .then(response => {
572 this.desserts = response.data.data; 572 this.desserts = response.data.data;
573 console.log("getStudentList=====>",this.desserts) 573 console.log("getStudentList=====>",this.desserts)
574 574
575 }) 575 })
576 .catch(err => { 576 .catch(err => {
577 // console.log("err====>", err); 577 // console.log("err====>", err);
578 this.$router.replace({ path: '/' }); 578 this.$router.replace({ path: '/' });
579 }); 579 });
580 }, 580 },
581 editItem(item) { 581 editItem(item) {
582 this.editedIndex = this.desserts.indexOf(item); 582 this.editedIndex = this.desserts.indexOf(item);
583 this.editedItem = Object.assign({}, item); 583 this.editedItem = Object.assign({}, item);
584 this.dialog = true; 584 this.dialog = true;
585 }, 585 },
586 profile(item) { 586 profile(item) {
587 this.editedIndex = this.desserts.indexOf(item); 587 this.editedIndex = this.desserts.indexOf(item);
588 this.editedItem = Object.assign({}, item); 588 this.editedItem = Object.assign({}, item);
589 this.dialog1 = true; 589 this.dialog1 = true;
590 }, 590 },
591 // report(item) { 591 // report(item) {
592 // this.editedIndex = this.desserts.indexOf(item); 592 // this.editedIndex = this.desserts.indexOf(item);
593 // this.editedItem = Object.assign({}, item); 593 // this.editedItem = Object.assign({}, item);
594 // this.dialog2 = true; 594 // this.dialog2 = true;
595 // }, 595 // },
596 596
597 deleteItem(item) { 597 deleteItem(item) {
598 let deleteStudent = { 598 let deleteStudent = {
599 studentId: item._id 599 studentId: item._id
600 }; 600 };
601 http() 601 http()
602 .delete("/deleteStudent", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 602 .delete("/deleteStudent", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
603 .then(response => { 603 .then(response => {
604 // console.log("deleteUers",deleteStudent) 604 // console.log("deleteUers",deleteStudent)
605 if ((this.snackbar = true)) { 605 if ((this.snackbar = true)) {
606 this.text = "Successfully delete Existing User"; 606 this.text = "Successfully delete Existing User";
607 } 607 }
608 this.getStudentList(); 608 this.getStudentList();
609 }) 609 })
610 .catch(error => { 610 .catch(error => {
611 console.log(error); 611 console.log(error);
612 }); 612 });
613 }, 613 },
614 activeTab(type) { 614 activeTab(type) {
615 switch (type) { 615 switch (type) {
616 case "existing": 616 case "existing":
617 this.newActive = false; 617 this.newActive = false;
618 this.isActive = true; 618 this.isActive = true;
619 break; 619 break;
620 620
621 default: 621 default:
622 this.newActive = true; 622 this.newActive = true;
623 this.isActive = false; 623 this.isActive = false;
624 break; 624 break;
625 } 625 }
626 }, 626 },
627 activebtn(type) { 627 activebtn(type) {
628 switch (type) { 628 switch (type) {
629 case "existing": 629 case "existing":
630 this.Activebtn3 = false; 630 this.Activebtn3 = false;
631 this.Activebtn2 = false; 631 this.Activebtn2 = false;
632 this.Activebtn1 = false; 632 this.Activebtn1 = false;
633 this.isActivebtn = true; 633 this.isActivebtn = true;
634 break; 634 break;
635 case "new": 635 case "new":
636 this.Activebtn3 = false; 636 this.Activebtn3 = false;
637 this.Activebtn2 = false; 637 this.Activebtn2 = false;
638 this.Activebtn1 = true; 638 this.Activebtn1 = true;
639 this.isActivebtn = false; 639 this.isActivebtn = false;
640 break; 640 break;
641 case "new1": 641 case "new1":
642 this.Activebtn3 = false; 642 this.Activebtn3 = false;
643 this.Activebtn2 = true; 643 this.Activebtn2 = true;
644 this.Activebtn1 = false; 644 this.Activebtn1 = false;
645 this.isActivebtn = false; 645 this.isActivebtn = false;
646 break; 646 break;
647 default: 647 default:
648 this.Activebtn3 = true; 648 this.Activebtn3 = true;
649 this.Activebtn2 = false; 649 this.Activebtn2 = false;
650 this.Activebtn1 = false; 650 this.Activebtn1 = false;
651 this.isActivebtn = false; 651 this.isActivebtn = false;
652 break; 652 break;
653 } 653 }
654 }, 654 },
655 close() { 655 close() {
656 this.dialog = false; 656 this.dialog = false;
657 setTimeout(() => { 657 setTimeout(() => {
658 this.editedItem = Object.assign({}, this.defaultItem); 658 this.editedItem = Object.assign({}, this.defaultItem);
659 this.editedIndex = -1; 659 this.editedIndex = -1;
660 }, 300); 660 }, 300);
661 }, 661 },
662 close1() { 662 close1() {
663 this.dialog1 = false; 663 this.dialog1 = false;
664 }, 664 },
665 close2() { 665 close2() {
666 this.dialog2 = false; 666 this.dialog2 = false;
667 }, 667 },
668 submit() { 668 submit() {
669 if (this.$refs.form.validate()) { 669 if (this.$refs.form.validate()) {
670 let addUsers = { 670 let addUsers = {
671 name: this.editedItem.name, 671 name: this.editedItem.name,
672 email: this.editedItem.email, 672 email: this.editedItem.email,
673 role: this.editedItem.role 673 role: this.editedItem.role
674 }; 674 };
675 // console.log(addUsers) 675 // console.log(addUsers)
676 http() 676 http()
677 .post("/createStudent", addUsers) 677 .post("/createStudent", addUsers)
678 .then(response => { 678 .then(response => {
679 this.getStudentList(); 679 this.getStudentList();
680 if (this.snackbar = true) { 680 if (this.snackbar = true) {
681 this.text = "New user added successfully"; 681 this.text = "New user added successfully";
682 } 682 }
683 683
684 this.clear(); 684 this.clear();
685 }) 685 })
686 .catch(error => { 686 .catch(error => {
687 // console.log(error); 687 // console.log(error);
688 if (this.snackbar = true) { 688 if (this.snackbar = true) {
689 this.text = error.response.data.message; 689 this.text = error.response.data.message;
690 } 690 }
691 }); 691 });
692 } 692 }
693 }, 693 },
694 mail() { 694 mail() {
695 }, 695 },
696 download() { 696 download() {
697 }, 697 },
698 clear() { 698 clear() {
699 this.$refs.form.reset(); 699 this.$refs.form.reset();
700 }, 700 },
701 save() { 701 save() {
702 let editUsers = { 702 let editUsers = {
703 name: this.editedItem.name, 703 name: this.editedItem.name,
704 email: this.editedItem.email, 704 email: this.editedItem.email,
705 mobile: this.editedItem.mobile, 705 mobile: this.editedItem.mobile,
706 dob: this.editedItem.mobile, 706 dob: this.editedItem.mobile,
707 studentId: this.editedItem._id 707 studentId: this.editedItem._id
708 }; 708 };
709 http() 709 http()
710 .put("/updateStudent", editUsers) 710 .put("/updateStudent", editUsers)
711 .then(response => { 711 .then(response => {
712 console.log("editUsers",editUsers); 712 console.log("editUsers",editUsers);
713 if ((this.snackbar = true)) { 713 if ((this.snackbar = true)) {
714 this.text = "Successfully Edit Existing User"; 714 this.text = "Successfully Edit Existing User";
715 } 715 }
716 this.getStudentList(); 716 this.getStudentList();
717 }) 717 })
718 .catch(error => { 718 .catch(error => {
719 // console.log(error); 719 // console.log(error);
720 }); 720 });
721 this.close(); 721 this.close();
722 }, 722 },
723 handleDrawerToggle() { 723 handleDrawerToggle() {
724 window.getApp.$emit("APP_DRAWER_TOGGLED"); 724 window.getApp.$emit("APP_DRAWER_TOGGLED");
725 }, 725 },
726 handleFullScreen() { 726 handleFullScreen() {
727 Util.toggleFullScreen(); 727 Util.toggleFullScreen();
728 } 728 }
729 }, 729 },
730 mounted() { 730 mounted() {
731 this.getStudentList(); 731 this.getStudentList();
732 // console.log("Id",this.$store.state.id) 732 // console.log("Id",this.$store.state.id)
733 // console.log("token",this.$store.state.token) 733 // console.log("token",this.$store.state.token)
734 }, 734 },
735 computed:{ 735 computed:{
736 toolbarColor() { 736 toolbarColor() {
737 return this.$vuetify.options.extra.mainNav; 737 return this.$vuetify.options.extra.mainNav;
738 } 738 }
739 } 739 }
740 }; 740 };
741 </script> 741 </script>
742 <style scoped> 742 <style scoped>
743 .v-tabs__div { 743 .v-tabs__div {
744 text-transform: none; 744 text-transform: none;
745 } 745 }
746 .v-input__prepend-outer { 746 .v-input__prepend-outer {
747 margin-right: 0px !important; 747 margin-right: 0px !important;
748 } 748 }
749 .v-card__actions .v-btn { 749 .v-card__actions .v-btn {
750 margin: 0 15px; 750 margin: 0 15px;
751 min-width: 120px; 751 min-width: 120px;
752 } 752 }
753 .primary { 753 .primary {
754 background-color: #aaa !important; 754 background-color: #aaa !important;
755 border-color: #aaa !important; 755 border-color: #aaa !important;
756 } 756 }
757 h4 { 757 h4 {
758 background-repeat: no-repeat; 758 background-repeat: no-repeat;
759 padding: 8px; 759 padding: 8px;
760 margin: auto; 760 margin: auto;
761 font-size: 25px; 761 font-size: 25px;
762 } 762 }
763 #name { 763 #name {
764 position: absolute; 764 position: absolute;
765 left: 100px; 765 left: 100px;
766 top: 17px; 766 top: 17px;
767 } 767 }
768 #icon { 768 #icon {
769 position: absolute; 769 position: absolute;
770 right: 8px; 770 right: 8px;
771 top: 8px; 771 top: 8px;
772 } 772 }
773 #m { 773 #m {
774 position: relative; 774 position: relative;
775 left: 135px; 775 left: 135px;
776 top: -15px; 776 top: -15px;
777 } 777 }
778 #G { 778 #G {
779 position: absolute; 779 position: absolute;
780 top: 38px; 780 top: 38px;
781 color: white; 781 color: white;
782 } 782 }
783 #bt { 783 #bt {
784 position: relative; 784 position: relative;
785 top: -20px; 785 top: -20px;
786 left: 115px; 786 left: 115px;
787 } 787 }
788 #e { 788 #e {
789 position: relative; 789 position: relative;
790 top: 5px; 790 top: 5px;
791 right: -30px; 791 right: -30px;
792 height: 17px; 792 height: 17px;
793 cursor: pointer; 793 cursor: pointer;
794 } 794 }
795 #d { 795 #d {
796 position: relative; 796 position: relative;
797 top: 5px; 797 top: 5px;
798 right: -70px; 798 right: -70px;
799 height: 17px; 799 height: 17px;
800 cursor: pointer; 800 cursor: pointer;
801 } 801 }
802 #td { 802 #td {
803 border: 1px solid #dddddd; 803 border: 1px solid #dddddd;
804 text-align: left; 804 text-align: left;
805 padding: 8px; 805 padding: 8px;
806 } 806 }
807 #dialog { 807 #dialog {
808 height: 550px; 808 height: 550px;
809 } 809 }
810 .active { 810 .active {
811 background-color: black; 811 background-color: black;
812 color: white !important; 812 color: white !important;
813 } 813 }
814 .activebtn { 814 .activebtn {
815 color: black !important; 815 color: black !important;
816 } 816 }
817 #flex { 817 #flex {
818 height: 300px; 818 height: 300px;
819 } 819 }
820 .top{ 820 .top{
821 margin-top:100px; 821 margin-top:100px;
822 } 822 }
823 .v-tabs__item a{ 823 .v-tabs__item a{
824 font-size:16px !important; 824 font-size:16px !important;
825 } 825 }
826 @media screen and (max-width: 769px){ 826 @media screen and (max-width: 769px){
827 .top{ 827 .top{
828 margin-top:0 !important; 828 margin-top:0 !important;
829 } 829 }
830 .userSearch .v-icon { 830 .userSearch .v-icon {
831 font-size: 20px !important; 831 font-size: 20px !important;
832 margin-left: 20px ; 832 margin-left: 20px ;
833 } 833 }
834 } 834 }
835 @media screen and (max-width: 380px) { 835 @media screen and (max-width: 380px) {
836 .right { 836 .right {
837 float: none !important; 837 float: none !important;
838 } 838 }
839 .subheading { 839 .subheading {
840 font-size: 14px !important; 840 font-size: 14px !important;
841 } 841 }
842 .v-card__actions .v-btn{ 842 .v-card__actions .v-btn{
843 margin: 0 0px; 843 margin: 0 0px;
844 min-width: 100px; 844 min-width: 100px;
845 } 845 }
846 /* .searchIcon .v-icon { 846 /* .searchIcon .v-icon {
847 font-size: 20px; 847 font-size: 20px;
848 margin-left: 20px; 848 margin-left: 20px;
849 } */ 849 } */
850 .subheading { 850 .subheading {
851 font-size: 12px !important; 851 font-size: 12px !important;
852 } 852 }
853 h5 { 853 h5 {
854 font-size: 13px; 854 font-size: 13px;
855 } 855 }
856 } 856 }
857 .v-icon{ 857 .v-icon{
858 font-size:30px; 858 font-size:30px;
859 } 859 }
860 @media screen and (min-width: 1270px){ 860 @media screen and (min-width: 1270px){
861 .hide{ 861 .hide{
862 display: none; 862 display: none;
863 } 863 }
864 /* } 864 /* }
865 @media screen and (max-width: 962px) { 865 @media screen and (max-width: 962px) {
866 .imglogo{ 866 .imglogo{
867 position: absolute; 867 position: absolute;
868 top: 13px; 868 top: 13px;
869 left: 13px !important; 869 left: 13px !important;
870 width: 70px; 870 width: 70px;
871 height: 24px; 871 height: 24px;
872 } */ 872 } */
873 } 873 }
874 @media screen and (max-width: 420px){ 874 @media screen and (max-width: 420px){
875 .userSearch .v-text-field .v-label{ 875 .userSearch .v-text-field .v-label{
876 line-height: 24px !important; 876 line-height: 24px !important;
877 } 877 }
878 .userSearch .v-label{ 878 .userSearch .v-label{
879 font-size: 13px !important; 879 font-size: 13px !important;
880 } 880 }
881 .v-list__tile { 881 .v-list__tile {
882 font-size:14px; 882 font-size:14px;
883 padding: 0 10px; 883 padding: 0 10px;
884 } 884 }
885 .name{ 885 .name{
886 font-size:15px; 886 font-size:15px;
887 } 887 }
888 } 888 }
889 </style> 889 </style>
src/pages/forgetpassword.vue
Diff comments   View file @f0281dd
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar color="grey lighten"> 3 <v-toolbar color="grey lighten">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana" /> --> 5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana" /> -->
6 <h3 class="white--text my-3 ml-4">School-Management</h3> 6 <h3 class="white--text my-3 ml-4">School-Management</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-container fluid>
10 <v-container fluid fill-height> 10 <v-layout align-center justify-center fill-height>
11 <v-layout align-center justify-center> 11 <v-flex xs12 sm8 md7 lg8>
12 <v-flex xs12 sm8 md7 lg5> 12 <div>
13 <v-toolbar color="black" dark> 13 <v-app>
14 <v-spacer></v-spacer> 14 <v-stepper v-model="e2">
15 <v-toolbar-title>Forget Password</v-toolbar-title> 15 <v-stepper-header>
16 <v-spacer></v-spacer> 16 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
17 </v-toolbar> 17 <v-divider></v-divider>
18 <v-card class="elevation-1 pa-1"> 18 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
19 <v-card-text> 19 </v-stepper-header>
20 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5> 20 <v-stepper-items>
21 <h5 class="text-xs-center"> We'll send you a reset.</h5> 21 <v-stepper-content step="1">
22 <v-flex lg4 sm6 xs10 offset-sm3 offset-xs1 offset-lg4> 22 <v-content>
23 <v-form class="mt-4"> 23 <v-container fluid>
24 <div class="custom-input-align"> 24 <v-layout align-center justify-center fill-height>
25 <v-text-field 25 <v-flex xs12 sm8 md7 lg10>
26 class="text-md-center" 26 <v-toolbar color="black" dark>
27 v-validate="'required|email'" 27 <v-spacer></v-spacer>
28 v-model="changePassword" 28 <v-toolbar-title>Forget Password</v-toolbar-title>
29 :error-messages="errors.collect('email')" 29 <v-spacer></v-spacer>
30 label="Enter Your email ID" 30 </v-toolbar>
31 data-vv-name="email" 31 <v-card class="elevation-1 pa-1">
32 required> 32 <v-card-text>
33 </v-text-field> 33 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
34 </div> 34 <h5 class="text-xs-center"> We'll send you a reset.</h5>
35 </v-form></v-flex> 35 <v-flex lg4 sm6 xs10 offset-sm3 offset-xs1 offset-lg4>
36 </v-card-text> 36 <v-form class="mt-4">
37 <v-card-actions> 37 <div class="custom-input-align">
38 <v-flex text-xs-center> 38 <v-text-field
39 <v-btn round class="mt-1 button" color="black" dark large @click="reset">Send Request</v-btn></v-flex> 39 class="text-md-center"
40 </v-card-actions> 40 :rules="emailRules"
41 <v-snackbar 41 v-model="forgetemail"
42 :timeout="timeout" 42 label="Enter Your email ID"
43 :top="y === 'top'" 43 required></v-text-field>
44 :right="x === 'right'" 44 </div>
45 :vertical="mode === 'vertical'" 45 </v-form>
46 v-model="snackbar" 46 </v-flex>
47 :color= color 47 </v-card-text>
48 > 48 <v-card-actions>
49 {{ text }} 49 <v-flex text-xs-center>
50 </v-snackbar> 50 <v-btn round class="mt-1 button" color="black" dark large @click="reset, e2 = 2">Send Request</v-btn>
51 </v-snackbar> 51 </v-flex>
52 </v-card> 52 </v-card-actions>
53 </v-flex> 53 <v-snackbar
54 </v-layout> 54 :timeout="timeout"
55 </v-container> 55 :top="y === 'top'"
56 </v-content> 56 :right="x === 'right'"
57 <v-footer class="pa-4" color="grey darken-2"> 57 :vertical="mode === 'vertical'"
58 v-model="snackbar"
59 :color= color
60 >
61 {{ text }}
62 </v-snackbar>
63 </v-snackbar>
64 </v-card>
65 </v-flex>
66 </v-layout>
67 </v-container>
68 </v-content>
69 </v-stepper-content>
70 <v-stepper-content step="2">
71 <v-content>
72 <v-container fluid fill-height>
73 <v-layout align-center justify-center>
74 <v-flex xs12 sm8 md7 lg10>
75 <v-toolbar color="black" dark>
76 <v-spacer></v-spacer>
77 <v-toolbar-title>Forget Password</v-toolbar-title>
78 <v-spacer></v-spacer>
79 </v-toolbar>
80 <v-card class="elevation-1 pa-1">
81 <v-card-text>
82 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5>
83 <h5 class="text-xs-center"> We'll send you a reset.</h5>
84 <v-flex lg4 sm6 xs10 offset-sm3 offset-xs1 offset-lg4>
85 <v-form class="mt-4">
86 <div class="custom-input-align">
87 <v-text-field
88 class="text-md-center"
89 v-model="email"
90 :rules="emailRules"
91 label="Enter Your email ID"
92 required></v-text-field>
93 <v-text-field
94 :rules="[rules.required,rules.min]"
95 v-model="changepassword"
96 :append-icon="e1 ? 'visibility_off' : 'visibility'"
97 :append-icon-cb="() => (e1 = !e1)"
98 :type="e1 ? 'password' : 'text'"
99 name="input-10-1"
100 label="Password"
101 counter
102 ></v-text-field>
103 </div>
104 </v-form>
105 </v-flex>
106 </v-card-text>
107 <v-card-actions>
108 <v-flex text-xs-center>
109 <v-btn round class="mt-1 button" color="black" dark large @click="resetPassword">Send Request</v-btn>
110 </v-flex>
111 </v-card-actions>
112 <v-snackbar
113 :timeout="timeout"
114 :top="y === 'top'"
115 :right="x === 'right'"
116 :vertical="mode === 'vertical'"
117 v-model="snackbar"
118 :color= color
119 >
120 {{ text }}
121 </v-snackbar>
122 </v-snackbar>
123 </v-card>
124 </v-flex>
125 </v-layout>
126 </v-container>
127 </v-content>
128 <v-btn
129 color="black"
130 dark
131 @click="e2 = 1"
132 >
133 Back
134 </v-btn>
135 </v-stepper-content>
136 </v-stepper-items>
137 </v-stepper>
138 </v-app>
139 </div>
140 </v-flex>
141 </v-layout>
142 </v-container>
143 <v-footer class="pa-4" color="grey darken-2">
58 </v-footer> 144 </v-footer>
59 </v-app> 145 </v-app>
60 </template> 146 </template>
147
148
149
61 <script> 150 <script>
62 import http from '@/Services/http.js'; 151 import http from '@/Services/http.js';
63 152
64 export default { 153 export default {
65 data: () => ({ 154 data: () => ({
66 changePassword:'', 155 e1: true,
156 e2:0,
67 snackbar: false, 157 snackbar: false,
68 y: 'top', 158 y: 'top',
69 x: 'right', 159 x: 'right',
70 mode: '', 160 mode: '',
71 timeout: 4000, 161 timeout: 4000,
72 text: '', 162 text: '',
73 loading: false, 163 loading: false,
74 email: '' 164 email: '',
165 forgetemail:'',
166 password:'',
167 changepassword:'',
168 emailRules: [
169 v => !!v || "Email is required"
170
171 ],
172 rules: {
173 required: value => !!value || "password is Required.",
174 min: v =>
175 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
176 v
177 ) &&
178 v.length >= 6) ||
179 "Min 4 characters upper case lower case symbol required"
180 }
75 }), 181 }),
76 182
77 methods: { 183 methods: {
78 reset () { 184 reset () {
79 185 http().get('/schoolForgotPassword?email='+ this.forgetemail)
80 http().get('/schoolForgotPassword?email='+ this.changePassword) 186 .then(response => {
187 // console.log("response=====>",response.data.data.token);
188 this.$store.dispatch("setToken", response.data.data.token);
189 this.loading = true;
190 if(this.snackbar=true){
191 this.text= "Please you Fill Last Step of Forget Password!"
192 }
193 }).catch(err => {
194 this.text="User Not Found or Incorrect Email"
195 this.snackbar= true;
196 this.loading = false;
197 })
198 },
199 resetPassword(){
200 let forgotPassword = {
201 resetToken: this.$store.state.token,
202 email: this.email,
203 password: this.changepassword
204 }
205 http().post('/schoolResetPassword',forgotPassword)
81 .then(response => { 206 .then(response => {
82 console.log("response=====>",response); 207 console.log("response=====>",response);
83 this.loading = true; 208 this.loading = true;
84 if(this.snackbar=true){ 209 if(this.snackbar=true){
85 this.text= "Please check your email and Copy your password!" 210 this.text= "Successfully Change your Password"
86 } 211 }
87 setTimeout(() => { 212 setTimeout(() => {
88 this.$router.push('/'); 213 this.$router.push('/');
89 }, 1000); 214 }, 1000);
90 }).catch(err => { 215 }).catch(err => {
91 this.text="User Not Found or Incorrect Email" 216 this.text="User Not Found or Incorrect Email"
92 this.snackbar= true; 217 this.snackbar= true;
93 this.loading = false; 218 this.loading = false;
94 }) 219 })
95 } 220 }
96 }, 221 },
97 computed:{ 222 computed:{
98 color(){ 223 color(){
99 return this.loading ? 'success' : 'error' 224 return this.loading ? 'success' : 'error'
100 } 225 }
101 } 226 }
102 227
103 }; 228 };
104 </script> 229 </script>undefined<style scoped lang="css">
105 <style scoped lang="css">
106 #login { 230 #login {
107 height: 50%; 231 height: 50%;
108 width: 100%; 232 width: 100%;
109 position: absolute; 233 position: absolute;
110 top: 0; 234 top: 0;
111 left: 0; 235 left: 0;
112 content: ""; 236 content: "";
113 z-index: 0; 237 z-index: 0;
114 } 238 }
115 img{ 239 img{
116 position:absolute; 240 position:absolute;
117 top:13px; 241 top:13px;
118 left:50px; 242 left:50px;
119 } 243 }
120 .v-btn--large { 244 .v-btn--large {
121 padding: 0px 74px; 245 padding: 0px 74px;
122 } 246 }
123 .button{ 247 .button{
124 text-transform: none; 248 text-transform: none;
125 } 249 }
126 @media screen and (max-width: 472px) { 250 @media screen and (max-width: 472px) {
127 .v-btn--large { 251 .v-btn--large {
128 padding:0px 20px !important; 252 padding:0px 20px !important;
129 font-size:13px; 253 font-size:13px;
130 } 254 }
131 h5 { 255 h5 {
132 font-size: 11px; 256 font-size: 11px;
133 } 257 }
134 } 258 }
135 @media screen and (max-width: 600px) { 259 @media screen and (max-width: 600px) {
136 img{ 260 img{
137 top:16px; 261 top:16px;
138 left:10px; 262 left:10px;
139 height: 24px; 263 height: 24px;
140 width: 66px;; 264 width: 66px;;
141 } 265 }
142 } 266 }