viithiisys / School-Management-dashboard

Commit 7014df603e9e53bfcf01d624be2f5b7603068636

Authored by Shikha Mishra 2020-08-27 09:27:23 -0400

Exists in master and in 2 other branches

Improve placeholder name while changing passowrd, Clear preavious data while sel…

…ecting class from drop-down in student attendence, exam schedule, marks, students, routine, time table,global payment, progress card report and id card report and Student data was not showing at some times issue solved

Showing 11 changed files with 51 additions and 27 deletions Show diff stats

src/pages/Academic/routine.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Subject ****** -->
     <v-dialog v-model="editRoutineDialog" max-width="600px" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Routine</label>
             <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>
             <v-layout>
               <v-flex xs3 sm4 class="pt-4 subheading">
                 <label class="right">Class :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-2">
                 <v-select
                   :items="classList"
                   label="Select your Class"
                   v-model="editedItem.classId"
                   item-text="classNum"
                   item-value="_id"
                   :rules="classRules"
                   @change="getClassSubject(editedItem.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs3 sm4 class="pt-4 subheading">
                 <label class="right">Subject :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-2">
                 <v-select
                   :items="subjectList.subjects"
                   label="Select your subject"
                   v-model="editedItem.subjectName"
                   item-text="subjectName"
                   item-value="_id"
                   :rules="subjectRules"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Teacher Name :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-select
                   :items="teacherList"
                   label="Select your teacher"
                   v-model="editedItem.teacherId"
                   item-text="name"
                   item-value="_id"
                   :rules="teacherRules"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 sm4 class="pt-4 subheading">
                 <label class="right">Starting time:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-menu
                   ref="menuC"
                   :close-on-content-click="false"
                   v-model="menu4"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   max-width="290px"
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.startingTime"
                     placeholder="Select your starting time"
                     append-icon="access_time"
                     readonly
                   ></v-text-field>
                   <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 sm4 class="pt-4 subheading">
                 <label class="right">Ending Time:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-menu
                   ref="menuB"
                   :close-on-content-click="false"
                   v-model="menu3"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   max-width="290px"
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.endingTime"
                     placeholder="Select your end time"
                     append-icon="access_time"
                     readonly
                   ></v-text-field>
                   <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Room:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="fill your room"
                   :rules="roomRules"
                   v-model="editedItem.room"
                   @keyup.enter="submit"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Period:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="fill your period"
                   :rules="periodRules"
                   v-model="editedItem.period"
                   @keyup.enter="submit"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn
                     @click="update"
                     round
                     dark
                     :loading="loading"
                     class="add-button"
                   >Update Routine</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING ROUTINE TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addRoutineDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-flex xs1 class="hidden-sm-only hidden-xs-only">
         <v-btn
           round
           class="open-dialog-button"
           dark
           @click="addRoutineDialog = true"
           v-if="role != 'TEACHER' "
         >
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine
         </v-btn>
       </v-flex>
       <v-spacer></v-spacer>
       <v-flex lg2 md2 xs12 v-show="show">
         <v-select
           :items="classList"
           label="Select Your Class"
           v-model="addRoutineList.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getSections(addRoutineList.classId)"
           class="pl-2"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="addRoutineList.sectionId"
           label="Select your section"
           :items="addSection"
           item-text="name"
           item-value="_id"
           name="Select Section"
           :rules="sectionRules"
           @change="getRoutineList()"
           class="pl-2"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
             style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <div class="col-sm-12">
       <div class="box-body">
         <div class="row">
           <div class="col-sm-12">
             <div class="nav-tabs-custom">
               <ul class="nav nav-tabs">
                 <li class="active">
                   <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>
                 </li>
               </ul>
               <div class="tab-content" v-show="hideTable">
                 <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">
                   <div
                     id="mCSB_1"
                     class="mCustomScrollBox mCS-light"
                     style="max-height: none;"
                     tabindex="0"
                   >
                     <div
                       id="mCSB_1_container"
                       class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
                       style="position: relative; top: 0px; left: 0px; width: 100%;"
                       dir="ltr"
                     >
                       <div id="hide-table-2">
                         <table id="table" class="table table-striped">
                           <tbody>
                             <tr>
                               <td>MONDAY</td>
                             </tr>
                             <tr>
                               <td>TUESDAY</td>
                             </tr>
                             <tr>
                               <td>WEDNESDAY</td>
                             </tr>
                             <tr>
                               <td>THURSDAY</td>
                             </tr>
                             <tr>
                               <td>FRIDAY</td>
                             </tr>
                             <tr>
                               <td>SATURDAY</td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
                     </div>
                     <div
                       id="mCSB_1_scrollbar_horizontal"
                       class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
                       style="display: none;"
                     >
                       <div class="mCSB_draggerContainer">
                         <div
                           id="mCSB_1_dragger_horizontal"
                           class="mCSB_dragger"
                           style="position: absolute; min-width: 30px; width: 0px; left: 0px;"
                         >
                           <div class="mCSB_dragger_bar"></div>
                         </div>
                         <div class="mCSB_draggerRail"></div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
               <div>
                 <table id="table" class="table table-bordered" v-show="showTable">
                   <tbody>
                     <div class="nav-tabs-custom">
                       <div class="tab-content" id="scrolling">
                         <div id="hide-table-2">
                           <v-data-table :items="routineList">
                             <template slot="items" slot-scope="props">
                               <tr class="tr">
                                 <td>{{ props.item.day }}</td>
                                 <td class="text-center" v-for="list in props.item.lectureRoutine">
                                   {{ props.item.classId.classNum }}
                                   <br />
                                   {{ props.item.sectionId.name }}
                                   <br />
                                   {{ list.startingTime }} - {{ list.endingTime }}
                                   <br />
                                   {{ list.room }}
                                   <br />
                                   {{ list.subjectName }}
                                   <br />
                                   {{ list.teacherId.name}}
                                   <br />
                                   <span>
                                     <v-tooltip top>
                                       <img
                                         slot="activator"
                                         style="cursor:pointer; width:20px; height:18px; "
                                         class="mr-3"
                                         @click="editItem(list, props.item)"
                                         src="/static/icon/edit.png"
                                       />
                                       <span>Edit</span>
                                     </v-tooltip>
                                     <v-tooltip top>
                                       <img
                                         slot="activator"
                                         style="cursor:pointer; width:20px; height:18px; "
                                         class="mr-3"
                                         @click="deleteItem(props.item)"
                                         src="/static/icon/delete.png"
                                       />
                                       <span>Delete</span>
                                     </v-tooltip>
                                   </span>
                                 </td>
                               </tr>
                             </template>
                           </v-data-table>
                         </div>
                       </div>
                     </div>
                   </tbody>
                 </table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- ****** ADD MULTIPLE Subject ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent>
       v-if="addRoutineDialog"
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Routine</label>
             <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">School Year :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       label="fill your year"
                       :rules="schoolRules"
                       v-model="addRoutine.schoolYear"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Class :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       :items="classList"
                       item-text="classNum"
                       item-value="_id"
                       v-model="addRoutine.classId"
                       label="Select Class"
                       :rules="classRules"
                       @change="getSections(addRoutine.classId)"
                       class="pl-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Section :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       :items="addSection"
                       item-text="name"
                       item-value="_id"
                       v-model="addRoutine.sectionId"
                       label="Select Section"
                       :rules="sectionRules"
                       @change="getClassSubject(addRoutine.classId)"
                       class="px-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs3 sm4 class="pt-4 subheading">
                     <label class="right">Subject :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-2">
                     <v-select
                       :items="subjectList.subjects"
                       label="Select your subject"
                       v-model="addRoutine.subjectName"
                       item-text="subjectName"
                       item-value="subjectName"
                       :rules="subjectRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs3 sm4 class="pt-4 subheading">
                     <label class="right">Day :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-2">
                     <v-select
                       :items="day"
                       label="Select your day"
                       v-model="addRoutine.day"
                       item-text="text"
                       :rules="dayRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Teacher Name :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       v-model="addRoutine.teacherId"
                       label="Select your teacher"
                       type="text"
                       :items="teacherList"
                       item-text="name"
                       item-value="_id"
                       :rules="teacherRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Starting time:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-menu
                       ref="menuA"
                       :close-on-content-click="false"
                       v-model="menu2"
                       :nudge-right="40"
                       :return-value.sync="addRoutine.startingTime"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       max-width="290px"
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="addRoutine.startingTime"
                         label="Select your starting time"
                         append-icon="access_time"
                         :rules="timeInRules"
                         readonly
                       ></v-text-field>
                       <v-time-picker
                         v-model="addRoutine.startingTime"
                         @change="$refs.menuA.save(addRoutine.startingTime)"
                       ></v-time-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Ending Time:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-menu
                       ref="menu"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       :return-value.sync="addRoutine.endingTime"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       max-width="290px"
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="addRoutine.endingTime"
                         label="Select your end time"
                         append-icon="access_time"
                         :rules="timeOutRules"
                         readonly
                       ></v-text-field>
                       <v-time-picker
                         v-model="addRoutine.endingTime"
                         @change="$refs.menu.save(addRoutine.endingTime)"
                       ></v-time-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Room:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       label="fill your room"
                       :rules="roomRules"
                       v-model="addRoutine.room"
                       @keyup.enter="submit"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Period:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       label="fill your period"
                       :rules="periodRules"
                       v-model="addRoutine.period"
                       @keyup.enter="submit"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="create"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Add Routine</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     role: "",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     editRoutineDialog: false,
     valid: true,
     validEditRoutine: true,
     addRoutineDialog: false,
     showTable: false,
     hideTable: true,
     name: "",
     day: [
       "Monday",
       "Tuesday",
       "Wednesday",
       "Thursday",
       "Friday",
       "Saturday",
       "Sunday",
     ],
     token: "",
     menu1: false,
     menu2: false,
     menu4: false,
     menu3: false,
     schoolRules: [(v) => !!v || "School Year is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     teacherRules: [(v) => !!v || " Teacher Name is required"],
     sectionRules: [(v) => !!v || "Section is required"],
     studentRules: [(v) => !!v || " Student is required"],
     finalRules: [(v) => !!v || "Final MArk is required"],
     subjectRules: [(v) => !!v || " Subject Name is required"],
     dayRules: [(v) => !!v || "Day is required"],
     timeInRules: [(v) => !!v || "Start Time is required"],
     timeOutRules: [(v) => !!v || "End Time is required"],
     roomRules: [(v) => !!v || "Room is required"],
     periodRules: [(v) => !!v || "Period is required"],
     classList: [],
     addSection: [],
     subjectList: [],
     teacherList: [],
     titleRules: [],
     markRules: [],
     typeRules: [],
     routineList: [],
     editedIndex: -1,
     addRoutine: {},
     addRoutineList: {},
     startingTime: "",
     editedItem: {},
   }),
   watch: {
     addRoutineDialog: function (val) {
       if (!val) {
         this.addRoutine = [];
       }
     },
   },
   methods: {
     editItem(item, routineData) {
       this.editedIndex = this.routineList;
       this.editedItem = Object.assign({}, item);
       this.editedItem.lectureRoutineId = item._id;
       this.editedItem.routineId = routineData._id;
       this.dialog = true;
       this.editRoutineDialog = true;
     },
     deleteItem(item) {
       let deleteLecture = {
         routineId: item._id,
         lectureId: item.lectureRoutine[0]._id,
       };
       http()
         .delete(
           "/deleteRoutineLecture",
           confirm("Are you sure you want to delete this?") && {
             params: deleteLecture,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Routine";
           this.color = "green";
           this.getRoutineList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editRoutineDialog = false;
     },
     closeAddRoutineModel() {
       this.addRoutineDialog = false;
       this.classList = [];
       this.addRoutine = [];
     },
     create() {
       var routineData = {
         schoolYear: this.addRoutine.schoolYear,
         classId: this.addRoutine.classId,
         sectionId: this.addRoutine.sectionId,
         day: this.addRoutine.day,
         lectureRoutine: [],
       };
       if (this.$refs.form.validate()) {
         routineData.lectureRoutine.push({
           teacherId: this.addRoutine.teacherId,
           startingTime: this.addRoutine.startingTime,
           endingTime: this.addRoutine.endingTime,
           room: this.addRoutine.room,
           period: this.addRoutine.period,
           subjectName: this.addRoutine.subjectName,
         });
         http()
           .post("/createRoutine", routineData)
           .then((response) => {
             this.text = "Routine added successfully";
             // this.clear();
             this.snackbar = true;
             this.color = "green";
             // console.log("===this.addRoutine===", this.addRoutine);
             http()
               .get(
                 "/getRoutineList",
                 {
                   params: {
                     classId: this.addRoutine.classId,
                     sectionId: this.addRoutine.sectionId,
                   },
                 },
                 {
                   headers: { Authorization: "Bearer " + this.token },
                 }
               )
               .then((response) => {
                 this.routineList = response.data.data;
                 this.showLoader = false;
                 this.showTable = true;
                 this.hideTable = false;
               })
               .catch((err) => {
                 // console.log("err====>", err);
                 this.snackbar = true;
                 this.text = error.response.data.message;
                 this.color = "error";
               });
             this.addRoutineDialog = false;
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     update() {
       if (this.$refs.formEditRoutine.validate()) {
         let editRoutine = {
           routineId: this.editedItem.routineId,
           lectureRoutineId: this.editedItem.lectureRoutineId,
           subjectName: this.editedItem.subjectName,
           teacherId: this.editedItem.teacherId._id,
           startingTime: this.editedItem.startingTime,
           endingTime: this.editedItem.endingTime,
           room: this.editedItem.room,
           period: this.editedItem.period,
         };
         this.editLoading = true;
         http()
           .put("/updateRoutine", editRoutine)
           .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Routine";
             this.color = "green";
             this.editLoading = false;
             this.editRoutineDialog = false;
             this.getRoutineList();
             // http()
             //   .get(
             //     "/getRoutineList",
             //     {
             //       params: {
             //         classId: this.addRoutine.classId,
             //         sectionId: this.addRoutine.sectionId
             //       }
             //     },
             //     {
             //       headers: { Authorization: "Bearer " + this.token }
             //     }
             //   )
             //   .then(response => {
             //     this.routineList = response.data.data;
             //     this.showLoader = false;
             //     this.showTable = true;
             //     this.hideTable = false;
             //   })
             //   .catch(err => {
             //     console.log("err====>", err);
             //   });
           })
           .catch((error) => {
             this.editLoading = false;
           });
       }
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
         })
         .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
+      this.routineList = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getClassSubject(_id) {
       this.showLoader = true;
       //   this.classId = this.classId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getTeacherList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
           headers: { Authorization: "Bearer " + token },
         })
         .then((response) => {
           this.teacherList = response.data.data;
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.desserts)
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getRoutineList() {
       this.showLoader = true;
       http()
         .get(
           "/getRoutineList",
           {
             params: {
               classId: this.addRoutineList.classId,
               sectionId: this.addRoutineList.sectionId,
             },
           },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.routineList = response.data.data;
           this.showLoader = false;
           this.showTable = true;
           this.hideTable = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getTeacherList();
     this.role = this.$store.state.role;
   },
 };
 </script>
 <style scoped>
 html,
 body {
   font-family: "OpenSans Regular";
 }
 .box .box-body {
   padding: 15px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 .nav-tabs-custom {
   margin-bottom: 20px;
   background: #fff;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
 .nav {
   padding-left: 0;
   list-style: none;
 }
 .tab-content > .active {
   display: block;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
   border-top: 0;
   border-left-color: #09a3a3;
   border-right-color: #09a3a3;
 }
 .nav-tabs-custom > .nav-tabs {
   background-color: #e5e5e5;
   margin: 0;
   border-bottom-color: #e5e5e5;
 }
 .nav-tabs-custom > .nav-tabs > li:first-of-type {
   margin-left: 0px;
 }
 .nav-tabs-custom > .nav-tabs > li.active {
   border-bottom-color: #09a3a3;
 }
 .nav-tabs-custom > .nav-tabs > li {
   border-bottom: 2px solid transparent;
   border-top: 3px solid transparent;
   margin-bottom: -2px;
   margin-right: 5px;
 }
 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
   border-left-width: 0;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
   border-top: 0;
   border-bottom-color: #09a3a3;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a,
 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
   background-color: #e5e5e5;
   border: 0px;
   color: #000000db;
 }
 .nav-tabs-custom > .nav-tabs > li > a,
 .nav-tabs-custom > .nav-tabs > li > a:hover {
   border-radius: 0 !important;
 }
 .nav-tabs-custom > .tab-content {
   background: #fff;
   padding: 10px;
 }
 .page-header {
   margin: 10px 0 20px 0;
   padding: 0px 0px 16px;
   font-size: 22px;
   border: none;
 }
 .table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
 .table > tbody > tr > th,
 .table > tfoot > tr > th,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
   padding: 8px;
   line-height: 1.428571429;
   vertical-align: top;
   border-top: 1px solid #ddd;
 }
 .nav::before,
 .nav::after {
   display: table;
   content: "";
 }
 .box .box-body .table {
   margin-bottom: 0;
 }
 .table-bordered {
   border: 1px solid #e2e7eb;
 }
 .table-striped > tbody > tr:nth-child(2n + 1) > td,
 .table-striped > tbody > tr:nth-child(2n + 1) > th {
   background-color: #f0f3f5;
 }
 .table-bordered > tbody > v-data-table > template > tr > th,
 .table-bordered > tbody > tr > td {
   border-color: #e2e7eb;
   font-size: 12px;
 }
 .table-bordered > tbody > tr > td {
   color: #707070;
 }
 /*
 .table-bordered > tbody > tr > th,
 .table-bordered > tfoot > tr > th,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
   border: 1px solid #ddd;
 } */
 .mCustomScrollbar.mCS_no_scrollbar,
 .mCustomScrollbar.mCS_touch_action {
   touch-action: auto;
 }
 .mCSB_scrollTools.mCSB_scrollTools_horizontal {
   width: auto;
   height: 16px;
   top: auto;
   right: 0;
   bottom: 0;
   left: 0;
 }
 .mCSB_scrollTools {
   opacity: 0.75;
 }
 .mCSB_scrollTools .mCSB_draggerContainer {
   position: absolute;
   height: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
   height: 100%;
 }
 .mCSB_scrollTools .mCSB_dragger {
   cursor: pointer;
   z-index: 1;
 }
 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
   width: 100%;
   height: 4px;
   margin: 6px auto;
 }
 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
   background-color: rgba(255, 255, 255, 0.75);
 }
 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
   width: 100%;
   height: 2px;
   margin: 7px 0;
 }
 .mCSB_scrollTools .mCSB_draggerRail {
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 16px;
 }
 .mCustomScrollBox {
   position: relative;
   overflow: hidden;
   height: 100%;
   max-width: 100%;
   outline: none;
   direction: ltr;
 }
 /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
   margin-bottom: 0;
 }
 .mCSB_horizontal.mCSB_inside > .mCSB_container {
   margin-right: 0;
 } */
 .mCSB_container {
   overflow: hidden;
   height: auto;
 }
 @media (min-width: 768px) {
   .col-sm-12 {
     width: 100%;
   }
 }
 </style>

src/pages/Account/globalPayment.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EXISTING GLOBAL PAYMENT TABLE ****** -->
     <v-form ref="form" v-model="valid" lazy-validation>
       <v-container fluid>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg10>
               <v-layout wrap>
                 <v-flex xs12 sm12 lg4>
                   <v-flex xs12 sm4 lg4 class="subheading">
                     <label class="mt-4">Class:</label>
                   </v-flex>
                   <v-flex xs12 sm12 lg10>
                     <v-select
                       :items="addclass"
                       label="Select Class"
                       v-model="selectStudents.selectClassId"
                       item-text="classNum"
                       item-value="_id"
                       name="Select Class"
                       :rules="classRules"
                       @change="getSection()"
                       required
                     ></v-select>
                   </v-flex>
                 </v-flex>
                 <v-flex xs12 sm12 lg4>
                   <v-flex xs12 sm4 lg4 class="subheading">
                     <label class="mt-4">Section:</label>
                   </v-flex>
                   <v-flex xs12 sm12 lg10 class>
                     <v-select
                       :items="addSection"
                       label="Select Section"
                       v-model="selectStudents.selectSection"
                       item-text="name"
                       item-value="_id"
                       name="Select Section"
                       :rules="sectionRules"
                       @change="getStudents()"
                       required
                     ></v-select>
                   </v-flex>
                 </v-flex>
                 <v-flex xs12 sm12 lg4>
                   <v-flex xs12 sm4 lg4 class="subheading">
                     <label class="mt-4">Student:</label>
                   </v-flex>
                   <v-flex xs12 sm12 lg10 class>
                     <v-select
                       :items="studentData"
                       label="Select Student"
                       v-model="selectStudents.selectId"
                       item-text="name"
                       item-value="_id"
-                      :rules="studentRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg2>
               <v-flex xs12 sm12 lg12>
                 <v-btn
                   @click="getInvoicesData()"
                   round
                   dark
                   :loading="loading"
                   class="right mt-4 open-dialog-button"
                 >Search</v-btn>
               </v-flex>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-container>
     </v-form>
     <v-container fluid grid-list-md>
       <v-flex xs12>
         <v-layout wrap>
           <v-flex xs12 sm12 md4>
             <v-card
               flat
               class="pa-3"
               v-for="(invoiceData,i) in studentInvoiceData"
               :key="i"
               v-if="i === 0"
             >
               <v-layout>
                 <v-flex xs12>
                   <v-avatar
                     size="80px"
                     style="margin: auto;display:block;margin-bottom:10px !important"
                   >
                     <img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />
                     <img
                       :src="invoiceData.studentId.profilePicUrl"
                       v-else-if="invoiceData.studentId.profilePicUrl"
                     />
                   </v-avatar>
                 </v-flex>
               </v-layout>
               <v-layout class="studentProfile">
                 <v-flex xs4 sm3 md3>
                   <h4>
                     <b>Name</b>
                   </h4>
                 </v-flex>
                 <v-flex sm9 xs8 md9>
                   <h4>: {{ invoiceData.studentId.name }}</h4>
                 </v-flex>
               </v-layout>
               <v-layout class="studentProfile">
                 <v-flex xs4 sm3 md3>
                   <h4>
                     <b>Class</b>
                   </h4>
                 </v-flex>
                 <v-flex sm9 xs8 md9>
                   <h4>: {{ invoiceData.classId.classNum }}</h4>
                 </v-flex>
               </v-layout>
               <v-layout class="studentProfile">
                 <v-flex xs4 sm3 md3>
                   <h4>
                     <b>Roll No</b>
                   </h4>
                 </v-flex>
                 <v-flex sm9 xs8 md9>
                   <h4>: {{ invoiceData.studentId.rollNo }}</h4>
                 </v-flex>
               </v-layout>
             </v-card>
           </v-flex>
           <v-flex xs12 sm12 md8 v-show="showInvoiceTable">
             <v-card class="transparent">
               <v-data-table
                 :headers="headers"
                 :items="studentInvoiceData"
                 :search="search"
                 hide-actions
               >
                 <template slot="items" slot-scope="props">
                   <tr class="tr">
                     <td class="td td-row text-xs-center">{{ props.item.invoiceNumber }}</td>
                     <td class="td td-row text-xs-center">{{ props.item.totalAmount }}</td>
                     <td class="td td-row text-xs-center">{{ props.item.totalDiscount }}</td>
                     <td class="td td-row text-xs-center">{{ props.item.totalSubTotal }}</td>
                     <td class="td td-row text-xs-center">{{ props.item.paymentStatus}}</td>
                     <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
                     <td class="text-xs-center td td-row">
                       <router-link
                         :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"
                       >
                         <v-tooltip top>
                           <img
                             slot="activator"
                             style="cursor:pointer; width:25px; height:18px; "
                             src="/static/icon/eye1.png"
                           />
                           <span>View</span>
                         </v-tooltip>
                       </router-link>
                     </td>
                   </tr>
                 </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-card>
           </v-flex>
         </v-layout>
       </v-flex>
       <v-flex xs12>
         <v-layout wrap>
           <v-flex xs12 sm12 md12 v-show="showInvoiceTable">
             <v-card class="transparent">
               <v-data-table
                 :headers="header"
                 :items="studentInvoiceData"
                 :search="search"
                 hide-actions
               >
                 <template slot="items" slot-scope="props">
                   <tr class="tr" v-for="feetype in props.item.feeType">
                     <td class="td td-row">{{ props.index + 1}}</td>
                     <td class="td td-row text-xs-center">{{ feetype.feeTypeName}}</td>
                     <td class="td td-row text-xs-center">{{ feetype.amount }}</td>
                     <td
                       class="td td-row text-xs-center"
                     >{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td>
                     <td class="td td-row text-xs-center">{{ feetype.paidAmount }}</td>
                     <td class="td td-row text-xs-center">
                       <input type="text" maxlength="20" />
                     </td>
                   </tr>
                 </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-card>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-container>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     showInvoiceTable: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     search: "",
     valid: true,
     addclass: [],
     // index: '',
     feeType: {
       amount: "",
       discount: "",
       totalPaidAmount: "",
       subTotal: "",
       feeTypeName: "",
       userData: {},
     },
     feeTypeData: [],
     selectStudents: {},
     addSection: [],
     classRules: [(v) => !!v || " Class Name is required"],
     sectionRules: [(v) => !!v || " Section Name is required"],
     studentRules: [(v) => !!v || "Student Name is required"],
     headers: [
       {
         text: "Invoice Number",
         align: "center",
         sortable: false,
         value: "invoiceNumber",
       },
       {
         text: "Total Pay",
         value: "totalAmount",
         sortable: false,
         align: "center",
       },
       {
         text: "Weaver",
         value: "totalDiscount",
         sortable: false,
         align: "center",
       },
       {
         text: "	Total Collection",
         value: "totalSubTotal",
         sortable: false,
         align: "center",
       },
       {
         text: "Clearance",
         value: "paymentStatus",
         sortable: false,
         align: "center",
       },
       { text: "Payment Date", value: "date", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     header: [
       {
         text: "#",
         // align: "center",
         sortable: false,
       },
       {
         text: "Fees Name",
         align: "center",
         sortable: false,
         value: "feeTypeName",
       },
       {
         text: "Fees Amount",
         align: "center",
         sortable: false,
         value: "amount",
       },
       {
         text: "Due",
         align: "center",
         sortable: false,
       },
       {
         text: "Paid Amount",
         align: "center",
         sortable: false,
         value: "paidAmount",
       },
       {
         text: "Weaver",
         align: "center",
         sortable: false,
         value: "paidAmount",
       },
     ],
     studentData: [],
     studentInvoiceData: [],
   }),
   methods: {
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getSection() {
       var token = this.$store.state.token;
       this.showLoader = true;
+      this.studentInvoiceData = [];
       http()
         .get(
           "/getSectionsList",
           {
             params: {
               classId: this.selectStudents.selectClassId,
               schoolId: this.$store.state.schoolId,
             },
           },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch((error) => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.selectClassId,
             sectionId: this.selectStudents.selectSection,
             schoolId: this.$store.state.schoolId,
           },
         })
         .then((response) => {
           this.studentData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           //   console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getInvoicesData() {
       this.showLoader = true;
       this.showInvoiceTable = true;
       http()
         .get("/getInvoicesList", {
           params: {
             classId: this.selectStudents.selectClassId,
             studentId: this.selectStudents.selectId,
             schoolId: this.$store.state.schoolId,
           },
         })
         .then((response) => {
           this.studentInvoiceData = response.data.data;
           // console.log("this.studentInvoiceData", this.studentInvoiceData);
           this.showLoader = false;
         })
         .catch((err) => {
           //   console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getAmmountDetails(feeTyp) {
       let feeType = {
         subTotal: "",
         subParticularTotal: "",
         paidAmount: "",
       };
       // *********** SUBTOTAL ***********
       feeType.subTotal =
         Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
       this.feeType.subTotal = feeType.subTotal.toFixed(2);
       // *********** PAID-AMOUNT ***********
       feeType.paidAmount =
         Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
       this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
     },
   },
   mounted() {
     var token = this.$store.state.token;
     http()
       .get("/getClassesList", {
         params: {
           schoolId: this.$store.state.schoolId,
         },
         headers: { Authorization: "Bearer " + token },
       })
       .then((response) => {
         this.addclass = response.data.data;
       })
       .catch((error) => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
   // created() {
   //   this.$root.$on("app:search", search => {
   //     this.search = search;
   //   });
   // },
   // beforeDestroy() {
   //   // dont forget to remove the listener
   //   this.$root.$off("app:search");
   // }
 };
 </script>
 <style  scoped>
 .studentProfile {
   border: 1px solid lightgrey;
 }

src/pages/Administrator/resetPassword.vue

Diff comments View file @7014df6

1	<template>	1	<template>
2	<v-app id="login">	2	<v-app id="login">
3	<v-container fluid fill-height>	3	<v-container fluid fill-height>
4	<v-layout>	4	<v-layout>
5	<v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">	5	<v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
6	<v-toolbar class="card-styles mt-5" dark>	6	<v-toolbar class="card-styles mt-5" dark>
7	<v-spacer></v-spacer>	7	<v-spacer></v-spacer>
8	<v-toolbar-title>Change Password</v-toolbar-title>	8	<v-toolbar-title>Change Password</v-toolbar-title>
9	<v-spacer></v-spacer>	9	<v-spacer></v-spacer>
10	</v-toolbar>	10	</v-toolbar>
11	<v-card class="elevation-1 pa-3" id="form">	11	<v-card class="elevation-1 pa-3" id="form">
12	<v-card-text>	12	<v-card-text>
13	<v-flex xs12 sm8 md8 lg8 offset-sm2>	13	<v-flex xs12 sm8 md8 lg8 offset-sm2>
14	<v-form class="mt-3" ref="form" v-model="valid" lazy-validation>	14	<v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
15	<!-- <v-select	15	<!-- <v-select
16	:rules="userRule"	16	:rules="userRule"
17	label="Select User"	17	label="Select User"
18	:items="getRoles"	18	:items="getRoles"
19	item-text="name"	19	item-text="name"
20	item-value="name"	20	item-value="name"
21	v-model="resetPassword.name"	21	v-model="resetPassword.name"
22	@change="getUsers(resetPassword.name)"	22	@change="getUsers(resetPassword.name)"
23	></v-select>	23	></v-select>
24	<v-select	24	<v-select
25	:rules="userNameRule"	25	:rules="userNameRule"
26	label="Select User Name"	26	label="Select User Name"
27	:items="getUsersName"	27	:items="getUsersName"
28	item-text="email"	28	item-text="email"
29	item-value="email"	29	item-value="email"
30	v-model="resetPassword.email"	30	v-model="resetPassword.email"
31	></v-select> -->	31	></v-select>-->
32	<v-text-field	32	<v-text-field
33	:append-icon="e1 ? 'visibility_off' : 'visibility'"	33	:append-icon="e1 ? 'visibility_off' : 'visibility'"
34	:append-icon-cb="() => (e1 = !e1)"	34	:append-icon-cb="() => (e1 = !e1)"
35	:type="e1 ? 'password' : 'text'"	35	:type="e1 ? 'password' : 'text'"
36	:rules="oldPasswordRule"	36	:rules="oldPasswordRule"
37	v-model="resetPassword.oldPassword"	37	v-model="resetPassword.oldPassword"
38	:error-messages="errors.collect('resetPassword.oldPassword')"	38	:error-messages="errors.collect('resetPassword.oldPassword')"
39	v-validate="'required'"	39	v-validate="'required'"
40	data-vv-name="resetPassword.oldPassword"	40	data-vv-name="resetPassword.oldPassword"
41	label="Old Password"	41	label="Old Password"
42	></v-text-field>	42	></v-text-field>
43	<v-text-field	43	<v-text-field
44	:append-icon="e1 ? 'visibility_off' : 'visibility'"	44	:append-icon="e1 ? 'visibility_off' : 'visibility'"
45	:append-icon-cb="() => (e1 = !e1)"	45	:append-icon-cb="() => (e1 = !e1)"
46	:type="e1 ? 'password' : 'text'"	46	:type="e1 ? 'password' : 'text'"
47	:rules="newPasswordRule"	47	:rules="newPasswordRule"
48	v-model="resetPassword.newPassword"	48	v-model="resetPassword.newPassword"
49	:error-messages="errors.collect('resetPassword.newPassword')"	49	:error-messages="errors.collect('resetPassword.newPassword')"
50	v-validate="'required'"	50	v-validate="'required'"
51	data-vv-name="resetPassword.newPassword"	51	data-vv-name="resetPassword.newPassword"
52	label="New Password"	52	label="New Password"
53	></v-text-field>	53	></v-text-field>
54	<v-text-field	54	<v-text-field
55	:append-icon="e1 ? 'visibility_off' : 'visibility'"	55	:append-icon="e1 ? 'visibility_off' : 'visibility'"
56	:append-icon-cb="() => (e1 = !e1)"	56	:append-icon-cb="() => (e1 = !e1)"
57	:type="e1 ? 'password' : 'text'"	57	:type="e1 ? 'password' : 'text'"
58	v-model="resetPassword.confirmPassword"	58	v-model="resetPassword.confirmPassword"
59	:rules="rePasswordRule"	59	:rules="rePasswordRule"
60	:error-messages="errors.collect('password2')"	60	:error-messages="errors.collect('password2')"
61	v-validate="{ required: false, is: resetPassword.newPassword }"	61	v-validate="{ required: false, is: resetPassword.newPassword }"
62	data-vv-name="password2"	62	data-vv-name="password2"
63	data-vv-as="password"	63	data-vv-as="password"
64	label="Renter New Password"	64	label="Re-enter New Password"
65	></v-text-field>	65	></v-text-field>
66	</v-form>	66	</v-form>
67	</v-flex>	67	</v-flex>
68	</v-card-text>	68	</v-card-text>
69	<v-card-actions>	69	<v-card-actions>
70	<v-flex text-xs-center>	70	<v-flex text-xs-center>
71	<v-btn	71	<v-btn
72	style="background-color: #71d9ea; color: #0c0754;"	72	style="background-color: #71d9ea; color: #0c0754;"
73	dark	73	dark
74	flat	74	flat
75	large	75	large
76	:loading="loading"	76	:loading="loading"
77	@click="reset"	77	@click="reset"
78	>Change Password</v-btn>	78	>Change Password</v-btn>
79	</v-flex>	79	</v-flex>
80	</v-card-actions>	80	</v-card-actions>
81	<v-snackbar	81	<v-snackbar
82	:timeout="timeout"	82	:timeout="timeout"
83	:top="y === 'top'"	83	:top="y === 'top'"
84	:right="x === 'right'"	84	:right="x === 'right'"
85	:vertical="mode === 'vertical'"	85	:vertical="mode === 'vertical'"
86	v-model="snackbar"	86	v-model="snackbar"
87	:color="color"	87	:color="color"
88	>{{ text }}</v-snackbar>	88	>{{ text }}</v-snackbar>
89	</v-card>	89	</v-card>
90	</v-flex>	90	</v-flex>
91	</v-layout>	91	</v-layout>
92	</v-container>	92	</v-container>
93	</v-app>	93	</v-app>
94	</template>	94	</template>
95	<script>	95	<script>
96	import http from "@/Services/http.js";	96	import http from "@/Services/http.js";
97		97
98	export default {	98	export default {
99	data() {	99	data() {
100	return {	100	return {
101	snackbar: false,	101	snackbar: false,
102	y: "top",	102	y: "top",
103	x: "right",	103	x: "right",
104	mode: "",	104	mode: "",
105	timeout: 4000,	105	timeout: 4000,
106	text: "",	106	text: "",
107	color: "",	107	color: "",
108	e1: true,	108	e1: true,
109	password2: "",	109	password2: "",
110	resetPassword: {},	110	resetPassword: {},
111	getUsersName: [],	111	getUsersName: [],
112	getRoles: [],	112	getRoles: [],
113	valid: true,	113	valid: true,
114	loading: false,	114	loading: false,
115	text: "Password Changed",	115	text: "Password Changed",
116	newPassword: "",	116	newPassword: "",
117	oldPassword: "",	117	oldPassword: "",
118	userRule: [v => !!v \|\| "User is required"],	118	userRule: [(v) => !!v \|\| "User is required"],
119	userNameRule: [v => !!v \|\| "User Name is required"],	119	userNameRule: [(v) => !!v \|\| "User Name is required"],
120	oldPasswordRule: [v => !!v \|\| "Old Password is required"],	120	oldPasswordRule: [(v) => !!v \|\| "Old Password is required"],
121	newPasswordRule: [v => !!v \|\| "New Password is required"],	121	newPasswordRule: [(v) => !!v \|\| "New Password is required"],
122	rePasswordRule: [v => !!v \|\| "Re-Password is required"]	122	rePasswordRule: [(v) => !!v \|\| "Re-Password is required"],
123	};	123	};
124	},	124	},
125	mounted() {	125	mounted() {
126	this.token = this.$store.state.token;	126	this.token = this.$store.state.token;
127	if (this.$store.state.role != "PARENT"){	127	if (this.$store.state.role != "PARENT") {
128	this.getRole();	128	this.getRole();
129	}	129	}
130	},	130	},
131	methods: {	131	methods: {
132	reset() {	132	reset() {
133	if (	133	if (
134	this.$refs.form.validate() &&	134	this.$refs.form.validate() &&
135	this.resetPassword.oldPassword === this.resetPassword.oldPassword	135	this.resetPassword.oldPassword === this.resetPassword.oldPassword
136	) {	136	) {
137	this.loading = true;	137	this.loading = true;
138	this.resetPassword.newPassword = this.resetPassword.newPassword;	138	this.resetPassword.newPassword = this.resetPassword.newPassword;
139	http()	139	http()
140	.put("/change-password", this.resetPassword, {	140	.put("/change-password", this.resetPassword, {
141	headers: { Authorization: "Bearer " + this.token }	141	headers: { Authorization: "Bearer " + this.token },
142	})	142	})
143	.then(response => {	143	.then((response) => {
144	this.loading = false;	144	this.loading = false;
145	this.snackbar = true;	145	this.snackbar = true;
146	this.text = "Successfully Restet password !!";	146	this.text = "Successfully Restet password !!";
147	this.color = "green";	147	this.color = "green";
148	this.clear();	148	this.clear();
149	})	149	})
150	.catch(error => {	150	.catch((error) => {
151	// console.log("err====>",err);	151	// console.log("err====>",err);
152	this.snackbar = true;	152	this.snackbar = true;
153	this.text = "User Not Found or Incorrect currentPassword";	153	this.text = "User Not Found or Incorrect currentPassword";
154	this.color = "error";	154	this.color = "error";
155	this.loading = false;	155	this.loading = false;
156	});	156	});
157	}	157	}
158	},	158	},
159	getRole() {	159	getRole() {
160	this.showLoader = true;	160	this.showLoader = true;
161	http()	161	http()
162	.get("/getRolesList", {	162	.get("/getRolesList", {
163	headers: { Authorization: "Bearer " + this.token }	163	headers: { Authorization: "Bearer " + this.token },
164	})	164	})
165	.then(response => {	165	.then((response) => {
166	for (let i = 0; i < response.data.data.length; i++) {	166	for (let i = 0; i < response.data.data.length; i++) {
167	if (	167	if (
168	response.data.data[i].name != "SUPERADMIN" &&	168	response.data.data[i].name != "SUPERADMIN" &&
169	response.data.data[i].name != "ADMIN"	169	response.data.data[i].name != "ADMIN"
170	) {	170	) {
171	this.getRoles.push(response.data.data[i]);	171	this.getRoles.push(response.data.data[i]);
172	this.showLoader = false;	172	this.showLoader = false;
173	}	173	}
174	}	174	}
175	})	175	})
176	.catch(error => {	176	.catch((error) => {
177	this.showLoader = false;	177	this.showLoader = false;
178	if (error.response.status === 401) {	178	if (error.response.status === 401) {
179	this.$router.replace({ path: "/" });	179	this.$router.replace({ path: "/" });
180	this.$store.dispatch("setToken", null);	180	this.$store.dispatch("setToken", null);
181	this.$store.dispatch("Id", null);	181	this.$store.dispatch("Id", null);
182	}	182	}
183	});	183	});
184	},	184	},
185	clear() {	185	clear() {
186	this.$refs.form.reset();	186	this.$refs.form.reset();
187	},	187	},
188	getUsers(roles) {	188	getUsers(roles) {
189	this.showLoader = true;	189	this.showLoader = true;
190	http()	190	http()
191	.get("/getUserWithRole", {	191	.get("/getUserWithRole", {
192	params: {	192	params: {
193	name: roles	193	name: roles,
194	},	194	},
195	headers: { Authorization: "Bearer " + this.token }	195	headers: { Authorization: "Bearer " + this.token },
196	})	196	})
197	.then(response => {	197	.then((response) => {
198	this.getUsersName = response.data.data;	198	this.getUsersName = response.data.data;
199	})	199	})
200	.catch(error => {	200	.catch((error) => {
201	this.showLoader = false;	201	this.showLoader = false;
202	if (error.response.status === 401) {	202	if (error.response.status === 401) {
203	this.$router.replace({ path: "/" });	203	this.$router.replace({ path: "/" });
204	this.$store.dispatch("setToken", null);	204	this.$store.dispatch("setToken", null);
205	this.$store.dispatch("Id", null);	205	this.$store.dispatch("Id", null);
206	}	206	}
207	});	207	});
208	}	208	},
209	}	209	},
210	};	210	};
211	</script>	211	</script>
212	<style scoped>	212	<style scoped>
213	.card-styles {	213	.card-styles {
214	background: #7f62f8 !important;	214	background: #7f62f8 !important;
215	border-color: #7f62f8 !important;	215	border-color: #7f62f8 !important;
216	}	216	}
217	</style>	217	</style>
218		218

src/pages/Attendence/studentAttendence.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <!-- ****** ATTENDENCE STUDENTS TABLE ****** -->
     <!-- <download-csv :data="json_data">
             <v-btn>Download Data</v-btn>
     </download-csv>-->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addStudentAttendenceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addStudentAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence
       </v-btn>
       <v-spacer></v-spacer>
       <v-flex xs12 sm4 md2>
         <v-select
           small
           :items="addclass"
           label="Select Class"
           v-model="getAttendence.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           @change="getSection(getAttendence.classId)"
           class="px-2"
           required
         ></v-select>
       </v-flex>
       <v-flex xs12 sm4 md2>
         <v-select
           small
           :items="addSection"
           label="Select Section"
           v-model="getAttendence.sectionId"
           item-text="name"
           item-value="_id"
           name="Select Section"
           @change="getStudentsDetail(getAttendence.sectionId)"
           class="px-2"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="studentsData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
           <td class="text-xs-center td td-row">{{ props.item.email }}</td>
           <td class="text-xs-center td td-row">
             <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:25px; "
                   class="mr-3"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
             </router-link>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** Add Students Attendece****** -->
     <v-dialog
       v-model="addStudentAttendenceDialog"
       width="1600"
       v-if="addStudentAttendenceDialog"
       persistent
     >
       <v-card flat class="pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Student Attendence</label>
             <v-icon
               size="24"
               class="right"
               @click="$refs.form.reset();addStudentAttendenceDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 class="mt-4">
           <v-form ref="form" v-model="valid" lazy-validation>
             <v-flex xs12 sm12 lg12>
               <v-layout wrap>
                 <v-flex xs6 sm6 lg3 md4>
                   <v-layout>
                     <v-flex xs3 sm6 lg2 class="subheading mt-4">
                       <label class="right">Class:</label>
                     </v-flex>
                     <v-flex xs9 sm6 lg8 class="ml-2">
                       <v-select
                         v-model="getReport.classId"
                         label="Select your class"
                         type="text"
                         :items="addclass"
                         item-text="classNum"
                         item-value="_id"
                         :rules="classRules"
                         @change="getSection(getReport.classId)"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs6 sm6 lg3 md8>
                   <v-layout>
                     <v-flex xs3 sm6 lg2 class="subheading mt-4">
                       <label class="right">Section:</label>
                     </v-flex>
                     <v-flex xs9 sm6 lg8 class="ml-2">
                       <v-select
                         :items="addSection"
                         label="Select your Section"
                         v-model="getReport.sectionId"
                         item-text="name"
                         item-value="_id"
                         name="Select Section"
                         :rules="sectionRules"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs6 sm6 lg3 md4>
                   <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="date"
                       label="Select Date"
                       append-icon="event"
                       :rules="dataValid"
                       readonly
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="date"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @change="save"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
                 <v-flex xs6 sm6 lg9 md8>
                   <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-form>
         </v-flex>
         <v-flex xs12 v-show="attendeceTable" class>
           <v-data-table
             :headers="headers"
             :items="studentsData"
             :pagination.sync="pagination"
             :search="search"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="td td-row">{{ props.index + 1}}</td>
                 <td class="text-xs-center td td-row">
                   <v-avatar size="40">
                     <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
                 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
                 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
                 <td class="text-xs-center td td-row">
                   <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
                     <v-radio
                       v-for="attendences in attendenceType"
                       :key="attendences.value"
                       :label="`${attendences.label}`"
                       :value="attendences.value"
                     ></v-radio>
                   </v-radio-group>
                 </td>
               </tr>
             </template>
           </v-data-table>
           <v-flex xs12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn @click="update()" class="add-button" round dark>Submit</v-btn>
             </v-card-actions>
           </v-flex>
         </v-flex>
       </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>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     addclass: [],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "index",
       },
       {
         text: "Profile Pic",
         value: "profilprofilePicUrlePicUrl",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       {
         text: "Mobile No",
         value: "fatherCellNo",
         sortable: false,
         align: "center",
       },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Attendance", value: "", sortable: false, align: "center" },
     ],
     // json_data: [],
     parentId: "",
     token: "",
     selectStudents: {
       select: "",
       selectSection: "",
     },
     role: "",
     schoolRole: "",
     addStudentAttendenceDialog: false,
     attendeceTable: false,
     menu: false,
     valid: true,
     getReport: {},
     getAttendence: {},
     studentsList: [],
     studentsData: [],
     addSection: [],
     SectionName: ["A", "B", "C", "D", "E", "F"],
     classRules: [(v) => !!v || "Class is required"],
     sectionRules: [(v) => !!v || "Class is required"],
     studentRules: [(v) => !!v || "Student is required"],
     dataValid: [(v) => !!v || "Date is required"],
     attendenceType: [
       {
         label: "Present",
         value: true,
       },
       {
         label: "Absent",
         value: false,
       },
     ],
   }),
   watch: {
     addStudentAttendenceDialog: function (val) {
       if (!val) {
         this.getReport = [];
         // this.studentsData = [];
       }
     },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     showTable() {
       this.attendeceTable = true;
       this.getStudents();
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addclass = response.data.data;
         })
         .catch((error) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getSection(_id) {
       this.showLoader = true;
+      this.studentsData = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
           // console.log("err====>", err);
         });
     },
     getStudents(_id) {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
           // this.addStudentAttendenceDialog = false;
           var attendence = "";
           for (let i = 0; i < this.studentsData.length; i++) {
             this.studentsData[i].attendence = true;
           }
         })
         .catch((error) => {
           //   console.log("err====>", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getStudentsDetail(_id) {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getAttendence.classId,
             sectionId: this.getAttendence.sectionId,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
           // this.addStudentAttendenceDialog = false;
           var attendence = "";
           for (let i = 0; i < this.studentsData.length; i++) {
             this.studentsData[i].attendence = true;
           }
         })
         .catch((error) => {
           //   console.log("err====>", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     update() {
       var studentsAttendence = [];
       for (var j = 0; j < this.studentsData.length; j++) {
         studentsAttendence.push({
           studentId: this.studentsData[j]._id,
           isPresent: this.studentsData[j].attendence,
         });
       }
       if (this.$refs.form.validate()) {
         let attendanceData = {
           sectionId: this.getReport.sectionId,
           date: this.date,
           students: studentsAttendence,
         };
         http()
           .put("/updateAttendance", attendanceData)
           .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.addStudentAttendenceDialog = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     // this.getStudentList();
     this.token = this.$store.state.token;
     this.getAllClass();
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Dashboard/LiveOnlineClass.vue

Diff comments View file @7014df6

 <template>
   <div class="body-color">
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <v-container grid-list-xl class="pt-0">
       <v-layout row wrap class="mt-1">
         <!-- if logged in user is parent -->
         <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
               <div
                 class="title side-bar-color font-weight-bold"
               >Live Online Classes - {{$route.query.chapterName}}</div>
               <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
               <!-- <div
                 class="subheading grey--text lighten-1"
               >The session started at 1:00 there is 1 moderator</div>-->
             </v-flex>
             <!-- JOIN OR END SESSION -->
             <v-flex>
               <div>
                 <v-btn
                   round
                   class="open-dialog-button"
                   dark
                   v-if="studentBtn"
                   @click="showLoader = true;startChat();"
                 >{{studentBtn}}</v-btn>
                 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
               </div>
             </v-flex>
             <v-flex id="studentClone">
               <div id="jitsi-container"></div>
             </v-flex>
           </v-layout>
         </v-flex>
         <!-- if logged in user is teacher -->
         <v-flex xs12 sm12 md12 v-else>
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
               <div
                 class="title side-bar-color font-weight-bold"
               >Live Online Classes - {{$route.query.chapterName}}</div>
               <!-- <div class="subheading grey--text lighten-1"></div> -->
               <!-- <div
                 class="subheading grey--text lighten-1"
               >The session started at 1:00 there is 1 moderator</div>-->
             </v-flex>
             <!-- JOIN OR END SESSION -->
             <v-flex>
               <div>
                 <v-btn
                   round
                   class="open-dialog-button"
                   dark
                   @click="showLoader = true;startChat()"
                 >Start Session</v-btn>
               </div>
             </v-flex>
             <v-flex id="teacherClone">
               <div id="jitsi-container"></div>
             </v-flex>
           </v-layout>
         </v-flex>
         <v-spacer></v-spacer>
         <!-- COURSES SIDE BAR- positioned to the right of the page -->
         <!-- <v-flex xs3>
           <v-card class="elevation-0 card-border" height="100%">
             <CoursesSideBar></CoursesSideBar>
           </v-card>
         </v-flex>-->
       </v-layout>
     </v-container>
   </div>
 </template>
 <script>
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 import moment from "moment";
 import Meet from "@/pages/Meet/meet.vue";
 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
 export default {
   mixins: [AllApiCalls],
   components: {
     CoursesSideBar,
   },
   data() {
     return {
       startLiveSession: "",
       studentBtn: "",
       // DATA TABLE
       search: "",
       pagination: {
         rowsPerPage: 10,
       },
       liveOnlineHeaders: [
         {
           text: "Playback",
           value: "attachementUrl",
           sortable: false,
           align: "center",
         },
         {
           text: "Meeting",
           align: "center",
           sortable: false,
           value: "",
         },
         {
           text: "Recording",
           value: "",
           sortable: false,
           align: "center",
         },
         {
           text: "Description Preview",
           value: "",
           sortable: false,
           align: "center",
         },
         { text: "Date", value: "", sortable: false, align: "center" },
         { text: "Duration", value: "", sortable: false, align: "center" },
         { text: "Toolbar", value: "", sortable: false, align: "center" },
       ],
       liveOnlineItems: [],
       // JITSI CONTAINER
       liveLink: "",
+      livePassword: "",
       token: "",
       selectStudents: {},
       classRules: [(v) => !!v || " Class Name is required"],
       sectionRules: [(v) => !!v || " Section Name is required"],
       addclass: [],
       addSection: [],
       loading: false,
       room: "",
       username: "",
       roomPassword: "",
       counter: 0,
     };
   },
   methods: {
     async startChat() {
       if (this.$store.state.role === "PARENT") {
         if (this.counter == 0) {
           //   console.log("enter start chat");
           this.startConference();
           this.counter += 1;
         }
       }
       if (this.$store.state.role === "TEACHER") {
         if (this.counter == 0) {
           this.createRoom();
           this.counter += 1;
         }
       }
     },
     // JITSI CONTAINER
     startConference() {
       //   console.log("yes session started");
       var _this = this;
       try {
         const domain = "meet.intrack.in";
         const options = {
           audioInput: "<deviceLabel>",
           audioOutput: "<deviceLabel>",
           videoInput: "<deviceLabel>",
           prejoinPageEnabled: false,
           roomName: this.room,
           height: 500,
           parentNode: document.getElementById("jitsi-container"),
           interfaceConfigOverwrite: {
             filmStripOnly: false,
             SHOW_PROMOTIONAL_CLOSE_PAGE: false,
             SHOW_POWERED_BY: false,
             SHOW_JITSI_WATERMARK: false,
             TOOLBAR_BUTTONS: [
               "microphone",
               "camera",
               "closedcaptions",
               "desktop",
               "fullscreen",
               "fodeviceselection",
               "hangup",
               "profile",
               "info",
               "chat",
               "recording",
               "livestreaming",
               "etherpad",
               "sharedvideo",
               "settings",
               "raisehand",
               "videoquality",
               "filmstrip",
               "invite",
               "feedback",
               "stats",
               "shortcuts",
               "tileview",
             ],
           },
           configOverwrite: {
             disableSimulcast: false,
           },
           teacherName: "",
           romm: "",
         };
         _this.api = new JitsiMeetExternalAPI(domain, options);
         // console.log("this.api ", this.api);
         _this.api.addEventListener("videoConferenceJoined", () => {
           //   console.log("Local User Joined");
           this.showLoader = false;
           _this.api.executeCommand("displayName", _this.username);
-          _this.api.executeCommand("password",  _this.roomPassword);
+          _this.api.executeCommand("password", _this.roomPassword);
         });
         _this.api.on("readyToClose", () => {
           this.$router.push({ name: "Refresh" });
         });
       } catch (error) {
         // console.error("Failed to load Jitsi API", error);
       }
     },
     openRoom() {
       // verify the JitsiMeetExternalAPI constructor is added to the global..
       // if (this.teacherName != "" || this.room != "") {
       //   if (window.JitsiMeetExternalAPI) {
       //     // var person = prompt("Please enter your name:", "Rabie");
       //     if (person != null || person != "") this.username = this.teacherName;
       //     var room = prompt("Please enter your room:", "Test Room");
       //     if (room != null || room != "") this.room = this.room;
       //     this.startConference();
       //   } else alert("Jitsi Meet API script not loaded");
       // }
     },
     createRoom(classId) {
       // this.showLoader = true;
       var classId = {
         classId: classId,
       };
       http()
         .post("/createLiveClasses", {
           classId: this.$route.query.classId,
           courseId: this.$route.query.courseId,
           chapterId: this.$route.query.chapterId,
         })
         .then((response) => {
           // this.addSection = response.data.data;
           //   console.log("CREATE___ROOOM", response.data);
           var room = response.data.data.roomName;
           var username = localStorage.getItem("teacherName");
           var roomPassword = response.data.data.password;
           //   console.log(
           //     "room",
           //     room,
           //     "username",
           //     username,
           //     "roomPassword",
           //     roomPassword
           //   );
           var this_ = this;
           if (username != "" || room != "") {
             if (window.JitsiMeetExternalAPI) {
               // var person = prompt("Please enter your name:", "Rabie");
               if (username != null || username != "") {
                 this_.username = username;
               }
               // var room = prompt("Please enter your room:", "Test Room");
               if (room != null || room != "") {
                 this_.room = room;
               }
               if (roomPassword != null || roomPassword != "") {
                 this_.password = roomPassword;
               }
             } else alert("Jitsi Meet API script not loaded");
             this_.startConference();
           }
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     async studentClasses() {
       this.liveLink = "";
+      this.livePassword = "";
       this.room = "";
       this.username = "";
       this.roomPassword = "";
       /* getLiveClassesesList - To up date line under heading*/
       let response = await this.getLiveClassesesList({
         classId: this.$route.query.classId,
         courseId: this.$route.query.courseId,
         chapterId: this.$route.query.chapterId,
       });
       //   console.log("response getLiveClassesesList- ", response);
       /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
       if (response.data.data[0].sessionStatus == "ENDED") {
         // this.startLiveSession = "Start Session";
         this.studentBtn = "";
       }
       if (response.data.data[0].sessionStatus == "STARTED") {
         // this.startLiveSession = "Join Session";
         this.studentBtn = "Join Session";
       }
       if (response.data.data.length == 0) {
         this.startLiveSession = "Start Session";
         this.studentBtn = "";
       } else {
         this.liveLink = response.data.data[0].link;
+        this.livePassword = response.data.data[0].password;
         var room = response.data.data[0].roomName;
         var username = this.currentUser;
         var roomPassword = response.data.data[0].password;
         var this_ = this;
         // console.log(this.room, this.roomPassword, this.username);
+        // console.log("live session link", this.liveLink);
+        // console.log("live session password", this.livePassword);
         if (username != "" || room != "") {
           if (window.JitsiMeetExternalAPI) {
             // var person = prompt("Please enter your name:", "Rabie");
             if (username != null || username != "") {
               this_.username = username;
             }
             if (roomPassword != null || roomPassword != "") {
               this_.roomPassword = roomPassword;
             }
             // var room = prompt("Please enter your room:", "Test Room");
             if (room != null || room != "") {
               this_.room = room;
             }
             // this.startConference();
           }
         }
       }
     },
   },
   async created() {
     // console.log(
     //   "this.$store.state.studentsData",
     //   this.$store.state.studentsData[0].name
     // );
     this.currentUser = localStorage.getItem("studentName");
     this.token = this.$store.state.token;
     if (this.$store.state.role === "PARENT") {
       await this.studentClasses();
     }
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     if (this.$store.state.role === "PARENT") {
       await this.getStudentCourses({
         classId: localStorage.getItem("parentClassId"),
         studentId: localStorage.getItem("parentStudentId"),
       });
     }
   },
 };
 </script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .card-border {
   border: 1px #bdbdbd solid;
   border-radius: 3px;
 }
 .reply-desc {
   border: 1px solid #f2f2f2;
 }
 .open-dialog-button {
   background: #827bfa !important;
   border-color: #827bfa !important;
   text-transform: none !important;
 }
 .reply-btn {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 #jitsi-container {
   height: 100vh;
 }
 </style>

src/pages/Exam/examSchedule.vue

Diff comments View file @7014df6

     <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit Exam Schedule****** -->
     <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Exam Schedule</label>
             <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-form ref="form">
             <v-container fluid>
               <v-layout wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Exam Name:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-select
                         :rules="examRules"
                         :items="examList"
                         v-model="editedItem.examId"
                         label="Select your Exam Name"
                         item-text="examName"
                         item-value="_id"
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Class:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-select
                         v-model="editedItem.classId"
                         label="Select your Class"
                         type="text"
                         :items="classList"
                         item-text="classNum"
                         item-value="_id"
                         @change="getSections(editedItem.classId)"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Subject Name:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-select
                         :items="subjects"
                         label="Select your Subject"
                         v-model="editedItem.subjectName"
                         item-text="subjectName"
                         item-value="subjectName"
                         name="Select Subject"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Date:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-menu
                         ref="editDate"
                         :close-on-content-click="false"
                         v-model="editDate"
                         :nudge-right="40"
                         :return-value.sync="editDate"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.date"
                           label="Select Date"
                           append-icon="event"
                           readonly
                         ></v-text-field>
                         <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Time From:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-menu
                         ref="menuEdit"
                         :close-on-content-click="false"
                         v-model="menuEdit"
                         :nudge-right="40"
                         :return-value.sync="editedItem.timeFrom"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         max-width="290px"
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.timeFrom"
                           label="Select your time From"
                           append-icon="access_time"
                           readonly
                         ></v-text-field>
                         <v-time-picker
                           v-model="editedItem.timeIn"
                           @change="$refs.menuEdit.save(editedItem.timeIn)"
                         ></v-time-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Time To:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-menu
                         ref="timeToEdit"
                         :close-on-content-click="false"
                         v-model="timeToEdit"
                         :nudge-right="40"
                         :return-value.sync="editedItem.timeTo"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         max-width="290px"
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.timeTo"
                           label="Select your Time To"
                           append-icon="access_time"
                           readonly
                         ></v-text-field>
                         <v-time-picker
                           v-model="editedItem.timeTo"
                           @change="$refs.timeToEdit.save(editedItem.timeTo)"
                         ></v-time-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Room:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your room"
                         v-model="editedItem.room"
                         @keyup.enter="save"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="update" class="add-button">Save</v-btn>
                   </v-card-actions>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW Exam Schedule  DATA ******  -->
     <v-dialog v-model="profileExamScheduleDialog" max-width="600px" persistent>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Exam Schedule</label>
             <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Exam Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.examId}}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Class:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.classId }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Section:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.sectionId }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Subject Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Time From:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Time To:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.timeTo }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Room:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.room }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- *****  Exam Schedule TABLE****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addExamScheduleDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'TEACHER' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addExamScheduleDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
       </v-btn>
       <v-spacer></v-spacer>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getScheduleData.classId"
           label="Select your class"
           type="text"
           :items="classList"
           item-text="classNum"
           item-value="_id"
           @change="getSections(getScheduleData.classId)"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getScheduleData.sectionId"
           label="Select your section"
           type="text"
           :items="addSection"
           item-text="name"
           item-value="_id"
           @change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="ScheduleData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>
           <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
           <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
           <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
           <td class="td td-row text-xs-center">{{ props.item.room }}</td>
           <td class="td td-row text-xs-center">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top v-if="role != 'TEACHER' ">
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top v-if="role != 'TEACHER' ">
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteSchedule(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD  Exam Schedule ****** -->
-    <v-dialog v-model="addExamScheduleDialog" max-width="600" v-if="addExamScheduleDialog" persistent>
+    <v-dialog
+      v-model="addExamScheduleDialog"
+      max-width="600"
+      v-if="addExamScheduleDialog"
+      persistent
+    >
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam Schedule</label>
             <v-icon
               size="24"
               class="right"
               @click="$refs.form.reset();addExamScheduleDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Exam Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     label="Select your Exam Name"
                     :rules="examRules"
                     :items="examList"
                     v-model="addSchedule.examId"
                     item-text="examName"
                     item-value="_id"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     v-model="addSchedule.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(addSchedule.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="addSection"
                     label="Select Section"
                     v-model="addSchedule.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Subject Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="subjects"
                     label="Select Subject"
                     v-model="addSchedule.subjectName"
                     item-text="subjectName"
                     item-value="subjectName"
                     name="Select Section"
                     :rules="subjectRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Date:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menu2"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.date"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.date"
                       :rules="examScheduleDateRules"
                       label="Select Date"
                       append-icon="event"
                       readonly
                     ></v-text-field>
                     <v-date-picker
                       v-model="addSchedule.date"
                       @input="$refs.menu2.save(addSchedule.date)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Time From:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menuA"
                     :close-on-content-click="false"
                     v-model="menuB"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.timeFrom"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.timeIn"
                       label="Select your time From"
                       append-icon="access_time"
                       :rules="timeInRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="addSchedule.timeIn"
                       @change="$refs.menuA.save(addSchedule.timeIn)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Time To:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.timeTo"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.timeTo"
                       label="Select your Time To"
                       append-icon="access_time"
                       :rules="timeOutRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="addSchedule.timeTo"
                       @change="$refs.menu.save(addSchedule.timeTo)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Room:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-text-field
                     placeholder="fill your room"
                     :rules="roomRules"
                     v-model="addSchedule.room"
                     @keyup.enter="submit"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     date: null,
     editDate: false,
     menu1: false,
     menuB: false,
     menu2: false,
     menuEdit: false,
     timeToEdit: false,
     show: true,
     showSearch: false,
     addExamScheduleDialog: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     date: null,
     search: "",
     showLoader: false,
     editExamScheduleDialog: false,
     profileExamScheduleDialog: false,
     valid: true,
     role: "",
     pagination: {
       rowsPerPage: 10,
     },
     examRules: [(v) => !!v || "Exam Name is required"],
     classRules: [(v) => !!v || "Class Name is required"],
     sectionRules: [(v) => !!v || "section is required"],
     subjectRules: [(v) => !!v || "Subject is required"],
     timeInRules: [(v) => !!v || "Time In is required"],
     timeOutRules: [(v) => !!v || "time Out s is required"],
     roomRules: [(v) => !!v || "Room is required"],
     examScheduleDateRules: [(v) => !!v || "Date is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No",
       },
       {
         text: "Exam Name",
         vaue: "examId.examName",
         sortable: false,
         align: "center",
       },
       {
         text: "Class",
         value: "classId.classNum",
         sortable: false,
         align: "center",
       },
       // {
       //   text: "Section",
       //   value: "sectionId.name",
       //   sortable: false,
       //   align: "center"
       // },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
         align: "center",
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
         align: "center",
       },
       {
         text: "Time",
         value: "timeFrom",
         sortable: false,
         align: "center",
       },
       {
         text: "Room",
         value: "room",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     addSection: [],
     examList: [],
     subjects: [],
     addSchedule: {},
     editedItem: {
       sectionId: {
         name: "",
       },
     },
     getScheduleData: {},
     ScheduleData: [],
     token: "",
   }),
   watch: {
     addExamScheduleDialog: function (val) {
       if (!val) {
         this.addSchedule = [];
       }
     },
   },
   methods: {
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getSchedulesList() {
       if (this.addSchedule.classId) {
         this.getScheduleData.classId = this.addSchedule.classId;
       }
       this.showLoader = true;
       http()
         .get("/getSchedulesList", {
           params: {
             classId: this.getScheduleData.classId,
             sectionId: this.getScheduleData.sectionId,
           },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.ScheduleData = response.data.data;
           // console.log("this.ScheduleData", this.ScheduleData);
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       // console.log("item", item);
       this.editedIndex = this.ScheduleData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.examId = this.editedItem.examId._id;
       this.editedItem.classId = this.editedItem.classId._id;
       this.editedItem.sectionId =
         this.editedItem.sectionId === null
           ? (this.editedItem.sectionId = this.editedItem.sectionId = "")
           : this.editedItem.sectionId._id;
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editExamScheduleDialog = true;
     },
     profile(item) {
       this.editedIndex = this.ScheduleData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.examId = this.editedItem.examId.examName;
       this.editedItem.classId = this.editedItem.classId.classNum;
       this.editedItem.sectionId =
         this.editedItem.sectionId === null
           ? (this.editedItem.sectionId = this.editedItem.sectionId = "")
           : this.editedItem.sectionId.name;
       this.profileExamScheduleDialog = true;
     },
     deleteSchedule(item) {
       let deleteSchedule = {
         scheduleId: item._id,
       };
       http()
         .delete(
           "/deleteSchedule",
           confirm("Are you sure you want to Delete this?") && {
             params: deleteSchedule,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSchedulesList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.dialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createSchedule", this.addSchedule)
           .then((response) => {
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             http()
               .get("/getSchedulesList", {
                 params: {
                   classId: this.addSchedule.classId,
                   sectionId: this.addSchedule.sectionId,
                 },
                 headers: { Authorization: "Bearer " + this.token },
               })
               .then((response) => {
                 this.ScheduleData = response.data.data;
                 this.showLoader = false;
               })
               .catch((error) => {
                 this.showLoader = false;
                 this.loadingSearch = false;
                 this.snackbar = true;
                 this.color = "error";
                 this.text = error.response.data.message;
                 if (error.response.status === 401) {
                   this.$router.replace({ path: "/" });
                   this.$store.dispatch("setToken", null);
                   this.$store.dispatch("Id", null);
                 }
               });
             this.addExamScheduleDialog = false;
             // this.clear();
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
       this.loading = false;
     },
     update() {
       this.editedItem.scheduleId = this.editedItem._id;
       http()
         .put("/updateSchedule", this.editedItem)
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully Edit Exam Schedule";
           this.color = "green";
           this.editExamScheduleDialog = false;
           this.getSchedulesList();
           this.close();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.messages;
           this.color = "error";
           this.loading = false;
         });
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       for (let i = 0; i < this.classList.length; i++) {
         if (_id == this.classList[i]._id) {
           this.subjects = this.classList[i].subjects;
         }
       }
+      this.ScheduleData = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
         })
         .catch((err) => {});
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch((error) => {
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getExamList();
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Mark/mark.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EXISTING MARK TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addMarkDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addMarkDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark
       </v-btn>
       <v-layout class="hidden-sm-only hidden-xs-only">
         <v-flex md3 lg2 class="ml-2">
           <v-select
             v-model="getMark.classId"
             label="Select your class"
             type="text"
             :items="classList"
             item-text="classNum"
             item-value="_id"
             @change="getSections(getMark.classId)"
             required
           ></v-select>
         </v-flex>
         <v-flex md3 lg2 class="ml-2">
           <v-select
             :items="addSection"
             label="Select your Section"
             v-model="getMark.sectionId"
             item-text="name"
             item-value="_id"
             name="Select Section"
             required
           ></v-select>
         </v-flex>
         <v-spacer></v-spacer>
         <v-btn
           @click="getStudents"
           round
           dark
           :loading="loading"
           class="right open-dialog-button mt-2"
         >Mark</v-btn>
       </v-layout>
       <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only">
       <v-flex xs12 sm12 lg12>
         <v-layout wrap>
           <v-flex xs12 sm12 lg3>
             <v-layout>
               <v-flex xs3 sm6 lg2 class="subheading mt-4">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs12 sm12 lg8 class="ml-2">
                 <v-select
                   v-model="getMark.classId"
                   label="Select your class"
                   type="text"
                   :items="classList"
                   item-text="classNum"
                   item-value="_id"
                   @change="getSections(getMark.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12 lg3>
             <v-layout>
               <v-flex xs3 sm6 lg2 class="subheading mt-4">
                 <label class="right">Section:</label>
               </v-flex>
               <v-flex xs12 sm12 lg8 class="ml-2">
                 <v-select
                   :items="addSection"
                   label="Select your Section"
                   v-model="getMark.sectionId"
                   item-text="name"
                   item-value="_id"
                   name="Select Section"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12 lg6>
             <v-btn
               @click="getStudents"
               round
               dark
               :loading="loading"
               class="right mt-3 open-dialog-button"
             >Mark</v-btn>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-card>
     <v-data-table
       :headers="headers"
       :items="getStudentsList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="td td-row text-xs-center">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="td td-row text-xs-center">{{ props.item.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
           <td class="td td-row text-xs-center">{{ props.item.email }}</td>
           <td class="td td-row text-xs-center">
             <span>
               <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }">
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:25px; "
                     src="/static/icon/view.png"
                   />
                   <span>View</span>
                 </v-tooltip>
               </router-link>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD  Mark Schedule ****** -->
     <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent>
       <v-card flat class>
         <v-layout class="pa-3 card-style white--text">
           <v-flex xs12>
             <label class="title text-xs-center">Add Mark</label>
             <v-icon
               size="24"
               class="right white--text"
               @click="$refs.form.reset();addMarkDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-flex xs12 sm12 lg12>
               <v-layout wrap>
                 <v-flex xs12 sm12 lg10>
                   <v-layout wrap>
                     <v-flex xs12 sm12 lg3>
                       <v-flex xs3 sm2 lg2 class="subheading">
                         <label>Exam:</label>
                       </v-flex>
                       <v-flex xs12 sm12 lg10>
                         <v-select
                           label="Select your Exam Name"
                           :items="examList"
                           v-model="addMark.examId"
                           :rules="examRules"
                           item-text="examName"
                           item-value="_id"
                         ></v-select>
                       </v-flex>
                     </v-flex>
                     <v-flex xs12 sm12 lg3>
                       <v-flex xs3 sm6 lg2 class="subheading">
                         <label>Class:</label>
                       </v-flex>
                       <v-flex xs12 sm12 lg10 class>
                         <v-select
                           v-model="addMark.classId"
                           label="Select your class"
                           type="text"
                           :items="classList"
                           item-text="classNum"
                           item-value="_id"
                           :rules="classRules"
                           @change="getSections(addMark.classId)"
                           required
                         ></v-select>
                       </v-flex>
                     </v-flex>
                     <v-flex xs12 sm12 lg3>
                       <v-flex xs3 sm6 lg2 class="subheading">
                         <label>Section:</label>
                       </v-flex>
                       <v-flex xs12 sm12 lg10 class>
                         <v-select
                           :items="addSection"
                           label="Select your Section"
                           v-model="addMark.sectionId"
                           item-text="name"
                           item-value="_id"
                           name="Select Section"
                           :rules="sectionRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-flex>
                     <v-flex xs12 sm12 lg3>
                       <v-flex xs3 sm6 lg2 class="subheading">
                         <label>Subject:</label>
                       </v-flex>
                       <v-flex xs12 sm12 lg10 class>
                         <v-select
                           :items="subjects"
                           label="Select your Subject"
                           v-model="addMark.subjectId"
                           item-text="subjectName"
                           item-value="_id"
                           name="Select Section"
                           :rules="subjectRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12 lg2>
                   <v-flex xs12 sm12 lg12>
                     <v-btn
                       @click="findStudents"
                       round
                       dark
                       :loading="loading"
                       class="right mt-4 open-dialog-button"
                     >Mark</v-btn>
                   </v-flex>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- ****** ADD  MARK TABLE DATA ****** -->
             <v-card class="mt-4 elevation-0 body-color">
               <v-data-table
                 :headers="headerOfMark"
                 :items="getStudentData"
                 :pagination.sync="pagination"
                 :search="search"
                 class="body-color"
               >
                 <template slot="items" slot-scope="props">
                   <tr class="tr">
                     <td class="td td-row">{{ props.index + 1}}</td>
                     <td class="text-xs-center td td-row">
                       <v-avatar size="40">
                         <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                         <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                       </v-avatar>
                     </td>
                     <td class="text-xs-center td td-row">{{ props.item.name}}</td>
                     <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td>
                     <td
                       class="text-xs-center markTable td td-row"
                       v-for="(marks, index) in props.item.marksObtained"
                       :key="'A'+ index"
                     >
                       <v-text-field v-model="marks.marksScored"></v-text-field>
                     </td>
                   </tr>
                 </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-card>
             <v-layout class="mt-2">
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs12>
                     <v-btn
                       @click="submit"
                       round
                       dark
                       :loading="loading"
                       class="right add-button"
                     >Add Mark</v-btn>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     show: true,
     showSearch: false,
     snackbar: false,
     date: null,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     search: "",
     show: true,
     showSearch: false,
     showLoader: false,
     dialog: false,
     dialog1: false,
     valid: true,
     addMarkDialog: false,
     addSection: [],
     pagination: {
       rowsPerPage: 10,
     },
     classRules: [(v) => !!v || "Class is required"],
     sectionRules: [(v) => !!v || "section is required"],
     subjectRules: [(v) => !!v || "Subject is required"],
     examRules: [(v) => !!v || "Exam is required"],
     headerOfMark: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No",
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
         align: "center",
       },
     ],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No",
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
         align: "center",
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     examList: [],
     subjects: [],
     addMark: {},
     getMark: {},
     getScheduleData: {},
     markData: [],
     getStudentData: [],
     getStudentsList: [],
     token: "",
   }),
   watch: {
     addMarkDialog: function (val) {
       if (!val) {
         this.addMark = [];
         this.getStudentData = [];
       }
     },
   },
   methods: {
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getSections(_id) {
       this.showLoader = true;
       for (let i = 0; i < this.classList.length; i++) {
         if (_id == this.classList[i]._id) {
           this.subjects = this.classList[i].subjects;
         }
       }
+      this.getStudentsList = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
     findStudents() {
       this.getStudentData = [];
       if (this.$refs.form.validate()) {
         this.showLoader = true;
         http()
           .get("/getStudentWithClass", {
             params: {
               classId: this.addMark.classId,
               sectionId: this.addMark.sectionId,
             },
           })
           .then((response) => {
             this.getStudentData = response.data.data;
             // this.showLoader = false;
             this.showLoader = true;
             http()
               .get("/getMarkDistributionsList", {
                 params: this.addMark,
               })
               .then((response) => {
                 this.showLoader = false;
                 this.headerOfMark.length = 4;
                 for (var i = 0; i < response.data.data.length; i++) {
                   this.headerOfMark.push({
                     text:
                       response.data.data[i].distributionType +
                       " (" +
                       response.data.data[i].markValue +
                       ")",
                     sortable: false,
                     align: "center",
                   });
                 }
                 for (var n = 0; n < this.getStudentData.length; n++) {
                   this.getStudentData[n].marksObtained = [];
                   for (var j = 0; j < response.data.data.length; j++) {
                     this.getStudentData[n].marksObtained.push({
                       markDistributionId: response.data.data[j]._id,
                       marksScored: 0,
                       markValue: response.data.data[j].markValue,
                       distributionType: response.data.data[j].distributionType,
                     });
                   }
                   // if (marks.marksScored > marks.marksObtained) {
                   //   this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained;
                   //   this.marks.marksScored = marks.marksObtained;
                   // }
                 }
               })
               .catch((error) => {
                 this.showLoader = false;
               });
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
     },
     async submit() {
       for (let [j, item] of this.getStudentData.entries()) {
         for (var k = 0; k < item.marksObtained.length; k++) {
           if (
             item.marksObtained[k].marksScored > item.marksObtained[k].markValue
           ) {
             this.snackbar = true;
             this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in
               "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`;
             this.color = "error";
             return;
           }
         }
         let data = {
           examId: this.addMark.examId,
           classId: this.addMark.classId,
           sectionId: this.addMark.sectionId,
           subjectId: this.addMark.subjectId,
           studentId: item._id,
           studentsMarks: item.marksObtained,
         };
         try {
           let response = await http().post("/createMark", data);
           if (j + 1 === this.getStudentData.length) {
             this.getStudentData = [];
             this.snackbar = true;
             this.addMarkDialog = false;
             this.text = response.data.message;
             this.color = "green";
             this.$refs.form.reset();
           }
         } catch (error) {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         }
       }
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getMark.classId,
             sectionId: this.getMark.sectionId,
           },
         })
         .then((response) => {
           this.getStudentsList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           //   console.log("err====>", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getExamList();
   },
 };
 </script>
 <style scoped>
 .markTable {
   max-width: 80px !important;
 }
 </style>

src/pages/Report/idCard.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- **** Id Card Select options **** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg4>
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-autocomplete
                     v-model="getReport.role"
                     label="Select Type"
                     :items="getRoles"
                     item-text="name"
                     return-object
                     @change="getRoleInputs(getReport.role)"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- SELECT CLASS -->
             <v-flex xs12 sm12 lg4 v-if="showClass">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select Class"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- SELECT SECTION -->
             <v-flex xs12 sm12 lg4 v-if="showSections">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- SELECT STUDENT -->
             <v-flex xs12 sm12 lg4 v-if="showStudents">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     :items="getSelectUserData"
                     label="Select Student"
                     v-model="getReport._id"
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="showTeacher">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport._id"
                     label="Select Teacher"
                     :items="getSelectUserData"
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="showAdmin">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport._id"
                     label="Select Admin"
                     :items="getSelectUserData"
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="showAccountant">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport._id"
                     label="Select Accountant"
                     :items="getSelectUserData"
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="showLibrarian">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport._id"
                     label="Select Librarian"
                     :items="getSelectUserData "
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4>
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-autocomplete
                     label="Select View Type"
                     type="text"
                     :items="typeList"
                     v-model="getReport.viewType"
                     item-text="name"
                     item-value="value"
                     :rules="typeRules"
                     @change="getReportType(getReport.viewType)"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4>
               <v-btn
                 @click="getCards"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <div>
       <v-layout v-show="showReport">
         <v-flex xs12>
           <v-card class="transparent elevation-0">
             <!-- print button -->
             <v-layout>
               <v-flex xs12>
                 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
                   Print
                   <v-icon right dark>print</v-icon>
                 </v-btn>
               </v-flex>
             </v-layout>
           </v-card>
           <v-layout row wrap id="printMe" justify-center>
             <div
               v-for="(getCard,index) in getCard"
               :key="index"
               style="page-break-after: always; width:100%;margin:14px auto;background:transparent;"
             >
               <v-container grid-list-md>
                 <v-layout class="col-sm-12">
                   <div
                     style="font-family: arial;
                   max-width: 794px;
                   max-height: 1123px;
                   margin-left: auto;
                   margin-right: auto;
                   -webkit-print-color-adjust: exact;"
                   >
                     <div
                       style="
                      float: left;
                      width: 520px;
                      background: #fff;
                      border: 1px solid lightgray;
                      position:relative;"
                     >
                       <!-- bottom-right-side-image -->
                       <img
                         src="/static/icon/shape1.png"
                         alt="shape"
                         style="position:absolute;width: 90px;"
                       />
                       <!-- Front Side -->
                       <v-layout
                         style="
                      text-align: center;
                      "
                         v-if="frontPart"
                       >
                         <v-flex xs12>
                           <!-- school Logo Url -->
                           <img
                             v-if="getCard.schoolLogoUrl"
                             :src="getCard.schoolLogoUrl"
                             alt="schoollogo"
                             style="
                          width: 110px;
                          margin-top:10px;
                          overflow:hidden"
                           />
                           <img
                             src="/static/default_thumb.png"
                             v-if="!getCard.schoolLogoUrl"
                             alt="schoollogo"
                             style="
                          width: 110px;
                          margin-top:10px;
                          overflow:hidden"
                           />
                           <v-layout style="margin:auto">
                             <!-- profile url -->
                             <img
                               v-if="getCard.profilePicUrl"
                               :src="getCard.profilePicUrl"
                               alt="profileImage"
                               style=";
                           width: 110px;
                           margin:10px auto;
                           width: 110px;
                           margin: 10px auto;
                           border: 3px solid #323232;
                           border-radius: 12px;"
                             />
                             <img
                               style="
                         width: 110px;
                         margin:10px auto;
                         width: 110px;
                         margin: 10px auto;"
                               alt="dummy"
                               src="/static/icon/user.png"
                               v-if="!getCard.profilePicUrl && getCard.role != '2'"
                             />
                           </v-layout>
                           <p
                             style="color: #302653;font-size:24px;
                           letter-spacing: 4px;
                           margin-bottom:14px;"
                           >
                             <b>{{ getCard.name}}</b>
                           </p>
                           <p
                             style="color: #302653;
                           font-size:14px;
                           letter-spacing: 4px;
                           margin-bottom:14px;"
                           >
                             <b>{{ getCard.gender}}</b>
                           </p>
                           <p
                             v-if="getCard.classId"
                             style="color: #302653;
                           font-size:24px;
                           letter-spacing: 4px;
                           margin-bottom:14px;"
                           >{{ getCard.classId.classNum }}</p>
                           <p
                             v-if="getCard.classId"
                             style="color: #302653;
                           font-size:24px;
                           letter-spacing: 4px;
                           margin-bottom:14px;"
                           >{{ getCard.sectionId.name }}</p>
                           <p
                             v-if="getCard.rollNo"
                             style="color: #302653;
                            font-size:24px;
                           letter-spacing: 2px;
                           margin-bottom:10px;"
                           >Roll: {{ getCard.rollNo }}</p>
                           <p
                             v-if="getCard.joinDate"
                             style="color: #302653;
                           margin-bottom:10px;
                           font-size:16px;
                           letter-spacing: 2px;"
                           >{{ dates(getCard.joinDate) }}</p>
                           <p
                             v-if="getCard.joiningDate"
                             style="color: #302653;
                           margin-bottom:10px;
                           font-size:16px;
                           letter-spacing: 2px;"
                           >{{ dates(getCard.joiningDate) }}</p>
                           <p
                             v-if="getCard.phone"
                             style="color: #302653;
                           margin-bottom:10px;
                           font-size:16px;
                           letter-spacing: 2px;"
                           >{{ getCard.phone }}</p>
                           <p
                             style="
                         font-size: 19px;
                         font-weight: 100;
                         color: rgb(48, 38, 83);
                         letter-spacing: 5px;
                         margin-bottom:10px;"
                           >
                             <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
                             <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
                           </p>
                           <p
                             style="
                         font-size: 17px;
                         font-weight: 100;
                         color: rgb(48, 38, 83);
                         letter-spacing: 4px;
                         margin-bottom:14px;"
                           >{{ getCard.email}}</p>
                         </v-flex>
                       </v-layout>
                       <!-- back side -->
                       <v-layout style="
                      text-align: center;" v-if="backPart">
                         <v-flex xs12>
                           <!-- school Logo Url -->
                           <img
                             v-if="getCard.schoolLogoUrl"
                             :src="getCard.schoolLogoUrl"
                             alt="schoollogo"
                             style="
                          width: 110px;
                          margin-top:10px;
                          overflow:hidden"
                           />
                           <img
                             v-if="getCard.schoolId"
                             :src="getCard.schoolId.schoolLogoUrl"
                             alt="schoollogo"
                             style="
                          width: 110px;
                          margin-top:10px;
                          overflow:hidden"
                           />
                           <p
                             v-if="getCard.schoolLogoUrl"
                             style="color: #302653;
                           font-size:24px;
                           letter-spacing: 4px;
                           margin-bottom:14px;"
                           >
                             <b>{{ getCard.name}}</b>
                           </p>
                           <p
                             v-if="getCard.city"
                             style="
                         font-size: 17px;
                         font-weight: 100;
                         color: rgb(48, 38, 83);
                         letter-spacing: 4px;
                         margin-bottom:14px;"
                           >{{ getCard.city}}</p>
                           <p
                             style="
                         font-size: 17px;
                         font-weight: 100;
                         color: rgb(48, 38, 83);
                         letter-spacing: 4px;
                         margin-bottom:14px;"
                           >
                             {{ getCard.address }}
                             {{ getCard.presentAddress }}
                             <span
                               v-if="getCard.state"
                             >({{ getCard.state }})</span>
                           </p>
                           <p
                             v-if="getCard.establishmentYear"
                             style="
                         font-size: 17px;
                         font-weight: 100;
                         color: rgb(48, 38, 83);
                         letter-spacing: 4px;
                         margin-bottom:14px;"
                           >{{ getCard.establishmentYear }}</p>
                         </v-flex>
                       </v-layout>
                       <!-- bottom-right-side-image -->
                       <img
                         src="static/icon/shape2.png"
                         alt="shape2"
                         style="bottom: 0;
                       position: absolute;
                       right: 0;
                       width: 110px;"
                       />
                     </div>
                   </div>
                 </v-layout>
               </v-container>
             </div>
           </v-layout>
         </v-flex>
       </v-layout>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 var qs = require("qs");
 export default {
   data: () => ({
     showLoader: false,
     valid: true,
     report: {},
     userData: {},
     snackbar: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     showReport: false,
     frontPart: false,
     backPart: false,
     showClass: false,
     showTeacher: false,
     showAdmin: false,
     showAccountant: false,
     showLibrarian: false,
     hideprintIdCard: false,
     hidebackprintIdCard: false,
     showStudents: false,
     showSections: false,
     getRoles: [],
     classList: [],
     getCard: [],
     addSection: [],
     // getStudentsList:
     // teacherList: [],
     getSelectUserData: [],
     // Users: [],
     getReport: {},
     typeRules: [(v) => !!v || "Type is required"],
     typeList: [
       {
         name: "Front Part",
         value: "frontPart",
       },
       {
         name: "Back Part",
         value: "backPart",
       },
     ],
     backgroundList: ["Yes", "No"],
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getUserData();
     this.getRole();
   },
   methods: {
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
       return date;
     },
     getReportType() {
       if (this.getReport.viewType === "frontPart") {
         this.frontPart = true;
         this.backPart = false;
       }
       if (this.getReport.viewType === "backPart") {
         this.frontPart = false;
         this.backPart = true;
       }
     },
     getRoleInputs(role) {
       // console.log("role", role);
       this.showReport = false;
       this.getReport._id = "";
       this.getCard = "";
       this.classList = [];
       this.addSection = [];
       this.getReport.classId = "";
       this.getReport.sectionId = "";
       this.getReport._id = "";
       this.getSelectUserData = [];
       if (role.name === "STUDENT") {
         // console.log("role", role);
         this.showClass = true;
         this.showTeacher = false;
         this.showAdmin = false;
         this.showAccountant = false;
         this.showLibrarian = false;
         this.showStudents = false;
         this.showSections = false;
         this.getClass();
       }
       if (role.name === "TEACHER") {
         this.showTeacher = true;
         this.showClass = false;
         this.showAdmin = false;
         this.showAccountant = false;
         this.showLibrarian = false;
         this.showStudents = false;
         this.showSections = false;
         this.getTeacherList();
       }
       if (role.name === "ADMIN") {
         this.showAdmin = true;
         this.showTeacher = false;
         this.showClass = false;
         this.showAccountant = false;
         this.showLibrarian = false;
         this.showStudents = false;
         this.showSections = false;
         this.getUsersList(role.role);
       }
       if (role.name === "ACCOUNTANT") {
         this.showAccountant = true;
         this.showAdmin = false;
         this.showTeacher = false;
         this.showClass = false;
         this.showLibrarian = false;
         this.showStudents = false;
         this.showSections = false;
         this.getUsersList(role.role);
       }
       if (role.name === "LIBRARIAN") {
         this.showLibrarian = true;
         this.showAccountant = false;
         this.showAdmin = false;
         this.showTeacher = false;
         this.showClass = false;
         this.showStudents = false;
         this.showSections = false;
         this.getUsersList(role.role);
       }
     },
     prindIDCardReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       this.getSelectUserData = [];
       this.showLoader = true;
       http()
         .get("/getParticularUserDetail")
         .then((response) => {
           let mergeObj = {
             name: "Select All",
             id: "Select All",
           };
           this.getSelectUserData.push(mergeObj);
           let getUserDetails = response.data.data;
           this.getSelectUserData.push(getUserDetails);
           this.showLoader = false;
           // this.adminList = response.data.data;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getRole() {
       this.showLoader = true;
       http()
         .get("/getRolesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           var getRoles = [];
           getRoles = response.data.data;
           for (let i = 0; i < getRoles.length; i++) {
             if (
               getRoles[i].name != "SUPERADMIN" &&
               getRoles[i].name != "PARENT"
             ) {
               this.getRoles.push(getRoles[i]);
             }
           }
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
     getClass() {
       // console.log("get classes");
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
+      this.getCard = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showSections = true;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.getSelectUserData = [];
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId,
           },
         })
         .then((response) => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All",
           });
           this.getSelectUserData = response.data.data;
           this.showStudents = true;
           this.showLoader = false;
         })
         .catch((error) => {
           //   console.log("err====>", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getCards() {
       var getSelectUserId = [];
       for (let i = 0; i < this.getSelectUserData.length; i++) {
         /* if the selected user id mathches any id in the original user data then push it in
         array, this way only one id will be pushed */
         if (this.getReport._id === this.getSelectUserData[i]._id) {
           getSelectUserId.push(this.getSelectUserData[i]._id);
         } /* else if select all option is selected then all ids will be pushed */ else if (
           this.getReport._id == "Select All"
         ) {
           getSelectUserId.push(this.getSelectUserData[i]._id);
           if (
             getSelectUserId[0] == undefined ||
             getSelectUserId[0] == "Select All"
           ) {
             getSelectUserId.shift();
           }
         }
       }
       if (this.$refs.form.validate()) {
         this.showLoader = true;
         // var strigified = JSON.stringify(getSelectUserId)
         // var profileId = [];
         // profileId = getSelectUserId;
         var idcardPayload = {
           profileId: getSelectUserId,
           role: this.getReport.role.role,
         };
         http()
           .put("/getIdCardDetail", idcardPayload, {
             headers: {
               Authorization: "Bearer " + this.token,
             },
             paramsSerializer: (params) => {
               return qs.stringify(params);
             },
             // params: {
             //   profileId: strigified,
             //   role: this.getReport.role.role,
             // },
           })
           .then((response) => {
             this.getCard = "";
             var data = response.data.data;
             if (data.adminData && data.adminData.length != 0) {
               this.getCard = response.data.data.adminData;
               // console.log("this.getCard ", this.getCard);
             }
             if (data.teachersData && data.teachersData.length != 0) {
               this.getCard = response.data.data.teachersData;
             }
             if (data.studentData && data.studentData.length != 0) {
               this.getCard = response.data.data.studentData;
               // console.log("this.getCard--studentData ", this.getCard);
             }
             if (data.usersData && data.usersData.length != 0) {
               this.getCard = response.data.data.usersData;
               // console.log("this.getCard--usersData   ", this.getCard);
             }
             // console.log("this.getCard--all ", response.data.data);
             this.showLoader = false;
             this.showReport = true;
           })
           .catch((error) => {
             this.showLoader = false;
             // console.log("error", error.response.data.errors);
             // if (error.response.data.errors) {
             //   this.snackbar = true;
             //   this.text = " Field is required";
             //   this.color = "error";
             // }
           });
       }
     },
     getTeacherList() {
       this.getSelectUserData = [];
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
           headers: { Authorization: "Bearer " + token },
         })
         .then((response) => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All",
           });
           this.getSelectUserData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getUsersList(role) {
       this.getSelectUserData = [];
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getUsersList?role=" + role, {
           headers: { Authorization: "Bearer " + token },
         })
         .then((response) => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All",
           });
           this.getSelectUserData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getParentDetails() {
       http()
         .get("getParentsList", {
           headers: {
             Authorization: "Bearer " + this.$store.state.token,
           },
         })
         .then((response) => {
           this.parentsList = response.data.data;
         })
         .catch((error) => {
           // console.log("err====>", error.response.data.message);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
   },
 };
 </script>
 <style scoped>
 .Data {
   width: 100%;
   float: left;
   margin-bottom: 0px;
   padding: 0 15px;
   font-size: 14px;
   margin-top: 5px;
   text-align: justify;
 }
 .idcardreport {
   font-family: arial;
   max-width: 794px;
   max-height: 1123px;
   margin-left: auto;
   margin-right: auto;
   -webkit-print-color-adjust: exact;
 }
 .idcardreport1 {
   text-align: center;
   margin-left: 35%;
 }
 .icard-front {
   margin: 3px;
   float: left;
   padding: 10px;
   text-align: center;
   /* height: 520px; */
   width: 520px;
   background: #fff;
   border: 1px solid lightgray;
 }
 .print-data {
   margin: 3px;
   float: left;
   /* border: 1px solid #000; */
   padding: 10px;
   /* width: 55%; */
   text-align: center;
   height: 95%;
 }
 .rightside {
   float: right !important;
 }
 .icard-front h2 {
   font-size: 30px;
 }
 .icard-back h2 {
   font-size: 30px;
 }
 .print-data h2 {
   font-size: 30px;
   text-align: center;
 }
 .print-data img {
   width: 70px;
   height: 70px;
   margin-bottom: 5px;
 }
 .icard-front img {
   width: 70px;
   height: 70px;
   margin-bottom: 5px;
 }
 .icard-back img {
   width: 50px;
   height: 50px;
   margin-bottom: 5px;
 }
 .icard-img {
   width: 50px;
   height: 50px;
   margin-bottom: 5px;
   margin-top: 5px;
   border: 1px solid #ddd;
 }
 .icard-data {
   /* font-family: Arial; */
   max-width: 794px;
   max-height: 1123px;
   margin-left: auto;
   margin-right: auto;
   -webkit-print-color-adjust: exact;
 }
 .icard-back {
   margin: 3px;
   /* float: left; */
   /* border: 1px solid #000; */
   padding: 10px;
   /* width: 55%; */
   text-align: center;
   /* height: 95%; */
   /* margin-top: 35%; */
 }
 .back-icard {
   margin: 3px;
   padding: 10px;
 }
 .icard-back h3 {
   background-color: #000;
   color: #fff;
   font-size: 13px;
   padding: 5px 0px;
   margin: 5px;
   margin-top: 13px;
 }
 .icard-back h5 {
   font-size: 11px;
   color: #000;
   font-weight: bold;
   padding: 5px 0px;
 }
 /* .icard-back p {
   font-size: 15px;
   color: #000;
   font-weight: 500px;
   line-height: 17px;
 } */
 .school-address {
   /* width: 40%; */
   font-weight: 500px;
   color: #000;
 }
 .address {
   font-weight: 500px;
   color: #000;
   text-align: center;
 }
 .icard-bottom {
   padding-top: 5px;
   text-align: center;
 }
 .qrcode {
   float: left;
   width: 50%;
 }
 .qrcode img {
   width: 60px;
   height: 60px;
   margin-top: 15px;
 }
 .session {
   float: right;
   width: 70%;
   margin-top: 15px;
 }
 @media screen and (max-width: 360px) {
   .icard-front {
     width: 316px;
     height: 418px;
     float: inherit;
   }
   .icard-back {
     float: left;
   }
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Student:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-btn
                 style="margin: auto;
                 display: block;"
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-container grid-list-md class="report">
             <v-flex xs12 sm12>
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <v-layout>
                     <v-flex xs12>
                       <v-btn
                         class="open-dialog-button"
                         :loading="printLoader"
                         round
                         dark
                         @click="printProgressReport()"
                       >
                         Print
                         <v-icon right dark>print</v-icon>
                       </v-btn>
                     </v-flex>
                   </v-layout>
                   <div id="printMe">
                     <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
                       <v-card
                         class="ma-3"
                         style="
                         border: 1px solid lightgrey;
                         margin-bottom:0px;
                         padding: 0px"
                       >
                         <div style="border: 1px solid lightgray;">
                           <v-layout>
                             <v-flex xs12 sm12 md12>
                               <div
                                 style="
                               border-bottom: 1px solid #ddd;
                               overflow: hidden;
                               vertical-align: middle;
                               margin: 10px;
                               padding-bottom: 0px;"
                               >
                                 <!-- <v-flex xs12 sm12 md12> -->
                                 <v-layout>
                                   <div class="school-logo">
                                     <img
                                       :src="userData.schoolLogoUrl"
                                       v-if="userData.schoolLogoUrl"
                                       style="width:40px !important;height:40px !important; float: left;"
                                     />
                                     <img
                                       src="/static/schoolIcons/INTRACK_White.png"
                                       v-else-if="!userData.schoolLogoUrl"
                                       style="width:40px !important;height:40px !important; float: left;"
                                     />
                                   </div>
                                   <div class="school-name">
                                     <h3>{{ schoolData.name }}</h3>
                                   </div>
                                 </v-layout>
                                 <!-- </v-flex> -->
                               </div>
                               <!-- Profile School -->
                               <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; ">
                                 <v-layout>
                                   <div
                                     style="flex-basis: 40%;
                                       -webkit-box-flex: 0;
                                       -ms-flex-positive: 0;
                                       flex-grow: 0;
                                       max-width: 40%;"
                                   >
                                     <div
                                       style="padding: 4px;
                                     padding-left: 16px !important;"
                                     >
                                       <p
                                         style="font-size:20px;margin-bottom: 0px;"
                                       >{{ schoolData.name }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >{{ schoolData.address }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >Phone : {{ schoolData.mobile }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >Email : {{ schoolData.email }}</p>
                                     </div>
                                   </div>
                                   <!-- Profile Student Report Card-->
                                   <div
                                     style="flex-basis: 40%;
                                       -webkit-box-flex: 0;
                                       -ms-flex-positive: 0;
                                       flex-grow: 0;
                                       max-width: 40%;"
                                   >
                                     <div v-for="(studentMark,i,index) in value" :key="index">
                                       <p
                                         v-if="index == 0"
                                         style="font-size:20px;margin-bottom: 0px;"
                                       >{{ studentMark[0].studentId.name }}</p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Class :
                                         <b>{{ studentMark[0].classId.classNum }}</b>
                                       </p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Section :
                                         <b>{{ studentMark[0].sectionId.name }}</b>
                                       </p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Roll NO :
                                         <b>{{ studentMark[0].studentId.rollNo }}</b>
                                       </p>
                                     </div>
                                   </div>
                                   <div
                                     style="
                                         -ms-flex-preferred-size: 20%;
                                         flex-basis: 20%;
                                         -webkit-box-flex: 0;
                                         -ms-flex-positive: 0;
                                         flex-grow: 0;
                                         max-width: 20%;"
                                   >
                                     <div v-for="(studentMark,i,index) in value" :key="index">
                                       <div
                                         style="padding-top:16px"
                                         v-if="index == 0"
                                         class="hidden-sm-only hidden-xs-only"
                                       >
                                         <img
                                           src="/static/icon/user.png"
                                           v-if="!studentMark[0].studentId.profilePicUrl"
                                           style="width:60px;height:60px;"
                                         />
                                         <img
                                           :src="studentMark[0].studentId.profilePicUrl"
                                           v-else-if="studentMark[0].studentId.profilePicUrl"
                                           style="width:60px;height:60px;"
                                         />
                                       </div>
                                     </div>
                                   </div>
                                 </v-layout>
                               </v-flex>
                             </v-flex>
                           </v-layout>
                           <v-card
                             v-for="studentMarks in value"
                             :key="studentMarks"
                             style="
                            background-color: #fff;
                            border-color: #fff;
                            color: rgba(0,0,0,0.87);
                            overflow-x: auto;
                            display: block;
                            webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
                            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
                           >
                             <table
                               v-for="(studentMark,key) in studentMarks"
                               :key="key"
                               class="tableRsponsive feeTypeTable subheading"
                               style="border: 1px solid black;
                              border-collapse: collapse;!important
                              table-layout: auto !important;
                              width: 100% !important;
                              overflow: hidden;"
                             >
                               <thead
                                 style="border: 1px solid transparent !important"
                                 v-if="key == 0"
                               >
                                 <tr style="border: 1px solid transparent !important">
                                   <td
                                     colspan="4"
                                     style="text-align: inherit !important;
                                     border-right: inherit;
                                     border-top: inherit;
                                     padding:14px;"
                                   >{{studentMark.examId.examName}}</td>
                                 </tr>
                                 <tr style="border: 1px solid lightgrey !important;padding:4px;">
                                   <td
                                     rowspan="2"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >Subject</td>
                                   <template>
                                     <td
                                       v-for="(studentMarkData,i) in studentMark.studentsMarks"
                                       :key="i"
                                       colspan="2"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{studentMarkData.markDistributionId.distributionType}}</td>
                                     <td
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Total Marks</td>
                                   </template>
                                 </tr>
                                 <tr style="border: 1px solid lightgrey !important;">
                                   <template v-for="(exam, ind) in studentMark.studentsMarks">
                                     <td
                                       :key="ind"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Marks</td>
                                     <td
                                       :key="ind"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Highest Marks</td>
                                   </template>
                                 </tr>
                               </thead>
                               <tbody
                                 style="border: 1px solid lightgrey !important;"
                                 v-if="key == 0"
                               >
                                 <tr v-for="studentMark in studentMarks" :key="studentMark">
                                   <td
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{studentMark.subjectName}}</td>
                                   <template v-for="(exam, index) in  studentMark.studentsMarks">
                                     <td
                                       :key="index"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{exam.marksScored}}</td>
                                     <td
                                       :key="index"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{exam.markDistributionId.markValue}}</td>
                                   </template>
                                   <td
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{studentMark.totalMarks}}</td>
                                 </tr>
                               </tbody>
                               <tfoot v-if="key == studentMarks.length - 1">
                                 <tr style="border: 1px solid lightgrey !important;">
                                   <td
                                     colspan="5"
                                     class="subheding"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                   >Total Marks</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{ studentMark.allSubjectTotalMarks }}</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     class="subheding"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                   >Grade</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     style="
                                      border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                     class="subheding"
                                   >Average Mark</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >-</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px; !important;
                                     font-size: 16px !important;"
                                     class="subheding"
                                   >GPA</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;"
                                   >-</td>
                                 </tr>
                               </tfoot>
                             </table>
                           </v-card>
                         </div>
                       </v-card>
                       <p style="page-break-after: always;">&nbsp;</p>
                     </card>
                   </div>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </v-card>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: false,
     cardData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     loading: false,
     valid: true,
     loading: false,
     showReport: false,
     printLoader: false,
     addSection: [],
     filterData: [],
     getStudentsList: [],
     classRules: [(v) => !!v || "Class is required"],
-    sectionRules: [(v) => !!v || "Class is required"],
+    sectionRules: [(v) => !!v || "Section is required"],
     studentRules: [(v) => !!v || "Student is required"],
     getReport: {},
     classList: [],
     output: null,
     userData: {},
     newData: [],
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
     totalMarks: "",
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getUserData();
   },
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
+      this.cardData = [];
+      this.schoolData = [];
+      this.showReport = false;
+      this.filterData = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId,
           },
         })
         .then((response) => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All",
           });
           this.getStudentsList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           //   console.log("err====>", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getMarkReportList() {
       this.showLoader = true;
       this.showReport = true;
       var getSelectMarks = {};
       if (this.getReport.studentId == "Select All") {
         getSelectMarks = {
           classId: this.getReport.classId,
           sectionId: this.getReport.sectionId,
         };
       } else if (this.getReport.studentId != "Select All") {
         getSelectMarks = {
           classId: this.getReport.classId,
           sectionId: this.getReport.sectionId,
           studentId: this.getReport.studentId,
         };
       }
       http()
         .get("/getParticularMark", {
           params: getSelectMarks,
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           //   console.log("===response===", response.data.data[0].schoolId);
           this.cardData = response.data.data;
           this.schoolData = response.data.data[0].schoolId;
           let newData = response.data.data;
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
             newData[i].studentsId = newData[i].studentId._id;
           }
           var studentMarkArray = [];
           studentMarkArray = _.groupBy(newData, ["studentsId"]);
           for (let data in studentMarkArray) {
             studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
               "examination",
             ]);
           }
           this.filterData = studentMarkArray;
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var allSubjectTotalMarks = 0;
               for (let i = 0; i < this.filterData[data][item].length; i++) {
                 var totalMarks = 0;
                 for (
                   let j = 0;
                   j < studentMarkArray[data][item][i].studentsMarks.length;
                   j++
                 ) {
                   totalMarks +=
                     studentMarkArray[data][item][i].studentsMarks[j]
                       .marksScored;
                 }
                 this.filterData[data][item][i].totalMarks = totalMarks;
                 allSubjectTotalMarks += this.filterData[data][item][i]
                   .totalMarks;
                 this.filterData[data][item][
                   i
                 ].allSubjectTotalMarks = allSubjectTotalMarks;
               }
               // this.totalMarks = totalMarks;
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           // console.log("this.filterData-----------last", this.filterData);
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           // this.text = error.response.data.message;
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     printProgressReport() {
       this.printLoader = true;
       setTimeout(() => {
         // Pass the element id here
         this.$htmlToPaper("printMe");
         this.printLoader = false;
       }, 4000);
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then((response) => {
           this.userData = response.data.data;
         })
         .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
   },
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 0px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 /* .report {
   overflow: hidden;
   max-width: 794px;
   margin: 0px auto;
   margin-bottom: 10px;
   padding: 30px;
 } */
 .line {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   padding-bottom: 10px;
   vertical-align: middle;
   margin-bottom: 4px;
 }
 .school-logo {
   float: left;
 }
 .school-name {
   box-sizing: border-box;
 }
 .school-info {
   width: 100%;
   overflow: hidden;
 }
 .school-address {
   float: left;
   width: 40%;
 }
 .student-data {
   float: right;
   width: 40%;
 }
 .student-info {
   float: left;
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style> s

src/pages/Students/students.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  STUDENTS DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Student Details</label>
             <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <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">
                   <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.profilePicUrl"
                     v-else-if="editedItem.profilePicUrl && !editImageUrl"
                     height="150"
                     style="border-radius:50%; width:150px"
                   />
                   <img
                     v-if="editImageUrl"
                     :src="editImageUrl"
                     style="border-radius:50%; width:150px;height:150px"
                   />
                   <input
                     type="file"
                     style="display: none"
                     ref="editDataImage"
                     accept="image/*"
                     @change="onEditFilePicked"
                   />
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</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-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                       <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</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.dob"
                           placeholder="Select Dob"
                         ></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>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <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 wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.bloodGroup"
                         placeholder="fill your BloodGroup"
                         name="state"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <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"
                         placeholder="Select Gender"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Medical Notes:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.medicalNotes"
                         placeholder="fill your medicalNotes"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Height:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.height"
                         placeholder="fill your Height"
                         name="state"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Weight:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.weight"
                         placeholder="fill your Weight"
                         name="pincode"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         label="Select Image"
                         @click="pickEditFile"
                         v-model="editImageName"
                         append-icon="attach_file"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <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 sm4>
                   <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-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</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-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.rollNo"
                         placeholder="fill roll number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
                       >Permanent Address:</label>
                     </v-flex>
                     <v-flex xs12 sm8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-xs-only hidden-sm-only">
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
                       >Present Address:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.presentAddress"
                         placeholder="Select Country Name"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.rollNo"
                         placeholder="fill roll number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                       <label class>Present Address :</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         v-model="editedItem.presentAddress"
                         placeholder="fill Your present Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                       <label>Permanent addr:</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         name="input-4-3"
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout class="right">
                     <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
     <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Student Details</label>
             <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-flex align-center justify-center layout text-xs-center class="mt-3">
             <v-avatar size="100px">
               <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
               <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
             </v-avatar>
           </v-flex>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>Full Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Email:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1 left">{{ editedItem.email }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Gender:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>D.O.B:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>BloodGroup:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Roll No. :</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.rollNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Height:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.height }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Weight:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.weight }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>City:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.city }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>State:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.state }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Pincode:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.pincode }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Country:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm7 xs6>
                     <h5 class="my-1">{{ editedItem.country }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex sm6 xs6>
                     <b>
                       <h5 class="right my-1">
                         <b>Mobile No:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.mobile }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>FahterName:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>MotherName:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.motherName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>FatherCellNo:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>MotherCellNo:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="my-1 right">
                         <b>AcademicYear:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs8>
                     <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="my-1 right">
                         <b>MedicalNotes:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs6>
                     <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7 class="hidden-xs-only">
                 <v-layout wrap>
                   <v-flex sm4>
                     <b>
                       <h5 class="my-1 right">
                         <b>present Address:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8>
                     <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex sm6 class="hidden-xs-only">
                 <v-layout wrap>
                   <v-flex sm5>
                     <b>
                       <h5 class="my-1 right">
                         <b>Permanent Address:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm7>
                     <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
               <v-flex xs12 sm5>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <b>
                       <h5 class="my-1">
                         <b>present Address:-</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs12>
                     <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <b>
                       <h5 class="my-1">
                         <b>Permanent Address:-</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs12>
                     <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** STUDENTS TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addStudentDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'TEACHER' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addStudentDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student
       </v-btn>
       <v-card-actions class="hidden-xs-only hidden-sm-only">
         <v-flex md13 lg12>
           <v-layout>
             <v-flex lg3 md4>
               <v-select
                 :items="addclass"
                 label="Select Class"
                 v-model="selectStudents.select"
                 item-text="classNum"
                 item-value="_id"
                 name="Select Class"
                 :rules="classRules"
                 @change="getSections(selectStudents.select)"
                 required
                 class="ml-2"
               ></v-select>
             </v-flex>
             <v-flex lg3 md4 class="ml-2">
               <v-layout>
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   v-model="selectStudents.selectSection"
                   item-text="name"
                   item-value="_id"
                   name="Select Section"
-                  :rules="sectionRules"
                   required
                 ></v-select>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-card-actions>
       <v-spacer></v-spacer>
       <v-btn
         @click="findStudents()"
         round
         dark
         :loading="loading"
         class="open-dialog-button hidden-xs-only hidden-sm-only"
       >Find</v-btn>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm7 lg2 md3 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-card flat class="elevation-0 transparent">
       <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
         <v-layout>
           <v-flex xs4>
             <label class="right mt-4">Select Class:</label>
           </v-flex>
           <v-flex xs8>
             <v-select
               :items="addclass"
               label="Select Class"
               v-model="selectStudents.select"
               item-text="classNum"
               item-value="_id"
               name="Select Class"
               :rules="classRules"
               @change="getSections(selectStudents.select)"
               class="px-2"
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs4>
             <label class="right mt-4">Select Section:</label>
           </v-flex>
           <v-flex xs8>
             <v-select
               :items="addSection"
               label="Select Section"
               v-model="selectStudents.selectSection"
               item-text="name"
               item-value="_id"
               name="Select Section"
               :rules="sectionRules"
               class="px-2"
               required
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs5 class="mx-auto mb-2">
             <v-btn
               @click="findStudents()"
               block
               round
               dark
               :loading="loading"
               class="add-button"
             >Find</v-btn>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-card>
     <v-data-table
       :headers="headers"
       :items="studentsData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
-          <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td>
+          <td
-          <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td>
+            class="text-xs-center td td-row"
+          >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td>
+          <td
+            class="text-xs-center td td-row"
+          >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td>
           <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
           <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
           <td class="text-xs-center td td-row">
             <v-switch
               class="pl-3"
               :disabled="role === 'TEACHER'"
               v-model="props.item.status"
               @change="suspendStudentStatus(props.item.status,props.item._id)"
             ></v-switch>
           </td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top v-if="role != 'TEACHER' ">
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top v-if="role != 'TEACHER' ">
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- DIALOG -- ADD STUDENTS DETAILS -->
     <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Student</label>
             <v-icon
               size="24"
               class="right"
               @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
               <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
                 <v-stepper-header>
                   <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                   <v-divider></v-divider>
                   <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                 </v-stepper-header>
                 <v-stepper-items>
                   <v-stepper-content step="1">
                     <v-container fluid class>
                       <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
                         <v-form ref="parentForm" v-model="valid" lazy-validation>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Cell No:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model.trim="parentData.fatherCellNo"
                                     placeholder="fill your father Cell Number"
                                     type="number"
                                     :rules="fatheCellNoRules"
                                     counter="10"
                                     v-on:keyup="getParentDetails()"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Parent Email Id:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Name:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Name:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Cell No:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherCellNo"
                                     placeholder="fill your  Mother Cell Number"
                                     type="number"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Profession:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Profession:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Password:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.password"
                                     placeholder="Enter Your Password"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-flex sm12 class="hidden-xs-only">
                             <v-card-actions>
                               <v-spacer></v-spacer>
                               <v-btn
                                 @click="submitParentDetails"
                                 round
                                 dark
                                 :loading="loading"
                                 v-show="showParent"
                                 class="add-button"
                               >Add</v-btn>
                               <v-btn
                                 v-show="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
                               >Next</v-btn>
                             </v-card-actions>
                           </v-flex>
                           <v-flex
                             xs6
                             class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
                             <v-btn
                               @click="submitParentDetails"
                               round
                               dark
                               :loading="loading"
                               v-show="showParent"
                               class="add-button"
                             >Add</v-btn>
                             <v-btn
                               v-show="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
                             >Next</v-btn>
                           </v-flex>
                         </v-form>
                       </v-flex>
                       <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
                         <v-form ref="parentFormLgScr" v-model="valid" lazy-validation>
                           <v-layout wrap>
                             <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.trim="parentData.fatherCellNo"
                                     placeholder="fill your father Cell Number"
                                     type="number"
                                     :rules="fatheCellNoRules"
                                     counter="10"
                                     required
                                     v-on:keyup="getParentDetails()"
                                   ></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">Parent Email Id:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <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="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     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="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <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="parentData.motherCellNo"
                                     placeholder="fill your  Mother Cell Number"
                                     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">Father Profession:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
                                   <label class="right">Mother Profession:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></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">Password:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     :append-icon="e1 ? 'visibility_off' : 'visibility'"
                                     :append-icon-cb="() => (e1 = !e1)"
                                     :type="e1 ? 'password' : 'text'"
                                     :rules="password"
                                     v-model="parentData.password"
                                     placeholder="Enter Your Password"
                                     :disabled="isFatherCellExists"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-flex sm12 class="hidden-xs-only">
                             <v-card-actions>
                               <v-spacer></v-spacer>
                               <v-btn
                                 @click="submitParentDetails"
                                 round
                                 dark
                                 :loading="loading"
                                 v-show="showParent"
                                 class="add-button"
                               >Add</v-btn>
                               <v-btn
                                 v-show="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
                               >Next</v-btn>
                             </v-card-actions>
                           </v-flex>
                           <v-flex
                             xs6
                             class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
                             <v-btn
                               @click="submitParentDetails"
                               round
                               dark
                               :loading="loading"
                               v-show="showParent"
                               class="add-button"
                             >Add</v-btn>
                             <v-btn
                               v-show="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
                             >Next</v-btn>
                           </v-flex>
                         </v-form>
                       </v-flex>
                     </v-container>
                   </v-stepper-content>
                   <v-stepper-content step="2">
                     <v-flex xs12 sm12>
                       <v-form ref="form" v-model="valid" lazy-validation>
                         <v-layout>
                           <v-flex
                             xs12
                             class="text-xs-center text-sm-center text-md-center text-lg-center"
                           >
                             <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 wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex x4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Class:</label>
                               </v-flex>
                               <v-flex xs8 sm8 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="getSection(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 hidden-xs-only hidden-sm-only">Select Section:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >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="sectionRules"
                                   required
                                 ></v-select>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Name:</label>
                               </v-flex>
                               <v-flex xs8 sm8 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 sm4 class="pt-4 subheading">
                                 <label class="right">Email:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
                                   placeholder="fill your email"
                                   v-model="addStudents.email"
                                   type="text"
                                   name="email"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                                 <label
                                   class="right hidden-lg-only hidden-xl-only hidden-md-only"
                                 >D.O.B:</label>
                               </v-flex>
                               <v-flex xs8 sm8 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 wrap>
                           <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 wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Mobile:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.mobile"
                                   placeholder="fill your MobileNo"
                                   name="mobileNo"
                                   type="number"
                                 ></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 hidden-xs-only hidden-sm-only">Select Country:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >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 wrap>
                           <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 hidden-xs-only hidden-sm-only">Blood Group:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Blood:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.bloodGroup"
                                   placeholder="Fill your Blood Group"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Roll No:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.rollNo"
                                   placeholder="Fill your Roll Number"
                                   :rules="rollNo"
                                   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 hidden-xs-only hidden-sm-only">Medical Notes:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Medical:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.medicalNotes"
                                   placeholder="Fill your Medical Notes"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right">Height:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.height"
                                   placeholder="Fill your Height"
                                   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">Weight:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.weight"
                                   placeholder="Fill your Weight"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Uplaod :</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   label="Select Image"
                                   @click="pickFile"
                                   v-model="imageName"
                                   append-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 hidden-xs-only hidden-sm-only">Academic Year:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Year:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.establishmentYear"
                                   placeholder="fill your Academic Year"
                                   name="state"
                                   type="number"
                                   :rules="establishmentYearRules"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap class="hidden-xs-only hidden-sm-only">
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right">Present Address:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.presentAddress"
                                   :rules="presentAddress"
                                   placeholder="fill Your present Address"
                                   @keyup="copyData"
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
                                 <v-switch
                                   v-model="addStudents.permanentAddress"
                                   label="Select Permanent Address"
                                   :value="addStudents.presentAddress"
                                 ></v-switch>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout class="hidden-xs-only hidden-sm-only">
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.permanentAddress"
                                   :rules="permanentAddress"
                                   placeholder="fill Your Permanent Address"
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                           <v-flex xs12 sm12>
                             <v-layout>
                               <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
                                 <label class>Present Address:</label>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm12>
                                 <v-textarea
                                   name="input-4-3"
                                   v-model="addStudents.presentAddress"
                                   :rules="presentAddress"
                                   placeholder="fill Your present Address"
                                   required
                                 ></v-textarea>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm12>
                             <v-layout>
                               <v-flex
                                 xs12
                                 sm12
                                 class="pt-4 pr-4 subheading text-xs-center addressForm"
                               >
                                 <label>Permanent Address:</label>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm12>
                                 <v-textarea
                                   name="input-4-3"
                                   v-model="addStudents.permanentAddress"
                                   :rules="permanentAddress"
                                   placeholder="fill Your Permanent Address"
                                   required
                                 ></v-textarea>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout>
                           <v-flex xs12 sm12>
                             <v-layout class="right">
                               <!-- <v-flex xs6> -->
                               <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
                               <!-- </v-flex>
                               <v-flex xs6>-->
                               <v-btn
                                 @click="submit"
                                 round
                                 dark
                                 :loading="loading"
                                 class="add-button"
                               >Add</v-btn>
                               <!-- </v-flex> -->
                             </v-layout>
                           </v-flex>
                         </v-layout>
                       </v-form>
                     </v-flex>
                   </v-stepper-content>
                 </v-stepper-items>
               </v-stepper>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
 import parent from "@/script/parents.js";
 export default {
   data: () => ({
     e1: true,
     e2: 0,
     showParent: true,
     showNext: false,
     snackbar: false,
     y: "top",
     x: "right",
     role: "",
     mode: "",
     append: "",
     timeout: 3000,
     text: "",
     show: true,
     color: "",
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     password: "",
     menu: false,
     menu1: false,
     editStudentDialog: false,
     profileStudentDialog: false,
     addStudentDialog: false,
     valid: true,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     editImageName: "",
     editImageUrl: "",
     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"],
     rollNo: [(v) => !!v || "Roll No is required"],
     permanentAddress: [(v) => !!v || " Permanent Address is required"],
     presentAddress: [(v) => !!v || " Present Address  is required"],
     stateRules: [(v) => !!v || "State Name is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     sectionRules: [(v) => !!v || " Section Name is required"],
     genderRules: [(v) => !!v || " Select Gender is required"],
     fatheCellNoRules: [
       (v) => !!v || " father Cell Number  is required",
       (v) => v <= 10000000000 || "Max 10 characters is required",
     ],
     password: [
       (v) => !!v || "Password field is Required.",
       // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8
     ],
     mobileNoRule: [(v) => !!v || " Mobile Number is required"],
     establishmentYearRules: [(v) => !!v || " Academic Year  is required"],
     errorMessages: "",
     countries: [],
     headers: [
       {
         text: "Roll No.",
         align: "center",
         sortable: false,
         value: "rollNo",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "name", 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: "Status",
         value: "status",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     studentsData: [],
     parentId: "",
     editedIndex: -1,
     parentData: {},
     addStudents: {
       role: "STUDENT",
       name: "",
       email: "",
       date: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear(),
     },
     selectStudents: {
       select: "",
       selectSection: "",
     },
     editedItem: {
       role: "STUDENT",
       name: "",
       email: "",
       dob: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear(),
     },
     isFatherCellExists: false,
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     addStudentDialog: function (val) {
       if (!val) {
         this.parentData = [];
         this.addStudents = [];
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
         this.e2 = 1;
       }
     },
   },
   methods: {
     findStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.select,
             sectionId: this.selectStudents.selectSection,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           //   console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
+      this.studentsData = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getSection(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     pickEditFile() {
       this.$refs.editDataImage.click();
     },
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
       return date;
     },
     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);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     onEditFilePicked(e) {
       //   console.log(e);
       const files = e.target.files;
       if (files[0] !== undefined) {
         this.editImageName = files[0].name;
         // console.log("this.editImageName", this.editImageName);
         if (this.editImageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.editImageUrl = fr.result;
           this.editiImageFile = files[0]; // this is an image file that can be sent to server...
         });
       } else {
         this.editImageName = "";
         this.editiImageFile = "";
       }
     },
     editItem(item) {
       this.editedIndex = this.studentsData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.editStudentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.studentsData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.profileStudentDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         studentId: item._id,
       };
       http()
         .delete(
           "/deleteStudent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.findStudents();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editStudentDialog = false;
     },
     closeStudentProfile() {
       this.profileStudentDialog = false;
     },
     copyData() {
       this.addStudents.permanentAddress = this.addStudents.presentAddress;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addStudent = {
           parentId: this.parentId,
           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,
           establishmentYear: this.addStudents.establishmentYear,
           classId: this.addStudents.select,
           sectionId: this.addStudents.selectSection,
           bloodGroup: this.addStudents.bloodGroup,
           medicalNotes: this.addStudents.medicalNotes,
           height: this.addStudents.height,
           weight: this.addStudents.weight,
           rollNo: this.addStudents.rollNo,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addStudent.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createStudent", addStudent)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Student added successfully";
             this.color = "green";
             this.addStudentDialog = false;
             this.$refs.parentForm.reset();
             this.$refs.parentFormLgScr.reset();
             this.$refs.form.reset();
             this.e2 = 1;
             // this.clear();
             // this.clearParents();
             this.loading = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     clearParents() {
       this.$refs.parentForm.reset();
     },
     save() {
       let editStudent = {
         studentId: this.editedItem._id,
         name: this.editedItem.name,
         email: this.editedItem.email,
         role: this.editedItem.role,
         dob: this.editedItem.dob,
         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,
         establishmentYear: this.editedItem.establishmentYear,
         classId: this.editedItem.select,
         sectionId: this.editedItem.selectSection,
         bloodGroup: this.editedItem.bloodGroup,
         medicalNotes: this.editedItem.medicalNotes,
         height: this.editedItem.height,
         weight: this.editedItem.weight,
         rollNo: this.editedItem.rollNo,
       };
       if (this.editImageUrl) {
         var str = this.editImageUrl;
         const [baseUrl, editImageUrl] = str.split(/,/);
         editStudent.upload = editImageUrl;
       }
       this.editLoading = true;
       http()
         .put("/updateStudent", editStudent)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.imageUrl = "";
           this.findStudents();
           this.close();
           this.editLoading = false;
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.statusText;
           this.color = "error";
           this.editLoading = false;
         });
     },
     submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         this.parentData.fatherCellNo = this.parentData.fatherCellNo;
         this.parentData.motherCellNo = this.parentData.motherCellNo;
         let addparentDetails = {
           email: this.parentData.email,
           fatherName: this.parentData.fatherName,
           fatherCellNo: this.parentData.fatherCellNo,
           motherName: this.parentData.motherName,
           motherCellNo: this.parentData.motherCellNo,
           fatherProfession: this.parentData.fatherProfession,
           motherProfession: this.parentData.motherProfession,
           password: this.parentData.password,
           role: "PARENT",
         };
         this.loading = true;
         http()
           .post("/createParent", addparentDetails)
           .then((response) => {
             this.parentId = response.data.data.id;
             this.e2 = 2;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             if (error.response.data.statusText) {
               this.text = error.response.data.statusText;
             }
             this.loading = false;
           });
       }
     },
     getParentDetails() {
       if (this.parentData.fatherCellNo.length > 9) {
         this.showLoader = true;
         this.isFatherCellExists = false;
         http()
           .get("getParticularParent", {
             params: { fatherCellNo: this.parentData.fatherCellNo },
             headers: {
               Authorization: "Bearer " + this.$store.state.token,
             },
           })
           .then((response) => {
             this.showNext = true;
             this.showParent = false;
             this.parentData = response.data.data;
             this.parentId = response.data.data._id;
             this.showLoader = false;
             this.isFatherCellExists = true;
           })
           .catch((error) => {
             // console.log("err====>", error.response.data.message);
             this.text = error.response.data.message;
             this.snackbar = true;
             this.color = "error";
             if (this.text === "Data not found!") {
               this.showNext = false;
               this.showParent = true;
               this.parentData.email = "";
               this.parentData.fatherName = "";
               this.parentData.motherName = "";
               this.parentData.motherCellNo = "";
               this.parentData.fatherProfession = "";
               this.parentData.motherProfession = "";
               this.parentData.password = "";
             }
             this.showLoader = false;
           });
       }
     },
     suspendStudentStatus(status, id) {
       let suspendStudentData = {
         studentId: id,
         status: status,
       };
       http()
         .put("/suspendStudentAccount", suspendStudentData)
         .then((response) => {
           this.findStudents();
           this.text = response.data.message;
           this.color = "green";
           this.snackbar = true;
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     const getCountryList = countryList();
     this.role = this.$store.state.role;
     this.countries = getCountryList;
     var token = this.$store.state.token;
     http()
       .get("/getClassesList", {
         headers: { Authorization: "Bearer " + token },
       })
       .then((response) => {
         this.addclass = response.data.data;
       })
       .catch((error) => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }

src/pages/TimeTable/timeTable.vue

Diff comments View file @7014df6

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT TIME-TABLE****** -->
     <v-dialog v-model="dialog" max-width="600px" persistent>
       <v-flex xs12 sm12>
         <v-card flat class="card-style pa-2" dark>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Time Table</label>
               <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <!-- <v-layout>
                 <v-flex
                   xs12
                   class="text-xs-center text-sm-center text-md-center text-lg-center"
                 >
                   <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-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
               </v-flex>
               <v-flex xs8 sm5 class="ml-3">
                 <v-select
                   :items="addclass"
                   label="Select Class"
                   v-model="editedItem.classNum"
                   item-text="classNum"
                   item-value="_id"
                   @change="getSections(editedItem.classNum)"
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
               </v-flex>
               <v-flex xs8 sm5 class="ml-3">
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   v-model="editedItem.selectSection"
                   item-text="name"
                   item-value="_id"
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm9 offset-sm1>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card>
       </v-flex>
     </v-dialog>
     <!-- ****** ADD Dialog Schedule IN TIME-TABLE ******  -->
     <v-dialog v-model="dialogSchedule" max-width="600px" persistent>
       <v-flex xs12 sm12>
         <v-card flat class="card-style pa-2" dark>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Add Schedule</label>
               <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
             <v-container fluid>
               <v-flex xs12 sm12 class="py-3">
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
                   </v-flex>
                   <v-flex xs12 sm5 class="pl-3">
                     <v-select
                       :items="addOneDay"
                       label="Select Day"
                       v-model="schedule.selectDay"
                       :rules="selecDayRule"
                     ></v-select>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-layout>
                 <v-flex xs12 sm8 offset-sm2>
                   <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn>
                     <v-spacer></v-spacer>
                   </v-card-actions>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card>
       </v-flex>
     </v-dialog>
     <!-- ****** ADD LECTURES IN TIME-TABLE ******  -->
     <v-dialog v-model="dialogAddLecture" max-width="600px" persistent>
       <v-flex xs12 sm12>
         <v-card flat class="card-style pa-2" dark>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Add Lecture</label>
               <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <v-form ref="lectureForm" v-model="valid" lazy-validation>
             <v-container fluid>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                   </v-flex>
                   <v-flex xs5 class="ml-3">
                     <v-select
                       :items="addclass"
                       label="Select Class"
                       v-model="timeTable.select"
                       item-text="classNum"
                       item-value="_id"
                       @change="getClassSubject(timeTable.select)"
                       :rules="classRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Subject Name:</label>
                   </v-flex>
                   <v-flex xs5 class="ml-3">
                     <v-select
                       :items="subjectList.subjects"
                       label="Select Subject"
                       v-model="addlectures.subjectName"
                       item-text="subjectName"
                       item-value="subjectName"
                       :rules="subjectNameRules"
                       required
                     ></v-select>
                     <!-- <v-text-field
                       v-model="addlectures.subjectName"
                       :rules="subjectNameRules"
                       placeholder="fill your Subject Name"
                       type="text"
                     ></v-text-field>-->
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Time In:</label>
                   </v-flex>
                   <v-flex xs5 class="ml-3">
                     <v-menu
                       ref="menuD"
                       :close-on-content-click="false"
                       v-model="menu5"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       max-width="290px"
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="addlectures.timeIn"
                         label="Select your Time In"
                         append-icon="access_time"
                         :rules="timeInRules"
                         readonly
                       ></v-text-field>
                       <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Time Out:</label>
                   </v-flex>
                   <v-flex xs5 class="ml-3">
                     <v-menu
                       ref="menuE"
                       :close-on-content-click="false"
                       v-model="menu6"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       max-width="290px"
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="timeOutRules"
                         v-model="addlectures.timeOut"
                         label="Select your Time Out"
                         append-icon="access_time"
                         readonly
                       ></v-text-field>
                       <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Select Teacher:</label>
                   </v-flex>
                   <v-flex xs5 class="ml-3">
                     <v-select
                       :items="addTeachers"
                       label="Select Teacher"
                       v-model="addlectures.teacherId"
                       :rules="teacherRules"
                       item-text="name"
                       item-value="_id"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-layout>
                 <v-flex xs12 sm8 offset-sm2>
                   <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn>
                   </v-card-actions>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card>
       </v-flex>
     </v-dialog>
     <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ******  -->
     <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent>
       <v-flex xs12 sm12 class>
         <v-card flat class="card-style pa-2" dark>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Lecture</label>
               <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-select
                   :items="addclass"
                   label="Select Class"
                   v-model="updateLectures.select"
                   item-text="classNum"
                   item-value="_id"
                   @change="getClassSubject(updateLectures.select)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-select
                   :items="subjectList.subjects"
                   label="Select Subject"
                   v-model="updateLectures.subjectName"
                   item-text="subjectName"
                   item-value="subjectName"
                   required
                 ></v-select>
                 <!-- <v-text-field
                   v-model="updateLectures.subjectName"
                   placeholder="fill your Subject Name"
                   type="text"
                 ></v-text-field>-->
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs5 sm4 class="pt-4 subheading">
                 <label class="right">Time In:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-menu
                   ref="menuC"
                   :close-on-content-click="false"
                   v-model="menu4"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   max-width="290px"
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="updateLectures.timeIn"
                     placeholder="Select your Time In"
                     append-icon="access_time"
                     readonly
                   ></v-text-field>
                   <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs5 sm4 class="pt-4 subheading">
                 <label class="right">Time Out:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-menu
                   ref="menuB"
                   :close-on-content-click="false"
                   v-model="menu3"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   max-width="290px"
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="updateLectures.timeOut"
                     placeholder="Select your Time Out"
                     append-icon="access_time"
                     readonly
                   ></v-text-field>
                   <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs5 sm4 class="pt-4 subheading">
                 <label class="right">Select Teacher:</label>
               </v-flex>
               <v-flex xs7 sm6 class="ml-3">
                 <v-select
                   :items="addTeachers"
                   label="Select Teacher"
                   v-model="updateLectures.teacherId"
                   item-text="name"
                   item-value="_id"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm10 offset-sm1>
               <v-card-actions>
                 <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> -->
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   class="add-button"
                   @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
                 >Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card>
       </v-flex>
     </v-dialog>
     <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
     <!-- <v-card flat>
       <v-card-actions class="hidden-xs-only hidden-sm-only">
         <v-layout>
           <label class="right mt-4 ml-5">Select Class:</label>
           <v-select
             :items="addclass"
             label="Select Class"
             v-model="selectTimeTable.select"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getSections(selectTimeTable.select)"
             class="px-4"
             required
           ></v-select>
           <label class="right mt-4">Select Section:</label>
           <v-select
             :items="addSection"
             label="Select Section"
             v-model="selectTimeTable.selectSection"
             item-text="name"
             item-value="_id"
             name="Select Section"
             class="pl-3"
             required
           ></v-select>
         </v-layout>
         <v-spacer></v-spacer>
         <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
       </v-card-actions>
       <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
         <v-flex xs4 sm2 class="mt-4 ml-2">
           <label>Select Class:</label>
         </v-flex>
         <v-flex xs6 sm9>
           <v-select
             :items="addclass"
             label="Select Class"
             v-model="selectTimeTable.select"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getSections(selectTimeTable.select)"
             required
           ></v-select>
         </v-flex>
       </v-layout>
       <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
         <v-flex xs4 sm2 class="mt-4 ml-2">
           <label>Select Section:</label>
         </v-flex>
         <v-flex xs6 sm9>
           <v-select
             :items="addSection"
             label="Select Section"
             v-model="selectTimeTable.selectSection"
             item-text="name"
             item-value="_id"
             name="Select Section"
             required
           ></v-select>
         </v-flex>
       </v-layout>
       <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
         <v-flex xs12>
           <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn>
         </v-flex>
       </v-layout>
     </v-card>-->
     <v-flex xs12>
       <v-toolbar color="transparent" flat>
         <v-btn
           fab
           dark
           class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
           small
           @click="addTimeTableDialog = true"
         >
           <v-icon dark>add</v-icon>
         </v-btn>
         <v-btn
           round
           class="open-dialog-button hidden-sm-only hidden-xs-only"
           dark
           @click="addTimeTableDialog = true"
         >
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table
         </v-btn>
         <v-flex xs4 md2>
           <v-select
             :items="addclass"
             label="Select Class"
             v-model="selectTimeTable.select"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getSections(selectTimeTable.select)"
             required
           ></v-select>
         </v-flex>
         <v-flex xs4 md2 class="ml-4">
           <v-select
             :items="addSection"
             label="Select Section"
             v-model="selectTimeTable.selectSection"
             item-text="name"
             item-value="_id"
             name="Select Section"
             required
           ></v-select>
         </v-flex>
         <v-spacer></v-spacer>
         <v-btn
           @click="findTimeTable()"
           round
           dark
           :loading="loading"
           class="right mb-2 open-dialog-button"
         >Find</v-btn>
         <v-card-title class="body-1" v-show="show">
           <v-btn icon large flat @click="displaySearch">
             <v-avatar size="27">
               <img src="/static/icon/search.png" alt="icon" />
             </v-avatar>
           </v-btn>
         </v-card-title>
         <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
           <v-layout>
             <v-text-field
               autofocus
               v-model="search"
               label="Search"
               prepend-inner-icon="search"
               color="primary"
             ></v-text-field>
             <v-icon @click="closeSearch" color="error">close</v-icon>
           </v-layout>
         </v-flex>
       </v-toolbar>
       <v-data-table
         :headers="headers"
         :items="desserts"
         :pagination.sync="pagination"
         :search="search"
         item-key="_id"
       >
         <template slot="items" slot-scope="props">
           <tr
             style="cursor: pointer;"
             class="tr"
             @click="getTimeTable(props.item), props.expanded = !props.expanded"
           >
             <td class="td td-row">{{ props.index + 1}}</td>
             <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td>
             <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td>
             <td class="text-xs-center td td-row">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr-3"
                     @click="editItem(props.item)"
                     src="/static/icon/edit.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr-3"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr-3"
                     src="/static/icon/add1.png"
                     @click="addSchedule(props.item._id)"
                   />
                   <span>Add</span>
                 </v-tooltip>
               </span>
             </td>
           </tr>
         </template>
         <template slot="expand" slot-scope="props">
           <v-data-table
             :items="timeTableList.schedule"
             hide-actions
             item-key="title"
             style="width: auto;"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="text-xs-left subheading table-td td td-row">
                   <b>{{ props.item.day }}</b>
                 </td>
                 <td class="table-td td td-row">
                   <b>Subject</b>
                   <br />
                   <b>Time In</b>
                   <br />
                   <b>Time Out</b>
                 </td>
                 <td v-for="list in props.item.lectures" class="table-td td td-row">
                   <b>{{ list.subjectName }}</b>
                   <img
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr-2 ml-2"
                     src="/static/icon/edit1.png"
                     @click="updateTimeTable(list, timeTableList,props.item._id)"
                   />
                   <img
                     style="cursor:pointer; width:20px; height:20px; "
                     src="/static/icon/delete1.png"
                     @click="deleteTimeTable(list,props.item.lectures)"
                   />
                   <br />
                   {{list.timeIn}}
                   <br />
                   {{list.timeOut}}
                 </td>
                 <td class="td td-row">
                   <v-tooltip top>
                     <v-icon
                       slot="activator"
                       color="black"
                       @click="addLecture(props.item._id, timeTableList._id)"
                     >add_circle_outline</v-icon>
                     <span>Add</span>
                   </v-tooltip>
                 </td>
               </tr>
             </template>
           </v-data-table>
         </template>
         <v-alert
           slot="no-results"
           :value="true"
           color="error"
           icon="warning"
         >Your search for "{{ search }}" found no results.</v-alert>
       </v-data-table>
       <br />
       <br />
     </v-flex>
     <!-- ****** ADD  TIME-TABLE ****** -->
     <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Time Table</label>
             <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid class="pt-3">
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="addclass"
                     label="Select Class"
                     v-model="timeTable.select"
                     item-text="classNum"
                     item-value="_id"
                     @change="getSections(timeTable.select)"
                     :rules="classRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-select
                     :items="addSection"
                     label="Select Section"
                     v-model="timeTable.selectSection"
                     item-text="name"
                     item-value="_id"
                     :rules="sectionRules"
                     @change="getClassSubject(timeTable.select)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="subjectList.subjects"
                     label="Select Subject"
                     v-model="timeTable.subjectName"
                     item-text="subjectName"
                     item-value="subjectName"
                     :rules="subjectNameRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="addTeachers"
                     label="Select Teacher"
                     v-model="timeTable.selectTeacher"
                     item-text="name"
                     item-value="_id"
                     :rules="teacherRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Select Day:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="addOneDay"
                     label="Select Day"
                     v-model="timeTable.selectDay"
                     :rules="dayRules"
                     item-text="name"
                     item-value="_id"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Subject Name"
                     :rules="subjectNameRules"
                     v-model="timeTable.subjectName"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>-->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Time In:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-menu
                     ref="menuA"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="timeTable.timeIn"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="timeTable.timeIn"
                       label="Select your timeIn"
                       append-icon="access_time"
                       :rules="timeInRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="timeTable.timeIn"
                       @change="$refs.menuA.save(timeTable.timeIn)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Time Out:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="timeTable.timeOut"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="timeTable.timeOut"
                       label="Select your Time Out"
                       append-icon="access_time"
                       :rules="timeOutRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="timeTable.timeOut"
                       @change="$refs.menu.save(timeTable.timeOut)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12 sm11>
                 <v-layout>
                   <v-spacer></v-spacer>
                   <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 export default {
   data: () => ({
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     search: "",
     color: "",
     snackbar: false,
     loading: false,
     showLoader: false,
     dialog: false,
     show: true,
     showSearch: false,
     dialogAddLecture: false,
     dialogUpdateLectures: false,
     dialogSchedule: false,
     dialog1: false,
     valid: true,
     addTimeTableDialog: false,
     validAddDay: true,
     loadingFindData: false,
     addclass: [],
     addSection: [],
     subjectList: [],
     addTeachers: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 15,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     timeInRules: [(v) => !!v || "Time In is required"],
     timeOutRules: [(v) => !!v || "Time Out is required"],
     lectureRules: [(v) => !!v || "Lecture No is required"],
     subjectNameRules: [(v) => !!v || "Subject Name is required"],
     classRules: [(v) => !!v || "Class Name is required"],
     sectionRules: [(v) => !!v || "Section Name is required"],
     sectionRules: [(v) => !!v || "Section Name is required"],
     teacherRules: [(v) => !!v || "Teacher Name is required"],
     selecDayRule: [(v) => !!v || "Day is required"],
     dayRules: [(v) => !!v || "Day is required"],
     getParticulerLecture: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Class Name",
         value: "classData.classNum",
         sortable: false,
         align: "center",
       },
       {
         text: "Section Name",
         value: "sectionData.name",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     daysHeaders: [
       { text: "Day", value: "dayday", sortable: false, align: "center" },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
         align: "center",
       },
       { text: "Time In", value: "timeIn", sortable: false, align: "center" },
       { text: "Time Out", value: "timeOut", sortable: false, align: "center" },
     ],
     addOneDay: [
       "Monday",
       "Tuesday",
       "Wednesday",
       "Thursday",
       "Friday",
       "Saturday",
       "Sunday",
     ],
     schedule: {
       selectDay: "",
     },
     desserts: [],
     timeTableList: [],
     editedIndex: -1,
     selectTimeTable: {
       select: "",
       selectSection: "",
     },
     timeTable: {
       select: "",
       selectSection: "",
       selectDay: "",
       timeIn: null,
       timeOut: null,
       subjectName: "",
       selectTeacher: "",
     },
     editedItem: {
       classNum: "",
       selectSection: "",
     },
     addlectures: {
       timeIn: null,
       timeOut: null,
       subjectName: "",
       teacherId: "",
       scheduleId: "",
       timeTableId: "",
       select: "",
     },
     updateLectures: {
       timeIn: null,
       timeOut: null,
       subjectName: "",
       teacherId: "",
       select: "",
     },
     updateLecturesId: {
       lectureId: "",
       scheduleId: "",
     },
     menu1: false,
     menu2: false,
     menu3: false,
     menu4: false,
     menu5: false,
     menu6: false,
     scheduleDayId: "",
     showData: false,
   }),
   watch: {
     addTimeTableDialog: function (val) {
       if (!val) {
         this.timeTable = [];
       }
     },
   },
   methods: {
     findTimeTable() {
       this.loadingFindData = true;
       http()
         .get("/getParticularClassTimeTable", {
           params: {
             sectionId: this.selectTimeTable.selectSection,
             classId: this.selectTimeTable.select,
           },
         })
         .then((response) => {
           this.desserts = response.data.data;
           if (this.desserts.length === 0) {
             this.showLoader = false;
             this.snackbar = true;
             this.text = "Data not found!";
             this.color = "error";
             return;
           }
           this.showData = true;
           this.loadingFindData = false;
         })
         .catch((error) => {
           this.loadingFindData = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.text = error.response.data.statusText;
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
+      this.desserts = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
         });
     },
     getClassSubject(_id) {
       this.showLoader = true;
       //   this.classId = this.classId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getTimeTable(item) {
       this.showLoader = true;
       this.getParticulerLecture = item._id;
       this.getTimeTableDayData();
     },
     getTimeTableDayData() {
       var token = this.$store.state.token;
       http()
         .get(
           "/getParticularTimeTable",
           { params: { timeTableId: this.getParticulerLecture } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.timeTableList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(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);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     // getTimeTableList() {
     //   this.showLoader = true;
     //   var token = this.$store.state.token;
     //   http()
     //     .get("/getTimeTablesList", {
     //       headers: { Authorization: "Bearer " + token }
     //     })
     //     .then(response => {
     //       this.desserts = response.data.data;
     //       this.showLoader = false;
     //       // console.log("getTimeTableList=====>", response.data.data);
     //     })
     //     .catch(err => {
     //       // console.log("err====>", err);
     //       this.showLoader = false;
     //       this.$router.replace({ path: "/" });
     //     });
     // },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
     },
     updateTimeTable(timeToUpdate, classToUpdate, scheduleId) {
       this.updateLecturesId.scheduleId = scheduleId;
       this.updateLecturesId.lectureId = timeToUpdate._id;
       this.updateLectures = timeToUpdate;
       this.dialogUpdateLectures = true;
     },
     addLecture(scheduleId, timeTableId) {
       this.addlectures.scheduleId = scheduleId;
       this.addlectures.timeTableId = timeTableId;
       this.dialogAddLecture = true;
     },
     AddLecture() {
       if (this.$refs.lectureForm.validate()) {
         http()
           .post("/addLecture", this.addlectures)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Add Lecture successfully";
             var token = this.$store.state.token;
             http()
               .get(
                 "/getParticularTimeTable",
                 { params: { timeTableId: this.getParticulerLecture } },
                 {
                   headers: { Authorization: "Bearer " + token },
                 }
               )
               .then((response) => {
                 this.timeTableList = response.data.data;
                 this.snackbar = true;
                 this.text = response.data.message;
                 this.color = "green";
                 this.showLoader = false;
               })
               .catch((err) => {
                 this.showLoader = false;
                 // console.log("err====>", err);
                 this.snackbar = true;
                 this.color = "error";
                 this.text = error.response.data.message;
               });
             this.closedialogLecture();
             this.clearLeactureData();
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.text = error.response.data.statusText;
           });
       }
     },
     updateParticularTable() {
       let EditLecture = {
         lectureId: this.updateLecturesId.lectureId,
         scheduleId: this.updateLecturesId.scheduleId,
         updatedLecture: {
           timeIn: this.updateLectures.timeIn,
           timeOut: this.updateLectures.timeOut,
           subjectName: this.updateLectures.subjectName,
           teacherId: this.updateLectures.teacherId,
         },
       };
       http()
         .put("/updateLecture", EditLecture)
         .then((response) => {
           //   console.log("updateLecture", EditLecture);
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.closeUpdateLectures();
         })
         .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
           if (error.response.data.statusText) {
             this.text = error.response.data.statusText;
           }
         });
     },
     deleteItem(item) {
       let deleteTimeTable = {
         timeTableId: item._id,
       };
       http()
         .delete(
           "/deleteTimeTable",
           confirm("Are you sure you want to delete this?") && {
             params: deleteTimeTable,
           }
         )
         .then((response) => {
           // console.log("deleteUers",deleteTimeTable)
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.findTimeTable();
         })
         .catch((error) => {
           // console.log(error);
         });
     },
     close() {
       this.dialog = false;
     },
     close1() {
       this.dialog1 = false;
     },
     closedialogLecture() {
       this.dialogAddLecture = false;
     },
     closeUpdateLectures() {
       this.dialogUpdateLectures = false;
     },
     closeAddTimeTableModel() {
       this.addTimeTableDialog = false;
       this.timeTableList = [];
       this.timeTable = [];
     },
     submit() {
       if (this.$refs.form.validate()) {
         let imageData = new FormData();
         imageData.append("upload", this.imageFile);
         let addTimeTable = {
           sectionId: this.timeTable.selectSection,
           classId: this.timeTable.select,
           schedule: [
             {
               day: this.timeTable.selectDay,
               lectures: [
                 {
                   timeIn: this.timeTable.timeIn,
                   timeOut: this.timeTable.timeOut,
                   subjectName: this.timeTable.subjectName,
                   teacherId: this.timeTable.selectTeacher,
                 },
               ],
             },
           ],
         };
         this.loading = true;
         http()
           .post("/createTimeTable", addTimeTable)
           .then((response) => {
             // console.log("addTimeTable=====>", addTimeTable);
             if ((this.snackbar = true)) {
               this.text = "New Time Table added successfully";
             }
             this.color = "green";
             // this.clear();
             http()
               .get("/getParticularClassTimeTable", {
                 params: {
                   classId: this.timeTable.select,
                   sectionId: this.timeTable.selectSection,
                 },
               })
               .then((response) => {
                 this.desserts = response.data.data;
                 this.showData = true;
                 this.loadingFindData = false;
               })
               .catch((error) => {
                 this.loadingFindData = false;
                 this.snackbar = true;
                 this.text = error.response.data.message;
                 this.text = error.response.data.statusText;
               });
             this.addTimeTableDialog = false;
             this.loading = false;
           })
           .catch((error) => {
             // console.log(error);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     clearLeactureData() {
       this.$refs.lectureForm.reset();
     },
     save() {
       let imageData = new FormData();
       imageData.append("upload", this.imageFile);
       // console.log(imageData);
       let editTimeTable = {
         timeTableId: this.editedItem._id,
         classId: this.editedItem.classNum,
         sectionId: this.editedItem.selectSection,
         // imageData
       };
       http()
         .put("/updateTimeTable", editTimeTable)
         .then((response) => {
           //   console.log("editTimeTable", editTimeTable);
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing Time Table";
             this.color = "success";
           }
           http()
             .get("/getParticularClassTimeTable", {
               params: {
                 classId: this.editedItem.classNum,
                 sectionId: this.editedItem.selectSection,
               },
             })
             .then((response) => {
               this.desserts = response.data.data;
               this.showData = true;
               this.loadingFindData = false;
             })
             .catch((error) => {
               this.loadingFindData = false;
               this.snackbar = true;
               this.text = error.response.data.message;
               this.text = error.response.data.statusText;
             });
         })
         .catch((error) => {
           // console.log(error);
           if ((this.snackbar = true)) {
             this.text = error.response.data.message;
           }
         });
       this.close();
     },
     deleteTimeTable(timeToDelete, deleteLectures) {
       let deleteLecture = {
         lectureId: timeToDelete._id,
       };
       http()
         .delete(
           "/deleteLecture",
           confirm("Are you sure you want to delete this?") && {
             params: deleteLecture,
           }
         )
         .then((response) => {
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Time Table";
           }
           const index = this.timeTableList.schedule.indexOf(deleteLectures);
           for (let i = 0; i < this.timeTableList.schedule.length; i++) {
             this.timeTableList.schedule[i].lectures.splice(index, 1);
           }
         })
         .catch((error) => {
           //   console.log(error);
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     addSchedule(id) {
       this.scheduleDayId = id;
       this.dialogSchedule = true;
     },
     submitSchedule() {
       if (this.$refs.formAddDay.validate()) {
         let scheduleDayData = {
           timeTableId: this.scheduleDayId,
           day: this.schedule.selectDay,
         };
         http()
           .post("/addSchedule", scheduleDayData)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Schedule Day added successfully";
             this.dialogSchedule = false;
             this.loading = false;
             this.getTimeTableDayData();
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     // this.getTimeTableList();
     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((error) => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
     http()
       .get("/getTeachersList", {
         headers: { Authorization: "Bearer " + token },
       })
       .then((response) => {
         this.addTeachers = response.data.data;
         // console.log("getClassesList=====>",this.addTeachers)
       })
       .catch((error) => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
 };
 </script>