Commit 6b6e4e83d4d4a3475e8959966bd16252996aa76f

Authored by Neeraj Sharma
1 parent b82d0d998b

design modified in students and techers

Showing 1 changed file with 1206 additions and 454 deletions   Show diff stats
src/pages/Teachers/teachers.vue
1 1 <template>
2   -<v-app id="pages-dasboard">
3   - <v-toolbar
4   - color="grey"
5   - fixed
6   - app
7   - >
8   - <v-toolbar-title class="ml-0 pl-3">
9   - <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
10   - </v-toolbar-title>
11   -<!-- ****** SEARCH ALL Teachers ****** -->
12   - <v-flex xs7 sm3 class="userSearch">
13   - <v-text-field
14   - flat
15   - prepend-icon="search"
16   - label="Find your Teachers"
17   - v-model="search"
18   - color="black"
19   - @change="getTeacherList"
20   - >
21   - </v-text-field>
22   - </v-flex>
  2 + <v-app id="pages-dasboard">
  3 + <v-toolbar class="fixcolors" fixed app>
  4 + <v-toolbar-title class="ml-0 pl-3">
  5 + <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
  6 + </v-toolbar-title>
  7 + <!-- ****** SEARCH ALL Teachers ****** -->
  8 + <v-flex xs7 sm3 class="userSearch">
  9 + <v-text-field
  10 + flat
  11 + append-icon="search"
  12 + label="Find your Teachers"
  13 + v-model="search"
  14 + color="white"
  15 + dark
  16 + ></v-text-field>
  17 + </v-flex>
23 18 <v-spacer></v-spacer>
24 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
25   - <v-btn icon large flat slot="activator">
  20 + <v-btn icon large flat slot="activator">
26 21 <v-avatar size="40px">
27   - <img src="/static/icon/user.png"/>
  22 + <img src="/static/icon/user.png">
28 23 </v-avatar>
29   - </v-btn>
  24 + </v-btn>
30 25 <v-list class="pa-0">
31   - <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
32   - <v-list-tile-action v-if="item.icon">
  26 + <v-list-tile
  27 + v-for="(item,index) in items"
  28 + :to="!item.href ? { name: item.name } : null"
  29 + :href="item.href"
  30 + @click="item.click"
  31 + ripple="ripple"
  32 + :disabled="item.disabled"
  33 + :target="item.target"
  34 + rel="noopener"
  35 + :key="index"
  36 + >
  37 + <v-list-tile-action v-if="item.icon">
33 38 <v-icon>{{ item.icon }}</v-icon>
34 39 </v-list-tile-action>
35 40 <v-list-tile-content>
36 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
37 42 </v-list-tile-content>
38 43 </v-list-tile>
39   - </v-list>
  44 + </v-list>
40 45 </v-menu>
41   - </v-toolbar>
42   - <v-tabs grow slider-color="black">
43   - <v-tab
44   - ripple
45   - @click="activeTab('existing')"
46   - v-bind:class="{ active: isActive }"
47   - id="tab"
48   - class="subheading"
49   - >Existing Teachers</v-tab>
50   - <v-tab
51   - ripple
52   - @click="activeTab('new')"
53   - v-bind:class="{ active: newActive }"
54   - id="tab1"User
55   - class="subheading"
56   - >Add New Teachers</v-tab>
57   -<!-- ****** EDIT Teachers Dtails ****** -->
58   - <v-tab-item>
59   - <v-snackbar
60   - :timeout="timeout"
61   - :top="y === 'top'"
62   - :right="x === 'right'"
63   - :vertical="mode === 'vertical'"
64   - v-model="snackbar"
65   - color="success"
66   - >{{ text }}</v-snackbar>
67   - <v-dialog v-model="dialog" max-width="500px">
68   - <v-toolbar color="white">
69   - <v-spacer></v-spacer>
70   - <v-toolbar-title>Edit Profile</v-toolbar-title>
71   - <v-spacer></v-spacer>
72   - </v-toolbar>
73   - <v-card>
74   - <!-- <v-flex align-center justify-center layout text-xs-center>
75   - <v-avatar size="50px" style="position:absolute; top:10px; ">
76   - <img src="/static/icon/user.png">
77   - </v-avatar>
78   - </v-flex> -->
79   - <v-card-text>
80   - <v-container>
81   - <v-layout wrap justify-center>
82   - <v-flex xs12 sm9>
83   - <v-form ref="form" v-model="valid" lazy-validation>
84   - <v-layout style="position:relative;">
85   - <v-flex xs4 class="pt-4 subheading">
86   - <label>Full Name:</label>
  46 + </v-toolbar>
  47 + <v-tabs grow slider-color="black">
  48 + <v-tab
  49 + ripple
  50 + @click="activeTab('existing')"
  51 + v-bind:class="{ active: isActive }"
  52 + id="tab"
  53 + class="subheading"
  54 + >Existing Teachers</v-tab>
  55 + <v-tab
  56 + ripple
  57 + @click="activeTab('new')"
  58 + v-bind:class="{ active: newActive }"
  59 + id="tab1"
  60 + User
  61 + class="subheading"
  62 + >Add New Teachers</v-tab>
  63 + <!-- ****** EDIT TEACHERS DETAILS ****** -->
  64 + <v-tab-item>
  65 + <v-snackbar
  66 + :timeout="timeout"
  67 + :top="y === 'top'"
  68 + :right="x === 'right'"
  69 + :vertical="mode === 'vertical'"
  70 + v-model="snackbar"
  71 + color="success"
  72 + >{{ text }}</v-snackbar>
  73 + <v-dialog v-model="dialog" max-width="1000px">
  74 + <v-flex xs12 sm12 class="my-4">
  75 + <v-toolbar color="white">
  76 + <v-spacer></v-spacer>
  77 + <v-toolbar-title>Edit Profile</v-toolbar-title>
  78 + <v-spacer></v-spacer>
  79 + </v-toolbar>
  80 + <v-card flat>
  81 + <v-form ref="form">
  82 + <v-container fluid>
  83 + <v-layout>
  84 + <v-flex
  85 + xs12
  86 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  87 + >
  88 + <v-avatar size="100px">
  89 + <img src="/static/icon/user.png" v-if="!imageUrl">
  90 + </v-avatar>
  91 + <input
  92 + type="file"
  93 + style="display: none"
  94 + ref="image"
  95 + accept="image/*"
  96 + @change="onFilePicked"
  97 + >
  98 + <img
  99 + :src="imageData.imageUrl"
  100 + height="150"
  101 + v-if="imageUrl"
  102 + style="border-radius:50%; width:200px"
  103 + >
  104 + </v-flex>
  105 + </v-layout>
  106 + <v-layout>
  107 + <v-flex xs12 sm6>
  108 + <v-layout>
  109 + <v-flex xs4 class="pt-4 subheading">
  110 + <label class="right">Full Name:</label>
  111 + </v-flex>
  112 + <v-flex xs8 class="ml-3">
  113 + <v-text-field
  114 + v-model="editedItem.name"
  115 + placeholder="fill your full Name"
  116 + name="name"
  117 + type="text"
  118 + required
  119 + ></v-text-field>
  120 + </v-flex>
  121 + </v-layout>
  122 + </v-flex>
  123 + <v-flex xs12 sm6>
  124 + <v-layout>
  125 + <v-flex xs4 class="pt-4 subheading">
  126 + <label class="right">Email ID:</label>
  127 + </v-flex>
  128 + <v-flex xs8 class="ml-3">
  129 + <v-text-field
  130 + placeholder="fill your email"
  131 + v-model="editedItem.email"
  132 + type="text"
  133 + name="email"
  134 + required
  135 + ></v-text-field>
  136 + </v-flex>
  137 + </v-layout>
  138 + </v-flex>
  139 + </v-layout>
  140 + <v-layout>
  141 + <v-flex xs12 sm6>
  142 + <v-layout>
  143 + <v-flex xs4 class="pt-4 subheading">
  144 + <label class="right">Date of Birth:</label>
  145 + </v-flex>
  146 + <v-flex xs8 class="ml-3">
  147 + <v-menu
  148 + ref="menu"
  149 + :close-on-content-click="false"
  150 + v-model="menu2"
  151 + :nudge-right="40"
  152 + lazy
  153 + transition="scale-transition"
  154 + offset-y
  155 + full-width
  156 + min-width="290px"
  157 + >
  158 + <v-text-field
  159 + slot="activator"
  160 + v-model="editedItem.dob"
  161 + placeholder="Select date"
  162 + ></v-text-field>
  163 + <v-date-picker
  164 + ref="picker"
  165 + v-model="editedItem.dob"
  166 + :max="new Date().toISOString().substr(0, 10)"
  167 + min="1950-01-01"
  168 + @input="menu2 = false"
  169 + ></v-date-picker>
  170 + </v-menu>
  171 + </v-flex>
  172 + </v-layout>
  173 + </v-flex>
  174 + <v-flex xs12 sm6>
  175 + <v-layout>
  176 + <v-flex xs4 class="pt-4 subheading">
  177 + <label class="right">City:</label>
  178 + </v-flex>
  179 + <v-flex xs8 class="ml-3">
  180 + <v-text-field
  181 + v-model="editedItem.city"
  182 + placeholder="fill your City Name"
  183 + name="City"
  184 + type="text"
  185 + required
  186 + ></v-text-field>
  187 + </v-flex>
  188 + </v-layout>
  189 + </v-flex>
  190 + </v-layout>
  191 + <v-layout>
  192 + <v-flex xs12 sm6>
  193 + <v-layout>
  194 + <v-flex xs4 class="pt-4 subheading">
  195 + <label class="right">State:</label>
  196 + </v-flex>
  197 + <v-flex xs8 class="ml-3">
  198 + <v-text-field
  199 + v-model="editedItem.state"
  200 + placeholder="fill your State Name"
  201 + name="state"
  202 + type="text"
  203 + required
  204 + ></v-text-field>
  205 + </v-flex>
  206 + </v-layout>
  207 + </v-flex>
  208 + <v-flex xs12 sm6>
  209 + <v-layout>
  210 + <v-flex xs4 class="pt-4 subheading">
  211 + <label class="right">PinCode:</label>
  212 + </v-flex>
  213 + <v-flex xs8 class="ml-3">
  214 + <v-text-field
  215 + v-model="editedItem.pincode"
  216 + placeholder="fill your pincode"
  217 + name="pincode"
  218 + type="number"
  219 + required
  220 + ></v-text-field>
  221 + </v-flex>
  222 + </v-layout>
  223 + </v-flex>
  224 + </v-layout>
  225 + <v-layout>
  226 + <v-flex xs12 sm6>
  227 + <v-layout>
  228 + <v-flex xs4 class="pt-4 subheading">
  229 + <label class="right">Mobile NO:</label>
  230 + </v-flex>
  231 + <v-flex xs8 class="ml-3">
  232 + <v-text-field
  233 + v-model="editedItem.mobileNo"
  234 + placeholder="fill your MobileNo"
  235 + name="mobileNo"
  236 + type="number"
  237 + required
  238 + ></v-text-field>
  239 + </v-flex>
  240 + </v-layout>
  241 + </v-flex>
  242 + <v-flex xs12 sm6>
  243 + <v-layout>
  244 + <v-flex xs4 class="pt-4 subheading">
  245 + <label class="right">Select Country:</label>
  246 + </v-flex>
  247 + <v-flex xs8 class="ml-3">
  248 + <v-autocomplete
  249 + v-model="editedItem.country"
  250 + :items="countries"
  251 + placeholder="Select Country Name"
  252 + required
  253 + ></v-autocomplete>
  254 + </v-flex>
  255 + </v-layout>
  256 + </v-flex>
  257 + </v-layout>
  258 + <v-layout>
  259 + <v-flex xs12 sm6>
  260 + <v-layout>
  261 + <v-flex xs4 class="pt-4 subheading">
  262 + <label class="right">Join Date</label>
  263 + </v-flex>
  264 + <v-flex xs8 class="ml-3">
  265 + <v-menu
  266 + ref="menu"
  267 + :close-on-content-click="false"
  268 + v-model="menu3"
  269 + :nudge-right="40"
  270 + lazy
  271 + transition="scale-transition"
  272 + offset-y
  273 + full-width
  274 + min-width="290px"
  275 + >
  276 + <v-text-field
  277 + slot="activator"
  278 + v-model="editedItem.joinDate"
  279 + placeholder="Select date"
  280 + ></v-text-field>
  281 + <v-date-picker
  282 + ref="picker"
  283 + v-model="editedItem.joinDate"
  284 + :max="new Date().toISOString().substr(0, 10)"
  285 + min="1950-01-01"
  286 + @input="menu3 = false"
  287 + ></v-date-picker>
  288 + </v-menu>
  289 + </v-flex>
  290 + </v-layout>
  291 + </v-flex>
  292 + <v-flex xs12 sm6>
  293 + <v-layout>
  294 + <v-flex xs4 class="pt-4 subheading">
  295 + <label class="right">Uplaod Image:</label>
  296 + </v-flex>
  297 + <v-flex xs8 class="ml-3">
  298 + <v-text-field
  299 + label="Select Image"
  300 + @click="pickFile"
  301 + v-model="imageName"
  302 + prepend-icon="attach_file"
  303 + ></v-text-field>
  304 + </v-flex>
  305 + </v-layout>
  306 + </v-flex>
  307 + </v-layout>
  308 + <v-layout>
  309 + <v-flex xs12 sm12>
  310 + <v-layout>
  311 + <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
  312 + <label class>Present Address:</label>
  313 + </v-flex>
  314 + <v-flex xs12>
  315 + <v-text-field
  316 + name="input-4-3"
  317 + v-model="editedItem.presentAddress"
  318 + placeholder="fill Your present Address"
  319 + required
  320 + ></v-text-field>
  321 + </v-flex>
  322 + </v-layout>
  323 + </v-flex>
  324 + <v-flex xs12 sm12>
  325 + <v-layout>
  326 + <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
  327 + <label>Permanent Address:</label>
  328 + </v-flex>
  329 + <v-flex xs12>
  330 + <v-text-field
  331 + name="input-4-3"
  332 + v-model="editedItem.permanentAddress"
  333 + placeholder="fill Your Permanent Address"
  334 + required
  335 + ></v-text-field>
  336 + </v-flex>
  337 + </v-layout>
  338 + </v-flex>
  339 + </v-layout>
  340 + <v-layout>
  341 + <v-flex xs12 sm12>
  342 + <v-card-actions>
  343 + <v-btn round dark @click.native="close">Cancel</v-btn>
  344 + <v-spacer></v-spacer>
  345 + <v-btn round dark @click="save">Save</v-btn>
  346 + </v-card-actions>
  347 + </v-flex>
  348 + </v-layout>
  349 + </v-container>
  350 + </v-form>
  351 + </v-card>
  352 + </v-flex>
  353 + </v-dialog>
  354 +
  355 +<!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
  356 +
  357 + <v-dialog v-model="dialog1" max-width="600px">
  358 + <v-toolbar color="white">
  359 + <v-spacer></v-spacer>
  360 + <v-toolbar-title>Profile</v-toolbar-title>
  361 + <v-spacer></v-spacer>
  362 + <v-icon @click="close1">close</v-icon>
  363 + </v-toolbar>
  364 + <v-card>
  365 + <v-flex align-center justify-center layout text-xs-center>
  366 + <v-avatar size="50px" style="position:absolute; top:20px;">
  367 + <img src="/static/icon/user.png">
  368 + </v-avatar>
  369 + </v-flex>
  370 + <v-card-text>
  371 + <v-container grid-list-md>
  372 + <v-layout wrap>
  373 + <v-flex>
  374 + <br>
  375 + <br>
  376 + <v-layout>
  377 + <v-flex xs5 sm6>
  378 + <h5 class="right my-1">Full Name:</h5>
87 379 </v-flex>
88   - <v-flex xs8>
89   - <v-text-field
90   - v-model="editedItem.name"
91   - v-validate="'required'"
92   - :rules="nameRules"
93   - data-vv-name="Name"
94   - required
95   - ></v-text-field>
  380 + <v-flex sm6 xs8>
  381 + <h5 class="my-1">{{ editedItem.name }}</h5>
96 382 </v-flex>
97 383 </v-layout>
98 384 <v-layout>
99   - <v-flex xs4 class="pt-4 subheading">
100   - <label>Email ID:</label>
  385 + <v-flex xs5 sm6>
  386 + <h5 class="right my-1">Email:</h5>
101 387 </v-flex>
102   - <v-flex xs8>
103   - <v-text-field
104   - v-model="editedItem.email"
105   - v-validate="'required|email'"
106   - :rules="emailRules"
107   - data-vv-name="E-mail"
108   - required
109   - ></v-text-field>
  388 + <v-flex sm6 xs8>
  389 + <h5 class="my-1">{{ editedItem.email }}</h5>
110 390 </v-flex>
111 391 </v-layout>
112   - <!-- <v-layout>
113   - <v-flex xs4 class="pt-4 subheading">
114   - <label>Date of Birth:</label>
  392 + <v-layout>
  393 + <v-flex xs5 sm6>
  394 + <h5 class="right my-1">City:</h5>
115 395 </v-flex>
116   - <v-flex xs8>
117   - <v-menu
118   - ref="menu1"
119   - :close-on-content-click="false"
120   - v-model="menu1"
121   - :nudge-right="40"
122   - lazy
123   - transition="scale-transition"
124   - offset-y
125   - full-width
126   - min-width="290px"
127   - >
128   - <v-text-field
129   - slot="activator"
130   - v-model="editedItem.dob"
131   - placeholder="Select date"
132   - ></v-text-field>
133   - <v-date-picker
134   - ref="picker"
135   - v-model="editedItem.dob"
136   - :max="new Date().toISOString().substr(0, 10)"
137   - min="1950-01-01"
138   - @input="menu1 = false"
139   - ></v-date-picker>
140   - </v-menu>
  396 + <v-flex sm6 xs8>
  397 + <h5 class="my-1">{{ editedItem.city }}</h5>
141 398 </v-flex>
142   - </v-layout> -->
143   - <v-card-actions>
144   - <v-btn round dark @click.native="close">Cancel</v-btn>
145   - <v-spacer></v-spacer>
146   - <v-btn round dark @click="save">Save</v-btn>
147   - </v-card-actions>
148   - </v-form>
149   - </v-flex>
150   - </v-layout>
151   - </v-container>
152   - </v-card-text>
153   - </v-card>
154   - </v-dialog>
155   -<!-- ****** PROFILE VIEW Teachers Details ****** -->
156   - <v-dialog v-model="dialog1" max-width="600px">
157   - <v-toolbar color="white">
158   - <v-spacer></v-spacer>
159   - <v-toolbar-title>Profile</v-toolbar-title>
160   - <v-spacer></v-spacer>
161   - <v-icon @click="close1">close</v-icon>
162   - </v-toolbar>
163   - <v-card>
164   - <v-flex align-center justify-center layout text-xs-center>
165   - <v-avatar size="50px" style="position:absolute; top:20px;">
166   - <img src="/static/icon/user.png">
167   - </v-avatar>
168   - </v-flex>
169   - <v-card-text>
170   - <v-container grid-list-md>
171   - <v-layout wrap>
172   - <v-flex><br><br>
173   - <v-layout>
174   - <v-flex xs5 sm6>
175   - <h5 class="right">Full Name:</h5>
  399 + </v-layout>
  400 + <v-layout>
  401 + <v-flex xs5 sm6>
  402 + <h5 class="right my-1">State:</h5>
  403 + </v-flex>
  404 + <v-flex sm6 xs8>
  405 + <h5 class="my-1">{{ editedItem.state }}</h5>
  406 + </v-flex>
  407 + </v-layout>
  408 + <v-layout>
  409 + <v-flex xs5 sm6>
  410 + <h5 class="right my-1">Country:</h5>
  411 + </v-flex>
  412 + <v-flex sm6 xs8>
  413 + <h5 class="my-1">{{ editedItem.country }}</h5>
  414 + </v-flex>
  415 + </v-layout>
  416 + <v-layout>
  417 + <v-flex xs5 sm6>
  418 + <h5 class="right my-1">Pincode:</h5>
  419 + </v-flex>
  420 + <v-flex sm6 xs8>
  421 + <h5 class="my-1">{{ editedItem.pincode }}</h5>
  422 + </v-flex>
  423 + </v-layout>
  424 + <v-layout>
  425 + <v-flex xs5 sm6>
  426 + <h5 class="right my-1">Mobile No:</h5>
  427 + </v-flex>
  428 + <v-flex sm6 xs8>
  429 + <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
  430 + </v-flex>
  431 + </v-layout>
  432 + <v-layout>
  433 + <v-flex xs5 sm6>
  434 + <h5 class="right my-1">Join Date:</h5>
  435 + </v-flex>
  436 + <v-flex sm6 xs8>
  437 + <h5 class="my-1">{{ editedItem.joinDate }}</h5>
  438 + </v-flex>
  439 + </v-layout>
  440 + <v-layout>
  441 + <v-flex xs5 sm6>
  442 + <h5 class="right my-1">Date Of Birth:</h5>
  443 + </v-flex>
  444 + <v-flex sm6 xs8>
  445 + <h5 class="my-1">{{ editedItem.dob }}</h5>
  446 + </v-flex>
  447 + </v-layout>
  448 + <v-layout>
  449 + <v-flex xs6 sm6 >
  450 + <h5 class="right my-1">Permanent Address:</h5>
176 451 </v-flex>
177 452 <v-flex sm6 xs8>
178   - <h5>{{ editedItem.name }}</h5>
  453 + <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
179 454 </v-flex>
180   - </v-layout>
181   - <v-layout>
182   - <v-flex xs5 sm6>
183   - <h5 class="right">Email:</h5>
184   - </v-flex>
185   - <v-flex sm6 xs8>
186   - <h5>{{ editedItem.email }}</h5>
187   - </v-flex>
188   - </v-layout>
189   - <!-- <v-layout>
  455 + </v-layout>
  456 + <v-layout>
190 457 <v-flex xs6 sm6 >
191   - <h5 class="right my-3">Date Of Birth:</h5>
  458 + <h5 class="right my-1">present Address:</h5>
192 459 </v-flex>
193 460 <v-flex sm6 xs8>
194   - <h5 class="my-3">{{ editedItem.dob }}</h5>
  461 + <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
195 462 </v-flex>
196   - </v-layout> -->
197   - </v-flex>
198   - </v-layout>
199   - </v-container>
200   - </v-card-text>
201   - </v-card>
202   - </v-dialog>
203   - <v-snackbar
204   - :timeout="timeout"
205   - :top="y === 'top'"
206   - :right="x === 'right'"
207   - :vertical="mode === 'vertical'"
208   - v-model="snackbar"
209   - color="success"
210   - >{{ text }}</v-snackbar>
211   -
212   -<!-- ****** EXISTING-Teachers Table Data****** -->
213   - <v-data-table
214   - :headers="headers"
215   - :items="desserts"
216   - :pagination.sync="pagination"
217   - :search="search"
218   - >
219   - <template slot="items" slot-scope="props">
220   - <td id="td" class="text-xs-center">{{ props.index}}</td>
221   - <td id="td" class="text-xs-center">{{ props.item.name}}</td>
222   - <td id="td" class="text-xs-center">{{ props.item.email }}</td>
223   -
224   - <td class="text-xs-center">
225   - <span>
226   - <img
227   - style="cursor:pointer; width:25px; height:18px; "
228   - class="mr-5"
229   - @click="profile(props.item)"
230   - src="/static/icon/eye1.png"
231   - >
232   - <img
233   - style="cursor:pointer; width:20px; height:18px; "
234   - class="mr-5"
235   - @click="editItem(props.item)"
236   - src="/static/icon/edit1.png"
237   - >
238   - <img
239   - style="cursor:pointer; height:20px; "
240   - class="mr-5"
241   - @click="deleteItem(props.item)"
242   - src="/static/icon/delete1.png"
243   - >
244   - </span>
245   - </td>
246   - </template>
247   - <v-alert
248   - slot="no-results"
249   - :value="true"
250   - color="error"
251   - icon="warning"
252   - >Your search for "{{ search }}" found no results.</v-alert>
253   - </v-data-table>
254   - </v-tab-item>
  463 + </v-layout>
  464 + </v-flex>
  465 + </v-layout>
  466 + </v-container>
  467 + </v-card-text>
  468 + </v-card>
  469 + </v-dialog>
  470 + <v-snackbar
  471 + :timeout="timeout"
  472 + :top="y === 'top'"
  473 + :right="x === 'right'"
  474 + :vertical="mode === 'vertical'"
  475 + v-model="snackbar"
  476 + color="success"
  477 + >{{ text }}</v-snackbar>
255 478  
256   -<!-- ****** ADD Teachers ****** -->
  479 + <!-- ****** EXISTING-Teachers TABLE DATA****** -->
  480 + <v-data-table
  481 + :headers="headers"
  482 + :items="desserts"
  483 + :pagination.sync="pagination"
  484 + :search="search"
  485 + >
  486 + <template slot="items" slot-scope="props">
  487 + <td id="td" class="text-xs-center">{{ props.index}}</td>
  488 + <td id="td" class="text-xs-center">{{ props.item.name}}</td>
  489 + <td id="td" class="text-xs-center">{{ props.item.email }}</td>
  490 + <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
  491 + <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td>
  492 + <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
  493 + <td class="text-xs-center">
  494 + <span>
  495 + <img
  496 + style="cursor:pointer; width:25px; height:18px; "
  497 + class="mr-5"
  498 + @click="profile(props.item)"
  499 + src="/static/icon/eye1.png"
  500 + >
  501 + <img
  502 + style="cursor:pointer; width:20px; height:18px; "
  503 + class="mr-5"
  504 + @click="editItem(props.item)"
  505 + src="/static/icon/edit1.png"
  506 + >
  507 + <img
  508 + style="cursor:pointer; height:20px; "
  509 + class="mr-5"
  510 + @click="deleteItem(props.item)"
  511 + src="/static/icon/delete1.png"
  512 + >
  513 + </span>
  514 + </td>
  515 + </template>
  516 + <v-alert
  517 + slot="no-results"
  518 + :value="true"
  519 + color="error"
  520 + icon="warning"
  521 + >Your search for "{{ search }}" found no results.</v-alert>
  522 + </v-data-table>
  523 + </v-tab-item>
257 524  
258   - <v-tab-item>
259   - <v-container>
260   - <v-snackbar
261   - :timeout="timeout"
262   - :top="y === 'top'"
263   - :right="x === 'right'"
264   - :vertical="mode === 'vertical'"
265   - v-model="snackbar"
266   - color="success"
267   - >{{ text }}</v-snackbar>
268   - <v-flex xs12 sm8 offset-sm2 class="top">
269   - <v-card flat>
270   - <v-container fluid fill-height>
271   - <v-layout align-center>
272   - <v-flex xs12>
273   - <v-flex offset-xs5>
274   - <v-avatar size="55px">
275   - <img src="/static/icon/user.png">
276   - </v-avatar>
277   - </v-flex>
278   - <v-form ref="form" v-model="valid" lazy-validation>
  525 + <!-- ****** Add Teachers Data****** -->
  526 + <v-tab-item>
  527 + <v-container>
  528 + <v-snackbar
  529 + :timeout="timeout"
  530 + :top="y === 'top'"
  531 + :right="x === 'right'"
  532 + :vertical="mode === 'vertical'"
  533 + v-model="snackbar"
  534 + color="success"
  535 + >{{ text }}</v-snackbar>
  536 + <v-flex xs12 sm12 class="my-4">
  537 + <v-card flat>
  538 + <v-form ref="form" v-model="valid" lazy-validation>
  539 + <v-container fluid>
  540 + <v-layout>
  541 + <v-flex
  542 + xs12
  543 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  544 + >
  545 + <v-avatar size="100px">
  546 + <img src="/static/icon/user.png" v-if="!imageUrl">
  547 + </v-avatar>
  548 + <!-- <input
  549 + type="file"
  550 + style="display: none"
  551 + ref="image"
  552 + accept="image/*"
  553 + @change="onFilePicked"
  554 + > -->
  555 + <img
  556 + :src="imageData.imageUrl"
  557 + height="150"
  558 + v-if="imageUrl"
  559 + style="border-radius:50%; width:200px"
  560 + >
  561 + </v-flex>
  562 + </v-layout>
279 563 <v-layout>
280   - <v-flex xs4 class="pt-4 subheading">
281   - <label class="right">Full Name:</label>
  564 + <v-flex xs12 sm6>
  565 + <v-layout>
  566 + <v-flex xs4 class="pt-4 subheading">
  567 + <label class="right">Full Name:</label>
  568 + </v-flex>
  569 + <v-flex xs8 class="ml-3">
  570 + <v-text-field
  571 + v-model="addTeachers.name"
  572 + placeholder="fill your full Name"
  573 + name="name"
  574 + type="text"
  575 + :rules="nameRules"
  576 + required
  577 + ></v-text-field>
  578 + </v-flex>
  579 + </v-layout>
282 580 </v-flex>
283   - <v-flex xs6 class="ml-3">
284   - <v-text-field
285   - v-model="editedItem.name"
286   - placeholder="fill your full Name"
287   - name="name"
288   - type="text"
289   - :rules="nameRules"
290   - required
291   - ></v-text-field>
  581 + <v-flex xs12 sm6>
  582 + <v-layout>
  583 + <v-flex xs4 class="pt-4 subheading">
  584 + <label class="right">Email ID:</label>
  585 + </v-flex>
  586 + <v-flex xs8 class="ml-3">
  587 + <v-text-field
  588 + placeholder="fill your email"
  589 + :rules="emailRules"
  590 + v-model="addTeachers.email"
  591 + type="text"
  592 + name="email"
  593 + required
  594 + ></v-text-field>
  595 + </v-flex>
  596 + </v-layout>
292 597 </v-flex>
293 598 </v-layout>
294 599 <v-layout>
295   - <v-flex xs4 class="pt-4 subheading">
296   - <label class="right">Email ID:</label>
  600 + <v-flex xs12 sm6>
  601 + <v-layout>
  602 + <v-flex xs4 class="pt-4 subheading">
  603 + <label class="right">Date of Birth:</label>
  604 + </v-flex>
  605 + <v-flex xs8 class="ml-3">
  606 + <v-menu
  607 + ref="menu"
  608 + :close-on-content-click="false"
  609 + v-model="menu"
  610 + :nudge-right="40"
  611 + lazy
  612 + transition="scale-transition"
  613 + offset-y
  614 + full-width
  615 + min-width="290px"
  616 + >
  617 + <v-text-field
  618 + slot="activator"
  619 + :rules="dateRules"
  620 + v-model="addTeachers.date"
  621 + placeholder="Select date"
  622 + ></v-text-field>
  623 + <v-date-picker
  624 + ref="picker"
  625 + v-model="addTeachers.date"
  626 + :max="new Date().toISOString().substr(0, 10)"
  627 + min="1950-01-01"
  628 + @input="menu = false"
  629 + ></v-date-picker>
  630 + </v-menu>
  631 + </v-flex>
  632 + </v-layout>
297 633 </v-flex>
298   - <v-flex xs6 class="ml-3">
299   - <v-text-field
300   - placeholder="fill your email"
301   - :rules="emailRules"
302   - v-model="editedItem.email"
303   - type="text"
304   - name="email"
305   - required
306   - ></v-text-field>
  634 + <v-flex xs12 sm6>
  635 + <v-layout>
  636 + <v-flex xs4 class="pt-4 subheading">
  637 + <label class="right">City:</label>
  638 + </v-flex>
  639 + <v-flex xs8 class="ml-3">
  640 + <v-text-field
  641 + v-model="addTeachers.city"
  642 + placeholder="fill your City Name"
  643 + name="City"
  644 + type="text"
  645 + :rules="cityRules"
  646 + required
  647 + ></v-text-field>
  648 + </v-flex>
  649 + </v-layout>
307 650 </v-flex>
308 651 </v-layout>
309   - <!-- <v-layout>
310   - <v-flex xs4 class="pt-4 subheading">
311   - <label class="right">Date of Birth:</label>
  652 + <v-layout>
  653 + <v-flex xs12 sm6>
  654 + <v-layout>
  655 + <v-flex xs4 class="pt-4 subheading">
  656 + <label class="right">State:</label>
  657 + </v-flex>
  658 + <v-flex xs8 class="ml-3">
  659 + <v-text-field
  660 + v-model="addTeachers.state"
  661 + placeholder="fill your State Name"
  662 + name="state"
  663 + type="text"
  664 + :rules="stateRules"
  665 + required
  666 + ></v-text-field>
  667 + </v-flex>
  668 + </v-layout>
  669 + </v-flex>
  670 + <v-flex xs12 sm6>
  671 + <v-layout>
  672 + <v-flex xs4 class="pt-4 subheading">
  673 + <label class="right">PinCode:</label>
  674 + </v-flex>
  675 + <v-flex xs8 class="ml-3">
  676 + <v-text-field
  677 + v-model="addTeachers.pincode"
  678 + placeholder="fill your pincode"
  679 + name="pincode"
  680 + type="number"
  681 + :rules="pincode"
  682 + required
  683 + ></v-text-field>
  684 + </v-flex>
  685 + </v-layout>
312 686 </v-flex>
313   - <v-flex xs6 class="ml-3">
314   - <v-menu
315   - ref="menu"
316   - :close-on-content-click="false"
317   - v-model="menu"
318   - :nudge-right="40"
319   - lazy
320   - transition="scale-transition"
321   - offset-y
322   - full-width
323   - min-width="290px"
324   - >
325   - <v-text-field
326   - slot="activator"
327   - v-model="editedItem.date"
328   - placeholder="Select date"
329   - ></v-text-field>
330   - <v-date-picker
331   - ref="picker"
332   - v-model="editedItem.date"
333   - :max="new Date().toISOString().substr(0, 10)"
334   - min="1950-01-01"
335   - @input="menu = false"
336   - ></v-date-picker>
337   - </v-menu>
338   - </v-flex>
339   - </v-layout> -->
340   - <v-layout>
341   - <v-flex xs12 sm9 offset-sm2>
342   - <v-card-actions>
343   - <v-btn @click="clear" round dark>clear</v-btn>
344   - <v-spacer></v-spacer>
345   - <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
346   - </v-card-actions>
347   - </v-flex>
348 687 </v-layout>
349   - </v-form>
350   - </v-flex>
351   - </v-layout>
352   - </v-container>
353   - </v-card>
354   - </v-flex>
355   - </v-container>
356   - </v-tab-item>
357   - </v-tabs>
358   -</v-app>
  688 + <v-layout>
  689 + <v-flex xs12 sm6>
  690 + <v-layout>
  691 + <v-flex xs4 class="pt-4 subheading">
  692 + <label class="right">Mobile NO:</label>
  693 + </v-flex>
  694 + <v-flex xs8 class="ml-3">
  695 + <v-text-field
  696 + v-model="addTeachers.mobileNo"
  697 + placeholder="fill your MobileNo"
  698 + name="mobileNo"
  699 + type="number"
  700 + :rules="mobileNoRules"
  701 + required
  702 + ></v-text-field>
  703 + </v-flex>
  704 + </v-layout>
  705 + </v-flex>
  706 + <v-flex xs12 sm6>
  707 + <v-layout>
  708 + <v-flex xs4 class="pt-4 subheading">
  709 + <label class="right">Select Country:</label>
  710 + </v-flex>
  711 + <v-flex xs8 class="ml-3">
  712 + <v-autocomplete
  713 + v-model="addTeachers.country"
  714 + :rules="country"
  715 + :items="countries"
  716 + placeholder="Select Country Name"
  717 + required
  718 + ></v-autocomplete>
  719 + </v-flex>
  720 + </v-layout>
  721 + </v-flex>
  722 + </v-layout>
  723 + <v-layout>
  724 + <v-flex xs12 sm6>
  725 + <v-layout>
  726 + <v-flex xs4 class="pt-4 subheading">
  727 + <label class="right">Join Date</label>
  728 + </v-flex>
  729 + <v-flex xs8 class="ml-3">
  730 + <v-menu
  731 + ref="menu1"
  732 + :close-on-content-click="false"
  733 + v-model="menu1"
  734 + :nudge-right="40"
  735 + lazy
  736 + transition="scale-transition"
  737 + offset-y
  738 + full-width
  739 + min-width="290px"
  740 + >
  741 + <v-text-field
  742 + slot="activator"
  743 + :rules="joinDateRules"
  744 + v-model="addTeachers.joinDate"
  745 + placeholder="Select date"
  746 + ></v-text-field>
  747 + <v-date-picker
  748 + ref="picker"
  749 + v-model="addTeachers.joinDate"
  750 + :max="new Date().toISOString().substr(0, 10)"
  751 + min="1950-01-01"
  752 + @input="menu1 = false"
  753 + ></v-date-picker>
  754 + </v-menu>
  755 + </v-flex>
  756 + </v-layout>
  757 + </v-flex>
  758 + <v-flex xs12 sm6>
  759 + <v-layout>
  760 + <v-flex xs4 class="pt-4 subheading">
  761 + <label class="right">Uplaod Image:</label>
  762 + </v-flex>
  763 + <v-flex xs8 class="ml-3">
  764 + <v-text-field
  765 + label="Select Image"
  766 + @click="pickFile"
  767 + v-model="imageName"
  768 + prepend-icon="attach_file"
  769 + ></v-text-field>
  770 + <input
  771 + type="file"
  772 + style="display: none"
  773 + ref="image"
  774 + accept="image/*"
  775 + @change="onFilePicked"
  776 + >
  777 + </v-flex>
  778 + </v-layout>
  779 + </v-flex>
  780 + </v-layout>
  781 + <v-layout>
  782 + <v-flex xs12 sm12>
  783 + <v-layout>
  784 + <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
  785 + <label class>Present Address:</label>
  786 + </v-flex>
  787 + <v-flex xs12>
  788 + <v-text-field
  789 + name="input-4-3"
  790 + v-model="addTeachers.presentAddress"
  791 + :rules="presentAddress"
  792 + placeholder="fill Your present Address"
  793 + required
  794 + ></v-text-field>
  795 + </v-flex>
  796 + </v-layout>
  797 + </v-flex>
  798 + <v-flex xs12 sm12>
  799 + <v-layout>
  800 + <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
  801 + <label>Permanent Address:</label>
  802 + </v-flex>
  803 + <v-flex xs12>
  804 + <v-text-field
  805 + name="input-4-3"
  806 + v-model="addTeachers.permanentAddress"
  807 + :rules="permanentAddress"
  808 + placeholder="fill Your Permanent Address"
  809 + required
  810 + ></v-text-field>
  811 + </v-flex>
  812 + </v-layout>
  813 + </v-flex>
  814 + </v-layout>
  815 + <v-layout>
  816 + <v-flex xs12 sm12>
  817 + <v-card-actions>
  818 + <v-btn @click="clear" round dark>clear</v-btn>
  819 + <v-spacer></v-spacer>
  820 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  821 + </v-card-actions>
  822 + </v-flex>
  823 + </v-layout>
  824 + </v-container>
  825 + </v-form>
  826 + </v-card>
  827 + </v-flex>
  828 + </v-container>
  829 + </v-tab-item>
  830 + </v-tabs>
  831 + </v-app>
359 832 </template>
360 833  
361 834 <script>
... ... @@ -366,7 +839,7 @@ import Util from &quot;@/util&quot;;
366 839 export default {
367 840 components: {
368 841 // "one-month": onemonth,
369   - },
  842 + },
370 843 data: () => ({
371 844 component: "report-generate",
372 845 snackbar: false,
... ... @@ -376,31 +849,248 @@ export default {
376 849 timeout: 3000,
377 850 text: "",
378 851 loading: false,
379   - date:null,
380   - search: '',
381   - modal: false,
382   - modaledit:false,
  852 + date: null,
  853 + search: "",
383 854 menu: false,
384   - menu1:false,
  855 + menu1: false,
  856 + menu2: false,
  857 + menu3: false,
385 858 dialog: false,
386 859 dialog1: false,
387   - dialog2: false,
388 860 valid: true,
389 861 isActive: true,
390 862 newActive: false,
391   - loader: null,
392   - loading: false,
393   - loading2: false,
394   - loading3: false,
395   - loading4: false,
396   - details: [],
397 863 pagination: {
398 864 rowsPerPage: 15
399 865 },
  866 + imageData: {},
  867 + imageName: "",
  868 + imageUrl: "",
  869 + imageFile: "",
400 870 nameRules: [v => !!v || " Full Name is required"],
  871 + dateRules: [v => !!v || " DOB is required"],
  872 + cityRules: [v => !!v || " City Name is required"],
  873 + pincode: [v => !!v || " Pincode is required"],
  874 + country: [v => !!v || " Country Name is required"],
  875 + permanentAddress: [v => !!v || " Permanent Address is required"],
  876 + presentAddress: [v => !!v || " Present Address is required"],
  877 + mobileNoRules: [v => !!v || "Mobile Number is required"],
  878 + stateRules: [v => !!v || "State Name is required"],
  879 + joinDateRules: [v => !!v || " Join Date is required"],
  880 + errorMessages: "",
401 881 emailRules: [
402 882 v => !!v || "E-mail is required",
403   - v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
  883 + v =>
  884 + /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
  885 + "E-mail must be valid"
  886 + ],
  887 + countries: [
  888 + "Afghanistan",
  889 + "Albania",
  890 + "Algeria",
  891 + "Andorra",
  892 + "Angola",
  893 + "Anguilla",
  894 + "Antigua &amp; Barbuda",
  895 + "Argentina",
  896 + "Armenia",
  897 + "Aruba",
  898 + "Australia",
  899 + "Austria",
  900 + "Azerbaijan",
  901 + "Bahamas",
  902 + "Bahrain",
  903 + "Bangladesh",
  904 + "Barbados",
  905 + "Belarus",
  906 + "Belgium",
  907 + "Belize",
  908 + "Benin",
  909 + "Bermuda",
  910 + "Bhutan",
  911 + "Bolivia",
  912 + "Bosnia &amp; Herzegovina",
  913 + "Botswana",
  914 + "Brazil",
  915 + "British Virgin Islands",
  916 + "Brunei",
  917 + "Bulgaria",
  918 + "Burkina Faso",
  919 + "Burundi",
  920 + "Cambodia",
  921 + "Cameroon",
  922 + "Cape Verde",
  923 + "Cayman Islands",
  924 + "Chad",
  925 + "Chile",
  926 + "China",
  927 + "Colombia",
  928 + "Congo",
  929 + "Cook Islands",
  930 + "Costa Rica",
  931 + "Cote D Ivoire",
  932 + "Croatia",
  933 + "Cruise Ship",
  934 + "Cuba",
  935 + "Cyprus",
  936 + "Czech Republic",
  937 + "Denmark",
  938 + "Djibouti",
  939 + "Dominica",
  940 + "Dominican Republic",
  941 + "Ecuador",
  942 + "Egypt",
  943 + "El Salvador",
  944 + "Equatorial Guinea",
  945 + "Estonia",
  946 + "Ethiopia",
  947 + "Falkland Islands",
  948 + "Faroe Islands",
  949 + "Fiji",
  950 + "Finland",
  951 + "France",
  952 + "French Polynesia",
  953 + "French West Indies",
  954 + "Gabon",
  955 + "Gambia",
  956 + "Georgia",
  957 + "Germany",
  958 + "Ghana",
  959 + "Gibraltar",
  960 + "Greece",
  961 + "Greenland",
  962 + "Grenada",
  963 + "Guam",
  964 + "Guatemala",
  965 + "Guernsey",
  966 + "Guinea",
  967 + "Guinea Bissau",
  968 + "Guyana",
  969 + "Haiti",
  970 + "Honduras",
  971 + "Hong Kong",
  972 + "Hungary",
  973 + "Iceland",
  974 + "India",
  975 + "Indonesia",
  976 + "Iran",
  977 + "Iraq",
  978 + "Ireland",
  979 + "Isle of Man",
  980 + "Israel",
  981 + "Italy",
  982 + "Jamaica",
  983 + "Japan",
  984 + "Jersey",
  985 + "Jordan",
  986 + "Kazakhstan",
  987 + "Kenya",
  988 + "Kuwait",
  989 + "Kyrgyz Republic",
  990 + "Laos",
  991 + "Latvia",
  992 + "Lebanon",
  993 + "Lesotho",
  994 + "Liberia",
  995 + "Libya",
  996 + "Liechtenstein",
  997 + "Lithuania",
  998 + "Luxembourg",
  999 + "Macau",
  1000 + "Macedonia",
  1001 + "Madagascar",
  1002 + "Malawi",
  1003 + "Malaysia",
  1004 + "Maldives",
  1005 + "Mali",
  1006 + "Malta",
  1007 + "Mauritania",
  1008 + "Mauritius",
  1009 + "Mexico",
  1010 + "Moldova",
  1011 + "Monaco",
  1012 + "Mongolia",
  1013 + "Montenegro",
  1014 + "Montserrat",
  1015 + "Morocco",
  1016 + "Mozambique",
  1017 + "Namibia",
  1018 + "Nepal",
  1019 + "Netherlands",
  1020 + "Netherlands Antilles",
  1021 + "New Caledonia",
  1022 + "New Zealand",
  1023 + "Nicaragua",
  1024 + "Niger",
  1025 + "Nigeria",
  1026 + "Norway",
  1027 + "Oman",
  1028 + "Pakistan",
  1029 + "Palestine",
  1030 + "Panama",
  1031 + "Papua New Guinea",
  1032 + "Paraguay",
  1033 + "Peru",
  1034 + "Philippines",
  1035 + "Poland",
  1036 + "Portugal",
  1037 + "Puerto Rico",
  1038 + "Qatar",
  1039 + "Reunion",
  1040 + "Romania",
  1041 + "Russia",
  1042 + "Rwanda",
  1043 + "Saint Pierre &amp; Miquelon",
  1044 + "Samoa",
  1045 + "San Marino",
  1046 + "Satellite",
  1047 + "Saudi Arabia",
  1048 + "Senegal",
  1049 + "Serbia",
  1050 + "Seychelles",
  1051 + "Sierra Leone",
  1052 + "Singapore",
  1053 + "Slovakia",
  1054 + "Slovenia",
  1055 + "South Africa",
  1056 + "South Korea",
  1057 + "Spain",
  1058 + "Sri Lanka",
  1059 + "St Kitts &amp; Nevis",
  1060 + "St Lucia",
  1061 + "St Vincent",
  1062 + "St. Lucia",
  1063 + "Sudan",
  1064 + "Suriname",
  1065 + "Swaziland",
  1066 + "Sweden",
  1067 + "Switzerland",
  1068 + "Syria",
  1069 + "Taiwan",
  1070 + "Tajikistan",
  1071 + "Tanzania",
  1072 + "Thailand",
  1073 + "Timor L'Este",
  1074 + "Togo",
  1075 + "Tonga",
  1076 + "Trinidad &amp; Tobago",
  1077 + "Tunisia",
  1078 + "Turkey",
  1079 + "Turkmenistan",
  1080 + "Turks &amp; Caicos",
  1081 + "Uganda",
  1082 + "Ukraine",
  1083 + "United Arab Emirates",
  1084 + "United Kingdom",
  1085 + "United States",
  1086 + "Uruguay",
  1087 + "Uzbekistan",
  1088 + "Venezuela",
  1089 + "Vietnam",
  1090 + "Virgin Islands (US)",
  1091 + "Yemen",
  1092 + "Zambia",
  1093 + "Zimbabwe"
404 1094 ],
405 1095 headers: [
406 1096 {
... ... @@ -411,21 +1101,48 @@ export default {
411 1101 },
412 1102 { text: "Name", value: "name", sortable: false, align: "center" },
413 1103 { text: "Email", value: "email", sortable: false, align: "center" },
414   - { text: "", value: "", sortable: false, align: "center" }
  1104 + { text: "DOB", value: "dob", sortable: false, align: "center" },
  1105 + { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
  1106 + { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
  1107 + { text: "Action", value: "", sortable: false, align: "center" }
415 1108 ],
416 1109 desserts: [],
417 1110 editedIndex: -1,
  1111 + upload:'',
418 1112 editedItem: {
419 1113 role: "TEACHER",
420 1114 name: "",
421 1115 email: "",
  1116 + date: null,
  1117 + city: "",
  1118 + pincode: "",
  1119 + country: "",
  1120 + permanentAddress: "",
  1121 + presentAddress: "",
  1122 + mobileNo: "",
  1123 + state: "",
  1124 + joinDate: null
422 1125 },
423   - defaultItem: {
  1126 + addTeachers: {
424 1127 role: "TEACHER",
425 1128 name: "",
426 1129 email: "",
  1130 + date: null,
  1131 + city: "",
  1132 + pincode: "",
  1133 + country: "",
  1134 + permanentAddress: "",
  1135 + presentAddress: "",
  1136 + mobileNo: "",
  1137 + state: "",
  1138 + joinDate: null
  1139 + },
  1140 + defaultItem: {
  1141 + role: "TEACHER",
  1142 + name: "",
  1143 + email: ""
427 1144 },
428   - userName:'',
  1145 + userName: "",
429 1146 items: [
430 1147 {
431 1148 href: "/changepassword",
... ... @@ -443,29 +1160,63 @@ export default {
443 1160 }
444 1161 ]
445 1162 }),
446   - watch: {
447   - menu (val) {
448   - val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
  1163 + watch: {
  1164 + menu(val) {
  1165 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
449 1166 },
450   - menu1 (val) {
451   - val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
  1167 + menu1(val) {
  1168 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
452 1169 }
453   - },
454   - methods: {
  1170 + },
  1171 + methods: {
  1172 + save (date) {
  1173 + this.$refs.menu.save(date)
  1174 + },
  1175 + save (date) {
  1176 + this.$refs.menu1.save(date)
  1177 + },
  1178 + pickFile() {
  1179 + this.$refs.image.click();
  1180 + },
  1181 +
  1182 + onFilePicked(e) {
  1183 + // console.log(e)
  1184 + const files = e.target.files;
  1185 + this.upload = e.target.files[0];
  1186 + console.log("imageData-upload========>",this.upload)
  1187 + if (files[0] !== undefined) {
  1188 + this.imageName = files[0].name;
  1189 + if (this.imageName.lastIndexOf(".") <= 0) {
  1190 + return;
  1191 + }
  1192 + const fr = new FileReader();
  1193 + fr.readAsDataURL(files[0]);
  1194 + fr.addEventListener("load", () => {
  1195 + this.imageUrl = fr.result;
  1196 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  1197 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  1198 + // console.log("upload=======>", this.imageData.imageUrl);
  1199 + console.log("imageFile", this.imageFile);
  1200 + });
  1201 + } else {
  1202 + this.imageName = "";
  1203 + this.imageFile = "";
  1204 + this.imageUrl = "";
  1205 + }
  1206 + },
455 1207 getTeacherList() {
456 1208 var token = this.$store.state.token;
457   - http()
458   - .get("/getTeachersList", {
459   - headers: { Authorization: "Bearer " + token }
460   - })
  1209 + http()
  1210 + .get("/getTeachersList", {
  1211 + headers: { Authorization: "Bearer " + token }
  1212 + })
461 1213 .then(response => {
462 1214 this.desserts = response.data.data;
463 1215 // console.log("getTeacherList=====>",this.desserts)
464   -
465 1216 })
466 1217 .catch(err => {
467 1218 // console.log("err====>", err);
468   - this.$router.replace({ path: '/' });
  1219 + this.$router.replace({ path: "/" });
469 1220 });
470 1221 },
471 1222 editItem(item) {
... ... @@ -478,24 +1229,23 @@ export default {
478 1229 this.editedItem = Object.assign({}, item);
479 1230 this.dialog1 = true;
480 1231 },
481   - // report(item) {
482   - // this.editedIndex = this.desserts.indexOf(item);
483   - // this.editedItem = Object.assign({}, item);
484   - // this.dialog2 = true;
485   - // },
486   -
487 1232 deleteItem(item) {
488 1233 let deleteTeachers = {
489 1234 teacherId: item._id
490 1235 };
491 1236 // console.log("deleteUers",deleteTeachers)
492 1237 http()
493   - .delete("/deleteTeacher", confirm('Are you sure you want to delete this?') && { params: deleteTeachers })
  1238 + .delete(
  1239 + "/deleteTeacher",
  1240 + confirm("Are you sure you want to delete this?") && {
  1241 + params: deleteTeachers
  1242 + }
  1243 + )
494 1244 .then(response => {
495 1245 // console.log("deleteUers",deleteTeachers)
496 1246 if ((this.snackbar = true)) {
497 1247 this.text = "Successfully delete Existing User";
498   - }
  1248 + }
499 1249 this.getTeacherList();
500 1250 })
501 1251 .catch(error => {
... ... @@ -515,37 +1265,9 @@ export default {
515 1265 break;
516 1266 }
517 1267 },
518   - // activebtn(type) {
519   - // switch (type) {
520   - // case "existing":
521   - // this.Activebtn3 = false;
522   - // this.Activebtn2 = false;
523   - // this.Activebtn1 = false;
524   - // this.isActivebtn = true;
525   - // break;
526   - // case "new":
527   - // this.Activebtn3 = false;
528   - // this.Activebtn2 = false;
529   - // this.Activebtn1 = true;
530   - // this.isActivebtn = false;
531   - // break;
532   - // case "new1":
533   - // this.Activebtn3 = false;
534   - // this.Activebtn2 = true;
535   - // this.Activebtn1 = false;
536   - // this.isActivebtn = false;
537   - // break;
538   - // default:
539   - // this.Activebtn3 = true;
540   - // this.Activebtn2 = false;
541   - // this.Activebtn1 = false;
542   - // this.isActivebtn = false;
543   - // break;
544   - // }
545   - // },
546 1268 close() {
547 1269 this.dialog = false;
548   - setTimeout(() => {
  1270 + setTimeout(() => {
549 1271 this.editedItem = Object.assign({}, this.defaultItem);
550 1272 this.editedIndex = -1;
551 1273 }, 300);
... ... @@ -553,59 +1275,92 @@ export default {
553 1275 close1() {
554 1276 this.dialog1 = false;
555 1277 },
556   - close2() {
557   - this.dialog2 = false;
558   - },
  1278 + // close2() {
  1279 + // this.dialog2 = false;
  1280 + // },
559 1281 submit() {
560 1282 if (this.$refs.form.validate()) {
  1283 + let images = new FormData();
  1284 + images.append("upload", this.imageFile);
  1285 + console.log(images);
  1286 + // var form_data = new FormData();
  1287 + // for (var key in addTeacher) {
  1288 + // if (key === 'upload') {
  1289 + // form_data.append(key, this.imageFile);
  1290 + // } else {
  1291 + // form_data.append(key, addTeacher[key])
  1292 + // }
  1293 + // }
  1294 + console.log("images",images)
561 1295 let addTeacher = {
562   - name: this.editedItem.name,
563   - email: this.editedItem.email,
564   - role: this.editedItem.role
  1296 + name: this.addTeachers.name,
  1297 + email: this.addTeachers.email,
  1298 + role: this.addTeachers.role,
  1299 + dob: this.addTeachers.date,
  1300 + city: this.addTeachers.city,
  1301 + pincode: this.addTeachers.pincode,
  1302 + country: this.addTeachers.country,
  1303 + permanentAddress: this.addTeachers.permanentAddress,
  1304 + presentAddress: this.addTeachers.presentAddress,
  1305 + mobileNo: this.addTeachers.mobileNo,
  1306 + state: this.addTeachers.state,
  1307 + joinDate: this.addTeachers.joinDate,
  1308 + images
  1309 + // upload:this.imageFile
565 1310 };
566   - // console.log("addTeacher",addTeacher)
  1311 + // console.log("addTeacher============>", addTeacher);
567 1312 http()
568 1313 .post("/createTeacher", addTeacher)
569 1314 .then(response => {
  1315 + console.log("addTeacher", addTeacher);
570 1316 this.getTeacherList();
571   - if (this.snackbar = true) {
  1317 + if ((this.snackbar = true)) {
572 1318 this.text = "New user added successfully";
573 1319 }
574   -
575   - this.clear();
  1320 +
  1321 + this.clear();
576 1322 })
577 1323 .catch(error => {
578 1324 // console.log(error);
579   - if (this.snackbar = true) {
580   - this.text = error.response.data.message;
581   - }
  1325 + if ((this.snackbar = true)) {
  1326 + this.text = error.response.data.message;
  1327 + }
582 1328 });
583 1329 }
584 1330 },
585   - mail() {
586   - },
587   - download() {
588   - },
  1331 + mail() {},
  1332 + download() {},
589 1333 clear() {
590 1334 this.$refs.form.reset();
591 1335 },
592 1336 save() {
593 1337 let editTeacher = {
  1338 + teacherId: this.editedItem._id,
594 1339 name: this.editedItem.name,
595 1340 email: this.editedItem.email,
596   - teacherId: this.editedItem._id
  1341 + role: this.editedItem.role,
  1342 + dob: this.editedItem.date,
  1343 + city: this.editedItem.city,
  1344 + pincode: this.editedItem.pincode,
  1345 + country: this.editedItem.country,
  1346 + permanentAddress: this.editedItem.permanentAddress,
  1347 + presentAddress: this.editedItem.presentAddress,
  1348 + mobileNo: this.editedItem.mobileNo,
  1349 + state: this.editedItem.state,
  1350 + joinDate: this.editedItem.joinDate,
  1351 + // imageData,
597 1352 };
598 1353 http()
599 1354 .put("/updateTeacher", editTeacher)
600 1355 .then(response => {
601   - // console.log("editTeacher",editTeacher);
  1356 + console.log("editTeacher",editTeacher);
602 1357 if ((this.snackbar = true)) {
603 1358 this.text = "Successfully Edit Existing User";
604 1359 }
605   - this.getTeacherList();
  1360 + this.getTeacherList();
606 1361 })
607 1362 .catch(error => {
608   - // console.log(error);
  1363 + console.log(error);
609 1364 });
610 1365 this.close();
611 1366 },
... ... @@ -619,9 +1374,9 @@ export default {
619 1374 mounted() {
620 1375 this.getTeacherList();
621 1376 // console.log("Id",this.$store.state.id)
622   - // console.log("token",this.$store.state.token)
  1377 + // console.log("token",this.$store.state.token)
623 1378 },
624   - computed:{
  1379 + computed: {
625 1380 toolbarColor() {
626 1381 return this.$vuetify.options.extra.mainNav;
627 1382 }
... ... @@ -630,18 +1385,18 @@ export default {
630 1385 </script>
631 1386 <style scoped>
632 1387 .v-tabs__div {
633   - text-transform: none;
  1388 + text-transform: none;
634 1389 }
635 1390 .v-input__prepend-outer {
636   - margin-right: 0px !important;
  1391 + margin-right: 0px !important;
637 1392 }
638 1393 .v-card__actions .v-btn {
639 1394 margin: 0 15px;
640 1395 min-width: 120px;
641 1396 }
642   - .primary {
643   - background-color: #aaa !important;
644   - border-color: #aaa !important;
  1397 +.primary {
  1398 + background-color: #aaa !important;
  1399 + border-color: #aaa !important;
645 1400 }
646 1401 h4 {
647 1402 background-repeat: no-repeat;
... ... @@ -706,51 +1461,48 @@ h4 {
706 1461 #flex {
707 1462 height: 300px;
708 1463 }
709   -.top{
710   - margin-top:100px;
711   -}
712   -.v-tabs__item a{
713   - font-size:16px !important;
  1464 +.v-tabs__item a {
  1465 + font-size: 16px !important;
714 1466 }
715   -@media screen and (max-width: 769px){
716   - .top{
717   - margin-top:0 !important;
718   - }
  1467 +@media screen and (max-width: 769px) {
  1468 + .top {
  1469 + margin-top: 0 !important;
  1470 + }
719 1471 .userSearch .v-icon {
720 1472 font-size: 20px !important;
721   - margin-left: 20px ;
  1473 + margin-left: 20px;
722 1474 }
723 1475 }
724 1476 @media screen and (max-width: 380px) {
725   -.right {
  1477 + .right {
726 1478 float: none !important;
727   -}
728   -.subheading {
  1479 + }
  1480 + .subheading {
729 1481 font-size: 14px !important;
730   -}
731   -.v-card__actions .v-btn{
  1482 + }
  1483 + .v-card__actions .v-btn {
732 1484 margin: 0 0px;
733 1485 min-width: 100px;
734   -}
735   -/* .searchIcon .v-icon {
  1486 + }
  1487 + /* .searchIcon .v-icon {
736 1488 font-size: 20px;
737 1489 margin-left: 20px;
738 1490 } */
739   -.subheading {
  1491 + .subheading {
740 1492 font-size: 12px !important;
741   -}
742   -h5 {
  1493 + }
  1494 + h5 {
743 1495 font-size: 13px;
  1496 + }
744 1497 }
  1498 +.v-icon {
  1499 + font-size: 30px;
745 1500 }
746   -.v-icon{
747   - font-size:30px;
748   -}
749   -@media screen and (min-width: 1270px){
750   -.hide{
751   - display: none;
752   -}
753   -/* }
  1501 +@media screen and (min-width: 1270px) {
  1502 + .hide {
  1503 + display: none;
  1504 + }
  1505 + /* }
754 1506 @media screen and (max-width: 962px) {
755 1507 .imglogo{
756 1508 position: absolute;
... ... @@ -760,19 +1512,19 @@ h5 {
760 1512 height: 24px;
761 1513 } */
762 1514 }
763   -@media screen and (max-width: 420px){
764   -.userSearch .v-text-field .v-label{
765   - line-height: 24px !important;
766   -}
767   -.userSearch .v-label{
768   - font-size: 13px !important;
769   -}
770   -.v-list__tile {
771   - font-size:14px;
772   - padding: 0 10px;
773   -}
774   -.name{
775   - font-size:15px;
776   -}
  1515 +@media screen and (max-width: 420px) {
  1516 + .userSearch .v-text-field .v-label {
  1517 + line-height: 24px !important;
  1518 + }
  1519 + .userSearch .v-label {
  1520 + font-size: 13px !important;
  1521 + }
  1522 + .v-list__tile {
  1523 + font-size: 14px;
  1524 + padding: 0 10px;
  1525 + }
  1526 + .name {
  1527 + font-size: 15px;
  1528 + }
777 1529 }
778 1530 </style>
779 1531 \ No newline at end of file
... ...