From b82d0d998b496b44f909ec0fb03a28ccb6bb7edc Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Thu, 28 Mar 2019 12:04:03 +0530
Subject: [PATCH] changes and modified in students and techers

---
 src/pages/Students/students.vue | 1996 +++++++++++++++++++++++++++++----------
 1 file changed, 1518 insertions(+), 478 deletions(-)

diff --git a/src/pages/Students/students.vue b/src/pages/Students/students.vue
index d948298..7096134 100644
--- a/src/pages/Students/students.vue
+++ b/src/pages/Students/students.vue
@@ -1,382 +1,1091 @@
 <template>
-<v-app id="pages-dasboard">
- <v-toolbar
-    color="grey"
-    fixed
-    app
-  >
-  <v-toolbar-title class="ml-0 pl-3">
-   <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
-    </v-toolbar-title>
-<!-- ****** SEARCH ALL EXISTING StudentS ****** -->
-    <v-flex xs7 sm3 class="userSearch">
-      <v-text-field
-        flat
-        prepend-icon="search"
-        label="Find your Teachers"
-        v-model="search"
-        color="black"
-        @change="getStudentList"
-      >
-      </v-text-field>
-    </v-flex>
+  <v-app id="pages-dasboard">
+    <v-toolbar class="fixcolors" fixed app>
+      <v-toolbar-title class="ml-0 pl-3">
+        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
+      </v-toolbar-title>
+      <!-- ****** SEARCH ALL EXISTING StudentS ****** -->
+      <v-flex xs7 sm3 class="userSearch">
+        <v-text-field
+          flat
+          append-icon="search"
+          label="Find your Students"
+          v-model="search"
+          color="white"
+          dark
+        ></v-text-field>
+      </v-flex>
       <v-spacer></v-spacer>
       <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
-     <v-btn icon large flat slot="activator">
+        <v-btn icon large flat slot="activator">
           <v-avatar size="40px">
-           <img src="/static/icon/user.png"/>
+            <img src="/static/icon/user.png">
           </v-avatar>
-      </v-btn>
+        </v-btn>
         <v-list class="pa-0">
-          <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">
-             <v-list-tile-action v-if="item.icon">
+          <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"
+          >
+            <v-list-tile-action v-if="item.icon">
               <v-icon>{{ item.icon }}</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ item.title }}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
-        </v-list> 
+        </v-list>
       </v-menu>
-  </v-toolbar>
-  <v-tabs grow slider-color="black">
-    <v-tab
-      ripple
-      @click="activeTab('existing')"
-      v-bind:class="{ active: isActive }"
-      id="tab"
-      class="subheading"
-    >Existing Students</v-tab>
-    <v-tab
-      ripple
-      @click="activeTab('new')"
-      v-bind:class="{ active: newActive }"
-      id="tab1"User
-      class="subheading"
-    >Add New Students</v-tab>
-<!-- ****** EDITS  StudentS Dtails ****** -->
-    <v-tab-item>
-      <v-snackbar
-        :timeout="timeout"
-        :top="y === 'top'"
-        :right="x === 'right'"
-        :vertical="mode === 'vertical'"
-        v-model="snackbar"
-        color="success"
-      >{{ text }}</v-snackbar>
-      <v-dialog v-model="dialog" max-width="500px">
-        <v-toolbar color="white">
-          <v-spacer></v-spacer>
-          <v-toolbar-title>Edit Profile</v-toolbar-title>
-          <v-spacer></v-spacer>
-        </v-toolbar>
-        <v-card>
-         <!--  <v-flex align-center justify-center layout text-xs-center>
-            <v-avatar size="50px" style="position:absolute; top:10px; ">
-              <img src="/static/icon/user.png">
-            </v-avatar>
-          </v-flex> -->
-          <v-card-text>
-            <v-container>
-              <v-layout wrap justify-center>
-                <v-flex xs12 sm9>
-                  <v-form ref="form" v-model="valid" lazy-validation>
-                    <v-layout style="position:relative;">
-                      <v-flex xs4 class="pt-4 subheading">
-                        <label>Full Name:</label>
+    </v-toolbar>
+    <v-tabs grow slider-color="black">
+      <v-tab
+        ripple
+        @click="activeTab('existing')"
+        v-bind:class="{ active: isActive }"
+        id="tab"
+        class="subheading"
+      >Existing Students</v-tab>
+      <v-tab
+        ripple
+        @click="activeTab('new')"
+        v-bind:class="{ active: newActive }"
+        id="tab1"
+        User
+        class="subheading"
+      >Add New Students</v-tab>
+
+      <!-- ****** EDITS  STUDENTS DETAILS ****** -->
+
+      <v-tab-item>
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          color="success"
+        >{{ text }}</v-snackbar>
+        <v-dialog v-model="dialog" max-width="1000px">
+          <v-flex xs12 sm12 class="">
+            <v-toolbar color="white">
+              <v-spacer></v-spacer>
+              <v-toolbar-title>Edit Profile</v-toolbar-title>
+              <v-spacer></v-spacer>
+            </v-toolbar>
+            <v-card flat>
+              <v-form ref="form">
+                <v-container fluid>
+                  <v-layout>
+                    <v-flex
+                      xs12
+                      class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
+                    >
+                      <v-avatar size="100px">
+                        <img src="/static/icon/user.png" v-if="!imageUrl">
+                      </v-avatar>
+                      <input
+                        type="file"
+                        style="display: none"
+                        ref="image"
+                        accept="image/*"
+                        @change="onFilePicked"
+                      >
+                      <img
+                        :src="imageData.imageUrl"
+                        height="150"
+                        v-if="imageUrl"
+                        style="border-radius:50%; width:200px"
+                      >
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Class:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addclass"
+                            label="Select Class"
+                            v-model="editedItem.select"
+                            item-text="classNum"
+                            item-value="_id"
+                            name="Select Class"
+                            @change="getSections(editedItem.select)"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Section:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addSection"
+                            label="Select Section"
+                            v-model="editedItem.selectSection"
+                            item-text="name"
+                            item-value="_id"
+                            name="Select Section"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Full Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.name"
+                            placeholder="fill your full Name"
+                            name="name"
+                            type="text"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Email ID:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            placeholder="fill your email"
+                            v-model="editedItem.email"
+                            type="text"
+                            name="email"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Date of Birth:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-menu
+                            ref="menu"
+                            :close-on-content-click="false"
+                            v-model="menu1"
+                            :nudge-right="40"
+                            lazy
+                            transition="scale-transition"
+                            offset-y
+                            full-width
+                            min-width="290px"
+                          >
+                            <v-text-field
+                              slot="activator"
+                              v-model="editedItem.date"
+                              placeholder="Select date"
+                            ></v-text-field>
+                            <v-date-picker
+                              ref="picker"
+                              v-model="editedItem.date"
+                              :max="new Date().toISOString().substr(0, 10)"
+                              min="1950-01-01"
+                              @input="menu1 = false"
+                            ></v-date-picker>
+                          </v-menu>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">City:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.city"
+                            placeholder="fill your City Name"
+                            name="City"
+                            type="text"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">State:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.state"
+                            placeholder="fill your State Name"
+                            name="state"
+                            type="text"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Pincode:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.pincode"
+                            placeholder="fill your pincode"
+                            name="pincode"
+                            type="number"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mobile No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.mobile"
+                            placeholder="fill your MobileNo"
+                            name="mobileNo"
+                            type="number"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Country:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-autocomplete
+                            v-model="editedItem.country"
+                            :items="countries"
+                            placeholder="Select Country Name"
+                            required
+                          ></v-autocomplete>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Gender:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="gender"
+                            v-model="editedItem.gender"
+                            label="Select Gender"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Father Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.fatherName"
+                            :items="countries"
+                            placeholder="Fill your father Name"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Father Cell No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.fatherCellNo"
+                            placeholder="fill your father Cell Number"
+                            name="state"
+                            type="number"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mother Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.motherName"
+                            placeholder="fill your Mother Name"
+                            name="state"
+                            type="text"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mother Cell No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.motherCellNo"
+                            placeholder="fill your  Mother Cell Number"
+                            name="state"
+                            type="number"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Academic Year:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.establishmentYear"
+                            placeholder="fill your Mother Name"
+                            name="state"
+                            type="number"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Uplaod Image:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            label="Select Image"
+                            @click="pickFile"
+                            v-model="imageName"
+                            prepend-icon="attach_file"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Present Address:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
+                          <label>Permanent Address:</label>
+                        </v-flex>
+                        <v-flex xs12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="editedItem.permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                     <v-card-actions>
+                      <v-btn round dark @click.native="close">Cancel</v-btn>
+                      <v-spacer></v-spacer>
+                      <v-btn round dark @click="save">Save</v-btn>
+                    </v-card-actions>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-form>
+            </v-card>
+          </v-flex>
+        </v-dialog>
+
+        <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
+        <v-dialog v-model="dialog1" max-width="600px">
+          <v-toolbar color="white">
+            <v-spacer></v-spacer>
+            <v-toolbar-title>Profile</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-icon @click="close1">close</v-icon>
+          </v-toolbar>
+          <v-card>
+            <v-flex align-center justify-center layout text-xs-center>
+              <v-avatar size="50px" style="position:absolute; top:20px;">
+                <img src="/static/icon/user.png">
+              </v-avatar>
+            </v-flex>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex>
+                    <br>
+                    <br>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Full Name:</h5>
                       </v-flex>
-                      <v-flex xs8>
-                        <v-text-field
-                          v-model="editedItem.name"
-                          v-validate="'required'"
-                          :rules="nameRules"
-                          data-vv-name="Name"
-                          required
-                        ></v-text-field>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
-                     <v-layout>
-                      <v-flex xs4 class="pt-4 subheading">
-                        <label>Email No.:</label>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Email:</h5>
                       </v-flex>
-                      <v-flex xs8>
-                        <v-text-field
-                          v-model="editedItem.email"
-                          required
-                        ></v-text-field>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.email }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs4 class="pt-4 subheading">
-                        <label>Mobile No.:</label>
+                      <v-flex xs6 sm6>
+                        <h5 class="right my-1">Gender:</h5>
                       </v-flex>
-                      <v-flex xs8>
-                        <v-text-field
-                          v-model="editedItem.mobile"
-                          required
-                        ></v-text-field>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.gender }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">City:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.city }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">State:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.state }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Country:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.country }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Pincode:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                      <v-layout>
-                       <v-flex xs4 class="pt-4 subheading">
-                        <label>Date of Birth:</label>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Mobile No:</h5>
                       </v-flex>
-                      <v-flex xs8>
-                      <v-menu
-                         ref="menu1"
-                         :close-on-content-click="false"
-                         v-model="menu1"
-                         :nudge-right="40"
-                         lazy
-                         transition="scale-transition"
-                         offset-y
-                         full-width
-                         min-width="290px"
-                       >
-                       <v-text-field
-                        slot="activator"
-                        v-model="editedItem.dob"
-                        placeholder="Select date"
-                       ></v-text-field>
-                       <v-date-picker
-                        ref="picker"
-                        v-model="editedItem.dob"
-                        :max="new Date().toISOString().substr(0, 10)"
-                        min="1950-01-01"
-                        @input="menu1 = false"
-                        ></v-date-picker>
-                        </v-menu>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.mobile }}</h5>
                       </v-flex>
                     </v-layout>
-                    <v-card-actions>
-                      <v-btn round dark @click.native="close">Cancel</v-btn>
-                      <v-spacer></v-spacer>
-                      <v-btn round dark @click="save">Save</v-btn>
-                    </v-card-actions>
-                  </v-form>
-                </v-flex>
-              </v-layout>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </v-dialog>
-
-<!-- ****** PROFILE VIEW StudentS Details ******  -->
-
-      <v-dialog v-model="dialog1" max-width="600px">
-        <v-toolbar color="white">
-          <v-spacer></v-spacer>
-          <v-toolbar-title>Profile</v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-icon @click="close1">close</v-icon>
-        </v-toolbar>
-        <v-card>
-          <v-flex align-center justify-center layout text-xs-center>
-            <v-avatar size="50px" style="position:absolute; top:20px;">
-              <img src="/static/icon/user.png">
-            </v-avatar>
-          </v-flex>
-          <v-card-text>
-            <v-container grid-list-md>
-              <v-layout wrap>
-                <v-flex><br><br>
-                   <v-layout>
-                     <v-flex xs5 sm6>
-                     <h5 class="right my-1">Full Name:</h5>
-                    </v-flex>
-                    <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.name }}</h5>
-                  </v-flex>
-                 </v-layout>
-                  <v-layout>
-                     <v-flex xs5 sm6>
-                     <h5 class="right my-1">Email:</h5>
-                    </v-flex>
-                    <v-flex  sm6 xs8>
-                     <h5 class="my-1">{{ editedItem.email }}</h5>
-                  </v-flex>
-                 </v-layout>
-                  <v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Academic Year:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Fahter Name:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.fatherName }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Mother Name:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.motherName }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Father Cell No:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Mother Cell No:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Date Of Birth:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.dob }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
                      <v-flex xs6 sm6 >
-                     <h5 class="right my-1">Mobile No. :</h5>
+                     <h5 class="right my-1">Permanent Address:</h5>
                     </v-flex>
                     <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.mobile }}</h5>
+                    <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
-                 </v-layout>
-                  <v-layout>
+                    </v-layout>
+                    <v-layout>
                      <v-flex xs6 sm6 >
-                     <h5 class="right my-1">Date Of Birth:</h5>
+                     <h5 class="right my-1">present Address:</h5>
                     </v-flex>
                     <v-flex sm6 xs8>
-                    <h5 class="my-1">{{ editedItem.dob }}</h5>
+                    <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
-                 </v-layout>
-                </v-flex>
-              </v-layout>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </v-dialog>
-
-      <v-snackbar
-        :timeout="timeout"
-        :top="y === 'top'"
-        :right="x === 'right'"
-        :vertical="mode === 'vertical'"
-        v-model="snackbar"
-        color="success"
-      >{{ text }}</v-snackbar>
-
-<!-- ****** EXISTING-USERS StudentS Table ****** -->
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+        </v-dialog>
 
-      <v-data-table 
-      :headers="headers" 
-      :items="desserts" 
-      :pagination.sync="pagination"
-      :search="search"
-      >    
-        <template slot="items" slot-scope="props">
-          <td id="td" class="text-xs-center">{{ props.index}}</td>
-          <td id="td" class="text-xs-center">{{ props.item.name}}</td>
-          <!-- <td id="td" class="text-xs-center">{{ props.item.dob }}</td> -->
-          <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          color="success"
+        >{{ text }}</v-snackbar>
 
-          <td class="text-xs-center">
-            <span>
-              <img
-                style="cursor:pointer; width:25px; height:18px; "
-                class="mr-5"
-                @click="profile(props.item)"
-                src="/static/icon/eye1.png"
-              >
-              <img
-                style="cursor:pointer; width:20px; height:18px; "
-                class="mr-5"
-                @click="editItem(props.item)"
-                src="/static/icon/edit1.png"
-              >
-              <img
-                style="cursor:pointer; height:20px; "
-                class="mr-5"
-                @click="deleteItem(props.item)"
-                src="/static/icon/delete1.png"
-              >
-            </span>
-          </td>
-        </template>
-        <v-alert
-          slot="no-results"
-          :value="true"
-          color="error"
-          icon="warning"
-        >Your search for "{{ search }}" found no results.</v-alert>
-      </v-data-table>
-    </v-tab-item>
+       <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
+        <v-data-table
+          :headers="headers"
+          :items="desserts"
+          :pagination.sync="pagination"
+          :search="search"
+        >
+          <template slot="items" slot-scope="props">
+            <td id="td" class="text-xs-center">{{ props.index}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.email }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
+            <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
 
-<!-- ****** ADD multiple Students ****** -->
+            <td class="text-xs-center">
+              <span>
+                <img
+                  style="cursor:pointer; width:25px; height:18px; "
+                  class="mr-5"
+                  @click="profile(props.item)"
+                  src="/static/icon/eye1.png"
+                >
+                <img
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-5"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit1.png"
+                >
+                <img
+                  style="cursor:pointer; height:20px; "
+                  class="mr-5"
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete1.png"
+                >
+              </span>
+            </td>
+          </template>
+          <v-alert
+            slot="no-results"
+            :value="true"
+            color="error"
+            icon="warning"
+          >Your search for "{{ search }}" found no results.</v-alert>
+        </v-data-table>
+      </v-tab-item>
 
-    <v-tab-item>
-      <v-container>
-       <v-snackbar
-         :timeout="timeout"
-         :top="y === 'top'"
-         :right="x === 'right'"
-         :vertical="mode === 'vertical'"
-         v-model="snackbar"
-         color="success"
-        >{{ text }}</v-snackbar>
-      <v-flex xs12 sm8 offset-sm2 class="top">
-        <v-card flat>
-          <v-container fluid fill-height>
-            <v-layout align-center>
-              <v-flex xs12>
-                <v-flex offset-xs5>
-                  <v-avatar size="55px">
-                    <img src="/static/icon/user.png">
-                  </v-avatar>
-                </v-flex>
-                <v-form ref="form" v-model="valid" lazy-validation>
+      <!-- ****** ADD MULTIPLE STUDENTS ****** -->
+      
+      <v-tab-item>
+        <v-container>
+          <v-snackbar
+            :timeout="timeout"
+            :top="y === 'top'"
+            :right="x === 'right'"
+            :vertical="mode === 'vertical'"
+            v-model="snackbar"
+            color="success"
+          >{{ text }}</v-snackbar>
+          <v-flex xs12 sm12 class="my-4">
+            <v-card flat>
+              <v-form ref="form" v-model="valid" lazy-validation>
+                <v-container fluid>
                   <v-layout>
-                    <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">Full Name:</label>
-                    </v-flex>
-                    <v-flex xs6 class="ml-3">
-                      <v-text-field
-                        v-model="editedItem.name"
-                        placeholder="fill your full Name"
-                        name="name"
-                        type="text"
-                        :rules="nameRules"
-                        required
-                      ></v-text-field>
+                    <v-flex
+                      xs12
+                      class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
+                    >
+                      <v-avatar size="100px">
+                        <img src="/static/icon/user.png" v-if="!imageUrl">
+                      </v-avatar>
+                      <input
+                        type="file"
+                        style="display: none"
+                        ref="image"
+                        accept="image/*"
+                        @change="onFilePicked"
+                      >
+                      <img
+                        :src="imageData.imageUrl"
+                        height="150"
+                        v-if="imageUrl"
+                        style="border-radius:50%; width:200px"
+                      >
                     </v-flex>
                   </v-layout>
                   <v-layout>
-                    <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">Email ID:</label>
-                    </v-flex>
-                    <v-flex xs6 class="ml-3">
-                      <v-text-field
-                        placeholder="fill your email"
-                        :rules="emailRules"
-                        v-model="editedItem.email"
-                        type="text"
-                        name="email"
-                        required
-                      ></v-text-field>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Class:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addclass"
+                            label="Select Class"
+                            v-model="addStudents.select"
+                            item-text="classNum"
+                            item-value="_id"
+                            name="Select Class"
+                            :rules="classRules"
+                            @change="getSections(addStudents.select)"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Section:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addSection"
+                            label="Select Section"
+                            v-model="addStudents.selectSection"
+                            item-text="name"
+                            item-value="_id"
+                            name="Select Section"
+                            :rules="classRules"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
-                  <!-- <v-layout>
-                    <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">Date of Birth:</label>
-                    </v-flex>
-                    <v-flex xs6 class="ml-3">
-                       <v-menu
-                         ref="menu"
-                         :close-on-content-click="false"
-                         v-model="menu"
-                         :nudge-right="40"
-                         lazy
-                         transition="scale-transition"
-                         offset-y
-                         full-width
-                         min-width="290px"
-                        >
-                       <v-text-field
-                        slot="activator"
-                        v-model="editedItem.date"
-                        placeholder="Select date"
-                       ></v-text-field>
-                       <v-date-picker
-                        ref="picker"
-                        v-model="editedItem.date"
-                        :max="new Date().toISOString().substr(0, 10)"
-                        min="1950-01-01"
-                        @input="menu = false"
-                        ></v-date-picker>
-                        </v-menu>
-                       </v-flex>
-                     </v-layout> -->
-                    <v-layout>
-                      <v-flex xs12 sm9 offset-sm2>
-                    <v-card-actions>
-                    <v-btn @click="clear" round dark>clear</v-btn>
-                    <v-spacer></v-spacer>
-                    <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
-                   </v-card-actions>
-                   </v-flex>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Full Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.name"
+                            placeholder="fill your full Name"
+                            name="name"
+                            type="text"
+                            :rules="nameRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Email ID:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            placeholder="fill your email"
+                            :rules="emailRules"
+                            v-model="addStudents.email"
+                            type="text"
+                            name="email"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
                   </v-layout>
-                </v-form>
-              </v-flex>
-            </v-layout>
-          </v-container>
-        </v-card>
-      </v-flex>
-     </v-container>
-   </v-tab-item>
-  </v-tabs>
-</v-app>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Date of Birth:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-menu
+                            ref="menu"
+                            :close-on-content-click="false"
+                            v-model="menu"
+                            :nudge-right="40"
+                            lazy
+                            transition="scale-transition"
+                            offset-y
+                            full-width
+                            min-width="290px"
+                          >
+                            <v-text-field
+                              slot="activator"
+                              :rules="dateRules"
+                              v-model="addStudents.date"
+                              placeholder="Select date"
+                            ></v-text-field>
+                            <v-date-picker
+                              ref="picker"
+                              v-model="addStudents.date"
+                              :max="new Date().toISOString().substr(0, 10)"
+                              min="1950-01-01"
+                              @input="menu = false"
+                            ></v-date-picker>
+                          </v-menu>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">City:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.city"
+                            placeholder="fill your City Name"
+                            name="City"
+                            type="text"
+                            :rules="cityRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">State:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.state"
+                            placeholder="fill your State Name"
+                            name="state"
+                            type="text"
+                            :rules="stateRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Pincode:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.pincode"
+                            placeholder="fill your pincode"
+                            name="pincode"
+                            type="number"
+                            :rules="pincode"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mobile No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.mobile"
+                            placeholder="fill your MobileNo"
+                            name="mobileNo"
+                            type="number"
+                            :rules="mobileNoRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Country:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-autocomplete
+                            v-model="addStudents.country"
+                            :rules="country"
+                            :items="countries"
+                            placeholder="Select Country Name"
+                            required
+                          ></v-autocomplete>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Gender:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="gender"
+                            v-model="addStudents.gender"
+                            :rules="genderRules"
+                            label="Select Gender"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Father Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.fatherName"
+                            :rules="fatherNameRules"
+                            :items="countries"
+                            placeholder="Fill your father Name"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Father Cell No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.fatherCellNo"
+                            placeholder="fill your father Cell Number"
+                            name="state"
+                            type="number"
+                            :rules="fatheCellNoRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mother Name:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.motherName"
+                            placeholder="fill your Mother Name"
+                            name="state"
+                            type="text"
+                            :rules="motherNameRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Mother Cell No:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.motherCellNo"
+                            placeholder="fill your  Mother Cell Number"
+                            name="state"
+                            type="number"
+                            :rules="motherCellNoRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Academic Year:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            v-model="addStudents.establishmentYear"
+                            placeholder="fill your Mother Name"
+                            name="state"
+                            type="number"
+                            :rules="establishmentYearRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Uplaod Image:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            label="Select Image"
+                            @click="pickFile"
+                            v-model="imageName"
+                            prepend-icon="attach_file"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
+                          <label class>Present Address:</label>
+                        </v-flex>
+                        <v-flex xs12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="addStudents.presentAddress"
+                            :rules="presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
+                          <label>Permanent Address:</label>
+                        </v-flex>
+                        <v-flex xs12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="addStudents.permanentAddress"
+                            :rules="permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                      <v-card-actions>
+                        <v-btn @click="clear" round dark>clear</v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
+                      </v-card-actions>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-form>
+            </v-card>
+          </v-flex>
+        </v-container>
+      </v-tab-item>
+    </v-tabs>
+  </v-app>
 </template>
 
 <script>
@@ -392,41 +1101,256 @@ export default {
     timeout: 3000,
     text: "",
     loading: false,
-    date:null,
-    search: '',
-    modal: false,
-    modaledit:false,
+    date: null,
+    search: "",
     menu: false,
-    menu1:false,
+    menu1: false,
     dialog: false,
     dialog1: false,
-    dialog2: false,
     valid: true,
     isActive: true,
     newActive: false,
-    loader: null,
-    loading: false,
-    loading2: false,
-    loading3: false,
-    loading4: false,
-    details: [],
+    addclass: [],
+    addSection: [],
+    gender: ["Male", "Female"],
     AddUsercredentials: {},
     pagination: {
       rowsPerPage: 15
     },
-    // rules: {
-    //   required: value => !!value || "Date of Birth is Required.",
-    //   min: v =>
-    //     (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
-    //       v
-    //     ) &&
-    //       v.length > 0) ||
-    //     "Please enter a date in the format dd/mm/yyyy"
-    // },
+    imageData: {},
+    imageName: "",
+    imageUrl: "",
+    imageFile: "",
     nameRules: [v => !!v || " Full Name is required"],
+    dateRules: [v => !!v || " DOB is required"],
+    cityRules: [v => !!v || " City Name is required"],
+    pincode: [v => !!v || " Pincode is required"],
+    country: [v => !!v || " Country Name is required"],
+    permanentAddress: [v => !!v || " Permanent Address is required"],
+    presentAddress: [v => !!v || " Present Address  is required"],
+    mobileNoRules: [v => !!v || "Mobile Number is required"],
+    stateRules: [v => !!v || "State Name is required"],
+    classRules: [v => !!v || " Class Name is required"],
+    genderRules: [v => !!v || " Select Gender is required"],
+    fatherNameRules: [v => !!v || " Father Name is required"],
+    fatheCellNoRules: [v => !!v || " father Cell Number  is required"],
+    motherNameRules: [v => !!v || " Mother Name  is required"],
+    motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
+    establishmentYearRules: [v => !!v || " Academic Year  is required"],
+    errorMessages: "",
     emailRules: [
       v => !!v || "E-mail is required",
-       v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
+      v =>
+        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+        "E-mail must be valid"
+    ],
+    countries: [
+      "Afghanistan",
+      "Albania",
+      "Algeria",
+      "Andorra",
+      "Angola",
+      "Anguilla",
+      "Antigua &amp; Barbuda",
+      "Argentina",
+      "Armenia",
+      "Aruba",
+      "Australia",
+      "Austria",
+      "Azerbaijan",
+      "Bahamas",
+      "Bahrain",
+      "Bangladesh",
+      "Barbados",
+      "Belarus",
+      "Belgium",
+      "Belize",
+      "Benin",
+      "Bermuda",
+      "Bhutan",
+      "Bolivia",
+      "Bosnia &amp; Herzegovina",
+      "Botswana",
+      "Brazil",
+      "British Virgin Islands",
+      "Brunei",
+      "Bulgaria",
+      "Burkina Faso",
+      "Burundi",
+      "Cambodia",
+      "Cameroon",
+      "Cape Verde",
+      "Cayman Islands",
+      "Chad",
+      "Chile",
+      "China",
+      "Colombia",
+      "Congo",
+      "Cook Islands",
+      "Costa Rica",
+      "Cote D Ivoire",
+      "Croatia",
+      "Cruise Ship",
+      "Cuba",
+      "Cyprus",
+      "Czech Republic",
+      "Denmark",
+      "Djibouti",
+      "Dominica",
+      "Dominican Republic",
+      "Ecuador",
+      "Egypt",
+      "El Salvador",
+      "Equatorial Guinea",
+      "Estonia",
+      "Ethiopia",
+      "Falkland Islands",
+      "Faroe Islands",
+      "Fiji",
+      "Finland",
+      "France",
+      "French Polynesia",
+      "French West Indies",
+      "Gabon",
+      "Gambia",
+      "Georgia",
+      "Germany",
+      "Ghana",
+      "Gibraltar",
+      "Greece",
+      "Greenland",
+      "Grenada",
+      "Guam",
+      "Guatemala",
+      "Guernsey",
+      "Guinea",
+      "Guinea Bissau",
+      "Guyana",
+      "Haiti",
+      "Honduras",
+      "Hong Kong",
+      "Hungary",
+      "Iceland",
+      "India",
+      "Indonesia",
+      "Iran",
+      "Iraq",
+      "Ireland",
+      "Isle of Man",
+      "Israel",
+      "Italy",
+      "Jamaica",
+      "Japan",
+      "Jersey",
+      "Jordan",
+      "Kazakhstan",
+      "Kenya",
+      "Kuwait",
+      "Kyrgyz Republic",
+      "Laos",
+      "Latvia",
+      "Lebanon",
+      "Lesotho",
+      "Liberia",
+      "Libya",
+      "Liechtenstein",
+      "Lithuania",
+      "Luxembourg",
+      "Macau",
+      "Macedonia",
+      "Madagascar",
+      "Malawi",
+      "Malaysia",
+      "Maldives",
+      "Mali",
+      "Malta",
+      "Mauritania",
+      "Mauritius",
+      "Mexico",
+      "Moldova",
+      "Monaco",
+      "Mongolia",
+      "Montenegro",
+      "Montserrat",
+      "Morocco",
+      "Mozambique",
+      "Namibia",
+      "Nepal",
+      "Netherlands",
+      "Netherlands Antilles",
+      "New Caledonia",
+      "New Zealand",
+      "Nicaragua",
+      "Niger",
+      "Nigeria",
+      "Norway",
+      "Oman",
+      "Pakistan",
+      "Palestine",
+      "Panama",
+      "Papua New Guinea",
+      "Paraguay",
+      "Peru",
+      "Philippines",
+      "Poland",
+      "Portugal",
+      "Puerto Rico",
+      "Qatar",
+      "Reunion",
+      "Romania",
+      "Russia",
+      "Rwanda",
+      "Saint Pierre &amp; Miquelon",
+      "Samoa",
+      "San Marino",
+      "Satellite",
+      "Saudi Arabia",
+      "Senegal",
+      "Serbia",
+      "Seychelles",
+      "Sierra Leone",
+      "Singapore",
+      "Slovakia",
+      "Slovenia",
+      "South Africa",
+      "South Korea",
+      "Spain",
+      "Sri Lanka",
+      "St Kitts &amp; Nevis",
+      "St Lucia",
+      "St Vincent",
+      "St. Lucia",
+      "Sudan",
+      "Suriname",
+      "Swaziland",
+      "Sweden",
+      "Switzerland",
+      "Syria",
+      "Taiwan",
+      "Tajikistan",
+      "Tanzania",
+      "Thailand",
+      "Timor L'Este",
+      "Togo",
+      "Tonga",
+      "Trinidad &amp; Tobago",
+      "Tunisia",
+      "Turkey",
+      "Turkmenistan",
+      "Turks &amp; Caicos",
+      "Uganda",
+      "Ukraine",
+      "United Arab Emirates",
+      "United Kingdom",
+      "United States",
+      "Uruguay",
+      "Uzbekistan",
+      "Venezuela",
+      "Vietnam",
+      "Virgin Islands (US)",
+      "Yemen",
+      "Zambia",
+      "Zimbabwe"
     ],
     headers: [
       {
@@ -436,23 +1360,65 @@ export default {
         value: "No"
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
-      // { text: "Email", value: "email", sortable: false, align: "center" },
-      { text: "Mobile", value: "mobile", sortable: false, align: "center" },
-      { text: "", value: "", sortable: false, align: "center" }
+      { text: "Email", value: "email", sortable: false, align: "center" },
+      { text: "Dob", value: "dob", sortable: false, align: "center" },
+      { text: "Gender", value: "gender", sortable: false, align: "center" },
+      { text: "Father Name", value: "fatherName", sortable: false, align: "center" },
+      { text: "Mother Name", value: "motherName", sortable: false, align: "center" },
+      { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" },            
+      { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
+      { text: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     editedIndex: -1,
+    addStudents: {
+      role: "STUDENT",
+      name: "",
+      email: "",
+      date: "",
+      city: "",
+      pincode: "",
+      country: "",
+      permanentAddress: "",
+      presentAddress: "",
+      mobile: "",
+      state: "",
+      gender: "",
+      fatherName: "",
+      fatheCellNo: "",
+      motherName: "",
+      motherCellNo: "",
+      select: "",
+      selectSection: "",
+      establishmentYear: new Date().getFullYear()
+    },
     editedItem: {
       role: "STUDENT",
       name: "",
       email: "",
+      date: "",
+      city: "",
+      pincode: "",
+      country: "",
+      permanentAddress: "",
+      presentAddress: "",
+      mobile: "",
+      state: "",
+      gender: "",
+      fatherName: "",
+      fatheCellNo: "",
+      motherName: "",
+      motherCellNo: "",
+      select: "",
+      selectSection: "",
+      establishmentYear: new Date().getFullYear()
     },
     defaultItem: {
       role: "STUDENT",
       name: "",
-      email: "",
+      email: ""
     },
-    userName:'',
+    userName: "",
     items: [
       {
         href: "/changepassword",
@@ -470,29 +1436,75 @@ export default {
       }
     ]
   }),
-   watch: {
-    menu (val) {
-      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
+  watch: {
+    menu(val) {
+      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
-    menu1 (val) {
-      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
+    menu1(val) {
+      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     }
-   },
-   methods: {
+  },
+  methods: {
+    getSections(_id) {
+      var token = this.$store.state.token;
+      http()
+        .get(
+          "/getSectionsList",
+          { params: { classId: _id } },
+          {
+            headers: { Authorization: "Bearer " + token }
+          }
+        )
+        .then(response => {
+          this.addSection = response.data.data;
+          console.log("getSectionsList=====>", this.addSection);
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+          // this.$router.replace({ path: '/' });
+        });
+    },
+    pickFile() {
+      this.$refs.image.click();
+    },
+
+    onFilePicked(e) {
+      // console.log(e)
+      const files = e.target.files;
+      this.imageData.upload = e.target.files[0];
+      if (files[0] !== undefined) {
+        this.imageName = files[0].name;
+        if (this.imageName.lastIndexOf(".") <= 0) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.readAsDataURL(files[0]);
+        fr.addEventListener("load", () => {
+          this.imageUrl = fr.result;
+          this.imageFile = files[0]; // this is an image file that can be sent to server...
+          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
+          console.log("upload=======>", this.imageData.imageUrl);
+          console.log("imageFile", this.imageFile);
+        });
+      } else {
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
     getStudentList() {
       var token = this.$store.state.token;
-      http() 
-        .get("/getStudentsList", { 
-          headers: { Authorization: "Bearer " + token } 
-         })
+      http()
+        .get("/getStudentsList", {
+          headers: { Authorization: "Bearer " + token }
+        })
         .then(response => {
           this.desserts = response.data.data;
           // console.log("getStudentList=====>",this.desserts)
-
         })
         .catch(err => {
           // console.log("err====>", err);
-          this.$router.replace({ path: '/' });
+          this.$router.replace({ path: "/" });
         });
     },
     editItem(item) {
@@ -508,7 +1520,7 @@ export default {
     // report(item) {
     //   this.editedIndex = this.desserts.indexOf(item);
     //   this.editedItem = Object.assign({}, item);
-        // this.dialog2 = true;
+    // this.dialog2 = true;
     // },
 
     deleteItem(item) {
@@ -516,12 +1528,17 @@ export default {
         studentId: item._id
       };
       http()
-        .delete("/deleteStudent", confirm('Are you sure you want to delete this?') &&  { params: deleteStudent })
+        .delete(
+          "/deleteStudent",
+          confirm("Are you sure you want to delete this?") && {
+            params: deleteStudent
+          }
+        )
         .then(response => {
           // console.log("deleteUers",deleteStudent)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing User";
-        }
+          }
           this.getStudentList();
         })
         .catch(error => {
@@ -541,34 +1558,6 @@ export default {
           break;
       }
     },
-    activebtn(type) {
-      switch (type) {
-        case "existing":
-          this.Activebtn3 = false;
-          this.Activebtn2 = false;
-          this.Activebtn1 = false;
-          this.isActivebtn = true;
-          break;
-        case "new":
-          this.Activebtn3 = false;
-          this.Activebtn2 = false;
-          this.Activebtn1 = true;
-          this.isActivebtn = false;
-          break;
-        case "new1":
-          this.Activebtn3 = false;
-          this.Activebtn2 = true;
-          this.Activebtn1 = false;
-          this.isActivebtn = false;
-          break;
-        default:
-          this.Activebtn3 = true;
-          this.Activebtn2 = false;
-          this.Activebtn1 = false;
-          this.isActivebtn = false;
-          break;
-      }
-    },
     close() {
       this.dialog = false;
       setTimeout(() => {
@@ -579,49 +1568,86 @@ export default {
     close1() {
       this.dialog1 = false;
     },
-    close2() {
-      this.dialog2 = false;
-    },
+    // close2() {
+    //   this.dialog2 = false;
+    // },
     submit() {
       if (this.$refs.form.validate()) {
+        let imageData = new FormData();
+        imageData.append("upload", this.imageFile);
+        console.log(imageData);
         let addStudent = {
-          name: this.editedItem.name,
-          email: this.editedItem.email,
-          role: this.editedItem.role
+          name: this.addStudents.name,
+          email: this.addStudents.email,
+          role: this.addStudents.role,
+          dob: this.addStudents.date,
+          city: this.addStudents.city,
+          pincode: this.addStudents.pincode,
+          country: this.addStudents.country,
+          permanentAddress: this.addStudents.permanentAddress,
+          presentAddress: this.addStudents.presentAddress,
+          mobile: this.addStudents.mobile,
+          state: this.addStudents.state,
+          gender: this.addStudents.gender,
+          fatherName: this.addStudents.fatherName,
+          fatherCellNo: this.addStudents.fatherCellNo,
+          motherName: this.addStudents.motherName,
+          motherCellNo: this.addStudents.motherCellNo,
+          establishmentYear: this.addStudents.establishmentYear,
+          classId: this.addStudents.select,
+          sectionId: this.addStudents.selectSection,
+          imageData
+          // upload:this.imageFile
         };
-        // console.log(addStudent)
         http()
           .post("/createStudent", addStudent)
           .then(response => {
-            this.getStudentList();
-            if (this.snackbar = true) {
+            // console.log(addStudent)
+            if ((this.snackbar = true)) {
               this.text = "New user added successfully";
             }
-            
-          this.clear();
+            this.getStudentList();
+            this.clear();
           })
           .catch(error => {
             // console.log(error);
-            if (this.snackbar = true) {
-            this.text = error.response.data.message;
-          }
+            if ((this.snackbar = true)) {
+              this.text = error.response.data.message;
+            }
           });
       }
     },
-    mail() {
-    },
-    download() {
-    },
+    mail() {},
+    download() {},
     clear() {
       this.$refs.form.reset();
     },
     save() {
+       let imageData = new FormData();
+        imageData.append("upload", this.imageFile);
+        console.log(imageData);
       let editStudent = {
-        name: this.editedItem.name,
-        email: this.editedItem.email,
-        mobile: this.editedItem.mobile, 
-        dob: this.editedItem.mobile,      
-        studentId: this.editedItem._id
+          studentId:this.editedItem._id,
+          name: this.editedItem.name,
+          email: this.editedItem.email,
+          role: this.editedItem.role,
+          dob: this.editedItem.date,
+          city: this.editedItem.city,
+          pincode: this.editedItem.pincode,
+          country: this.editedItem.country,
+          permanentAddress: this.editedItem.permanentAddress,
+          presentAddress: this.editedItem.presentAddress,
+          mobile: this.editedItem.mobile,
+          state: this.editedItem.state,
+          gender: this.editedItem.gender,
+          fatherName: this.editedItem.fatherName,
+          fatherCellNo: this.editedItem.fatherCellNo,
+          motherName: this.editedItem.motherName,
+          motherCellNo: this.editedItem.motherCellNo,
+          establishmentYear: this.editedItem.establishmentYear,
+          classId: this.editedItem.select,
+          sectionId: this.editedItem.selectSection,
+          imageData
       };
       http()
         .put("/updateStudent", editStudent)
@@ -630,10 +1656,10 @@ export default {
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing User";
           }
-            this.getStudentList();
+          this.getStudentList();
         })
         .catch(error => {
-           // console.log(error);
+          // console.log(error);
         });
       this.close();
     },
@@ -646,10 +1672,24 @@ export default {
   },
   mounted() {
     this.getStudentList();
-    // console.log("Id",this.$store.state.id)
-    // console.log("token",this.$store.state.token) 
+    var token = this.$store.state.token;
+    http()
+      .get("/getClassesList", {
+        headers: { Authorization: "Bearer " + token }
+      })
+      .then(response => {
+        this.addclass = response.data.data;
+        // console.log("getClassesList=====>",this.addclass) 
+      })
+      .catch(err => {
+        // console.log("err====>", err);
+        this.$router.replace({ path: "/" });
+      });
   },
-  computed:{
+
+  // console.log("Id",this.$store.state.id)
+  // console.log("token",this.$store.state.token)
+  computed: {
     toolbarColor() {
       return this.$vuetify.options.extra.mainNav;
     }
@@ -658,18 +1698,18 @@ export default {
 </script>
 <style scoped>
 .v-tabs__div {
-    text-transform: none;
+  text-transform: none;
 }
 .v-input__prepend-outer {
-    margin-right: 0px !important;
+  margin-right: 0px !important;
 }
 .v-card__actions .v-btn {
   margin: 0 15px;
   min-width: 120px;
 }
- .primary {
-    background-color: #aaa !important;
-    border-color: #aaa !important;
+.primary {
+  background-color: #aaa !important;
+  border-color: #aaa !important;
 }
 h4 {
   background-repeat: no-repeat;
@@ -734,51 +1774,51 @@ h4 {
 #flex {
   height: 300px;
 }
-.top{
-  margin-top:100px;
+.top {
+  margin-top: 100px;
 }
-.v-tabs__item a{
-  font-size:16px !important; 
+.v-tabs__item a {
+  font-size: 16px !important;
 }
-@media screen and (max-width: 769px){
-  .top{
-    margin-top:0 !important;
-  } 
+@media screen and (max-width: 769px) {
+  .top {
+    margin-top: 0 !important;
+  }
   .userSearch .v-icon {
     font-size: 20px !important;
-    margin-left: 20px ;
+    margin-left: 20px;
   }
 }
 @media screen and (max-width: 380px) {
-.right {
+  .right {
     float: none !important;
-}
-.subheading {
+  }
+  .subheading {
     font-size: 14px !important;
-}
-.v-card__actions .v-btn{
+  }
+  .v-card__actions .v-btn {
     margin: 0 0px;
     min-width: 100px;
-}
-/* .searchIcon .v-icon {
+  }
+  /* .searchIcon .v-icon {
     font-size: 20px;
     margin-left: 20px;
 } */
-.subheading {
+  .subheading {
     font-size: 12px !important;
-}  
-h5 {
+  }
+  h5 {
     font-size: 13px;
+  }
 }
+.v-icon {
+  font-size: 30px;
 }
-.v-icon{
-  font-size:30px;
-}
-@media screen and (min-width: 1270px){
-.hide{
-  display: none;
-}
-/* }
+@media screen and (min-width: 1270px) {
+  .hide {
+    display: none;
+  }
+  /* }
 @media screen and (max-width: 962px) {
 .imglogo{
     position: absolute;
@@ -788,19 +1828,19 @@ h5 {
     height: 24px;
 } */
 }
-@media screen and (max-width: 420px){
-.userSearch .v-text-field .v-label{
-  line-height: 24px !important;
-}
-.userSearch .v-label{
-  font-size: 13px !important;
-}
-.v-list__tile {
-  font-size:14px;
-  padding: 0 10px;
-}
-.name{
-  font-size:15px; 
-}
+@media screen and (max-width: 420px) {
+  .userSearch .v-text-field .v-label {
+    line-height: 24px !important;
+  }
+  .userSearch .v-label {
+    font-size: 13px !important;
+  }
+  .v-list__tile {
+    font-size: 14px;
+    padding: 0 10px;
+  }
+  .name {
+    font-size: 15px;
+  }
 }
 </style>
\ No newline at end of file
-- 
2.0.0