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 1 <template>
  2 +<!-- Add Question dialog -->
2 3 <v-flex>
3 4 <v-card>
4 5 <v-spacer></v-spacer>
5 6 <v-dialog v-model="dialog" max-width="800px">
6 7 <v-card>
7 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 11 <v-spacer></v-spacer>
10 12 <v-icon @click="close">close</v-icon>
11 13 </v-card-title>
... ... @@ -14,19 +16,26 @@
14 16 <v-card-text>
15 17 <span>
16 18 <p>
17   - <b>Ana Suggestion:</b> Select Suggestion
  19 + <b>Ana Suggestion:</b>
  20 + Select Suggestion
18 21 </p>
19 22 </span>
20 23 <h5>Select Category:</h5>
21   - <v-tabs
22   - color="white"
23   - show-arrows
24   - >
25   - <v-tabs-slider color="black"></v-tabs-slider>
26   - <v-tab>
  24 + <!-- <span>
  25 + <v-btn color="grey darken-2" flat>Suggestion</v-btn>
  26 + <v-btn color="grey darken-2" flat>Sex</v-btn>
  27 + <v-btn color="grey darken-2" flat>Health</v-btn>
  28 + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  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 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28   - </v-tab>
29   - <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
  36 + </v-tab>
  37 + <v-tab>
  38 + <v-btn color="grey darken-2" flat>Sex</v-btn>
30 39 </v-tab>
31 40 <v-tab>
32 41 <v-btn color="grey darken-2" flat>Health</v-btn>
... ... @@ -34,11 +43,10 @@
34 43 <v-tab>
35 44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
36 45 </v-tab>
37   - <v-tab>
  46 + <v-tab>
38 47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39 48 </v-tab>
40   - </v-tabs>
41   - </v-card-text>
  49 + </v-tabs>
42 50 </v-card>
43 51 </v-flex>
44 52 <v-card-text>
... ... @@ -61,76 +69,118 @@
61 69 </v-card-actions>
62 70 </v-card>
63 71 </v-dialog>
64   -
65   - <v-dialog v-model="dialog1" max-width="800px">
66   - <v-card>
  72 + <!-- Edit Question Dialog see answer -->
  73 + <v-dialog v-model="dialog1" max-width="900px">
  74 + <v-card height="700px">
67 75 <v-card-title>
68 76 <span class="headline">Edit Question</span>
69 77 <v-spacer></v-spacer>
70 78 <v-icon @click="close1">close</v-icon>
71 79 </v-card-title>
72   -
73 80 <v-card-text>
74 81 <v-layout wrap>
75   - <v-flex xs12 sm6 md12>
76   - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
  82 + <v-flex xs12>
  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 136 </v-flex>
78 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 138 </v-card-text>
92 139 </v-card>
93 140 </v-dialog>
94   - <v-data-table
95   - :headers="headers"
96   - :items="desserts"
97   - class="elevation-1"
98   - :pagination.sync="pagination"
99   - >
100   - <template slot="items" slot-scope="props">
101   - <tr v-if="props.index === 0">
102   - <td id="td">&nbsp;</td>
103   - <td>
104   - <span style="cursor:pointer" @click="dialog=true">
105   - <v-icon>add</v-icon>Add New Question
106   - </span>
107   - </td>
108   - <td id="td">&nbsp;</td>
109   - <td id="td">&nbsp;</td>
110   - </tr>
111   - <tr>
112   - <td id="td" class="text-xs-center">{{ props.item.no }}</td>
113   - <td id="td">{{ props.item.ques }}</td>
114   - <td id="td" class="text-xs-center">{{ props.item.res }}</td>
115   - <td class="text-xs-center">
116   - <span>
117   - <img
118   - style="cursor:pointer; height:18px; "
119   - class="mr-5"
120   - @click="editItem(props.item)"
121   - src="/static/icon/edit1.png"
122   - >
123   - <img
124   - style="cursor:pointer; height:20px; "
125   - class="mr-5"
126   - @click="deleteItem(props.item)"
127   - src="/static/icon/delete1.png"
128   - >
129   - </span>
130   - </td>
131   - </tr>
132   - </template>
133   - </v-data-table>
  141 + <!-- Forum Questions data-table -->
  142 + <v-card>
  143 + <v-data-table
  144 + :headers="headers"
  145 + :items="desserts"
  146 + class="elevation-1"
  147 + :pagination.sync="pagination"
  148 + >
  149 + <template slot="items" slot-scope="props">
  150 + <tr v-if="props.index === 0">
  151 + <td id="td">&nbsp;</td>
  152 + <td class="pa-4">
  153 + <span style="cursor:pointer" @click="dialog=true">
  154 + <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
  155 + </span>
  156 + </td>
  157 + <td id="td">&nbsp;</td>
  158 + <td id="td">&nbsp;</td>
  159 + </tr>
  160 + <tr>
  161 + <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
  162 + <td id="td">{{ props.item.ques }}</td>
  163 + <td id="td" class="text-xs-center">{{ props.item.res }}</td>
  164 + <td class="text-xs-center">
  165 + <span>
  166 + <img
  167 + style="cursor:pointer; height:18px; "
  168 + class="mr-5"
  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>
134 184 </v-card>
135 185 </v-flex>
136 186 </template>
... ... @@ -146,6 +196,7 @@ export default {
146 196 pagination: {
147 197 rowsPerPage: 10
148 198 },
  199 + getQuestion: [],
149 200 headers: [
150 201 {
151 202 text: "No.",
... ... @@ -165,10 +216,12 @@ export default {
165 216 desserts: [],
166 217 editedIndex: -1,
167 218 editedItem: {
168   - question: ""
  219 + question: "",
  220 + name: ''
169 221 },
170 222 defaultItem: {
171 223 no: 0,
  224 + name: '',
172 225 question: "",
173 226 res: 0
174 227 }
... ... @@ -188,6 +241,7 @@ export default {
188 241  
189 242 created() {
190 243 this.initialize();
  244 + this.initializeData()
191 245 },
192 246  
193 247 methods: {
... ... @@ -195,12 +249,73 @@ export default {
195 249 this.desserts = [
196 250 {
197 251 no: "1",
198   - ques: "questions diet",
199   - res: 12
  252 + ques: "questions Diet &Ex",
  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 319 editItem(item) {
205 320 this.editedIndex = this.desserts.indexOf(item);
206 321 this.editedItem = Object.assign({}, item);
... ... @@ -257,4 +372,10 @@ export default {
257 372 text-align: left;
258 373 padding: 8px;
259 374 }
  375 +.AnswerTable{
  376 +height: 370px;overflow: auto;
  377 +}
  378 +.bottomAnswser{
  379 +border-bottom:1px solid #aaa;
  380 +}
260 381 </style>
... ...
src/components/questions/health.vue
Diff comments   View file @2a4dbc6
1 1 <template>
  2 +<!-- Add Question dialog -->
2 3 <v-flex>
3 4 <v-card>
4 5 <v-spacer></v-spacer>
5 6 <v-dialog v-model="dialog" max-width="800px">
6 7 <v-card>
7 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 11 <v-spacer></v-spacer>
10 12 <v-icon @click="close">close</v-icon>
11 13 </v-card-title>
... ... @@ -14,19 +16,26 @@
14 16 <v-card-text>
15 17 <span>
16 18 <p>
17   - <b>Ana Suggestion:</b> Select Suggestion
  19 + <b>Ana Suggestion:</b>
  20 + Select Suggestion
18 21 </p>
19 22 </span>
20 23 <h5>Select Category:</h5>
21   - <v-tabs
22   - color="white"
23   - show-arrows
24   - >
25   - <v-tabs-slider color="black"></v-tabs-slider>
26   - <v-tab>
  24 + <!-- <span>
  25 + <v-btn color="grey darken-2" flat>Suggestion</v-btn>
  26 + <v-btn color="grey darken-2" flat>Sex</v-btn>
  27 + <v-btn color="grey darken-2" flat>Health</v-btn>
  28 + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  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 35 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28   - </v-tab>
29   - <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
  36 + </v-tab>
  37 + <v-tab>
  38 + <v-btn color="grey darken-2" flat>Sex</v-btn>
30 39 </v-tab>
31 40 <v-tab>
32 41 <v-btn color="grey darken-2" flat>Health</v-btn>
... ... @@ -34,11 +43,10 @@
34 43 <v-tab>
35 44 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
36 45 </v-tab>
37   - <v-tab>
  46 + <v-tab>
38 47 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39 48 </v-tab>
40   - </v-tabs>
41   - </v-card-text>
  49 + </v-tabs>
42 50 </v-card>
43 51 </v-flex>
44 52 <v-card-text>
... ... @@ -61,76 +69,118 @@
61 69 </v-card-actions>
62 70 </v-card>
63 71 </v-dialog>
64   -
65   - <v-dialog v-model="dialog1" max-width="800px">
66   - <v-card>
  72 + <!-- Edit Question Dialog see answer -->
  73 + <v-dialog v-model="dialog1" max-width="900px">
  74 + <v-card height="700px">
67 75 <v-card-title>
68 76 <span class="headline">Edit Question</span>
69 77 <v-spacer></v-spacer>
70 78 <v-icon @click="close1">close</v-icon>
71 79 </v-card-title>
72   -
73 80 <v-card-text>
74 81 <v-layout wrap>
75   - <v-flex xs12 sm6 md12>
76   - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
  82 + <v-flex xs12>
  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 136 </v-flex>
78 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 138 </v-card-text>
92 139 </v-card>
93 140 </v-dialog>
94   - <v-data-table
95   - :headers="headers"
96   - :items="desserts"
97   - class="elevation-1"
98   - :pagination.sync="pagination"
99   - >
100   - <template slot="items" slot-scope="props">
101   - <tr v-if="props.index === 0">
102   - <td id="td">&nbsp;</td>
103   - <td>
104   - <span style="cursor:pointer" @click="dialog=true">
105   - <v-icon>add</v-icon>Add New Question
106   - </span>
107   - </td>
108   - <td id="td">&nbsp;</td>
109   - <td id="td">&nbsp;</td>
110   - </tr>
111   - <tr>
112   - <td id="td" class="text-xs-center">{{ props.item.no }}</td>
113   - <td id="td">{{ props.item.ques }}</td>
114   - <td id="td" class="text-xs-center">{{ props.item.res }}</td>
115   - <td class="text-xs-center">
116   - <span>
117   - <img
118   - style="cursor:pointer; height:18px; "
119   - class="mr-5"
120   - @click="editItem(props.item)"
121   - src="/static/icon/edit1.png"
122   - >
123   - <img
124   - style="cursor:pointer; height:20px; "
125   - class="mr-5"
126   - @click="deleteItem(props.item)"
127   - src="/static/icon/delete1.png"
128   - >
129   - </span>
130   - </td>
131   - </tr>
132   - </template>
133   - </v-data-table>
  141 + <!-- Forum Questions data-table -->
  142 + <v-card>
  143 + <v-data-table
  144 + :headers="headers"
  145 + :items="desserts"
  146 + class="elevation-1"
  147 + :pagination.sync="pagination"
  148 + >
  149 + <template slot="items" slot-scope="props">
  150 + <tr v-if="props.index === 0">
  151 + <td id="td">&nbsp;</td>
  152 + <td class="pa-4">
  153 + <span style="cursor:pointer" @click="dialog=true">
  154 + <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
  155 + </span>
  156 + </td>
  157 + <td id="td">&nbsp;</td>
  158 + <td id="td">&nbsp;</td>
  159 + </tr>
  160 + <tr>
  161 + <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
  162 + <td id="td">{{ props.item.ques }}</td>
  163 + <td id="td" class="text-xs-center">{{ props.item.res }}</td>
  164 + <td class="text-xs-center">
  165 + <span>
  166 + <img
  167 + style="cursor:pointer; height:18px; "
  168 + class="mr-5"
  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>
134 184 </v-card>
135 185 </v-flex>
136 186 </template>
... ... @@ -146,6 +196,7 @@ export default {
146 196 pagination: {
147 197 rowsPerPage: 10
148 198 },
  199 + getQuestion: [],
149 200 headers: [
150 201 {
151 202 text: "No.",
... ... @@ -165,10 +216,12 @@ export default {
165 216 desserts: [],
166 217 editedIndex: -1,
167 218 editedItem: {
168   - question: ""
  219 + question: "",
  220 + name: ''
169 221 },
170 222 defaultItem: {
171 223 no: 0,
  224 + name: '',
172 225 question: "",
173 226 res: 0
174 227 }
... ... @@ -188,6 +241,7 @@ export default {
188 241  
189 242 created() {
190 243 this.initialize();
  244 + this.initializeData()
191 245 },
192 246  
193 247 methods: {
... ... @@ -195,12 +249,73 @@ export default {
195 249 this.desserts = [
196 250 {
197 251 no: "1",
198   - ques: "questions health",
199   - res: 11
  252 + ques: "questions Health",
  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 319 editItem(item) {
205 320 this.editedIndex = this.desserts.indexOf(item);
206 321 this.editedItem = Object.assign({}, item);
... ... @@ -257,4 +372,10 @@ export default {
257 372 text-align: left;
258 373 padding: 8px;
259 374 }
  375 +.AnswerTable{
  376 +height: 370px;overflow: auto;
  377 +}
  378 +.bottomAnswser{
  379 +border-bottom:1px solid #aaa;
  380 +}
260 381 </style>
... ...
src/components/questions/sex.vue
Diff comments   View file @2a4dbc6
1 1 <template>
  2 +<!-- Add Question dialog -->
2 3 <v-flex>
3 4 <v-card>
4 5 <v-spacer></v-spacer>
5 6 <v-dialog v-model="dialog" max-width="800px">
6 7 <v-card>
7 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 11 <v-spacer></v-spacer>
10 12 <v-icon @click="close">close</v-icon>
11 13 </v-card-title>
... ... @@ -14,31 +16,37 @@
14 16 <v-card-text>
15 17 <span>
16 18 <p>
17   - <b>Ana Suggestion:</b> Select Suggestion
  19 + <b>Ana Suggestion:</b>
  20 + Select Suggestion
18 21 </p>
19 22 </span>
20 23 <h5>Select Category:</h5>
21   - <v-tabs
22   - color="white"
23   - show-arrows
24   - >
25   - <v-tabs-slider color="black"></v-tabs-slider>
26   - <v-tab>
  24 + <!-- <span>
27 25 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
28   - </v-tab>
29   - <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
30   - </v-tab>
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>
  26 + <v-btn color="grey darken-2" flat>Sex</v-btn>
  27 + <v-btn color="grey darken-2" flat>Health</v-btn>
  28 + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
38 29 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
39   - </v-tab>
40   - </v-tabs>
  30 + </span>-->
41 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 50 </v-card>
43 51 </v-flex>
44 52 <v-card-text>
... ... @@ -55,83 +63,124 @@
55 63 </v-layout>
56 64 </v-container>
57 65 </v-card-text>
58   -
59 66 <v-card-actions>
60 67 <v-spacer></v-spacer>
61 68 <v-btn dark large @click.native="save">Post Question</v-btn>
62 69 </v-card-actions>
63 70 </v-card>
64 71 </v-dialog>
65   -
66   - <v-dialog v-model="dialog1" max-width="800px">
67   - <v-card>
  72 + <!-- Edit Question Dialog see answer -->
  73 + <v-dialog v-model="dialog1" max-width="900px">
  74 + <v-card height="700px">
68 75 <v-card-title>
69 76 <span class="headline">Edit Question</span>
70 77 <v-spacer></v-spacer>
71 78 <v-icon @click="close1">close</v-icon>
72 79 </v-card-title>
73   -
74 80 <v-card-text>
75 81 <v-layout wrap>
76   - <v-flex xs12 sm6 md12>
77   - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
  82 + <v-flex xs12>
  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 136 </v-flex>
79 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 138 </v-card-text>
93 139 </v-card>
94 140 </v-dialog>
95   - <v-data-table
96   - :headers="headers"
97   - :items="desserts"
98   - class="elevation-1"
99   - :pagination.sync="pagination"
100   - >
101   - <template slot="items" slot-scope="props">
102   - <tr v-if="props.index === 0">
103   - <td id="td">&nbsp;</td>
104   - <td>
105   - <span style="cursor:pointer" @click="dialog=true">
106   - <v-icon>add</v-icon>Add New Question
107   - </span>
108   - </td>
109   - <td id="td">&nbsp;</td>
110   - <td id="td">&nbsp;</td>
111   - </tr>
112   - <tr>
113   - <td id="td" class="text-xs-center">{{ props.item.no }}</td>
114   - <td id="td">{{ props.item.ques }}</td>
115   - <td id="td" class="text-xs-center">{{ props.item.res }}</td>
116   - <td class="text-xs-center">
117   - <span>
118   - <img
119   - style="cursor:pointer; height:18px; "
120   - class="mr-5"
121   - @click="editItem(props.item)"
122   - src="/static/icon/edit1.png"
123   - >
124   - <img
125   - style="cursor:pointer; height:20px; "
126   - class="mr-5"
127   - @click="deleteItem(props.item)"
128   - src="/static/icon/delete1.png"
129   - >
130   - </span>
131   - </td>
132   - </tr>
133   - </template>
134   - </v-data-table>
  141 + <!-- Forum Questions data-table -->
  142 + <v-card>
  143 + <v-data-table
  144 + :headers="headers"
  145 + :items="desserts"
  146 + class="elevation-1"
  147 + :pagination.sync="pagination"
  148 + >
  149 + <template slot="items" slot-scope="props">
  150 + <tr v-if="props.index === 0">
  151 + <td id="td">&nbsp;</td>
  152 + <td class="pa-4">
  153 + <span style="cursor:pointer" @click="dialog=true">
  154 + <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
  155 + </span>
  156 + </td>
  157 + <td id="td">&nbsp;</td>
  158 + <td id="td">&nbsp;</td>
  159 + </tr>
  160 + <tr>
  161 + <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
  162 + <td id="td">{{ props.item.ques }}</td>
  163 + <td id="td" class="text-xs-center">{{ props.item.res }}</td>
  164 + <td class="text-xs-center">
  165 + <span>
  166 + <img
  167 + style="cursor:pointer; height:18px; "
  168 + class="mr-5"
  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>
135 184 </v-card>
136 185 </v-flex>
137 186 </template>
... ... @@ -147,6 +196,7 @@ export default {
147 196 pagination: {
148 197 rowsPerPage: 10
149 198 },
  199 + getQuestion: [],
150 200 headers: [
151 201 {
152 202 text: "No.",
... ... @@ -166,10 +216,12 @@ export default {
166 216 desserts: [],
167 217 editedIndex: -1,
168 218 editedItem: {
169   - question: ""
  219 + question: "",
  220 + name: ''
170 221 },
171 222 defaultItem: {
172 223 no: 0,
  224 + name: '',
173 225 question: "",
174 226 res: 0
175 227 }
... ... @@ -189,6 +241,7 @@ export default {
189 241  
190 242 created() {
191 243 this.initialize();
  244 + this.initializeData()
192 245 },
193 246  
194 247 methods: {
... ... @@ -196,12 +249,73 @@ export default {
196 249 this.desserts = [
197 250 {
198 251 no: "1",
199   - ques: "questions sex",
200   - res: 8
  252 + ques: "questions sex ",
  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 319 editItem(item) {
206 320 this.editedIndex = this.desserts.indexOf(item);
207 321 this.editedItem = Object.assign({}, item);
... ... @@ -258,4 +372,10 @@ export default {
258 372 text-align: left;
259 373 padding: 8px;
260 374 }
  375 +.AnswerTable{
  376 +height: 370px;overflow: auto;
  377 +}
  378 +.bottomAnswser{
  379 +border-bottom:1px solid #aaa;
  380 +}
261 381 </style>
... ...
src/components/questions/skin.vue
Diff comments   View file @2a4dbc6
1 1 <template>
2   - <v-flex>
3   - <v-card>
  2 +<!-- Add Question dialog -->
  3 + <v-flex>
  4 + <v-card>
4 5 <v-spacer></v-spacer>
5 6 <v-dialog v-model="dialog" max-width="800px">
6   -
7 7 <v-card>
8 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 11 <v-spacer></v-spacer>
11 12 <v-icon @click="close">close</v-icon>
12 13 </v-card-title>
13 14 <v-flex>
14 15 <v-card>
15 16 <v-card-text>
16   - <span>
17   - <p><b>Ana Suggestion:</b> Select Suggestion</p></span>
18   - <h5>Select Category:</h5>
19   - <!-- <span>
20   - <v-btn color="grey darken-2" flat>Suggestion</v-btn>
21   - <v-btn color="grey darken-2" flat>Sex</v-btn>
22   - <v-btn color="grey darken-2" flat>Health</v-btn>
23   - <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
24   - <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
25   - </span> -->
26   - <v-tabs
27   - color="white"
28   - show-arrows
29   - >
30   - <v-tabs-slider color="black"></v-tabs-slider>
31   - <v-tab>
32   - <v-btn color="grey darken-2" flat>Suggestion</v-btn>
33   - </v-tab>
34   - <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
35   - </v-tab>
36   - <v-tab>
37   - <v-btn color="grey darken-2" flat>Health</v-btn>
38   - </v-tab>
39   - <v-tab>
40   - <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
41   - </v-tab>
42   - <v-tab>
43   - <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
44   - </v-tab>
  17 + <span>
  18 + <p>
  19 + <b>Ana Suggestion:</b>
  20 + Select Suggestion
  21 + </p>
  22 + </span>
  23 + <h5>Select Category:</h5>
  24 + <!-- <span>
  25 + <v-btn color="grey darken-2" flat>Suggestion</v-btn>
  26 + <v-btn color="grey darken-2" flat>Sex</v-btn>
  27 + <v-btn color="grey darken-2" flat>Health</v-btn>
  28 + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  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>
  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>
45 49 </v-tabs>
46   - </v-card-text>
47   - </v-card>
  50 + </v-card>
48 51 </v-flex>
49 52 <v-card-text>
50   -
51   - <v-container grid-list-md>
52   - <v-layout wrap>
53   - <v-flex xs12 sm6 md12>
54   - <v-textarea
55   - solo
56   - v-model="AddQuestioncredentials.question"
57   - name="input-7-4"
58   - label="Type Question"
59   - ></v-textarea>
60   - </v-flex>
  53 + <v-container grid-list-md>
  54 + <v-layout wrap>
  55 + <v-flex xs12 sm6 md12>
  56 + <v-textarea
  57 + solo
  58 + v-model="AddQuestioncredentials.question"
  59 + name="input-7-4"
  60 + label="Type Question"
  61 + ></v-textarea>
  62 + </v-flex>
61 63 </v-layout>
62 64 </v-container>
63 65 </v-card-text>
64   -
65 66 <v-card-actions>
66   - <v-spacer></v-spacer>
67   - <v-btn dark large @click.native="save">Post Question</v-btn>
  67 + <v-spacer></v-spacer>
  68 + <v-btn dark large @click.native="save">Post Question</v-btn>
68 69 </v-card-actions>
69   - </v-card>
70   - </v-dialog>
71   -
72   -
73   -
74   - <v-dialog v-model="dialog1" max-width="800px">
75   - <v-card>
76   - <v-card-title>
77   - <span class="headline">Edit Question</span>
78   - <v-spacer></v-spacer>
79   - <v-icon @click="close1">close</v-icon>
80   - </v-card-title>
81   -
82   - <v-card-text>
83   - <v-layout wrap>
84   - <v-flex xs12 sm6 md12>
85   - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
  70 + </v-card>
  71 + </v-dialog>
  72 + <!-- Edit Question Dialog see answer -->
  73 + <v-dialog v-model="dialog1" max-width="900px">
  74 + <v-card height="700px">
  75 + <v-card-title>
  76 + <span class="headline">Edit Question</span>
  77 + <v-spacer></v-spacer>
  78 + <v-icon @click="close1">close</v-icon>
  79 + </v-card-title>
  80 + <v-card-text>
  81 + <v-layout wrap>
  82 + <v-flex xs12>
  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>
86 136 </v-flex>
87 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 138 </v-card-text>
92   - </v-card>
93   - </v-dialog>
94   - <v-data-table
95   - :headers="headers"
96   - :items="desserts"
97   - class="elevation-1"
98   - :pagination.sync="pagination"
99   - >
100   - <template slot="items" slot-scope="props">
101   - <tr v-if="props.index === 0">
102   - <td id="td">&nbsp;</td>
103   - <td>
104   - <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span>
105   - </td>
106   - <td id="td">&nbsp;</td>
107   - <td id="td">&nbsp;</td>
108   - </tr>
109   - <tr>
110   - <td id="td" class="text-xs-center">{{ props.item.no }}</td>
111   - <td id="td">{{ props.item.ques }}</td>
112   - <td id="td" class="text-xs-center">{{ props.item.res }}</td>
113   - <td class="text-xs-center">
114   - <span>
115   - <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
116   - <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
117   - </span>
118   - </td>
119   - </tr>
120   - </template>
121   - </v-data-table>
122   - </v-card>
  139 + </v-card>
  140 + </v-dialog>
  141 + <!-- Forum Questions data-table -->
  142 + <v-card>
  143 + <v-data-table
  144 + :headers="headers"
  145 + :items="desserts"
  146 + class="elevation-1"
  147 + :pagination.sync="pagination"
  148 + >
  149 + <template slot="items" slot-scope="props">
  150 + <tr v-if="props.index === 0">
  151 + <td id="td">&nbsp;</td>
  152 + <td class="pa-4">
  153 + <span style="cursor:pointer" @click="dialog=true">
  154 + <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
  155 + </span>
  156 + </td>
  157 + <td id="td">&nbsp;</td>
  158 + <td id="td">&nbsp;</td>
  159 + </tr>
  160 + <tr>
  161 + <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
  162 + <td id="td">{{ props.item.ques }}</td>
  163 + <td id="td" class="text-xs-center">{{ props.item.res }}</td>
  164 + <td class="text-xs-center">
  165 + <span>
  166 + <img
  167 + style="cursor:pointer; height:18px; "
  168 + class="mr-5"
  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 185 </v-flex>
124 186 </template>
125 187 <script>
126 188 export default {
127 189 data: () => ({
128   - question: '',
  190 + question: "",
129 191 AddQuestioncredentials: {},
130 192 dialog: false,
131 193 dialog1: false,
132 194 isActive: true,
133 195 newActive: false,
134 196 pagination: {
135   - rowsPerPage: 10,
  197 + rowsPerPage: 10
136 198 },
  199 + getQuestion: [],
137 200 headers: [
138 201 {
139   - text: 'No.',
140   - align: 'center',
  202 + text: "No.",
  203 + align: "center",
141 204 sortable: false,
142   - value: 'name'
  205 + value: "name"
143 206 },
144   - { text: 'Posts', value: 'posts', sortable: false, align: 'center' },
145   - { text: 'Responses', value: 'responses', sortable: false, align: 'center' },
146   - { text: '', value: 'carbs', sortable: false, align: 'center' },
  207 + { text: "Posts", value: "posts", sortable: false, align: "center" },
  208 + {
  209 + text: "Responses",
  210 + value: "responses",
  211 + sortable: false,
  212 + align: "center"
  213 + },
  214 + { text: "", value: "carbs", sortable: false, align: "center" }
147 215 ],
148 216 desserts: [],
149 217 editedIndex: -1,
150 218 editedItem: {
151   - question: '',
152   -
  219 + question: "",
  220 + name: ''
153 221 },
154 222 defaultItem: {
155 223 no: 0,
156   - question: '',
157   - res: 0,
158   -
  224 + name: '',
  225 + question: "",
  226 + res: 0
159 227 }
160 228 }),
161 229  
162 230 computed: {
163   - formTitle () {
164   - return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question';
  231 + formTitle() {
  232 + return this.editedIndex === -1 ? "Create New Question" : "Edit Question";
165 233 }
166 234 },
167 235  
168 236 watch: {
169   - dialog (val) {
  237 + dialog(val) {
170 238 val || this.close();
171 239 }
172 240 },
173 241  
174   - created () {
  242 + created() {
175 243 this.initialize();
  244 + this.initializeData()
176 245 },
177 246  
178 247 methods: {
179   - initialize () {
  248 + initialize() {
180 249 this.desserts = [
181 250 {
182   - no: '1',
183   - ques: 'questions skin',
184   - res: 16,
185   - },
  251 + no: "1",
  252 + ques: "questions Skin & Beauty",
  253 + res: 21
  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 320 this.editedIndex = this.desserts.indexOf(item);
191 321 this.editedItem = Object.assign({}, item);
192 322 this.dialog1 = true;
193 323 },
194 324  
195   - deleteItem (item) {
  325 + deleteItem(item) {
196 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 332 this.dialog = false;
202 333 setTimeout(() => {
203 334 this.editedItem = Object.assign({}, this.defaultItem);
204 335 this.editedIndex = -1;
205 336 }, 300);
206 337 },
207   - close1 () {
  338 + close1() {
208 339 this.dialog1 = false;
209 340 setTimeout(() => {
210 341 this.editedItem = Object.assign({}, this.defaultItem);
211 342 this.editedIndex = -1;
212 343 }, 300);
213 344 },
214   - save () {
215   - console.log('editedItem', this.editedItem);
  345 + save() {
  346 + console.log("editedItem", this.editedItem);
216 347 if (this.editedIndex > -1) {
217 348 Object.assign(this.desserts[this.editedIndex], this.editedItem);
218 349 } else {
... ... @@ -220,8 +351,8 @@ export default {
220 351 }
221 352 this.close();
222 353 },
223   - save1 () {
224   - console.log('editedItem', this.editedItem);
  354 + save1() {
  355 + console.log("editedItem", this.editedItem);
225 356 if (this.editedIndex > -1) {
226 357 Object.assign(this.desserts[this.editedIndex], this.editedItem);
227 358 } else {
... ... @@ -229,17 +360,22 @@ export default {
229 360 }
230 361 this.close1();
231 362 }
232   - },
  363 + }
233 364 // switchComponent (comp) {
234 365 // this.$emit('switchComp', comp);
235 366 // }
236 367 };
237 368 </script>
238 369 <style>
239   -#td{
240   - border: 1px solid #dddddd;
241   - text-align: left;
242   - padding: 8px;
243   -
  370 +#td {
  371 + border: 1px solid #dddddd;
  372 + text-align: left;
  373 + padding: 8px;
  374 +}
  375 +.AnswerTable{
  376 +height: 370px;overflow: auto;
  377 +}
  378 +.bottomAnswser{
  379 +border-bottom:1px solid #aaa;
244 380 }
245 381 </style>
... ...
src/components/questions/suggestion.vue
Diff comments   View file @2a4dbc6
1 1 <template>
  2 +<!-- Add Question dialog -->
2 3 <v-flex>
3 4 <v-card>
4   - <v-spacer></v-spacer>
5 5 <v-dialog v-model="dialog" max-width="800px">
6 6 <v-card>
7 7 <v-card-title>
... ... @@ -68,6 +68,7 @@
68 68 </v-card-actions>
69 69 </v-card>
70 70 </v-dialog>
  71 + <!-- Edit Question Dialog see answer -->
71 72 <v-dialog v-model="dialog1" max-width="900px">
72 73 <v-card height="700px">
73 74 <v-card-title>
... ... @@ -136,6 +137,7 @@
136 137 </v-card-text>
137 138 </v-card>
138 139 </v-dialog>
  140 + <!-- Forum Questions data-table -->
139 141 <v-card>
140 142 <v-data-table
141 143 :headers="headers"
... ... @@ -148,7 +150,7 @@
148 150 <td id="td">&nbsp;</td>
149 151 <td class="pa-4">
150 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 154 </span>
153 155 </td>
154 156 <td id="td">&nbsp;</td>
... ...
src/pages/Provider.vue
Diff comments   View file @2a4dbc6
... ... @@ -4,7 +4,7 @@
4 4 <v-card>
5 5 <v-card-title>
6 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 8 </v-flex>
9 9 <v-spacer></v-spacer>
10 10 <!-- SEARCH ALL HEALTH PROVIDER -->
... ...
src/pages/questions.vue
Diff comments   View file @2a4dbc6
... ... @@ -2,28 +2,39 @@
2 2 <v-flex>
3 3 <app-toolbar class="app--toolbar"></app-toolbar>
4 4 <v-card>
  5 + <!-- only showing btn on lg-screen -->
5 6 <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only">
6 7 <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3>
7 8 <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5>
8 9 <span style="position:relative; left:-95px; top:10px;">
  10 + <!-- Suggestion component -->
9 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 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 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 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 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 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 29 </v-toolbar>
  30 + <!-- not showing on lg-screen-->
20 31 <div class="hidden-lg-only">
21 32 <h4><b>Forum Questions</b></h4>
22 33 <h5 style="">Select Category:</h5>
23 34 <v-tabs
24   - color="white"
25   - show-arrows
26   - >
  35 + color="white"
  36 + show-arrows
  37 + >
27 38 <v-tabs-slider color="black"></v-tabs-slider>
28 39 <v-tab>
29 40 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
... ...