viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit f84ff8f5ab33951f1a87eb453bfc84b26ac9e777

Authored by Jatinder Singh
1 parent defcc5da3a
Exists in master and in 3 other branches amber-development, development, ui-design

report page changes

Showing 8 changed files with 83 additions and 41 deletions   Show diff stats
src/components/report/generatereport.vue
Diff comments   View file @f84ff8f
File was created 1 <template>
2 <h5 id="report"><b>Select month to generate report</b></h5>
3 </template>
4 <style>
5 #report{
6 position: absolute;
7 top: 275px;
8 left:230px
9 }
10 </style>
src/components/report/ninemonth.vue
Diff comments   View file @f84ff8f
File was created 1 <template>
2
3 <h3> nine month report</h3>
4
5 </template>
src/components/report/onemonth.vue
Diff comments   View file @f84ff8f
File was created 1 <template>
2 <h3> first month report</h3>
3 </template>
src/components/report/sixmonth.vue
Diff comments   View file @f84ff8f
File was created 1 <template>
2
3 <h3> six month report</h3>
4
5 </template>
src/components/report/threemonth.vue
Diff comments   View file @f84ff8f
File was created 1 <template>
2
3 <h3> three month report</h3>
4 </template>
src/pages/Dashboard.vue
Diff comments   View file @f84ff8f
1 <template> 1 <template>
2 <v-tabs 2 <v-tabs
3 grow 3 grow
4 slider-color="black" 4 slider-color="black"
5 > 5 >
6 6
7 <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab"> 7 <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
8 Existing user 8 Existing user
9 </v-tab> 9 </v-tab>
10 10
11 <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1"> 11 <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
12 Add New Users 12 Add New Users
13 </v-tab> 13 </v-tab>
14 14
15 <v-tab-item> 15 <v-tab-item>
16 <v-dialog v-model="dialog" max-width="500px"> 16 <v-dialog v-model="dialog" max-width="500px">
17 <v-toolbar color="white"> 17 <v-toolbar color="white">
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-toolbar-title>Edit Profile</v-toolbar-title> 19 <v-toolbar-title>Edit Profile</v-toolbar-title>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 </v-toolbar> 21 </v-toolbar>
22 <v-card> 22 <v-card>
23 <v-flex align-center justify-center layout text-xs-center> 23 <v-flex align-center justify-center layout text-xs-center>
24 <v-avatar size="50px" style="position:absolute; top:10px; "> 24 <v-avatar size="50px" style="position:absolute; top:10px; ">
25 <img src="/static/icon/user.png"/></v-avatar> 25 <img src="/static/icon/user.png"/></v-avatar>
26 </v-flex> 26 </v-flex>
27 <v-card-text> 27 <v-card-text>
28 <v-container> 28 <v-container>
29 <v-layout wrap justify-center> 29 <v-layout wrap justify-center>
30 <v-flex xs12 sm9> 30 <v-flex xs12 sm9>
31 <v-form> 31 <v-form>
32 32
33 <v-layout style="position:relative; top:15px;"> 33 <v-layout style="position:relative; top:15px;">
34 <v-flex xs4 class="pt-4 subheading"> 34 <v-flex xs4 class="pt-4 subheading">
35 <label>First Name: </label> 35 <label>First Name: </label>
36 </v-flex> 36 </v-flex>
37 <v-flex xs8> 37 <v-flex xs8>
38 <v-text-field 38 <v-text-field
39 v-model="editedItem.Name" 39 v-model="editedItem.Name"
40 v-validate="'required'" 40 v-validate="'required'"
41 :rules="nameRules" 41 :rules="nameRules"
42 data-vv-name="Name" 42 data-vv-name="Name"
43 required 43 required
44 ></v-text-field></v-flex></v-layout> 44 ></v-text-field></v-flex></v-layout>
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 class="pt-4 subheading"> 46 <v-flex xs4 class="pt-4 subheading">
47 <label>Last Name: </label> 47 <label>Last Name: </label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs8> 49 <v-flex xs8>
50 <v-text-field 50 <v-text-field
51 v-model="editedItem.LName" 51 v-model="editedItem.LName"
52 v-validate="'required'" 52 v-validate="'required'"
53 :rules="lnameRules" 53 :rules="lnameRules"
54 data-vv-name="Name" 54 data-vv-name="Name"
55 required 55 required
56 ></v-text-field></v-flex></v-layout> 56 ></v-text-field></v-flex></v-layout>
57 57
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label>Email ID: </label> 60 <label>Email ID: </label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8> 62 <v-flex xs8>
63 <v-text-field 63 <v-text-field
64 v-model="editedItem.Email" 64 v-model="editedItem.Email"
65 v-validate="'required|email'" 65 v-validate="'required|email'"
66 :rules="emailRules" 66 :rules="emailRules"
67 data-vv-name="E-mail" 67 data-vv-name="E-mail"
68 required 68 required
69 ></v-text-field></v-flex></v-layout> 69 ></v-text-field></v-flex></v-layout>
70 <v-layout> 70 <v-layout>
71 <v-flex xs4 class="pt-4 subheading"> 71 <v-flex xs4 class="pt-4 subheading">
72 <label>Date of Birth: </label> 72 <label>Date of Birth: </label>
73 </v-flex> 73 </v-flex>
74 <v-flex xs8> 74 <v-flex xs8>
75 <v-text-field 75 <v-text-field
76 v-model="editedItem.DOB" 76 v-model="editedItem.DOB"
77 :rules="[rules.required, rules.min]" 77 :rules="[rules.required, rules.min]"
78 ></v-text-field></v-flex></v-layout> 78 ></v-text-field></v-flex></v-layout>
79 <v-card-actions> 79 <v-card-actions>
80 80
81 <v-btn round dark @click.native="close">Cancel</v-btn> 81 <v-btn round dark @click.native="close">Cancel</v-btn>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 <v-btn round dark @click.native="save">Save</v-btn> 83 <v-btn round dark @click.native="save">Save</v-btn>
84 84
85 </v-card-actions> 85 </v-card-actions>
86 </v-form> 86 </v-form>
87 </v-flex> 87 </v-flex>
88 </v-layout> 88 </v-layout>
89 </v-container> 89 </v-container>
90 </v-card-text> 90 </v-card-text>
91 </v-card> 91 </v-card>
92 </v-dialog> 92 </v-dialog>
93 93
94 <v-dialog v-model="dialog1" max-width="500px"> 94 <v-dialog v-model="dialog1" max-width="500px">
95 <v-toolbar color="white"> 95 <v-toolbar color="white">
96 <v-spacer></v-spacer> 96 <v-spacer></v-spacer>
97 <v-toolbar-title>Profile</v-toolbar-title> 97 <v-toolbar-title>Profile</v-toolbar-title>
98 <v-spacer></v-spacer> 98 <v-spacer></v-spacer>
99 <v-icon @click="close1">close</v-icon> 99 <v-icon @click="close1">close</v-icon>
100 </v-toolbar> 100 </v-toolbar>
101 101
102 102
103 <v-card> 103 <v-card>
104 <v-flex align-center justify-center layout text-xs-center> 104 <v-flex align-center justify-center layout text-xs-center>
105 <v-avatar size="50px" style="position:absolute; top:20px;"> 105 <v-avatar size="50px" style="position:absolute; top:20px;">
106 <img src="/static/icon/user.png"/> </v-avatar> 106 <img src="/static/icon/user.png"/> </v-avatar>
107 </v-flex> 107 </v-flex>
108 <v-card-text> 108 <v-card-text>
109 <v-container grid-list-md> 109 <v-container grid-list-md>
110 <v-layout wrap justify-center> 110 <v-layout wrap justify-center>
111 <v-flex offset-xs3 id="flex"> 111 <v-flex offset-xs3 id="flex">
112 112
113 <br><br> 113 <br><br>
114 <table style="position:absolute; top:110px;"> 114 <table style="position:absolute; top:110px;">
115 <th> 115 <th>
116 <tr><h5><b>First Name:</b></h5></tr><br> 116 <tr><h5><b>First Name:</b></h5></tr><br>
117 <tr><h5><b>Last Name:</b></h5></tr><br> 117 <tr><h5><b>Last Name:</b></h5></tr><br>
118 <tr><h5><b>Email:</b></h5></tr><br> 118 <tr><h5><b>Email:</b></h5></tr><br>
119 <tr><h5><b>Date Of Birth:</b></h5></tr> 119 <tr><h5><b>Date Of Birth:</b></h5></tr>
120 </th> 120 </th>
121 <th> 121 <th>
122 <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br> 122 <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br>
123 <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br> 123 <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br>
124 <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br> 124 <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br>
125 <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr> 125 <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr>
126 </th> 126 </th>
127 127
128 128
129 </table> 129 </table>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-container> 132 </v-container>
133 </v-card-text> 133 </v-card-text>
134 </v-card> 134 </v-card>
135 </v-dialog> 135 </v-dialog>
136 136
137 <v-dialog v-model="dialog2" max-width="700px"> 137 <v-dialog v-model="dialog2" max-width="700px">
138 138
139 <v-card> 139 <v-card>
140 <div id="dialog"> 140 <div id="dialog">
141 <h4><b> Report </b> </h4> 141 <h4><b> Report </b> </h4>
142 <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5> 142 <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5>
143 <h5 id="m">Select Month:</h5> 143 <h5 id="m">Select Month:</h5>
144 <v-btn flat id="G">Generate</v-btn> 144 <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-icon id="icon" @click="close2">close</v-icon> 146 <v-icon id="icon" @click="close2">close</v-icon>
147
147 <span id="bt"> 148 <span id="bt">
148 <v-btn flat>1 month</v-btn> 149
149 150 <v-btn color="grey darken-2" v-on:click="component='one-month'" flat>1 month</v-btn>
150 <v-btn flat>3 Month</v-btn> 151 <v-btn color="grey darken-2" v-on:click="component='three-month'" flat>3 Month</v-btn>
151 <v-btn flat>6 Month</v-btn> 152 <v-btn color="grey darken-2" v-on:click="component='six-month'" flat>6 Month</v-btn>
152 <v-btn flat>9 Month</v-btn> 153 <v-btn color="grey darken-2" v-on:click="component='nine-month'" flat>9 Month</v-btn>
153 <!-- <v-flex xs10>
154 <v-tabs
155 slider-color="transparent"
156 >
157 <v-tab ripple>1 Month</v-tab>
158 <v-tab ripple>3 Month</v-tab>
159 <v-tab ripple>6 Month</v-tab>
160 <v-tab ripple>9 Month</v-tab> -->
161 <img id="e" @click="mail" src="/static/icon/email1.png"/> 154 <img id="e" @click="mail" src="/static/icon/email1.png"/>
162 <img id="d" @click="download" src="/static/icon/download1.png"/> 155 <img id="d" @click="download" src="/static/icon/download1.png"/>
163 <!-- </v-tabs></v-flex> -->
164 </span> 156 </span>
165 <v-card-text> 157 <component v-bind:is="component"></component>
166 <h5 style="position: absolute; top:275px; left:230px"><b>Select month to generate report</b></h5> 158
167 </v-card-text> 159
168 </div> 160 </div>
169 </v-card> 161 </v-card>
170 </v-dialog> 162 </v-dialog>
171 163
172 <v-data-table 164 <v-data-table
173 :headers="headers" 165 :headers="headers"
174 :items="desserts" 166 :items="desserts"
175 :pagination.sync="pagination" 167 :pagination.sync="pagination"
176 > 168 >
177 <template slot="items" slot-scope="props"> 169 <template slot="items" slot-scope="props">
178 <td id="td" class="text-xs-center">{{ props.item.No }}</td> 170 <td id="td" class="text-xs-center">{{ props.item.No }}</td>
179 <td id="td" class="text-xs-center">{{ props.item.Name+' '+props.item.LName }}</td> 171 <td id="td" class="text-xs-center">{{ props.item.Name+' '+props.item.LName }}</td>
180 <td id="td" class="text-xs-center">{{ props.item.Email }}</td> 172 <td id="td" class="text-xs-center">{{ props.item.Email }}</td>
181 173
182 174
183 <td class="text-xs-center"> 175 <td class="text-xs-center">
184 176
185 <span> 177 <span>
186 <img style="cursor:pointer; height:20px; " class="mr-5" @click="report(props.item)" src="/static/icon/List1.png"/> 178 <img style="cursor:pointer; height:20px; " class="mr-5" @click="report(props.item)" src="/static/icon/List1.png"/>
187 <img style="cursor:pointer; width:25px; height:18px; " class="mr-5" @click="profile(props.item)" src="/static/icon/eye1.png"/> 179 <img style="cursor:pointer; width:25px; height:18px; " class="mr-5" @click="profile(props.item)" src="/static/icon/eye1.png"/>
188 <img style="cursor:pointer; width:20px; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> 180 <img style="cursor:pointer; width:20px; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
189 <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> 181 <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
190 </span> 182 </span>
191 </td> 183 </td>
192 184
193 </template> 185 </template>
194 186
195 </v-data-table> 187 </v-data-table>
196
197 </v-tab-item> 188 </v-tab-item>
198 <v-tab-item> 189 <v-tab-item>
199 <v-flex xs12 sm6 offset-sm3> 190 <v-flex xs12 sm6 offset-sm3>
200 191
201 192
202 <v-card flat> 193 <v-card flat>
203 <v-container fluid fill-height> 194 <v-container fluid fill-height>
204 <v-layout align-center> 195 <v-layout align-center>
205 <v-flex xs12 sm8 offset-sm2> 196 <v-flex xs12 sm8 offset-sm2>
206 <v-flex offset-sm5> 197 <v-flex offset-sm5>
207 <v-avatar size="55px"> 198 <v-avatar size="55px">
208 <img src="/static/icon/user.png"/> </v-avatar> 199 <img src="/static/icon/user.png"/> </v-avatar>
209 </v-flex> 200 </v-flex>
210 <v-form ref="form" v-model="valid" lazy-validation> 201 <v-form ref="form" v-model="valid" lazy-validation>
211 <v-layout> 202 <v-layout>
212 <v-flex xs4 class="pt-4 subheading"> 203 <v-flex xs4 class="pt-4 subheading">
213 <label>First Name: </label> 204 <label>First Name: </label>
214 </v-flex> 205 </v-flex>
215 <v-flex xs8> 206 <v-flex xs8>
216 <v-text-field 207 <v-text-field
217 v-model="AddUsercredentials.firstName" 208 v-model="AddUsercredentials.firstName"
218 :rules="nameRules" 209 :rules="nameRules"
219 required 210 required
220 ></v-text-field> 211 ></v-text-field>
221 </v-flex> 212 </v-flex>
222 </v-layout> 213 </v-layout>
223 <v-layout> 214 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 215 <v-flex xs4 class="pt-4 subheading">
225 <label>Last Name: </label> 216 <label>Last Name: </label>
226 </v-flex> 217 </v-flex>
227 <v-flex xs8> 218 <v-flex xs8>
228 <v-text-field 219 <v-text-field
229 :rules="lnameRules" 220 :rules="lnameRules"
230 v-model="AddUsercredentials.lastName" 221 v-model="AddUsercredentials.lastName"
231 required 222 required
232 ></v-text-field> 223 ></v-text-field>
233 </v-flex> 224 </v-flex>
234 </v-layout> 225 </v-layout>
235 <v-layout> 226 <v-layout>
236 <v-flex xs4 class="pt-4 subheading"> 227 <v-flex xs4 class="pt-4 subheading">
237 <label>Email ID: </label> 228 <label>Email ID: </label>
238 </v-flex> 229 </v-flex>
239 <v-flex xs8> 230 <v-flex xs8>
240 <v-text-field 231 <v-text-field
241 :rules="emailRules" 232 :rules="emailRules"
242 v-model="AddUsercredentials.email" 233 v-model="AddUsercredentials.email"
243 required 234 required
244 ></v-text-field> 235 ></v-text-field>
245 </v-flex> 236 </v-flex>
246 </v-layout> 237 </v-layout>
247 238
248 <v-layout> 239 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
250 <label>Date of Birth: </label> 241 <label>Date of Birth: </label>
251 </v-flex> 242 </v-flex>
252 <v-flex xs8> 243 <v-flex xs8>
253 <v-text-field 244 <v-text-field
254 :rules="[rules.required, rules.min]" 245 :rules="[rules.required, rules.min]"
255 v-model="AddUsercredentials.dob" 246 v-model="AddUsercredentials.dob"
256 required 247 required
257 ></v-text-field> 248 ></v-text-field>
258 </v-flex> 249 </v-flex>
259 </v-layout> 250 </v-layout>
260 <v-card-actions> 251 <v-card-actions>
261 <v-btn @click="clear" round dark>clear</v-btn> 252 <v-btn @click="clear" round dark>clear</v-btn>
262 <v-spacer></v-spacer> 253 <v-spacer></v-spacer>
263 <v-btn @click="submit" round dark> Add </v-btn> 254 <v-btn @click="submit" round dark> Add </v-btn>
264 255
265 </v-card-actions> 256 </v-card-actions>
266 </v-form> 257 </v-form>
267 </v-flex> 258 </v-flex>
268 </v-layout> 259 </v-layout>
269 </v-container> 260 </v-container>
270 </v-card> 261 </v-card>
271 </v-flex> 262 </v-flex>
272 </v-tab-item> 263 </v-tab-item>
273 </v-tabs> 264 </v-tabs>
274 265
275 266
276 </template> 267 </template>
277 268
278 <script> 269 <script>
270 import onemonth from '@/components/report/onemonth.vue';
271 import threemonth from '@/components/report/threemonth.vue';
272 import sixmonth from '@/components/report/sixmonth.vue';
273 import ninemonth from '@/components/report/ninemonth.vue';
274 import generatereport from '@/components/report/generatereport.vue';
279 import axios from 'axios'; 275 import axios from 'axios';
280 export default { 276 export default {
277 components: {
278 'one-month': onemonth,
279 'three-month': threemonth,
280 'six-month': sixmonth,
281 'nine-month': ninemonth,
282 'report-generate': generatereport,
283 },
281 data: () => ({ 284 data: () => ({
285 component: 'report-generate',
282 No: '', 286 No: '',
283 Name: '', 287 Name: '',
284 LName: '', 288 LName: '',
285 Email: '', 289 Email: '',
286 DOB: '', 290 DOB: '',
287 search: '', 291 search: '',
288 firstName: '', 292 firstName: '',
289 lastName: '', 293 lastName: '',
290 email: '', 294 email: '',
291 dob: '', 295 dob: '',
292 dialog: false, 296 dialog: false,
293 dialog1: false, 297 dialog1: false,
294 dialog2: false, 298 dialog2: false,
295 valid: true, 299 valid: true,
296 isActive: true, 300 isActive: true,
297 newActive: false, 301 newActive: false,
298 loader: null, 302 loader: null,
299 loading: false, 303 loading: false,
300 loading2: false, 304 loading2: false,
301 loading3: false, 305 loading3: false,
302 loading4: false, 306 loading4: false,
303 307
304 AddUsercredentials: {}, 308 AddUsercredentials: {},
305 pagination: { 309 pagination: {
306 rowsPerPage: 10 310 rowsPerPage: 10
307 }, 311 },
308 rules: { 312 rules: {
309 required: value => !!value || 'Date of Birth is Required.', 313 required: value => !!value || 'Date of Birth is Required.',
310 min: v => 314 min: v =>
311 (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test( 315 (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
312 v 316 v
313 ) && 317 ) &&
314 v.length > 0) || 318 v.length > 0) ||
315 'Please enter a date in the format dd/mm/yyyy' 319 'Please enter a date in the format dd/mm/yyyy'
316 }, 320 },
317 nameRules: [v => !!v || ' First Name is required'], 321 nameRules: [v => !!v || ' First Name is required'],
318 emailRules: [ 322 emailRules: [
319 v => !!v || 'E-mail is required', 323 v => !!v || 'E-mail is required',
320 v => /.+@.+/.test(v) || 'E-mail must be valid' 324 v => /.+@.+/.test(v) || 'E-mail must be valid'
321 ], 325 ],
322 lnameRules: [v => !!v || ' Last Name is required'], 326 lnameRules: [v => !!v || ' Last Name is required'],
323 headers: [ 327 headers: [
324 { 328 {
325 text: 'No', 329 text: 'No',
326 align: 'center', 330 align: 'center',
327 sortable: false, 331 sortable: false,
328 value: 'No' 332 value: 'No'
329 }, 333 },
330 { text: 'Name', value: 'Name', sortable: false, align: 'center' }, 334 { text: 'Name', value: 'Name', sortable: false, align: 'center' },
331 { text: 'Email', value: 'Email', sortable: false, align: 'center' }, 335 { text: 'Email', value: 'Email', sortable: false, align: 'center' },
332 { text: '', value: '', sortable: false, align: 'center' } 336 { text: '', value: '', sortable: false, align: 'center' }
333 ], 337 ],
334 desserts: [ 338 desserts: [
335 { 339 {
336 No: 1, 340 No: 1,
337 Name: 'Amit', 341 Name: 'Amit',
338 LName: 'goyal', 342 LName: 'goyal',
339 Email: 'jsi@gmail.com', 343 Email: 'jsi@gmail.com',
340 DOB: '22/09/1996' 344 DOB: '22/09/1996'
341 }, 345 },
342 { 346 {
343 No: 2, 347 No: 2,
344 Name: 'Sumit', 348 Name: 'Sumit',
345 LName: 'kumar', 349 LName: 'kumar',
346 Email: 'aasi@gmail.com', 350 Email: 'aasi@gmail.com',
347 DOB: '16/09/1997' 351 DOB: '16/09/1997'
348 } 352 }
349 ], 353 ],
350 editedIndex: -1, 354 editedIndex: -1,
351 editedItem: { 355 editedItem: {
352 No: '', 356 No: '',
353 Name: '', 357 Name: '',
354 LName: '', 358 LName: '',
355 Email: '' 359 Email: ''
356 }, 360 },
357 defaultItem: { 361 defaultItem: {
358 No: '', 362 No: '',
359 Name: '', 363 Name: '',
360 LName: '', 364 LName: '',
361 Email: '' 365 Email: ''
362 } 366 }
363 }), 367 }),
364 // computed: { 368 // computed: {
365 // pages () { 369 // pages () {
366 // if (this.pagination.rowsPerPage == null || 370 // if (this.pagination.rowsPerPage == null ||
367 // this.pagination.totalItems == null 371 // this.pagination.totalItems == null
368 // ) return 0; 372 // ) return 0;
369 // return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage); 373 // return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage);
370 // } 374 // }
371 // }, 375 // },
372 methods: { 376 methods: {
373 editItem (item) { 377 editItem (item) {
374 this.editedIndex = this.desserts.indexOf(item); 378 this.editedIndex = this.desserts.indexOf(item);
375 this.editedItem = Object.assign({}, item); 379 this.editedItem = Object.assign({}, item);
376 this.dialog = true; 380 this.dialog = true;
377 }, 381 },
378 profile (item) { 382 profile (item) {
379 this.editedIndex = this.desserts.indexOf(item); 383 this.editedIndex = this.desserts.indexOf(item);
380 this.editedItem = Object.assign({}, item); 384 this.editedItem = Object.assign({}, item);
381 this.dialog1 = true; 385 this.dialog1 = true;
382 }, 386 },
383 report (item) { 387 report (item) {
384 this.editedIndex = this.desserts.indexOf(item); 388 this.editedIndex = this.desserts.indexOf(item);
385 this.editedItem = Object.assign({}, item); 389 this.editedItem = Object.assign({}, item);
386 this.dialog2 = true; 390 this.dialog2 = true;
387 }, 391 },
388 392
389 deleteItem (item) { 393 deleteItem (item) {
390 const index = this.desserts.indexOf(item); 394 const index = this.desserts.indexOf(item);
391 confirm('Are you sure you want to delete this item?') && 395 confirm('Are you sure you want to delete this item?') &&
392 this.desserts.splice(index, 1); 396 this.desserts.splice(index, 1);
393 }, 397 },
394 activeTab (type) { 398 activeTab (type) {
395 switch (type) { 399 switch (type) {
396 case 'existing': 400 case 'existing':
397 this.newActive = false; 401 this.newActive = false;
398 this.isActive = true; 402 this.isActive = true;
399 break; 403 break;
400 404
401 default: 405 default:
402 this.newActive = true; 406 this.newActive = true;
403 this.isActive = false; 407 this.isActive = false;
404 break; 408 break;
405 } 409 }
406 }, 410 },
407 411
408 close () { 412 close () {
409 this.dialog = false; 413 this.dialog = false;
410 setTimeout(() => { 414 setTimeout(() => {
411 this.editedItem = Object.assign({}, this.defaultItem); 415 this.editedItem = Object.assign({}, this.defaultItem);
412 this.editedIndex = -1; 416 this.editedIndex = -1;
413 }, 300); 417 }, 300);
414 }, 418 },
415 close1 () { 419 close1 () {
416 this.dialog1 = false; 420 this.dialog1 = false;
417 }, 421 },
418 close2 () { 422 close2 () {
419 this.dialog2 = false; 423 this.dialog2 = false;
420 }, 424 },
421 submit () { 425 submit () {
422 if (this.$refs.form.validate()) { 426 if (this.$refs.form.validate()) {
423 console.log('=clicked==', this.AddUsercredentials); 427 console.log('=clicked==', this.AddUsercredentials);
424 // Native form submission is not yet supported 428 // Native form submission is not yet supported
425 // axios.post('/api/submit', { 429 // axios.post('/api/submit', {
426 // Name: this.Name, 430 // Name: this.Name,
427 // LName: this.LName, 431 // LName: this.LName,
428 // Email: this.Email, 432 // Email: this.Email,
429 // DOB: this.DOB 433 // DOB: this.DOB
430 // }); 434 // });
431 } 435 }
432 }, 436 },
433 mail () { 437 mail () {
434 // this.editedIndex = this.desserts.indexOf(); 438 // this.editedIndex = this.desserts.indexOf();
435 }, 439 },
436 download () { 440 download () {
437 // this.editedIndex = this.desserts.indexOf(); 441 // this.editedIndex = this.desserts.indexOf();
438 442
439 }, 443 },
440 clear () { 444 clear () {
441 this.$refs.form.reset(); 445 this.$refs.form.reset();
442 }, 446 },
443 save () { 447 save () {
444 console.log('editedItem', this.editedItem); 448 console.log('editedItem', this.editedItem);
445 if (this.editedIndex > -1) { 449 if (this.editedIndex > -1) {
446 Object.assign(this.desserts[this.editedIndex], this.editedItem); 450 Object.assign(this.desserts[this.editedIndex], this.editedItem);
447 } else { 451 } else {
448 this.desserts.push(this.editedItem); 452 this.desserts.push(this.editedItem);
449 } 453 }
450 this.close(); 454 this.close();
451 } 455 }
452 }, 456 },
453 }; 457 };
454 </script> 458 </script>
455 <style scoped> 459 <style scoped>
456 .v-card__actions .v-btn { 460 .v-card__actions .v-btn {
457 margin: 0 15px; 461 margin: 0 15px;
458 min-width: 120px; 462 min-width: 120px;
459 } 463 }
460 464
461 h4 { 465 h4 {
462 background-repeat: no-repeat; 466 background-repeat: no-repeat;
463 padding: 8px; 467 padding: 8px;
464 margin: auto; 468 margin: auto;
465 font-size: 25px; 469 font-size: 25px;
466 } 470 }
467 #name { 471 #name {
468 position: absolute; 472 position: absolute;
469 left: 100px; 473 left: 100px;
470 top: 17px; 474 top: 17px;
471 } 475 }
472 #icon { 476 #icon {
473 position: absolute; 477 position: absolute;
474 right: 8px; 478 right: 8px;
475 top: 8px; 479 top: 8px;
476 } 480 }
477 #m { 481 #m {
478 position: relative; 482 position: relative;
479 left: 135px; 483 left: 135px;
480 top: -15px; 484 top: -15px;
481 } 485 }
482 #G { 486 #G {
483 position: absolute; 487 position: absolute;
484 top: 38px; 488 top: 38px;
489 color: white;
485 } 490 }
486 #bt { 491 #bt {
487 position: relative; 492 position: relative;
488 top: -20px; 493 top: -20px;
489 left: 115px; 494 left: 115px;
490 } 495 }
491 #e { 496 #e {
492 position: relative; 497 position: relative;
493 top: 5px; 498 top: 5px;
494 right: -30px; 499 right: -30px;
495 height: 17px; 500 height: 17px;
496 cursor: pointer; 501 cursor: pointer;
497 } 502 }
498 #d { 503 #d {
499 position: relative; 504 position: relative;
500 top: 5px; 505 top: 5px;
501 right: -70px; 506 right: -70px;
502 height: 17px; 507 height: 17px;
503 cursor: pointer; 508 cursor: pointer;
504 } 509 }
505 #td { 510 #td {
506 border: 1px solid #dddddd; 511 border: 1px solid #dddddd;
507 text-align: left; 512 text-align: left;
508 padding: 8px; 513 padding: 8px;
509 } 514 }
510 #dialog { 515 #dialog {
src/pages/Login.vue
Diff comments   View file @f84ff8f
1 <template> 1 <template>
2 2
3 <v-app id="login"> 3 <v-app id="login">
4 <v-toolbar color="grey lighten"> 4 <v-toolbar color="grey lighten">
5 <v-toolbar-items> 5 <v-toolbar-items>
6 <img src="/static/ana@2x.png" height="36" alt="ana"> 6 <img src="/static/ana@2x.png" height="36" alt="ana">
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 9
10 <v-content> 10 <v-content>
11 <v-container fluid fill-height> 11 <v-container fluid fill-height>
12 <v-layout align-center justify-center> 12 <v-layout align-center justify-center>
13 <v-flex xs12 sm8 md6 lg5> 13 <v-flex xs12 sm8 md6 lg5>
14 <v-toolbar color="black" dark> 14 <v-toolbar color="black" dark>
15 <v-spacer></v-spacer> 15 <v-spacer></v-spacer>
16 <v-toolbar-title>Admin Login</v-toolbar-title> 16 <v-toolbar-title>Admin Login</v-toolbar-title>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 </v-toolbar> 18 </v-toolbar>
19 19
20 <v-card class="elevation-1 pa-1"> 20 <v-card class="elevation-1 pa-1">
21 <v-card-text> 21 <v-card-text>
22 <v-flex xs12 sm8 md8 lg8 offset-xs2> 22 <v-flex xs12 sm8 md8 lg8 offset-xs2>
23 <v-form ref="form" v-model="valid" lazy-validation> 23 <v-form ref="form" v-model="valid" lazy-validation>
24 <v-text-field 24 <v-text-field
25 v-model="userLogincredentials.userName" 25 v-model="userLogincredentials.userName"
26 :rules="nameRules" 26 :rules="nameRules"
27 label="Username" 27 label="Username"
28 required 28 required
29 ></v-text-field> 29 ></v-text-field>
30 <v-text-field 30 <v-text-field
31 :rules="[rules.required, rules.min]" 31 :rules="[rules.required, rules.min]"
32 v-model="userLogincredentials.password" 32 v-model="userLogincredentials.password"
33 :append-icon="e1 ? 'visibility_off' : 'visibility'" 33 :append-icon="e1 ? 'visibility_off' : 'visibility'"
34 :append-icon-cb="() => (e1 = !e1)" 34 :append-icon-cb="() => (e1 = !e1)"
35 :type="e1 ? 'password' : 'text'" 35 :type="e1 ? 'password' : 'text'"
36 name="input-10-1" 36 name="input-10-1"
37 label="Password" 37 label="Password"
38 counter 38 counter
39 39
40 ></v-text-field> 40 ></v-text-field>
41 41
42 </v-form></v-flex> 42 </v-form></v-flex>
43 </v-card-text> 43 </v-card-text>
44 <v-flex xs12 sm8 md8 lg8 offset-xs2> 44 <v-flex xs12 sm8 md8 lg8 offset-xs2>
45 <v-checkbox :label="`Remember me`" 45 <v-checkbox
46 v-model="remember"></v-checkbox> 46 :label="`Remember me`"
47 v-model="remember"
48 ></v-checkbox>
47 <h5 id="fp"> <router-link to="/forgetpassword">Forget Password</router-link></h5> 49 <h5 id="fp"> <router-link to="/forgetpassword">Forget Password</router-link></h5>
48 </v-flex> 50 </v-flex>
49 51
50 <v-flex class="mt-3 text-md-center"> 52 <v-flex class="mt-3 text-md-center">
51 <v-btn round color="black" dark large @click="login" :loading="loading">Login</v-btn> 53 <v-btn round color="black" dark large @click="login" :loading="loading">Login</v-btn>
52 </v-flex> 54 </v-flex>
53 </v-card> 55 </v-card>
54 </v-flex> 56 </v-flex>
55 </v-layout> 57 </v-layout>
56 </v-container> 58 </v-container>
57 </v-content> 59 </v-content>
58 <v-footer class="pa-4" color="grey darken-2"> 60 <v-footer class="pa-4" color="grey darken-2">
59 </v-footer> 61 </v-footer>
60 </v-app> 62 </v-app>
61 </template> 63 </template>
62 64
63 <script> 65 <script>
64 import axios from 'axios'; 66 import axios from 'axios';
65 export default { 67 export default {
66 data () { 68 data () {
67 return { 69 return {
68 e1: true, 70 e1: true,
69 loading: false, 71 loading: false,
70 remember: false, 72 remember: false,
71 valid: false, 73 valid: false,
72 userLogincredentials: {}, 74 userLogincredentials: {},
73 username: '', 75 username: '',
74 nameRules: [ 76 nameRules: [
75 v => !!v || 'Username is required', 77 v => !!v || 'Username is required',
76 // v => v.length >0 78 // v => v.length >0
77 ], 79 ],
78 // email: '', 80 // email: '',
79 // erules: { 81 // erules: {
80 // required: value => !!value || 'This email field is Required.', 82 // required: value => !!value || 'This email field is Required.',
81 // em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 83 // em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid')
82 // }, 84 // },
83 password: '', 85 password: '',
84 rules: { 86 rules: {
85 required: value => !!value || 'password is Required.', 87 required: value => !!value || 'password is Required.',
86 min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required' 88 min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
87 89
88 } 90 }
89 }; 91 };
90 }, 92 },
91 methods: { 93 methods: {
92 login () { 94 login () {
93 console.log('=clicked==', this.userLogincredentials); 95 console.log('=clicked==', this.userLogincredentials);
94 this.loading = true; 96 this.loading = true;
95 setTimeout(() => { 97 setTimeout(() => {
96 this.$router.push('/dashboard'); 98 this.$router.push('/dashboard');
97 }, 1000); 99 }, 1000);
98 } 100 }
101 // created () {
102 // axios.get(`http://jsonplaceholder.typicode.com/posts`)
103 // .then(response => {
104
105 // this.posts = response.data;
106 // })
107 // .catch(e => {
108 // this.errors.push(e);
109 // });
110 // }
99 } 111 }
100 }; 112 };
101 </script> 113 </script>
102 114
103 <style scoped lang="css"> 115 <style scoped lang="css">
104 #login{ 116 #login{
105 width: 100%; 117 width: 100%;
106 position: absolute; 118 position: absolute;
107 top: 0; 119 top: 0;
108 left: 0; 120 left: 0;
109 content: ""; 121 content: "";
110 z-index: 0; 122 z-index: 0;
111 } 123 }
112 </style> 124 </style>
113 <style scoped> 125 <style scoped>
114 img{ 126 img{
115 position:absolute; 127 position:absolute;
116 top:13px; 128 top:13px;
117 left:50px; 129 left:50px;
118 } 130 }
119 .v-btn--large { 131 .v-btn--large {
120 padding: 0px 84px; 132 padding: 0px 84px;
121 } 133 }
122 #fp{ 134 #fp{
123 position: absolute; 135 position: absolute;
124 top: 193px; 136 top: 193px;
125 right: 128px; 137 right: 128px;
126 color: black; 138 color: black;
127 } 139 }
128 a{ 140 a{
129 color: #696969; 141 color: #696969;
130 } 142 }
131 143
132 144
133 </style> 145 </style>
src/pages/questions.vue
Diff comments   View file @f84ff8f
1 <template> 1 <template>
2 <v-container grid-list-xl> 2 <v-container grid-list-xl>
3 <v-flex> 3 <v-flex>
4 <v-card> 4 <v-card>
5 <v-toolbar flat color="white"> 5 <v-toolbar flat color="white">
6 <v-card-title> 6 <v-card-title>
7 <h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3> 7 <h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3>
8 <h5 style="position:relative; left:40px; top:-15px;">Select Category</h5> 8 <h5 style="position:relative; left:40px; top:-15px;">Select Category</h5>
9 <span style="position:relative; left:-95px; top:10px;"> 9 <span style="position:relative; left:-95px; top:10px;">
10 <v-btn color="black" flat>Suggestion</v-btn> 10 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
11 <v-btn color="black" flat>Sex</v-btn> 11 <v-btn color="grey darken-2" flat>Sex</v-btn>
12 <v-btn color="black" flat>Health</v-btn> 12 <v-btn color="grey darken-2" flat>Health</v-btn>
13 <v-btn color="black" flat>Skin & Beauty</v-btn> 13 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
14 <v-btn color="black" flat>Diet & Ex</v-btn> 14 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
15
16 </span> 15 </span>
17 16
18 </v-card-title> 17 </v-card-title>
19 18
20 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
21 <v-dialog v-model="dialog" max-width="800px"> 20 <v-dialog v-model="dialog" max-width="800px">
22 21
23 <!-- <v-btn style="position:relative; top:-10px;" slot="activator" flat class="mb-2">Add New Question<v-icon>add</v-icon></v-btn> -->
24 <v-card> 22 <v-card>
25 <v-card-title> 23 <v-card-title>
26 <span class="headline">{{ formTitle }}</span> 24 <span class="headline">{{ formTitle }}</span>
27 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
28 <v-icon @click="close">close</v-icon> 26 <v-icon @click="close">close</v-icon>
29 </v-card-title> 27 </v-card-title>
30 <v-flex> 28 <v-flex>
31 <v-card> 29 <v-card>
32 <v-card-text> 30 <v-card-text>
33 <span> 31 <span>
34 <p><b>Ana Suggestion:</b> Select Suggestion</p></span> 32 <p><b>Ana Suggestion:</b> Select Suggestion</p></span>
35 <h5>Select Category:</h5> 33 <h5>Select Category:</h5>
36 <span> 34 <span>
37 <v-btn color="black" flat>Suggestion</v-btn> 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
38 <v-btn color="black" flat>Sex</v-btn> 36 <v-btn color="grey darken-2" flat>Sex</v-btn>
39 <v-btn color="black" flat>Health</v-btn> 37 <v-btn color="grey darken-2" flat>Health</v-btn>
40 <v-btn color="black" flat>Skin & Beauty</v-btn> 38 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
41 <v-btn color="black" flat>Diet & Ex</v-btn> 39 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
42 </span> 40 </span>
43 </v-card-text> 41 </v-card-text>
44 </v-card> 42 </v-card>
45 </v-flex> 43 </v-flex>
46 <v-card-text> 44 <v-card-text>
47 <v-container grid-list-md> 45 <v-container grid-list-md>
48 <v-layout wrap> 46 <v-layout wrap>
49 <v-flex xs12 sm6 md12> 47 <v-flex xs12 sm6 md12>
50 48
51 <v-textarea 49 <v-textarea
52 solo 50 solo
53 v-model="AddQuestioncredentials.question" 51 v-model="AddQuestioncredentials.question"
54 name="input-7-4" 52 name="input-7-4"
55 label="Type Question" 53 label="Type Question"
56 ></v-textarea> 54 ></v-textarea>
57 </v-flex> 55 </v-flex>
58 </v-layout> 56 </v-layout>
59 </v-container> 57 </v-container>
60 </v-card-text> 58 </v-card-text>
61 59
62 <v-card-actions> 60 <v-card-actions>
63 <v-spacer></v-spacer> 61 <v-spacer></v-spacer>
64 <v-btn dark large @click.native="save">Post Question</v-btn> 62 <v-btn dark large @click.native="save">Post Question</v-btn>
65 </v-card-actions> 63 </v-card-actions>
66 </v-card> 64 </v-card>
67 </v-dialog> 65 </v-dialog>
68 66
69 67
70 68
71 <v-dialog v-model="dialog1" max-width="800px"> 69 <v-dialog v-model="dialog1" max-width="800px">
72 <v-card> 70 <v-card>
73 <v-card-title> 71 <v-card-title>
74 <span class="headline">Edit Question</span> 72 <span class="headline">Edit Question</span>
75 <v-spacer></v-spacer> 73 <v-spacer></v-spacer>
76 <v-icon @click="close1">close</v-icon> 74 <v-icon @click="close1">close</v-icon>
77 </v-card-title> 75 </v-card-title>
78 76
79 <v-card-text> 77 <v-card-text>
80 <v-layout wrap> 78 <v-layout wrap>
81 <v-flex xs12 sm6 md12> 79 <v-flex xs12 sm6 md12>
82 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> 80 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
83 </v-flex> 81 </v-flex>
84 </v-layout> 82 </v-layout>
85 <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> 83 <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br>
86 Diagnosis 1,Diagnosis 2,Diagnosis 3 84 Diagnosis 1,Diagnosis 2,Diagnosis 3
87 <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> 85 <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span>
88 </v-card-text> 86 </v-card-text>
89 </v-card> 87 </v-card>
90 </v-dialog> 88 </v-dialog>
91 </v-toolbar> 89 </v-toolbar>
92 <v-data-table 90 <v-data-table
93 :headers="headers" 91 :headers="headers"
94 :items="desserts" 92 :items="desserts"
95 class="elevation-1" 93 class="elevation-1"
96 :pagination.sync="pagination" 94 :pagination.sync="pagination"
97 > 95 >
98 <template slot="items" slot-scope="props"> 96 <template slot="items" slot-scope="props">
99 <tr v-if="props.index === 0"> 97 <tr v-if="props.index === 0">
100 <td id="td">&nbsp;</td> 98 <td id="td">&nbsp;</td>
101 <td> 99 <td>
102 <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> 100 <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span>
103 </td> 101 </td>
104 <td id="td">&nbsp;</td> 102 <td id="td">&nbsp;</td>
105 <td id="td">&nbsp;</td> 103 <td id="td">&nbsp;</td>
106 </tr> 104 </tr>
107 <tr> 105 <tr>
108 <td id="td" class="text-xs-center">{{ props.item.no }}</td> 106 <td id="td" class="text-xs-center">{{ props.item.no }}</td>
109 <td id="td">{{ props.item.ques }}</td> 107 <td id="td">{{ props.item.ques }}</td>
110 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 108 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
111 <td class="text-xs-center"> 109 <td class="text-xs-center">
112 <span> 110 <span>
113 <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> 111 <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
114 <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> 112 <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
115 </span> 113 </span>
116 </td> 114 </td>
117 </tr> 115 </tr>
118 </template> 116 </template>
119 </v-data-table> 117 </v-data-table>
120
121 </v-card> 118 </v-card>
122 </v-flex> 119 </v-flex>
120
123 </v-container> 121 </v-container>
124 </template> 122 </template>
125 <script> 123 <script>
126 export default { 124 export default {
127 data: () => ({ 125 data: () => ({
128 question: '', 126 question: '',
129 AddQuestioncredentials: {}, 127 AddQuestioncredentials: {},
130 dialog: false, 128 dialog: false,
131 dialog1: false, 129 dialog1: false,
130 isActive: true,
131 newActive: false,
132 pagination: { 132 pagination: {
133 rowsPerPage: 10, 133 rowsPerPage: 10,
134 }, 134 },
135 headers: [ 135 headers: [
136 { 136 {
137 text: 'No.', 137 text: 'No.',
138 align: 'center', 138 align: 'center',
139 sortable: false, 139 sortable: false,
140 value: 'name' 140 value: 'name'
141 }, 141 },
142 { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, 142 { text: 'Posts', value: 'posts', sortable: false, align: 'center' },
143 { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, 143 { text: 'Responses', value: 'responses', sortable: false, align: 'center' },
144 { text: '', value: 'carbs', sortable: false, align: 'center' }, 144 { text: '', value: 'carbs', sortable: false, align: 'center' },
145 ], 145 ],
146 desserts: [], 146 desserts: [],
147 editedIndex: -1, 147 editedIndex: -1,
148 editedItem: { 148 editedItem: {
149 question: '', 149 question: '',
150 150
151 }, 151 },
152 defaultItem: { 152 defaultItem: {
153 no: 0, 153 no: 0,
154 question: '', 154 question: '',
155 res: 0, 155 res: 0,
156 156
157 } 157 }
158 }), 158 }),
159 159
160 computed: { 160 computed: {
161 formTitle () { 161 formTitle () {
162 return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; 162 return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question';
163 } 163 }
164 }, 164 },
165 165
166 watch: { 166 watch: {
167 dialog (val) { 167 dialog (val) {
168 val || this.close(); 168 val || this.close();
169 } 169 }
170 }, 170 },
171 171
172 created () { 172 created () {
173 this.initialize(); 173 this.initialize();
174 }, 174 },
175 175
176 methods: { 176 methods: {
177 initialize () { 177 initialize () {
178 this.desserts = [ 178 this.desserts = [
179 { 179 {
180 no: '1', 180 no: '1',
181 ques: 'questions', 181 ques: 'questions',
182 res: 9.0, 182 res: 9.0,
183 }, 183 },
184 ]; 184 ];
185 }, 185 },
186 186
187 editItem (item) { 187 editItem (item) {
188 this.editedIndex = this.desserts.indexOf(item); 188 this.editedIndex = this.desserts.indexOf(item);
189 this.editedItem = Object.assign({}, item); 189 this.editedItem = Object.assign({}, item);
190 this.dialog1 = true; 190 this.dialog1 = true;
191 }, 191 },
192 192
193 deleteItem (item) { 193 deleteItem (item) {
194 const index = this.desserts.indexOf(item); 194 const index = this.desserts.indexOf(item);
195 confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); 195 confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1);
196 }, 196 },
197 197
198 close () { 198 close () {
199 this.dialog = false; 199 this.dialog = false;
200 setTimeout(() => { 200 setTimeout(() => {
201 this.editedItem = Object.assign({}, this.defaultItem); 201 this.editedItem = Object.assign({}, this.defaultItem);
202 this.editedIndex = -1; 202 this.editedIndex = -1;
203 }, 300); 203 }, 300);
204 }, 204 },
205 close1 () { 205 close1 () {
206 this.dialog1 = false; 206 this.dialog1 = false;
207 setTimeout(() => { 207 setTimeout(() => {
208 this.editedItem = Object.assign({}, this.defaultItem); 208 this.editedItem = Object.assign({}, this.defaultItem);
209 this.editedIndex = -1; 209 this.editedIndex = -1;
210 }, 300); 210 }, 300);
211 }, 211 },
212 save () { 212 save () {
213 console.log('editedItem', this.editedItem); 213 console.log('editedItem', this.editedItem);
214 if (this.editedIndex > -1) { 214 if (this.editedIndex > -1) {
215 Object.assign(this.desserts[this.editedIndex], this.editedItem); 215 Object.assign(this.desserts[this.editedIndex], this.editedItem);
216 } else { 216 } else {
217 this.desserts.push(this.editedItem); 217 this.desserts.push(this.editedItem);
218 } 218 }
219 this.close(); 219 this.close();
220 }, 220 },
221 save1 () { 221 save1 () {
222 console.log('editedItem', this.editedItem); 222 console.log('editedItem', this.editedItem);
223 if (this.editedIndex > -1) { 223 if (this.editedIndex > -1) {
224 Object.assign(this.desserts[this.editedIndex], this.editedItem); 224 Object.assign(this.desserts[this.editedIndex], this.editedItem);
225 } else { 225 } else {
226 this.desserts.push(this.editedItem); 226 this.desserts.push(this.editedItem);
227 } 227 }
228 this.close1(); 228 this.close1();
229 } 229 }
230 }, 230 },
231 switchComponent (comp) { 231 // switchComponent (comp) {
232 this.$emit('switchComp', comp); 232 // this.$emit('switchComp', comp);
233 } 233 // }
234 }; 234 };
235 </script> 235 </script>
236 <style> 236 <style>
237 #td{ 237 #td{
238 border: 1px solid #dddddd; 238 border: 1px solid #dddddd;
239 text-align: left; 239 text-align: left;
240 padding: 8px; 240 padding: 8px;
241 max-width: 300px; 241
242 } 242 }
243