viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 2a4dbc6e368a3bcd0bd61d2f656a6077af6b6402

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

fix panel

Showing 7 changed files with 889 additions and 378 deletions   Show diff stats
src/components/questions/diet.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <!-- Add Question dialog -->
2 <v-flex> 3 <v-flex>
3 <v-card> 4 <v-card>
4 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
5 <v-dialog v-model="dialog" max-width="800px"> 6 <v-dialog v-model="dialog" max-width="800px">
6 <v-card> 7 <v-card>
7 <v-card-title> 8 <v-card-title>
8 <span class="headline">{{ formTitle }}</span> 9 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
10 <h4 class="hidden-lg-only">{{ formTitle }}</h4>
9 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
10 <v-icon @click="close">close</v-icon> 12 <v-icon @click="close">close</v-icon>
11 </v-card-title> 13 </v-card-title>
12 <v-flex> 14 <v-flex>
13 <v-card> 15 <v-card>
14 <v-card-text> 16 <v-card-text>
15 <span> 17 <span>
16 <p> 18 <p>
17 <b>Ana Suggestion:</b> Select Suggestion 19 <b>Ana Suggestion:</b>
20 Select Suggestion
18 </p> 21 </p>
19 </span> 22 </span>
20 <h5>Select Category:</h5> 23 <h5>Select Category:</h5>
21 <v-tabs 24 <!-- <span>
22 color="white" 25 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23 show-arrows 26 <v-btn color="grey darken-2" flat>Sex</v-btn>
24 > 27 <v-btn color="grey darken-2" flat>Health</v-btn>
25 <v-tabs-slider color="black"></v-tabs-slider> 28 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
26 <v-tab> 29 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
30 </span>-->
31 </v-card-text>
32 <v-tabs color="white" show-arrows>
33 <v-tabs-slider color="black"></v-tabs-slider>
34 <v-tab>
27 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28 </v-tab> 36 </v-tab>
29 <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn> 37 <v-tab>
38 <v-btn color="grey darken-2" flat>Sex</v-btn>
30 </v-tab> 39 </v-tab>
31 <v-tab> 40 <v-tab>
32 <v-btn color="grey darken-2" flat>Health</v-btn> 41 <v-btn color="grey darken-2" flat>Health</v-btn>
33 </v-tab> 42 </v-tab>
34 <v-tab> 43 <v-tab>
35 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
36 </v-tab> 45 </v-tab>
37 <v-tab> 46 <v-tab>
38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39 </v-tab> 48 </v-tab>
40 </v-tabs> 49 </v-tabs>
41 </v-card-text>
42 </v-card> 50 </v-card>
43 </v-flex> 51 </v-flex>
44 <v-card-text> 52 <v-card-text>
45 <v-container grid-list-md> 53 <v-container grid-list-md>
46 <v-layout wrap> 54 <v-layout wrap>
47 <v-flex xs12 sm6 md12> 55 <v-flex xs12 sm6 md12>
48 <v-textarea 56 <v-textarea
49 solo 57 solo
50 v-model="AddQuestioncredentials.question" 58 v-model="AddQuestioncredentials.question"
51 name="input-7-4" 59 name="input-7-4"
52 label="Type Question" 60 label="Type Question"
53 ></v-textarea> 61 ></v-textarea>
54 </v-flex> 62 </v-flex>
55 </v-layout> 63 </v-layout>
56 </v-container> 64 </v-container>
57 </v-card-text> 65 </v-card-text>
58 <v-card-actions> 66 <v-card-actions>
59 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
60 <v-btn dark large @click.native="save">Post Question</v-btn> 68 <v-btn dark large @click.native="save">Post Question</v-btn>
61 </v-card-actions> 69 </v-card-actions>
62 </v-card> 70 </v-card>
63 </v-dialog> 71 </v-dialog>
64 72 <!-- Edit Question Dialog see answer -->
65 <v-dialog v-model="dialog1" max-width="800px"> 73 <v-dialog v-model="dialog1" max-width="900px">
66 <v-card> 74 <v-card height="700px">
67 <v-card-title> 75 <v-card-title>
68 <span class="headline">Edit Question</span> 76 <span class="headline">Edit Question</span>
69 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
70 <v-icon @click="close1">close</v-icon> 78 <v-icon @click="close1">close</v-icon>
71 </v-card-title> 79 </v-card-title>
72
73 <v-card-text> 80 <v-card-text>
74 <v-layout wrap> 81 <v-layout wrap>
75 <v-flex xs12 sm6 md12> 82 <v-flex xs12>
76 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> 83 <v-textarea
84 solo
85 v-model="editedItem.question"
86 name="input-7-4"
87 label="Question"
88 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
89 ></v-textarea>
90 </v-flex>
91 </v-layout>
92 <v-layout class="mt-4">
93 <v-flex xs12 sm6>
94 <h5>
95 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
96 </h5>
97 <h5
98 class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
99 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
100 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
101 </v-flex>
102 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
103 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
104 </v-flex>
105 </v-layout>
106 <v-layout>
107 <v-flex xs12 class="hidden-lg-only">
108 <v-btn dark small @click.native="save1">Save Edit</v-btn>
109 </v-flex>
110 </v-layout>
111 <v-layout class="mt-3 AnswerTable">
112 <v-flex xs12>
113 <div>
114 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
115 <template slot="items" slot-scope="props">
116 <v-layout>
117 <v-flex xs9 class="bottomAnswser">
118 <td class="pa-3">
119 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
120 <br>
121 {{ props.item.calories }}
122 </td>
123 </v-flex>
124 <v-flex xs3 class="bottomAnswser">
125 <td class="justify-center layout px -0 mt-4">
126 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
127 </td>
128 </v-flex>
129 </v-layout>
130 </template>
131 <template slot="no-data">
132 <v-btn color="primary" @click="initializeData">Reset</v-btn>
133 </template>
134 </v-data-table>
135 </div>
77 </v-flex> 136 </v-flex>
78 </v-layout> 137 </v-layout>
79 <span>
80 <p>
81 <b>Ana suggestion:</b> Abnormal Uterine Bleeding
82 <br>Diagnosis 1,Diagnosis 2,Diagnosis 3
83 <v-btn
84 dark
85 large
86 @click.native="save1"
87 style="position:absolute; top:163px; right:5px;"
88 >Save Edit</v-btn>
89 </p>
90 </span>
91 </v-card-text> 138 </v-card-text>
92 </v-card> 139 </v-card>
93 </v-dialog> 140 </v-dialog>
94 <v-data-table 141 <!-- Forum Questions data-table -->
95 :headers="headers" 142 <v-card>
96 :items="desserts" 143 <v-data-table
97 class="elevation-1" 144 :headers="headers"
98 :pagination.sync="pagination" 145 :items="desserts"
99 > 146 class="elevation-1"
100 <template slot="items" slot-scope="props"> 147 :pagination.sync="pagination"
101 <tr v-if="props.index === 0"> 148 >
102 <td id="td">&nbsp;</td> 149 <template slot="items" slot-scope="props">
103 <td> 150 <tr v-if="props.index === 0">
104 <span style="cursor:pointer" @click="dialog=true"> 151 <td id="td">&nbsp;</td>
105 <v-icon>add</v-icon>Add New Question 152 <td class="pa-4">
106 </span> 153 <span style="cursor:pointer" @click="dialog=true">
107 </td> 154 <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
108 <td id="td">&nbsp;</td> 155 </span>
109 <td id="td">&nbsp;</td> 156 </td>
110 </tr> 157 <td id="td">&nbsp;</td>
111 <tr> 158 <td id="td">&nbsp;</td>
112 <td id="td" class="text-xs-center">{{ props.item.no }}</td> 159 </tr>
113 <td id="td">{{ props.item.ques }}</td> 160 <tr>
114 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 161 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
115 <td class="text-xs-center"> 162 <td id="td">{{ props.item.ques }}</td>
116 <span> 163 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
117 <img 164 <td class="text-xs-center">
118 style="cursor:pointer; height:18px; " 165 <span>
119 class="mr-5" 166 <img
120 @click="editItem(props.item)" 167 style="cursor:pointer; height:18px; "
121 src="/static/icon/edit1.png" 168 class="mr-5"
122 > 169 @click="editItem(props.item)"
123 <img 170 src="/static/icon/edit1.png"
124 style="cursor:pointer; height:20px; " 171 >
125 class="mr-5" 172 <img
126 @click="deleteItem(props.item)" 173 style="cursor:pointer; height:20px; "
127 src="/static/icon/delete1.png" 174 class="mr-5"
128 > 175 @click="deleteItem(props.item)"
129 </span> 176 src="/static/icon/delete1.png"
130 </td> 177 >
131 </tr> 178 </span>
132 </template> 179 </td>
133 </v-data-table> 180 </tr>
181 </template>
182 </v-data-table>
183 </v-card>
134 </v-card> 184 </v-card>
135 </v-flex> 185 </v-flex>
136 </template> 186 </template>
137 <script> 187 <script>
138 export default { 188 export default {
139 data: () => ({ 189 data: () => ({
140 question: "", 190 question: "",
141 AddQuestioncredentials: {}, 191 AddQuestioncredentials: {},
142 dialog: false, 192 dialog: false,
143 dialog1: false, 193 dialog1: false,
144 isActive: true, 194 isActive: true,
145 newActive: false, 195 newActive: false,
146 pagination: { 196 pagination: {
147 rowsPerPage: 10 197 rowsPerPage: 10
148 }, 198 },
199 getQuestion: [],
149 headers: [ 200 headers: [
150 { 201 {
151 text: "No.", 202 text: "No.",
152 align: "center", 203 align: "center",
153 sortable: false, 204 sortable: false,
154 value: "name" 205 value: "name"
155 }, 206 },
156 { text: "Posts", value: "posts", sortable: false, align: "center" }, 207 { text: "Posts", value: "posts", sortable: false, align: "center" },
157 { 208 {
158 text: "Responses", 209 text: "Responses",
159 value: "responses", 210 value: "responses",
160 sortable: false, 211 sortable: false,
161 align: "center" 212 align: "center"
162 }, 213 },
163 { text: "", value: "carbs", sortable: false, align: "center" } 214 { text: "", value: "carbs", sortable: false, align: "center" }
164 ], 215 ],
165 desserts: [], 216 desserts: [],
166 editedIndex: -1, 217 editedIndex: -1,
167 editedItem: { 218 editedItem: {
168 question: "" 219 question: "",
220 name: ''
169 }, 221 },
170 defaultItem: { 222 defaultItem: {
171 no: 0, 223 no: 0,
224 name: '',
172 question: "", 225 question: "",
173 res: 0 226 res: 0
174 } 227 }
175 }), 228 }),
176 229
177 computed: { 230 computed: {
178 formTitle() { 231 formTitle() {
179 return this.editedIndex === -1 ? "Create New Question" : "Edit Question"; 232 return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
180 } 233 }
181 }, 234 },
182 235
183 watch: { 236 watch: {
184 dialog(val) { 237 dialog(val) {
185 val || this.close(); 238 val || this.close();
186 } 239 }
187 }, 240 },
188 241
189 created() { 242 created() {
190 this.initialize(); 243 this.initialize();
244 this.initializeData()
191 }, 245 },
192 246
193 methods: { 247 methods: {
194 initialize() { 248 initialize() {
195 this.desserts = [ 249 this.desserts = [
196 { 250 {
197 no: "1", 251 no: "1",
198 ques: "questions diet", 252 ques: "questions Diet &Ex",
199 res: 12 253 res: 21
200 } 254 }
201 ]; 255 ];
202 }, 256 },
257 initializeData () {
258 this.getQuestion = [
259 {
260 name: 'Frozen Yogurt',
261 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
262 },
263 {
264 name: 'Zogurt',
265 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
203 266
267 },
268 {
269 name: 'Frozen Yogurt',
270 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
271
272 },
273 {
274 name: 'Cupcake',
275 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
276 },
277 {
278 name: 'Gingerbread',
279 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
280
281 },
282 {
283 name: 'Jelly bean',
284 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
285 },
286 {
287 name: 'Frozen Yogurt',
288 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
289 },
290 {
291 name: 'Zogurt',
292 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
293
294 },
295 {
296 name: 'Frozen Yogurt',
297 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
298
299 },
300 {
301 name: 'Cupcake',
302 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
303 },
304 {
305 name: 'Gingerbread',
306 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
307
308 },
309 {
310 name: 'Jelly bean',
311 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
312 },
313 ]
314 },
315 deleteAnswer (item) {
316 const index = this.getQuestion.indexOf(item)
317 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
318 },
204 editItem(item) { 319 editItem(item) {
205 this.editedIndex = this.desserts.indexOf(item); 320 this.editedIndex = this.desserts.indexOf(item);
206 this.editedItem = Object.assign({}, item); 321 this.editedItem = Object.assign({}, item);
207 this.dialog1 = true; 322 this.dialog1 = true;
208 }, 323 },
209 324
210 deleteItem(item) { 325 deleteItem(item) {
211 const index = this.desserts.indexOf(item); 326 const index = this.desserts.indexOf(item);
212 confirm("Are you sure you want to delete this item?") && 327 confirm("Are you sure you want to delete this item?") &&
213 this.desserts.splice(index, 1); 328 this.desserts.splice(index, 1);
214 }, 329 },
215 330
216 close() { 331 close() {
217 this.dialog = false; 332 this.dialog = false;
218 setTimeout(() => { 333 setTimeout(() => {
219 this.editedItem = Object.assign({}, this.defaultItem); 334 this.editedItem = Object.assign({}, this.defaultItem);
220 this.editedIndex = -1; 335 this.editedIndex = -1;
221 }, 300); 336 }, 300);
222 }, 337 },
223 close1() { 338 close1() {
224 this.dialog1 = false; 339 this.dialog1 = false;
225 setTimeout(() => { 340 setTimeout(() => {
226 this.editedItem = Object.assign({}, this.defaultItem); 341 this.editedItem = Object.assign({}, this.defaultItem);
227 this.editedIndex = -1; 342 this.editedIndex = -1;
228 }, 300); 343 }, 300);
229 }, 344 },
230 save() { 345 save() {
231 console.log("editedItem", this.editedItem); 346 console.log("editedItem", this.editedItem);
232 if (this.editedIndex > -1) { 347 if (this.editedIndex > -1) {
233 Object.assign(this.desserts[this.editedIndex], this.editedItem); 348 Object.assign(this.desserts[this.editedIndex], this.editedItem);
234 } else { 349 } else {
235 this.desserts.push(this.editedItem); 350 this.desserts.push(this.editedItem);
236 } 351 }
237 this.close(); 352 this.close();
238 }, 353 },
239 save1() { 354 save1() {
240 console.log("editedItem", this.editedItem); 355 console.log("editedItem", this.editedItem);
241 if (this.editedIndex > -1) { 356 if (this.editedIndex > -1) {
242 Object.assign(this.desserts[this.editedIndex], this.editedItem); 357 Object.assign(this.desserts[this.editedIndex], this.editedItem);
243 } else { 358 } else {
244 this.desserts.push(this.editedItem); 359 this.desserts.push(this.editedItem);
245 } 360 }
246 this.close1(); 361 this.close1();
247 } 362 }
248 } 363 }
249 // switchComponent (comp) { 364 // switchComponent (comp) {
250 // this.$emit('switchComp', comp); 365 // this.$emit('switchComp', comp);
251 // } 366 // }
252 }; 367 };
253 </script> 368 </script>
src/components/questions/health.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <!-- Add Question dialog -->
2 <v-flex> 3 <v-flex>
3 <v-card> 4 <v-card>
4 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
5 <v-dialog v-model="dialog" max-width="800px"> 6 <v-dialog v-model="dialog" max-width="800px">
6 <v-card> 7 <v-card>
7 <v-card-title> 8 <v-card-title>
8 <span class="headline">{{ formTitle }}</span> 9 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
10 <h4 class="hidden-lg-only">{{ formTitle }}</h4>
9 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
10 <v-icon @click="close">close</v-icon> 12 <v-icon @click="close">close</v-icon>
11 </v-card-title> 13 </v-card-title>
12 <v-flex> 14 <v-flex>
13 <v-card> 15 <v-card>
14 <v-card-text> 16 <v-card-text>
15 <span> 17 <span>
16 <p> 18 <p>
17 <b>Ana Suggestion:</b> Select Suggestion 19 <b>Ana Suggestion:</b>
20 Select Suggestion
18 </p> 21 </p>
19 </span> 22 </span>
20 <h5>Select Category:</h5> 23 <h5>Select Category:</h5>
21 <v-tabs 24 <!-- <span>
22 color="white" 25 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23 show-arrows 26 <v-btn color="grey darken-2" flat>Sex</v-btn>
24 > 27 <v-btn color="grey darken-2" flat>Health</v-btn>
25 <v-tabs-slider color="black"></v-tabs-slider> 28 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
26 <v-tab> 29 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
30 </span>-->
31 </v-card-text>
32 <v-tabs color="white" show-arrows>
33 <v-tabs-slider color="black"></v-tabs-slider>
34 <v-tab>
27 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28 </v-tab> 36 </v-tab>
29 <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn> 37 <v-tab>
38 <v-btn color="grey darken-2" flat>Sex</v-btn>
30 </v-tab> 39 </v-tab>
31 <v-tab> 40 <v-tab>
32 <v-btn color="grey darken-2" flat>Health</v-btn> 41 <v-btn color="grey darken-2" flat>Health</v-btn>
33 </v-tab> 42 </v-tab>
34 <v-tab> 43 <v-tab>
35 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
36 </v-tab> 45 </v-tab>
37 <v-tab> 46 <v-tab>
38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39 </v-tab> 48 </v-tab>
40 </v-tabs> 49 </v-tabs>
41 </v-card-text>
42 </v-card> 50 </v-card>
43 </v-flex> 51 </v-flex>
44 <v-card-text> 52 <v-card-text>
45 <v-container grid-list-md> 53 <v-container grid-list-md>
46 <v-layout wrap> 54 <v-layout wrap>
47 <v-flex xs12 sm6 md12> 55 <v-flex xs12 sm6 md12>
48 <v-textarea 56 <v-textarea
49 solo 57 solo
50 v-model="AddQuestioncredentials.question" 58 v-model="AddQuestioncredentials.question"
51 name="input-7-4" 59 name="input-7-4"
52 label="Type Question" 60 label="Type Question"
53 ></v-textarea> 61 ></v-textarea>
54 </v-flex> 62 </v-flex>
55 </v-layout> 63 </v-layout>
56 </v-container> 64 </v-container>
57 </v-card-text> 65 </v-card-text>
58 <v-card-actions> 66 <v-card-actions>
59 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
60 <v-btn dark large @click.native="save">Post Question</v-btn> 68 <v-btn dark large @click.native="save">Post Question</v-btn>
61 </v-card-actions> 69 </v-card-actions>
62 </v-card> 70 </v-card>
63 </v-dialog> 71 </v-dialog>
64 72 <!-- Edit Question Dialog see answer -->
65 <v-dialog v-model="dialog1" max-width="800px"> 73 <v-dialog v-model="dialog1" max-width="900px">
66 <v-card> 74 <v-card height="700px">
67 <v-card-title> 75 <v-card-title>
68 <span class="headline">Edit Question</span> 76 <span class="headline">Edit Question</span>
69 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
70 <v-icon @click="close1">close</v-icon> 78 <v-icon @click="close1">close</v-icon>
71 </v-card-title> 79 </v-card-title>
72
73 <v-card-text> 80 <v-card-text>
74 <v-layout wrap> 81 <v-layout wrap>
75 <v-flex xs12 sm6 md12> 82 <v-flex xs12>
76 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> 83 <v-textarea
84 solo
85 v-model="editedItem.question"
86 name="input-7-4"
87 label="Question"
88 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
89 ></v-textarea>
90 </v-flex>
91 </v-layout>
92 <v-layout class="mt-4">
93 <v-flex xs12 sm6>
94 <h5>
95 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
96 </h5>
97 <h5
98 class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
99 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
100 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
101 </v-flex>
102 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
103 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
104 </v-flex>
105 </v-layout>
106 <v-layout>
107 <v-flex xs12 class="hidden-lg-only">
108 <v-btn dark small @click.native="save1">Save Edit</v-btn>
109 </v-flex>
110 </v-layout>
111 <v-layout class="mt-3 AnswerTable">
112 <v-flex xs12>
113 <div>
114 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
115 <template slot="items" slot-scope="props">
116 <v-layout>
117 <v-flex xs9 class="bottomAnswser">
118 <td class="pa-3">
119 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
120 <br>
121 {{ props.item.calories }}
122 </td>
123 </v-flex>
124 <v-flex xs3 class="bottomAnswser">
125 <td class="justify-center layout px -0 mt-4">
126 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
127 </td>
128 </v-flex>
129 </v-layout>
130 </template>
131 <template slot="no-data">
132 <v-btn color="primary" @click="initializeData">Reset</v-btn>
133 </template>
134 </v-data-table>
135 </div>
77 </v-flex> 136 </v-flex>
78 </v-layout> 137 </v-layout>
79 <span>
80 <p>
81 <b>Ana suggestion:</b> Abnormal Uterine Bleeding
82 <br>Diagnosis 1,Diagnosis 2,Diagnosis 3
83 <v-btn
84 dark
85 large
86 @click.native="save1"
87 style="position:absolute; top:163px; right:5px;"
88 >Save Edit</v-btn>
89 </p>
90 </span>
91 </v-card-text> 138 </v-card-text>
92 </v-card> 139 </v-card>
93 </v-dialog> 140 </v-dialog>
94 <v-data-table 141 <!-- Forum Questions data-table -->
95 :headers="headers" 142 <v-card>
96 :items="desserts" 143 <v-data-table
97 class="elevation-1" 144 :headers="headers"
98 :pagination.sync="pagination" 145 :items="desserts"
99 > 146 class="elevation-1"
100 <template slot="items" slot-scope="props"> 147 :pagination.sync="pagination"
101 <tr v-if="props.index === 0"> 148 >
102 <td id="td">&nbsp;</td> 149 <template slot="items" slot-scope="props">
103 <td> 150 <tr v-if="props.index === 0">
104 <span style="cursor:pointer" @click="dialog=true"> 151 <td id="td">&nbsp;</td>
105 <v-icon>add</v-icon>Add New Question 152 <td class="pa-4">
106 </span> 153 <span style="cursor:pointer" @click="dialog=true">
107 </td> 154 <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
108 <td id="td">&nbsp;</td> 155 </span>
109 <td id="td">&nbsp;</td> 156 </td>
110 </tr> 157 <td id="td">&nbsp;</td>
111 <tr> 158 <td id="td">&nbsp;</td>
112 <td id="td" class="text-xs-center">{{ props.item.no }}</td> 159 </tr>
113 <td id="td">{{ props.item.ques }}</td> 160 <tr>
114 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 161 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
115 <td class="text-xs-center"> 162 <td id="td">{{ props.item.ques }}</td>
116 <span> 163 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
117 <img 164 <td class="text-xs-center">
118 style="cursor:pointer; height:18px; " 165 <span>
119 class="mr-5" 166 <img
120 @click="editItem(props.item)" 167 style="cursor:pointer; height:18px; "
121 src="/static/icon/edit1.png" 168 class="mr-5"
122 > 169 @click="editItem(props.item)"
123 <img 170 src="/static/icon/edit1.png"
124 style="cursor:pointer; height:20px; " 171 >
125 class="mr-5" 172 <img
126 @click="deleteItem(props.item)" 173 style="cursor:pointer; height:20px; "
127 src="/static/icon/delete1.png" 174 class="mr-5"
128 > 175 @click="deleteItem(props.item)"
129 </span> 176 src="/static/icon/delete1.png"
130 </td> 177 >
131 </tr> 178 </span>
132 </template> 179 </td>
133 </v-data-table> 180 </tr>
181 </template>
182 </v-data-table>
183 </v-card>
134 </v-card> 184 </v-card>
135 </v-flex> 185 </v-flex>
136 </template> 186 </template>
137 <script> 187 <script>
138 export default { 188 export default {
139 data: () => ({ 189 data: () => ({
140 question: "", 190 question: "",
141 AddQuestioncredentials: {}, 191 AddQuestioncredentials: {},
142 dialog: false, 192 dialog: false,
143 dialog1: false, 193 dialog1: false,
144 isActive: true, 194 isActive: true,
145 newActive: false, 195 newActive: false,
146 pagination: { 196 pagination: {
147 rowsPerPage: 10 197 rowsPerPage: 10
148 }, 198 },
199 getQuestion: [],
149 headers: [ 200 headers: [
150 { 201 {
151 text: "No.", 202 text: "No.",
152 align: "center", 203 align: "center",
153 sortable: false, 204 sortable: false,
154 value: "name" 205 value: "name"
155 }, 206 },
156 { text: "Posts", value: "posts", sortable: false, align: "center" }, 207 { text: "Posts", value: "posts", sortable: false, align: "center" },
157 { 208 {
158 text: "Responses", 209 text: "Responses",
159 value: "responses", 210 value: "responses",
160 sortable: false, 211 sortable: false,
161 align: "center" 212 align: "center"
162 }, 213 },
163 { text: "", value: "carbs", sortable: false, align: "center" } 214 { text: "", value: "carbs", sortable: false, align: "center" }
164 ], 215 ],
165 desserts: [], 216 desserts: [],
166 editedIndex: -1, 217 editedIndex: -1,
167 editedItem: { 218 editedItem: {
168 question: "" 219 question: "",
220 name: ''
169 }, 221 },
170 defaultItem: { 222 defaultItem: {
171 no: 0, 223 no: 0,
224 name: '',
172 question: "", 225 question: "",
173 res: 0 226 res: 0
174 } 227 }
175 }), 228 }),
176 229
177 computed: { 230 computed: {
178 formTitle() { 231 formTitle() {
179 return this.editedIndex === -1 ? "Create New Question" : "Edit Question"; 232 return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
180 } 233 }
181 }, 234 },
182 235
183 watch: { 236 watch: {
184 dialog(val) { 237 dialog(val) {
185 val || this.close(); 238 val || this.close();
186 } 239 }
187 }, 240 },
188 241
189 created() { 242 created() {
190 this.initialize(); 243 this.initialize();
244 this.initializeData()
191 }, 245 },
192 246
193 methods: { 247 methods: {
194 initialize() { 248 initialize() {
195 this.desserts = [ 249 this.desserts = [
196 { 250 {
197 no: "1", 251 no: "1",
198 ques: "questions health", 252 ques: "questions Health",
199 res: 11 253 res: 21
200 } 254 }
201 ]; 255 ];
202 }, 256 },
257 initializeData () {
258 this.getQuestion = [
259 {
260 name: 'Frozen Yogurt',
261 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
262 },
263 {
264 name: 'Zogurt',
265 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
203 266
267 },
268 {
269 name: 'Frozen Yogurt',
270 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
271
272 },
273 {
274 name: 'Cupcake',
275 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
276 },
277 {
278 name: 'Gingerbread',
279 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
280
281 },
282 {
283 name: 'Jelly bean',
284 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
285 },
286 {
287 name: 'Frozen Yogurt',
288 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
289 },
290 {
291 name: 'Zogurt',
292 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
293
294 },
295 {
296 name: 'Frozen Yogurt',
297 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
298
299 },
300 {
301 name: 'Cupcake',
302 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
303 },
304 {
305 name: 'Gingerbread',
306 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
307
308 },
309 {
310 name: 'Jelly bean',
311 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
312 },
313 ]
314 },
315 deleteAnswer (item) {
316 const index = this.getQuestion.indexOf(item)
317 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
318 },
204 editItem(item) { 319 editItem(item) {
205 this.editedIndex = this.desserts.indexOf(item); 320 this.editedIndex = this.desserts.indexOf(item);
206 this.editedItem = Object.assign({}, item); 321 this.editedItem = Object.assign({}, item);
207 this.dialog1 = true; 322 this.dialog1 = true;
208 }, 323 },
209 324
210 deleteItem(item) { 325 deleteItem(item) {
211 const index = this.desserts.indexOf(item); 326 const index = this.desserts.indexOf(item);
212 confirm("Are you sure you want to delete this item?") && 327 confirm("Are you sure you want to delete this item?") &&
213 this.desserts.splice(index, 1); 328 this.desserts.splice(index, 1);
214 }, 329 },
215 330
216 close() { 331 close() {
217 this.dialog = false; 332 this.dialog = false;
218 setTimeout(() => { 333 setTimeout(() => {
219 this.editedItem = Object.assign({}, this.defaultItem); 334 this.editedItem = Object.assign({}, this.defaultItem);
220 this.editedIndex = -1; 335 this.editedIndex = -1;
221 }, 300); 336 }, 300);
222 }, 337 },
223 close1() { 338 close1() {
224 this.dialog1 = false; 339 this.dialog1 = false;
225 setTimeout(() => { 340 setTimeout(() => {
226 this.editedItem = Object.assign({}, this.defaultItem); 341 this.editedItem = Object.assign({}, this.defaultItem);
227 this.editedIndex = -1; 342 this.editedIndex = -1;
228 }, 300); 343 }, 300);
229 }, 344 },
230 save() { 345 save() {
231 console.log("editedItem", this.editedItem); 346 console.log("editedItem", this.editedItem);
232 if (this.editedIndex > -1) { 347 if (this.editedIndex > -1) {
233 Object.assign(this.desserts[this.editedIndex], this.editedItem); 348 Object.assign(this.desserts[this.editedIndex], this.editedItem);
234 } else { 349 } else {
235 this.desserts.push(this.editedItem); 350 this.desserts.push(this.editedItem);
236 } 351 }
237 this.close(); 352 this.close();
238 }, 353 },
239 save1() { 354 save1() {
240 console.log("editedItem", this.editedItem); 355 console.log("editedItem", this.editedItem);
241 if (this.editedIndex > -1) { 356 if (this.editedIndex > -1) {
242 Object.assign(this.desserts[this.editedIndex], this.editedItem); 357 Object.assign(this.desserts[this.editedIndex], this.editedItem);
243 } else { 358 } else {
244 this.desserts.push(this.editedItem); 359 this.desserts.push(this.editedItem);
245 } 360 }
246 this.close1(); 361 this.close1();
247 } 362 }
248 } 363 }
249 // switchComponent (comp) { 364 // switchComponent (comp) {
250 // this.$emit('switchComp', comp); 365 // this.$emit('switchComp', comp);
251 // } 366 // }
252 }; 367 };
253 </script> 368 </script>
src/components/questions/sex.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <!-- Add Question dialog -->
2 <v-flex> 3 <v-flex>
3 <v-card> 4 <v-card>
4 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
5 <v-dialog v-model="dialog" max-width="800px"> 6 <v-dialog v-model="dialog" max-width="800px">
6 <v-card> 7 <v-card>
7 <v-card-title> 8 <v-card-title>
8 <span class="headline">{{ formTitle }}</span> 9 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
10 <h4 class="hidden-lg-only">{{ formTitle }}</h4>
9 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
10 <v-icon @click="close">close</v-icon> 12 <v-icon @click="close">close</v-icon>
11 </v-card-title> 13 </v-card-title>
12 <v-flex> 14 <v-flex>
13 <v-card> 15 <v-card>
14 <v-card-text> 16 <v-card-text>
15 <span> 17 <span>
16 <p> 18 <p>
17 <b>Ana Suggestion:</b> Select Suggestion 19 <b>Ana Suggestion:</b>
20 Select Suggestion
18 </p> 21 </p>
19 </span> 22 </span>
20 <h5>Select Category:</h5> 23 <h5>Select Category:</h5>
21 <v-tabs 24 <!-- <span>
22 color="white"
23 show-arrows
24 >
25 <v-tabs-slider color="black"></v-tabs-slider>
26 <v-tab>
27 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 25 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28 </v-tab> 26 <v-btn color="grey darken-2" flat>Sex</v-btn>
29 <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn> 27 <v-btn color="grey darken-2" flat>Health</v-btn>
30 </v-tab> 28 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
31 <v-tab>
32 <v-btn color="grey darken-2" flat>Health</v-btn>
33 </v-tab>
34 <v-tab>
35 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
36 </v-tab>
37 <v-tab>
38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 29 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39 </v-tab> 30 </span>-->
40 </v-tabs>
41 </v-card-text> 31 </v-card-text>
32 <v-tabs color="white" show-arrows>
33 <v-tabs-slider color="black"></v-tabs-slider>
34 <v-tab>
35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
36 </v-tab>
37 <v-tab>
38 <v-btn color="grey darken-2" flat>Sex</v-btn>
39 </v-tab>
40 <v-tab>
41 <v-btn color="grey darken-2" flat>Health</v-btn>
42 </v-tab>
43 <v-tab>
44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
45 </v-tab>
46 <v-tab>
47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
48 </v-tab>
49 </v-tabs>
42 </v-card> 50 </v-card>
43 </v-flex> 51 </v-flex>
44 <v-card-text> 52 <v-card-text>
45 <v-container grid-list-md> 53 <v-container grid-list-md>
46 <v-layout wrap> 54 <v-layout wrap>
47 <v-flex xs12 sm6 md12> 55 <v-flex xs12 sm6 md12>
48 <v-textarea 56 <v-textarea
49 solo 57 solo
50 v-model="AddQuestioncredentials.question" 58 v-model="AddQuestioncredentials.question"
51 name="input-7-4" 59 name="input-7-4"
52 label="Type Question" 60 label="Type Question"
53 ></v-textarea> 61 ></v-textarea>
54 </v-flex> 62 </v-flex>
55 </v-layout> 63 </v-layout>
56 </v-container> 64 </v-container>
57 </v-card-text> 65 </v-card-text>
58
59 <v-card-actions> 66 <v-card-actions>
60 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
61 <v-btn dark large @click.native="save">Post Question</v-btn> 68 <v-btn dark large @click.native="save">Post Question</v-btn>
62 </v-card-actions> 69 </v-card-actions>
63 </v-card> 70 </v-card>
64 </v-dialog> 71 </v-dialog>
65 72 <!-- Edit Question Dialog see answer -->
66 <v-dialog v-model="dialog1" max-width="800px"> 73 <v-dialog v-model="dialog1" max-width="900px">
67 <v-card> 74 <v-card height="700px">
68 <v-card-title> 75 <v-card-title>
69 <span class="headline">Edit Question</span> 76 <span class="headline">Edit Question</span>
70 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
71 <v-icon @click="close1">close</v-icon> 78 <v-icon @click="close1">close</v-icon>
72 </v-card-title> 79 </v-card-title>
73
74 <v-card-text> 80 <v-card-text>
75 <v-layout wrap> 81 <v-layout wrap>
76 <v-flex xs12 sm6 md12> 82 <v-flex xs12>
77 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> 83 <v-textarea
84 solo
85 v-model="editedItem.question"
86 name="input-7-4"
87 label="Question"
88 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
89 ></v-textarea>
90 </v-flex>
91 </v-layout>
92 <v-layout class="mt-4">
93 <v-flex xs12 sm6>
94 <h5>
95 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
96 </h5>
97 <h5
98 class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
99 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
100 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
101 </v-flex>
102 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
103 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
104 </v-flex>
105 </v-layout>
106 <v-layout>
107 <v-flex xs12 class="hidden-lg-only">
108 <v-btn dark small @click.native="save1">Save Edit</v-btn>
109 </v-flex>
110 </v-layout>
111 <v-layout class="mt-3 AnswerTable">
112 <v-flex xs12>
113 <div>
114 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
115 <template slot="items" slot-scope="props">
116 <v-layout>
117 <v-flex xs9 class="bottomAnswser">
118 <td class="pa-3">
119 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
120 <br>
121 {{ props.item.calories }}
122 </td>
123 </v-flex>
124 <v-flex xs3 class="bottomAnswser">
125 <td class="justify-center layout px -0 mt-4">
126 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
127 </td>
128 </v-flex>
129 </v-layout>
130 </template>
131 <template slot="no-data">
132 <v-btn color="primary" @click="initializeData">Reset</v-btn>
133 </template>
134 </v-data-table>
135 </div>
78 </v-flex> 136 </v-flex>
79 </v-layout> 137 </v-layout>
80 <span>
81 <p>
82 <b>Ana suggestion:</b> Abnormal Uterine Bleeding
83 <br>Diagnosis 1,Diagnosis 2,Diagnosis 3
84 <v-btn
85 dark
86 large
87 @click.native="save1"
88 style="position:absolute; top:163px; right:5px;"
89 >Save Edit</v-btn>
90 </p>
91 </span>
92 </v-card-text> 138 </v-card-text>
93 </v-card> 139 </v-card>
94 </v-dialog> 140 </v-dialog>
95 <v-data-table 141 <!-- Forum Questions data-table -->
96 :headers="headers" 142 <v-card>
97 :items="desserts" 143 <v-data-table
98 class="elevation-1" 144 :headers="headers"
99 :pagination.sync="pagination" 145 :items="desserts"
100 > 146 class="elevation-1"
101 <template slot="items" slot-scope="props"> 147 :pagination.sync="pagination"
102 <tr v-if="props.index === 0"> 148 >
103 <td id="td">&nbsp;</td> 149 <template slot="items" slot-scope="props">
104 <td> 150 <tr v-if="props.index === 0">
105 <span style="cursor:pointer" @click="dialog=true"> 151 <td id="td">&nbsp;</td>
106 <v-icon>add</v-icon>Add New Question 152 <td class="pa-4">
107 </span> 153 <span style="cursor:pointer" @click="dialog=true">
108 </td> 154 <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
109 <td id="td">&nbsp;</td> 155 </span>
110 <td id="td">&nbsp;</td> 156 </td>
111 </tr> 157 <td id="td">&nbsp;</td>
112 <tr> 158 <td id="td">&nbsp;</td>
113 <td id="td" class="text-xs-center">{{ props.item.no }}</td> 159 </tr>
114 <td id="td">{{ props.item.ques }}</td> 160 <tr>
115 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 161 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
116 <td class="text-xs-center"> 162 <td id="td">{{ props.item.ques }}</td>
117 <span> 163 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
118 <img 164 <td class="text-xs-center">
119 style="cursor:pointer; height:18px; " 165 <span>
120 class="mr-5" 166 <img
121 @click="editItem(props.item)" 167 style="cursor:pointer; height:18px; "
122 src="/static/icon/edit1.png" 168 class="mr-5"
123 > 169 @click="editItem(props.item)"
124 <img 170 src="/static/icon/edit1.png"
125 style="cursor:pointer; height:20px; " 171 >
126 class="mr-5" 172 <img
127 @click="deleteItem(props.item)" 173 style="cursor:pointer; height:20px; "
128 src="/static/icon/delete1.png" 174 class="mr-5"
129 > 175 @click="deleteItem(props.item)"
130 </span> 176 src="/static/icon/delete1.png"
131 </td> 177 >
132 </tr> 178 </span>
133 </template> 179 </td>
134 </v-data-table> 180 </tr>
181 </template>
182 </v-data-table>
183 </v-card>
135 </v-card> 184 </v-card>
136 </v-flex> 185 </v-flex>
137 </template> 186 </template>
138 <script> 187 <script>
139 export default { 188 export default {
140 data: () => ({ 189 data: () => ({
141 question: "", 190 question: "",
142 AddQuestioncredentials: {}, 191 AddQuestioncredentials: {},
143 dialog: false, 192 dialog: false,
144 dialog1: false, 193 dialog1: false,
145 isActive: true, 194 isActive: true,
146 newActive: false, 195 newActive: false,
147 pagination: { 196 pagination: {
148 rowsPerPage: 10 197 rowsPerPage: 10
149 }, 198 },
199 getQuestion: [],
150 headers: [ 200 headers: [
151 { 201 {
152 text: "No.", 202 text: "No.",
153 align: "center", 203 align: "center",
154 sortable: false, 204 sortable: false,
155 value: "name" 205 value: "name"
156 }, 206 },
157 { text: "Posts", value: "posts", sortable: false, align: "center" }, 207 { text: "Posts", value: "posts", sortable: false, align: "center" },
158 { 208 {
159 text: "Responses", 209 text: "Responses",
160 value: "responses", 210 value: "responses",
161 sortable: false, 211 sortable: false,
162 align: "center" 212 align: "center"
163 }, 213 },
164 { text: "", value: "carbs", sortable: false, align: "center" } 214 { text: "", value: "carbs", sortable: false, align: "center" }
165 ], 215 ],
166 desserts: [], 216 desserts: [],
167 editedIndex: -1, 217 editedIndex: -1,
168 editedItem: { 218 editedItem: {
169 question: "" 219 question: "",
220 name: ''
170 }, 221 },
171 defaultItem: { 222 defaultItem: {
172 no: 0, 223 no: 0,
224 name: '',
173 question: "", 225 question: "",
174 res: 0 226 res: 0
175 } 227 }
176 }), 228 }),
177 229
178 computed: { 230 computed: {
179 formTitle() { 231 formTitle() {
180 return this.editedIndex === -1 ? "Create New Question" : "Edit Question"; 232 return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
181 } 233 }
182 }, 234 },
183 235
184 watch: { 236 watch: {
185 dialog(val) { 237 dialog(val) {
186 val || this.close(); 238 val || this.close();
187 } 239 }
188 }, 240 },
189 241
190 created() { 242 created() {
191 this.initialize(); 243 this.initialize();
244 this.initializeData()
192 }, 245 },
193 246
194 methods: { 247 methods: {
195 initialize() { 248 initialize() {
196 this.desserts = [ 249 this.desserts = [
197 { 250 {
198 no: "1", 251 no: "1",
199 ques: "questions sex", 252 ques: "questions sex ",
200 res: 8 253 res: 21
201 } 254 }
202 ]; 255 ];
203 }, 256 },
257 initializeData () {
258 this.getQuestion = [
259 {
260 name: 'Frozen Yogurt',
261 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
262 },
263 {
264 name: 'Zogurt',
265 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
266
267 },
268 {
269 name: 'Frozen Yogurt',
270 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
271
272 },
273 {
274 name: 'Cupcake',
275 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
276 },
277 {
278 name: 'Gingerbread',
279 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
280
281 },
282 {
283 name: 'Jelly bean',
284 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
285 },
286 {
287 name: 'Frozen Yogurt',
288 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
289 },
290 {
291 name: 'Zogurt',
292 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
293
294 },
295 {
296 name: 'Frozen Yogurt',
297 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
204 298
299 },
300 {
301 name: 'Cupcake',
302 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
303 },
304 {
305 name: 'Gingerbread',
306 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
307
308 },
309 {
310 name: 'Jelly bean',
311 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
312 },
313 ]
314 },
315 deleteAnswer (item) {
316 const index = this.getQuestion.indexOf(item)
317 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
318 },
205 editItem(item) { 319 editItem(item) {
206 this.editedIndex = this.desserts.indexOf(item); 320 this.editedIndex = this.desserts.indexOf(item);
207 this.editedItem = Object.assign({}, item); 321 this.editedItem = Object.assign({}, item);
208 this.dialog1 = true; 322 this.dialog1 = true;
209 }, 323 },
210 324
211 deleteItem(item) { 325 deleteItem(item) {
212 const index = this.desserts.indexOf(item); 326 const index = this.desserts.indexOf(item);
213 confirm("Are you sure you want to delete this item?") && 327 confirm("Are you sure you want to delete this item?") &&
214 this.desserts.splice(index, 1); 328 this.desserts.splice(index, 1);
215 }, 329 },
216 330
217 close() { 331 close() {
218 this.dialog = false; 332 this.dialog = false;
219 setTimeout(() => { 333 setTimeout(() => {
220 this.editedItem = Object.assign({}, this.defaultItem); 334 this.editedItem = Object.assign({}, this.defaultItem);
221 this.editedIndex = -1; 335 this.editedIndex = -1;
222 }, 300); 336 }, 300);
223 }, 337 },
224 close1() { 338 close1() {
225 this.dialog1 = false; 339 this.dialog1 = false;
226 setTimeout(() => { 340 setTimeout(() => {
227 this.editedItem = Object.assign({}, this.defaultItem); 341 this.editedItem = Object.assign({}, this.defaultItem);
228 this.editedIndex = -1; 342 this.editedIndex = -1;
229 }, 300); 343 }, 300);
230 }, 344 },
231 save() { 345 save() {
232 console.log("editedItem", this.editedItem); 346 console.log("editedItem", this.editedItem);
233 if (this.editedIndex > -1) { 347 if (this.editedIndex > -1) {
234 Object.assign(this.desserts[this.editedIndex], this.editedItem); 348 Object.assign(this.desserts[this.editedIndex], this.editedItem);
235 } else { 349 } else {
236 this.desserts.push(this.editedItem); 350 this.desserts.push(this.editedItem);
237 } 351 }
238 this.close(); 352 this.close();
239 }, 353 },
240 save1() { 354 save1() {
241 console.log("editedItem", this.editedItem); 355 console.log("editedItem", this.editedItem);
src/components/questions/skin.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <v-flex> 2 <!-- Add Question dialog -->
3 <v-card> 3 <v-flex>
4 <v-card>
4 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
5 <v-dialog v-model="dialog" max-width="800px"> 6 <v-dialog v-model="dialog" max-width="800px">
6
7 <v-card> 7 <v-card>
8 <v-card-title> 8 <v-card-title>
9 <span class="headline">{{ formTitle }}</span> 9 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
10 <h4 class="hidden-lg-only">{{ formTitle }}</h4>
10 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
11 <v-icon @click="close">close</v-icon> 12 <v-icon @click="close">close</v-icon>
12 </v-card-title> 13 </v-card-title>
13 <v-flex> 14 <v-flex>
14 <v-card> 15 <v-card>
15 <v-card-text> 16 <v-card-text>
16 <span> 17 <span>
17 <p><b>Ana Suggestion:</b> Select Suggestion</p></span> 18 <p>
18 <h5>Select Category:</h5> 19 <b>Ana Suggestion:</b>
19 <!-- <span> 20 Select Suggestion
20 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 21 </p>
21 <v-btn color="grey darken-2" flat>Sex</v-btn> 22 </span>
22 <v-btn color="grey darken-2" flat>Health</v-btn> 23 <h5>Select Category:</h5>
23 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 24 <!-- <span>
24 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 25 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
25 </span> --> 26 <v-btn color="grey darken-2" flat>Sex</v-btn>
26 <v-tabs 27 <v-btn color="grey darken-2" flat>Health</v-btn>
27 color="white" 28 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
28 show-arrows 29 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
29 > 30 </span>-->
30 <v-tabs-slider color="black"></v-tabs-slider> 31 </v-card-text>
31 <v-tab> 32 <v-tabs color="white" show-arrows>
32 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 33 <v-tabs-slider color="black"></v-tabs-slider>
33 </v-tab> 34 <v-tab>
34 <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn> 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
35 </v-tab> 36 </v-tab>
36 <v-tab> 37 <v-tab>
37 <v-btn color="grey darken-2" flat>Health</v-btn> 38 <v-btn color="grey darken-2" flat>Sex</v-btn>
38 </v-tab> 39 </v-tab>
39 <v-tab> 40 <v-tab>
40 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 41 <v-btn color="grey darken-2" flat>Health</v-btn>
41 </v-tab> 42 </v-tab>
42 <v-tab> 43 <v-tab>
43 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
44 </v-tab> 45 </v-tab>
46 <v-tab>
47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
48 </v-tab>
45 </v-tabs> 49 </v-tabs>
46 </v-card-text> 50 </v-card>
47 </v-card>
48 </v-flex> 51 </v-flex>
49 <v-card-text> 52 <v-card-text>
50 53 <v-container grid-list-md>
51 <v-container grid-list-md> 54 <v-layout wrap>
52 <v-layout wrap> 55 <v-flex xs12 sm6 md12>
53 <v-flex xs12 sm6 md12> 56 <v-textarea
54 <v-textarea 57 solo
55 solo 58 v-model="AddQuestioncredentials.question"
56 v-model="AddQuestioncredentials.question" 59 name="input-7-4"
57 name="input-7-4" 60 label="Type Question"
58 label="Type Question" 61 ></v-textarea>
59 ></v-textarea> 62 </v-flex>
60 </v-flex>
61 </v-layout> 63 </v-layout>
62 </v-container> 64 </v-container>
63 </v-card-text> 65 </v-card-text>
64
65 <v-card-actions> 66 <v-card-actions>
66 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
67 <v-btn dark large @click.native="save">Post Question</v-btn> 68 <v-btn dark large @click.native="save">Post Question</v-btn>
68 </v-card-actions> 69 </v-card-actions>
69 </v-card> 70 </v-card>
70 </v-dialog> 71 </v-dialog>
71 72 <!-- Edit Question Dialog see answer -->
72 73 <v-dialog v-model="dialog1" max-width="900px">
73 74 <v-card height="700px">
74 <v-dialog v-model="dialog1" max-width="800px"> 75 <v-card-title>
75 <v-card> 76 <span class="headline">Edit Question</span>
76 <v-card-title> 77 <v-spacer></v-spacer>
77 <span class="headline">Edit Question</span> 78 <v-icon @click="close1">close</v-icon>
78 <v-spacer></v-spacer> 79 </v-card-title>
79 <v-icon @click="close1">close</v-icon> 80 <v-card-text>
80 </v-card-title> 81 <v-layout wrap>
81 82 <v-flex xs12>
82 <v-card-text> 83 <v-textarea
83 <v-layout wrap> 84 solo
84 <v-flex xs12 sm6 md12> 85 v-model="editedItem.question"
85 <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> 86 name="input-7-4"
87 label="Question"
88 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
89 ></v-textarea>
90 </v-flex>
91 </v-layout>
92 <v-layout class="mt-4">
93 <v-flex xs12 sm6>
94 <h5>
95 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
96 </h5>
97 <h5
98 class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
99 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
100 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
101 </v-flex>
102 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
103 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
104 </v-flex>
105 </v-layout>
106 <v-layout>
107 <v-flex xs12 class="hidden-lg-only">
108 <v-btn dark small @click.native="save1">Save Edit</v-btn>
109 </v-flex>
110 </v-layout>
111 <v-layout class="mt-3 AnswerTable">
112 <v-flex xs12>
113 <div>
114 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
115 <template slot="items" slot-scope="props">
116 <v-layout>
117 <v-flex xs9 class="bottomAnswser">
118 <td class="pa-3">
119 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
120 <br>
121 {{ props.item.calories }}
122 </td>
123 </v-flex>
124 <v-flex xs3 class="bottomAnswser">
125 <td class="justify-center layout px -0 mt-4">
126 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
127 </td>
128 </v-flex>
129 </v-layout>
130 </template>
131 <template slot="no-data">
132 <v-btn color="primary" @click="initializeData">Reset</v-btn>
133 </template>
134 </v-data-table>
135 </div>
86 </v-flex> 136 </v-flex>
87 </v-layout> 137 </v-layout>
88 <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br>
89 Diagnosis 1,Diagnosis 2,Diagnosis 3
90 <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span>
91 </v-card-text> 138 </v-card-text>
92 </v-card> 139 </v-card>
93 </v-dialog> 140 </v-dialog>
94 <v-data-table 141 <!-- Forum Questions data-table -->
95 :headers="headers" 142 <v-card>
96 :items="desserts" 143 <v-data-table
97 class="elevation-1" 144 :headers="headers"
98 :pagination.sync="pagination" 145 :items="desserts"
99 > 146 class="elevation-1"
100 <template slot="items" slot-scope="props"> 147 :pagination.sync="pagination"
101 <tr v-if="props.index === 0"> 148 >
102 <td id="td">&nbsp;</td> 149 <template slot="items" slot-scope="props">
103 <td> 150 <tr v-if="props.index === 0">
104 <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> 151 <td id="td">&nbsp;</td>
105 </td> 152 <td class="pa-4">
106 <td id="td">&nbsp;</td> 153 <span style="cursor:pointer" @click="dialog=true">
107 <td id="td">&nbsp;</td> 154 <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
108 </tr> 155 </span>
109 <tr> 156 </td>
110 <td id="td" class="text-xs-center">{{ props.item.no }}</td> 157 <td id="td">&nbsp;</td>
111 <td id="td">{{ props.item.ques }}</td> 158 <td id="td">&nbsp;</td>
112 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 159 </tr>
113 <td class="text-xs-center"> 160 <tr>
114 <span> 161 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
115 <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> 162 <td id="td">{{ props.item.ques }}</td>
116 <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> 163 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
117 </span> 164 <td class="text-xs-center">
118 </td> 165 <span>
119 </tr> 166 <img
120 </template> 167 style="cursor:pointer; height:18px; "
121 </v-data-table> 168 class="mr-5"
122 </v-card> 169 @click="editItem(props.item)"
170 src="/static/icon/edit1.png"
171 >
172 <img
173 style="cursor:pointer; height:20px; "
174 class="mr-5"
175 @click="deleteItem(props.item)"
176 src="/static/icon/delete1.png"
177 >
178 </span>
179 </td>
180 </tr>
181 </template>
182 </v-data-table>
183 </v-card>
184 </v-card>
123 </v-flex> 185 </v-flex>
124 </template> 186 </template>
125 <script> 187 <script>
126 export default { 188 export default {
127 data: () => ({ 189 data: () => ({
128 question: '', 190 question: "",
129 AddQuestioncredentials: {}, 191 AddQuestioncredentials: {},
130 dialog: false, 192 dialog: false,
131 dialog1: false, 193 dialog1: false,
132 isActive: true, 194 isActive: true,
133 newActive: false, 195 newActive: false,
134 pagination: { 196 pagination: {
135 rowsPerPage: 10, 197 rowsPerPage: 10
136 }, 198 },
199 getQuestion: [],
137 headers: [ 200 headers: [
138 { 201 {
139 text: 'No.', 202 text: "No.",
140 align: 'center', 203 align: "center",
141 sortable: false, 204 sortable: false,
142 value: 'name' 205 value: "name"
143 }, 206 },
144 { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, 207 { text: "Posts", value: "posts", sortable: false, align: "center" },
145 { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, 208 {
146 { text: '', value: 'carbs', sortable: false, align: 'center' }, 209 text: "Responses",
210 value: "responses",
211 sortable: false,
212 align: "center"
213 },
214 { text: "", value: "carbs", sortable: false, align: "center" }
147 ], 215 ],
148 desserts: [], 216 desserts: [],
149 editedIndex: -1, 217 editedIndex: -1,
150 editedItem: { 218 editedItem: {
151 question: '', 219 question: "",
152 220 name: ''
153 }, 221 },
154 defaultItem: { 222 defaultItem: {
155 no: 0, 223 no: 0,
156 question: '', 224 name: '',
157 res: 0, 225 question: "",
158 226 res: 0
159 } 227 }
160 }), 228 }),
161 229
162 computed: { 230 computed: {
163 formTitle () { 231 formTitle() {
164 return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; 232 return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
165 } 233 }
166 }, 234 },
167 235
168 watch: { 236 watch: {
169 dialog (val) { 237 dialog(val) {
170 val || this.close(); 238 val || this.close();
171 } 239 }
172 }, 240 },
173 241
174 created () { 242 created() {
175 this.initialize(); 243 this.initialize();
244 this.initializeData()
176 }, 245 },
177 246
178 methods: { 247 methods: {
179 initialize () { 248 initialize() {
180 this.desserts = [ 249 this.desserts = [
181 { 250 {
182 no: '1', 251 no: "1",
183 ques: 'questions skin', 252 ques: "questions Skin & Beauty",
184 res: 16, 253 res: 21
185 }, 254 }
186 ]; 255 ];
187 }, 256 },
257 initializeData () {
258 this.getQuestion = [
259 {
260 name: 'Frozen Yogurt',
261 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
262 },
263 {
264 name: 'Zogurt',
265 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
266
267 },
268 {
269 name: 'Frozen Yogurt',
270 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
271
272 },
273 {
274 name: 'Cupcake',
275 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
276 },
277 {
278 name: 'Gingerbread',
279 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
280
281 },
282 {
283 name: 'Jelly bean',
284 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
285 },
286 {
287 name: 'Frozen Yogurt',
288 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
289 },
290 {
291 name: 'Zogurt',
292 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
293
294 },
295 {
296 name: 'Frozen Yogurt',
297 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
188 298
189 editItem (item) { 299 },
300 {
301 name: 'Cupcake',
302 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
303 },
304 {
305 name: 'Gingerbread',
306 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
307
308 },
309 {
310 name: 'Jelly bean',
311 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
312 },
313 ]
314 },
315 deleteAnswer (item) {
316 const index = this.getQuestion.indexOf(item)
317 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
318 },
319 editItem(item) {
190 this.editedIndex = this.desserts.indexOf(item); 320 this.editedIndex = this.desserts.indexOf(item);
191 this.editedItem = Object.assign({}, item); 321 this.editedItem = Object.assign({}, item);
192 this.dialog1 = true; 322 this.dialog1 = true;
193 }, 323 },
194 324
195 deleteItem (item) { 325 deleteItem(item) {
196 const index = this.desserts.indexOf(item); 326 const index = this.desserts.indexOf(item);
197 confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); 327 confirm("Are you sure you want to delete this item?") &&
328 this.desserts.splice(index, 1);
198 }, 329 },
199 330
200 close () { 331 close() {
201 this.dialog = false; 332 this.dialog = false;
202 setTimeout(() => { 333 setTimeout(() => {
203 this.editedItem = Object.assign({}, this.defaultItem); 334 this.editedItem = Object.assign({}, this.defaultItem);
204 this.editedIndex = -1; 335 this.editedIndex = -1;
205 }, 300); 336 }, 300);
206 }, 337 },
207 close1 () { 338 close1() {
208 this.dialog1 = false; 339 this.dialog1 = false;
209 setTimeout(() => { 340 setTimeout(() => {
210 this.editedItem = Object.assign({}, this.defaultItem); 341 this.editedItem = Object.assign({}, this.defaultItem);
211 this.editedIndex = -1; 342 this.editedIndex = -1;
212 }, 300); 343 }, 300);
213 }, 344 },
214 save () { 345 save() {
215 console.log('editedItem', this.editedItem); 346 console.log("editedItem", this.editedItem);
216 if (this.editedIndex > -1) { 347 if (this.editedIndex > -1) {
217 Object.assign(this.desserts[this.editedIndex], this.editedItem); 348 Object.assign(this.desserts[this.editedIndex], this.editedItem);
218 } else { 349 } else {
219 this.desserts.push(this.editedItem); 350 this.desserts.push(this.editedItem);
220 } 351 }
221 this.close(); 352 this.close();
222 }, 353 },
223 save1 () { 354 save1() {
224 console.log('editedItem', this.editedItem); 355 console.log("editedItem", this.editedItem);
225 if (this.editedIndex > -1) { 356 if (this.editedIndex > -1) {
226 Object.assign(this.desserts[this.editedIndex], this.editedItem); 357 Object.assign(this.desserts[this.editedIndex], this.editedItem);
227 } else { 358 } else {
228 this.desserts.push(this.editedItem); 359 this.desserts.push(this.editedItem);
229 } 360 }
230 this.close1(); 361 this.close1();
231 } 362 }
232 }, 363 }
233 // switchComponent (comp) { 364 // switchComponent (comp) {
234 // this.$emit('switchComp', comp); 365 // this.$emit('switchComp', comp);
235 // } 366 // }
236 }; 367 };
237 </script> 368 </script>
238 <style> 369 <style>
239 #td{ 370 #td {
240 border: 1px solid #dddddd; 371 border: 1px solid #dddddd;
241 text-align: left; 372 text-align: left;
242 padding: 8px; 373 padding: 8px;
243 374 }
375 .AnswerTable{
src/components/questions/suggestion.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <!-- Add Question dialog -->
2 <v-flex> 3 <v-flex>
3 <v-card> 4 <v-card>
4 <v-spacer></v-spacer>
5 <v-dialog v-model="dialog" max-width="800px"> 5 <v-dialog v-model="dialog" max-width="800px">
6 <v-card> 6 <v-card>
7 <v-card-title> 7 <v-card-title>
8 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span> 8 <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
9 <h4 class="hidden-lg-only">{{ formTitle }}</h4> 9 <h4 class="hidden-lg-only">{{ formTitle }}</h4>
10 <v-spacer></v-spacer> 10 <v-spacer></v-spacer>
11 <v-icon @click="close">close</v-icon> 11 <v-icon @click="close">close</v-icon>
12 </v-card-title> 12 </v-card-title>
13 <v-flex> 13 <v-flex>
14 <v-card> 14 <v-card>
15 <v-card-text> 15 <v-card-text>
16 <span> 16 <span>
17 <p> 17 <p>
18 <b>Ana Suggestion:</b> 18 <b>Ana Suggestion:</b>
19 Select Suggestion 19 Select Suggestion
20 </p> 20 </p>
21 </span> 21 </span>
22 <h5>Select Category:</h5> 22 <h5>Select Category:</h5>
23 <!-- <span> 23 <!-- <span>
24 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 24 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
25 <v-btn color="grey darken-2" flat>Sex</v-btn> 25 <v-btn color="grey darken-2" flat>Sex</v-btn>
26 <v-btn color="grey darken-2" flat>Health</v-btn> 26 <v-btn color="grey darken-2" flat>Health</v-btn>
27 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 27 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
28 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 28 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
29 </span>--> 29 </span>-->
30 </v-card-text> 30 </v-card-text>
31 <v-tabs color="white" show-arrows> 31 <v-tabs color="white" show-arrows>
32 <v-tabs-slider color="black"></v-tabs-slider> 32 <v-tabs-slider color="black"></v-tabs-slider>
33 <v-tab> 33 <v-tab>
34 <v-btn color="grey darken-2" flat>Suggestion</v-btn> 34 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
35 </v-tab> 35 </v-tab>
36 <v-tab> 36 <v-tab>
37 <v-btn color="grey darken-2" flat>Sex</v-btn> 37 <v-btn color="grey darken-2" flat>Sex</v-btn>
38 </v-tab> 38 </v-tab>
39 <v-tab> 39 <v-tab>
40 <v-btn color="grey darken-2" flat>Health</v-btn> 40 <v-btn color="grey darken-2" flat>Health</v-btn>
41 </v-tab> 41 </v-tab>
42 <v-tab> 42 <v-tab>
43 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> 43 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
44 </v-tab> 44 </v-tab>
45 <v-tab> 45 <v-tab>
46 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> 46 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
47 </v-tab> 47 </v-tab>
48 </v-tabs> 48 </v-tabs>
49 </v-card> 49 </v-card>
50 </v-flex> 50 </v-flex>
51 <v-card-text> 51 <v-card-text>
52 <v-container grid-list-md> 52 <v-container grid-list-md>
53 <v-layout wrap> 53 <v-layout wrap>
54 <v-flex xs12 sm6 md12> 54 <v-flex xs12 sm6 md12>
55 <v-textarea 55 <v-textarea
56 solo 56 solo
57 v-model="AddQuestioncredentials.question" 57 v-model="AddQuestioncredentials.question"
58 name="input-7-4" 58 name="input-7-4"
59 label="Type Question" 59 label="Type Question"
60 ></v-textarea> 60 ></v-textarea>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-container> 63 </v-container>
64 </v-card-text> 64 </v-card-text>
65 <v-card-actions> 65 <v-card-actions>
66 <v-spacer></v-spacer> 66 <v-spacer></v-spacer>
67 <v-btn dark large @click.native="save">Post Question</v-btn> 67 <v-btn dark large @click.native="save">Post Question</v-btn>
68 </v-card-actions> 68 </v-card-actions>
69 </v-card> 69 </v-card>
70 </v-dialog> 70 </v-dialog>
71 <!-- Edit Question Dialog see answer -->
71 <v-dialog v-model="dialog1" max-width="900px"> 72 <v-dialog v-model="dialog1" max-width="900px">
72 <v-card height="700px"> 73 <v-card height="700px">
73 <v-card-title> 74 <v-card-title>
74 <span class="headline">Edit Question</span> 75 <span class="headline">Edit Question</span>
75 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
76 <v-icon @click="close1">close</v-icon> 77 <v-icon @click="close1">close</v-icon>
77 </v-card-title> 78 </v-card-title>
78 <v-card-text> 79 <v-card-text>
79 <v-layout wrap> 80 <v-layout wrap>
80 <v-flex xs12> 81 <v-flex xs12>
81 <v-textarea 82 <v-textarea
82 solo 83 solo
83 v-model="editedItem.question" 84 v-model="editedItem.question"
84 name="input-7-4" 85 name="input-7-4"
85 label="Question" 86 label="Question"
86 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through." 87 value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
87 ></v-textarea> 88 ></v-textarea>
88 </v-flex> 89 </v-flex>
89 </v-layout> 90 </v-layout>
90 <v-layout class="mt-4"> 91 <v-layout class="mt-4">
91 <v-flex xs12 sm6> 92 <v-flex xs12 sm6>
92 <h5> 93 <h5>
93 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding 94 <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
94 </h5> 95 </h5>
95 <h5 96 <h5
96 class="subheading hidden-xs-only hidden-md-only hidden-sm-only" 97 class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
97 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5> 98 >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
98 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p> 99 <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
99 </v-flex> 100 </v-flex>
100 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only"> 101 <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
101 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn> 102 <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
102 </v-flex> 103 </v-flex>
103 </v-layout> 104 </v-layout>
104 <v-layout> 105 <v-layout>
105 <v-flex xs12 class="hidden-lg-only"> 106 <v-flex xs12 class="hidden-lg-only">
106 <v-btn dark small @click.native="save1">Save Edit</v-btn> 107 <v-btn dark small @click.native="save1">Save Edit</v-btn>
107 </v-flex> 108 </v-flex>
108 </v-layout> 109 </v-layout>
109 <v-layout class="mt-3 AnswerTable"> 110 <v-layout class="mt-3 AnswerTable">
110 <v-flex xs12> 111 <v-flex xs12>
111 <div> 112 <div>
112 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers> 113 <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
113 <template slot="items" slot-scope="props"> 114 <template slot="items" slot-scope="props">
114 <v-layout> 115 <v-layout>
115 <v-flex xs9 class="bottomAnswser"> 116 <v-flex xs9 class="bottomAnswser">
116 <td class="pa-3"> 117 <td class="pa-3">
117 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span> 118 <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
118 <br> 119 <br>
119 {{ props.item.calories }} 120 {{ props.item.calories }}
120 </td> 121 </td>
121 </v-flex> 122 </v-flex>
122 <v-flex xs3 class="bottomAnswser"> 123 <v-flex xs3 class="bottomAnswser">
123 <td class="justify-center layout px -0 mt-4"> 124 <td class="justify-center layout px -0 mt-4">
124 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon> 125 <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
125 </td> 126 </td>
126 </v-flex> 127 </v-flex>
127 </v-layout> 128 </v-layout>
128 </template> 129 </template>
129 <template slot="no-data"> 130 <template slot="no-data">
130 <v-btn color="primary" @click="initializeData">Reset</v-btn> 131 <v-btn color="primary" @click="initializeData">Reset</v-btn>
131 </template> 132 </template>
132 </v-data-table> 133 </v-data-table>
133 </div> 134 </div>
134 </v-flex> 135 </v-flex>
135 </v-layout> 136 </v-layout>
136 </v-card-text> 137 </v-card-text>
137 </v-card> 138 </v-card>
138 </v-dialog> 139 </v-dialog>
140 <!-- Forum Questions data-table -->
139 <v-card> 141 <v-card>
140 <v-data-table 142 <v-data-table
141 :headers="headers" 143 :headers="headers"
142 :items="desserts" 144 :items="desserts"
143 class="elevation-1" 145 class="elevation-1"
144 :pagination.sync="pagination" 146 :pagination.sync="pagination"
145 > 147 >
146 <template slot="items" slot-scope="props"> 148 <template slot="items" slot-scope="props">
147 <tr v-if="props.index === 0"> 149 <tr v-if="props.index === 0">
148 <td id="td">&nbsp;</td> 150 <td id="td">&nbsp;</td>
149 <td class="pa-4"> 151 <td class="pa-4">
150 <span style="cursor:pointer" @click="dialog=true"> 152 <span style="cursor:pointer" @click="dialog=true">
151 <v-icon class="outlined">add_box</v-icon>Add New Question 153 <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
152 </span> 154 </span>
153 </td> 155 </td>
154 <td id="td">&nbsp;</td> 156 <td id="td">&nbsp;</td>
155 <td id="td">&nbsp;</td> 157 <td id="td">&nbsp;</td>
156 </tr> 158 </tr>
157 <tr> 159 <tr>
158 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td> 160 <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
159 <td id="td">{{ props.item.ques }}</td> 161 <td id="td">{{ props.item.ques }}</td>
160 <td id="td" class="text-xs-center">{{ props.item.res }}</td> 162 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
161 <td class="text-xs-center"> 163 <td class="text-xs-center">
162 <span> 164 <span>
163 <img 165 <img
164 style="cursor:pointer; height:18px; " 166 style="cursor:pointer; height:18px; "
165 class="mr-5" 167 class="mr-5"
166 @click="editItem(props.item)" 168 @click="editItem(props.item)"
167 src="/static/icon/edit1.png" 169 src="/static/icon/edit1.png"
168 > 170 >
169 <img 171 <img
170 style="cursor:pointer; height:20px; " 172 style="cursor:pointer; height:20px; "
171 class="mr-5" 173 class="mr-5"
172 @click="deleteItem(props.item)" 174 @click="deleteItem(props.item)"
173 src="/static/icon/delete1.png" 175 src="/static/icon/delete1.png"
174 > 176 >
175 </span> 177 </span>
176 </td> 178 </td>
177 </tr> 179 </tr>
178 </template> 180 </template>
179 </v-data-table> 181 </v-data-table>
180 </v-card> 182 </v-card>
181 </v-card> 183 </v-card>
182 </v-flex> 184 </v-flex>
183 </template> 185 </template>
184 <script> 186 <script>
185 export default { 187 export default {
186 data: () => ({ 188 data: () => ({
187 question: "", 189 question: "",
188 AddQuestioncredentials: {}, 190 AddQuestioncredentials: {},
189 dialog: false, 191 dialog: false,
190 dialog1: false, 192 dialog1: false,
191 isActive: true, 193 isActive: true,
192 newActive: false, 194 newActive: false,
193 pagination: { 195 pagination: {
194 rowsPerPage: 10 196 rowsPerPage: 10
195 }, 197 },
196 getQuestion: [], 198 getQuestion: [],
197 headers: [ 199 headers: [
198 { 200 {
199 text: "No.", 201 text: "No.",
200 align: "center", 202 align: "center",
201 sortable: false, 203 sortable: false,
202 value: "name" 204 value: "name"
203 }, 205 },
204 { text: "Posts", value: "posts", sortable: false, align: "center" }, 206 { text: "Posts", value: "posts", sortable: false, align: "center" },
205 { 207 {
206 text: "Responses", 208 text: "Responses",
207 value: "responses", 209 value: "responses",
208 sortable: false, 210 sortable: false,
209 align: "center" 211 align: "center"
210 }, 212 },
211 { text: "", value: "carbs", sortable: false, align: "center" } 213 { text: "", value: "carbs", sortable: false, align: "center" }
212 ], 214 ],
213 desserts: [], 215 desserts: [],
214 editedIndex: -1, 216 editedIndex: -1,
215 editedItem: { 217 editedItem: {
216 question: "", 218 question: "",
217 name: '' 219 name: ''
218 }, 220 },
219 defaultItem: { 221 defaultItem: {
220 no: 0, 222 no: 0,
221 name: '', 223 name: '',
222 question: "", 224 question: "",
223 res: 0 225 res: 0
224 } 226 }
225 }), 227 }),
226 228
227 computed: { 229 computed: {
228 formTitle() { 230 formTitle() {
229 return this.editedIndex === -1 ? "Create New Question" : "Edit Question"; 231 return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
230 } 232 }
231 }, 233 },
232 234
233 watch: { 235 watch: {
234 dialog(val) { 236 dialog(val) {
235 val || this.close(); 237 val || this.close();
236 } 238 }
237 }, 239 },
238 240
239 created() { 241 created() {
240 this.initialize(); 242 this.initialize();
241 this.initializeData() 243 this.initializeData()
242 }, 244 },
243 245
244 methods: { 246 methods: {
245 initialize() { 247 initialize() {
246 this.desserts = [ 248 this.desserts = [
247 { 249 {
248 no: "1", 250 no: "1",
249 ques: "questions suggestion ", 251 ques: "questions suggestion ",
250 res: 21 252 res: 21
251 }, 253 },
252 { 254 {
253 no: "1", 255 no: "1",
254 ques: "questions", 256 ques: "questions",
255 res: 21 257 res: 21
256 }, 258 },
257 { 259 {
258 no: "1", 260 no: "1",
259 ques: " suggestion", 261 ques: " suggestion",
260 res: 21 262 res: 21
261 }, 263 },
262 { 264 {
263 no: "1", 265 no: "1",
264 ques: "questions", 266 ques: "questions",
265 res: 21 267 res: 21
266 }, 268 },
267 { 269 {
268 no: "1", 270 no: "1",
269 ques: "questions suggestion", 271 ques: "questions suggestion",
270 res: 21 272 res: 21
271 }, 273 },
272 { 274 {
273 no: "1", 275 no: "1",
274 ques: "suggestion", 276 ques: "suggestion",
275 res: 21 277 res: 21
276 }, 278 },
277 { 279 {
278 no: "1", 280 no: "1",
279 ques: "questions suggestion", 281 ques: "questions suggestion",
280 res: 21 282 res: 21
281 } 283 }
282 ]; 284 ];
283 }, 285 },
284 initializeData () { 286 initializeData () {
285 this.getQuestion = [ 287 this.getQuestion = [
286 { 288 {
287 name: 'Frozen Yogurt', 289 name: 'Frozen Yogurt',
288 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 290 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
289 }, 291 },
290 { 292 {
291 name: 'Zogurt', 293 name: 'Zogurt',
292 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 294 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
293 295
294 }, 296 },
295 { 297 {
296 name: 'Frozen Yogurt', 298 name: 'Frozen Yogurt',
297 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 299 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
298 300
299 }, 301 },
300 { 302 {
301 name: 'Cupcake', 303 name: 'Cupcake',
302 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 304 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
303 }, 305 },
304 { 306 {
305 name: 'Gingerbread', 307 name: 'Gingerbread',
306 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 308 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
307 309
308 }, 310 },
309 { 311 {
310 name: 'Jelly bean', 312 name: 'Jelly bean',
311 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 313 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
312 }, 314 },
313 { 315 {
314 name: 'Frozen Yogurt', 316 name: 'Frozen Yogurt',
315 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 317 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
316 }, 318 },
317 { 319 {
318 name: 'Zogurt', 320 name: 'Zogurt',
319 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 321 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
320 322
321 }, 323 },
322 { 324 {
323 name: 'Frozen Yogurt', 325 name: 'Frozen Yogurt',
324 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 326 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
325 327
326 }, 328 },
327 { 329 {
328 name: 'Cupcake', 330 name: 'Cupcake',
329 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 331 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
330 }, 332 },
331 { 333 {
332 name: 'Gingerbread', 334 name: 'Gingerbread',
333 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 335 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
334 336
335 }, 337 },
336 { 338 {
337 name: 'Jelly bean', 339 name: 'Jelly bean',
338 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.' 340 calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
339 }, 341 },
340 ] 342 ]
341 }, 343 },
342 deleteAnswer (item) { 344 deleteAnswer (item) {
343 const index = this.getQuestion.indexOf(item) 345 const index = this.getQuestion.indexOf(item)
344 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1) 346 confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
345 }, 347 },
346 editItem(item) { 348 editItem(item) {
347 this.editedIndex = this.desserts.indexOf(item); 349 this.editedIndex = this.desserts.indexOf(item);
348 this.editedItem = Object.assign({}, item); 350 this.editedItem = Object.assign({}, item);
349 this.dialog1 = true; 351 this.dialog1 = true;
350 }, 352 },
351 353
352 deleteItem(item) { 354 deleteItem(item) {
353 const index = this.desserts.indexOf(item); 355 const index = this.desserts.indexOf(item);
354 confirm("Are you sure you want to delete this item?") && 356 confirm("Are you sure you want to delete this item?") &&
355 this.desserts.splice(index, 1); 357 this.desserts.splice(index, 1);
356 }, 358 },
357 359
358 close() { 360 close() {
359 this.dialog = false; 361 this.dialog = false;
360 setTimeout(() => { 362 setTimeout(() => {
361 this.editedItem = Object.assign({}, this.defaultItem); 363 this.editedItem = Object.assign({}, this.defaultItem);
362 this.editedIndex = -1; 364 this.editedIndex = -1;
363 }, 300); 365 }, 300);
364 }, 366 },
365 close1() { 367 close1() {
366 this.dialog1 = false; 368 this.dialog1 = false;
367 setTimeout(() => { 369 setTimeout(() => {
368 this.editedItem = Object.assign({}, this.defaultItem); 370 this.editedItem = Object.assign({}, this.defaultItem);
369 this.editedIndex = -1; 371 this.editedIndex = -1;
370 }, 300); 372 }, 300);
371 }, 373 },
372 save() { 374 save() {
373 console.log("editedItem", this.editedItem); 375 console.log("editedItem", this.editedItem);
374 if (this.editedIndex > -1) { 376 if (this.editedIndex > -1) {
375 Object.assign(this.desserts[this.editedIndex], this.editedItem); 377 Object.assign(this.desserts[this.editedIndex], this.editedItem);
376 } else { 378 } else {
377 this.desserts.push(this.editedItem); 379 this.desserts.push(this.editedItem);
378 } 380 }
379 this.close(); 381 this.close();
380 }, 382 },
381 save1() { 383 save1() {
382 console.log("editedItem", this.editedItem); 384 console.log("editedItem", this.editedItem);
383 if (this.editedIndex > -1) { 385 if (this.editedIndex > -1) {
384 Object.assign(this.desserts[this.editedIndex], this.editedItem); 386 Object.assign(this.desserts[this.editedIndex], this.editedItem);
385 } else { 387 } else {
386 this.desserts.push(this.editedItem); 388 this.desserts.push(this.editedItem);
387 } 389 }
388 this.close1(); 390 this.close1();
389 } 391 }
390 } 392 }
391 // switchComponent (comp) { 393 // switchComponent (comp) {
392 // this.$emit('switchComp', comp); 394 // this.$emit('switchComp', comp);
393 // } 395 // }
394 }; 396 };
395 </script> 397 </script>
396 <style> 398 <style>
397 #td { 399 #td {
398 border: 1px solid #dddddd; 400 border: 1px solid #dddddd;
399 text-align: left; 401 text-align: left;
400 padding: 8px; 402 padding: 8px;
401 } 403 }
402 .AnswerTable{ 404 .AnswerTable{
403 height: 370px;overflow: auto; 405 height: 370px;overflow: auto;
404 } 406 }
405 .bottomAnswser{ 407 .bottomAnswser{
406 border-bottom:1px solid #aaa; 408 border-bottom:1px solid #aaa;
407 } 409 }
408 </style> 410 </style>
src/pages/Provider.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <v-flex xs12> 2 <v-flex xs12>
3 <app-toolbar class="app--toolbar"></app-toolbar> 3 <app-toolbar class="app--toolbar"></app-toolbar>
4 <v-card> 4 <v-card>
5 <v-card-title> 5 <v-card-title>
6 <v-flex xs12 lg2 md3 sm4> 6 <v-flex xs12 lg2 md3 sm4>
7 <h4 class="text-xs-center">Healthcare Providers</h4> 7 <h4 class="text-xs-center font-weight-medium">Healthcare Providers</h4>
8 </v-flex> 8 </v-flex>
9 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
10 <!-- SEARCH ALL HEALTH PROVIDER --> 10 <!-- SEARCH ALL HEALTH PROVIDER -->
11 <v-flex xs12 sm4 lg3 class="top"> 11 <v-flex xs12 sm4 lg3 class="top">
12 <v-text-field 12 <v-text-field
13 justify-right 13 justify-right
14 prepend-icon="search" 14 prepend-icon="search"
15 v-model="term" 15 v-model="term"
16 label="Find Yours Users" 16 label="Find Yours Users"
17 color="black" 17 color="black"
18 @change="getProviderList" 18 @change="getProviderList"
19 ></v-text-field> 19 ></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-card-title> 21 </v-card-title>
22 <!-- EDIT HEALTH PROVIDER --> 22 <!-- EDIT HEALTH PROVIDER -->
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="500px"> 31 <v-dialog v-model="dialog" max-width="500px">
32 <v-toolbar color="white"> 32 <v-toolbar color="white">
33 <v-spacer></v-spacer> 33 <v-spacer></v-spacer>
34 <v-toolbar-title>Edit Profile</v-toolbar-title> 34 <v-toolbar-title>Edit Profile</v-toolbar-title>
35 <v-spacer></v-spacer> 35 <v-spacer></v-spacer>
36 </v-toolbar> 36 </v-toolbar>
37 <v-card> 37 <v-card>
38 <v-flex align-center justify-center layout text-xs-center> 38 <v-flex align-center justify-center layout text-xs-center>
39 <v-avatar size="50px" style="position:absolute; top:10px; "> 39 <v-avatar size="50px" style="position:absolute; top:10px; ">
40 <img src="/static/icon/user.png"> 40 <img src="/static/icon/user.png">
41 </v-avatar> 41 </v-avatar>
42 </v-flex> 42 </v-flex>
43 <v-card-text> 43 <v-card-text>
44 <v-container grid-list-md> 44 <v-container grid-list-md>
45 <v-layout wrap justify-center> 45 <v-layout wrap justify-center>
46 <v-flex xs12 sm9> 46 <v-flex xs12 sm9>
47 <v-form ref="form" v-model="valid" lazy-validation> 47 <v-form ref="form" v-model="valid" lazy-validation>
48 <v-layout style="position:relative; top:15px; "> 48 <v-layout style="position:relative; top:15px; ">
49 <v-flex xs4 class="pt-4 subheading"> 49 <v-flex xs4 class="pt-4 subheading">
50 <label>First Name:</label> 50 <label>First Name:</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8> 52 <v-flex xs8>
53 <v-text-field v-model="editedItem.name" :rules="nameRules" required></v-text-field> 53 <v-text-field v-model="editedItem.name" :rules="nameRules" required></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 <v-layout> 56 <v-layout>
57 <v-flex xs4 class="pt-4 subheading"> 57 <v-flex xs4 class="pt-4 subheading">
58 <label>Last Name:</label> 58 <label>Last Name:</label>
59 </v-flex> 59 </v-flex>
60 <v-flex xs8> 60 <v-flex xs8>
61 <v-text-field v-model="editedItem.lastname" required></v-text-field> 61 <v-text-field v-model="editedItem.lastname" required></v-text-field>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 class="pt-4 subheading"> 65 <v-flex xs4 class="pt-4 subheading">
66 <label>Email ID:</label> 66 <label>Email ID:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8> 68 <v-flex xs8>
69 <v-text-field 69 <v-text-field
70 v-model="editedItem.email" 70 v-model="editedItem.email"
71 :rules="emailRules" 71 :rules="emailRules"
72 data-vv-name="E-mail" 72 data-vv-name="E-mail"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-card-actions> 77 <v-card-actions>
78 <v-btn round dark @click.native="close">Cancel</v-btn> 78 <v-btn round dark @click.native="close">Cancel</v-btn>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 <v-btn round dark @click.native="save">Save</v-btn> 80 <v-btn round dark @click.native="save">Save</v-btn>
81 </v-card-actions> 81 </v-card-actions>
82 </v-form> 82 </v-form>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-container> 85 </v-container>
86 </v-card-text> 86 </v-card-text>
87 </v-card> 87 </v-card>
88 </v-dialog> 88 </v-dialog>
89 <!-- VIEW PROFILE OF PRVIDE LIST --> 89 <!-- VIEW PROFILE OF PRVIDE LIST -->
90 <v-dialog v-model="dialog1" max-width="700px"> 90 <v-dialog v-model="dialog1" max-width="700px">
91 <v-toolbar color="white"> 91 <v-toolbar color="white">
92 <v-spacer></v-spacer> 92 <v-spacer></v-spacer>
93 <v-toolbar-title>Profile</v-toolbar-title> 93 <v-toolbar-title>Profile</v-toolbar-title>
94 <v-spacer></v-spacer> 94 <v-spacer></v-spacer>
95 <v-icon @click="close1">close</v-icon> 95 <v-icon @click="close1">close</v-icon>
96 </v-toolbar> 96 </v-toolbar>
97 <v-card> 97 <v-card>
98 <v-flex align-center justify-center layout text-xs-center> 98 <v-flex align-center justify-center layout text-xs-center>
99 <v-avatar size="60px" style="position:absolute; top:10px;"> 99 <v-avatar size="60px" style="position:absolute; top:10px;">
100 <img src="/static/icon/user.png"> 100 <img src="/static/icon/user.png">
101 </v-avatar> 101 </v-avatar>
102 </v-flex> 102 </v-flex>
103 <v-card-text> 103 <v-card-text>
104 <v-container grid-list-md> 104 <v-container grid-list-md>
105 <v-layout wrap justify-center> 105 <v-layout wrap justify-center>
106 <v-flex sm12 offset-sm3> 106 <v-flex sm12 offset-sm3>
107 <br> 107 <br>
108 <br> 108 <br>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4> 110 <v-flex xs4>
111 <h5 class="right">First Name:</h5> 111 <h5 class="right">First Name:</h5>
112 </v-flex> 112 </v-flex>
113 <v-flex xs8> 113 <v-flex xs8>
114 <h5 class="left">{{ editedItem.name }}</h5> 114 <h5 class="left">{{ editedItem.name }}</h5>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 <v-layout> 117 <v-layout>
118 <v-flex xs4> 118 <v-flex xs4>
119 <h5 class="right my-3">Last Name:</h5> 119 <h5 class="right my-3">Last Name:</h5>
120 </v-flex> 120 </v-flex>
121 <v-flex xs8> 121 <v-flex xs8>
122 <h5 class="my-3 left">{{ editedItem.name }}</h5> 122 <h5 class="my-3 left">{{ editedItem.name }}</h5>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 <v-layout> 125 <v-layout>
126 <v-flex xs4> 126 <v-flex xs4>
127 <h5 class="right">Email:</h5> 127 <h5 class="right">Email:</h5>
128 </v-flex> 128 </v-flex>
129 <v-flex xs8> 129 <v-flex xs8>
130 <h5 class="left">{{ editedItem.email }}</h5> 130 <h5 class="left">{{ editedItem.email }}</h5>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex> 133 </v-flex>
134 </v-layout> 134 </v-layout>
135 </v-container> 135 </v-container>
136 </v-card-text> 136 </v-card-text>
137 </v-card> 137 </v-card>
138 <!-- PROVIDER DATA TABLE OF PROVIDER DEATILS --> 138 <!-- PROVIDER DATA TABLE OF PROVIDER DEATILS -->
139 </v-dialog> 139 </v-dialog>
140 <v-data-table 140 <v-data-table
141 :headers="headers" 141 :headers="headers"
142 :items="desserts" 142 :items="desserts"
143 class="elevation-1" 143 class="elevation-1"
144 :pagination.sync="pagination" 144 :pagination.sync="pagination"
145 > 145 >
146 <template slot="items" slot-scope="props"> 146 <template slot="items" slot-scope="props">
147 <v-snackbar 147 <v-snackbar
148 :timeout="timeout" 148 :timeout="timeout"
149 :top="y === 'top'" 149 :top="y === 'top'"
150 :right="x === 'right'" 150 :right="x === 'right'"
151 :vertical="mode === 'vertical'" 151 :vertical="mode === 'vertical'"
152 v-model="statussnackbar" 152 v-model="statussnackbar"
153 color="success" 153 color="success"
154 >{{ text }}</v-snackbar> 154 >{{ text }}</v-snackbar>
155 <td id="td" class="text-xs-center">{{ props.index }}</td> 155 <td id="td" class="text-xs-center">{{ props.index }}</td>
156 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 156 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
157 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 157 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
158 <td id="td" class="text-xs-center"> 158 <td id="td" class="text-xs-center">
159 <v-flex xs12 sm12> 159 <v-flex xs12 sm12>
160 <v-select 160 <v-select
161 :items="statusList" 161 :items="statusList"
162 @change="changeswitch(props.item)" 162 @change="changeswitch(props.item)"
163 v-model="props.item.e1" 163 v-model="props.item.e1"
164 menu-props="auto" 164 menu-props="auto"
165 :label="props.item.verified" 165 :label="props.item.verified"
166 hide-details 166 hide-details
167 single-line 167 single-line
168 ></v-select> 168 ></v-select>
169 </v-flex> 169 </v-flex>
170 </td> 170 </td>
171 <td class="text-xs-center"> 171 <td class="text-xs-center">
172 <span> 172 <span>
173 <img 173 <img
174 style="cursor:pointer; width:25px; height:18px; " 174 style="cursor:pointer; width:25px; height:18px; "
175 class="mr-5" 175 class="mr-5"
176 @click="profile(props.item)" 176 @click="profile(props.item)"
177 src="/static/icon/eye1.png" 177 src="/static/icon/eye1.png"
178 > 178 >
179 <img 179 <img
180 style="cursor:pointer; width:20px; height:18px; " 180 style="cursor:pointer; width:20px; height:18px; "
181 class="mr-5" 181 class="mr-5"
182 @click="editItem(props.item)" 182 @click="editItem(props.item)"
183 src="/static/icon/edit1.png" 183 src="/static/icon/edit1.png"
184 > 184 >
185 <img 185 <img
186 style="cursor:pointer; height:20px; " 186 style="cursor:pointer; height:20px; "
187 class="mr-5" 187 class="mr-5"
188 @click="deleteItem(props.item)" 188 @click="deleteItem(props.item)"
189 src="/static/icon/delete1.png" 189 src="/static/icon/delete1.png"
190 > 190 >
191 </span> 191 </span>
192 </td> 192 </td>
193 </template> 193 </template>
194 <v-alert 194 <v-alert
195 slot="no-results" 195 slot="no-results"
196 :value="true" 196 :value="true"
197 color="error" 197 color="error"
198 icon="warning" 198 icon="warning"
199 >Your search for "{{ term }}" found no results.</v-alert> 199 >Your search for "{{ term }}" found no results.</v-alert>
200 </v-data-table> 200 </v-data-table>
201 </v-card> 201 </v-card>
202 </v-flex> 202 </v-flex>
203 </template> 203 </template>
204 <script> 204 <script>
205 import http from "@/Services/http.js"; 205 import http from "@/Services/http.js";
206 import AppToolbar from '@/components/AppToolbar'; 206 import AppToolbar from '@/components/AppToolbar';
207 207
208 208
209 export default { 209 export default {
210 components: { 210 components: {
211 AppToolbar, 211 AppToolbar,
212 }, 212 },
213 data: () => ({ 213 data: () => ({
214 snackbar: false, 214 snackbar: false,
215 statussnackbar: false, 215 statussnackbar: false,
216 y: "top", 216 y: "top",
217 x: "right", 217 x: "right",
218 mode: "", 218 mode: "",
219 timeout: 3000, 219 timeout: 3000,
220 text: "", 220 text: "",
221 valid: "", 221 valid: "",
222 modaledit: false, 222 modaledit: false,
223 dialog: false, 223 dialog: false,
224 dialog1: false, 224 dialog1: false,
225 statusList: ["APPROVED", "DECLINED"], 225 statusList: ["APPROVED", "DECLINED"],
226 term:'', 226 term:'',
227 e1: "", 227 e1: "",
228 rules: { 228 rules: {
229 required: value => !!value || "This field is Required.", 229 required: value => !!value || "This field is Required.",
230 min: v => 230 min: v =>
231 (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test( 231 (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
232 v 232 v
233 ) && 233 ) &&
234 v.length > 0) || 234 v.length > 0) ||
235 "Please enter a date in the format dd/mm/yyyy" 235 "Please enter a date in the format dd/mm/yyyy"
236 }, 236 },
237 nameRules: [v => !!v || " First Name is required"], 237 nameRules: [v => !!v || " First Name is required"],
238 // lnameRules: [v => !!v || ' Last Name is required'], 238 // lnameRules: [v => !!v || ' Last Name is required'],
239 emailRules: [ 239 emailRules: [
240 v => !!v || "E-mail is required", 240 v => !!v || "E-mail is required",
241 v => /.+@.+/.test(v) || "E-mail must be valid" 241 v => /.+@.+/.test(v) || "E-mail must be valid"
242 ], 242 ],
243 pagination: { 243 pagination: {
244 rowsPerPage: 13 244 rowsPerPage: 13
245 }, 245 },
246 headers: [ 246 headers: [
247 { 247 {
248 text: "No", 248 text: "No",
249 align: "center", 249 align: "center",
250 sortable: false, 250 sortable: false,
251 value: "no" 251 value: "no"
252 }, 252 },
253 { text: "Name", value: "name", sortable: false, align: "center" }, 253 { text: "Name", value: "name", sortable: false, align: "center" },
254 { text: "Email", value: "email", sortable: false, align: "center" }, 254 { text: "Email", value: "email", sortable: false, align: "center" },
255 { text: "Status", value: "verified", sortable: false, align: "center" }, 255 { text: "Status", value: "verified", sortable: false, align: "center" },
256 { text: "", value: "", sortable: false } 256 { text: "", value: "", sortable: false }
257 ], 257 ],
258 desserts: [], 258 desserts: [],
259 editedIndex: -1, 259 editedIndex: -1,
260 editedItem: { 260 editedItem: {
261 No: "", 261 No: "",
262 Name: "", 262 Name: "",
263 lastname: "", 263 lastname: "",
264 Email: "", 264 Email: "",
265 dob: "" 265 dob: ""
266 }, 266 },
267 defaultItem: { 267 defaultItem: {
268 No: "", 268 No: "",
269 Name: "", 269 Name: "",
270 lastname: "", 270 lastname: "",
271 Email: "", 271 Email: "",
272 dob: "" 272 dob: ""
273 } 273 }
274 }), 274 }),
275 watch: { 275 watch: {
276 dialog(val) { 276 dialog(val) {
277 val || this.close(); 277 val || this.close();
278 } 278 }
279 }, 279 },
280 280
281 created() { 281 created() {
282 this.initialize(); 282 this.initialize();
283 }, 283 },
284 mounted() { 284 mounted() {
285 this.getProviderList(); 285 this.getProviderList();
286 }, 286 },
287 methods: { 287 methods: {
288 getProviderList() { 288 getProviderList() {
289 var token = this.$store.state.token; 289 var token = this.$store.state.token;
290 http() 290 http()
291 .get("/provider-list?term=" + this.term, { 291 .get("/provider-list?term=" + this.term, {
292 headers: { Authorization: "Bearer " + token } 292 headers: { Authorization: "Bearer " + token }
293 }) 293 })
294 .then(response => { 294 .then(response => {
295 this.desserts = response.data.data.providerList; 295 this.desserts = response.data.data.providerList;
296 }) 296 })
297 .catch(err => { 297 .catch(err => {
298 console.log("err====>", err); 298 console.log("err====>", err);
299 }); 299 });
300 }, 300 },
301 initialize() { 301 initialize() {
302 this.desserts = []; 302 this.desserts = [];
303 }, 303 },
304 304
305 editItem(item) { 305 editItem(item) {
306 this.editedIndex = this.desserts.indexOf(item); 306 this.editedIndex = this.desserts.indexOf(item);
307 this.editedItem = Object.assign({}, item); 307 this.editedItem = Object.assign({}, item);
308 this.dialog = true; 308 this.dialog = true;
309 }, 309 },
310 profile(item) { 310 profile(item) {
311 this.editedIndex = this.desserts.indexOf(item); 311 this.editedIndex = this.desserts.indexOf(item);
312 this.editedItem = Object.assign({}, item); 312 this.editedItem = Object.assign({}, item);
313 this.dialog1 = true; 313 this.dialog1 = true;
314 }, 314 },
315 changeswitch(item) { 315 changeswitch(item) {
316 let addStatus = { 316 let addStatus = {
317 userId: item.userId, 317 userId: item.userId,
318 status: item.e1 318 status: item.e1
319 }; 319 };
320 http() 320 http()
321 .post("/approve-decline", addStatus) 321 .post("/approve-decline", addStatus)
322 .then(response => { 322 .then(response => {
323 if ((this.statussnackbar = true)) { 323 if ((this.statussnackbar = true)) {
324 this.text = "Successfully change your status is" + " " + item.e1; 324 this.text = "Successfully change your status is" + " " + item.e1;
325 } 325 }
326 this.getProviderList(); 326 this.getProviderList();
327 }) 327 })
328 .catch(error => { 328 .catch(error => {
329 console.log(error); 329 console.log(error);
330 }); 330 });
331 }, 331 },
332 deleteItem(item) { 332 deleteItem(item) {
333 let addUsers = { 333 let addUsers = {
334 userId: item.userId 334 userId: item.userId
335 }; 335 };
336 http() 336 http()
337 .post("/deleteProvider", confirm('Are you sure you want to delete this?') && addUsers) 337 .post("/deleteProvider", confirm('Are you sure you want to delete this?') && addUsers)
338 .then(response => { 338 .then(response => {
339 if ((this.snackbar = true)) { 339 if ((this.snackbar = true)) {
340 this.text = "Successfully delete Health Care Priovider"; 340 this.text = "Successfully delete Health Care Priovider";
341 } 341 }
342 this.getProviderList(); 342 this.getProviderList();
343 }) 343 })
344 .catch(error => { 344 .catch(error => {
345 console.log(error); 345 console.log(error);
346 }); 346 });
347 }, 347 },
348 348
349 close() { 349 close() {
350 this.dialog = false; 350 this.dialog = false;
351 setTimeout(() => { 351 setTimeout(() => {
352 this.editedItem = Object.assign({}, this.defaultItem); 352 this.editedItem = Object.assign({}, this.defaultItem);
353 this.editedIndex = -1; 353 this.editedIndex = -1;
354 }, 300); 354 }, 300);
355 }, 355 },
356 close1() { 356 close1() {
357 this.dialog1 = false; 357 this.dialog1 = false;
358 }, 358 },
359 359
360 save() { 360 save() {
361 let editUsers = { 361 let editUsers = {
362 name: this.editedItem.name + " " + this.editedItem.lastname, 362 name: this.editedItem.name + " " + this.editedItem.lastname,
363 dob: this.editedItem.dob, 363 dob: this.editedItem.dob,
364 email: this.editedItem.email, 364 email: this.editedItem.email,
365 userId: this.editedItem.userId 365 userId: this.editedItem.userId
366 }; 366 };
367 http() 367 http()
368 .post("/provider-detail", editUsers) 368 .post("/provider-detail", editUsers)
369 .then(response => { 369 .then(response => {
370 if ((this.snackbar = true)) { 370 if ((this.snackbar = true)) {
371 this.text = "Successfully Edit Health Care Priovider"; 371 this.text = "Successfully Edit Health Care Priovider";
372 } 372 }
373 this.getProviderList(); 373 this.getProviderList();
374 }) 374 })
375 .catch(error => { 375 .catch(error => {
376 console.log(error); 376 console.log(error);
377 }); 377 });
378 this.close(); 378 this.close();
379 } 379 }
380 } 380 }
381 }; 381 };
382 </script> 382 </script>
383 <style scoped> 383 <style scoped>
384 .v-card__actions .v-btn { 384 .v-card__actions .v-btn {
385 margin: 0px; 385 margin: 0px;
386 min-width: 120px; 386 min-width: 120px;
387 } 387 }
388 #td { 388 #td {
389 border: 1px solid #dddddd; 389 border: 1px solid #dddddd;
390 padding: 8px; 390 padding: 8px;
391 } 391 }
392 #flex { 392 #flex {
393 height: 300px; 393 height: 300px;
394 } 394 }
395 .v-select_selctions.v-select_slot.v-select_selection { 395 .v-select_selctions.v-select_slot.v-select_selection {
396 color: black !important; 396 color: black !important;
397 } 397 }
398 @media screen and (max-width: 769px){ 398 @media screen and (max-width: 769px){
399 .top{ 399 .top{
400 margin-top:30px; 400 margin-top:30px;
401 } 401 }
402 402
403 } 403 }
404 @media screen and (max-width: 476px) { 404 @media screen and (max-width: 476px) {
405 .flex.xs4 { 405 .flex.xs4 {
406 flex-basis: 55.666667%; 406 flex-basis: 55.666667%;
407 max-width: 71.666667%; 407 max-width: 71.666667%;
408 } 408 }
409 } 409 }
410 @media screen and (max-width: 402px) { 410 @media screen and (max-width: 402px) {
411 h5 { 411 h5 {
412 font-size: 13px; 412 font-size: 13px;
413 } 413 }
414 /* .right{ 414 /* .right{
415 float:none !important; 415 float:none !important;
416 } */ 416 } */
417 .left { 417 .left {
418 float: none !important; 418 float: none !important;
419 } 419 }
420 } 420 }
421 </style> 421 </style>
422 422
423 423
424 424
425 425
src/pages/questions.vue
Diff comments   View file @2a4dbc6
1 <template> 1 <template>
2 <v-flex> 2 <v-flex>
3 <app-toolbar class="app--toolbar"></app-toolbar> 3 <app-toolbar class="app--toolbar"></app-toolbar>
4 <v-card> 4 <v-card>
5 <!-- only showing btn on lg-screen -->
5 <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only"> 6 <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only">
6 <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3> 7 <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3>
7 <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5> 8 <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5>
8 <span style="position:relative; left:-95px; top:10px;"> 9 <span style="position:relative; left:-95px; top:10px;">
10 <!-- Suggestion component -->
9 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn> 11 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
10 12 <!-- Suggestion Sex -->
11 <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn> 13 <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
12 14 <!-- Suggestion Health -->
13 <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn> 15 <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
14 16 <!-- Suggestion Skin & Beauty-->
15 <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn> 17 <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
16 18 <!-- Suggestion Diet & Ex-->
17 <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn> 19 <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
18 </span> 20 </span>
21 <v-spacer></v-spacer>
22 <v-text-field
23 flat
24 prepend-icon="search"
25 label="Find your user"
26 color="black"
27 >
28 </v-text-field>
19 </v-toolbar> 29 </v-toolbar>
30 <!-- not showing on lg-screen-->
20 <div class="hidden-lg-only"> 31 <div class="hidden-lg-only">
21 <h4><b>Forum Questions</b></h4> 32 <h4><b>Forum Questions</b></h4>
22 <h5 style="">Select Category:</h5> 33 <h5 style="">Select Category:</h5>
23 <v-tabs 34 <v-tabs
24 color="white" 35 color="white"
25 show-arrows 36 show-arrows
26 > 37 >
27 <v-tabs-slider color="black"></v-tabs-slider> 38 <v-tabs-slider color="black"></v-tabs-slider>
28 <v-tab> 39 <v-tab>
29 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn> 40 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
30 </v-tab> 41 </v-tab>
31 <v-tab> 42 <v-tab>
32 <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn> 43 <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
33 </v-tab> 44 </v-tab>
34 <v-tab> 45 <v-tab>
35 <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn> 46 <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
36 </v-tab> 47 </v-tab>
37 <v-tab> 48 <v-tab>
38 <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn> 49 <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
39 </v-tab> 50 </v-tab>
40 <v-tab> 51 <v-tab>
41 <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn> 52 <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
42 </v-tab> 53 </v-tab>
43 </v-tabs> 54 </v-tabs>
44 </div> 55 </div>
45 <component v-bind:is="component"></component> 56 <component v-bind:is="component"></component>
46 </v-card> 57 </v-card>
47 </v-flex> 58 </v-flex>
48 </template> 59 </template>
49 <script> 60 <script>
50 import axios from 'axios'; 61 import axios from 'axios';
51 import suggestion from '@/components/questions/suggestion.vue'; 62 import suggestion from '@/components/questions/suggestion.vue';
52 import sex from '@/components/questions/sex.vue'; 63 import sex from '@/components/questions/sex.vue';
53 import health from '@/components/questions/health.vue'; 64 import health from '@/components/questions/health.vue';
54 import skin from '@/components/questions/skin.vue'; 65 import skin from '@/components/questions/skin.vue';
55 import diet from '@/components/questions/diet.vue'; 66 import diet from '@/components/questions/diet.vue';
56 import AppToolbar from '@/components/AppToolbar'; 67 import AppToolbar from '@/components/AppToolbar';
57 68
58 export default { 69 export default {
59 components: { 70 components: {
60 'suggestion': suggestion, 71 'suggestion': suggestion,
61 'sex': sex, 72 'sex': sex,
62 'health': health, 73 'health': health,
63 'skin': skin, 74 'skin': skin,
64 'diet': diet, 75 'diet': diet,
65 AppToolbar, 76 AppToolbar,
66 }, 77 },
67 data: () => ({ 78 data: () => ({
68 component: 'suggestion', 79 component: 'suggestion',
69 isActivebtn: true, 80 isActivebtn: true,
70 Activebtn1: false, 81 Activebtn1: false,
71 Activebtn2: false, 82 Activebtn2: false,
72 Activebtn3: false, 83 Activebtn3: false,
73 Activebtn4: false, 84 Activebtn4: false,
74 }), 85 }),
75 methods: { 86 methods: {
76 activebtn (type) { 87 activebtn (type) {
77 switch (type) { 88 switch (type) {
78 case 'existing': 89 case 'existing':
79 this.Activebtn4 = false; 90 this.Activebtn4 = false;
80 this.Activebtn3 = false; 91 this.Activebtn3 = false;
81 this.Activebtn2 = false; 92 this.Activebtn2 = false;
82 this.Activebtn1 = false; 93 this.Activebtn1 = false;
83 this.isActivebtn = true; 94 this.isActivebtn = true;
84 break; 95 break;
85 case 'new': 96 case 'new':
86 this.Activebtn4 = false; 97 this.Activebtn4 = false;
87 this.Activebtn3 = false; 98 this.Activebtn3 = false;
88 this.Activebtn2 = false; 99 this.Activebtn2 = false;
89 this.Activebtn1 = true; 100 this.Activebtn1 = true;
90 this.isActivebtn = false; 101 this.isActivebtn = false;
91 break; 102 break;
92 case 'new1': 103 case 'new1':
93 this.Activebtn4 = false; 104 this.Activebtn4 = false;
94 this.Activebtn3 = false; 105 this.Activebtn3 = false;
95 this.Activebtn2 = true; 106 this.Activebtn2 = true;
96 this.Activebtn1 = false; 107 this.Activebtn1 = false;
97 this.isActivebtn = false; 108 this.isActivebtn = false;
98 break; 109 break;
99 case 'new2': 110 case 'new2':
100 this.Activebtn4 = false; 111 this.Activebtn4 = false;
101 this.Activebtn3 = true; 112 this.Activebtn3 = true;
102 this.Activebtn2 = false; 113 this.Activebtn2 = false;
103 this.Activebtn1 = false; 114 this.Activebtn1 = false;
104 this.isActivebtn = false; 115 this.isActivebtn = false;
105 break; 116 break;
106 default: 117 default:
107 this.Activebtn4 = true; 118 this.Activebtn4 = true;
108 this.Activebtn3 = false; 119 this.Activebtn3 = false;
109 this.Activebtn2 = false; 120 this.Activebtn2 = false;
110 this.Activebtn1 = false; 121 this.Activebtn1 = false;
111 this.isActivebtn = false; 122 this.isActivebtn = false;
112 break; 123 break;
113 } 124 }
114 }, 125 },
115 } 126 }
116 }; 127 };
117 </script> 128 </script>
118 <style scoped> 129 <style scoped>
119 #td{ 130 #td{
120 border: 1px solid #dddddd; 131 border: 1px solid #dddddd;
121 text-align: left; 132 text-align: left;
122 padding: 8px; 133 padding: 8px;
123 } 134 }
124 .activebtn { 135 .activebtn {
125 color: black !important; 136 color: black !important;
126 } 137 }
127 </style> 138 </style>
128 139