viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit afd329a860d1b5c5b86f3321fe8c87221bcf31aa

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

add answer table and responsion questioner page

Showing 6 changed files with 261 additions and 51 deletions   Show diff stats
src/components/questions/diet.vue
Diff comments   View file @afd329a
... ... @@ -18,13 +18,26 @@
18 18 </p>
19 19 </span>
20 20 <h5>Select Category:</h5>
21   - <span>
  21 + <v-tabs
  22 + color="white"
  23 + show-arrows
  24 + >
  25 + <v-tabs-slider color="black"></v-tabs-slider>
  26 + <v-tab>
22 27 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23   - <v-btn color="grey darken-2" flat>Sex</v-btn>
  28 + </v-tab>
  29 + <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
  30 + </v-tab>
  31 + <v-tab>
24 32 <v-btn color="grey darken-2" flat>Health</v-btn>
  33 + </v-tab>
  34 + <v-tab>
25 35 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  36 + </v-tab>
  37 + <v-tab>
26 38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
27   - </span>
  39 + </v-tab>
  40 + </v-tabs>
28 41 </v-card-text>
29 42 </v-card>
30 43 </v-flex>
... ...
src/components/questions/health.vue
Diff comments   View file @afd329a
... ... @@ -18,13 +18,26 @@
18 18 </p>
19 19 </span>
20 20 <h5>Select Category:</h5>
21   - <span>
  21 + <v-tabs
  22 + color="white"
  23 + show-arrows
  24 + >
  25 + <v-tabs-slider color="black"></v-tabs-slider>
  26 + <v-tab>
22 27 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23   - <v-btn color="grey darken-2" flat>Sex</v-btn>
  28 + </v-tab>
  29 + <v-tab><v-btn color="grey darken-2" flat>Sex</v-btn>
  30 + </v-tab>
  31 + <v-tab>
24 32 <v-btn color="grey darken-2" flat>Health</v-btn>
  33 + </v-tab>
  34 + <v-tab>
25 35 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  36 + </v-tab>
  37 + <v-tab>
26 38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
27   - </span>
  39 + </v-tab>
  40 + </v-tabs>
28 41 </v-card-text>
29 42 </v-card>
30 43 </v-flex>
... ...
src/components/questions/sex.vue
Diff comments   View file @afd329a
... ... @@ -18,13 +18,26 @@
18 18 </p>
19 19 </span>
20 20 <h5>Select Category:</h5>
21   - <span>
  21 + <v-tabs
  22 + color="white"
  23 + show-arrows
  24 + >
  25 + <v-tabs-slider color="black"></v-tabs-slider>
  26 + <v-tab>
22 27 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23   - <v-btn color="grey darken-2" flat>Sex</v-btn>
24   - <v-btn color="grey darken-2" flat>Health</v-btn>
25   - <v-btn color="grey darken-2" flat>Skin & Beauty</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 38 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
27   - </span>
  39 + </v-tab>
  40 + </v-tabs>
28 41 </v-card-text>
29 42 </v-card>
30 43 </v-flex>
... ...
src/components/questions/skin.vue
Diff comments   View file @afd329a
... ... @@ -16,14 +16,34 @@
16 16 <span>
17 17 <p><b>Ana Suggestion:</b> Select Suggestion</p></span>
18 18 <h5>Select Category:</h5>
19   - <span>
  19 + <!-- <span>
20 20 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
21 21 <v-btn color="grey darken-2" flat>Sex</v-btn>
22 22 <v-btn color="grey darken-2" flat>Health</v-btn>
23 23 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
24 24 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
25   - </span>
26   - </v-card-text>
  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>
  45 + </v-tabs>
  46 + </v-card-text>
27 47 </v-card>
28 48 </v-flex>
29 49 <v-card-text>
... ...
src/components/questions/suggestion.vue
Diff comments   View file @afd329a
... ... @@ -5,7 +5,8 @@
5 5 <v-dialog v-model="dialog" max-width="800px">
6 6 <v-card>
7 7 <v-card-title>
8   - <span class="headline">{{ formTitle }}</span>
  8 + <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
  9 + <h4 class="hidden-lg-only">{{ formTitle }}</h4>
9 10 <v-spacer></v-spacer>
10 11 <v-icon @click="close">close</v-icon>
11 12 </v-card-title>
... ... @@ -14,18 +15,37 @@
14 15 <v-card-text>
15 16 <span>
16 17 <p>
17   - <b>Ana Suggestion:</b> Select Suggestion
  18 + <b>Ana Suggestion:</b>
  19 + Select Suggestion
18 20 </p>
19 21 </span>
20 22 <h5>Select Category:</h5>
21   - <span>
  23 + <!-- <span>
22 24 <v-btn color="grey darken-2" flat>Suggestion</v-btn>
23 25 <v-btn color="grey darken-2" flat>Sex</v-btn>
24 26 <v-btn color="grey darken-2" flat>Health</v-btn>
25 27 <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
26 28 <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
27   - </span>
  29 + </span>-->
28 30 </v-card-text>
  31 + <v-tabs color="white" show-arrows>
  32 + <v-tabs-slider color="black"></v-tabs-slider>
  33 + <v-tab>
  34 + <v-btn color="grey darken-2" flat>Suggestion</v-btn>
  35 + </v-tab>
  36 + <v-tab>
  37 + <v-btn color="grey darken-2" flat>Sex</v-btn>
  38 + </v-tab>
  39 + <v-tab>
  40 + <v-btn color="grey darken-2" flat>Health</v-btn>
  41 + </v-tab>
  42 + <v-tab>
  43 + <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
  44 + </v-tab>
  45 + <v-tab>
  46 + <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
  47 + </v-tab>
  48 + </v-tabs>
29 49 </v-card>
30 50 </v-flex>
31 51 <v-card-text>
... ... @@ -42,39 +62,77 @@
42 62 </v-layout>
43 63 </v-container>
44 64 </v-card-text>
45   -
46 65 <v-card-actions>
47 66 <v-spacer></v-spacer>
48 67 <v-btn dark large @click.native="save">Post Question</v-btn>
49 68 </v-card-actions>
50 69 </v-card>
51 70 </v-dialog>
52   - <v-dialog v-model="dialog1" max-width="800px">
53   - <v-card>
  71 + <v-dialog v-model="dialog1" max-width="900px">
  72 + <v-card height="700px">
54 73 <v-card-title>
55 74 <span class="headline">Edit Question</span>
56 75 <v-spacer></v-spacer>
57 76 <v-icon @click="close1">close</v-icon>
58 77 </v-card-title>
59   -
60 78 <v-card-text>
61 79 <v-layout wrap>
62   - <v-flex xs12 sm6 md12>
63   - <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
  80 + <v-flex xs12>
  81 + <v-textarea
  82 + solo
  83 + v-model="editedItem.question"
  84 + name="input-7-4"
  85 + label="Question"
  86 + value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  87 + ></v-textarea>
  88 + </v-flex>
  89 + </v-layout>
  90 + <v-layout class="mt-4">
  91 + <v-flex xs12 sm6>
  92 + <h5>
  93 + <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
  94 + </h5>
  95 + <h5
  96 + class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
  97 + >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
  98 + <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
  99 + </v-flex>
  100 + <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
  101 + <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
  102 + </v-flex>
  103 + </v-layout>
  104 + <v-layout>
  105 + <v-flex xs12 class="hidden-lg-only">
  106 + <v-btn dark small @click.native="save1">Save Edit</v-btn>
  107 + </v-flex>
  108 + </v-layout>
  109 + <v-layout class="mt-3 AnswerTable">
  110 + <v-flex xs12>
  111 + <div>
  112 + <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
  113 + <template slot="items" slot-scope="props">
  114 + <v-layout>
  115 + <v-flex xs9 class="bottomAnswser">
  116 + <td class="pa-3">
  117 + <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
  118 + <br>
  119 + {{ props.item.calories }}
  120 + </td>
  121 + </v-flex>
  122 + <v-flex xs3 class="bottomAnswser">
  123 + <td class="justify-center layout px -0 mt-4">
  124 + <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
  125 + </td>
  126 + </v-flex>
  127 + </v-layout>
  128 + </template>
  129 + <template slot="no-data">
  130 + <v-btn color="primary" @click="initializeData">Reset</v-btn>
  131 + </template>
  132 + </v-data-table>
  133 + </div>
64 134 </v-flex>
65 135 </v-layout>
66   - <span>
67   - <p>
68   - <b>Ana suggestion:</b> Abnormal Uterine Bleeding
69   - <br>Diagnosis 1,Diagnosis 2,Diagnosis 3
70   - <v-btn
71   - dark
72   - large
73   - @click.native="save1"
74   - style="position:absolute; top:163px; right:5px;"
75   - >Save Edit</v-btn>
76   - </p>
77   - </span>
78 136 </v-card-text>
79 137 </v-card>
80 138 </v-dialog>
... ... @@ -88,16 +146,16 @@
88 146 <template slot="items" slot-scope="props">
89 147 <tr v-if="props.index === 0">
90 148 <td id="td">&nbsp;</td>
91   - <td>
  149 + <td class="pa-4">
92 150 <span style="cursor:pointer" @click="dialog=true">
93   - <v-icon>add</v-icon>Add New Question
  151 + <v-icon class="outlined">add_box</v-icon>Add New Question
94 152 </span>
95 153 </td>
96 154 <td id="td">&nbsp;</td>
97 155 <td id="td">&nbsp;</td>
98 156 </tr>
99 157 <tr>
100   - <td id="td" class="text-xs-center">{{ props.item.no }}</td>
  158 + <td id="td" class="text-xs-center pa-4">{{ props.item.no }}</td>
101 159 <td id="td">{{ props.item.ques }}</td>
102 160 <td id="td" class="text-xs-center">{{ props.item.res }}</td>
103 161 <td class="text-xs-center">
... ... @@ -135,6 +193,7 @@ export default {
135 193 pagination: {
136 194 rowsPerPage: 10
137 195 },
  196 + getQuestion: [],
138 197 headers: [
139 198 {
140 199 text: "No.",
... ... @@ -154,10 +213,12 @@ export default {
154 213 desserts: [],
155 214 editedIndex: -1,
156 215 editedItem: {
157   - question: ""
  216 + question: "",
  217 + name: ''
158 218 },
159 219 defaultItem: {
160 220 no: 0,
  221 + name: '',
161 222 question: "",
162 223 res: 0
163 224 }
... ... @@ -177,6 +238,7 @@ export default {
177 238  
178 239 created() {
179 240 this.initialize();
  241 + this.initializeData()
180 242 },
181 243  
182 244 methods: {
... ... @@ -184,7 +246,7 @@ export default {
184 246 this.desserts = [
185 247 {
186 248 no: "1",
187   - ques: "questions suggestion",
  249 + ques: "questions suggestion ",
188 250 res: 21
189 251 },
190 252 {
... ... @@ -219,7 +281,68 @@ export default {
219 281 }
220 282 ];
221 283 },
  284 + initializeData () {
  285 + this.getQuestion = [
  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.'
222 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 + name: 'Frozen Yogurt',
  315 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  316 + },
  317 + {
  318 + name: 'Zogurt',
  319 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  320 +
  321 + },
  322 + {
  323 + name: 'Frozen Yogurt',
  324 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  325 +
  326 + },
  327 + {
  328 + name: 'Cupcake',
  329 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  330 + },
  331 + {
  332 + name: 'Gingerbread',
  333 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  334 +
  335 + },
  336 + {
  337 + name: 'Jelly bean',
  338 + calories: 'You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.'
  339 + },
  340 + ]
  341 + },
  342 + deleteAnswer (item) {
  343 + const index = this.getQuestion.indexOf(item)
  344 + confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
  345 + },
223 346 editItem(item) {
224 347 this.editedIndex = this.desserts.indexOf(item);
225 348 this.editedItem = Object.assign({}, item);
... ... @@ -276,4 +399,10 @@ export default {
276 399 text-align: left;
277 400 padding: 8px;
278 401 }
  402 +.AnswerTable{
  403 +height: 370px;overflow: auto;
  404 +}
  405 +.bottomAnswser{
  406 +border-bottom:1px solid #aaa;
  407 +}
279 408 </style>
... ...
src/pages/questions.vue
Diff comments   View file @afd329a
... ... @@ -2,12 +2,10 @@
2 2 <v-flex>
3 3 <app-toolbar class="app--toolbar"></app-toolbar>
4 4 <v-card>
5   - <v-toolbar flat color="white">
6   - <v-card-title>
7   - <!-- <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3> -->
8   - <h3><b>Forum Questions</b></h3>
9   - <h5 style="position:relative;top:-15px;">Select Category</h5>
10   - <!-- <span style="position:relative; left:-95px; top:10px;"> -->
  5 + <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only">
  6 + <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3>
  7 + <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5>
  8 + <span style="position:relative; left:-95px; top:10px;">
11 9 <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
12 10  
13 11 <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
... ... @@ -17,10 +15,34 @@
17 15 <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
18 16  
19 17 <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   - </v-card-title>
22   - </v-toolbar>
23   - <component v-bind:is="component"></component>
  18 + </span>
  19 + </v-toolbar>
  20 + <div class="hidden-lg-only">
  21 + <h4><b>Forum Questions</b></h4>
  22 + <h5 style="">Select Category:</h5>
  23 + <v-tabs
  24 + color="white"
  25 + show-arrows
  26 + >
  27 + <v-tabs-slider color="black"></v-tabs-slider>
  28 + <v-tab>
  29 + <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
  30 + </v-tab>
  31 + <v-tab>
  32 + <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
  33 + </v-tab>
  34 + <v-tab>
  35 + <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
  36 + </v-tab>
  37 + <v-tab>
  38 + <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
  39 + </v-tab>
  40 + <v-tab>
  41 + <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
  42 + </v-tab>
  43 + </v-tabs>
  44 + </div>
  45 + <component v-bind:is="component"></component>
24 46 </v-card>
25 47 </v-flex>
26 48 </template>
... ...