viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 9f9522c1d91ab0728537cecb5ab5d9abcd866ff3

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

fix button text according to design in mail

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