Commit c17e4f0cd99872a69ca6593042abb45bd0735936
1 parent
ab72cb6280
Exists in
master
and in
3 other branches
question changes
Showing
7 changed files
with
1214 additions
and
213 deletions
Show diff stats
src/components/questions/diet.vue
... | ... | @@ -0,0 +1,228 @@ |
1 | +<template> | |
2 | +<v-container grid-list-xl> | |
3 | + <v-flex> | |
4 | + <v-card> | |
5 | + <v-spacer></v-spacer> | |
6 | + <v-dialog v-model="dialog" max-width="800px"> | |
7 | + | |
8 | + <v-card> | |
9 | + <v-card-title> | |
10 | + <span class="headline">{{ formTitle }}</span> | |
11 | + <v-spacer></v-spacer> | |
12 | + <v-icon @click="close">close</v-icon> | |
13 | + </v-card-title> | |
14 | + <v-flex> | |
15 | + <v-card> | |
16 | + <v-card-text> | |
17 | + <span> | |
18 | + <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
19 | + <h5>Select Category:</h5> | |
20 | + <span> | |
21 | + <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
22 | + <v-btn color="grey darken-2" flat>Sex</v-btn> | |
23 | + <v-btn color="grey darken-2" flat>Health</v-btn> | |
24 | + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
25 | + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
26 | + </span> | |
27 | + </v-card-text> | |
28 | + </v-card> | |
29 | + </v-flex> | |
30 | + <v-card-text> | |
31 | + | |
32 | + <v-container grid-list-md> | |
33 | + <v-layout wrap> | |
34 | + <v-flex xs12 sm6 md12> | |
35 | + <v-textarea | |
36 | + solo | |
37 | + v-model="AddQuestioncredentials.question" | |
38 | + name="input-7-4" | |
39 | + label="Type Question" | |
40 | + ></v-textarea> | |
41 | + </v-flex> | |
42 | + </v-layout> | |
43 | + </v-container> | |
44 | + </v-card-text> | |
45 | + | |
46 | + <v-card-actions> | |
47 | + <v-spacer></v-spacer> | |
48 | + <v-btn dark large @click.native="save">Post Question</v-btn> | |
49 | + </v-card-actions> | |
50 | + </v-card> | |
51 | + </v-dialog> | |
52 | + | |
53 | + | |
54 | + | |
55 | + <v-dialog v-model="dialog1" max-width="800px"> | |
56 | + <v-card> | |
57 | + <v-card-title> | |
58 | + <span class="headline">Edit Question</span> | |
59 | + <v-spacer></v-spacer> | |
60 | + <v-icon @click="close1">close</v-icon> | |
61 | + </v-card-title> | |
62 | + | |
63 | + <v-card-text> | |
64 | + <v-layout wrap> | |
65 | + <v-flex xs12 sm6 md12> | |
66 | + <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
67 | + </v-flex> | |
68 | + </v-layout> | |
69 | + <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
70 | + Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
71 | + <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
72 | + </v-card-text> | |
73 | + </v-card> | |
74 | + </v-dialog> | |
75 | + <v-data-table | |
76 | + :headers="headers" | |
77 | + :items="desserts" | |
78 | + class="elevation-1" | |
79 | + :pagination.sync="pagination" | |
80 | + > | |
81 | + <template slot="items" slot-scope="props"> | |
82 | + <tr v-if="props.index === 0"> | |
83 | + <td id="td"> </td> | |
84 | + <td> | |
85 | + <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
86 | + </td> | |
87 | + <td id="td"> </td> | |
88 | + <td id="td"> </td> | |
89 | + </tr> | |
90 | + <tr> | |
91 | + <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
92 | + <td id="td">{{ props.item.ques }}</td> | |
93 | + <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
94 | + <td class="text-xs-center"> | |
95 | + <span> | |
96 | + <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
97 | + <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
98 | + </span> | |
99 | + </td> | |
100 | + </tr> | |
101 | + </template> | |
102 | + </v-data-table> | |
103 | + </v-card> | |
104 | + </v-flex> | |
105 | + | |
106 | + </v-container> | |
107 | +</template> | |
108 | +<script> | |
109 | +export default { | |
110 | + data: () => ({ | |
111 | + question: '', | |
112 | + AddQuestioncredentials: {}, | |
113 | + dialog: false, | |
114 | + dialog1: false, | |
115 | + isActive: true, | |
116 | + newActive: false, | |
117 | + pagination: { | |
118 | + rowsPerPage: 10, | |
119 | + }, | |
120 | + headers: [ | |
121 | + { | |
122 | + text: 'No.', | |
123 | + align: 'center', | |
124 | + sortable: false, | |
125 | + value: 'name' | |
126 | + }, | |
127 | + { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
128 | + { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
129 | + { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
130 | + ], | |
131 | + desserts: [], | |
132 | + editedIndex: -1, | |
133 | + editedItem: { | |
134 | + question: '', | |
135 | + | |
136 | + }, | |
137 | + defaultItem: { | |
138 | + no: 0, | |
139 | + question: '', | |
140 | + res: 0, | |
141 | + | |
142 | + } | |
143 | + }), | |
144 | + | |
145 | + computed: { | |
146 | + formTitle () { | |
147 | + return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
148 | + } | |
149 | + }, | |
150 | + | |
151 | + watch: { | |
152 | + dialog (val) { | |
153 | + val || this.close(); | |
154 | + } | |
155 | + }, | |
156 | + | |
157 | + created () { | |
158 | + this.initialize(); | |
159 | + }, | |
160 | + | |
161 | + methods: { | |
162 | + initialize () { | |
163 | + this.desserts = [ | |
164 | + { | |
165 | + no: '1', | |
166 | + ques: 'questions diet', | |
167 | + res: 12, | |
168 | + }, | |
169 | + ]; | |
170 | + }, | |
171 | + | |
172 | + editItem (item) { | |
173 | + this.editedIndex = this.desserts.indexOf(item); | |
174 | + this.editedItem = Object.assign({}, item); | |
175 | + this.dialog1 = true; | |
176 | + }, | |
177 | + | |
178 | + deleteItem (item) { | |
179 | + const index = this.desserts.indexOf(item); | |
180 | + confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
181 | + }, | |
182 | + | |
183 | + close () { | |
184 | + this.dialog = false; | |
185 | + setTimeout(() => { | |
186 | + this.editedItem = Object.assign({}, this.defaultItem); | |
187 | + this.editedIndex = -1; | |
188 | + }, 300); | |
189 | + }, | |
190 | + close1 () { | |
191 | + this.dialog1 = false; | |
192 | + setTimeout(() => { | |
193 | + this.editedItem = Object.assign({}, this.defaultItem); | |
194 | + this.editedIndex = -1; | |
195 | + }, 300); | |
196 | + }, | |
197 | + save () { | |
198 | + console.log('editedItem', this.editedItem); | |
199 | + if (this.editedIndex > -1) { | |
200 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
201 | + } else { | |
202 | + this.desserts.push(this.editedItem); | |
203 | + } | |
204 | + this.close(); | |
205 | + }, | |
206 | + save1 () { | |
207 | + console.log('editedItem', this.editedItem); | |
208 | + if (this.editedIndex > -1) { | |
209 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
210 | + } else { | |
211 | + this.desserts.push(this.editedItem); | |
212 | + } | |
213 | + this.close1(); | |
214 | + } | |
215 | + }, | |
216 | + // switchComponent (comp) { | |
217 | + // this.$emit('switchComp', comp); | |
218 | + // } | |
219 | +}; | |
220 | +</script> | |
221 | +<style> | |
222 | +#td{ | |
223 | + border: 1px solid #dddddd; | |
224 | + text-align: left; | |
225 | + padding: 8px; | |
226 | + | |
227 | +} | |
228 | +</style> | ... | ... |
src/components/questions/health.vue
... | ... | @@ -0,0 +1,228 @@ |
1 | +<template> | |
2 | +<v-container grid-list-xl> | |
3 | + <v-flex> | |
4 | + <v-card> | |
5 | + <v-spacer></v-spacer> | |
6 | + <v-dialog v-model="dialog" max-width="800px"> | |
7 | + | |
8 | + <v-card> | |
9 | + <v-card-title> | |
10 | + <span class="headline">{{ formTitle }}</span> | |
11 | + <v-spacer></v-spacer> | |
12 | + <v-icon @click="close">close</v-icon> | |
13 | + </v-card-title> | |
14 | + <v-flex> | |
15 | + <v-card> | |
16 | + <v-card-text> | |
17 | + <span> | |
18 | + <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
19 | + <h5>Select Category:</h5> | |
20 | + <span> | |
21 | + <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
22 | + <v-btn color="grey darken-2" flat>Sex</v-btn> | |
23 | + <v-btn color="grey darken-2" flat>Health</v-btn> | |
24 | + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
25 | + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
26 | + </span> | |
27 | + </v-card-text> | |
28 | + </v-card> | |
29 | + </v-flex> | |
30 | + <v-card-text> | |
31 | + | |
32 | + <v-container grid-list-md> | |
33 | + <v-layout wrap> | |
34 | + <v-flex xs12 sm6 md12> | |
35 | + <v-textarea | |
36 | + solo | |
37 | + v-model="AddQuestioncredentials.question" | |
38 | + name="input-7-4" | |
39 | + label="Type Question" | |
40 | + ></v-textarea> | |
41 | + </v-flex> | |
42 | + </v-layout> | |
43 | + </v-container> | |
44 | + </v-card-text> | |
45 | + | |
46 | + <v-card-actions> | |
47 | + <v-spacer></v-spacer> | |
48 | + <v-btn dark large @click.native="save">Post Question</v-btn> | |
49 | + </v-card-actions> | |
50 | + </v-card> | |
51 | + </v-dialog> | |
52 | + | |
53 | + | |
54 | + | |
55 | + <v-dialog v-model="dialog1" max-width="800px"> | |
56 | + <v-card> | |
57 | + <v-card-title> | |
58 | + <span class="headline">Edit Question</span> | |
59 | + <v-spacer></v-spacer> | |
60 | + <v-icon @click="close1">close</v-icon> | |
61 | + </v-card-title> | |
62 | + | |
63 | + <v-card-text> | |
64 | + <v-layout wrap> | |
65 | + <v-flex xs12 sm6 md12> | |
66 | + <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
67 | + </v-flex> | |
68 | + </v-layout> | |
69 | + <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
70 | + Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
71 | + <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
72 | + </v-card-text> | |
73 | + </v-card> | |
74 | + </v-dialog> | |
75 | + <v-data-table | |
76 | + :headers="headers" | |
77 | + :items="desserts" | |
78 | + class="elevation-1" | |
79 | + :pagination.sync="pagination" | |
80 | + > | |
81 | + <template slot="items" slot-scope="props"> | |
82 | + <tr v-if="props.index === 0"> | |
83 | + <td id="td"> </td> | |
84 | + <td> | |
85 | + <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
86 | + </td> | |
87 | + <td id="td"> </td> | |
88 | + <td id="td"> </td> | |
89 | + </tr> | |
90 | + <tr> | |
91 | + <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
92 | + <td id="td">{{ props.item.ques }}</td> | |
93 | + <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
94 | + <td class="text-xs-center"> | |
95 | + <span> | |
96 | + <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
97 | + <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
98 | + </span> | |
99 | + </td> | |
100 | + </tr> | |
101 | + </template> | |
102 | + </v-data-table> | |
103 | + </v-card> | |
104 | + </v-flex> | |
105 | + | |
106 | + </v-container> | |
107 | +</template> | |
108 | +<script> | |
109 | +export default { | |
110 | + data: () => ({ | |
111 | + question: '', | |
112 | + AddQuestioncredentials: {}, | |
113 | + dialog: false, | |
114 | + dialog1: false, | |
115 | + isActive: true, | |
116 | + newActive: false, | |
117 | + pagination: { | |
118 | + rowsPerPage: 10, | |
119 | + }, | |
120 | + headers: [ | |
121 | + { | |
122 | + text: 'No.', | |
123 | + align: 'center', | |
124 | + sortable: false, | |
125 | + value: 'name' | |
126 | + }, | |
127 | + { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
128 | + { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
129 | + { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
130 | + ], | |
131 | + desserts: [], | |
132 | + editedIndex: -1, | |
133 | + editedItem: { | |
134 | + question: '', | |
135 | + | |
136 | + }, | |
137 | + defaultItem: { | |
138 | + no: 0, | |
139 | + question: '', | |
140 | + res: 0, | |
141 | + | |
142 | + } | |
143 | + }), | |
144 | + | |
145 | + computed: { | |
146 | + formTitle () { | |
147 | + return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
148 | + } | |
149 | + }, | |
150 | + | |
151 | + watch: { | |
152 | + dialog (val) { | |
153 | + val || this.close(); | |
154 | + } | |
155 | + }, | |
156 | + | |
157 | + created () { | |
158 | + this.initialize(); | |
159 | + }, | |
160 | + | |
161 | + methods: { | |
162 | + initialize () { | |
163 | + this.desserts = [ | |
164 | + { | |
165 | + no: '1', | |
166 | + ques: 'questions health', | |
167 | + res: 11, | |
168 | + }, | |
169 | + ]; | |
170 | + }, | |
171 | + | |
172 | + editItem (item) { | |
173 | + this.editedIndex = this.desserts.indexOf(item); | |
174 | + this.editedItem = Object.assign({}, item); | |
175 | + this.dialog1 = true; | |
176 | + }, | |
177 | + | |
178 | + deleteItem (item) { | |
179 | + const index = this.desserts.indexOf(item); | |
180 | + confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
181 | + }, | |
182 | + | |
183 | + close () { | |
184 | + this.dialog = false; | |
185 | + setTimeout(() => { | |
186 | + this.editedItem = Object.assign({}, this.defaultItem); | |
187 | + this.editedIndex = -1; | |
188 | + }, 300); | |
189 | + }, | |
190 | + close1 () { | |
191 | + this.dialog1 = false; | |
192 | + setTimeout(() => { | |
193 | + this.editedItem = Object.assign({}, this.defaultItem); | |
194 | + this.editedIndex = -1; | |
195 | + }, 300); | |
196 | + }, | |
197 | + save () { | |
198 | + console.log('editedItem', this.editedItem); | |
199 | + if (this.editedIndex > -1) { | |
200 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
201 | + } else { | |
202 | + this.desserts.push(this.editedItem); | |
203 | + } | |
204 | + this.close(); | |
205 | + }, | |
206 | + save1 () { | |
207 | + console.log('editedItem', this.editedItem); | |
208 | + if (this.editedIndex > -1) { | |
209 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
210 | + } else { | |
211 | + this.desserts.push(this.editedItem); | |
212 | + } | |
213 | + this.close1(); | |
214 | + } | |
215 | + }, | |
216 | + // switchComponent (comp) { | |
217 | + // this.$emit('switchComp', comp); | |
218 | + // } | |
219 | +}; | |
220 | +</script> | |
221 | +<style> | |
222 | +#td{ | |
223 | + border: 1px solid #dddddd; | |
224 | + text-align: left; | |
225 | + padding: 8px; | |
226 | + | |
227 | +} | |
228 | +</style> | ... | ... |
src/components/questions/sex.vue
... | ... | @@ -0,0 +1,228 @@ |
1 | +<template> | |
2 | +<v-container grid-list-xl> | |
3 | + <v-flex> | |
4 | + <v-card> | |
5 | + <v-spacer></v-spacer> | |
6 | + <v-dialog v-model="dialog" max-width="800px"> | |
7 | + | |
8 | + <v-card> | |
9 | + <v-card-title> | |
10 | + <span class="headline">{{ formTitle }}</span> | |
11 | + <v-spacer></v-spacer> | |
12 | + <v-icon @click="close">close</v-icon> | |
13 | + </v-card-title> | |
14 | + <v-flex> | |
15 | + <v-card> | |
16 | + <v-card-text> | |
17 | + <span> | |
18 | + <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
19 | + <h5>Select Category:</h5> | |
20 | + <span> | |
21 | + <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
22 | + <v-btn color="grey darken-2" flat>Sex</v-btn> | |
23 | + <v-btn color="grey darken-2" flat>Health</v-btn> | |
24 | + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
25 | + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
26 | + </span> | |
27 | + </v-card-text> | |
28 | + </v-card> | |
29 | + </v-flex> | |
30 | + <v-card-text> | |
31 | + | |
32 | + <v-container grid-list-md> | |
33 | + <v-layout wrap> | |
34 | + <v-flex xs12 sm6 md12> | |
35 | + <v-textarea | |
36 | + solo | |
37 | + v-model="AddQuestioncredentials.question" | |
38 | + name="input-7-4" | |
39 | + label="Type Question" | |
40 | + ></v-textarea> | |
41 | + </v-flex> | |
42 | + </v-layout> | |
43 | + </v-container> | |
44 | + </v-card-text> | |
45 | + | |
46 | + <v-card-actions> | |
47 | + <v-spacer></v-spacer> | |
48 | + <v-btn dark large @click.native="save">Post Question</v-btn> | |
49 | + </v-card-actions> | |
50 | + </v-card> | |
51 | + </v-dialog> | |
52 | + | |
53 | + | |
54 | + | |
55 | + <v-dialog v-model="dialog1" max-width="800px"> | |
56 | + <v-card> | |
57 | + <v-card-title> | |
58 | + <span class="headline">Edit Question</span> | |
59 | + <v-spacer></v-spacer> | |
60 | + <v-icon @click="close1">close</v-icon> | |
61 | + </v-card-title> | |
62 | + | |
63 | + <v-card-text> | |
64 | + <v-layout wrap> | |
65 | + <v-flex xs12 sm6 md12> | |
66 | + <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
67 | + </v-flex> | |
68 | + </v-layout> | |
69 | + <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
70 | + Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
71 | + <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
72 | + </v-card-text> | |
73 | + </v-card> | |
74 | + </v-dialog> | |
75 | + <v-data-table | |
76 | + :headers="headers" | |
77 | + :items="desserts" | |
78 | + class="elevation-1" | |
79 | + :pagination.sync="pagination" | |
80 | + > | |
81 | + <template slot="items" slot-scope="props"> | |
82 | + <tr v-if="props.index === 0"> | |
83 | + <td id="td"> </td> | |
84 | + <td> | |
85 | + <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
86 | + </td> | |
87 | + <td id="td"> </td> | |
88 | + <td id="td"> </td> | |
89 | + </tr> | |
90 | + <tr> | |
91 | + <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
92 | + <td id="td">{{ props.item.ques }}</td> | |
93 | + <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
94 | + <td class="text-xs-center"> | |
95 | + <span> | |
96 | + <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
97 | + <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
98 | + </span> | |
99 | + </td> | |
100 | + </tr> | |
101 | + </template> | |
102 | + </v-data-table> | |
103 | + </v-card> | |
104 | + </v-flex> | |
105 | + | |
106 | + </v-container> | |
107 | +</template> | |
108 | +<script> | |
109 | +export default { | |
110 | + data: () => ({ | |
111 | + question: '', | |
112 | + AddQuestioncredentials: {}, | |
113 | + dialog: false, | |
114 | + dialog1: false, | |
115 | + isActive: true, | |
116 | + newActive: false, | |
117 | + pagination: { | |
118 | + rowsPerPage: 10, | |
119 | + }, | |
120 | + headers: [ | |
121 | + { | |
122 | + text: 'No.', | |
123 | + align: 'center', | |
124 | + sortable: false, | |
125 | + value: 'name' | |
126 | + }, | |
127 | + { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
128 | + { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
129 | + { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
130 | + ], | |
131 | + desserts: [], | |
132 | + editedIndex: -1, | |
133 | + editedItem: { | |
134 | + question: '', | |
135 | + | |
136 | + }, | |
137 | + defaultItem: { | |
138 | + no: 0, | |
139 | + question: '', | |
140 | + res: 0, | |
141 | + | |
142 | + } | |
143 | + }), | |
144 | + | |
145 | + computed: { | |
146 | + formTitle () { | |
147 | + return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
148 | + } | |
149 | + }, | |
150 | + | |
151 | + watch: { | |
152 | + dialog (val) { | |
153 | + val || this.close(); | |
154 | + } | |
155 | + }, | |
156 | + | |
157 | + created () { | |
158 | + this.initialize(); | |
159 | + }, | |
160 | + | |
161 | + methods: { | |
162 | + initialize () { | |
163 | + this.desserts = [ | |
164 | + { | |
165 | + no: '1', | |
166 | + ques: 'questions sex', | |
167 | + res: 8, | |
168 | + }, | |
169 | + ]; | |
170 | + }, | |
171 | + | |
172 | + editItem (item) { | |
173 | + this.editedIndex = this.desserts.indexOf(item); | |
174 | + this.editedItem = Object.assign({}, item); | |
175 | + this.dialog1 = true; | |
176 | + }, | |
177 | + | |
178 | + deleteItem (item) { | |
179 | + const index = this.desserts.indexOf(item); | |
180 | + confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
181 | + }, | |
182 | + | |
183 | + close () { | |
184 | + this.dialog = false; | |
185 | + setTimeout(() => { | |
186 | + this.editedItem = Object.assign({}, this.defaultItem); | |
187 | + this.editedIndex = -1; | |
188 | + }, 300); | |
189 | + }, | |
190 | + close1 () { | |
191 | + this.dialog1 = false; | |
192 | + setTimeout(() => { | |
193 | + this.editedItem = Object.assign({}, this.defaultItem); | |
194 | + this.editedIndex = -1; | |
195 | + }, 300); | |
196 | + }, | |
197 | + save () { | |
198 | + console.log('editedItem', this.editedItem); | |
199 | + if (this.editedIndex > -1) { | |
200 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
201 | + } else { | |
202 | + this.desserts.push(this.editedItem); | |
203 | + } | |
204 | + this.close(); | |
205 | + }, | |
206 | + save1 () { | |
207 | + console.log('editedItem', this.editedItem); | |
208 | + if (this.editedIndex > -1) { | |
209 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
210 | + } else { | |
211 | + this.desserts.push(this.editedItem); | |
212 | + } | |
213 | + this.close1(); | |
214 | + } | |
215 | + }, | |
216 | + // switchComponent (comp) { | |
217 | + // this.$emit('switchComp', comp); | |
218 | + // } | |
219 | +}; | |
220 | +</script> | |
221 | +<style> | |
222 | +#td{ | |
223 | + border: 1px solid #dddddd; | |
224 | + text-align: left; | |
225 | + padding: 8px; | |
226 | + | |
227 | +} | |
228 | +</style> | ... | ... |
src/components/questions/skin.vue
... | ... | @@ -0,0 +1,228 @@ |
1 | +<template> | |
2 | +<v-container grid-list-xl> | |
3 | + <v-flex> | |
4 | + <v-card> | |
5 | + <v-spacer></v-spacer> | |
6 | + <v-dialog v-model="dialog" max-width="800px"> | |
7 | + | |
8 | + <v-card> | |
9 | + <v-card-title> | |
10 | + <span class="headline">{{ formTitle }}</span> | |
11 | + <v-spacer></v-spacer> | |
12 | + <v-icon @click="close">close</v-icon> | |
13 | + </v-card-title> | |
14 | + <v-flex> | |
15 | + <v-card> | |
16 | + <v-card-text> | |
17 | + <span> | |
18 | + <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
19 | + <h5>Select Category:</h5> | |
20 | + <span> | |
21 | + <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
22 | + <v-btn color="grey darken-2" flat>Sex</v-btn> | |
23 | + <v-btn color="grey darken-2" flat>Health</v-btn> | |
24 | + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
25 | + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
26 | + </span> | |
27 | + </v-card-text> | |
28 | + </v-card> | |
29 | + </v-flex> | |
30 | + <v-card-text> | |
31 | + | |
32 | + <v-container grid-list-md> | |
33 | + <v-layout wrap> | |
34 | + <v-flex xs12 sm6 md12> | |
35 | + <v-textarea | |
36 | + solo | |
37 | + v-model="AddQuestioncredentials.question" | |
38 | + name="input-7-4" | |
39 | + label="Type Question" | |
40 | + ></v-textarea> | |
41 | + </v-flex> | |
42 | + </v-layout> | |
43 | + </v-container> | |
44 | + </v-card-text> | |
45 | + | |
46 | + <v-card-actions> | |
47 | + <v-spacer></v-spacer> | |
48 | + <v-btn dark large @click.native="save">Post Question</v-btn> | |
49 | + </v-card-actions> | |
50 | + </v-card> | |
51 | + </v-dialog> | |
52 | + | |
53 | + | |
54 | + | |
55 | + <v-dialog v-model="dialog1" max-width="800px"> | |
56 | + <v-card> | |
57 | + <v-card-title> | |
58 | + <span class="headline">Edit Question</span> | |
59 | + <v-spacer></v-spacer> | |
60 | + <v-icon @click="close1">close</v-icon> | |
61 | + </v-card-title> | |
62 | + | |
63 | + <v-card-text> | |
64 | + <v-layout wrap> | |
65 | + <v-flex xs12 sm6 md12> | |
66 | + <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
67 | + </v-flex> | |
68 | + </v-layout> | |
69 | + <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
70 | + Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
71 | + <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
72 | + </v-card-text> | |
73 | + </v-card> | |
74 | + </v-dialog> | |
75 | + <v-data-table | |
76 | + :headers="headers" | |
77 | + :items="desserts" | |
78 | + class="elevation-1" | |
79 | + :pagination.sync="pagination" | |
80 | + > | |
81 | + <template slot="items" slot-scope="props"> | |
82 | + <tr v-if="props.index === 0"> | |
83 | + <td id="td"> </td> | |
84 | + <td> | |
85 | + <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
86 | + </td> | |
87 | + <td id="td"> </td> | |
88 | + <td id="td"> </td> | |
89 | + </tr> | |
90 | + <tr> | |
91 | + <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
92 | + <td id="td">{{ props.item.ques }}</td> | |
93 | + <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
94 | + <td class="text-xs-center"> | |
95 | + <span> | |
96 | + <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
97 | + <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
98 | + </span> | |
99 | + </td> | |
100 | + </tr> | |
101 | + </template> | |
102 | + </v-data-table> | |
103 | + </v-card> | |
104 | + </v-flex> | |
105 | + | |
106 | + </v-container> | |
107 | +</template> | |
108 | +<script> | |
109 | +export default { | |
110 | + data: () => ({ | |
111 | + question: '', | |
112 | + AddQuestioncredentials: {}, | |
113 | + dialog: false, | |
114 | + dialog1: false, | |
115 | + isActive: true, | |
116 | + newActive: false, | |
117 | + pagination: { | |
118 | + rowsPerPage: 10, | |
119 | + }, | |
120 | + headers: [ | |
121 | + { | |
122 | + text: 'No.', | |
123 | + align: 'center', | |
124 | + sortable: false, | |
125 | + value: 'name' | |
126 | + }, | |
127 | + { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
128 | + { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
129 | + { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
130 | + ], | |
131 | + desserts: [], | |
132 | + editedIndex: -1, | |
133 | + editedItem: { | |
134 | + question: '', | |
135 | + | |
136 | + }, | |
137 | + defaultItem: { | |
138 | + no: 0, | |
139 | + question: '', | |
140 | + res: 0, | |
141 | + | |
142 | + } | |
143 | + }), | |
144 | + | |
145 | + computed: { | |
146 | + formTitle () { | |
147 | + return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
148 | + } | |
149 | + }, | |
150 | + | |
151 | + watch: { | |
152 | + dialog (val) { | |
153 | + val || this.close(); | |
154 | + } | |
155 | + }, | |
156 | + | |
157 | + created () { | |
158 | + this.initialize(); | |
159 | + }, | |
160 | + | |
161 | + methods: { | |
162 | + initialize () { | |
163 | + this.desserts = [ | |
164 | + { | |
165 | + no: '1', | |
166 | + ques: 'questions skin', | |
167 | + res: 16, | |
168 | + }, | |
169 | + ]; | |
170 | + }, | |
171 | + | |
172 | + editItem (item) { | |
173 | + this.editedIndex = this.desserts.indexOf(item); | |
174 | + this.editedItem = Object.assign({}, item); | |
175 | + this.dialog1 = true; | |
176 | + }, | |
177 | + | |
178 | + deleteItem (item) { | |
179 | + const index = this.desserts.indexOf(item); | |
180 | + confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
181 | + }, | |
182 | + | |
183 | + close () { | |
184 | + this.dialog = false; | |
185 | + setTimeout(() => { | |
186 | + this.editedItem = Object.assign({}, this.defaultItem); | |
187 | + this.editedIndex = -1; | |
188 | + }, 300); | |
189 | + }, | |
190 | + close1 () { | |
191 | + this.dialog1 = false; | |
192 | + setTimeout(() => { | |
193 | + this.editedItem = Object.assign({}, this.defaultItem); | |
194 | + this.editedIndex = -1; | |
195 | + }, 300); | |
196 | + }, | |
197 | + save () { | |
198 | + console.log('editedItem', this.editedItem); | |
199 | + if (this.editedIndex > -1) { | |
200 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
201 | + } else { | |
202 | + this.desserts.push(this.editedItem); | |
203 | + } | |
204 | + this.close(); | |
205 | + }, | |
206 | + save1 () { | |
207 | + console.log('editedItem', this.editedItem); | |
208 | + if (this.editedIndex > -1) { | |
209 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
210 | + } else { | |
211 | + this.desserts.push(this.editedItem); | |
212 | + } | |
213 | + this.close1(); | |
214 | + } | |
215 | + }, | |
216 | + // switchComponent (comp) { | |
217 | + // this.$emit('switchComp', comp); | |
218 | + // } | |
219 | +}; | |
220 | +</script> | |
221 | +<style> | |
222 | +#td{ | |
223 | + border: 1px solid #dddddd; | |
224 | + text-align: left; | |
225 | + padding: 8px; | |
226 | + | |
227 | +} | |
228 | +</style> | ... | ... |
src/components/questions/suggestion.vue
... | ... | @@ -0,0 +1,229 @@ |
1 | +<template> | |
2 | +<v-container grid-list-xl> | |
3 | + <v-flex> | |
4 | + <v-card> | |
5 | + <v-spacer></v-spacer> | |
6 | + <v-dialog v-model="dialog" max-width="800px"> | |
7 | + | |
8 | + <v-card> | |
9 | + <v-card-title> | |
10 | + <span class="headline">{{ formTitle }}</span> | |
11 | + <v-spacer></v-spacer> | |
12 | + <v-icon @click="close">close</v-icon> | |
13 | + </v-card-title> | |
14 | + <v-flex> | |
15 | + <v-card> | |
16 | + <v-card-text> | |
17 | + <span> | |
18 | + <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
19 | + <h5>Select Category:</h5> | |
20 | + <span> | |
21 | + <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
22 | + <v-btn color="grey darken-2" flat>Sex</v-btn> | |
23 | + <v-btn color="grey darken-2" flat>Health</v-btn> | |
24 | + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
25 | + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
26 | + </span> | |
27 | + </v-card-text> | |
28 | + </v-card> | |
29 | + </v-flex> | |
30 | + <v-card-text> | |
31 | + | |
32 | + <v-container grid-list-md> | |
33 | + <v-layout wrap> | |
34 | + <v-flex xs12 sm6 md12> | |
35 | + <v-textarea | |
36 | + solo | |
37 | + v-model="AddQuestioncredentials.question" | |
38 | + name="input-7-4" | |
39 | + label="Type Question" | |
40 | + ></v-textarea> | |
41 | + </v-flex> | |
42 | + </v-layout> | |
43 | + </v-container> | |
44 | + </v-card-text> | |
45 | + | |
46 | + <v-card-actions> | |
47 | + <v-spacer></v-spacer> | |
48 | + <v-btn dark large @click.native="save">Post Question</v-btn> | |
49 | + </v-card-actions> | |
50 | + </v-card> | |
51 | + </v-dialog> | |
52 | + | |
53 | + | |
54 | + | |
55 | + <v-dialog v-model="dialog1" max-width="800px"> | |
56 | + <v-card> | |
57 | + <v-card-title> | |
58 | + <span class="headline">Edit Question</span> | |
59 | + <v-spacer></v-spacer> | |
60 | + <v-icon @click="close1">close</v-icon> | |
61 | + </v-card-title> | |
62 | + | |
63 | + <v-card-text> | |
64 | + <v-layout wrap> | |
65 | + <v-flex xs12 sm6 md12> | |
66 | + <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
67 | + </v-flex> | |
68 | + </v-layout> | |
69 | + <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
70 | + Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
71 | + <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
72 | + </v-card-text> | |
73 | + </v-card> | |
74 | + </v-dialog> | |
75 | + <v-card> | |
76 | + <v-data-table | |
77 | + :headers="headers" | |
78 | + :items="desserts" | |
79 | + class="elevation-1" | |
80 | + :pagination.sync="pagination" | |
81 | + > | |
82 | + <template slot="items" slot-scope="props"> | |
83 | + <tr v-if="props.index === 0"> | |
84 | + <td id="td"> </td> | |
85 | + <td> | |
86 | + <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
87 | + </td> | |
88 | + <td id="td"> </td> | |
89 | + <td id="td"> </td> | |
90 | + </tr> | |
91 | + <tr> | |
92 | + <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
93 | + <td id="td">{{ props.item.ques }}</td> | |
94 | + <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
95 | + <td class="text-xs-center"> | |
96 | + <span> | |
97 | + <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
98 | + <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
99 | + </span> | |
100 | + </td> | |
101 | + </tr> | |
102 | + </template> | |
103 | + </v-data-table></v-card> | |
104 | + </v-card> | |
105 | + </v-flex> | |
106 | + | |
107 | + </v-container> | |
108 | +</template> | |
109 | +<script> | |
110 | +export default { | |
111 | + data: () => ({ | |
112 | + question: '', | |
113 | + AddQuestioncredentials: {}, | |
114 | + dialog: false, | |
115 | + dialog1: false, | |
116 | + isActive: true, | |
117 | + newActive: false, | |
118 | + pagination: { | |
119 | + rowsPerPage: 10, | |
120 | + }, | |
121 | + headers: [ | |
122 | + { | |
123 | + text: 'No.', | |
124 | + align: 'center', | |
125 | + sortable: false, | |
126 | + value: 'name' | |
127 | + }, | |
128 | + { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
129 | + { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
130 | + { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
131 | + ], | |
132 | + desserts: [], | |
133 | + editedIndex: -1, | |
134 | + editedItem: { | |
135 | + question: '', | |
136 | + | |
137 | + }, | |
138 | + defaultItem: { | |
139 | + no: 0, | |
140 | + question: '', | |
141 | + res: 0, | |
142 | + | |
143 | + } | |
144 | + }), | |
145 | + | |
146 | + computed: { | |
147 | + formTitle () { | |
148 | + return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
149 | + } | |
150 | + }, | |
151 | + | |
152 | + watch: { | |
153 | + dialog (val) { | |
154 | + val || this.close(); | |
155 | + } | |
156 | + }, | |
157 | + | |
158 | + created () { | |
159 | + this.initialize(); | |
160 | + }, | |
161 | + | |
162 | + methods: { | |
163 | + initialize () { | |
164 | + this.desserts = [ | |
165 | + { | |
166 | + no: '1', | |
167 | + ques: 'questions suggestion', | |
168 | + res: 21, | |
169 | + }, | |
170 | + ]; | |
171 | + }, | |
172 | + | |
173 | + editItem (item) { | |
174 | + this.editedIndex = this.desserts.indexOf(item); | |
175 | + this.editedItem = Object.assign({}, item); | |
176 | + this.dialog1 = true; | |
177 | + }, | |
178 | + | |
179 | + deleteItem (item) { | |
180 | + const index = this.desserts.indexOf(item); | |
181 | + confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
182 | + }, | |
183 | + | |
184 | + close () { | |
185 | + this.dialog = false; | |
186 | + setTimeout(() => { | |
187 | + this.editedItem = Object.assign({}, this.defaultItem); | |
188 | + this.editedIndex = -1; | |
189 | + }, 300); | |
190 | + }, | |
191 | + close1 () { | |
192 | + this.dialog1 = false; | |
193 | + setTimeout(() => { | |
194 | + this.editedItem = Object.assign({}, this.defaultItem); | |
195 | + this.editedIndex = -1; | |
196 | + }, 300); | |
197 | + }, | |
198 | + save () { | |
199 | + console.log('editedItem', this.editedItem); | |
200 | + if (this.editedIndex > -1) { | |
201 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
202 | + } else { | |
203 | + this.desserts.push(this.editedItem); | |
204 | + } | |
205 | + this.close(); | |
206 | + }, | |
207 | + save1 () { | |
208 | + console.log('editedItem', this.editedItem); | |
209 | + if (this.editedIndex > -1) { | |
210 | + Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
211 | + } else { | |
212 | + this.desserts.push(this.editedItem); | |
213 | + } | |
214 | + this.close1(); | |
215 | + } | |
216 | + }, | |
217 | + // switchComponent (comp) { | |
218 | + // this.$emit('switchComp', comp); | |
219 | + // } | |
220 | +}; | |
221 | +</script> | |
222 | +<style> | |
223 | +#td{ | |
224 | + border: 1px solid #dddddd; | |
225 | + text-align: left; | |
226 | + padding: 8px; | |
227 | + | |
228 | +} | |
229 | +</style> | ... | ... |
src/pages/Provider.vue
src/pages/questions.vue
... | ... | @@ -7,237 +7,98 @@ |
7 | 7 | <h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3> |
8 | 8 | <h5 style="position:relative; left:40px; top:-15px;">Select Category</h5> |
9 | 9 | <span style="position:relative; left:-95px; top:10px;"> |
10 | - <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
11 | - <v-btn color="grey darken-2" flat>Sex</v-btn> | |
12 | - <v-btn color="grey darken-2" flat>Health</v-btn> | |
13 | - <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
14 | - <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
15 | - </span> | |
16 | - | |
17 | - </v-card-title> | |
18 | - | |
19 | - <v-spacer></v-spacer> | |
20 | - <v-dialog v-model="dialog" max-width="800px"> | |
21 | - | |
22 | - <v-card> | |
23 | - <v-card-title> | |
24 | - <span class="headline">{{ formTitle }}</span> | |
25 | - <v-spacer></v-spacer> | |
26 | - <v-icon @click="close">close</v-icon> | |
27 | - </v-card-title> | |
28 | - <v-flex> | |
29 | - <v-card> | |
30 | - <v-card-text> | |
31 | - <span> | |
32 | - <p><b>Ana Suggestion:</b> Select Suggestion</p></span> | |
33 | - <h5>Select Category:</h5> | |
34 | - <span> | |
35 | - <v-btn color="grey darken-2" flat>Suggestion</v-btn> | |
36 | - <v-btn color="grey darken-2" flat>Sex</v-btn> | |
37 | - <v-btn color="grey darken-2" flat>Health</v-btn> | |
38 | - <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn> | |
39 | - <v-btn color="grey darken-2" flat>Diet & Ex</v-btn> | |
40 | - </span> | |
41 | - </v-card-text> | |
42 | - </v-card> | |
43 | - </v-flex> | |
44 | - <v-card-text> | |
45 | - | |
46 | - <v-container grid-list-md> | |
47 | - <v-layout wrap> | |
48 | - <v-flex xs12 sm6 md12> | |
49 | - <v-textarea | |
50 | - solo | |
51 | - v-model="AddQuestioncredentials.question" | |
52 | - name="input-7-4" | |
53 | - label="Type Question" | |
54 | - ></v-textarea> | |
55 | - </v-flex> | |
56 | - </v-layout> | |
57 | - </v-container> | |
58 | - </v-card-text> | |
59 | 10 | |
60 | - <v-card-actions> | |
61 | - <v-spacer></v-spacer> | |
62 | - <v-btn dark large @click.native="save">Post Question</v-btn> | |
63 | - </v-card-actions> | |
64 | - </v-card> | |
65 | - </v-dialog> | |
11 | + <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn> | |
12 | + | |
13 | + <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn> | |
66 | 14 | |
67 | - | |
68 | - | |
69 | - <v-dialog v-model="dialog1" max-width="800px"> | |
70 | - <v-card> | |
71 | - <v-card-title> | |
72 | - <span class="headline">Edit Question</span> | |
73 | - <v-spacer></v-spacer> | |
74 | - <v-icon @click="close1">close</v-icon> | |
75 | - </v-card-title> | |
15 | + <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn> | |
76 | 16 | |
77 | - <v-card-text> | |
78 | - <v-layout wrap> | |
79 | - <v-flex xs12 sm6 md12> | |
80 | - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field> | |
81 | - </v-flex> | |
82 | - </v-layout> | |
83 | - <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br> | |
84 | - Diagnosis 1,Diagnosis 2,Diagnosis 3 | |
85 | - <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span> | |
86 | - </v-card-text> | |
87 | - </v-card> | |
88 | - </v-dialog> | |
17 | + <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn> | |
18 | + | |
19 | + <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn> | |
20 | + | |
21 | + </span> | |
22 | + </v-card-title> | |
23 | + | |
89 | 24 | </v-toolbar> |
90 | - <v-data-table | |
91 | - :headers="headers" | |
92 | - :items="desserts" | |
93 | - class="elevation-1" | |
94 | - :pagination.sync="pagination" | |
95 | - > | |
96 | - <template slot="items" slot-scope="props"> | |
97 | - <tr v-if="props.index === 0"> | |
98 | - <td id="td"> </td> | |
99 | - <td> | |
100 | - <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span> | |
101 | - </td> | |
102 | - <td id="td"> </td> | |
103 | - <td id="td"> </td> | |
104 | - </tr> | |
105 | - <tr> | |
106 | - <td id="td" class="text-xs-center">{{ props.item.no }}</td> | |
107 | - <td id="td">{{ props.item.ques }}</td> | |
108 | - <td id="td" class="text-xs-center">{{ props.item.res }}</td> | |
109 | - <td class="text-xs-center"> | |
110 | - <span> | |
111 | - <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/> | |
112 | - <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> | |
113 | - </span> | |
114 | - </td> | |
115 | - </tr> | |
116 | - </template> | |
117 | - </v-data-table> | |
118 | - </v-card> | |
119 | - </v-flex> | |
25 | + <component v-bind:is="component"></component> | |
26 | + </v-card></v-flex> | |
120 | 27 | |
121 | 28 | </v-container> |
122 | 29 | </template> |
123 | 30 | <script> |
31 | +import suggestion from '@/components/questions/suggestion.vue'; | |
32 | +import sex from '@/components/questions/sex.vue'; | |
33 | +import health from '@/components/questions/health.vue'; | |
34 | +import skin from '@/components/questions/skin.vue'; | |
35 | +import diet from '@/components/questions/diet.vue'; | |
124 | 36 | export default { |
37 | + components: { | |
38 | + 'suggestion': suggestion, | |
39 | + 'sex': sex, | |
40 | + 'health': health, | |
41 | + 'skin': skin, | |
42 | + 'diet': diet, | |
43 | + }, | |
125 | 44 | data: () => ({ |
126 | - question: '', | |
127 | - AddQuestioncredentials: {}, | |
128 | - dialog: false, | |
129 | - dialog1: false, | |
130 | - isActive: true, | |
131 | - newActive: false, | |
132 | - pagination: { | |
133 | - rowsPerPage: 10, | |
134 | - }, | |
135 | - headers: [ | |
136 | - { | |
137 | - text: 'No.', | |
138 | - align: 'center', | |
139 | - sortable: false, | |
140 | - value: 'name' | |
141 | - }, | |
142 | - { text: 'Posts', value: 'posts', sortable: false, align: 'center' }, | |
143 | - { text: 'Responses', value: 'responses', sortable: false, align: 'center' }, | |
144 | - { text: '', value: 'carbs', sortable: false, align: 'center' }, | |
145 | - ], | |
146 | - desserts: [], | |
147 | - editedIndex: -1, | |
148 | - editedItem: { | |
149 | - question: '', | |
150 | - | |
151 | - }, | |
152 | - defaultItem: { | |
153 | - no: 0, | |
154 | - question: '', | |
155 | - res: 0, | |
156 | - | |
157 | - } | |
45 | + component: 'suggestion', | |
46 | + isActivebtn: true, | |
47 | + Activebtn1: false, | |
48 | + Activebtn2: false, | |
49 | + Activebtn3: false, | |
50 | + Activebtn4: false, | |
158 | 51 | }), |
159 | - | |
160 | - computed: { | |
161 | - formTitle () { | |
162 | - return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question'; | |
163 | - } | |
164 | - }, | |
165 | - | |
166 | - watch: { | |
167 | - dialog (val) { | |
168 | - val || this.close(); | |
169 | - } | |
170 | - }, | |
171 | - | |
172 | - created () { | |
173 | - this.initialize(); | |
174 | - }, | |
175 | - | |
176 | 52 | methods: { |
177 | - initialize () { | |
178 | - this.desserts = [ | |
179 | - { | |
180 | - no: '1', | |
181 | - ques: 'questions', | |
182 | - res: 9.0, | |
183 | - }, | |
184 | - ]; | |
185 | - }, | |
186 | - | |
187 | - editItem (item) { | |
188 | - this.editedIndex = this.desserts.indexOf(item); | |
189 | - this.editedItem = Object.assign({}, item); | |
190 | - this.dialog1 = true; | |
191 | - }, | |
192 | - | |
193 | - deleteItem (item) { | |
194 | - const index = this.desserts.indexOf(item); | |
195 | - confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1); | |
196 | - }, | |
197 | - | |
198 | - close () { | |
199 | - this.dialog = false; | |
200 | - setTimeout(() => { | |
201 | - this.editedItem = Object.assign({}, this.defaultItem); | |
202 | - this.editedIndex = -1; | |
203 | - }, 300); | |
204 | - }, | |
205 | - close1 () { | |
206 | - this.dialog1 = false; | |
207 | - setTimeout(() => { | |
208 | - this.editedItem = Object.assign({}, this.defaultItem); | |
209 | - this.editedIndex = -1; | |
210 | - }, 300); | |
211 | - }, | |
212 | - save () { | |
213 | - console.log('editedItem', this.editedItem); | |
214 | - if (this.editedIndex > -1) { | |
215 | - Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
216 | - } else { | |
217 | - this.desserts.push(this.editedItem); | |
53 | + activebtn (type) { | |
54 | + switch (type) { | |
55 | + case 'existing': | |
56 | + this.Activebtn4 = false; | |
57 | + this.Activebtn3 = false; | |
58 | + this.Activebtn2 = false; | |
59 | + this.Activebtn1 = false; | |
60 | + this.isActivebtn = true; | |
61 | + break; | |
62 | + case 'new': | |
63 | + this.Activebtn4 = false; | |
64 | + this.Activebtn3 = false; | |
65 | + this.Activebtn2 = false; | |
66 | + this.Activebtn1 = true; | |
67 | + this.isActivebtn = false; | |
68 | + break; | |
69 | + case 'new1': | |
70 | + this.Activebtn4 = false; | |
71 | + this.Activebtn3 = false; | |
72 | + this.Activebtn2 = true; | |
73 | + this.Activebtn1 = false; | |
74 | + this.isActivebtn = false; | |
75 | + break; | |
76 | + case 'new2': | |
77 | + this.Activebtn4 = false; | |
78 | + this.Activebtn3 = true; | |
79 | + this.Activebtn2 = false; | |
80 | + this.Activebtn1 = false; | |
81 | + this.isActivebtn = false; | |
82 | + break; | |
83 | + default: | |
84 | + this.Activebtn4 = true; | |
85 | + this.Activebtn3 = false; | |
86 | + this.Activebtn2 = false; | |
87 | + this.Activebtn1 = false; | |
88 | + this.isActivebtn = false; | |
89 | + break; | |
218 | 90 | } |
219 | - this.close(); | |
220 | 91 | }, |
221 | - save1 () { | |
222 | - console.log('editedItem', this.editedItem); | |
223 | - if (this.editedIndex > -1) { | |
224 | - Object.assign(this.desserts[this.editedIndex], this.editedItem); | |
225 | - } else { | |
226 | - this.desserts.push(this.editedItem); | |
227 | - } | |
228 | - this.close1(); | |
229 | - } | |
230 | - }, | |
231 | - // switchComponent (comp) { | |
232 | - // this.$emit('switchComp', comp); | |
233 | - // } | |
92 | + } | |
234 | 93 | }; |
235 | 94 | </script> |
236 | -<style> | |
95 | +<style scoped> | |
237 | 96 | #td{ |
238 | 97 | border: 1px solid #dddddd; |
239 | 98 | text-align: left; |
240 | 99 | padding: 8px; |
241 | - | |
100 | +} | |
101 | +.activebtn { | |
102 | + color: black !important; | |
242 | 103 | } |
243 | 104 | </style> | ... | ... |