viithiisys / School-Management-dashboard

Commit 8e8d14254aba599c809fbc97d4ad2c789a65389a

Authored by Shikha Mishra 2020-08-13 09:00:44 -0400

Exists in master and in 2 other branches

Cleared data while clicking outside the add/edit model and also on cross icon wh…

…ile login any role, Improve getParticularClass API, and Improve getStudentWithClass API

Showing 39 changed files with 1870 additions and 1118 deletions Show diff stats

src/pages/Academic/assignment.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Assignment ****** -->
     <v-dialog v-model="editAssignmentDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Assignment</label>
             <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Title:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Description:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.description"
                   type="text"
                   :rules="deadlineRules"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Deadline:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-menu
                   ref="menu1"
                   :close-on-content-click="false"
                   v-model="menu1"
                   :nudge-right="40"
                   :return-value.sync="menu1"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.deadline"
                     placeholder="Select Date"
                     :rules="deadlineRules"
                     append-icon="event"
                     required
                   ></v-text-field>
                   <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="classList"
                   item-text="classNum"
                   item-value="_id"
                   :rules="classRules"
                   v-model="editedItem.classId"
                   @change="getSections(editedItem.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Section:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="addSection"
                   item-text="name"
                   item-value="_id"
                   v-model="editedItem.sectionId"
                   :rules="sectionRules"
                   @change="getClassSubject(editedItem.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Subject</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="subjectList.subjects"
                   v-model="editedItem.subjectName"
                   item-text="subjectName"
                   item-value="_id"
                   :rules="subjectRules"
                   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">Uplaod File:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="Select File"
                   @click="pickFile"
                   v-model="imageName"
                   append-icon="attach_file"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <v-dialog v-model="viewAssignmentDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Attendence</label>
             <v-icon size="24" class="right" @click="viewAssignmentDialog = 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 xs6 sm4>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Deadline:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING ASSIGNMENT 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="addAssignmentDialog = 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="addAssignmentDialog = true">
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment
         </v-btn>
       </v-flex>
       <v-spacer></v-spacer>
       <v-flex lg2 md2 xs12 v-show="show">
         <v-select
           :items="classList"
           placeholder="Select Your Class"
           v-model="showAssignment.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getAssignmentList()"
           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
             v-model="search"
             placeholder="Search"
             prepend-inner-icon="search"
             color="primary"
             autofocus
             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>
     <v-data-table
       :headers="headers"
       :items="assignmentData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td-row td">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.title }}</td>
           <td class="text-xs-center td td-row">{{ props.item.description }}</td>
           <td class="text-xs-center td td-row">{{ props.item.deadline }}</td>
           <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>
           <td
             class="text-xs-center td td-row"
             v-if="role !=  'TEACHER' "
           >{{ props.item.teacherId.name }}</td>
           <td
             class="text-xs-center td td-row"
             v-if="role !=  'ADMIN'"
           >{{ props.item.schoolId .name }}</td>
           <td class="text-xs-center td td-row">
             <v-btn
               class="add-button"
               @click="generatePDF2Canvas(props.item)"
               :loading="loadingPdf"
               dark
             >{{ props.item.fileType }}</v-btn>
           </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>
                 <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>
                 <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>
     <!-- ****** 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="addAssignmentDialog" max-width="400px">
+    <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Assignment</label>
-            <v-icon size="24" class="right" @click="addAssignmentDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddAssignmentModel">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">Title :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       name="name"
                       type="text"
                       placeholder="Select Title"
                       :rules="titleRules"
                       v-model="addAssignment.title"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Description :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       name="name"
                       type="text"
                       placeholder="Select Description"
                       :rules="descriptionRules"
                       v-model="addAssignment.description"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Deadline :</label>
                   </v-flex>
                   <v-flex xs8 sm7 class="ml-3">
                     <v-menu
                       ref="menu2"
                       :close-on-content-click="false"
                       v-model="menu2"
                       :nudge-right="40"
                       :return-value.sync="addAssignment.date"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="addAssignment.deadline"
                         :rules="deadlineRules"
                         placeholder="Select Date"
                         append-icon="event"
                         readonly
                       ></v-text-field>
                       <v-date-picker
                         v-model="addAssignment.deadline"
                         @input="$refs.menu2.save(addAssignment.date)"
                       ></v-date-picker>
                     </v-menu>
                   </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"
                       placeholder="Select Class"
                       item-text="classNum"
                       item-value="_id"
                       v-model="addAssignment.classId"
                       name="Select Class"
                       :rules="classRules"
                       @change="getSections(addAssignment.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"
                       placeholder="Select Section"
                       item-text="name"
                       item-value="_id"
                       v-model="addAssignment.sectionId"
                       name="Select Section"
                       :rules="sectionRules"
                       @change="getClassSubject(addAssignment.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"
                       placeholder="Select your subject"
                       v-model="addAssignment.subjectName"
                       item-text="subjectName"
                       item-value="_id"
                       :rules="subjectRules"
                       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">Uplaod File:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       placeholder="Select File"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Add Assignment</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";
 import moment from "moment";
 import jsPDF from "jspdf";
 import { saveAs } from "file-saver";
 export default {
   data: () => ({
     snackbar: false,
     role: "",
     menu1: false,
     menu2: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     viewAssignmentDialog: false,
     editAssignmentDialog: false,
     valid: true,
     validEditAssignment: true,
     addAssignmentDialog: false,
     pagination: {
       rowsPerPage: 10,
     },
     token: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Title",
         value: "title",
         sortable: false,
         align: "center",
       },
       {
         text: "Description",
         value: "description",
         sortable: false,
         align: "center",
       },
       {
         text: "Deadline",
         value: "deadline",
         sortable: false,
         align: "center",
       },
       {
         text: "Section",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Uploader",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "File",
         value: "file",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     showPdfData: false,
     loadingPdf: false,
     hideData: true,
     assignmentData: [],
     subjectList: [],
     classList: [],
     addSection: [],
     editedIndex: -1,
     addSubject: {},
     editedItem: {
       title: "",
       description: "",
       deadline: "",
       classId: "",
       sectionId: "",
       subjectName: "",
       fileType: "",
     },
     addAssignment: {},
     showAssignment: {},
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     titleRules: [(v) => !!v || " Title is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     deadlineRules: [(v) => !!v || " Deadline is required"],
     classRules: [(v) => !!v || "Class is required"],
     sectionRules: [(v) => !!v || "Section is required"],
     subjectRules: [(v) => !!v || "Student is required"],
     fileRules: [(v) => !!v || "File is required"],
   }),
+  watch: {
+    addAssignmentDialog: function (val) {
+      if (!val) {
+        this.addAssignment = [];
+        this.imageName = "";
+      }
+    },
+  },
   methods: {
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     editItem(item) {
       this.editedIndex = this.assignmentData;
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
       this.editAssignmentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.assignmentData;
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
       this.viewAssignmentDialog = true;
     },
     deleteItem(item) {
       let deleteAssignment = {
         assignmentId: item._id,
       };
       http()
         .delete(
           "/deleteAssignment",
           confirm("Are you sure you want to delete this?") && {
             params: deleteAssignment,
           },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.getAssignmentList();
           this.snackbar = true;
           this.text = "Successfully delete Existing Assignment";
           this.color = "green";
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editAssignmentDialog = false;
     },
     close1() {
       this.viewAssignmentDialog = false;
     },
+    closeAddAssignmentModel() {
+      this.addAssignmentDialog = false;
+      this.assignmentData = [];
+      this.addAssignment = [];
+      this.imageName = "";
+    },
     submit() {
       var addAssignment = {
         title: this.addAssignment.title,
         description: this.addAssignment.description,
         deadline: this.addAssignment.deadline,
         classId: this.addAssignment.classId,
         sectionId: this.addAssignment.sectionId,
         subjectName: this.addAssignment.subjectName,
         file: this.addAssignment.imageName,
         fileName: this.imageName,
       };
       var signatures = {
         JVBERi0: "other",
         iVBORw0KGgo: "image",
         UEsDBBQ: "other",
         "/": "image",
         AAABAA: "image",
         IywiV2hhdC: "other",
         bmFtZSxl: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addAssignment.upload = imageUrl;
           addAssignment.fileType = detectMimeType(imageUrl);
         }
         console.log("data===>", addAssignment);
         http()
           .post("/createAssignment", addAssignment)
           .then((response) => {
             this.getAssignmentList();
             this.snackbar = true;
             this.text = "Syllabus added successfully";
             this.color = "green";
             this.addAssignmentDialog = false;
             this.clear();
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
           });
       }
     },
     getAssignmentList() {
       if (this.addAssignment.classId) {
         this.addAssignment.classId = this.addAssignment.classId;
       }
       this.showLoader = true;
       http()
         .get(
           "/getAssignmentList",
           {
             params: { classId: this.showAssignment.classId },
           },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.assignmentData = 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);
           }
         });
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       if (this.$refs.formEditAssignment.validate()) {
         let editAssignment = {
           assignmentId: this.editedItem._id,
           title: this.addAssignment.title,
           description: this.addAssignment.description,
           deadline: this.addAssignment.deadline,
           classId: this.addAssignment.classId,
           sectionId: this.addAssignment.sectionId,
           subjectName: this.addAssignment.subjectName,
           file: this.addAssignment.imageName,
           fileName: this.imageName,
         };
         this.editLoading = true;
         var signatures = {
           JVBERi0: "other",
           iVBORw0KGgo: "image",
           UEsDBBQ: "other",
           "/": "image",
           AAABAA: "image",
           IywiV2hhdC: "other",
           bmFtZSxl: "other",
         };
         function detectMimeType(b64) {
           for (var s in signatures) {
             if (b64.indexOf(s) === 0) {
               return signatures[s];
             }
           }
         }
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           editAssignment.upload = imageUrl;
           editAssignment.fileType = detectMimeType(imageUrl);
         }
         http()
           .put("/updateAssignment", editAssignment)
           .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Assignment";
             this.color = "green";
             this.getAssignmentList();
             this.editLoading = false;
             this.editAssignmentDialog = false;
           })
           .catch((error) => {
             this.editLoading = false;
             // console.log(error);
           });
       }
     },
     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;
       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;
         });
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
         // console.log("this.imageName", this.imageName);
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     async generatePDF2Canvas(item) {
       var dataType = "";
       var type = "";
       if (item.fileType == "image") {
         dataType = "file.jpg";
       } else if (item.fileType == "other") {
         dataType = "file.pdf";
         type = "application/pdf";
       }
       var FileSaver = require("file-saver");
       FileSaver.saveAs(item.file, "image.jpg");
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.role = this.$store.state.role;
     this.getClass();
   },
 };
 </script>

src/pages/Academic/routine.vue

Diff comments View file @8e8d142

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT Subject **** -->	3	<!-- **** EDIT Subject **** -->
4	<v-dialog v-model="editRoutineDialog" max-width="600px" persistent>	4	<v-dialog v-model="editRoutineDialog" max-width="600px" persistent>
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Routine</label>	8	<label class="title text-xs-center">Edit Routine</label>
9	<v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-container fluid>	12	<v-container fluid>
13	<v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>	13	<v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>
14	<v-layout>	14	<v-layout>
15	<v-flex xs3 sm4 class="pt-4 subheading">	15	<v-flex xs3 sm4 class="pt-4 subheading">
16	<label class="right">Class :</label>	16	<label class="right">Class :</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs8 sm8 class="ml-2">	18	<v-flex xs8 sm8 class="ml-2">
19	<v-select	19	<v-select
20	:items="classList"	20	:items="classList"
21	label="Select your Class"	21	label="Select your Class"
22	v-model="editedItem.classId"	22	v-model="editedItem.classId"
23	item-text="classNum"	23	item-text="classNum"
24	item-value="_id"	24	item-value="_id"
25	:rules="classRules"	25	:rules="classRules"
26	@change="getClassSubject(addRoutine.classId)"	26	@change="getClassSubject(editedItem.classId)"
27	required	27	required
28	></v-select>	28	></v-select>
29	</v-flex>	29	</v-flex>
30	</v-layout>	30	</v-layout>
31	<v-layout>	31	<v-layout>
32	<v-flex xs3 sm4 class="pt-4 subheading">	32	<v-flex xs3 sm4 class="pt-4 subheading">
33	<label class="right">Subject :</label>	33	<label class="right">Subject :</label>
34	</v-flex>	34	</v-flex>
35	<v-flex xs8 sm8 class="ml-2">	35	<v-flex xs8 sm8 class="ml-2">
36	<v-select	36	<v-select
37	:items="subjectList.subjects"	37	:items="subjectList.subjects"
38	label="Select your subject"	38	label="Select your subject"
39	v-model="editedItem.subjectName"	39	v-model="editedItem.subjectName"
40	item-text="subjectName"	40	item-text="subjectName"
41	item-value="_id"	41	item-value="_id"
42	:rules="subjectRules"	42	:rules="subjectRules"
43	required	43	required
44	></v-select>	44	></v-select>
45	</v-flex>	45	</v-flex>
46	</v-layout>	46	</v-layout>
47	<v-layout>	47	<v-layout>
48	<v-flex xs4 sm4 class="pt-4 subheading">	48	<v-flex xs4 sm4 class="pt-4 subheading">
49	<label class="right">Teacher Name :</label>	49	<label class="right">Teacher Name :</label>
50	</v-flex>	50	</v-flex>
51	<v-flex xs8 sm8 class="ml-3">	51	<v-flex xs8 sm8 class="ml-3">
52	<v-select	52	<v-select
53	:items="teacherList"	53	:items="teacherList"
54	label="Select your teacher"	54	label="Select your teacher"
55	v-model="editedItem.teacherId"	55	v-model="editedItem.teacherId"
56	item-text="name"	56	item-text="name"
57	item-value="_id"	57	item-value="_id"
58	:rules="teacherRules"	58	:rules="teacherRules"
59	required	59	required
60	></v-select>	60	></v-select>
61	</v-flex>	61	</v-flex>
62	</v-layout>	62	</v-layout>
63	<v-layout>	63	<v-layout>
64	<v-flex xs5 sm4 class="pt-4 subheading">	64	<v-flex xs5 sm4 class="pt-4 subheading">
65	<label class="right">Starting time:</label>	65	<label class="right">Starting time:</label>
66	</v-flex>	66	</v-flex>
67	<v-flex xs7 sm6 class="ml-3">	67	<v-flex xs7 sm6 class="ml-3">
68	<v-menu	68	<v-menu
69	ref="menuC"	69	ref="menuC"
70	:close-on-content-click="false"	70	:close-on-content-click="false"
71	v-model="menu4"	71	v-model="menu4"
72	:nudge-right="40"	72	:nudge-right="40"
73	lazy	73	lazy
74	transition="scale-transition"	74	transition="scale-transition"
75	offset-y	75	offset-y
76	full-width	76	full-width
77	max-width="290px"	77	max-width="290px"
78	min-width="290px"	78	min-width="290px"
79	>	79	>
80	<v-text-field	80	<v-text-field
81	slot="activator"	81	slot="activator"
82	v-model="editedItem.startingTime"	82	v-model="editedItem.startingTime"
83	placeholder="Select your starting time"	83	placeholder="Select your starting time"
84	append-icon="access_time"	84	append-icon="access_time"
85	readonly	85	readonly
86	></v-text-field>	86	></v-text-field>
87	<v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>	87	<v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>
88	</v-menu>	88	</v-menu>
89	</v-flex>	89	</v-flex>
90	</v-layout>	90	</v-layout>
91	<v-layout>	91	<v-layout>
92	<v-flex xs5 sm4 class="pt-4 subheading">	92	<v-flex xs5 sm4 class="pt-4 subheading">
93	<label class="right">Ending Time:</label>	93	<label class="right">Ending Time:</label>
94	</v-flex>	94	</v-flex>
95	<v-flex xs7 sm6 class="ml-3">	95	<v-flex xs7 sm6 class="ml-3">
96	<v-menu	96	<v-menu
97	ref="menuB"	97	ref="menuB"
98	:close-on-content-click="false"	98	:close-on-content-click="false"
99	v-model="menu3"	99	v-model="menu3"
100	:nudge-right="40"	100	:nudge-right="40"
101	lazy	101	lazy
102	transition="scale-transition"	102	transition="scale-transition"
103	offset-y	103	offset-y
104	full-width	104	full-width
105	max-width="290px"	105	max-width="290px"
106	min-width="290px"	106	min-width="290px"
107	>	107	>
108	<v-text-field	108	<v-text-field
109	slot="activator"	109	slot="activator"
110	v-model="editedItem.endingTime"	110	v-model="editedItem.endingTime"
111	placeholder="Select your end time"	111	placeholder="Select your end time"
112	append-icon="access_time"	112	append-icon="access_time"
113	readonly	113	readonly
114	></v-text-field>	114	></v-text-field>
115	<v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>	115	<v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>
116	</v-menu>	116	</v-menu>
117	</v-flex>	117	</v-flex>
118	</v-layout>	118	</v-layout>
119	<v-layout>	119	<v-layout>
120	<v-flex xs4 sm4 class="pt-4 subheading">	120	<v-flex xs4 sm4 class="pt-4 subheading">
121	<label class="right">Room:</label>	121	<label class="right">Room:</label>
122	</v-flex>	122	</v-flex>
123	<v-flex xs8 sm8 class="ml-3">	123	<v-flex xs8 sm8 class="ml-3">
124	<v-text-field	124	<v-text-field
125	label="fill your room"	125	label="fill your room"
126	:rules="roomRules"	126	:rules="roomRules"
127	v-model="editedItem.room"	127	v-model="editedItem.room"
128	@keyup.enter="submit"	128	@keyup.enter="submit"
129	></v-text-field>	129	></v-text-field>
130	</v-flex>	130	</v-flex>
131	</v-layout>	131	</v-layout>
132	<v-layout>	132	<v-layout>
133	<v-flex xs4 sm4 class="pt-4 subheading">	133	<v-flex xs4 sm4 class="pt-4 subheading">
134	<label class="right">Period:</label>	134	<label class="right">Period:</label>
135	</v-flex>	135	</v-flex>
136	<v-flex xs8 sm8 class="ml-3">	136	<v-flex xs8 sm8 class="ml-3">
137	<v-text-field	137	<v-text-field
138	label="fill your period"	138	label="fill your period"
139	:rules="periodRules"	139	:rules="periodRules"
140	v-model="editedItem.period"	140	v-model="editedItem.period"
141	@keyup.enter="submit"	141	@keyup.enter="submit"
142	></v-text-field>	142	></v-text-field>
143	</v-flex>	143	</v-flex>
144	</v-layout>	144	</v-layout>
145	<v-layout>	145	<v-layout>
146	<v-flex xs12 sm12>	146	<v-flex xs12 sm12>
147	<v-card-actions>	147	<v-card-actions>
148	<v-spacer></v-spacer>	148	<v-spacer></v-spacer>
149	<v-btn	149	<v-btn
150	@click="update"	150	@click="update"
151	round	151	round
152	dark	152	dark
153	:loading="loading"	153	:loading="loading"
154	class="add-button"	154	class="add-button"
155	>Update Routine</v-btn>	155	>Update Routine</v-btn>
156	</v-card-actions>	156	</v-card-actions>
157	</v-flex>	157	</v-flex>
158	</v-layout>	158	</v-layout>
159	</v-form>	159	</v-form>
160	</v-container>	160	</v-container>
161	</v-card>	161	</v-card>
162	</v-dialog>	162	</v-dialog>
163		163
164	<!-- **** EXISTING ROUTINE TABLE **** -->	164	<!-- **** EXISTING ROUTINE TABLE **** -->
165	<v-toolbar color="transparent" flat>	165	<v-toolbar color="transparent" flat>
166	<v-btn	166	<v-btn
167	fab	167	fab
168	dark	168	dark
169	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	169	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
170	small	170	small
171	@click="addRoutineDialog = true"	171	@click="addRoutineDialog = true"
172	>	172	>
173	<v-icon dark>add</v-icon>	173	<v-icon dark>add</v-icon>
174	</v-btn>	174	</v-btn>
175	<v-flex xs1 class="hidden-sm-only hidden-xs-only">	175	<v-flex xs1 class="hidden-sm-only hidden-xs-only">
176	<v-btn	176	<v-btn
177	round	177	round
178	class="open-dialog-button"	178	class="open-dialog-button"
179	dark	179	dark
180	@click="addRoutineDialog = true"	180	@click="addRoutineDialog = true"
181	v-if="role != 'TEACHER' "	181	v-if="role != 'TEACHER' "
182	>	182	>
183	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine	183	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine
184	</v-btn>	184	</v-btn>
185	</v-flex>	185	</v-flex>
186	<v-spacer></v-spacer>	186	<v-spacer></v-spacer>
187	<v-flex lg2 md2 xs12 v-show="show">	187	<v-flex lg2 md2 xs12 v-show="show">
188	<v-select	188	<v-select
189	:items="classList"	189	:items="classList"
190	label="Select Your Class"	190	label="Select Your Class"
191	v-model="addRoutineList.classId"	191	v-model="addRoutineList.classId"
192	item-text="classNum"	192	item-text="classNum"
193	item-value="_id"	193	item-value="_id"
194	name="Select Class"	194	name="Select Class"
195	:rules="classRules"	195	:rules="classRules"
196	@change="getSections(addRoutineList.classId)"	196	@change="getSections(addRoutineList.classId)"
197	class="pl-2"	197	class="pl-2"
198	required	198	required
199	></v-select>	199	></v-select>
200	</v-flex>	200	</v-flex>
201	<v-flex xs8 sm3 md2 class="mr-3">	201	<v-flex xs8 sm3 md2 class="mr-3">
202	<v-select	202	<v-select
203	v-model="addRoutineList.sectionId"	203	v-model="addRoutineList.sectionId"
204	label="Select your section"	204	label="Select your section"
205	:items="addSection"	205	:items="addSection"
206	item-text="name"	206	item-text="name"
207	item-value="_id"	207	item-value="_id"
208	name="Select Section"	208	name="Select Section"
209	:rules="sectionRules"	209	:rules="sectionRules"
210	@change="getRoutineList()"	210	@change="getRoutineList()"
211	class="pl-2"	211	class="pl-2"
212	required	212	required
213	></v-select>	213	></v-select>
214	</v-flex>	214	</v-flex>
215	<v-card-title class="body-1" v-show="show">	215	<v-card-title class="body-1" v-show="show">
216	<v-btn icon flat @click="displaySearch">	216	<v-btn icon flat @click="displaySearch">
217	<v-avatar size="27">	217	<v-avatar size="27">
218	<img src="/static/icon/search.png" alt="icon" />	218	<img src="/static/icon/search.png" alt="icon" />
219	</v-avatar>	219	</v-avatar>
220	</v-btn>	220	</v-btn>
221	</v-card-title>	221	</v-card-title>
222	<v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">	222	<v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
223	<v-layout>	223	<v-layout>
224	<v-text-field	224	<v-text-field
225	autofocus	225	autofocus
226	v-model="search"	226	v-model="search"
227	label="Search"	227	label="Search"
228	prepend-inner-icon="search"	228	prepend-inner-icon="search"
229	color="primary"	229	color="primary"
230	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	230	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
231	></v-text-field>	231	></v-text-field>
232	<v-icon @click="closeSearch" color="error">close</v-icon>	232	<v-icon @click="closeSearch" color="error">close</v-icon>
233	</v-layout>	233	</v-layout>
234	</v-flex>	234	</v-flex>
235	</v-toolbar>	235	</v-toolbar>
236		236
237	<div class="col-sm-12">	237	<div class="col-sm-12">
238	<div class="box-body">	238	<div class="box-body">
239	<div class="row">	239	<div class="row">
240	<div class="col-sm-12">	240	<div class="col-sm-12">
241	<div class="nav-tabs-custom">	241	<div class="nav-tabs-custom">
242	<ul class="nav nav-tabs">	242	<ul class="nav nav-tabs">
243	<li class="active">	243	<li class="active">
244	<a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>	244	<a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>
245	</li>	245	</li>
246	</ul>	246	</ul>
247		247
248	<div class="tab-content" v-show="hideTable">	248	<div class="tab-content" v-show="hideTable">
249	<div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">	249	<div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">
250	<div	250	<div
251	id="mCSB_1"	251	id="mCSB_1"
252	class="mCustomScrollBox mCS-light"	252	class="mCustomScrollBox mCS-light"
253	style="max-height: none;"	253	style="max-height: none;"
254	tabindex="0"	254	tabindex="0"
255	>	255	>
256	<div	256	<div
257	id="mCSB_1_container"	257	id="mCSB_1_container"
258	class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"	258	class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
259	style="position: relative; top: 0px; left: 0px; width: 100%;"	259	style="position: relative; top: 0px; left: 0px; width: 100%;"
260	dir="ltr"	260	dir="ltr"
261	>	261	>
262	<div id="hide-table-2">	262	<div id="hide-table-2">
263	<table id="table" class="table table-striped">	263	<table id="table" class="table table-striped">
264	<tbody>	264	<tbody>
265	<tr>	265	<tr>
266	<td>MONDAY</td>	266	<td>MONDAY</td>
267	</tr>	267	</tr>
268	<tr>	268	<tr>
269	<td>TUESDAY</td>	269	<td>TUESDAY</td>
270	</tr>	270	</tr>
271	<tr>	271	<tr>
272	<td>WEDNESDAY</td>	272	<td>WEDNESDAY</td>
273	</tr>	273	</tr>
274	<tr>	274	<tr>
275	<td>THURSDAY</td>	275	<td>THURSDAY</td>
276	</tr>	276	</tr>
277	<tr>	277	<tr>
278	<td>FRIDAY</td>	278	<td>FRIDAY</td>
279	</tr>	279	</tr>
280	<tr>	280	<tr>
281	<td>SATURDAY</td>	281	<td>SATURDAY</td>
282	</tr>	282	</tr>
283	</tbody>	283	</tbody>
284	</table>	284	</table>
285	</div>	285	</div>
286	</div>	286	</div>
287	<div	287	<div
288	id="mCSB_1_scrollbar_horizontal"	288	id="mCSB_1_scrollbar_horizontal"
289	class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"	289	class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
290	style="display: none;"	290	style="display: none;"
291	>	291	>
292	<div class="mCSB_draggerContainer">	292	<div class="mCSB_draggerContainer">
293	<div	293	<div
294	id="mCSB_1_dragger_horizontal"	294	id="mCSB_1_dragger_horizontal"
295	class="mCSB_dragger"	295	class="mCSB_dragger"
296	style="position: absolute; min-width: 30px; width: 0px; left: 0px;"	296	style="position: absolute; min-width: 30px; width: 0px; left: 0px;"
297	>	297	>
298	<div class="mCSB_dragger_bar"></div>	298	<div class="mCSB_dragger_bar"></div>
299	</div>	299	</div>
300	<div class="mCSB_draggerRail"></div>	300	<div class="mCSB_draggerRail"></div>
301	</div>	301	</div>
302	</div>	302	</div>
303	</div>	303	</div>
304	</div>	304	</div>
305	</div>	305	</div>
306	<div>	306	<div>
307	<table id="table" class="table table-bordered" v-show="showTable">	307	<table id="table" class="table table-bordered" v-show="showTable">
308	<tbody>	308	<tbody>
309	<div class="nav-tabs-custom">	309	<div class="nav-tabs-custom">
310	<div class="tab-content" id="scrolling">	310	<div class="tab-content" id="scrolling">
311	<div id="hide-table-2">	311	<div id="hide-table-2">
312	<v-data-table :items="routineList">	312	<v-data-table :items="routineList">
313	<template slot="items" slot-scope="props">	313	<template slot="items" slot-scope="props">
314	<tr class="tr">	314	<tr class="tr">
315	<td>{{ props.item.day }}</td>	315	<td>{{ props.item.day }}</td>
316	<td class="text-center" v-for="list in props.item.lectureRoutine">	316	<td class="text-center" v-for="list in props.item.lectureRoutine">
317	{{ props.item.classId.classNum }}	317	{{ props.item.classId.classNum }}
318	<br />	318	<br />
319	{{ props.item.sectionId.name }}	319	{{ props.item.sectionId.name }}
320	<br />	320	<br />
321	{{ list.startingTime }} - {{ list.endingTime }}	321	{{ list.startingTime }} - {{ list.endingTime }}
322	<br />	322	<br />
323	{{ list.room }}	323	{{ list.room }}
324	<br />	324	<br />
325	{{ list.subjectName }}	325	{{ list.subjectName }}
326	<br />	326	<br />
327	{{ list.teacherId.name}}	327	{{ list.teacherId.name}}
328	<br />	328	<br />
329	<span>	329	<span>
330	<v-tooltip top>	330	<v-tooltip top>
331	<img	331	<img
332	slot="activator"	332	slot="activator"
333	style="cursor:pointer; width:20px; height:18px; "	333	style="cursor:pointer; width:20px; height:18px; "
334	class="mr-3"	334	class="mr-3"
335	@click="editItem(list, props.item)"	335	@click="editItem(list, props.item)"
336	src="/static/icon/edit.png"	336	src="/static/icon/edit.png"
337	/>	337	/>
338	<span>Edit</span>	338	<span>Edit</span>
339	</v-tooltip>	339	</v-tooltip>
340	<v-tooltip top>	340	<v-tooltip top>
341	<img	341	<img
342	slot="activator"	342	slot="activator"
343	style="cursor:pointer; width:20px; height:18px; "	343	style="cursor:pointer; width:20px; height:18px; "
344	class="mr-3"	344	class="mr-3"
345	@click="deleteItem(props.item)"	345	@click="deleteItem(props.item)"
346	src="/static/icon/delete.png"	346	src="/static/icon/delete.png"
347	/>	347	/>
348	<span>Delete</span>	348	<span>Delete</span>
349	</v-tooltip>	349	</v-tooltip>
350	</span>	350	</span>
351	</td>	351	</td>
352	</tr>	352	</tr>
353	</template>	353	</template>
354	</v-data-table>	354	</v-data-table>
355	</div>	355	</div>
356	</div>	356	</div>
357	</div>	357	</div>
358	</tbody>	358	</tbody>
359	</table>	359	</table>
360	</div>	360	</div>
361	</div>	361	</div>
362	</div>	362	</div>
363	</div>	363	</div>
364	</div>	364	</div>
365	</div>	365	</div>
366	<!-- **** ADD MULTIPLE Subject **** -->	366	<!-- **** ADD MULTIPLE Subject **** -->
367	<v-snackbar	367	<v-snackbar
368	:timeout="timeout"	368	:timeout="timeout"
369	:top="y === 'top'"	369	:top="y === 'top'"
370	:right="x === 'right'"	370	:right="x === 'right'"
371	:vertical="mode === 'vertical'"	371	:vertical="mode === 'vertical'"
372	v-model="snackbar"	372	v-model="snackbar"
373	:color="color"	373	:color="color"
374	>{{ text }}</v-snackbar>	374	>{{ text }}</v-snackbar>
375	<v-dialog v-model="addRoutineDialog" max-width="600px">	375	<v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog">
		376	v-if="addRoutineDialog"
376	<v-card flat class="card-style pa-2" dark>	377	<v-card flat class="card-style pa-2" dark>
377	<v-layout>	378	<v-layout>
378	<v-flex xs12>	379	<v-flex xs12>
379	<label class="title text-xs-center">Add Routine</label>	380	<label class="title text-xs-center">Add Routine</label>
380	<v-icon size="24" class="right" @click="addRoutineDialog = false">cancel</v-icon>	381	<v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon>
381	</v-flex>	382	</v-flex>
382	</v-layout>	383	</v-layout>
383	<v-container fluid fill-height>	384	<v-container fluid fill-height>
384	<v-layout align-center>	385	<v-layout align-center>
385	<v-flex xs12>	386	<v-flex xs12>
386	<v-form ref="form" v-model="valid" lazy-validation>	387	<v-form ref="form" v-model="valid" lazy-validation>
387	<v-layout>	388	<v-layout>
388	<v-flex xs4 sm4 class="pt-4 subheading">	389	<v-flex xs4 sm4 class="pt-4 subheading">
389	<label class="right">School Year :</label>	390	<label class="right">School Year :</label>
390	</v-flex>	391	</v-flex>
391	<v-flex xs8 sm8 class="ml-3">	392	<v-flex xs8 sm8 class="ml-3">
392	<v-text-field	393	<v-text-field
393	label="fill your year"	394	label="fill your year"
394	:rules="schoolRules"	395	:rules="schoolRules"
395	v-model="addRoutine.schoolYear"	396	v-model="addRoutine.schoolYear"
396	></v-text-field>	397	></v-text-field>
397	</v-flex>	398	</v-flex>
398	</v-layout>	399	</v-layout>
399	<v-layout>	400	<v-layout>
400	<v-flex xs4 sm4 class="pt-4 subheading">	401	<v-flex xs4 sm4 class="pt-4 subheading">
401	<label class="right">Class :</label>	402	<label class="right">Class :</label>
402	</v-flex>	403	</v-flex>
403	<v-flex xs8 sm8 class="ml-3">	404	<v-flex xs8 sm8 class="ml-3">
404	<v-select	405	<v-select
405	:items="classList"	406	:items="classList"
406	item-text="classNum"	407	item-text="classNum"
407	item-value="_id"	408	item-value="_id"
408	v-model="addRoutine.classId"	409	v-model="addRoutine.classId"
409	label="Select Class"	410	label="Select Class"
410	:rules="classRules"	411	:rules="classRules"
411	@change="getSections(addRoutine.classId)"	412	@change="getSections(addRoutine.classId)"
412	class="pl-2"	413	class="pl-2"
413	required	414	required
414	></v-select>	415	></v-select>
415	</v-flex>	416	</v-flex>
416	</v-layout>	417	</v-layout>
417	<v-layout>	418	<v-layout>
418	<v-flex xs4 sm4 class="pt-4 subheading">	419	<v-flex xs4 sm4 class="pt-4 subheading">
419	<label class="right">Section :</label>	420	<label class="right">Section :</label>
420	</v-flex>	421	</v-flex>
421	<v-flex xs8 sm8 class="ml-3">	422	<v-flex xs8 sm8 class="ml-3">
422	<v-select	423	<v-select
423	:items="addSection"	424	:items="addSection"
424	item-text="name"	425	item-text="name"
425	item-value="_id"	426	item-value="_id"
426	v-model="addRoutine.sectionId"	427	v-model="addRoutine.sectionId"
427	label="Select Section"	428	label="Select Section"
428	:rules="sectionRules"	429	:rules="sectionRules"
429	@change="getClassSubject(addRoutine.classId)"	430	@change="getClassSubject(addRoutine.classId)"
430	class="px-2"	431	class="px-2"
431	required	432	required
432	></v-select>	433	></v-select>
433	</v-flex>	434	</v-flex>
434	</v-layout>	435	</v-layout>
435	<v-layout>	436	<v-layout>
436	<v-flex xs3 sm4 class="pt-4 subheading">	437	<v-flex xs3 sm4 class="pt-4 subheading">
437	<label class="right">Subject :</label>	438	<label class="right">Subject :</label>
438	</v-flex>	439	</v-flex>
439	<v-flex xs8 sm8 class="ml-2">	440	<v-flex xs8 sm8 class="ml-2">
440	<v-select	441	<v-select
441	:items="subjectList.subjects"	442	:items="subjectList.subjects"
442	label="Select your subject"	443	label="Select your subject"
443	v-model="addRoutine.subjectName"	444	v-model="addRoutine.subjectName"
444	item-text="subjectName"	445	item-text="subjectName"
445	item-value="subjectName"	446	item-value="subjectName"
446	:rules="subjectRules"	447	:rules="subjectRules"
447	required	448	required
448	></v-select>	449	></v-select>
449	</v-flex>	450	</v-flex>
450	</v-layout>	451	</v-layout>
451	<v-layout>	452	<v-layout>
452	<v-flex xs3 sm4 class="pt-4 subheading">	453	<v-flex xs3 sm4 class="pt-4 subheading">
453	<label class="right">Day :</label>	454	<label class="right">Day :</label>
454	</v-flex>	455	</v-flex>
455	<v-flex xs8 sm8 class="ml-2">	456	<v-flex xs8 sm8 class="ml-2">
456	<v-select	457	<v-select
457	:items="day"	458	:items="day"
458	label="Select your day"	459	label="Select your day"
459	v-model="addRoutine.day"	460	v-model="addRoutine.day"
460	item-text="text"	461	item-text="text"
461	:rules="dayRules"	462	:rules="dayRules"
462	required	463	required
463	></v-select>	464	></v-select>
464	</v-flex>	465	</v-flex>
465	</v-layout>	466	</v-layout>
466	<v-layout>	467	<v-layout>
467	<v-flex xs4 sm4 class="pt-4 subheading">	468	<v-flex xs4 sm4 class="pt-4 subheading">
468	<label class="right">Teacher Name :</label>	469	<label class="right">Teacher Name :</label>
469	</v-flex>	470	</v-flex>
470	<v-flex xs8 sm8 class="ml-3">	471	<v-flex xs8 sm8 class="ml-3">
471	<v-select	472	<v-select
472	v-model="addRoutine.teacherId"	473	v-model="addRoutine.teacherId"
473	label="Select your teacher"	474	label="Select your teacher"
474	type="text"	475	type="text"
475	:items="teacherList"	476	:items="teacherList"
476	item-text="name"	477	item-text="name"
477	item-value="_id"	478	item-value="_id"
478	:rules="teacherRules"	479	:rules="teacherRules"
479	required	480	required
480	></v-select>	481	></v-select>
481	</v-flex>	482	</v-flex>
482	</v-layout>	483	</v-layout>
483	<v-layout>	484	<v-layout>
484	<v-flex xs4 class="pt-4 subheading">	485	<v-flex xs4 class="pt-4 subheading">
485	<label class="right">Starting time:</label>	486	<label class="right">Starting time:</label>
486	</v-flex>	487	</v-flex>
487	<v-flex xs8 sm6 class="ml-3">	488	<v-flex xs8 sm6 class="ml-3">
488	<v-menu	489	<v-menu
489	ref="menuA"	490	ref="menuA"
490	:close-on-content-click="false"	491	:close-on-content-click="false"
491	v-model="menu2"	492	v-model="menu2"
492	:nudge-right="40"	493	:nudge-right="40"
493	:return-value.sync="addRoutine.startingTime"	494	:return-value.sync="addRoutine.startingTime"
494	lazy	495	lazy
495	transition="scale-transition"	496	transition="scale-transition"
496	offset-y	497	offset-y
497	full-width	498	full-width
498	max-width="290px"	499	max-width="290px"
499	min-width="290px"	500	min-width="290px"
500	>	501	>
501	<v-text-field	502	<v-text-field
502	slot="activator"	503	slot="activator"
503	v-model="addRoutine.startingTime"	504	v-model="addRoutine.startingTime"
504	label="Select your starting time"	505	label="Select your starting time"
505	append-icon="access_time"	506	append-icon="access_time"
506	:rules="timeInRules"	507	:rules="timeInRules"
507	readonly	508	readonly
508	></v-text-field>	509	></v-text-field>
509	<v-time-picker	510	<v-time-picker
510	v-model="addRoutine.startingTime"	511	v-model="addRoutine.startingTime"
511	@change="$refs.menuA.save(addRoutine.startingTime)"	512	@change="$refs.menuA.save(addRoutine.startingTime)"
512	></v-time-picker>	513	></v-time-picker>
513	</v-menu>	514	</v-menu>
514	</v-flex>	515	</v-flex>
515	</v-layout>	516	</v-layout>
516	<v-layout>	517	<v-layout>
517	<v-flex xs4 class="pt-4 subheading">	518	<v-flex xs4 class="pt-4 subheading">
518	<label class="right">Ending Time:</label>	519	<label class="right">Ending Time:</label>
519	</v-flex>	520	</v-flex>
520	<v-flex xs8 sm6 class="ml-3">	521	<v-flex xs8 sm6 class="ml-3">
521	<v-menu	522	<v-menu
522	ref="menu"	523	ref="menu"
523	:close-on-content-click="false"	524	:close-on-content-click="false"
524	v-model="menu1"	525	v-model="menu1"
525	:nudge-right="40"	526	:nudge-right="40"
526	:return-value.sync="addRoutine.endingTime"	527	:return-value.sync="addRoutine.endingTime"
527	lazy	528	lazy
528	transition="scale-transition"	529	transition="scale-transition"
529	offset-y	530	offset-y
530	full-width	531	full-width
531	max-width="290px"	532	max-width="290px"
532	min-width="290px"	533	min-width="290px"
533	>	534	>
534	<v-text-field	535	<v-text-field
535	slot="activator"	536	slot="activator"
536	v-model="addRoutine.endingTime"	537	v-model="addRoutine.endingTime"
537	label="Select your end time"	538	label="Select your end time"
538	append-icon="access_time"	539	append-icon="access_time"
539	:rules="timeOutRules"	540	:rules="timeOutRules"
540	readonly	541	readonly
541	></v-text-field>	542	></v-text-field>
542	<v-time-picker	543	<v-time-picker
543	v-model="addRoutine.endingTime"	544	v-model="addRoutine.endingTime"
544	@change="$refs.menu.save(addRoutine.endingTime)"	545	@change="$refs.menu.save(addRoutine.endingTime)"
545	></v-time-picker>	546	></v-time-picker>
546	</v-menu>	547	</v-menu>
547	</v-flex>	548	</v-flex>
548	</v-layout>	549	</v-layout>
549	<v-layout>	550	<v-layout>
550	<v-flex xs4 sm4 class="pt-4 subheading">	551	<v-flex xs4 sm4 class="pt-4 subheading">
551	<label class="right">Room:</label>	552	<label class="right">Room:</label>
552	</v-flex>	553	</v-flex>
553	<v-flex xs8 sm8 class="ml-3">	554	<v-flex xs8 sm8 class="ml-3">
554	<v-text-field	555	<v-text-field
555	label="fill your room"	556	label="fill your room"
556	:rules="roomRules"	557	:rules="roomRules"
557	v-model="addRoutine.room"	558	v-model="addRoutine.room"
558	@keyup.enter="submit"	559	@keyup.enter="submit"
559	></v-text-field>	560	></v-text-field>
560	</v-flex>	561	</v-flex>
561	</v-layout>	562	</v-layout>
562	<v-layout>	563	<v-layout>
563	<v-flex xs4 sm4 class="pt-4 subheading">	564	<v-flex xs4 sm4 class="pt-4 subheading">
564	<label class="right">Period:</label>	565	<label class="right">Period:</label>
565	</v-flex>	566	</v-flex>
566	<v-flex xs8 sm8 class="ml-3">	567	<v-flex xs8 sm8 class="ml-3">
567	<v-text-field	568	<v-text-field
568	label="fill your period"	569	label="fill your period"
569	:rules="periodRules"	570	:rules="periodRules"
570	v-model="addRoutine.period"	571	v-model="addRoutine.period"
571	@keyup.enter="submit"	572	@keyup.enter="submit"
572	></v-text-field>	573	></v-text-field>
573	</v-flex>	574	</v-flex>
574	</v-layout>	575	</v-layout>
575	<v-layout>	576	<v-layout>
576	<v-flex xs12 sm12>	577	<v-flex xs12 sm12>
577	<v-card-actions>	578	<v-card-actions>
578	<v-spacer></v-spacer>	579	<v-spacer></v-spacer>
579	<v-btn	580	<v-btn
580	@click="create"	581	@click="create"
581	round	582	round
582	dark	583	dark
583	:loading="loading"	584	:loading="loading"
584	class="add-button"	585	class="add-button"
585	>Add Routine</v-btn>	586	>Add Routine</v-btn>
586	</v-card-actions>	587	</v-card-actions>
587	</v-flex>	588	</v-flex>
588	</v-layout>	589	</v-layout>
589	</v-form>	590	</v-form>
590	</v-flex>	591	</v-flex>
591	</v-layout>	592	</v-layout>
592	</v-container>	593	</v-container>
593	</v-card>	594	</v-card>
594	</v-dialog>	595	</v-dialog>
595	<div class="loader" v-if="showLoader">	596	<div class="loader" v-if="showLoader">
596	<v-progress-circular indeterminate color="white"></v-progress-circular>	597	<v-progress-circular indeterminate color="white"></v-progress-circular>
597	</div>	598	</div>
598	</v-container>	599	</v-container>
599	</template>	600	</template>
600		601
601	<script>	602	<script>
602	import http from "@/Services/http.js";	603	import http from "@/Services/http.js";
603	import Util from "@/util";	604	import Util from "@/util";
604		605
605	export default {	606	export default {
606	data: () => ({	607	data: () => ({
607	snackbar: false,	608	snackbar: false,
608	y: "top",	609	y: "top",
609	x: "right",	610	x: "right",
610	role: "",	611	role: "",
611	mode: "",	612	mode: "",
612	timeout: 3000,	613	timeout: 3000,
613	text: "",	614	text: "",
614	color: "",	615	color: "",
615	show: true,	616	show: true,
616	showSearch: false,	617	showSearch: false,
617	showLoader: false,	618	showLoader: false,
618	loading: false,	619	loading: false,
619	editLoading: false,	620	editLoading: false,
620	date: null,	621	date: null,
621	search: "",	622	search: "",
622	editRoutineDialog: false,	623	editRoutineDialog: false,
623	valid: true,	624	valid: true,
624	validEditRoutine: true,	625	validEditRoutine: true,
625	addRoutineDialog: false,	626	addRoutineDialog: false,
626	showTable: false,	627	showTable: false,
627	hideTable: true,	628	hideTable: true,
628	name: "",	629	name: "",
629		630
630	day: [	631	day: [
631	"Monday",	632	"Monday",
632	"Tuesday",	633	"Tuesday",
633	"Wednesday",	634	"Wednesday",
634	"Thursday",	635	"Thursday",
635	"Friday",	636	"Friday",
636	"Saturday",	637	"Saturday",
637	"Sunday",	638	"Sunday",
638	],	639	],
639		640
640	token: "",	641	token: "",
641		642
642	menu1: false,	643	menu1: false,
643	menu2: false,	644	menu2: false,
644	menu4: false,	645	menu4: false,
645	menu3: false,	646	menu3: false,
646		647
647	schoolRules: [(v) => !!v \|\| "School Year is required"],	648	schoolRules: [(v) => !!v \|\| "School Year is required"],
648	classRules: [(v) => !!v \|\| " Class Name is required"],	649	classRules: [(v) => !!v \|\| " Class Name is required"],
649	teacherRules: [(v) => !!v \|\| " Teacher Name is required"],	650	teacherRules: [(v) => !!v \|\| " Teacher Name is required"],
650	sectionRules: [(v) => !!v \|\| "Section is required"],	651	sectionRules: [(v) => !!v \|\| "Section is required"],
651	studentRules: [(v) => !!v \|\| " Student is required"],	652	studentRules: [(v) => !!v \|\| " Student is required"],
652	finalRules: [(v) => !!v \|\| "Final MArk is required"],	653	finalRules: [(v) => !!v \|\| "Final MArk is required"],
653	subjectRules: [(v) => !!v \|\| " Subject Name is required"],	654	subjectRules: [(v) => !!v \|\| " Subject Name is required"],
654	dayRules: [(v) => !!v \|\| "Day is required"],	655	dayRules: [(v) => !!v \|\| "Day is required"],
655	timeInRules: [(v) => !!v \|\| "Start Time is required"],	656	timeInRules: [(v) => !!v \|\| "Start Time is required"],
656	timeOutRules: [(v) => !!v \|\| "End Time is required"],	657	timeOutRules: [(v) => !!v \|\| "End Time is required"],
657	roomRules: [(v) => !!v \|\| "Room is required"],	658	roomRules: [(v) => !!v \|\| "Room is required"],
658	periodRules: [(v) => !!v \|\| "Period is required"],	659	periodRules: [(v) => !!v \|\| "Period is required"],
659		660
660	classList: [],	661	classList: [],
661	addSection: [],	662	addSection: [],
662	subjectList: [],	663	subjectList: [],
663	teacherList: [],	664	teacherList: [],
664	titleRules: [],	665	titleRules: [],
665	markRules: [],	666	markRules: [],
666	typeRules: [],	667	typeRules: [],
667	routineList: [],	668	routineList: [],
668	editedIndex: -1,	669	editedIndex: -1,
669	addRoutine: {},	670	addRoutine: {},
670	addRoutineList: {},	671	addRoutineList: {},
671	startingTime: "",	672	startingTime: "",
672	editedItem: {},	673	editedItem: {},
673	}),	674	}),
		675	watch: {
		676	addRoutineDialog: function (val) {
		677	if (!val) {
		678	this.addRoutine = [];
		679	}
		680	},
		681	},
674	methods: {	682	methods: {
675	editItem(item, routineData) {	683	editItem(item, routineData) {
676	console.log("routineData", routineData);	684	console.log("routineData", routineData);
677	console.log("item", item);	685	console.log("item", item);
678	this.editedIndex = this.routineList;	686	this.editedIndex = this.routineList;
679	this.editedItem = Object.assign({}, item);	687	this.editedItem = Object.assign({}, item);
680	this.editedItem.lectureRoutineId = item._id;	688	this.editedItem.lectureRoutineId = item._id;
681	this.editedItem.routineId = routineData._id;	689	this.editedItem.routineId = routineData._id;
682	this.dialog = true;	690	this.dialog = true;
683	this.editRoutineDialog = true;	691	this.editRoutineDialog = true;
684	},	692	},
685	deleteItem(item) {	693	deleteItem(item) {
686	let deleteLecture = {	694	let deleteLecture = {
687	routineId: item._id,	695	routineId: item._id,
688	lectureId: item.lectureRoutine[0]._id,	696	lectureId: item.lectureRoutine[0]._id,
689	};	697	};
690	http()	698	http()
691	.delete(	699	.delete(
692	"/deleteRoutineLecture",	700	"/deleteRoutineLecture",
693	confirm("Are you sure you want to delete this?") && {	701	confirm("Are you sure you want to delete this?") && {
694	params: deleteLecture,	702	params: deleteLecture,
695	}	703	}
696	)	704	)
697	.then((response) => {	705	.then((response) => {
698	this.snackbar = true;	706	this.snackbar = true;
699	this.text = "Successfully delete Existing Routine";	707	this.text = "Successfully delete Existing Routine";
700	this.color = "green";	708	this.color = "green";
701	this.getRoutineList();	709	this.getRoutineList();
702	})	710	})
703	.catch((error) => {	711	.catch((error) => {
704	this.snackbar = true;	712	this.snackbar = true;
705	this.text = error.response.data.message;	713	this.text = error.response.data.message;
706	this.color = "error";	714	this.color = "error";
707	});	715	});
708	},	716	},
709	close() {	717	close() {
710	this.editRoutineDialog = false;	718	this.editRoutineDialog = false;
711	},	719	},
712		720	closeAddRoutineModel() {
		721	this.addRoutineDialog = false;
		722	this.classList = [];
		723	this.addRoutine = [];
		724	},
713	create() {	725	create() {
714	var routineData = {	726	var routineData = {
715	schoolYear: this.addRoutine.schoolYear,	727	schoolYear: this.addRoutine.schoolYear,
716	classId: this.addRoutine.classId,	728	classId: this.addRoutine.classId,
717	sectionId: this.addRoutine.sectionId,	729	sectionId: this.addRoutine.sectionId,
718	day: this.addRoutine.day,	730	day: this.addRoutine.day,
719	lectureRoutine: [],	731	lectureRoutine: [],
720	};	732	};
721	if (this.$refs.form.validate()) {	733	if (this.$refs.form.validate()) {
722	routineData.lectureRoutine.push({	734	routineData.lectureRoutine.push({
723	teacherId: this.addRoutine.teacherId,	735	teacherId: this.addRoutine.teacherId,
724	startingTime: this.addRoutine.startingTime,	736	startingTime: this.addRoutine.startingTime,
725	endingTime: this.addRoutine.endingTime,	737	endingTime: this.addRoutine.endingTime,
726	room: this.addRoutine.room,	738	room: this.addRoutine.room,
727	period: this.addRoutine.period,	739	period: this.addRoutine.period,
728	subjectName: this.addRoutine.subjectName,	740	subjectName: this.addRoutine.subjectName,
729	});	741	});
730	http()	742	http()
731	.post("/createRoutine", routineData)	743	.post("/createRoutine", routineData)
732	.then((response) => {	744	.then((response) => {
733	this.getRoutineList();	745	this.getRoutineList();
734	this.text = "Routine added successfully";	746	this.text = "Routine added successfully";
735	this.clear();	747	this.clear();
736	this.snackbar = true;	748	this.snackbar = true;
737	this.color = "green";	749	this.color = "green";
738	this.addRoutineDialog = false;	750	this.addRoutineDialog = false;
739	})	751	})
740	.catch((error) => {	752	.catch((error) => {
741	// console.log(error);	753	// console.log(error);
742	this.snackbar = true;	754	this.snackbar = true;
743	this.text = error.response.data.message;	755	this.text = error.response.data.message;
744	this.color = "error";	756	this.color = "error";
745	});	757	});
746	}	758	}
747	},	759	},
748	clear() {	760	clear() {
749	this.$refs.form.reset();	761	this.$refs.form.reset();
750	},	762	},
751		763
752	update() {	764	update() {
753	if (this.$refs.formEditRoutine.validate()) {	765	if (this.$refs.formEditRoutine.validate()) {
754	let editRoutine = {	766	let editRoutine = {
755	routineId: this.editedItem.routineId,	767	routineId: this.editedItem.routineId,
756	lectureRoutineId: this.editedItem.lectureRoutineId,	768	lectureRoutineId: this.editedItem.lectureRoutineId,
757	subjectName: this.editedItem.subjectName,	769	subjectName: this.editedItem.subjectName,
758	teacherId: this.editedItem.teacherId._id,	770	teacherId: this.editedItem.teacherId._id,
759	startingTime: this.editedItem.startingTime,	771	startingTime: this.editedItem.startingTime,
760	endingTime: this.editedItem.endingTime,	772	endingTime: this.editedItem.endingTime,
761	room: this.editedItem.room,	773	room: this.editedItem.room,
762	period: this.editedItem.period,	774	period: this.editedItem.period,
763	};	775	};
764	this.editLoading = true;	776	this.editLoading = true;
765	http()	777	http()
766	.put("/updateRoutine", editRoutine)	778	.put("/updateRoutine", editRoutine)
767	.then((response) => {	779	.then((response) => {
768	this.snackbar = true;	780	this.snackbar = true;
769	this.text = "Successfully Edit Existing Routine";	781	this.text = "Successfully Edit Existing Routine";
770	this.color = "green";	782	this.color = "green";
771	this.editLoading = false;	783	this.editLoading = false;
772	this.editRoutineDialog = false;	784	this.editRoutineDialog = false;
773	this.getRoutineList();	785	this.getRoutineList();
774	// http()	786	// http()
775	// .get(	787	// .get(
776	// "/getRoutineList",	788	// "/getRoutineList",
777	// {	789	// {
778	// params: {	790	// params: {
779	// classId: this.addRoutine.classId,	791	// classId: this.addRoutine.classId,
780	// sectionId: this.addRoutine.sectionId	792	// sectionId: this.addRoutine.sectionId
781	// }	793	// }
782	// },	794	// },
783	// {	795	// {
784	// headers: { Authorization: "Bearer " + this.token }	796	// headers: { Authorization: "Bearer " + this.token }
785	// }	797	// }
786	// )	798	// )
787	// .then(response => {	799	// .then(response => {
788	// this.routineList = response.data.data;	800	// this.routineList = response.data.data;
789	// this.showLoader = false;	801	// this.showLoader = false;
790	// this.showTable = true;	802	// this.showTable = true;
791	// this.hideTable = false;	803	// this.hideTable = false;
792	// })	804	// })
793	// .catch(err => {	805	// .catch(err => {
794	// console.log("err====>", err);	806	// console.log("err====>", err);
795	// });	807	// });
796	})	808	})
797	.catch((error) => {	809	.catch((error) => {
798	this.editLoading = false;	810	this.editLoading = false;
799	});	811	});
800	}	812	}
801	},	813	},
802	getClass() {	814	getClass() {
803	http()	815	http()
804	.get("/getClassesList", {	816	.get("/getClassesList", {
805	headers: { Authorization: "Bearer " + this.token },	817	headers: { Authorization: "Bearer " + this.token },
806	})	818	})
807	.then((response) => {	819	.then((response) => {
808	this.classList = response.data.data;	820	this.classList = response.data.data;
809	})	821	})
810	.catch((error) => {	822	.catch((error) => {
811	if (error.response.status === 401) {	823	if (error.response.status === 401) {
812	this.$router.replace({ path: "/" });	824	this.$router.replace({ path: "/" });
813	this.$store.dispatch("setToken", null);	825	this.$store.dispatch("setToken", null);
814	this.$store.dispatch("Id", null);	826	this.$store.dispatch("Id", null);
815	}	827	}
816	});	828	});
817	},	829	},
818	getSections(_id) {	830	getSections(_id) {
819	var token = this.$store.state.token;	831	var token = this.$store.state.token;
820	this.showLoader = true;	832	this.showLoader = true;
821	http()	833	http()
822	.get(	834	.get(
823	"/getSectionsList",	835	"/getSectionsList",
824	{ params: { classId: _id } },	836	{ params: { classId: _id } },
825	{	837	{
826	headers: { Authorization: "Bearer " + token },	838	headers: { Authorization: "Bearer " + token },
827	}	839	}
828	)	840	)
829	.then((response) => {	841	.then((response) => {
830	this.addSection = response.data.data;	842	this.addSection = response.data.data;
831	this.showLoader = false;	843	this.showLoader = false;
832	})	844	})
833	.catch((err) => {	845	.catch((err) => {
834	this.showLoader = false;	846	this.showLoader = false;
835	});	847	});
836	},	848	},
837	getClassSubject(_id) {	849	getClassSubject(_id) {
838	this.showLoader = true;	850	this.showLoader = true;
839	// this.classId = this.classId;	851	// this.classId = this.classId;
840	http()	852	http()
841	.get(	853	.get(
842	"/getParticularClass",	854	"/getParticularClass",
843	{ params: { classId: _id } },	855	{ params: { classId: _id } },
844	{	856	{
845	headers: { Authorization: "Bearer " + this.token },	857	headers: { Authorization: "Bearer " + this.token },
846	}	858	}
847	)	859	)
848	.then((response) => {	860	.then((response) => {
849	this.subjectList = response.data.data;	861	this.subjectList = response.data.data;
850	this.showLoader = false;	862	this.showLoader = false;
851	})	863	})
852	.catch((err) => {	864	.catch((err) => {
853	this.showLoader = false;	865	this.showLoader = false;
854	});	866	});
855	},	867	},
856	getTeacherList() {	868	getTeacherList() {
857	this.showLoader = true;	869	this.showLoader = true;
858	var token = this.$store.state.token;	870	var token = this.$store.state.token;
859	http()	871	http()
860	.get("/getTeachersList", {	872	.get("/getTeachersList", {
861	headers: { Authorization: "Bearer " + token },	873	headers: { Authorization: "Bearer " + token },
862	})	874	})
863	.then((response) => {	875	.then((response) => {
864	this.teacherList = response.data.data;	876	this.teacherList = response.data.data;
865	this.showLoader = false;	877	this.showLoader = false;
866	// console.log("getTeacherList=====>",this.desserts)	878	// console.log("getTeacherList=====>",this.desserts)
867	})	879	})
868	.catch((error) => {	880	.catch((error) => {
869	this.showLoader = false;	881	this.showLoader = false;
870	if (error.response.status === 401) {	882	if (error.response.status === 401) {
871	this.$router.replace({ path: "/" });	883	this.$router.replace({ path: "/" });
872	this.$store.dispatch("setToken", null);	884	this.$store.dispatch("setToken", null);
873	this.$store.dispatch("Id", null);	885	this.$store.dispatch("Id", null);
874	}	886	}
875	});	887	});
876	},	888	},
877	getRoutineList() {	889	getRoutineList() {
878	this.showLoader = true;	890	this.showLoader = true;
879	http()	891	http()
880	.get(	892	.get(
881	"/getRoutineList",	893	"/getRoutineList",
882	{	894	{
883	params: {	895	params: {
884	classId: this.addRoutineList.classId,	896	classId: this.addRoutineList.classId,
885	sectionId: this.addRoutineList.sectionId,	897	sectionId: this.addRoutineList.sectionId,
886	},	898	},
887	},	899	},
888	{	900	{
889	headers: { Authorization: "Bearer " + this.token },	901	headers: { Authorization: "Bearer " + this.token },
890	}	902	}
891	)	903	)
892	.then((response) => {	904	.then((response) => {
893	this.routineList = response.data.data;	905	this.routineList = response.data.data;
894	this.showLoader = false;	906	this.showLoader = false;
895	this.showTable = true;	907	this.showTable = true;
896	this.hideTable = false;	908	this.hideTable = false;
897	})	909	})
898	.catch((err) => {	910	.catch((err) => {
899	this.showLoader = false;	911	this.showLoader = false;
900	});	912	});
901	},	913	},
902	displaySearch() {	914	displaySearch() {
903	(this.show = false), (this.showSearch = true);	915	(this.show = false), (this.showSearch = true);
904	},	916	},
905	closeSearch() {	917	closeSearch() {
906	this.showSearch = false;	918	this.showSearch = false;
907	this.show = true;	919	this.show = true;
908	this.search = "";	920	this.search = "";
909	},	921	},
910	},	922	},
911	mounted() {	923	mounted() {
912	this.token = this.$store.state.token;	924	this.token = this.$store.state.token;
913	this.getClass();	925	this.getClass();
914	this.getTeacherList();	926	this.getTeacherList();
915	this.role = this.$store.state.role;	927	this.role = this.$store.state.role;
916	},	928	},
917	};	929	};
918	</script>	930	</script>
919		931
920	<style scoped>	932	<style scoped>
921	html,	933	html,
922	body {	934	body {
923	font-family: "OpenSans Regular";	935	font-family: "OpenSans Regular";
924	}	936	}
925	.box .box-body {	937	.box .box-body {
926	padding: 15px;	938	padding: 15px;
927	border-top-left-radius: 0;	939	border-top-left-radius: 0;
928	border-top-right-radius: 0;	940	border-top-right-radius: 0;
929	border-bottom-right-radius: 3px;	941	border-bottom-right-radius: 3px;
930	border-bottom-left-radius: 3px;	942	border-bottom-left-radius: 3px;
931	}	943	}
932	.nav-tabs-custom {	944	.nav-tabs-custom {
933	margin-bottom: 20px;	945	margin-bottom: 20px;
934	background: #fff;	946	background: #fff;
935	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);	947	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
936	}	948	}
937	.nav-tabs {	949	.nav-tabs {
938	border-bottom: 1px solid #ddd;	950	border-bottom: 1px solid #ddd;
939	}	951	}
940	.nav {	952	.nav {
941	padding-left: 0;	953	padding-left: 0;
942	list-style: none;	954	list-style: none;
943	}	955	}
944	.tab-content > .active {	956	.tab-content > .active {
945	display: block;	957	display: block;
946	}	958	}
947	.nav-tabs-custom > .nav-tabs > li.active > a {	959	.nav-tabs-custom > .nav-tabs > li.active > a {
948	border-top: 0;	960	border-top: 0;
949	border-left-color: #09a3a3;	961	border-left-color: #09a3a3;
950	border-right-color: #09a3a3;	962	border-right-color: #09a3a3;
951	}	963	}
952	.nav-tabs-custom > .nav-tabs {	964	.nav-tabs-custom > .nav-tabs {
953	background-color: #e5e5e5;	965	background-color: #e5e5e5;
954	margin: 0;	966	margin: 0;
955	border-bottom-color: #e5e5e5;	967	border-bottom-color: #e5e5e5;
956	}	968	}
957	.nav-tabs-custom > .nav-tabs > li:first-of-type {	969	.nav-tabs-custom > .nav-tabs > li:first-of-type {
958	margin-left: 0px;	970	margin-left: 0px;
959	}	971	}
960	.nav-tabs-custom > .nav-tabs > li.active {	972	.nav-tabs-custom > .nav-tabs > li.active {
961	border-bottom-color: #09a3a3;	973	border-bottom-color: #09a3a3;
962	}	974	}
963	.nav-tabs-custom > .nav-tabs > li {	975	.nav-tabs-custom > .nav-tabs > li {
964	border-bottom: 2px solid transparent;	976	border-bottom: 2px solid transparent;
965	border-top: 3px solid transparent;	977	border-top: 3px solid transparent;
966	margin-bottom: -2px;	978	margin-bottom: -2px;
967	margin-right: 5px;	979	margin-right: 5px;
968	}	980	}
969	.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {	981	.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
970	border-left-width: 0;	982	border-left-width: 0;
971	}	983	}
972	.nav-tabs-custom > .nav-tabs > li.active > a {	984	.nav-tabs-custom > .nav-tabs > li.active > a {
973	border-top: 0;	985	border-top: 0;
974	border-bottom-color: #09a3a3;	986	border-bottom-color: #09a3a3;
975	}	987	}
976	.nav-tabs-custom > .nav-tabs > li.active > a,	988	.nav-tabs-custom > .nav-tabs > li.active > a,
977	.nav-tabs-custom > .nav-tabs > li.active:hover > a {	989	.nav-tabs-custom > .nav-tabs > li.active:hover > a {
978	background-color: #e5e5e5;	990	background-color: #e5e5e5;
979	border: 0px;	991	border: 0px;
980	color: #000000db;	992	color: #000000db;
981	}	993	}
982	.nav-tabs-custom > .nav-tabs > li > a,	994	.nav-tabs-custom > .nav-tabs > li > a,
983	.nav-tabs-custom > .nav-tabs > li > a:hover {	995	.nav-tabs-custom > .nav-tabs > li > a:hover {
984	border-radius: 0 !important;	996	border-radius: 0 !important;
985	}	997	}
986	.nav-tabs-custom > .tab-content {	998	.nav-tabs-custom > .tab-content {
987	background: #fff;	999	background: #fff;
988	padding: 10px;	1000	padding: 10px;
989	}	1001	}
990	.page-header {	1002	.page-header {
991	margin: 10px 0 20px 0;	1003	margin: 10px 0 20px 0;
992	padding: 0px 0px 16px;	1004	padding: 0px 0px 16px;
993	font-size: 22px;	1005	font-size: 22px;
994	border: none;	1006	border: none;
995	}	1007	}
996	.table {	1008	.table {
997	width: 100%;	1009	width: 100%;
998	border-collapse: collapse;	1010	border-collapse: collapse;
999	border-spacing: 0;	1011	border-spacing: 0;
1000	}	1012	}
1001	.table > tbody > tr > th,	1013	.table > tbody > tr > th,
1002	.table > tfoot > tr > th,	1014	.table > tfoot > tr > th,
1003	.table > tbody > tr > td,	1015	.table > tbody > tr > td,
1004	.table > tfoot > tr > td {	1016	.table > tfoot > tr > td {
1005	padding: 8px;	1017	padding: 8px;
1006	line-height: 1.428571429;	1018	line-height: 1.428571429;
1007	vertical-align: top;	1019	vertical-align: top;
1008	border-top: 1px solid #ddd;	1020	border-top: 1px solid #ddd;
1009	}	1021	}
1010	.nav::before,	1022	.nav::before,
1011	.nav::after {	1023	.nav::after {
1012	display: table;	1024	display: table;
1013	content: "";	1025	content: "";
1014	}	1026	}
1015	.box .box-body .table {	1027	.box .box-body .table {
1016	margin-bottom: 0;	1028	margin-bottom: 0;
1017	}	1029	}
1018	.table-bordered {	1030	.table-bordered {
1019	border: 1px solid #e2e7eb;	1031	border: 1px solid #e2e7eb;
1020	}	1032	}
1021	.table-striped > tbody > tr:nth-child(2n + 1) > td,	1033	.table-striped > tbody > tr:nth-child(2n + 1) > td,
1022	.table-striped > tbody > tr:nth-child(2n + 1) > th {	1034	.table-striped > tbody > tr:nth-child(2n + 1) > th {
1023	background-color: #f0f3f5;	1035	background-color: #f0f3f5;
1024	}	1036	}
1025	.table-bordered > tbody > v-data-table > template > tr > th,	1037	.table-bordered > tbody > v-data-table > template > tr > th,
1026	.table-bordered > tbody > tr > td {	1038	.table-bordered > tbody > tr > td {
1027	border-color: #e2e7eb;	1039	border-color: #e2e7eb;
1028	font-size: 12px;	1040	font-size: 12px;
1029	}	1041	}
1030	.table-bordered > tbody > tr > td {	1042	.table-bordered > tbody > tr > td {
1031	color: #707070;	1043	color: #707070;
1032	}	1044	}
1033	/*	1045	/*
1034	.table-bordered > tbody > tr > th,	1046	.table-bordered > tbody > tr > th,
1035	.table-bordered > tfoot > tr > th,	1047	.table-bordered > tfoot > tr > th,
1036	.table-bordered > tbody > tr > td,	1048	.table-bordered > tbody > tr > td,
1037	.table-bordered > tfoot > tr > td {	1049	.table-bordered > tfoot > tr > td {
1038	border: 1px solid #ddd;	1050	border: 1px solid #ddd;
1039	} */	1051	} */
1040	.mCustomScrollbar.mCS_no_scrollbar,	1052	.mCustomScrollbar.mCS_no_scrollbar,
1041	.mCustomScrollbar.mCS_touch_action {	1053	.mCustomScrollbar.mCS_touch_action {
1042	touch-action: auto;	1054	touch-action: auto;
1043	}	1055	}
1044	.mCSB_scrollTools.mCSB_scrollTools_horizontal {	1056	.mCSB_scrollTools.mCSB_scrollTools_horizontal {
1045	width: auto;	1057	width: auto;
1046	height: 16px;	1058	height: 16px;
1047	top: auto;	1059	top: auto;
1048	right: 0;	1060	right: 0;
1049	bottom: 0;	1061	bottom: 0;
1050	left: 0;	1062	left: 0;
1051	}	1063	}
1052	.mCSB_scrollTools {	1064	.mCSB_scrollTools {
1053	opacity: 0.75;	1065	opacity: 0.75;
1054	}	1066	}
1055	.mCSB_scrollTools .mCSB_draggerContainer {	1067	.mCSB_scrollTools .mCSB_draggerContainer {
1056	position: absolute;	1068	position: absolute;
1057	height: auto;	1069	height: auto;
1058	top: 0;	1070	top: 0;
1059	left: 0;	1071	left: 0;
1060	bottom: 0;	1072	bottom: 0;
1061	right: 0;	1073	right: 0;
1062	}	1074	}
1063	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {	1075	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
1064	height: 100%;	1076	height: 100%;
1065	}	1077	}
1066	.mCSB_scrollTools .mCSB_dragger {	1078	.mCSB_scrollTools .mCSB_dragger {
1067	cursor: pointer;	1079	cursor: pointer;
1068	z-index: 1;	1080	z-index: 1;
1069	}	1081	}
1070	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {	1082	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
1071	width: 100%;	1083	width: 100%;
1072	height: 4px;	1084	height: 4px;
1073	margin: 6px auto;	1085	margin: 6px auto;
1074	}	1086	}
1075	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {	1087	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
1076	background-color: rgba(255, 255, 255, 0.75);	1088	background-color: rgba(255, 255, 255, 0.75);
1077	}	1089	}
1078	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {	1090	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
1079	width: 100%;	1091	width: 100%;
1080	height: 2px;	1092	height: 2px;
1081	margin: 7px 0;	1093	margin: 7px 0;
1082	}	1094	}
1083	.mCSB_scrollTools .mCSB_draggerRail {	1095	.mCSB_scrollTools .mCSB_draggerRail {
1084	background-color: rgba(0, 0, 0, 0.4);	1096	background-color: rgba(0, 0, 0, 0.4);
1085	border-radius: 16px;	1097	border-radius: 16px;
1086	}	1098	}
1087	.mCustomScrollBox {	1099	.mCustomScrollBox {
1088	position: relative;	1100	position: relative;
1089	overflow: hidden;	1101	overflow: hidden;
1090	height: 100%;	1102	height: 100%;
1091	max-width: 100%;	1103	max-width: 100%;
1092	outline: none;	1104	outline: none;
1093	direction: ltr;	1105	direction: ltr;
1094	}	1106	}
1095	/* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {	1107	/* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
1096	margin-bottom: 0;	1108	margin-bottom: 0;
1097	}	1109	}
1098	.mCSB_horizontal.mCSB_inside > .mCSB_container {	1110	.mCSB_horizontal.mCSB_inside > .mCSB_container {
1099	margin-right: 0;	1111	margin-right: 0;
1100	} */	1112	} */
1101	.mCSB_container {	1113	.mCSB_container {
1102	overflow: hidden;	1114	overflow: hidden;
1103	height: auto;	1115	height: auto;
1104	}	1116	}
1105		1117
1106	@media (min-width: 768px) {	1118	@media (min-width: 768px) {
1107	.col-sm-12 {	1119	.col-sm-12 {
1108	width: 100%;	1120	width: 100%;
1109	}	1121	}
1110	}	1122	}
1111	</style>	1123	</style>

src/pages/Academic/subject.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Subject ****** -->
     <v-dialog v-model="editSubjectDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Subject</label>
             <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   v-model="editedItem.classId"
                   label="Select your class"
                   type="text"
                   :items="classList"
                   item-text="classNum"
                   item-value="_id"
                   :rules="classRules"
                   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="editedItem.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 sm4 class="pt-4 sybheading">
                 <label class="right">Type :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-select
                   v-model="editedItem.type"
                   :items="type"
                   label="Select your Type"
                   :rules="typeRules"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Pass Mark :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="Fill your Pass Mark"
                   name="name"
                   type="text"
                   :rules="markRules"
                   v-model="editedItem.passMarks"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Final Mark :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="Fill your final mark"
                   name="name"
                   type="text"
                   :rules="finalRules"
                   v-model="editedItem.finalMarks"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Subject:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field
                   placeholder="fill your Subject"
                   v-model="editedItem.subjectName"
                   :rules="subjectRules"
                   type="text"
                   name="email"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Subject Author :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.subjectAuthor"
                   placeholder="fill your Subject Author"
                   name="name"
                   type="text"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Subject Code:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.subjectCode"
                   placeholder="fill your Subject Code"
                   name="name"
                   type="text"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="save"
                   :loading="editLoading"
                   class="add-button"
                 >Update Subject</v-btn>
               </v-card-actions>
             </v-flex>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <v-dialog v-model="viewSubjectDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Subject</label>
             <v-icon size="24" class="right" @click="viewSubjectDialog = 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 xs6 sm4>
                     <h5 class="right my-1">
                       <b>Subject Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Subject Author:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Subject :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
                   </v-flex>
                 </v-layout>
                 <!-- <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Teacher :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.teacherId }}</h5>
                   </v-flex>
                 </v-layout>-->
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Pass Marks :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.passMarks }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Final Marks :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Type :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.type }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING SUBJECTS 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="addSubjectDialog = 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="addSubjectDialog = true"
           v-if="role != 'TEACHER' "
         >
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
         </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="getSubject.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getClassSubject"
           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
+            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>
     <v-data-table
       :headers="headers"
       :items="subjectList.subjects"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td-row td">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
           <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
           <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
           <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
           <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
           <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
           <td class="text-xs-center td td-row">{{ props.item.type }}</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>
                 <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>
                 <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>
     <!-- ****** 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="addSubjectDialog" max-width="600px">
+    <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Subject</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addSubjectDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addSubjectDialog = false"
+            >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">Class Name :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       v-model="addSubject.classId"
                       label="Select your class"
                       type="text"
                       :items="classList"
                       item-text="classNum"
                       item-value="_id"
                       :rules="classRules"
                       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="addSubject.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 sm4 class="pt-4 sybheading">
                     <label class="right">Type :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       v-model="addSubject.type"
                       :items="type"
                       label="Select your Type"
                       :rules="typeRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Pass Mark :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       label="Fill your Pass Mark"
                       name="name"
                       type="text"
                       :rules="markRules"
                       v-model="addSubject.passMarks"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Final Mark :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       label="Fill your final mark"
                       name="name"
                       type="text"
                       :rules="finalRules"
                       v-model="addSubject.finalMarks"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Subject :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSubject.subjectName"
                       placeholder="fill your Subject Name"
                       name="name"
                       type="text"
                       :rules="subjectRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Subject Author :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSubject.subjectAuthor"
                       placeholder="fill your Subject Author"
                       name="name"
                       type="text"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Subject Code:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSubject.subjectCode"
                       placeholder="fill your Subject Code"
                       name="name"
                       type="text"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         round
                         dark
                         :loading="addLoading"
                         class="add-button"
                       >Add Subject</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,
     addLoading: false,
     date: null,
     search: "",
     viewSubjectDialog: false,
     editSubjectDialog: false,
     valid: true,
     validEditSubject: true,
     addSubjectDialog: false,
     // isActive: true,
     // newActive: false,
     type: ["Optional", "Mandatory"],
     pagination: {
       rowsPerPage: 10,
     },
     token: "",
     classRules: [(v) => !!v || " Class Name is required"],
     teacherRules: [(v) => !!v || " Teacher Name is required"],
     typeRules: [(v) => !!v || "Type is required"],
     markRules: [(v) => !!v || " Pass Mark is required"],
     finalRules: [(v) => !!v || "Final MArk is required"],
     subjectRules: [(v) => !!v || " Subject Name is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
         align: "center",
       },
       {
         text: "Subject Author",
         value: "subjectAuthor",
         sortable: false,
         align: "center",
       },
       {
         text: "Subject Code",
         value: "subjectCode",
         sortable: false,
         align: "center",
       },
       // {
       //   text: "Teacher",
       //   value: "teacherId",
       //   sortable: false,
       //   align: "center"
       // },
       {
         text: "Pass Marks",
         value: "passMarks",
         sortable: false,
         align: "center",
       },
       {
         text: "Final Marks",
         value: "finalMarks",
         sortable: false,
         align: "center",
       },
       {
         text: "Type",
         value: "type",
         sortable: false,
         align: "center",
       },
       // { text: "Action", value: "", sortable: false, align: "center" }
     ],
     subjectList: [],
     classList: [],
     teacherList: [],
     editedIndex: -1,
     addSubject: {},
     getSubject: {},
     editedItem: {
       // subjectName: "",
       // subjectAuthor: ""
     },
   }),
+  watch: {
+    addSubjectDialog: function (val) {
+      if (!val) {
+        this.addSubject = [];
+      }
+    },
+  },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     editItem(item) {
       this.editedIndex = this.subjectList.subjects;
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
       this.editSubjectDialog = true;
     },
     profile(item) {
       this.editedIndex = this.subjectList.subjects;
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
       this.viewSubjectDialog = true;
     },
     deleteItem(item) {
       let deleteSubject = {
         classId: this.addSubject.classId,
         subjectId: item._id,
       };
       http()
         .delete(
           "/deleteSubject",
           confirm("Are you sure you want to delete this?") && {
             params: deleteSubject,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.color = "green";
           this.text = "Successfully delete Existing Subject";
           this.getClassSubject(this.addSubject.classId);
         })
         .catch((error) => {
           //   this.snackbar = true;
           //   this.text = error.response.data.message;
           //   this.color = "error";
           console.log("error", error);
         });
     },
     close() {
       this.editSubjectDialog = false;
     },
     close1() {
       this.viewSubjectDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.addLoading = true;
         http()
           .post("/addSubject", this.addSubject)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Subject added successfully";
             this.color = "green";
             this.addLoading = false;
-            this.$refs.form.reset()
+            this.$refs.form.reset();
             this.addSubjectDialog = false;
             this.getClassSubject(_id);
           })
           .catch((error) => {
             this.addLoading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       if (this.$refs.formEditSubject.validate()) {
         let editSubject = {
           classId: this.editedItem.classId,
           subjectId: this.editedItem._id,
           teacherId: this.editedItem.teacherId,
           type: this.editedItem.type,
           passMarks: this.editedItem.passMarks,
           finalMarks: this.editedItem.finalMarks,
           subjectAuthor: this.editedItem.subjectAuthor,
           subjectCode: this.editedItem.subjectCode,
           subjectName: this.editedItem.subjectName,
         };
         this.editLoading = true;
         http()
           .put("/updateSubject", editSubject)
           .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Subject";
             this.color = "green";
             this.editLoading = false;
             this.editSubjectDialog = false;
             this.getClassSubject(this.editedItem.classId);
           })
           .catch((error) => {
             this.editLoading = false;
             // console.log(error);
           });
       }
     },
     getClassSubject(_id) {
       this.showLoader = true;
       console.log("class", _id);
       // 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;
         });
     },
     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);
           }
         });
     },
     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);
           }
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     // this.getNoticeDataList();
     this.getClass();
     this.getTeacherList();
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Academic/syllabus.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Syllabus ****** -->
     <v-dialog v-model="editSyllabusDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Syllabus</label>
             <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Title :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field v-model="editedItem.title"></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Description:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field v-model="editedItem.description"></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="classList"
                   v-model="editedItem.classId"
                   label="Select Class"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   @change="getSections(addSyllabus.classId)"
                   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"
                   label="Select Section"
                   item-text="name"
                   item-value="_id"
                   v-model="editedItem.sectionId"
                   name="Select Section"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>-->
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">File:</label>
               </v-flex>
               <v-flex xs8 sm6 class="ml-3">
                 <v-text-field
                   label="Select file"
                   @click="pickFile"
                   v-model="imageName"
                   append-icon="attach_file"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="save"
                   :loading="editLoading"
                   class="add-button"
                 >Update Syllabus</v-btn>
               </v-card-actions>
             </v-flex>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px">
       <v-toolbar flat class="card-style pa-3" dark>
         <v-spacer></v-spacer>
         <v-toolbar-title>
           <h3>Subject</h3>
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-icon @click="close1">close</v-icon>
       </v-toolbar>
       <v-card>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs7 sm6>
                     <h5 class="right my-1">
                       <b>Subject Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>-->
     <!-- ****** EXISTING SYLLABUS 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="addSyllabusDialog = 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="addSyllabusDialog = true">
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus
         </v-btn>
       </v-flex>
       <v-spacer></v-spacer>
       <v-flex lg2 md2 xs12 v-show="show">
         <v-select
           :items="classList"
           label="Select Class"
           v-model="showSyllabus.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getSyallabusList"
           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
+            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>
     <v-data-table
       :headers="headers"
       :items="syllabusList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td-row td">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.title }}</td>
           <td class="text-xs-center td td-row">{{ props.item.description }}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
           <td
             class="text-xs-center td td-row"
             v-if="props.item.teacherId"
           >{{ props.item.teacherId.name }}</td>
-          <td
+          <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td>
-            class="text-xs-center td td-row"
-            v-else
-          >{{ props.item.schoolId.name }}</td>
           <td class="text-xs-center td td-row">
             <v-btn
               class="add-button"
               @click="generatePDF2Canvas(props.item)"
               :loading="loadingPdf"
               dark
             >{{ props.item.fileType }}</v-btn>
           </td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <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>
                 <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>
     <!-- ****** ADD SYLLABUS ****** -->
     <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="addSyllabusDialog" max-width="400px">
+    <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Syllabus</label>
-            <v-icon size="24" class="right" @click="addSyllabusDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddStudentModel">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">Title :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSyllabus.title"
                       name="name"
                       type="text"
                       placeholder="Add Title"
                       :rules="titleRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Description :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSyllabus.description"
                       name="name"
                       type="text"
                       placeholder="Add Description"
                       :rules="descriptionRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Class:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       :items="classList"
                       v-model="addSyllabus.classId"
                       label="Select Class"
                       item-text="classNum"
                       item-value="_id"
                       name="Select Class"
                       @change="getSections(addSyllabus.classId)"
                       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"
                       label="Select Section"
                       item-text="name"
                       item-value="_id"
                       v-model="addSyllabus.sectionId"
                       name="Select Section"
                       class="px-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>-->
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">File:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field
                       label="Select file"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Add Syllabus</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";
 import moment from "moment";
 import jsPDF from "jspdf";
 import { saveAs } from "file-saver";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     editSyllabusDialog: false,
     valid: true,
     validEditSyllabus: true,
     addSyllabusDialog: false,
     loadingPdf: false,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     token: "",
     upload: "",
-    titleRules: [v => !!v || " Title is required"],
+    titleRules: [(v) => !!v || " Title is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
-    classRules: [v => !!v || " Class Name is required"],
+    classRules: [(v) => !!v || " Class Name is required"],
-    fileRules: [v => !!v || " File is required"],
+    fileRules: [(v) => !!v || " File is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Title",
         value: "title",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Description",
         value: "description",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Date",
         value: "created",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Uploader",
         value: "upload",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "File",
         value: "documentUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     syllabusList: [],
     classList: [],
     addSection: [],
     editedIndex: -1,
     addSyllabus: {},
     showSyllabus: {},
     editedItem: {
-      subjectName: ""
+      subjectName: "",
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
-    imageFile: ""
+    imageFile: "",
   }),
+  watch: {
+    addSyllabusDialog: function (val) {
+      if (!val) {
+        this.addSyllabus = [];
+        this.imageName = "";
+      }
+    },
+  },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     editItem(item) {
       this.editedIndex = this.syllabusList;
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
       this.editSyllabusDialog = true;
     },
     download(item) {
       this.editedIndex = this.syllabusList;
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteSyallabus = {
-        syallabusId: item._id
+        syallabusId: item._id,
       };
       http()
         .delete(
           "/deleteSyallabus",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteSyallabus
+            params: deleteSyallabus,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.getSyallabusList();
           this.snackbar = true;
           this.color = "green";
           this.text = "Successfully delete Existing Syllabus";
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editSyllabusDialog = false;
     },
+    closeAddStudentModel() {
+      this.addSyllabusDialog = false;
+      this.syllabusList = [];
+      this.addSyllabus = [];
+      this.imageName = "";
+    },
     submit() {
       // var addSyllabus = {
       //   classId: this.addSyllabus.classId,
       //   title: this.addSyllabus.title,
       //   description: this.addSyllabus.description,
       //   upload: this.addSyllabus.upload,
       //   fileType: this.addSyllabus.fileType
       // };
       var signatures = {
         JVBERi0: "other",
         iVBORw0KGgo: "image",
         UEsDBBQ: "other",
         "/": "image",
         AAABAA: "image",
         IywiV2hhdC: "other",
-        bmFtZSxl: "other"
+        bmFtZSxl: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addSyllabus.upload = imageUrl;
           this.addSyllabus.fileType = detectMimeType(imageUrl);
           this.addSyllabus.fileName = this.imageName;
         }
         http()
           .post("/createSyallabus", this.addSyllabus)
-          .then(response => {
+          .then((response) => {
             this.getSyallabusList();
             this.snackbar = true;
             this.text = "Syllabus added successfully";
             this.clear();
             this.color = "green";
             this.addSyllabusDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
       }
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.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 = "";
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       if (this.$refs.formEditSyllabus.validate()) {
         let syllabusData = {
           syallabusId: this.editedItem._id,
           classId: this.editedItem.classId._id,
           // sectionId: this.editedItem.sectionId,
           title: this.editedItem.title,
           description: this.editedItem.description,
           upload: this.editedItem.upload,
           fileType: this.editedItem.fileType,
-          fileName: this.imageName
+          fileName: this.imageName,
         };
         this.editLoading = true;
         var signatures = {
           JVBERi0: "other",
           iVBORw0KGgo: "image",
           UEsDBBQ: "other",
           "/": "image",
           AAABAA: "image",
-          IywiV2hhdC: "other"
+          IywiV2hhdC: "other",
         };
         function detectMimeType(b64) {
           for (var s in signatures) {
             if (b64.indexOf(s) === 0) {
               return signatures[s];
             }
           }
         }
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           syllabusData.upload = imageUrl;
           syllabusData.fileType = detectMimeType(imageUrl);
         }
         http()
           .put("/updateSyallabus", syllabusData)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Syllabus";
             this.color = "green";
             this.editLoading = false;
             this.editSyllabusDialog = false;
             http()
               .get(
                 "/getSyallabusList",
                 { params: { classId: this.addSyllabus.classId } },
                 {
-                  headers: { Authorization: "Bearer " + this.token }
+                  headers: { Authorization: "Bearer " + this.token },
                 }
               )
-              .then(response => {
+              .then((response) => {
                 this.syllabusList = response.data.data;
                 this.getSyallabusList();
                 this.snackbar = true;
                 this.color = "green";
                 this.close();
               })
-              .catch(err => {
+              .catch((err) => {
                 console.log("err====>", err);
                 this.text = error.response.data.message;
                 this.color = "error";
               });
           })
-          .catch(error => {
+          .catch((error) => {
             this.editLoading = false;
           });
       }
     },
     getSyallabusList() {
       this.showLoader = true;
       http()
         .get(
           "/getSyallabusList",
           { params: { classId: this.showSyllabus.classId } },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.syllabusList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
         });
     },
     getClass() {
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.classList = response.data.data;
         })
-        .catch(error => {
+        .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;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + token }
+            headers: { Authorization: "Bearer " + token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     async generatePDF2Canvas(item) {
       // console.log("documentUrl", documentUrl);
       // this.loadingPdf = true;
       // const el = this.$refs.printMe;
       // add option type to get the image version
       // if not provided the promise will return
       // the canvas.
       // const options = {
       //   type: "dataURL"
       // };
       // this.output = await this.$html2canvas(el, options);
       // console.log("el,option", this.output);
       // if (this.output) {
       //   this.loadingPdf = false;
       // }
       // let doc = new jsPDF();
       // doc.addImage(this.output,"JPEG", 5, 10, 200, 280);
       // doc.save("File.pdf");
       // function download(documentUrl, filename) {
       //   fetch(documentUrl).then(function(t) {
       //     return t.blob().then(b => {
       //       var a = document.createElement("a");
       //       a.href = URL.createObjectURL(b);
       //       a.setAttribute("download", "filename");
       //       a.click();
       //     });
       //   });
       // }
       var dataType = "";
       var type = "";
       if (item.fileType == "image") {
         dataType = "file.jpg";
       } else if (item.fileType == "other") {
         dataType = "file.pdf";
         type = "application/pdf";
       }
       var FileSaver = require("file-saver");
       FileSaver.saveAs(item.documentUrl, "image.jpg");
       // var blob = new Blob([item.documentUrl], {
       //   type: type
       // });
       // FileSaver.saveAs(blob, dataType);
       // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
       // console.log("document", item.documentUrl);
       // const link = document.createElement("a");
       // link.href = url;
       // link.setAttribute("download", dataType); //or any other extension
       // document.body.appendChild(link);
       // link.click();
       //  const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
       //   const link = document.createElement('a')
       //   link.href = URL.createObjectURL(blob)
       //   link.download = dataType
       //   link.click()
       //   URL.revokeObjectURL(link.href)
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.role = this.$store.state.role;
     this.getClass();

src/pages/Account/expense.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT EXPENSE  ****** -->
     <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Expense Profile</label>
             <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text style="height: 600px;">
           <v-layout>
             <v-flex
               xs12
               class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
             >
               <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl">
                 <img src="/static/icon/user.png" />
               </v-avatar>
-              <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl"  style="border-radius:50%; width:150px"/>
+              <img
+                :src="editedItem.fileUrl"
+                v-else-if="editedItem.fileUrl && !imageUrl"
+                style="border-radius:50%; width:150px"
+              />
               <img
                 v-if="imageUrl"
                 :src="imageUrl"
                 height="150"
                 style="border-radius:50%; width:150px"
               />
               <input
                 type="file"
                 style="display:none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs7 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>
               <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="menu"
                     :close-on-content-click="false"
                     v-model="menu3"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.date"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.date"
                       @input="$refs.menu.save(editedItem.date)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout wrap>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Amount:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field v-model="editedItem.amount" required></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout wrap>
                 <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 xs7 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>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-textarea
                     name="input-7-1"
                     v-model="editedItem.note"
                     placeholder="fill your Note"
                     type="text"
                     :rules="noteRules"
                     multi-line
                     required
                   ></v-textarea>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW EXPENSE DETAILS ******  -->
     <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Expense</label>
             <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <v-avatar size="160px">
                     <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
                     <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
                   </v-avatar>
                 </v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Amount:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.amount }}</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>Note:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.note }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXPENSE 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="addExpenseDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addExpenseDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense
       </v-btn>
       <v-spacer></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-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="expenseList"
       :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>
               <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
           <td class="text-xs-center td td-row">{{ props.item.user }}</td>
           <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
           <td class="text-xs-center td td-row">{{ props.item.note }}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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>
     <!-- ****** Add Expense Data ****** -->
-    <v-dialog v-model="addExpenseDialog" max-width="600px">
+    <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Expense</label>
-            <v-icon size="24" class="right" @click="addExpenseDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-form ref="form" v-model="valid" lazy-validation>
             <v-container fluid>
               <v-layout>
                 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                   <v-avatar size="80px">
                     <img src="/static/icon/user.png" v-if="!imageUrl" />
                   </v-avatar>
                   <img
                     :src="imageUrl"
                     height="150"
                     v-if="imageUrl"
                     style="border-radius:50%; width:150px"
                   />
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Name:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="addExpense.name"
                         placeholder="fill your full Name"
                         name="name"
                         type="text"
                         :rules="nameRules"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Amount:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="addExpense.amount"
                         placeholder="fill your Amount"
                         name="name"
                         type="text"
                         :rules="amountRules"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Date</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-menu
                         ref="menu1"
                         :close-on-content-click="false"
                         v-model="menu1"
                         :nudge-right="40"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           :rules="joinDateRules"
                           v-model="addExpense.date"
                           placeholder="Select date"
                         ></v-text-field>
                         <v-date-picker
                           ref="picker"
                           v-model="addExpense.date"
                           @input="$refs.menu1.save(addExpense.date)"
                         ></v-date-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">File:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         label="Select file"
                         @click="pickFile"
                         v-model="imageName"
                         append-icon="attach_file"
                       ></v-text-field>
                       <input
                         type="file"
                         style="display:none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Note:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-textarea
                         name="input-7-1"
                         v-model="addExpense.note"
                         placeholder="fill your Note"
                         type="text"
                         :rules="noteRules"
                         multi-line
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs11>
                   <v-layout>
                     <v-spacer></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-layout>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-flex>
       </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: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     editExpenseDialog: false,
     viewExpenseDialog: false,
     valid: true,
     show: true,
     addExpenseDialog: false,
     showSearch: false,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     token: "",
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    nameRules: [v => !!v || " Full Name is required"],
+    nameRules: [(v) => !!v || " Full Name is required"],
-    amountRules: [v => !!v || "Amount is required"],
+    amountRules: [(v) => !!v || "Amount is required"],
-    noteRules: [v => !!v || "Note Name is required"],
+    noteRules: [(v) => !!v || "Note Name is required"],
-    joinDateRules: [v => !!v || "Date is required"],
+    joinDateRules: [(v) => !!v || "Date is required"],
     errorMessages: "",
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Date", value: "date", sortable: false, align: "center" },
       { text: "User", value: "user", sortable: false, align: "center" },
       { text: "Amount", value: "amount", sortable: false, align: "center" },
       { text: "Note", value: "note", sortable: false, align: "center" },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     expenseList: [],
     editedIndex: -1,
     upload: "",
     editedItem: {
       role: "TEACHER",
       name: "",
       email: "",
       date: null,
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobileNo: "",
       state: "",
-      joinDate: null
+      joinDate: null,
     },
-    addExpense: {}
+    addExpense: {},
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
-    }
+    },
+    addExpenseDialog: function (val) {
+      if (!val) {
+        this.addExpense = [];
+        this.menu1 = false;
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.upload = e.target.files[0];
       console.log("imageData-upload========>", this.upload);
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
           // console.log("upload=======>", this.imageData.imageUrl);
           console.log("imageFile", this.imageUrl);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     getExpenseList() {
       http()
         .get("/getExpensesList", {
           params: { schoolId: this.$store.state.schoolId },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.expenseList = response.data.data;
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.expenseList)
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     editItem(item) {
       this.editedIndex = this.expenseList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editExpenseDialog = true;
     },
     profile(item) {
       this.editedIndex = this.expenseList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewExpenseDialog = true;
     },
     deleteItem(item) {
       let deleteExpense = {
-        expenseId: item._id
+        expenseId: item._id,
       };
       //  console.log("deleteUers",deleteTeachers)
       http()
         .delete(
           "/deleteExpense",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteExpense
+            params: deleteExpense,
           }
         )
-        .then(response => {
+        .then((response) => {
           // console.log("deleteUers",deleteTeachers)
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getExpenseList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editExpenseDialog = false;
     },
+    closeAddExpenseModel() {
+      this.addExpenseDialog = false;
+      this.addExpense = [];
+      this.menu1 = false;
+      this.imageName = "";
+      this.imageFile = "";
+      this.imageUrl = "";
+    },
     submit() {
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addExpense.upload = imageUrl;
         }
         this.loading = true;
         // this.addExpense = this.$store.state.schoolId;
         http()
           .post("/createExpense", this.addExpense)
-          .then(response => {
+          .then((response) => {
             this.getExpenseList();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.imageUrl = "";
             this.loading = false;
             this.addExpenseDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.loading = true;
       this.editedItem.expenseId = this.editedItem._id;
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         this.editedItem.upload = imageUrl;
       }
       http()
         .put("/updateExpense", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.loading = false;
           this.getExpenseList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getExpenseList();
-  }
+  },
 };
 </script>

src/pages/Account/feeTypes.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  SECTION  ****** -->
     <v-dialog v-model="editFeeTypeDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Fee Type</label>
             <v-icon size="24" class="right" @click="editFeeTypeDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout wrap justify-center>
             <v-flex xs12 sm11>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Fee Type:</label>
                 </v-flex>
                 <v-flex xs8>
                   <v-text-field
                     class="ml-3"
                     v-model="editedItem.feeType"
                     placeholder="fill your Fee Type"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs8>
                   <v-textarea
                     name="input-7-1"
                     class="ml-3"
                     v-model="editedItem.note"
                     placeholder="fill your Note"
                     multi-line
                     required
                   ></v-textarea>
                 </v-flex>
               </v-layout>
-              <v-card-actions class="hidden-xs-only hidden-sm-only ">
+              <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
-               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
+              <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW FEE TYPE DATA ******  -->
     <v-dialog v-model="viewFeeTypeDialog" max-width="400px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Fee Type</label>
             <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container grid-list-md>
           <v-layout wrap>
             <v-flex>
               <v-layout>
                 <v-flex xs5 sm6>
                   <h5 class="right my-1">
                     <b>Fee Type:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs8>
                   <h5 class="my-1">{{ editedItem.feeType }}</h5>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs5 sm6>
                   <h5 class="right my-1">
                     <b>Note:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs8>
                   <h5 class="my-1">{{ editedItem.note }}</h5>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-FEETYPE 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="addFeeTypeDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addFeeTypeDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type
       </v-btn>
       <v-spacer></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-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="feeTypeList"
       :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">{{ props.item.feeType }}</td>
           <td class="text-xs-center td td-row">{{ props.item.note }}</td>
           <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</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>
               <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>
               <img
                 slot="activator"
                 style="cursor:pointer; width:20px; height:20px; "
                 @click="deleteItem(props.item)"
                 class="mr-3"
                 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 Fee Type ****** -->
-    <v-dialog v-model="addFeeTypeDialog" max-width="500px">
+    <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Fee Type</label>
-            <v-icon size="24" class="right" @click="addFeeTypeDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddFeeTypeModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12 class="mt-4">
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Fee Type:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="feeTypeData.feeType"
                       placeholder="fill your Fee Type"
                       type="text"
                       :rules="feetTypeRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Note:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-textarea
                       name="input-7-1"
                       v-model="feeTypeData.note"
                       placeholder="fill your Note"
                       type="text"
                       multi-line
                       required
                     ></v-textarea>
                   </v-flex>
                 </v-layout>
                 <!-- <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Monthly:</label>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-checkbox
                             v-model="feeTypeData.monthly"
                             :rules="monthlyRules"
                             multi-line
                             required
                           ></v-checkbox>
                         </v-flex>
                 </v-layout>-->
                 <v-layout>
                   <v-flex xs12>
                     <v-card-actions>
                       <v-spacer></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-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-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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     editFeeTypeDialog: false,
     viewFeeTypeDialog: false,
     valid: true,
     show: true,
     showSearch: false,
     addFeeTypeDialog: false,
     validEdit: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    feetTypeRules: [v => !!v || " Fee Type Name is required"],
+    feetTypeRules: [(v) => !!v || " Fee Type Name is required"],
-    monthlyRules: [v => !!v || " Select Monthly"],
+    monthlyRules: [(v) => !!v || " Select Monthly"],
-    noteRules: [v => !!v || " Note is required"],
+    noteRules: [(v) => !!v || " Note is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "fee Type",
         value: "feeType",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Note", value: "note", sortable: false, align: "center" },
       // { text: "Session", value: "session", sortable: false, align: "center" },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     feeTypeList: [],
     select: "",
     token: "",
     editedItem: {},
-    feeTypeData: {}
+    feeTypeData: {},
   }),
+  watch: {
+    addFeeTypeDialog: function (val) {
+      if (!val) {
+        this.feeTypeData = [];
+      }
+    },
+  },
   methods: {
     getFeeTypeList() {
       this.showLoader = true;
       http()
         .get("/getFeesList", {
           params: { schoolId: this.$store.state.schoolId },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.feeTypeList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.feeTypeList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editFeeTypeDialog = true;
     },
     profile(item) {
       this.editedIndex = this.feeTypeList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewFeeTypeDialog = true;
     },
     deleteItem(item) {
       let deleteFeeType = {
-        feeId: item._id
+        feeId: item._id,
       };
       http()
         .delete(
           "/deleteFee",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteFeeType
+            params: deleteFeeType,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getFeeTypeList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.dialog = false;
     },
     close1() {
       this.dialog1 = false;
     },
     close2() {
       this.dialog2 = false;
     },
+    closeAddFeeTypeModel() {
+      this.addFeeTypeDialog = false;
+      this.feeTypeData = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         this.schoolId = this.$store.state.schoolId;
         http()
           .post("/createFee", this.feeTypeData)
-          .then(response => {
+          .then((response) => {
             this.getFeeTypeList();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.addFeeTypeDialog = false;
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.editedItem.feeId = this.editedItem._id;
       http()
         .put("/updateFee", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getFeeTypeList();
           this.editFeeTypeDialog = false;
           this.close();
         })
-        .catch(error => {
+        .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() {
     this.token = this.$store.state.token;
     this.getFeeTypeList();
-  }
+  },
 };
 </script>

src/pages/Account/income.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT Income DETAILS ****** -->
     <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Income</label>
             <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout>
             <v-flex
               xs12
               class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
             >
               <v-avatar size="160px">
                 <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" />
                 <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" />
                 <img
                   v-if="imageUrl"
                   :src="imageUrl"
                   height="150"
                   style="border-radius:50%; width:200px"
                 />
               </v-avatar>
               <input
                 type="file"
                 style="display:none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 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>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Date:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu3"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.date"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.date"
                       @input="$refs.menu.save(editedItem.date)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout wrap>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Amount:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field v-model="editedItem.amount" required></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <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 sm6 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>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-textarea
                     name="input-7-1"
                     v-model="editedItem.note"
                     placeholder="fill your Note"
                     type="text"
                     :rules="noteRules"
                     multi-line
                     required
                   ></v-textarea>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
-            <v-flex xs12 >
+            <v-flex xs12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW INCOME DETAILS ******  -->
     <v-dialog v-model="profileIncomeDialog" max-width="400px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Income</label>
             <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <v-avatar size="80px" v-if="!editedItem.fileUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" />
                 </v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Amount:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.amount }}</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>Note:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.note }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-EXPENSE TABLE DATA****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addIncomeDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addIncomeDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income
       </v-btn>
       <v-spacer></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-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="incomeList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar class="40">
               <img :src="props.item.fileUrl" v-if="props.item.fileUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
           <td class="text-xs-center td td-row">{{ props.item.user }}</td>
           <td class="text-xs-center td td-row">{{ props.item.amount }}</td>
           <td class="text-xs-center td td-row">{{ props.item.note }}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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>
     <!-- ****** Add Income Data****** -->
-    <v-dialog v-model="addIncomeDialog" max-width="600px">
+    <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Income</label>
-            <v-icon size="24" class="right" @click="addIncomeDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                 <v-avatar size="80px">
                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                 </v-avatar>
                 <img
                   :src="imageUrl"
                   height="150"
                   v-if="imageUrl"
                   style="border-radius:50%; width:200px"
                 />
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Name:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field
                       v-model="addIncome.name"
                       placeholder="fill your full Name"
                       name="name"
                       type="text"
                       :rules="nameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Amount:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field
                       v-model="addIncome.amount"
                       placeholder="fill your Amount"
                       name="name"
                       type="text"
                       :rules="amountRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Date</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-menu
                       ref="menu1"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="joinDateRules"
                         v-model="addIncome.date"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addIncome.date"
                         @input="$refs.menu1.save(addIncome.date)"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">File:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field
                       label="Select file"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Note:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-textarea
                       name="input-7-1"
                       v-model="addIncome.note"
                       placeholder="fill your Note"
                       type="text"
                       :rules="noteRules"
                       multi-line
                       required
                     ></v-textarea>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <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-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     addIncomeDialog: false,
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     editIncomeDialog: false,
     profileIncomeDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    nameRules: [v => !!v || " Full Name is required"],
+    nameRules: [(v) => !!v || " Full Name is required"],
-    amountRules: [v => !!v || "Amount is required"],
+    amountRules: [(v) => !!v || "Amount is required"],
-    noteRules: [v => !!v || "Note Name is required"],
+    noteRules: [(v) => !!v || "Note Name is required"],
-    joinDateRules: [v => !!v || "Date is required"],
+    joinDateRules: [(v) => !!v || "Date is required"],
     errorMessages: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Date", value: "date", sortable: false, align: "center" },
       { text: "User", value: "user", sortable: false, align: "center" },
       { text: "Amount", value: "amount", sortable: false, align: "center" },
       { text: "Note", value: "note", sortable: false, align: "center" },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     incomeList: [],
     editedIndex: -1,
     upload: "",
     editedItem: {},
-    addIncome: {}
+    addIncome: {},
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
-    }
+    },
+    addIncomeDialog: function (val) {
+      if (!val) {
+        this.addIncome = [];
+        this.menu1 = false;
+        this.imageName = "";
+        this.imageUrl = "";
+        this.imageFile = "";
+      }
+    },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.upload = e.target.files[0];
       console.log("imageData-upload========>", this.upload);
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
           // console.log("upload=======>", this.imageData.imageUrl);
           console.log("imageFile", this.imageUrl);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getIncomeList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getIncomesList", {
           params: { schoolId: this.$store.state.schoolId },
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.incomeList = response.data.data;
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.incomeList)
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.incomeList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editIncomeDialog = true;
     },
     profile(item) {
       this.editedIndex = this.incomeList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileIncomeDialog = true;
     },
     deleteItem(item) {
       let deleteIncome = {
-        incomeId: item._id
+        incomeId: item._id,
       };
       http()
         .delete(
           "/deleteIncome",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteIncome
+            params: deleteIncome,
           }
         )
-        .then(response => {
+        .then((response) => {
           // console.log("deleteUers",deleteTeachers)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Income";
           }
           this.getIncomeList();
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error);
         });
     },
     close() {
       this.editIncomeDialog = false;
     },
     close1() {
       this.dialog1 = false;
     },
+    closeAddIncomeModel() {
+      this.addIncomeDialog = false;
+      this.addIncome = [];
+      this.menu1 = false;
+      this.imageName = "";
+      this.imageUrl = "";
+      this.imageFile = "";
+    },
     submit() {
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addIncome.upload = imageUrl;
         }
         this.loading = true;
         // this.addIncome = this.$store.state.schoolId;
         http()
           .post("/createIncome", this.addIncome)
-          .then(response => {
+          .then((response) => {
             this.getIncomeList();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addIncomeDialog = false;
             this.clear();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             // console.log(error);
             this.loading = false;
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.loading = true;
       this.editedItem.incomeId = this.editedItem._id;
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         this.editedItem.upload = imageUrl;
       }
       http()
         .put("/updateIncome", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.loading = false;
           this.getIncomeList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.loading = false;
           this.snackbar = true;
           this.color = "error";
           this.loading = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getIncomeList();
-  }
+  },
 };
 </script>

src/pages/Account/invoice.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit INVOICE ****** -->
     <v-dialog v-model="editInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Edit Invoice</label>
             <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
       </v-card>
     </v-dialog>
     <!-- ****PAYMENT INVOICE DIALOG -->
     <v-dialog v-model="paymentInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Payment Template</label>
             <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
     <v-dialog v-model="dialog1" max-width="800px">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-style pa-2">
             <label class="title text-xs-center">View Payments</label>
             <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <table class="feeTypeTable tableRsponsive">
           <tr style="color: black">
             <th>#</th>
             <th>Date</th>
             <th>Paid By</th>
             <th>Payment Amount</th>
             <th>Weaver</th>
             <th>Action</th>
           </tr>
           <tr v-if="editedItem.paymentStatus != 'NOT_PAID'">
             <td style="width:40px ; color:black" class="tdFeeType">1</td>
             <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
             <td class="text-xs-center td td-row">
               <router-link
                 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
               >
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:25px; "
                     class="mr-3"
                     src="/static/icon/view.png"
                   />
                   <span>View</span>
                 </v-tooltip>
               </router-link>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-3"
                   @click="deletePayment(editedItem)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </td>
           </tr>
           <tr v-if="editedItem.paymentStatus == 'NOT_PAID'">
             <td style="width:40px ; color:black" class="tdFeeType'">-</td>
             <td style="width:120px; color:black" class="tdFeeType">-</td>
             <td style="width:120px; color:black" class="tdFeeType">-</td>
             <td style="width:120px; color:black" class="tdFeeType">-</td>
             <td style="width:120px; color:black" class="tdFeeType">-</td>
             <td class="text-xs-center td td-row"></td>
           </tr>
         </table>
       </v-card>
     </v-dialog>
     <!-- ****** Invoice 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="addInvoiceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addInvoiceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
       </v-btn>
       <v-spacer></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-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="invoiceList"
       :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">{{ props.item.studentId.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
             <span
               class="red lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
             <span
               class="green lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
             <span
               class="yellow darken-3 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row">{{ 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:25px; "
                   class="mr-3"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
             </router-link>
             <span v-if="props.item.paymentStatus === 'NOT_PAID'">
               <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
                 <v-tooltip top>
                   <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>
               </router-link>-->
               <v-tooltip top>
                 <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>
                 <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:18px; "
                   class="mr-3"
                   @click="paymentItem(props.item)"
                   src="/static/schoolIcons/Account.png"
                 />
                 <span>Payment</span>
               </v-tooltip>
             </span>
             <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="paymentItem(props.item)"
                   src="/static/schoolIcons/Account.png"
                 />
                 <span>Payment</span>
               </v-tooltip>
             </span>
             <v-tooltip top>
               <img
                 slot="activator"
                 style="cursor:pointer; width:18px; height:17px;"
                 @click="profile(props.item)"
                 src="/static/icon/eye1.png"
               />
               <span>View Payment</span>
             </v-tooltip>
           </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 INVOICE ****** -->
     <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="addInvoiceDialog">
+    <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Add Invoice</label>
-            <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md5>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Invoice</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                     <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 xs6 class="ml-3">
                         <v-select
                           :items="addclass"
                           label="Select Class"
                           v-model="invoiceData.classNum"
                           item-text="classNum"
                           item-value="_id"
                           @change="getAllStudents()"
                           :rules="classRules"
                           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">Select Student:</label>
                         <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="studentList"
                           label="Select Student"
                           v-model="invoiceData.studentId"
                           item-text="name"
                           item-value="_id"
                           :rules="inchargeRules"
                           @change="selectAllStudent()"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-menu
                           ref="menu1"
                           :close-on-content-click="false"
                           v-model="menu1"
                           :nudge-right="40"
                           lazy
                           :return-value.sync="invoiceData.date"
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             :rules="dateRules"
                             v-model="invoiceData.date"
                             placeholder="Select date"
                           ></v-text-field>
                           <v-date-picker
                             v-model="invoiceData.date"
                             @input="$refs.menu1.save(invoiceData.date)"
                           ></v-date-picker>
                         </v-menu>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
                         <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="paymentStatus"
                           v-model="invoiceData.paymentStatus"
                           item-text="name"
                           item-value="value"
                           label="Select Payment Status"
                           @change="getPayMethodList"
                           :rules="paymentStatusRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout v-show="showPayMethods">
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Payment Method:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="paymentMethods"
                           v-model="invoiceData.paymentMethod"
                           :rules="paymentMethodRules"
                           label="Select Payment Method"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs12 sm11>
                         <v-card-actions>
                           <v-spacer></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-form>
                 </v-card>
               </v-flex>
               <v-flex xs12 sm12 md7>
                 <v-card>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Fee Type List</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
                       <label class="right title">Fee Type:</label>
                     </v-flex>
                     <v-flex xs8 sm4>
                       <v-select
                         :items="feeTypes"
                         v-model="feeType.feeTypeName"
                         item-text="feeType"
                         item-value="feeType"
                         label="Select Fee Type"
                         required
                       ></v-select>
                     </v-flex>
                     <v-flex xs4 sm6>
                       <v-btn
                         color="open-dialog-button"
                         round
                         dark
                         class="right mt-3"
                         @click="selectFeeType"
                       >ADD</v-btn>
                     </v-flex>
                   </v-layout>
                   <table class="feeTypeTable tableRsponsive">
                     <tr class="info white--text">
                       <th>#</th>
                       <th>Fee Type</th>
                       <th>Amount</th>
                       <th>Discount</th>
                       <th>Subtotal</th>
                       <th>Paid Amount</th>
                       <th>Action</th>
                     </tr>
                     <tr
                       v-show="showFeeType"
                       v-for="(feeType, index) in feeTypeData"
                       :key="index"
                       v-on:keyup="getAmmountDetails(feeType)"
                     >
                       <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
                       <td
                         style="width:120px"
                         class="tdFeeType"
                         :rules="feeTypeNameRules"
                       >{{ feeType.feeTypeName }}</td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Amount"
                           v-model="feeType.amount"
                           type="number"
                           :rules="amountRules"
                           required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Discount"
                           v-model="feeType.discount"
                           type="number"
                           :rules="discountRules"
                           required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td>
                       <td
                         class="tdFeeType"
                         v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
                       >
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon>
                       </td>
                     </tr>
                     <tfoot>
                       <tr>
                         <td colspan="2" class="tdFeeType">Total:</td>
                         <td class="tdFeeType">{{ feeType.amount }}</td>
                         <td class="tdFeeType">{{ feeType.discount }}</td>
                         <td class="tdFeeType">{{ feeType.subTotal }}</td>
                         <td class="tdFeeType">{{ feeType.paidAmount }}</td>
                         <!-- <td class="tdFeeType">
                           <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
                         </td>-->
                       </tr>
                     </tfoot>
                   </table>
                 </v-card>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </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 editInvoice from "./editInvoice";
 import paymentTemplate from "./paymentTemplate.vue";
 import moment from "moment";
 export default {
   components: {
     editInvoice: editInvoice,
-    paymentTemplate: paymentTemplate
+    paymentTemplate: paymentTemplate,
   },
   data: () => ({
     snackbar: false,
     showPayMethods: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     dialog: false,
     dialog1: false,
     valid: true,
     validEdit: true,
     isActive: true,
     newActive: false,
     showFeeType: true,
     addInvoiceDialog: false,
     editInvoiceDialog: false,
     paymentInvoiceDialog: false,
     disabled: true,
     details: [],
     feeTypes: [],
     invoiceData: [],
     editData: [],
     invoiceList: [],
     editPayment: {
       studentId: {
         name: "",
-        rollNo: ""
+        rollNo: "",
       },
       classId: {
-        classNum: ""
+        classNum: "",
-      }
+      },
     },
     menu1: false,
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
       amount: "0.00",
       discount: "0.00",
       subTotal: "0.00",
       paidAmount: "0.00",
-      feeTypeName: ""
+      feeTypeName: "",
     },
     feeTypeData: [],
     editFeeTypeData: [],
     paymentFeeTypeData: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    classRules: [v => !!v || " Class Name is required"],
+    classRules: [(v) => !!v || " Class Name is required"],
-    inchargeRules: [v => !!v || "Student Name is required"],
+    inchargeRules: [(v) => !!v || "Student Name is required"],
-    dateRules: [v => !!v || " Date is required"],
+    dateRules: [(v) => !!v || " Date is required"],
-    paymentStatusRules: [v => !!v || "Payment Status is required"],
+    paymentStatusRules: [(v) => !!v || "Payment Status is required"],
-    paymentMethodsRules: [v => !!v || "payment Method is required"],
+    paymentMethodsRules: [(v) => !!v || "payment Method is required"],
-    feeTypeRules: [v => !!v || "Fee Type  is required"],
+    feeTypeRules: [(v) => !!v || "Fee Type  is required"],
-    feeTypeNameRules: [v => !!v || "Fee Type Name is required"],
+    feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"],
-    amountRules: [v => !!v || "Amount is required"],
+    amountRules: [(v) => !!v || "Amount is required"],
-    discountRules: [v => !!v || "Discount is required"],
+    discountRules: [(v) => !!v || "Discount is required"],
-    subtotalRules: [v => !!v || "Subtotal is required"],
+    subtotalRules: [(v) => !!v || "Subtotal is required"],
-    paymentRules: [v => !!v || "Payment is required"],
+    paymentRules: [(v) => !!v || "Payment is required"],
-    paidAmountRules: [v => !!v || "Paid Amount is required"],
+    paidAmountRules: [(v) => !!v || "Paid Amount is required"],
     paymentMethodRules: [],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Student",
         value: "name",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Class", value: "class", sortable: false, align: "center" },
       { text: "Total", value: "subtotal", sortable: false, align: "center" },
       {
         text: "Discount",
         value: "discount",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Paid Amount",
         value: "paidAmount",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Balance",
         value: "Balance",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Status",
         value: "paymentStatus",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     studentId: {
-      name: ""
+      name: "",
     },
     token: "",
     editedItem: {},
     invoiceData: {
       paymentStatus: "",
-      students: []
+      students: [],
     },
     addclass: [],
     studentList: [],
     paymentStatus: [
       {
         name: "Not Paid",
-        value: "NOT_PAID"
+        value: "NOT_PAID",
       },
       {
         name: "Partially Paid",
-        value: "PARTIALLY_PAID"
+        value: "PARTIALLY_PAID",
       },
       {
         name: "Fully Paid",
-        value: "FULLY_PAID"
+        value: "FULLY_PAID",
-      }
+      },
-    ]
+    ],
   }),
+  watch: {
+    addInvoiceDialog: function (val) {
+      if (!val) {
+        this.invoiceData = [];
+        this.menu1 = false;
+        this.feeType = [];
+        this.feeTypeData = [];
+      }
+    },
+  },
   methods: {
     save(date) {
       this.$refs.menu1.save(date);
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     profile(item) {
       // console.log("item", item);
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       console.log("editedItem", this.editedItem);
       this.dialog1 = true;
     },
     editItem(item) {
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editData = Object.assign({}, item);
       this.editData.date = this.editData.date.slice(0, 10);
       // console.log("invoiceData", this.editData);
       this.editFeeTypeData = this.editData.feeType;
       this.editInvoiceDialog = true;
     },
     paymentItem(item) {
       // console.log("item", item);
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editPayment = Object.assign({}, item);
       this.editPayment.date = this.editPayment.date.slice(0, 10);
       if (this.editPayment.paymentStatus == "NOT_PAID") {
         for (let i = 0; i < this.editPayment.feeType.length; i++) {
           this.editPayment.feeType[i].paidAmount = "0.00";
         }
       }
       // console.log("this.editPayment", this.editPayment);
       this.paymentFeeTypeData = this.editPayment.feeType;
       this.paymentInvoiceDialog = true;
     },
     deleteItem(item) {
       let deleteInvoice = {
-        invoiceId: item._id
+        invoiceId: item._id,
       };
       http()
         .delete(
           "/deleteInvoice",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteInvoice
+            params: deleteInvoice,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
           this.dialog1 = false;
           this.getInvoiceList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
         });
     },
     deletePayment(editedItem) {
       let deleteInvoice = {
-        invoiceId: editedItem._id
+        invoiceId: editedItem._id,
       };
       http()
         .put(
           "/removePayment",
           deleteInvoice,
           confirm("Are you sure you want to delete this?") && {
             headers: {
-              Authorization: "Bearer " + this.token
+              Authorization: "Bearer " + this.token,
-            }
+            },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
           this.dialog1 = false;
           this.getInvoiceList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
         });
     },
     close() {
       this.dialog = false;
     },
+    closeAddInvoiceModel() {
+      this.addInvoiceDialog = false;
+      this.invoiceData = [];
+      this.menu1 = false;
+      this.feeType = [];
+      this.feeTypeData = [];
+    },
     // totalAmount() {
     //   // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
     //   // console.log(
     //   //   "this.feeType.subTotalAAAAAAAAAAAAAAA ",
     //   //   this.feeType.subTotal
     //   // );
     //   if (this.feeType.paidAmount < this.feeType.subTotal) {
     //     console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
     //     this.feeType.paidAmount = this.feeType.subTotal;
     //     console.log(
     //       "this.feeType.paidAmount BBBBBBBBBBB",
     //       this.feeType.paidAmount
     //     );
     //   }
     // },
     submit() {
       let feeTypeId = "";
       for (let i = 0; i < this.feeTypes.length; i++) {
         if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
           feeTypeId = this.feeTypes[i]._id;
         }
       }
       if (this.$refs.form.validate()) {
         let invoiceData = {
           classId: this.invoiceData.classNum,
           students: this.invoiceData.students,
           date: this.invoiceData.date,
           paymentStatus: this.invoiceData.paymentStatus,
           paymentMethod: this.invoiceData.paymentMethod,
           feeType: this.feeTypeData,
           totalAmount: this.feeType.amount.toString(),
           totalDiscount: this.feeType.discount.toString(),
           totalSubTotal: this.feeType.subTotal.toString(),
-          totalPaidAmount: this.feeType.paidAmount
+          totalPaidAmount: this.feeType.paidAmount,
         };
         if (invoiceData.paymentStatus == "NOT_PAID") {
           delete invoiceData.paymentMethod;
         }
         if (this.feeType.paidAmount != "0.00") {
           if (this.feeType.subTotal == this.feeType.paidAmount) {
             invoiceData.paymentStatus = "FULLY_PAID";
             // console.log("FULLY_PAID");
           }
           if (invoiceData.totalPaidAmount) {
             if (this.feeType.subTotal != this.feeType.paidAmount) {
               invoiceData.paymentStatus = "PARTIALLY_PAID";
               // console.log("PARTIALLY_PAID");
             }
           }
         }
         if (invoiceData.totalSubTotal == "0.00") {
           invoiceData.paymentStatus = "FULLY_PAID";
         } else if (invoiceData.totalSubTotal != "0.00") {
           if (this.feeType.paidAmount === "0.00") {
             invoiceData.paymentStatus = "NOT_PAID";
             delete invoiceData.paymentMethod;
           }
         }
         http()
           .post("/createInvoice", invoiceData)
-          .then(response => {
+          .then((response) => {
             this.getInvoiceList();
             this.snackbar = true;
             this.text = "New Invoice added successfully";
             this.color = "green";
             this.clear();
             this.feeTypeData = [];
             if (this.feeTypeData.length == 0) {
               this.feeType = {
                 amount: "0.00",
                 discount: "0.00",
                 paidAmount: "0.00",
                 subTotal: "0.00",
-                feeTypeList: ""
+                feeTypeList: "",
               };
             }
             this.loading = false;
             this.addInvoiceDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.errors[0].messages[0];
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     getInvoiceList() {
       this.showLoader = true;
       http()
         .get("/getInvoicesList", {
           params: { schoolId: this.$store.state.schoolId },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.invoiceList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     selectFeeType() {
       this.showFeeType = true;
       this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
     },
-    deleteSelectFee: function(index, feeTyp) {
+    deleteSelectFee: function (index, feeTyp) {
       console.log("---index----", index);
       this.feeTypeData.splice(index, 1);
       this.getAmmountDetails(feeTyp);
       if (this.feeTypeData.length == 0) {
         this.feeType = {
           amount: "0.00",
           discount: "0.00",
           paidAmount: "0.00",
           subTotal: "0.00",
-          feeTypeName: ""
+          feeTypeName: "",
         };
       }
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           params: { schoolId: this.$store.state.schoolId },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAllStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentsList", {
           params: {
             classId: this.invoiceData.classNum,
-            schoolId: this.$store.state.schoolId
+            schoolId: this.$store.state.schoolId,
           },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           response.data.data.unshift({
             name: "Select All",
-            _id: "Select All"
+            _id: "Select All",
           });
           this.studentList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getfeeType() {
       http()
         .get("/getFeesList", {
           params: {
-            schoolId: this.$store.state.schoolId
+            schoolId: this.$store.state.schoolId,
           },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.feeTypes = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAmmountDetails(feeTyp) {
       let feeType = {
         amount: "0.00",
         discount: "0.00",
         subTotal: "0.00",
         subParticularTotal: "0.00",
-        paidAmount: ""
+        paidAmount: "",
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
         // *********** AMOUNT ***********
         if (this.feeTypeData[i].amount) {
           feeType.amount =
             Number(feeType.amount) + Number(this.feeTypeData[i].amount);
           this.feeType.amount = feeType.amount;
           this.feeType.subTotal = feeType.amount;
           this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
         } else if (this.feeTypeData[0].amount == "") {
           this.feeType.amount = "0.00";
           this.feeTypeData[i].subTotal = "0.00";
           this.feeType.subTotal = "0.00";
         } else if (this.feeTypeData[i].amount == "") {
           this.feeType.amount =
             Number(feeType.amount) + Number(this.feeTypeData[i].amount);
           this.feeTypeData[i].subTotal =
             Number(feeType.amount) + Number(this.feeTypeData[i].amount);
           this.feeType.subTotal =
             Number(feeType.amount) + Number(this.feeTypeData[i].amount);
         }
         // *********** DISCOUNT ***********
         if (this.feeTypeData[i].discount) {
           if (
             Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
           ) {
             feeType.discount =
               Number(feeType.discount) + Number(this.feeTypeData[i].discount);
             this.feeType.discount = feeType.discount;
             feeType.subParticularTotal =
               this.feeTypeData[i].amount - this.feeTypeData[i].discount;
             this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
               2
             );
           } else if (
             Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
           ) {
             this.feeTypeData[i].discount = this.feeTypeData[i].amount;
             feeType.discount =
               Number(feeType.discount) + Number(this.feeTypeData[i].discount);
             this.feeType.discount = feeType.discount.toString();
             feeType.subParticularTotal =
               this.feeTypeData[i].amount - this.feeTypeData[i].discount;
             this.feeTypeData[
               i
             ].subTotal = feeType.subParticularTotal.toString();
           }
         } else if (this.feeTypeData[0].discount == "") {
           this.feeType.discount = "0.00";
         }
         // else if (this.feeTypeData[i].discount == "") {
         //   this.feeType.discount =
         //     Number(feeType.discount) + Number(this.feeTypeData[i].discount);
         // }
         // *********** SUBTOTAL ***********
         if (this.feeTypeData[i].subTotal) {
           feeType.subTotal =
             Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
           this.feeType.subTotal = feeType.subTotal.toFixed(2);
         }
         // *********** PAID-AMOUNT ***********
         if (this.feeTypeData[i].paidAmount) {
           feeType.paidAmount =
             Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
           this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
         } else if (this.feeTypeData[0].paidAmount == "") {
           this.feeType.paidAmount = "0.00";
         } else if (this.feeTypeData[i].paidAmount == "") {
           this.feeType.paidAmount = feeType.paidAmount =
             Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
         }
         // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
         if (feeType.paidAmount > feeType.subTotal) {
           this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
           this.feeType.paidAmount = feeType.subTotal;
         }
       }
     },
     getPayMethodList() {
       if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
         this.showPayMethods = true;
-        this.paymentMethodRules = [v => !!v || "Payment Method is required"];
+        this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
       } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
         this.showPayMethods = true;
-        this.paymentMethodRules = [v => !!v || "Payment Method is required"];
+        this.paymentMethodRules = [(v) => !!v || "Payment Method is required"];
       } else if (this.invoiceData.paymentStatus == "NOT_PAID") {
         for (let i = 0; i < this.feeTypeData.length; i++) {
           this.feeTypeData[i].paidAmount = "0.00";
           this.feeType.paidAmount = "0.00";
         }
         this.paymentMethodRules = "";
         this.showPayMethods = false;
       } else {
         this.showPayMethods = false;
       }
     },
     selectAllStudent() {
       this.invoiceData.students = [];
       if (this.invoiceData.studentId === "Select All") {
         for (let i = 1; i < this.studentList.length; i++) {
           this.invoiceData.students.push(this.studentList[i]._id);
           console.log("data", this.invoiceData.students);
           // data.push(this.studentList[i]._id);
           // console.log("data", data);
         }
       } else {
         this.invoiceData.students.push(this.invoiceData.studentId);
       }
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     updateDoneInvoice() {
       this.editInvoiceDialog = false;
       this.getInvoiceList();
     },
     updatePayment() {
       this.paymentInvoiceDialog = false;
       this.getInvoiceList();
       this.snackbar = true;
       this.text = "Payment added successfully";
       this.color = "green";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getInvoiceList();
     this.getAllClasses();
     this.getfeeType();
     this.getAllStudents();
-  }
+  },
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 .tdFeeType {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .card-style {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
   border-radius: 12px;
   text-align: center !important;
   padding-top: 10px !important;
 }
 .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 .clear-button {
   background: #fa7676 !important;
   border-color: #fa7676 !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
 }
 .v-card__actions .v-btn {
   margin: 0 15px !important;
   min-width: 96px !important;
 }
 </style>

src/pages/Administrator/academicYear.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT ACADEMIC YEAR ****** -->
     <v-dialog v-model="editAcademinYearDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Academic Year</label>
             <v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Year:</label>
               </v-flex>
               <v-flex xs8 sm7 class="ml-3">
                 <v-text-field
                   v-model="editedItem.year"
                   placeholder="fill your Title"
                   name="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">Year Title:</label>
               </v-flex>
               <v-flex xs8 sm7 class="ml-3">
                 <v-text-field
                   v-model="editedItem.yearTitle"
                   placeholder="fill your Year Title"
                   name="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 hidden-xs-only hidden-sm-only">Starting Date:</label>
                 <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>
               </v-flex>
               <v-flex xs8 sm7 class="ml-3">
                 <v-menu
                   ref="menu"
                   :close-on-content-click="false"
                   v-model="menu"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.startingDate"
                     placeholder="Select date"
                   ></v-text-field>
                   <v-date-picker
                     color="info"
                     ref="picker"
                     v-model="editedItem.startingDate"
                     @input="$refs.menu.save(editedItem.startingDate)"
                   ></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 hidden-xs-only hidden-sm-only">Ending Date:</label>
                 <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label>
               </v-flex>
               <v-flex xs8 sm7 class="ml-3">
                 <v-menu
                   ref="menuEndDate"
                   :close-on-content-click="false"
                   v-model="menuEndDate"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.endingDate"
                     placeholder="Select date"
                   ></v-text-field>
                   <v-date-picker
                     color="info"
                     ref="picker"
                     v-model="editedItem.endingDate"
                     @input="$refs.menuEndDate.save(editedItem.endingDate)"
                   ></v-date-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE ACADEMIC YEAR DEATILS ******  -->
     <v-dialog v-model="viewAcademinYearDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Academic Year</label>
             <v-icon size="24" class="right" @click="viewAcademinYearDialog = 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>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs7>
                     <h5 class="my-1">{{ editedItem.year }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Year Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs7>
                     <h5 class="my-1">{{ editedItem.yearTitle }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">
                       <b>Starting Date:</b>
                     </h5>
                     <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">
                       <b>StartingDate:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs7>
                     <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">
                       <b>Ending Date:</b>
                     </h5>
                     <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">
                       <b>EndingDate:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs7>
                     <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING  ACADEMIC YEAR 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="addAcademicYearDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addAcademicYearDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year
       </v-btn>
       <v-spacer></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-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="getAcademicYearList"
       :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.year}}</td>
           <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteItem(props.item)"
                   class="mr-3"
                   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 ACADEMIC YEAR ****** -->
-    <v-dialog v-model="addAcademicYearDialog" max-width="600px">
+    <v-dialog v-model="addAcademicYearDialog" max-width="600px" v-if="addAcademicYearDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Academic Year</label>
-            <v-icon size="24" class="right" @click="addAcademicYearDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddAcademicYearModel">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 sm4 class="pt-4 subheading">
                   <label class="right">Year:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="addAcademicYear.year"
                     placeholder="fill Year (2019-2020)"
                     type="text"
                     :rules="yearRules"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Year Title:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Year Title"
                     :rules="yearTitleRules"
                     v-model="addAcademicYear.yearTitle"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label>
                   <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-menu
                     ref="menuStart"
                     :close-on-content-click="false"
                     v-model="menuStart"
                     :nudge-right="40"
                     :return-value.sync="addAcademicYear.startingDate"
                     app
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       :rules="startDateRules"
                       v-model="addAcademicYear.startingDate"
                       append-icon="event"
                       placeholder="Select starting date"
                     ></v-text-field>
                     <v-date-picker
                       color="info"
                       v-model="addAcademicYear.startingDate"
                       @input="$refs.menuStart.save(addAcademicYear.startingDate)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Ending Date:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-menu
                     ref="menu1"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="addAcademicYear.endingDate"
                     app
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       :rules="endDateRules"
                       v-model="addAcademicYear.endingDate"
                       append-icon="event"
                       placeholder="Select ending date"
                     ></v-text-field>
                     <v-date-picker
                       color="info"
                       v-model="addAcademicYear.endingDate"
                       @input="$refs.menu1.save(addAcademicYear.endingDate)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-layout>
                   <v-spacer></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-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";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     loading: false,
     date: null,
     show: true,
     showSearch: false,
     search: "",
     showLoader: false,
     addAcademicYearDialog: false,
     editAcademinYearDialog: false,
     viewAcademinYearDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     date: null,
     menu1: false,
     menu: false,
     menuStart: false,
     menuEndDate: false,
-    yearRules: [v => !!v || "Year is required"],
+    yearRules: [(v) => !!v || "Year is required"],
-    yearTitleRules: [v => !!v || "Year Title is required"],
+    yearTitleRules: [(v) => !!v || "Year Title is required"],
-    startDateRules: [v => !!v || "startDate is required"],
+    startDateRules: [(v) => !!v || "startDate is required"],
-    endDateRules: [v => !!v || "endDate is required"],
+    endDateRules: [(v) => !!v || "endDate is required"],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Year", value: "year", sortable: false, align: "center" },
       {
         text: "Year Title",
         value: "yearTitle",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Starting Date",
         value: "startingDate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Ending Date",
         value: "endingDate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     getAcademicYearList: [],
     editedIndex: -1,
     addAcademicYear: {},
     editedItem: {},
-    token: ""
+    token: "",
   }),
+  watch: {
+    addAcademicYearDialog: function (val) {
+      if (!val) {
+        this.addAcademicYear = [];
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getAcademicYear() {
       this.showLoader = true;
       http()
         .get("/getAcademicsList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.getAcademicYearList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.getAcademicYearList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.schoolEventId = item._id;
       this.editAcademinYearDialog = true;
     },
     profile(item) {
       this.editedIndex = this.getAcademicYearList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewAcademinYearDialog = true;
     },
     deleteItem(item) {
       let deleteAcademic = {
-        academicId: item._id
+        academicId: item._id,
       };
       http()
         .delete(
           "/deleteAcademic",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteAcademic
+            params: deleteAcademic,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getAcademicYear();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editAcademinYearDialog = false;
     },
+    closeAddAcademicYearModel() {
+      this.addAcademicYearDialog = false;
+      this.getAcademicYearList = [];
+      this.addAcademicYear = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createAcademic", this.addAcademicYear)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getAcademicYear();
             this.clear();
             this.loading = false;
             this.addAcademicYearDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.editedItem.academicId = this.editedItem._id;
       http()
         .put("/updateAcademic", this.editedItem, {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getAcademicYear();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAcademicYear();
-  }
+  },
 };
 </script>

src/pages/Annoucement/annoucement.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS COURSES DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Annoucement</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.attachementUrl && !editImageUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.attachementUrl"
                     v-else-if="editedItem.attachementUrl && !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 sm12>
                   <v-layout>
                     <v-flex xs4 sm5 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 sm7 class="ml-3">
                       <v-select
                         :items="addclass"
                         label="Select Class"
                         v-model="editedItem.select"
                         item-text="classNum"
                         item-value="_id"
                         name="Select Class"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-select
                         :items="courseData"
                         item-text="courseName"
                         item-value="_id"
                         v-model="editedItem.courseName"
                         placeholder="fill your Course name"
                         type="text"
                         :rules="courseRules"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
                       >DiscussionType:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-text-field
                         v-model="editedItem.discussionType"
                         placeholder="fill your Course Name"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
                     </v-flex>
                     <v-flex xs8 sm7 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>
                 <v-flex xs12 sm12 class="px-0 mx-0">
                   <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="600px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Annoucement</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.attachementUrl" />
               <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" />
             </v-avatar>
           </v-flex>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>Discussion Type :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.discussionType }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Annoucement 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="addAnnoucementDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addAnnoucementDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement
       </v-btn>
       <v-card-actions class="hidden-xs-only hidden-sm-only">
         <v-flex md13 lg12>
           <v-layout>
             <v-flex lg6 md12>
               <v-layout>
                 <v-select
                   :items="addclass"
                   label="Select Class"
                   v-model="selectAnnoucement.classId"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   :rules="classRules"
                   required
                   class="ml-2"
                   @change="getCourses(selectAnnoucement.classId)"
                 ></v-select>
                 <v-select
                   :items="courseData"
                   label="Select Course"
                   v-model="selectAnnoucement.courseId"
                   item-text="courseName"
                   item-value="_id"
                   :rules="courseRules"
                   required
                   class="ml-4"
                 ></v-select>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-card-actions>
       <v-spacer></v-spacer>
       <v-btn
         @click="getAnnoucementes()"
         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-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 xs12>
             <v-select
               :items="addclass"
               label="Select Class"
               v-model="selectAnnoucement.select"
               item-text="classNum"
               item-value="_id"
               name="Select Class"
               :rules="classRules"
               class="px-2"
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs5 class="mx-auto mb-2">
             <v-btn
               @click="getAnnoucementes()"
               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="annoucementData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr row-click" @click="rowAnnoucement(props.item._id)">
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.discussionType}}</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>
                 <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>
                 <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>
     <!-- ****** Add Annoucement DETAILS******-->
-    <v-dialog v-model="addAnnoucementDialog" max-width="500">
+    <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Annoucement</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addAnnoucementDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addAnnoucementDialog = false"
+            >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
               <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" v-if="!imageUrl">
                         <img src="/static/icon/user.png" />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                       <img
                         :src="imageData.imageUrl"
                         height="150"
                         width="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm12>
                       <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="addAnnoucement.select"
                             item-text="classNum"
                             item-value="_id"
                             name="Select Class"
                             :rules="classRules"
                             @change="getCourses(addAnnoucement.select)"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-select
                             :items="courseData"
                             item-text="courseName"
                             item-value="_id"
                             v-model="addAnnoucement.courseName"
                             placeholder="fill your Course name"
                             type="text"
                             :rules="courseRules"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >DiscussionType:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addAnnoucement.discussionType"
                             placeholder="fill your Course name"
                             type="text"
                             :rules="courseRules"
                             required
                           ></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 hidden-xs-only hidden-sm-only">Upload Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</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-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout class="right">
                         <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-form>
               </v-flex>
             </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: () => ({
     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: "",
     menu: false,
     menu1: false,
     editStudentDialog: false,
     profileStudentDialog: false,
     addAnnoucementDialog: false,
     valid: true,
     addclass: [],
     addSection: [],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     editImageName: "",
     editImageUrl: "",
     courseRules: [(v) => !!v || " Course Name is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     sectionRules: [(v) => !!v || "Section Name is required"],
     errorMessages: "",
     headers: [
       {
         text: "Image",
         value: "attachementUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Discussion Type",
         value: "discussionType",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     courseData: [],
     editedIndex: -1,
     addAnnoucement: {
       select: "",
     },
     selectAnnoucement: {},
     editedItem: {},
     annoucementData: [],
   }),
+  watch: {
+    addAnnoucementDialog: function (val) {
+      if (!val) {
+        this.addAnnoucement = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+  },
   methods: {
     getCourses(selectCourseId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
             classId: selectCourseId,
           },
         })
         .then((response) => {
           this.courseData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getAnnoucementes() {
       this.showLoader = true;
       http()
         .get("/getAnnoucementesList", {
           params: {
             courseId: this.selectAnnoucement.courseId,
             classId: this.selectAnnoucement.classId,
           },
         })
         .then((response) => {
           this.annoucementData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     // getSections(_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;
         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.courseData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editStudentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.courseData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileStudentDialog = true;
     },
     deleteItem(item) {
       let deleteAnnoucement = {
         annoucementId: item._id,
       };
       http()
         .delete(
           "/deleteAnnoucement",
           confirm("Are you sure you want to delete this?") && {
             params: deleteAnnoucement,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getAnnoucementes();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editStudentDialog = false;
     },
     closeStudentProfile() {
       this.profileStudentDialog = false;
     },
     rowAnnoucement(id) {
       this.$router.push({
         name: "Annoucement Forum",
         params: { annoucementId: id },
       });
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addCourse = {
           classId: this.addAnnoucement.select,
           sectionId: this.addAnnoucement.selectSection,
           discussionType: this.addAnnoucement.discussionType,
           courseId: this.addAnnoucement.courseName,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addCourse.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createAnnoucement", addCourse)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Annoucement added successfully";
             this.color = "green";
             this.addAnnoucementDialog = false;
             this.clear();
             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 = "";
     },
     save() {
       let editAnnoucement = {
         annoucementId: this.editedItem._id,
         discussionType: this.editedItem.discussionType,
         classId: this.editedItem.select,
         courseId: this.editedItem.courseName,
       };
       if (this.editImageUrl) {
         var str = this.editImageUrl;
         const [baseUrl, editImageUrl] = str.split(/,/);
         editAnnoucement.upload = editImageUrl;
       }
       this.editLoading = true;
       http()
         .put("/updateAnnoucement", editAnnoucement)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.imageUrl = "";
           this.getAnnoucementes();
           this.close();
           this.editLoading = false;
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.statusText;
           this.color = "error";
           this.editLoading = false;
         });
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     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>
 .row-click {
   cursor: pointer;
 }
 </style>

src/pages/Attendence/studentAttendence.vue

Diff comments View file @8e8d142

 <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="getStudents(getAttendence.sectionId)"
+          @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-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-dialog v-model="addStudentAttendenceDialog" width="1600" v-if="addStudentAttendenceDialog">
       <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-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: "/" });
         });
     },
     getSection(_id) {
       this.showLoader = true;
       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(_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;
+        });
+    },
+    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;
         });
     },
     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.show = false;
-       this.showSearch = true;
+      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/Attendence/teacherAttendence.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** ATTENDENCE TACHERS 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="addTeacherAttendenceDialog = 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="addTeacherAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence
       </v-btn>
       <v-spacer></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-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="teachersData"
       :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="td td-row text-xs-center">{{ props.item.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.email }}</td>
           <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
           <td class="text-xs-center td td-row">
             <router-link
               :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }"
             >
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:25px; "
                     src="/static/icon/view.png"
                   />
                   <span>View</span>
                 </v-tooltip>
               </span>
             </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 Teachers Attendece****** -->
-    <v-dialog v-model="addTeacherAttendenceDialog" width="1600">
+    <v-dialog v-model="addTeacherAttendenceDialog" width="1600" v-if="addTeacherAttendenceDialog">
       <v-card flat class="pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Teacher Attendence</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addTeacherAttendenceDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addTeacherAttendenceDialog = false"
+            >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 class="mt-4">
           <v-form ref="form" v-model="valid" lazy-validation>
             <v-layout wrap>
               <v-flex xs12 class="px-4">
                 <v-layout>
                   <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 class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-form>
         </v-flex>
         <v-flex xs12 v-show="attendeceTable" class>
           <v-data-table
             :headers="headers"
             :items="teachersData"
             :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.email }}</td>
                 <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</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="submit()" 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",
     role: "",
     mode: "",
     timeout: 5000,
     text: "",
     date: null,
     menu: false,
     show: true,
     showSearch: false,
     addTeacherAttendenceDialog: false,
     attendeceTable: false,
     showLoader: false,
     loading: false,
     search: "",
     valid: true,
     isActive: true,
     newActive: false,
-    dataValid: [v => !!v || "Date is required"],
+    dataValid: [(v) => !!v || "Date is required"],
     attendenceType: [
       {
         label: "Present",
-        value: "present"
+        value: "present",
       },
       {
         label: "Late Present With Excuset",
-        value: "latePresentWithExcuse"
+        value: "latePresentWithExcuse",
       },
       {
         label: "Late Present",
-        value: "latePresent"
+        value: "latePresent",
       },
       {
         label: "Absent",
-        value: "absent"
+        value: "absent",
-      }
+      },
     ],
     pagination: {
-      rowsPerPage: 8
+      rowsPerPage: 8,
     },
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       {
         text: "Mobile No",
         value: "mobileNo",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Attendance", value: "", sortable: false, align: "center" }
+      { text: "Attendance", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     teachersData: [],
-    addTeachers: {}
+    addTeachers: {},
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY"));
-    }
+    },
+    addTeacherAttendenceDialog: function (val) {
+      if (!val) {
+        this.teachersData = [];
+        this.date = null;
+        this.menu = false;
+      }
+    },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     showTable() {
       this.attendeceTable = true;
       this.getTeacherList();
     },
     getTeacherList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.teachersData = response.data.data;
           // this.desserts = response.data.data;
           var attendence = "";
           for (let i = 0; i < this.teachersData.length; i++) {
             this.teachersData[i].attendence = "present";
           }
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.desserts)
           // console.log("getTeacherList=====>",this.teachersData)
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     submit() {
       var teachersAttendence = [];
       for (var j = 0; j < this.teachersData.length; j++) {
         teachersAttendence.push({
           teacherId: this.teachersData[j]._id,
-          attendanceType: this.teachersData[j].attendence
+          attendanceType: this.teachersData[j].attendence,
         });
       }
       if (this.$refs.form.validate()) {
         let attendanceData = {
           date: this.date,
-          teachers: teachersAttendence
+          teachers: teachersAttendence,
         };
         http()
           .post("/createTeacherAttendance", attendanceData)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.addTeacherAttendenceDialog = false;
             this.clear();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getTeacherList();
     this.role = this.$store.state.role;
-  }
+  },
 };

src/pages/Class/addclass.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  ClASS  ****** -->
     <v-dialog v-model="editClassDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Class</label>
             <v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout justify-center>
             <v-flex xs12 sm12>
               <v-flex xs12>
                 <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field>
               </v-flex>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW STUDENTS ******  -->
     <v-dialog v-model="profileClassDialog" max-width="400px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Class</label>
             <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs6 sm6>
                 <h5 class="right my-1 subheading">
                   <b>Class Name:</b>
                 </h5>
               </v-flex>
               <v-flex sm6 xs6>
                 <h5 class="my-1">{{ editedItem.classNum }}</h5>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Class 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="addClassDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addClassDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class
       </v-btn>
       <v-spacer></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-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="classList"
       :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">{{ props.item.classNum}}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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 BOX - ADD Class  -->
-    <v-dialog v-model="addClassDialog" max-width="400px">
+    <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Class</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addClassDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addClassDialog = false"
+            >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-flex xs12 class="headline text-xs-center">
                   <label>Class</label>
                 </v-flex>
                 <v-flex xs12>
                   <v-text-field
                     v-model="addclasses.classNum"
                     placeholder="fill your class Name"
                     type="text"
                     :rules="nameRules"
                     required
                   ></v-text-field>
                 </v-flex>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         class="add-button"
                         round
                         dark
                         :loading="loading"
                       >Add Class</v-btn>
                       <v-spacer></v-spacer>
                     </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-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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     addClassDialog: false,
     search: "",
     editClassDialog: false,
     profileClassDialog: false,
     valid: true,
     pagination: {
       rowsPerPage: 10,
     },
     nameRules: [(v) => !!v || " Class Name is required"],
     headers: [
       {
         text: "No",
         align: "left",
         sortable: false,
         value: "No",
       },
       { text: "Class No", value: "classNum", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     editedIndex: -1,
     editedItem: {
       classNum: "",
     },
     addclasses: {
       classNum: "",
     },
   }),
+  watch: {
+    addClassDialog: function (val) {
+      if (!val) {
+        this.addclasses = [];
+      }
+    },
+  },
   methods: {
     getClassList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getClassesList")
         .then((response) => {
           this.classList = 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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.classList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editClassDialog = true;
     },
     profile(item) {
       this.editedIndex = this.classList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileClassDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         classId: item._id,
       };
       http()
         .delete(
           "/deleteClass",
           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.getClassList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editClassDialog = false;
     },
     closeProfile() {
       this.profileClassDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addClass = {
           classNum: this.addclasses.classNum,
         };
         this.loading = true;
         http()
           .post("/createClass", addClass)
           .then((response) => {
             this.getClassList();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             // this.clear();
             this.loading = false;
-            this.$refs.form.reset()
+            this.$refs.form.reset();
             this.addClassDialog = false;
           })
           .catch((error) => {
             this.loading = false;
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       let editClass = {
         classId: this.editedItem._id,
         classNum: this.editedItem.classNum,
       };
       http()
         .put("/updateClass", editClass)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getClassList();
           this.close();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           // console.log(error);
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.getClassList();
   },
   // created() {
   //   this.$root.$on("app:search", search => {
   //     this.search = search;
   //   });
   // },
   // beforeDestroy() {
   //   // dont forget to remove the listener
   //   this.$root.$off("app:search");
   // }
 };
 </script>
 <style>
 </style>

src/pages/Course/course.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS COURSES DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Course</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.courseImageUrl && !editImageUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.courseImageUrl"
                     v-else-if="editedItem.courseImageUrl && !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 sm12>
                   <v-layout>
                     <v-flex xs4 sm5 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 sm7 class="ml-3">
                       <v-select
                         :items="addclass"
                         label="Select Class"
                         v-model="editedItem.select"
                         item-text="classNum"
                         item-value="_id"
                         name="Select Class"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-text-field
                         v-model="editedItem.courseName"
                         placeholder="fill your Course Name"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
                     </v-flex>
                     <v-flex xs8 sm7 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>
                 <v-flex xs12 sm12 class="px-0 mx-0">
                   <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="600px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Course</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.courseImageUrl" />
               <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" />
             </v-avatar>
           </v-flex>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>Course :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.courseName }}</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="addCourseDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addCourseDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course
       </v-btn>
       <v-card-actions class="hidden-xs-only hidden-sm-only">
         <v-flex md13 lg12>
           <v-layout>
             <v-flex lg6 md6>
               <v-select
                 :items="addclass"
                 label="Select Class"
                 v-model="selectStudents.select"
                 item-text="classNum"
                 item-value="_id"
                 name="Select Class"
                 :rules="classRules"
                 required
                 class="ml-2"
               ></v-select>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-card-actions>
       <v-spacer></v-spacer>
       <v-btn
         @click="getCourses()"
         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-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 xs12>
             <v-select
               :items="addclass"
               label="Select Class"
               v-model="selectStudents.select"
               item-text="classNum"
               item-value="_id"
               name="Select Class"
               :rules="classRules"
               class="px-2"
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs5 class="mx-auto mb-2">
             <v-btn @click="getCourses()" 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="courseData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.courseName}}</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>
                 <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>
                 <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>
     <!-- ****** Add CourseS DETAILS****** -->
-    <v-dialog v-model="addCourseDialog" max-width="500">
+    <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Course</label>
-            <v-icon size="24" class="right" @click="addCourseDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
               <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" v-if="!imageUrl">
                         <img src="/static/icon/user.png" />
                       </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 sm12>
                       <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="addCourses.select"
                             item-text="classNum"
                             item-value="_id"
                             name="Select Class"
                             :rules="classRules"
                             @change="getSections(addCourses.select)"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addCourses.courseName"
                             placeholder="fill your Course name"
                             type="text"
                             :rules="courseRules"
                             required
                           ></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 hidden-xs-only hidden-sm-only">Upload Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</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-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout class="right">
                         <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-form>
               </v-flex>
             </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: () => ({
     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: "",
     menu: false,
     menu1: false,
     editStudentDialog: false,
     profileStudentDialog: false,
     addCourseDialog: false,
     valid: true,
     addclass: [],
     addSection: [],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     editImageName: "",
     editImageUrl: "",
     courseRules: [(v) => !!v || " Course Name is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     sectionRules: [(v) => !!v || " Section Name is required"],
     errorMessages: "",
     headers: [
       {
         text: "Image",
         value: "courseImageUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Course",
         value: "course",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     courseData: [],
     editedIndex: -1,
     addCourses: {},
     selectStudents: {
       select: "",
       selectSection: "",
     },
     editedItem: {},
   }),
+  watch: {
+    addCourseDialog: function (val) {
+      if (!val) {
+        this.addCourses = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+  },
   methods: {
     getCourses() {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
             classId: this.selectStudents.select,
           },
         })
         .then((response) => {
           this.courseData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getSections(_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.courseData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editStudentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.courseData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileStudentDialog = true;
     },
     deleteItem(item) {
       let deleteCourse = {
         courseId: item._id,
       };
       http()
         .delete(
           "/deleteCourse",
           confirm("Are you sure you want to delete this?") && {
             params: deleteCourse,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getCourses();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editStudentDialog = false;
     },
     closeStudentProfile() {
       this.profileStudentDialog = false;
     },
+    closeAddCourseModel() {
+      this.addCourseDialog = false;
+      this.courseData = [];
+      this.addCourses = [];
+      this.imageName = "";
+      this.imageFile = "";
+      this.imageUrl = "";
+    },
     submit() {
       if (this.$refs.form.validate()) {
         let addCourse = {
           classId: this.addCourses.select,
           sectionId: this.addCourses.selectSection,
           courseName: this.addCourses.courseName,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addCourse.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createCourse", addCourse)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Course added successfully";
             this.color = "green";
             this.addCourseDialog = false;
             this.clear();
             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 = "";
     },
     save() {
       let editCourse = {
         courseId: this.editedItem._id,
         courseName: this.editedItem.courseName,
         classId: this.editedItem.select,
       };
       if (this.editImageUrl) {
         var str = this.editImageUrl;
         const [baseUrl, editImageUrl] = str.split(/,/);
         editCourse.upload = editImageUrl;
       }
       this.editLoading = true;
       http()
         .put("/updateCourse", editCourse)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.imageUrl = "";
           this.getCourses();
           this.close();
           this.editLoading = false;
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.statusText;
           this.color = "error";
           this.editLoading = false;
         });
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     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;
 }
 </style>

src/pages/Course/courseDetail.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit Chapter detail  ****** -->
     <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
             <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Select Class:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     small
                     :items="addclass"
                     label="Select Class"
                     v-model="editedCourse.classId"
                     item-text="classNum"
                     item-value="_id"
                     name="Select Class"
                     @change="getCourses(editedCourse.classId)"
                     class="mr-2"
                     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">Select Course:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="courseData"
                     label="Select Course"
                     v-model="editedCourse.courseId"
                     item-text="courseName"
                     item-value="_id"
                     required
                     class="ml-2"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- DIALOG BOX -  EDIT CHAPTER-->
     <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
             <v-icon
               size="24"
               class="right"
               @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <!-- CHAPTER NAME -->
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editChapter.chapterName"
                     placeholder="fill your Title"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- DESCRIPTION -->
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="editChapter.description"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="EditPpt"
                     id="editPptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="editPdf"
                     id="editPdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
             <v-layout
               wrap
               v-for="(editChapterPoint,index) in editChapter.chapterPoints"
               :key="index"
             >
               <v-flex xs12 sm12 md4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
               </v-flex>
               <v-layout>
                 <v-flex xs10 sm10 sm5 md9 class="ml-3">
                   <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
                 </v-flex>
                 <v-flex xs2 class="pt-4">
                   <v-icon @click="deleteUrl(index)">cancel</v-icon>
                 </v-flex>
               </v-layout>
             </v-layout>
           </v-flex>-->
           <v-flex xs12>
             <div v-for="(updateImage,index) in updates" :key="index">
               <v-layout wrap>
                 <v-flex xs12 sm12 md4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                   <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
                 </v-flex>
                 <v-layout>
                   <v-flex xs10 sm12 md9 class="ml-3">
                     <v-text-field
                       v-model="updateImage.value"
                       placeholder="Upload new Chapter Points"
                       required
                     ></v-text-field>
                   </v-flex>
                   <v-flex xs2 class="pt-4">
                     <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
                     <v-icon @click="update">add_circle</v-icon>
                   </v-flex>
                 </v-layout>
               </v-layout>
             </div>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="saveChapter"
                   :loading="editLoading"
                   class="add-button mr-4"
                 >Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="saveChapter"
                   :loading="editLoading"
                   class="add-button"
                 >Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ADD NEW CHAPTER-->
     <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Chapter Detail</label>
             <v-icon
               size="24"
               class="right"
               @click="addChapterDialog = false;  trigger = 'reset'; emptyPdf = 'reset' "
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="addChapterItem.chapterName"
                     placeholder="fill your Title"
                     type="text"
                     required
                   ></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">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="addChapterItem.description"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="newChapterPpt"
                     id="newChapterPptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="newChapterPdf"
                     id="newChapterPdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-flex xs12>
             <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Points:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Chapter Points"
                     v-model="chapterPoints.value"
                     type="text"
                     name="link"
                     required
                   ></v-text-field>
                 </v-flex>
                 <v-flex xs2 class="pt-4">
                   <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
                   <v-icon @click="addChapterPoint()">add_circle</v-icon>
                 </v-flex>
               </v-layout>
             </div>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="submitChapter"
                   :loading="editLoading"
                   class="add-button mr-4"
                 >Submit</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE Gallery ******  -->
     <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Course Detail</label>
             <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Chapter Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.chapterName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Chapter Points:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">
                       <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
                         <li>{{ chapterPoint}}</li>
                       </ul>
                     </h5>
                   </v-flex>
                 </v-layout>
                 <!-- LINK TO PDF -->
                 <v-layout row justify-center>
                   <v-flex xs6>
                     <div style="width: 100%;">
                       <a
                         :href="editedItem.pdfFileUrl"
                         target="_blank"
                         style="text-decoration: none!important;"
                       >
                         <v-btn flat block>
-                          <span><h5><b>Open PDF</b></h5></span>
+                          <span>
+                            <h5>
+                              <b>Open PDF</b>
+                            </h5>
+                          </span>
                         </v-btn>
                       </a>
                     </div>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Course Detail TABLE ****** -->
     <v-container grid-list-lg class="pa-0">
       <v-layout row wrap>
         <!-- <v-btn
           fab
           dark
           class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
           small
           @click="addCourseDetailDialog = true"
         >
           <v-icon dark>add</v-icon>
         </v-btn>-->
         <v-flex xs12 sm4>
           <v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
             <v-icon class="white--text pr-1" size="20">add</v-icon>
             <span class="hidden-sm-and-down">Add Course Detail</span>
             <span class="hidden-md-and-up">Add</span>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm4 md2>
           <v-select
             :items="addclass"
             label="Select Class"
             v-model="getCourse.classId"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getCourses(getCourse.classId)"
             required
           ></v-select>
         </v-flex>
         <v-flex xs12 sm4 md2>
           <v-select
             :items="courseData"
             label="Select Course"
             v-model="getCourse.courseId"
             item-text="courseName"
             item-value="_id"
             required
             @change="getCourseDetailsList(getCourse.courseId)"
           ></v-select>
         </v-flex>
         <v-flex xs12 sm1 v-if="show">
           <v-btn icon large flat @click="show = false;showSearch = true;">
             <v-avatar size="27">
               <img src="/static/icon/search.png" alt="icon" />
             </v-avatar>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm3 md3 v-if="showSearch">
           <div style="display: inline-block;width: 70%;">
             <v-text-field
-            autofocus
+              autofocus
               v-model="search"
               label="Search"
               prepend-inner-icon="search"
               color="primary"
             ></v-text-field>
           </div>
           <div style="display: inline-block;">
             <v-icon @click="closeSearch" color="error">close</v-icon>
           </div>
         </v-flex>
       </v-layout>
     </v-container>
     <v-data-table
       :headers="headers"
       :items="CourseDetailsList"
       :pagination.sync="pagination"
       :search="search"
       item-key="_id"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr" @click="courseTableRow(props.item._id)">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
           <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
           <td class="td td-row text-xs-center">
             <div style="vertical-align: top;">
               <v-tooltip top>
                 <v-icon
                   slot="activator"
                   style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
                   class="mr-3"
                   @click="addChapters(props.item)"
                 >add_circle_outline</v-icon>
                 <span>Add</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="props.expanded = !props.expanded"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top>
                 <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>
                 <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>
             </div>
           </td>
         </tr>
       </template>
       <!-- CHAPTERS IN A COURSE -->
       <template slot="expand">
         <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
           <template slot="items" slot-scope="props">
             <tr class="tr" @click="props.expanded = !props.expanded">
               <td class="td td-row">{{ props.index + 1}}</td>
               <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
               <td class="text-xs-center td td-row">{{ props.item.description }}</td>
               <td class="text-xs-center td td-row">
                 <v-tooltip top>
                   <v-icon
                     slot="activator"
                     style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
                     class="mr-3"
                     @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
                   >video_call</v-icon>
                   <span>Live Session</span>
                 </v-tooltip>
                 <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>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr-3"
                     @click="editChapterItem(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="deleteChapters(props.item)"
                     src="/static/icon/delete.png"
                   />
                   <span>Delete Chapter</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>
     <!-- ****** ADD Course Detail  ****** -->
     <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Course Details</label>
             <v-icon
               size="24"
               class="right"
               @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
             >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 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 sm8 md7 class="ml-3">
                   <v-select
                     :items="addclass"
                     label="Select Class"
                     v-model="addCourseDetail.classId"
                     item-text="classNum"
                     item-value="_id"
                     name="Select Class"
                     :rules="clsssRules"
                     @change="getCourses(addCourseDetail.classId)"
                     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 Course:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-select
                     :items="courseData"
                     label="Select Course"
                     v-model="addCourseDetail.courseId"
                     item-text="courseName"
                     item-value="_id"
                     :rules="courseRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     v-model="addCourseDetail.chapterName"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     :rules="chapterNameRules"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- DESCRIPTION -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="addCourseDetail.description"
                     type="text"
                     name="email"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="newCoursePpt"
                     id="newCoursePptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="newCoursePdf"
                     id="newCoursePdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <div v-for="(chapterPoints,index) in finds" :key="index">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Chapter Points:</label>
                     </v-flex>
                     <v-flex xs8 sm8 md6 class="ml-3">
                       <v-text-field
                         placeholder="fill your Chapter Points"
                         v-model="chapterPoints.value"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs2 class="pt-4">
                       <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
                       <v-icon @click="addFind">add_circle</v-icon>
                     </v-flex>
                   </v-layout>
                 </div>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
                   <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-layout>
               </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 UploadFiles from "@/pages/Common/UploadFiles.vue";
 import UploadPdf from "@/pages/Common/UploadPdf.vue";
 import AllApiCalls from "@/Services/AllApiCalls.js";
 export default {
   mixins: [AllApiCalls],
   components: {
     UploadFiles,
     UploadPdf,
   },
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     color: "",
     date: null,
     search: "",
     show: true,
     addCourseDetailDialog: false,
     showSearch: false,
     showLoader: false,
     editCourseDetailDialog: false,
     editChapterDetailDialog: false,
     viewProfileGallery: false,
     valid: true,
     editLoading: false,
     addclass: [],
     courseData: [],
     addSection: [],
     getCourse: {},
     finds: [{ value: "" }],
     findsChapterPoint: [{ value: "" }],
     updates: [],
     youTubeLink: {},
     addCourseDetail: {
       chapters: [
         {
           chapterName: "",
           description: "",
           chapterPoints: [],
         },
       ],
     },
     chapters: [],
     pagination: {
       rowsPerPage: 10,
     },
     editFiles: [],
     files: [],
     courseData: [],
     token: "",
     courseId: "",
     clsssRules: [(v) => !!v || " Class is required"],
     courseRules: [(v) => !!v || " Course is required"],
     chapterNameRules: [(v) => !!v || " Tilte is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "index",
       },
       {
         text: "Class Name",
         value: "classNum",
         sortable: false,
         align: "center",
       },
       {
         text: "Course Name",
         value: "courseName",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     CourseDetailsList: [],
     editedIndex: -1,
     editedItem: {},
     editedCourse: {},
     editChapter: {
       chapterPoints: [],
     },
     index: "",
     addChapterItem: {},
     addChapterItemObj: {},
     addChapterDialog: false,
   }),
   methods: {
     getCourses(classId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
             classId: classId,
           },
         })
         .then((response) => {
           this.editChapter.courseId = "";
           this.courseData = response.data.data;
           // console.log("this.courseData", this.courseData);
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getCourseDetailsList() {
       this.showLoader = true;
       http()
         .get("/getParticularCourseDetail", {
           params: {
             courseId: this.getCourse.courseId,
           },
         })
         .then((response) => {
           this.CourseDetailsList = response.data.data;
           if (response.data.data[0]) {
             this.chapters = response.data.data[0].chapters;
           }
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     courseTableRow(id) {
       this.courseId = id;
     },
     addChapters(item) {
       this.editedIndex = this.CourseDetailsList.indexOf(item);
       this.addChapterItemObj = Object.assign({}, item);
       this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
       this.addChapterDialog = true;
     },
     submitChapter() {
       this.addChapterItem.chapterPoints = [];
       for (let i = 0; i < this.findsChapterPoint.length; i++) {
         this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
       }
       this.loading = true;
       http()
         .put("/addChapters", this.addChapterItem)
         .then((response) => {
           this.addChapterDialog = false;
           this.loading = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.addChapterItem = {};
           this.removeChapterPoint();
           this.getCourseDetailsList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           this.loading = false;
         });
     },
     profile(item) {
       console.log("chaper - ", item);
       this.editedIndex = this.chapters.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewProfileGallery = true;
     },
     editItem(item) {
       this.editedIndex = this.CourseDetailsList.indexOf(item);
       this.editedCourse = Object.assign({}, item);
       this.editCourseDetailDialog = true;
     },
     editChapterItem(item) {
       this.editedIndex = this.chapters.indexOf(item);
       this.editChapter = Object.assign({}, item);
       this.updates = [];
       for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
         this.updates.push({ value: this.editChapter.chapterPoints[i] });
       }
       this.editChapterDetailDialog = true;
     },
     deleteItem(item) {
       let deleteGallery = {
         courseDetailId: item._id,
       };
       http()
         .delete(
           "/deleteCourseDetail",
           confirm("Are you sure you want to delete this?") && {
             params: deleteGallery,
             headers: {
               Authorization: "Bearer " + this.token,
             },
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Course Details";
           this.color = "green";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     deleteChapters(item) {
       // console.log("item", item);
       let deleteChapters = {
         courseDetailId: this.courseId,
         chapterId: item._id,
       };
       http()
         .put(
           "/deleteChapters",
           confirm("Are you sure you want to delete this?") && deleteChapters
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Chapters";
           this.color = "green";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editCourseDetailDialog = false;
     },
     closeProfileGallery() {
       this.viewProfileGallery = false;
     },
     submit() {
       let chapters = [];
       var chapterPoints = [];
       for (let i = 0; i < this.finds.length; i++) {
         chapterPoints.push(this.finds[i].value);
         // console.log("this.finds[i].value", this.finds[i].value);
         chapters = [
           {
             chapterName: this.addCourseDetail.chapterName,
             description: this.addCourseDetail.description,
             chapterPoints: chapterPoints,
             uploadPdf: this.pdfFile,
             uploadPpt: this.pptFile,
           },
         ];
       }
       if (this.$refs.form.validate()) {
         // console.log("this.addCourseDetail", this.addCourseDetail);
         var courseDetailsData = {
           classId: this.addCourseDetail.classId,
           courseId: this.addCourseDetail.courseId,
           chapters: chapters,
         };
         this.loading = true;
         http()
           .post("/createCourseDetail", courseDetailsData)
           .then((response) => {
             this.addCourseDetailDialog = false;
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.trigger = "reset";
             this.emptyPdf = "reset";
             this.removeAddFind();
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     saveChapter() {
       this.editedItem.courseDetailId = this.editedItem._id;
       // console.log("this.updates", this.updates);
       var chapterPoints = [];
       for (let i = 0; i < this.updates.length; i++) {
         chapterPoints.push(this.updates[i].value);
       }
       var updateData = {
         courseDetailId: this.courseId,
         chapterId: this.editChapter._id,
         chapterName: this.editChapter.chapterName,
         description: this.editChapter.description,
         chapterPoints: chapterPoints,
         uploadPdf: this.pdfFile,
         uploadPpt: this.pptFile,
       };
       this.editLoading = true;
       http()
         .put("/updateChapters", updateData)
         .then((response) => {
           this.editChapterDetailDialog = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editLoading = false;
           // this.removeUpdatePoints();
           this.trigger = "reset";
           this.emptyPdf = "reset";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     save() {
       var updateData = {
         courseDetailId: this.editedCourse._id,
         courseId: this.editedCourse.courseId,
         classId: this.editedCourse.classId,
       };
       this.editLoading = true;
       http()
         .put("/updateCourseDetail", updateData)
         .then((response) => {
           this.getCourseDetailsList();
           this.editCourseDetailDialog = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editLoading = false;
           // this.editChapterPointName = "";
           this.editFiles = [];
         })
         .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addclass = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
         });
     },
     removeChapterPoint: function () {
       this.findsChapterPoint = [{ value: "" }];
     },
     removeAddFind: function () {
       this.finds = [{ value: "" }];
     },
     addFind: function () {
       this.finds.push({ value: "" });
     },
     addChapterPoint: function () {
       this.findsChapterPoint.push({ value: "" });
     },
     update: function () {
       this.updates.push({ value: "" });
     },
     // removeUpdatePoints: function() {
     //   this.updates = [{ value: "" }];
     // },
     deleteFind: function (index) {
       this.finds.splice(index, 1);
       if (index === 0) this.addFind();
     },
     deleteChapterPoint: function (index) {
       this.findsChapterPoint.splice(index, 1);
       if (index === 0) this.addChapterPoint();
     },
     deleteUpdate: function (index) {
       this.updates.splice(index, 1);
       if (index === 0) this.update();
     },
     deleteUrl: function (index, youTubelinkId, id) {
       this.editChapter.chapterPoints.splice(index, 1);
       if (index === 0) this.update();
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
   },
 };
 </script>

src/pages/Event/event.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  EVENT  ****** -->
     <v-dialog v-model="editEventdialog" max-width="500px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Event</label>
             <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Title:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-text-field
                   v-model="editedItem.title"
                   placeholder="fill your Title"
                   name="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">Date:</label>
               </v-flex>
               <v-flex xs7 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="editedItem.dateOfEvent"
                     placeholder="Select date"
                   ></v-text-field>
                   <v-date-picker
                     color="info"
                     ref="picker"
                     v-model="editedItem.dateOfEvent"
                     @input="$refs.menu.save(editedItem.dateOfEvent)"
                   ></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">Description:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-text-field
                   placeholder="fill your Description"
                   v-model="editedItem.description"
                   type="text"
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW EVENT  ******  -->
     <v-dialog v-model="viewEventdialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Event</label>
             <v-icon size="24" class="right" @click="viewEventdialog = 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>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</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.dateOfEvent) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ******  EVENT 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="addEventDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addEventDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
       </v-btn>
       <v-spacer></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-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="events" :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.title}}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
           <td class="td td-row text-xs-center">{{ props.item.description}}</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>
                 <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>
                 <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>
     <!-- ****** ADD MULTIPLE EVENT ****** -->
-    <v-dialog v-model="addEventDialog" max-width="500px">
+    <v-dialog v-model="addEventDialog" max-width="500px" v-if="addEventDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Event</label>
-            <v-icon size="24" class="right" @click="addEventDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddEventModel">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 xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     v-model="addEvent.title"
                     placeholder="fill your Title"
                     type="text"
                     :rules="titleRules"
                     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">Date:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-menu
                     ref="menu1"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="addEvent.dateOfEvent"
                     app
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       :rules="dateRules"
                       v-model="addEvent.dateOfEvent"
                       append-icon="event"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       color="info"
                       v-model="addEvent.dateOfEvent"
                       @input="$refs.menu1.save(addEvent.dateOfEvent)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="addEvent.description"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-layout class="right">
                   <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>
     <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,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     loading: false,
     date: null,
     search: "",
     color: "",
     show: true,
     addEventDialog: false,
     showSearch: false,
     showLoader: false,
     editEventdialog: false,
     viewEventdialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     date: null,
     menu1: false,
     menu: false,
-    titleRules: [v => !!v || " Tilte is required"],
+    titleRules: [(v) => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Discription is required"],
+    descriptionRules: [(v) => !!v || " Discription is required"],
-    dateRules: [v => !!v || "Date is required"],
+    dateRules: [(v) => !!v || "Date is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       { text: "Date", value: "date", sortable: false, align: "center" },
       {
         text: "Description",
         value: "description",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     events: [],
     editedIndex: -1,
     addEvent: {},
-    editedItem: {}
+    editedItem: {},
   }),
+  watch: {
+    addEventDialog: function (val) {
+      if (!val) {
+        this.addEvent = [];
+        this.menu1 = false;
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getEvents() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getSchoolEventsList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.events = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.events.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.schoolEventId = item._id;
       this.editEventdialog = true;
     },
     profile(item) {
       this.editedIndex = this.events.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewEventdialog = true;
     },
     deleteItem(item) {
       let deleteEvent = {
-        schoolEventId: item._id
+        schoolEventId: item._id,
       };
       http()
         .delete(
           "/deleteSchoolEvent",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteEvent
+            params: deleteEvent,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.getEvents();
           this.snackbar = true;
           this.color = "green";
           this.text = response.data.message;
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           this.loading = false;
         });
     },
     close() {
       this.editEventdialog = false;
     },
+    closeAddEventModel() {
+      this.addEventDialog = false;
+      this.addEvent = [];
+      this.menu1 = false;
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createSchoolEvent", this.addEvent)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getEvents();
             this.clear();
             this.loading = false;
             this.addEventDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       http()
         .put("/updateSchoolEvent", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getEvents();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getEvents();
-  }
+  },
 };
 </script>

src/pages/Exam/exam.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT EXAM ****** -->
     <v-dialog v-model="editExamDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Exam</label>
             <v-icon size="24" class="right" @click="editExamDialog = 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-text-field
                         placeholder="fill your Serial Number"
                         v-model="editedItem.examName"
                         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">Date:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-menu
                         ref="menu1"
                         :close-on-content-click="false"
                         v-model="menu1"
                         :nudge-right="40"
                         :return-value.sync="menu1"
                         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="menu1 = 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">Note:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your Serial Number"
                         v-model="editedItem.note"
                         type="text"
                       ></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="save" 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 PARTICULAR EXAM  ******  -->
     <v-dialog v-model="profileExamDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Exam</label>
             <v-icon size="24" class="right" @click="profileExamDialog = 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 xs6 sm4>
                     <h5 class="right my-1">
                       <b>Exam Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.examName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Note:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.note }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXAM 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="addExamDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addExamDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam
       </v-btn>
       <v-spacer></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-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="examData"
       :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.examName}}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
           <td class="td td-row text-xs-center">{{ props.item.note}}</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>
                 <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>
                 <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>
     <!-- ****** ADD EXAM ****** -->
-    <v-dialog v-model="addExamDialog" max-width="500px">
+    <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam</label>
             <v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = 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 xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only">Exam Name:</label>
                   <label
                     class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
                   >ExamName:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Exam Name"
                     :rules="authorRules"
                     v-model="addExam.examName"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Date:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-menu
                     ref="menu2"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="addExam.date"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addExam.date"
                       :rules="examDateRules"
                       label="Select Date"
                       append-icon="event"
                       readonly
                     ></v-text-field>
                     <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
-                  <v-text-field
+                  <v-text-field placeholder="fill your Note" v-model="addExam.note"></v-text-field>
-                    placeholder="fill your Note"
-                    v-model="addExam.note"
-                  ></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,
     menu1: false,
     menu2: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     libraryId: "",
     show: true,
     showSearch: false,
     addExamDialog: false,
     loading: false,
     loadingSearch: false,
     date: null,
     search: "",
     showLoader: false,
     editExamDialog: false,
     profileExamDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    libraryIDRules: [v => !!v || " Library ID is required"],
+    libraryIDRules: [(v) => !!v || " Library ID is required"],
-    bookRules: [v => !!v || " book Name is required"],
+    bookRules: [(v) => !!v || " book Name is required"],
-    authorRules: [v => !!v || "Author Name is required"],
+    authorRules: [(v) => !!v || "Author Name is required"],
-    subjectCodeRules: [v => !!v || "Subject Code is required"],
+    subjectCodeRules: [(v) => !!v || "Subject Code is required"],
-    authorRules: [v => !!v || "Author is required"],
+    authorRules: [(v) => !!v || "Author is required"],
-    examDateRules: [v => !!v || "Date is required"],
+    examDateRules: [(v) => !!v || "Date is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Exam Name", vaue: "examName", sortable: false, align: "center" },
       {
         text: "Date",
         value: "date",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Note",
         value: "note",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     examData: [],
     addExam: {},
     editedItem: {},
-    token: ""
+    token: "",
   }),
+  watch: {
+    addExamDialog: function (val) {
+      if (!val) {
+        this.addExam = [];
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.examData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.examData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editExamDialog = true;
     },
     profile(item) {
       this.editedIndex = this.examData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileExamDialog = true;
     },
     deleteItem(item) {
       let Exam = {
-        examId: item._id
+        examId: item._id,
       };
       http()
         .delete(
           "/deleteExam",
           confirm("Are you sure you want to Delete this?") && {
-            params: Exam
+            params: Exam,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully Delete Exam ";
           this.text = response.data.message;
           this.color = "green";
           this.getExamList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     close() {
       this.editExamDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createExam", this.addExam)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addExamDialog = false;
             this.getExamList();
             this.color = "success";
             this.loading = false;
             this.clear();
           })
-          .catch(error => {
+          .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;
     },
     save() {
       this.editedItem.examId = this.editedItem._id;
       http()
         .put("/updateExam", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getExamList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getExamList();

src/pages/Exam/examSchedule.vue

Diff comments View file @8e8d142

     <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit Exam Schedule****** -->
     <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>
       <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">
       <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-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-dialog v-model="addExamScheduleDialog" max-width="600" v-if="addExamScheduleDialog">
       <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-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
+      rowsPerPage: 10,
     },
-    examRules: [v => !!v || "Exam Name is required"],
+    examRules: [(v) => !!v || "Exam Name is required"],
-    classRules: [v => !!v || "Class Name is required"],
+    classRules: [(v) => !!v || "Class Name is required"],
-    sectionRules: [v => !!v || "section is required"],
+    sectionRules: [(v) => !!v || "section is required"],
-    subjectRules: [v => !!v || "Subject is required"],
+    subjectRules: [(v) => !!v || "Subject is required"],
-    timeInRules: [v => !!v || "Time In is required"],
+    timeInRules: [(v) => !!v || "Time In is required"],
-    timeOutRules: [v => !!v || "time Out s is required"],
+    timeOutRules: [(v) => !!v || "time Out s is required"],
-    roomRules: [v => !!v || "Room is required"],
+    roomRules: [(v) => !!v || "Room is required"],
-    examScheduleDateRules: [v => !!v || "Date is required"],
+    examScheduleDateRules: [(v) => !!v || "Date is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Exam Name",
         vaue: "examId.examName",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Class",
         value: "classId.classNum",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       // {
       //   text: "Section",
       //   value: "sectionId.name",
       //   sortable: false,
       //   align: "center"
       // },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Time",
         value: "timeFrom",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Room",
         value: "room",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     addSection: [],
     examList: [],
     subjects: [],
     addSchedule: {},
     editedItem: {
       sectionId: {
-        name: ""
+        name: "",
-      }
+      },
     },
     getScheduleData: {},
     ScheduleData: [],
-    token: ""
+    token: "",
   }),
+  watch: {
+    addExamScheduleDialog: function (val) {
+      if (!val) {
+        this.addSchedule = [];
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    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
+            sectionId: this.getScheduleData.sectionId,
           },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.ScheduleData = response.data.data;
           // console.log("this.ScheduleData", this.ScheduleData);
           this.showLoader = false;
         })
-        .catch(error => {
+        .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
+        scheduleId: item._id,
       };
       http()
         .delete(
           "/deleteSchedule",
           confirm("Are you sure you want to Delete this?") && {
-            params: deleteSchedule
+            params: deleteSchedule,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSchedulesList();
         })
-        .catch(error => {
+        .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 => {
+          .then((response) => {
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addExamScheduleDialog = false;
             this.getSchedulesList();
             this.clear();
           })
-          .catch(error => {
+          .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 => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully Edit Exam Schedule";
           this.color = "green";
           this.editExamScheduleDialog = false;
           this.getSchedulesList();
           this.close();
         })
-        .catch(error => {
+        .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 }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.classList = response.data.data;
         })
-        .catch(err => {
+        .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;
         }
       }
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
         })
-        .catch(err => {});
+        .catch((err) => {});
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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/Exam/grade.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT GRADE  ****** -->
     <v-dialog v-model="editGradeDialog" max-width="500px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Grade</label>
             <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>
           <v-container fluid>
             <v-layout wrap>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Grade Name:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       placeholder="fill your Grade Name"
                       v-model="editedItem.gradeName"
                       type="text"
                       :rules="editGradeName"
                     ></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">Grade Point:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       placeholder="fill your Grade Point"
                       v-model="editedItem.gradePoint"
                       :rules="editGradePoint"
                       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">Mark From:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       placeholder="fill your Mark From"
                       v-model="editedItem.marksFrom"
                       :rules="editMarksFrom"
                       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">Mark Upto:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       placeholder="fill your Mark From"
                       v-model="editedItem.marksUpTo"
                       :rules="editMarksUpTo"
                       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">Note:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       placeholder="fill your Serial Number"
                       v-model="editedItem.note"
                       type="text"
                     ></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="save" class="add-button">Save</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ******  -->
     <v-dialog v-model="viewGradeDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Grade</label>
             <v-icon size="24" class="right" @click="viewGradeDialog = 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>Grade Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.gradeName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Grade Point:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.gradePoint }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Mark From:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.marksFrom }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Mark Upto:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Note:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.note }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING GRADE 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="addGradeDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addGradeDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade
       </v-btn>
       <v-spacer></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-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="gradeData"
       :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.gradeName}}</td>
           <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>
           <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>
           <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>
           <td class="td td-row text-xs-center">{{ props.item.note }}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteGrade(props.item)"
                   class="mr-3"
                   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 GRADE ****** -->
-    <v-dialog v-model="addGradeDialog" max-width="500px">
+    <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Grade</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addGradeDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addGradeDialog = 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 sm4 class="pt-4 subheading">
                   <label class="right">Grade Name:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Grade Name"
                     :rules="gradeNameRules"
                     v-model="addGrade.gradeName"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Grade Point:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Grade Point"
                     v-model="addGrade.gradePoint"
                     :rules="gradePointRules"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Mark From:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Mark From"
                     :rules="markFromRules"
                     v-model="addGrade.marksFrom"
                     type="number"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Mark Upto:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Mark Upto"
                     :rules="markUptoRules"
                     v-model="addGrade.marksUpTo"
                     type="number"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 sm4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Note"
                     :rules="noteRules"
                     v-model="addGrade.note"
                     @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,
     menu1: false,
     menu2: false,
     addGradeDialog: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     show: true,
     showSearch: false,
     loading: false,
     loadingSearch: false,
     date: null,
     search: "",
     showLoader: false,
     editGradeDialog: false,
     viewGradeDialog: false,
     valid: true,
     validEditGrade: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    gradeNameRules: [v => !!v || "Grade Name is required"],
+    gradeNameRules: [(v) => !!v || "Grade Name is required"],
-    gradePointRules: [v => !!v || "Grade Point required"],
+    gradePointRules: [(v) => !!v || "Grade Point required"],
-    markFromRules: [v => !!v || "Mark From is required"],
+    markFromRules: [(v) => !!v || "Mark From is required"],
-    markUptoRules: [v => !!v || "Mark Upto is required"],
+    markUptoRules: [(v) => !!v || "Mark Upto is required"],
-    authorRules: [v => !!v || "Author is required"],
+    authorRules: [(v) => !!v || "Author is required"],
-    noteRules: [v => !!v || "Note is required"],
+    noteRules: [(v) => !!v || "Note is required"],
-    editGradeName: [v => !!v || "Grade Name is required"],
+    editGradeName: [(v) => !!v || "Grade Name is required"],
-    editGradeName: [v => !!v || "Grade Name is required"],
+    editGradeName: [(v) => !!v || "Grade Name is required"],
-    editGradePoint: [v => !!v || "Grade Point required"],
+    editGradePoint: [(v) => !!v || "Grade Point required"],
-    editMarksFrom: [v => !!v || "Mark From is required"],
+    editMarksFrom: [(v) => !!v || "Mark From is required"],
-    editMarksUpTo: [v => !!v || "Mark Upto is required"],
+    editMarksUpTo: [(v) => !!v || "Mark Upto is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Grade Name",
         vaue: "gradeName",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Grade Point",
         value: "gradePoint",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Mark From",
         value: "marksFrom",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Mark Upto",
         value: "marksUpTo",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Note",
         value: "note",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     gradeData: [],
     addGrade: {},
     editedItem: {},
-    token: ""
+    token: "",
   }),
+  watch: {
+    addGradeDialog: function (val) {
+      if (!val) {
+        this.addGrade = [];
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getGradeList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getGradesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.gradeData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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);
           }
         });
     },
     editItem(item) {
       console.log("item", item);
       this.editedIndex = this.gradeData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editGradeDialog = true;
     },
     profile(item) {
       this.editedIndex = this.gradeData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewGradeDialog = true;
     },
     deleteGrade(item) {
       let deleteGrade = {
-        gradeId: item._id
+        gradeId: item._id,
       };
       http()
         .delete(
           "/deleteGrade",
           confirm("Are you sure you want to Delete this?") && {
-            params: deleteGrade
+            params: deleteGrade,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getGradeList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.loading = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editGradeDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createGrade", this.addGrade)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addGradeDialog = false;
             this.loading = false;
             this.clear();
             this.getGradeList();
           })
-          .catch(error => {
+          .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;
     },
     save() {
       if (this.$refs.formEditGrade.validate()) {
         this.editedItem.gradeId = this.editedItem._id;
         http()
           .put("/updateGrade", this.editedItem)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getGradeList();
             this.close();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
           });
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getGradeList();
-  }
+  },
 };
 </script>

src/pages/Gallery/gallery.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  Gallery  ****** -->
     <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Gallery</label>
             <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout row>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
               <input
                 type="file"
                 style="display: none"
                 ref="editImage"
                 accept="image/*"
                 multiple
                 @change="editFilePicked"
               />
               <v-layout justify-center>
                 <v-flex
                   xs6
                   sm12
                   md3
                   v-for="Image in editedItem.imageUrl"
                   :key="Image._id"
                   v-if="editedItem.imageUrl"
                   class="profile-image-wrapper imgNews"
                 >
                   <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" />
                   <v-icon
                     class="red edit-profile-icon"
                     dark
                     @click="deleteImage(Image._id,editedItem._id)"
                   >close</v-icon>
                 </v-flex>
                 <v-flex v-for="(file, index) in editFiles" :key="index">
                   <img :src="file" height="160" width="160" class="pa-2" />
                 </v-flex>
               </v-layout>
               <img
                 src="/static/icon/user.png"
                 v-if="editedItem.imageUrl == '' && editFiles == ''"
                 height="160"
                 width="160"
                 alt="Gallery"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.title"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     required
                   ></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">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="editedItem.description"
                     type="text"
                     name="email"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <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="editedItem.classNum"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="editPickFile"
                     v-model="editImageName"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-flex xs12>
             <div
               v-for="(editImage,index) in editedItem.youTubeLinkUrl"
               :key="index"
               v-if="editImage.youTubeLink !=[]"
             >
               <v-layout wrap>
                 <v-flex xs12 sm12 md4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label>
                   <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label>
                 </v-flex>
                 <v-layout>
                   <v-flex xs10 sm10 sm5 md9 class="ml-3">
                     <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field>
                   </v-flex>
                   <v-flex xs2 class="pt-4">
                     <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon>
                   </v-flex>
                 </v-layout>
               </v-layout>
             </div>
           </v-flex>
           <v-flex xs12>
             <div v-for="(updateImage,index) in updates" :key="index">
               <v-layout wrap>
                 <v-flex xs12 sm12 md4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label>
                   <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label>
                 </v-flex>
                 <v-layout>
                   <v-flex xs10 sm12 md9 class="ml-3">
                     <v-text-field
                       v-model="updateImage.youTubeLink"
                       label="Upload new you tube link url"
                       required
                     ></v-text-field>
                   </v-flex>
                   <v-flex xs2 class="pt-4">
                     <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
                     <v-icon @click="update">add_circle</v-icon>
                   </v-flex>
                 </v-layout>
               </v-layout>
             </div>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="save"
                   :loading="editGalleryLoading"
                   class="add-button mr-4"
                 >Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="save"
                   :loading="editGalleryLoading"
                   class="add-button"
                 >Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE Gallery ******  -->
     <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Gallery</label>
             <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout row wrap>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
               <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
                 <img src="/static/icon/user.png" width="240" height="180" />
               </v-avatar>
               <span
                 v-for="(image,i) in editedItem.imageUrl"
                 :key="i"
                 class="mt-4 pa-2"
                 v-if="editedItem.imageUrl"
               >
                 <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" />
               </span>
             </v-flex>
           </v-layout>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>You Tube Link Url:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1 ml-3">
                       <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl">
                         <li>{{ youTubeLinkUrl.youTubeLink }}</li>
                       </ul>
                     </h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Gallery 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="addGalleryDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addGalleryDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery
       </v-btn>
       <v-spacer></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-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"
     >
       <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.title}}</td>
           <td class="td td-row text-xs-center">{{ props.item.description}}</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>
                 <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>
                 <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>
     <!-- ****** ADD Gallery  ****** -->
-    <v-dialog v-model="addGalleryDialog" max-width="600px">
+    <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Gallery</label>
-            <v-icon size="24" class="right" @click="addGalleryDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                 <input
                   type="file"
                   style="display: none"
                   ref="image"
                   accept="image/*"
                   multiple
                   @change="onFilePicked"
                 />
                 <v-layout justify-center>
                   <v-flex v-for="(file,index) in files" :key="index" v-if="files">
                     <img :src="file" height="150" width="150" />
                   </v-flex>
                 </v-layout>
                 <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" />
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     v-model="addGallery.title"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     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">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="addGallery.description"
                     type="text"
                     name="email"
                     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 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 md7 class="ml-3">
                   <v-select
                     :items="addclass"
                     label="Select Class"
                     v-model="addGallery.classNum"
                     item-text="classNum"
                     item-value="_id"
                     name="Select Class"
                     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">Uplaod Image:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickFile"
                     v-model="imageName"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <div v-for="(youTubeLink,index) in finds" :key="index">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">You Tube Url:</label>
                     </v-flex>
                     <v-flex xs8 sm8 md6 class="ml-3">
                       <v-text-field
                         placeholder="fill your youtube link"
                         v-model="youTubeLink.value"
                         type="text"
                         name="link"
                         required
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs2 class="pt-4">
                       <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
                       <v-icon @click="addFind">add_circle</v-icon>
                     </v-flex>
                   </v-layout>
                 </div>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
                   <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-layout>
               </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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     color: "",
     date: null,
     search: "",
     show: true,
     addGalleryDialog: false,
     showSearch: false,
     showLoader: false,
     editGalleryDialog: false,
     viewProfileGallery: false,
     valid: true,
     editGalleryLoading: false,
     addclass: [],
     addSection: [],
     finds: [{ value: "" }],
     updates: [{ youTubeLink: "" }],
     youTubeLink: {},
     addGallery: {
-      youTubeLinkUrl: []
+      youTubeLinkUrl: [],
     },
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageName: "",
     imageUrl: "",
     imageFile: "",
     image: [],
     upload: "",
     editImageName: "",
     editFiles: [],
     files: [],
     token: "",
-    titleRules: [v => !!v || " Tilte is required"],
+    titleRules: [(v) => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "index"
+        value: "index",
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "Description",
         value: "description",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     editedIndex: -1,
     editedItem: {},
-    index: ""
+    index: "",
   }),
+  watch: {
+    addGalleryDialog: function (val) {
+      if (!val) {
+        this.addGallery = [];
+        this.imageName = "";
+        this.youTubeLinkUrl = [];
+        this.youTubeLink = {};
+        this.index = "";
+        this.files = [];
+      }
+    },
+  },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     editPickFile() {
       this.$refs.editImage.click();
     },
     onFilePicked(e) {
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         this.files = [];
         // console.log("files", this.files);
         /** Select many image and showing many image add to Gallery card **/
         const test = Array.from(files).forEach((file, idx) => {
           const fr = new FileReader();
-          const getResult = new Promise(resolve => {
+          const getResult = new Promise((resolve) => {
-            fr.onload = e => {
+            fr.onload = (e) => {
               this.files.push(
                 // id: idx,
                 e.target.result
               );
             };
             console.log("uploadImage=======>", this.files);
           });
           fr.readAsDataURL(file);
-          return getResult.then(file => {
+          return getResult.then((file) => {
             return file;
           });
         });
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageFile = files; // this is an image file that can be sent to server...
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     editFilePicked(e) {
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.editImageName = files[0].name;
         if (this.editImageName.lastIndexOf(".") <= 0) {
           return;
         }
         /** Select many image and showing many image add to Gallery card **/
         const test = Array.from(files).forEach((file, idx) => {
           const fr = new FileReader();
-          const getResult = new Promise(resolve => {
+          const getResult = new Promise((resolve) => {
-            fr.onload = e => {
+            fr.onload = (e) => {
               this.editFiles.push(
                 // id: idx,
                 e.target.result
               );
             };
             console.log("uploadeditFilesImage=======>", this.editFiles);
           });
           fr.readAsDataURL(file);
-          return getResult.then(file => {
+          return getResult.then((file) => {
             return file;
           });
         });
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         // fr.addEventListener("load", () => {
         //   this.imageFile = files; // this is an image file that can be sent to server...
         // });
       } else {
         this.editImageName = "";
         this.editFiles = [];
       }
     },
     getGalleryList() {
       this.showLoader = true;
       http()
         .get("/getGalleryList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.files = [];
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editGalleryDialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewProfileGallery = true;
     },
     deleteItem(item) {
       let deleteGallery = {
-        galleryId: item._id
+        galleryId: item._id,
       };
       http()
         .delete(
           "/deleteGallery",
           confirm("Are you sure you want to delete this?") && {
             params: deleteGallery,
             headers: {
-              Authorization: "Bearer " + this.token
+              Authorization: "Bearer " + this.token,
-            }
+            },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Gallery";
           this.color = "green";
           this.getGalleryList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     deleteImage(imageId, id) {
       let deleteImages = {
         galleryId: id,
-        imageId: imageId
+        imageId: imageId,
       };
       http()
         .put("/deleteImage", deleteImages)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getGalleryList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editGalleryDialog = false;
     },
     closeProfileGallery() {
       this.viewProfileGallery = false;
     },
+    closeAddGalleryModel() {
+      this.addGalleryDialog = false;
+      this.addGallery = [];
+      this.imageName = "";
+      this.youTubeLinkUrl = [];
+      this.youTubeLink = {};
+      this.index = "";
+      this.files = [];
+    },
     submit() {
       for (let i = 0; i < this.finds.length; i++) {
         this.addGallery.youTubeLinkUrl.push(this.finds[i].value);
       }
       if (this.$refs.form.validate()) {
         if (this.files) {
           var ary = [];
           var imageData = [];
           ary = this.files;
           for (let i = 0; i < ary.length; i++) {
             const [baseUrl, imageUrl] = ary[i].split(/,/);
             imageData.push(imageUrl);
             this.addGallery.upload = imageData;
           }
         }
         if (this.addGallery.youTubeLinkUrl == "") {
           var galleryData = {
             classId: this.addGallery.classNum,
             title: this.addGallery.title,
             description: this.addGallery.description,
-            upload: this.addGallery.upload
+            upload: this.addGallery.upload,
           };
           this.loading = true;
           http()
             .post("/createGallery", galleryData)
-            .then(response => {
+            .then((response) => {
               this.getGalleryList();
               this.addGalleryDialog = false;
               this.loading = false;
               this.snackbar = true;
               this.text = response.data.message;
               this.color = "green";
               this.clear();
               this.files = "";
             })
-            .catch(error => {
+            .catch((error) => {
               this.snackbar = true;
               this.text = error.response.data.message;
               this.color = "error";
               this.loading = false;
             });
         } else if (this.addGallery.youTubeLinkUrl) {
           this.loading = true;
           http()
             .post("/createGallery", this.addGallery)
-            .then(response => {
+            .then((response) => {
               this.getGalleryList();
               this.addGalleryDialog = false;
               this.files = "nmn";
               this.loading = false;
               this.snackbar = true;
               this.color = "green";
               this.text = response.data.message;
               this.clear();
               this.removeAddFind();
               this.files = "";
             })
-            .catch(error => {
+            .catch((error) => {
               this.snackbar = true;
               this.text = error.response.data.message;
               this.loading = false;
               this.color = "error";
             });
         }
       }
     },
     clear() {
       this.$refs.form.reset();
       this.files = [];
     },
     save() {
       this.editedItem.gelleryId = this.editedItem._id;
       var linkUrl = [];
       for (let i = 0; i < this.updates.length; i++) {
         linkUrl.push(this.updates[i].youTubeLink);
       }
       if (this.editFiles) {
         var ary = [];
         var imageData = [];
         ary = this.editFiles;
         for (let i = 0; i < ary.length; i++) {
           const [baseUrl, imageUrl] = ary[i].split(/,/);
           imageData.push(imageUrl);
           this.editedItem.editFiles = imageData;
         }
       }
       if (linkUrl != "") {
         var updateData = {
           galleryId: this.editedItem._id,
           description: this.editedItem.description,
           classId: this.editedItem.classNum,
           uploadImage: this.editedItem.editFiles,
           title: this.editedItem.title,
-          updateYouTubeLinkUrl: linkUrl
+          updateYouTubeLinkUrl: linkUrl,
         };
       } else if (linkUrl == "") {
         var updateData = {
           galleryId: this.editedItem._id,
           description: this.editedItem.description,
           classId: this.editedItem.classNum,
           uploadImage: this.editedItem.editFiles,
-          title: this.editedItem.title
+          title: this.editedItem.title,
         };
       }
       this.editGalleryLoading = true;
       http()
         .put("/updateGallery", updateData)
-        .then(response => {
+        .then((response) => {
           this.getGalleryList();
           this.close();
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editGalleryLoading = false;
           this.editImageName = "";
           this.editFiles = [];
         })
-        .catch(error => {
+        .catch((error) => {
           this.editGalleryLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
         });
     },
-    removeAddFind: function() {
+    removeAddFind: function () {
       this.finds = [{ value: "" }];
     },
-    addFind: function() {
+    addFind: function () {
       this.finds.push({ value: "" });
     },
-    update: function() {
+    update: function () {
       this.updates.push({ youTubeLink: "" });
     },
-    deleteFind: function(index) {
+    deleteFind: function (index) {
       this.finds.splice(index, 1);
       if (index === 0) this.addFind();
     },
-    deleteUpdate: function(index) {
+    deleteUpdate: function (index) {
       this.updates.splice(index, 1);
       if (index === 0) this.update();
     },
-    deleteUrl: function(index, youTubelinkId, id) {
+    deleteUrl: function (index, youTubelinkId, id) {
       this.editedItem.youTubeLinkUrl.splice(index, 1);
       if (index === 0) this.update();
       let deleteYouTubeUrl = {
         galleryId: id,
-        youTubeId: youTubelinkId
+        youTubeId: youTubelinkId,
       };
       http()
         .put("/deleteYoutubeLink", deleteYouTubeUrl)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getGalleryList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
     this.getGalleryList();
-  }
+  },
 };
 </script>

src/pages/Holiday/holiday.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT HOLIDAY  ****** -->
     <v-dialog v-model="editHolidayDialog" max-width="500px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Holiday</label>
             <v-icon size="24" class="right" @click="editHolidayDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Occasion:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.occasion"
                   placeholder="fill your Occasion"
                   name="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">Date:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-menu
                   ref="menu"
                   :close-on-content-click="false"
                   :return-value.sync="editedItem.dateOfHoliday"
                   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="editedItem.dateOfHoliday"
                     append-icon="event"
                     placeholder="Select date"
                   ></v-text-field>
                   <v-date-picker
                     ref="picker"
                     color="info"
                     v-model="editedItem.dateOfHoliday"
                     @input="$refs.menu.save(editedItem.dateOfHoliday)"
                   ></v-date-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW Holiday DEATILS ******  -->
     <v-dialog v-model="viewHolidayDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Holiday</label>
             <v-icon size="24" class="right" @click="viewHolidayDialog = 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 xs4 sm6>
                     <h5 class="right my-1">
                       <b>Occasion:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.occasion }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ******  Holiday 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="addHolidayDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addHolidayDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday
       </v-btn>
       <v-spacer></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-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="holidays"
       :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">{{ props.item.occasion}}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</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>
                 <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>
                 <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>
     <!-- ****** ADD MULTIPLE Holiday ****** -->
-    <v-dialog v-model="addHolidayDialog" max-width="400px">
+    <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Holiday</label>
-            <v-icon size="24" class="right" @click="addHolidayDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeaddHolidayDialog">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 xs4 class="pt-4 subheading">
                   <label class="right">Occasion:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     v-model="addHoliday.occasion"
                     placeholder="fill your Occasion"
                     type="text"
                     :rules="occasionRules"
                     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">Date:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-menu
                     ref="menu1"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="addHoliday.dateOfHoliday"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       :rules="dateRules"
                       v-model="addHoliday.dateOfHoliday"
                       append-icon="event"
                       label="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       color="info"
                       v-model="addHoliday.dateOfHoliday"
                       @input="$refs.menu1.save(addHoliday.dateOfHoliday)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-layout class="right">
                   <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>
     <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,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     date: null,
     search: "",
     color: "",
     show: true,
     addHolidayDialog: false,
     showSearch: false,
     showLoader: false,
     editHolidayDialog: false,
     viewHolidayDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     date: null,
     menu1: false,
     menu: false,
-    occasionRules: [v => !!v || "Occasion is required"],
+    occasionRules: [(v) => !!v || "Occasion is required"],
-    dateRules: [v => !!v || "Date is required"],
+    dateRules: [(v) => !!v || "Date is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Occasion", value: "occasion", sortable: false, align: "center" },
       {
         text: "Date Of Holiday",
         value: "dateOfHoliday",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     holidays: [],
     editedIndex: -1,
     addHoliday: {},
-    editedItem: {}
+    editedItem: {},
   }),
+  watch: {
+    addHolidayDialog: function (val) {
+      if (!val) {
+        this.addHoliday = [];
+        this.menu1 = false;
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getHolidays() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getHolidaysList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.holidays = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.holidays.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.holidayId = item._id;
       this.editHolidayDialog = true;
     },
     profile(item) {
       this.editedIndex = this.holidays.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewHolidayDialog = true;
     },
     deleteItem(item) {
       let deleteHoliday = {
-        holidayId: item._id
+        holidayId: item._id,
       };
       http()
         .delete(
           "/deleteHoliday",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteHoliday
+            params: deleteHoliday,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getHolidays();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editHolidayDialog = false;
     },
+    closeaddHolidayDialog() {
+      this.addHolidayDialog = false;
+      this.addHoliday = [];
+      this.menu1 = false;
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createHoliday", this.addHoliday)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getHolidays();
             this.addHolidayDialog = false;
             this.clear();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.loading = false;
             this.color = "error";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       http()
         .put("/updateHoliday", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.getHolidays();
           this.color = "green";
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.loading = false;
           this.color = "error";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getHolidays();
-  }
+  },
 };
 </script>

src/pages/Library/books.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit  Member  ****** -->
     <v-dialog v-model="editBookDialog" max-width="500px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Book</label>
             <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container>
             <v-layout wrap justify-center>
               <v-flex xs12>
                 <v-form>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Name:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Author:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Subject Code:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field
                         v-model="editedItem.subjectCode"
                         placeholder="fill your  Subject Code"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Price:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field
                         v-model="editedItem.price"
                         placeholder="fill your  Subject Code"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Quantity:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field
                         v-model="editedItem.quantity"
                         type="number"
                         placeholder="fill your Quantity"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right pr-3">Rack No:</label>
                     </v-flex>
                     <v-flex xs8>
                       <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="save" class="add-button">Save</v-btn>
                     <v-spacer></v-spacer>
                   </v-card-actions>
                 </v-form>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW BOOKS DATA ******  -->
     <v-dialog v-model="viewBookDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Book</label>
             <v-icon size="24" class="right" @click="viewBookDialog = 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>Name :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Author :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.author }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Subject Code :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Price :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.price }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Quantity :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.quantity}}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Rack No :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.rackNo}}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** BOOKS 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="addBookDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addBookDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book
       </v-btn>
       <v-spacer></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-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="bookData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <td class="td td-row text-xs-center">{{ props.index + 1}}</td>
         <td class="td td-row text-xs-center">{{ props.item.name }}</td>
         <td class="td td-row text-xs-center">{{ props.item.author }}</td>
         <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td>
         <td class="td td-row text-xs-center">{{ props.item.price }}</td>
         <td class="td td-row text-xs-center">{{ props.item.quantity }}</td>
         <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td>
         <td class="td td-row text-xs-center">
           <span
             v-if="props.item.status === 'AVAILABLE'"
             class="green lighten-1 pa-1 px-2 white--text paymentStatus"
           >{{ props.item.status}}</span>
           <span
             v-if="props.item.status === 'UNAVAILABLE'"
             class="red lighten-1 pa-1 px-2 white--text paymentStatus"
           >{{ props.item.status}}</span>
         </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>
               <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="deleteItem(props.item)"
                 src="/static/icon/delete.png"
               />
               <span>Delete</span>
             </v-tooltip>
           </span>
         </td>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD BOOK ****** -->
-    <v-dialog v-model="addBookDialog" max-width="600px">
+    <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Book</label>
             <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12 class="mt-4">
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Name:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.name"
                       placeholder="fill your Name"
                       type="text"
                       :rules="nameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Author:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.author"
                       placeholder="fill your Author Name"
                       type="text"
                       :rules="authorRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Subject Code:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.subjectCode"
                       placeholder="fill your Subject Code"
                       type="text"
                       :rules="subjectRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Price:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.price"
                       placeholder="fill your Price"
                       :rules="priceRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Quantity:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.quantity"
                       placeholder="fill your Quantity"
                       :rules="quantityRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Rack No:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="BooksData.rackNo"
                       placeholder="fill your Rack No"
                       :rules="rackNoRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12>
                     <v-card-actions>
                       <v-spacer></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-form>
             </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 Util from "@/util";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     editBookDialog: false,
     viewBookDialog: false,
     valid: true,
     validEdit: true,
     addBookDialog: false,
     pagination: {
       rowsPerPage: 10,
     },
     nameRules: [(v) => !!v || " Name is required"],
     authorRules: [(v) => !!v || "Author Name Monthly"],
     subjectRules: [(v) => !!v || "Subject Code  is required"],
     priceRules: [(v) => !!v || "Price  is required"],
     quantityRules: [(v) => !!v || "Quantity  is required"],
     rackNoRules: [(v) => !!v || "Rack No.  is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Name",
         value: "name",
         sortable: false,
         align: "center",
       },
       { text: "Authour", value: "author", sortable: false, align: "center" },
       {
         text: "Subject Code",
         value: "subjectCode",
         sortable: false,
         align: "center",
       },
       { text: "Price", value: "price", sortable: false, align: "center" },
       { text: "Quantity", value: "quantity", sortable: false, align: "center" },
       { text: "Rack No", value: "rackNo", sortable: false, align: "center" },
       { text: "Status", value: "status", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     bookData: [],
     select: "",
     token: "",
     editedItem: {},
     BooksData: {},
   }),
+  watch: {
+    addBookDialog: function (val) {
+      if (!val) {
+        this.BooksData = [];
+      }
+    },
+  },
   methods: {
     getBookData() {
       this.showLoader = true;
       http()
         .get("/getBooksList", {
           params: {
             schoolId: this.$store.state.schoolId,
           },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.bookData = 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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.bookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       console.log(this.editedItem);
       this.editBookDialog = true;
     },
     profile(item) {
       this.editedIndex = this.bookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewBookDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         bookId: item._id,
       };
       http()
         .delete(
           "/deleteBook",
           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.getBookData();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     closeEditProfile() {
       this.editBookDialog = false;
     },
     close2() {
       this.dialog2 = false;
     },
     submit() {
       this.BooksData.quantity = Number(this.BooksData.quantity);
       this.BooksData.schoolId = this.$store.state.schoolId;
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createBook", this.BooksData)
           .then((response) => {
             this.getBookData();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addBookDialog = false;
             this.clear();
             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();
     },
     save() {
       this.editedItem.bookId = this.editedItem._id;
       http()
         .put("/updateBook", this.editedItem)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getBookData();
           this.closeEditProfile();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           // console.log(error);
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getBookData();
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Library/eBook.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS EBOOK DETAILS ****** -->
     <v-dialog v-model="editEbookDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit E-Book</label>
             <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
             <input
               type="file"
               style="display: none"
               ref="editImage"
               accept="image/*"
               @change="onEditImagePicked"
             />
             <img
               v-if="editedItem.coverPhotoUrl"
               :src="editedItem.coverPhotoUrl"
               height="160"
               width="160"
               alt="eBooks"
               class="pa-2"
             />
             <img
               src="/static/icon/user.png"
               v-if="editedItem.coverPhotoUrl == ''"
               height="160"
               width="160"
               alt="Books"
             />
           </v-flex>
           <v-container grid-list-md>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">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-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Author :</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.author"
                     placeholder="fill your full author"
                     name="name"
                     type="text"
                     required
                   ></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 hidden-xs-only hidden-sm-only">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
                     v-model="editedItem.classId"
                     :items="addClass"
                     label="Select Class"
                     item-text="classNum"
                     item-value="_id"
                     type="_id"
                     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">Upload Image :</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="editPickImage"
                     v-model="editImageName"
                     append-icon="attach_file"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload File:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <input
                     type="file"
                     style="display: none"
                     ref="editFile"
                     @change="onEditFilePicked"
                   />
                   <v-text-field
                     label="Select File"
                     @click="editPickFile"
                     v-model="editFileName"
                     append-icon="attach_file"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
               <v-spacer></v-spacer>
             </v-card-actions>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW ALL NEWS DEATILS ******  -->
     <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View E-book</label>
             <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-layout>
           <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.coverPhotoUrl" />
               <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" />
             </v-avatar>
           </v-flex>
         </v-layout>
         <v-container grid-list-md>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs6 sm6>
                   <h5 class="right my-1">
                     <b>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 sm12>
               <v-layout>
                 <v-flex xs6 sm6>
                   <h5 class="right my-1">
                     <b>Author:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs6>
                   <h5 class="my-1 left">{{ editedItem.author }}</h5>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs6 sm6>
                 <h5 class="right my-1">
                   <b>Class:</b>
                 </h5>
               </v-flex>
               <v-flex sm6 xs6>
                 <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5>
               </v-flex>
             </v-layout>
           </v-flex>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USERS NEWS 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="addEBookDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addEBookDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book
       </v-btn>
       <v-spacer></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-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="eBookData"
       :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.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" />
               <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" />
             </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.author}}</td>
           <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</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>
                 <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="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>
     <!-- ****** ADD MULTIPLE E-BOOK ****** -->
-    <v-dialog v-model="addEBookDialog" max-width="600px">
+    <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add E-Book</label>
-            <v-icon size="24" class="right" @click="addEBookDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                 <input
                   type="file"
                   style="display: none"
                   ref="image"
                   accept="image/*"
                   @change="onImagePicked"
                 />
                 <v-layout justify-center>
                   <v-flex v-if="files != ''">
                     <img :src="files" height="150" width="150" />
                   </v-flex>
                 </v-layout>
                 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" />
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="addEBooks.name"
                     placeholder="fill name"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     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">Author:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="addEBooks.author"
                     placeholder="fill your Author Name"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     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">Class:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-select
                     v-model="addEBooks.classId"
                     :items="addClass"
                     label="Select Class"
                     item-text="classNum"
                     item-value="_id"
                     :rules="titleRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload Image:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickImage"
                     v-model="imageName"
                     :rules="uploadImageRule"
                     append-icon="attach_file"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload File:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <input type="file" style="display: none" ref="file" @change="onFilePicked" />
                   <v-text-field
                     label="Select File"
                     @click="pickFile"
                     v-model="fileName"
                     :rules="uploadFileRule"
                     append-icon="attach_file"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-3 subheading">
                   <label class="right">Private:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer></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>
     <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",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     loading: false,
     loadingUpadte: false,
     date: null,
     search: "",
     showLoader: false,
     editEbookDialog: false,
     viewEbookDialog: false,
     valid: true,
     addEBookDialog: false,
     editLoading: false,
     addClass: [],
     addSection: [],
     pagination: {
       rowsPerPage: 10,
     },
     imageName: "",
     fileName: "",
     imageUrl: "",
     imageFile: "",
     image: [],
     upload: "",
     files: "",
     anyFile: "",
     titleRules: [(v) => !!v || " Tilte is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     uploadImageRule: [(v) => !!v || " field is required"],
     uploadFileRule: [(v) => !!v || " fied is required"],
     uploadPrivateRule: [(v) => !!v || " fied is required"],
     headers: [
       {
         align: "left",
         text: "No",
         sortable: false,
         value: "No",
       },
       { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
       { text: "Name", vaue: "name", sortable: false, align: "center" },
       { text: "Author", value: "author", sortable: false, align: "center" },
       {
         text: "Class",
         value: "classId",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     eBookData: [],
     editedIndex: -1,
     addEBooks: {
       private: false,
     },
     editedItem: {},
     editedItem: {
       classId: {
         classNum: "",
       },
     },
     token: "",
     uploadCover: {},
     editImageName: "",
     editFiles: "",
     editAnyFile: "",
     editFileName: "",
   }),
+  watch: {
+    addEBookDialog: function (val) {
+      if (!val) {
+        this.addEBooks = [];
+        this.imageName = "";
+        this.fileName = "";
+        this.files = "";
+      }
+    },
+  },
   methods: {
     editPickImage() {
       this.$refs.editImage.click();
     },
     pickImage() {
       this.$refs.image.click();
     },
     pickFile() {
       this.$refs.file.click();
     },
     editPickFile() {
       this.$refs.editFile.click();
     },
     onImagePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         /** Select many image and showing many image add to news card **/
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.files = fr.result;
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.files = "";
         this.imageUrl = "";
       }
     },
     onEditImagePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.editImageName = files[0].name;
         if (this.editImageName.lastIndexOf(".") <= 0) {
           return;
         }
         /** Select many image and showing many image add to news card **/
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.editFiles = fr.result;
         });
       } else {
         this.editImageName = "";
         this.editFiles = "";
       }
     },
     getEBooksList() {
       this.showLoader = true;
       http()
         .get("/getEBooksList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.eBookData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.fileName = files[0].name;
         if (this.fileName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.anyFile = fr.result;
           // console.log(" this.anyFile Url", this.anyFile )
         });
       } else {
         this.anyFile = "";
         this.fileName = "";
       }
     },
     onEditFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.editFileName = files[0].name;
         if (this.editFileName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.editAnyFile = fr.result;
           // console.log(" this.anyFile Url", this.anyFile )
         });
       } else {
         this.editAnyFile = "";
         this.editFileName = "";
       }
     },
     editItem(item) {
       this.files = [];
       this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.className = item.classId.classNum;
       this.editEbookDialog = true;
     },
     profile(item) {
       this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewEbookDialog = true;
     },
     deleteItem(item) {
       let deleteEBooks = {
         ebookId: item._id,
       };
       http()
         .delete(
           "/deleteEBook",
           confirm("Are you sure you want to delete this?") && {
             params: deleteEBooks,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing News";
           this.getEBooksList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editEbookDialog = false;
     },
     close1() {
       this.viewEbookDialog = false;
     },
+    closeAddEBookModel() {
+      this.addEBookDialog = false;
+      this.eBookData = [];
+      this.addEBooks = [];
+      this.imageName = "";
+      this.fileName = "";
+      this.files = "";
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         var uploadCover = "";
         var uploadFile = "";
         if (this.files) {
           const [baseUrl, imageUrl] = this.files.split(/,/);
           uploadCover = imageUrl;
           console.log("anyFile.split(/,/)", uploadCover);
         }
         if (this.anyFile) {
           const [baseUrl, fileUrl] = this.anyFile.split(/,/);
           uploadFile = fileUrl;
           console.log("anyFile.split(/,/)", uploadFile);
         }
         let data = {
           classId: this.addEBooks.classId,
           name: this.addEBooks.name,
           author: this.addEBooks.author,
           private: this.addEBooks.private,
           uploadCover: uploadCover,
           uploadFile: uploadFile,
         };
         http()
           .post("/createEBook", data)
           .then((response) => {
             this.getEBooksList();
             // this.getEBooksList = [];
             this.addEBookDialog = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.loading = false;
             (this.imageName = ""), (this.fileName = "");
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.addEBooks.uploadCover = "";
       this.files = "";
     },
     save() {
       this.editLoading = true;
       this.loadingUpadte = true;
       if (this.editFiles) {
         const [baseUrl, imageUrl] = this.editFiles.split(/,/);
         this.editedItem.uploadCover = imageUrl;
         // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
       }
       if (this.editAnyFile) {
         const [baseUrl, fileUrl] = this.editAnyFile.split(/,/);
         this.editedItem.uploadFile = fileUrl;
         // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
       }
       if (this.editedItem.classId._id) {
         this.editedItem.classId = this.editedItem.classId._id;
       }
       this.editedItem.ebookId = this.editedItem._id;
       console.log("this.editedItem", this.editedItem);
       http()
         .put("/updateEBook", this.editedItem)
         .then((response) => {
           this.loadingUpadte = false;
           this.snackbar = true;
           this.text = "Successfully Edit Existing E-Book";
           this.getEBooksList();
           this.editLoading = false;
           this.editedItem.uploadFile = "";
           this.editedItem.uploadCover = "";
           this.anyFile = "";
           this.files = "";
           this.close();
         })
         .catch((error) => {
           this.editLoading = false;
           this.loadingUpadte = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           // console.log(error);
         });
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addClass = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getEBooksList();
     this.getAllClass();
     this.role = this.$store.state.role;
     // this.getBookData();
     // this.editItem;
   },
 };
 </script>

src/pages/Library/issue.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT ISSUE  ****** -->
     <v-dialog v-model="editIssueDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Issue</label>
             <v-icon size="24" class="right" @click="editIssueDialog = 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">Library Id:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         v-model="editedItem.libraryId"
                         placeholder="fill your Library Id"
                         name="name"
                         type="text"
                         disabled
                       ></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">Book:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-select
                         v-model="editedItem.bookId"
                         label="Select Book Name"
                         :rules="bookRules"
                         :items="books"
                         item-text="name"
                         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">Author:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your Author Name"
                         v-model="editedItem.author"
                         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">Subject Code:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your Subject Codes"
                         v-model="editedItem.subjectCode"
                         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">Serial Number:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your Serial Number"
                         v-model="editedItem.serialNumber"
                         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">due Date:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-menu
                         ref="menu1"
                         :close-on-content-click="false"
                         v-model="menu1"
                         :nudge-right="40"
                         :return-value.sync="menu1"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.dueDate"
                           label="Select Due Date"
                           append-icon="event"
                           readonly
                         ></v-text-field>
                         <v-date-picker v-model="editedItem.dueDate" @input="menu1 = 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">Note:</label>
                     </v-flex>
                     <v-flex xs7 class="ml-3">
                       <v-text-field
                         placeholder="fill your Serial Number"
                         v-model="editedItem.note"
                         type="text"
                       ></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="save" 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 PARTICULAR ISSUE DATA ******  -->
     <v-dialog v-model="viewIssueDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Issue</label>
             <v-icon size="24" class="right" @click="viewIssueDialog = 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>Book:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Serial Number:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.serialNumber }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Issue date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.creted) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Due date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Status:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.status }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING ISSUE TABLE****** -->
     <!-- <v-card>
       <v-layout>
         <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only">
           <label class="right pt-4">Library ID:</label>
         </v-flex>
         <v-flex lg2 md3 xs7>
           <v-text-field
             class="pl-3"
             @keyup.enter="getIssueList"
             v-model="libraryId"
             placeholder="fill your library Id"
           ></v-text-field>
         </v-flex>
         <v-flex lg9 md3 xs5>
           <v-btn
             round
             class="black mt-1 right hidden-xs-only"
             @click="getIssueList"
             :loading="loadingSearch"
             dark
           >Search</v-btn>
           <v-btn
             round
             class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
             :loading="loadingSearch"
             @click="getIssueList"
             small
             dark
           >Search</v-btn>
         </v-flex>
       </v-layout>
     </v-card>-->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addIssueDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addIssueDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue
       </v-btn>
       <v-flex lg2 md3 xs7>
         <v-text-field
           class="pl-3"
           @keyup.enter="getIssueList"
           v-model="libraryId"
           placeholder="fill your library Id"
         ></v-text-field>
       </v-flex>
       <v-spacer></v-spacer>
       <v-btn
         round
         class="add-button mt-1 right hidden-xs-only"
         @click="getIssueList"
         :loading="loadingSearch"
         dark
       >Search</v-btn>
       <v-btn
         round
         class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only"
         :loading="loadingSearch"
         @click="getIssueList"
         small
         dark
       >Search</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-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"
     >
       <template slot="items" slot-scope="props" v-if="props.item.isReturn != true">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td>
           <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td>
           <td class="text-xs-center td td-row">
             <span
               v-if="props.item.bookId.status === 'AVAILABLE'"
               class="green lighten-1 pa-1 px-2 white--text paymentStatus"
             >{{ props.item.bookId.status}}</span>
             <span
               v-if="props.item.bookId.status === 'UNAVAILABLE'"
               class="red lighten-1 pa-1 px-2 white--text paymentStatus"
             >{{ props.item.bookId.status}}</span>
           </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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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>
     <!-- ****** ADD Issue ****** -->
-    <v-dialog v-model="addIssueDialog" max-width="600px">
+    <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Issue</label>
-            <v-icon size="24" class="right" @click="addIssueDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddIssueModel">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 xs4 class="pt-4 subheading">
                   <label class="right">Library ID:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="libraryID"
                     placeholder="fill your Library ID"
                     :rules="libraryIDRules"
                     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">Book:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-select
                     label="Select Book Name"
                     :rules="bookRules"
                     :items="books"
                     item-text="name"
                     item-value="_id"
                     v-model="bookId"
                     @change="getParticularBookData(bookId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Author:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Author"
                     :rules="authorRules"
                     v-model="addIssue.author"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Subject Code:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Subject Code"
                     :rules="subjectCodeRules"
                     v-model="addIssue.subjectCode"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Serial No:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Serial No"
                     :rules="authorRules"
                     v-model="serialNo"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Due Date:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-menu
                     ref="menu2"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="date"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="date"
                       label="Select Due Date"
                       append-icon="event"
                       :rules="dueDateRule"
                       readonly
                     ></v-text-field>
                     <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Note:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field placeholder="fill your Note" :rules="noteRules" v-model="note"></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer></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"
                     :disabled="disable"
                   >Add</v-btn>
                 </v-card-actions>
               </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: () => ({
     snackbar: false,
     date: null,
     menu1: false,
     menu2: false,
     color: "",
     show: true,
     showSearch: false,
     dueDate: null,
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     libraryId: "",
     loading: false,
     loadingSearch: false,
     date: null,
     search: "",
     addIssueDialog: false,
     viewIssueDialog: false,
     showLoader: false,
     editIssueDialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     addclass: [],
     addSection: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    libraryIDRules: [v => !!v || " Library ID is required"],
+    libraryIDRules: [(v) => !!v || " Library ID is required"],
-    bookRules: [v => !!v || " book Name is required"],
+    bookRules: [(v) => !!v || " book Name is required"],
-    authorRules: [v => !!v || "Author Name is required"],
+    authorRules: [(v) => !!v || "Author Name is required"],
-    subjectCodeRules: [v => !!v || "Subject Code is required"],
+    subjectCodeRules: [(v) => !!v || "Subject Code is required"],
-    authorRules: [v => !!v || "Author is required"],
+    authorRules: [(v) => !!v || "Author is required"],
-    noteRules: [v => !!v || "Note is required"],
+    noteRules: [(v) => !!v || "Note is required"],
-    dueDateRule: [v => !!v || "Due Date is required"],
+    dueDateRule: [(v) => !!v || "Due Date is required"],
     headers: [
       {
         align: "justify-center",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Book", vaue: "name", sortable: false, align: "center" },
       {
         text: "Serial Number",
         value: "serialNumber",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Issue Date",
         value: "created",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Due Date",
         value: "dueDate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Status",
         value: "status",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     addIssue: {},
     bookId: "",
     libraryID: "",
     serialNo: "",
     note: "",
     editedItem: {},
     books: [],
     token: "",
-    disable: false
+    disable: false,
   }),
+  watch: {
+    addIssueDialog: function (val) {
+      if (!val) {
+        this.addIssue = [];
+        this.libraryID = "";
+        this.bookId = "";
+        this.serialNo = "";
+        this.menu2 = false;
+        this.date = null;
+        this.note = "";
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getIssueList() {
       this.showLoader = true;
       this.loadingSearch = true;
       if (this.libraryID) {
         this.libraryId = this.libraryID;
       }
       http()
         .get(
           "/getBooksIssueList",
           {
             params: {
               libraryId: this.libraryId,
-              schoolId: this.$store.state.schoolId
+              schoolId: this.$store.state.schoolId,
-            }
+            },
           },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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);
             this.$store.dispatch("Role", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.name = item.bookId.name;
       this.editedItem.status = item.bookId.status;
       this.editedItem.dueDate =
         this.editedItem.dueDate != undefined
           ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10))
           : (this.editedItem.dueDate = "");
       this.editIssueDialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.name = item.bookId.name;
       this.editedItem.status = item.bookId.status;
       this.viewIssueDialog = true;
     },
     deleteItem(item) {
       let deleteParticularIssue = {
-        bookIssueId: item._id
+        bookIssueId: item._id,
       };
       http()
         .delete(
           "/deleteBookIssue",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteParticularIssue
+            params: deleteParticularIssue,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Delete Successfully";
           this.getIssueList();
           if (this.libraryID) {
             this.libraryId = this.libraryID;
           }
           if (this.libraryId) {
             this.libraryId = this.libraryId;
           }
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.loading = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     returnBook(item) {
       let returnBook = {
-        bookIssueId: item._id
+        bookIssueId: item._id,
       };
       http()
         .put(
           "/returnBook",
           confirm("Are you sure you want to return this?") && returnBook
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully return Issue a Book ";
           this.getIssueList();
         })
-        .catch(error => {});
+        .catch((error) => {});
     },
     close() {
       this.editIssueDialog = false;
     },
     close1() {
       this.viewIssueDialog = false;
     },
+    closeAddIssueModel() {
+      this.addIssueDialog = false;
+      this.desserts = [];
+      this.addIssue = [];
+      this.libraryID = "";
+      this.bookId = "";
+      this.serialNo = "";
+      this.menu2 = false;
+      this.date = null;
+      this.note = "";
+    },
     submit() {
       if (this.$refs.form.validate()) {
         let createBook = {
           bookId: this.bookId,
           author: this.addIssue.author,
           subjectCode: this.addIssue.subjectCode,
           libraryId: this.libraryID,
           serialNumber: this.serialNo,
           note: this.note,
           dueDate: this.date,
-          schoolId: this.$store.state.schoolId
+          schoolId: this.$store.state.schoolId,
         };
         this.loading = true;
         http()
           .post("/createBookIssue", createBook)
-          .then(response => {
+          .then((response) => {
             this.getIssueList();
             this.snackbar = true;
             this.text = response.data.message;
             this.addIssueDialog = false;
             this.color = "green";
             this.loading = false;
             this.clear();
           })
-          .catch(error => {
+          .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;
     },
     save() {
       this.editedItem.bookIssueId = this.editedItem._id;
       this.editedItem.bookId = this.editedItem.bookId;
       http()
         .put("/updateBookIssue", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.editIssueDialog = false;
           this.snackbar = true;
           this.text = "Successfully Edit Issue a Book";
           this.color = "green";
           this.getIssueList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     getBookData() {
       this.showLoader = true;
       http()
         .get("/getBooksList", {
           params: {
-            schoolId: this.$store.state.schoolId
+            schoolId: this.$store.state.schoolId,
           },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.books = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getParticularBookData(books) {
       for (let i = 0; i < this.books.length; i++) {
         if (books == this.books[i]._id) {
           if (this.books[i].remaining <= 0) {
             this.snackbar = true;
             this.text = "Book is unavailable";
             this.color = "red";
             this.disable = true;
           } else if (this.books[i].remaining > 0) {
             this.disable = false;
           }
           this.addIssue = {
             author: this.books[i].author,
-            subjectCode: this.books[i].subjectCode
+            subjectCode: this.books[i].subjectCode,
           };
         }
       }
       this.addIssue.boojk = books;
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getBookData();
-  }
+  },
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/pages/Library/member.vue

Diff comments View file @8e8d142

 <template>
   <div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ******  -->
     <v-dialog v-model="dialogStudents" max-width="1100px" scrollable>
       <v-card>
         <v-toolbar dark class="card-styles" flat>
           <v-spacer></v-spacer>
           <v-toolbar-title>Student Profile</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-icon @click="closeViewStudent">close</v-icon>
         </v-toolbar>
         <v-card-text style="height: 700px;">
           <v-flex align-center justify-center layout text-xs-center class="mt-3">
             <v-avatar size="160px">
               <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>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <h5 class="right my-1">
                           <b>Full Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Gender:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>D.O.B:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Blood Group:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Allergies:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.allergies }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Height:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.height }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>City:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.city }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Pincode:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <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 sm6>
                     <v-layout>
                       <v-flex sm5 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 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Library ID :</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.libraryId }}</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>Library Fee:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.libraryFee }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Academic Year:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <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>Medical Notes:</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 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Roll No. :</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <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="my-1 right">
                             <b>present Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>present Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- Edit Student Library Member Dialog -->
     <v-dialog v-model="editStudentdialog" max-width="600px" scrollable>
       <v-card flat>
         <v-toolbar dark class="card-styles" flat>
           <v-spacer></v-spacer>
           <v-toolbar-title>
             <h3>Edit Student Profile</h3>
           </v-toolbar-title>
           <v-spacer></v-spacer>
         </v-toolbar>
         <v-card-text style="height: 426px;">
           <v-form ref="form">
             <v-container fluid>
               <v-layout>
                 <v-flex
                   xs12
                   class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
                 >
                   <v-avatar size="160px">
                     <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
                     <img
                       :src="editedItem.profilePicUrl"
                       v-else-if="editedItem.profilePicUrl && !imageUrl"
                     />
                     <img
                       v-if="imageUrl"
                       :src="imageUrl"
                       height="150"
                       style="border-radius:50%; width:200px"
                     />
                   </v-avatar>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm12 md10>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.libraryId"
                         placeholder="fill your Library ID"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12 md10>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.libraryFee"
                         placeholder="fill your Library Fee"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
-                  <v-layout>
+                  <v-layout class="right">
                     <v-flex xs6>
-                      <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn>
+                      <v-btn
+                        round
+                        dark
+                        class="clear-button"
+                        @click.native="closeEditStudentDialog"
+                      >Cancel</v-btn>
                     </v-flex>
                     <v-flex xs6>
-                      <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
+                      <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- Add Student Library Member Dialog -->
-    <v-dialog v-model="addLibrary" max-width="600px">
+    <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary">
-      <v-toolbar dark class="card-styles" flat>
+      <v-card flat class="card-style pa-2" dark>
-        <v-spacer></v-spacer>
+        <v-layout>
-        <v-toolbar-title>
+          <v-flex xs12>
-          <h3>Library Member</h3>
+            <label class="title text-xs-center">Library Member</label>
-        </v-toolbar-title>
+            <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon>
-        <v-spacer></v-spacer>
+          </v-flex>
-      </v-toolbar>
+        </v-layout>
-      <v-card>
         <v-card-text>
           <v-layout wrap justify-center>
             <v-flex xs12 sm12 md10>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right pr-3">Library Id:</label>
                   </v-flex>
                   <v-flex xs8>
                     <v-text-field
                       v-model="addBook.libraryId"
                       :rules="libraryIdRules"
                       type="number"
                       placeholder="fill your Library ID"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right pr-3">Library Fee:</label>
                   </v-flex>
                   <v-flex xs8>
                     <v-text-field
                       v-model="addBook.libraryFee"
                       type="number"
                       :rules="libraryFeeRules"
                       placeholder="fill your Library Fee"
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
-                <v-card-actions>
+                <v-layout>
-                  <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn>
+                  <v-flex xs12 sm12>
-                  <v-spacer></v-spacer>
+                    <v-layout class="right">
-                  <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn>
+                      <v-btn
-                </v-card-actions>
+                        round
+                        dark
+                        class="clear-button"
+                        @click.native="addLibrary = false"
+                      >Cancel</v-btn>
+                      <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
               </v-form>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING MEMBER TABLE ****** -->
     <v-card flat>
       <!-- <h4
         class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
       >Library Member</h4>-->
       <v-card-actions>
         <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> -->
         <v-spacer></v-spacer>
         <v-flex xs12 sm4 md2>
           <v-select
             outline
             small
             :items="addclass"
             label="Select Class"
             v-model="selectStudents"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getAllStudents(selectStudents)"
             class="px-2"
             required
           ></v-select>
         </v-flex>
       </v-card-actions>
     </v-card>
     <v-card class="transparent">
       <v-data-table
         :headers="headers"
         :items="studentData"
         :pagination.sync="pagination"
         :search="search"
       >
         <template slot="items" slot-scope="props">
           <tr class="tr">
             <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
             <td class="td td-row text-xs-center">
               <v-avatar>
                 <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">
               <v-tooltip top>
                 <img
                   slot="activator"
                   v-if="!props.item.libraryId"
                   style="cursor:pointer; width:25px; height:18px; "
                   @click="addLibraryData(props.item)"
                   src="/static/icon/add.png"
                 />
                 <span>Add</span>
               </v-tooltip>
               <span v-if="props.item.libraryId">
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.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>
     </v-card>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </div>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     addLibrary: false,
     dialogStudents: false,
     editStudentdialog: false,
     valid: true,
     libraryIdRules: [(v) => !!v || "Library Id Fee is required"],
     libraryFeeRules: [(v) => !!v || "Library Fee is required"],
     date: null,
     search: "",
     addclass: [],
     pagination: {
       rowsPerPage: 15,
     },
     addBook: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "index",
       },
       {
         text: "Photo",
         value: "uploadCover",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "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" },
     ],
     studentData: [],
     editedItem: {},
     parentId: "",
     token: "",
     selectStudents: {},
     editedIndex: -1,
   }),
+  watch: {
+    addLibrary: function (val) {
+      if (!val) {
+        this.addBook = [];
+      }
+    },
+  },
   methods: {
     getAllStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentsList", {
           params: {
             classId: this.selectStudents,
             schoolId: this.$store.state.schoolId,
           },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.studentData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
     addLibraryData(item) {
       this.addBook.studentId = item._id;
       this.addLibrary = true;
     },
     editItem(item) {
       this.editedIndex = this.studentData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editStudentdialog = true;
     },
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     profile(item) {
       console.log("item", item);
       this.editedIndex = this.studentData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialogStudents = true;
     },
     deleteItem(item) {
       let deleteStudentLibraryData = {
         studentId: item._id,
         libraryId: item.libraryId,
       };
       http()
         .put(
           "/deleteLibrary",
           confirm("Are you sure you want to delete this?") &&
             deleteStudentLibraryData
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Delete Successfully";
           this.getAllStudents();
         })
         .catch((error) => {
           // console.log(error);
         });
     },
     close() {
       this.dialog = false;
     },
     closeEditStudentDialog() {
       this.editStudentdialog = false;
     },
     closeViewStudent() {
       this.dialogStudents = false;
     },
+    closeAddLibraryModel() {
+      this.addLibrary = false;
+      this.addclass = [];
+      this.addBook = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         this.addBook.schoolId = this.$store.state.schoolId;
         http()
           .put("/addLibrary", this.addBook)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Library Member added successfully";
             this.getAllStudents();
             this.clear();
             this.addLibrary = false;
             this.loading = false;
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.editedItem.studentId = this.editedItem._id;
       http()
         .put("/updateLibrary", this.editedItem)
         .then((response) => {
           this.snackbar = true;
           this.text = "Edit  Library Member Successfully";
           this.getAllStudents();
           this.closeEditStudentDialog();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.statusText;
         });
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
           params: {
             schoolId: this.$store.state.schoolId,
           },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addclass = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
           this.$router.replace({ path: "/" });
         });
     },
   },
   mounted() {
     // this.getStudentList();
     this.token = this.$store.state.token;
     this.getAllClass();
   },
   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>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }

src/pages/Mark/mark.vue

Diff comments View file @8e8d142

 <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-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-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog">
       <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-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
+      rowsPerPage: 10,
     },
-    classRules: [v => !!v || "Class is required"],
+    classRules: [(v) => !!v || "Class is required"],
-    sectionRules: [v => !!v || "section is required"],
+    sectionRules: [(v) => !!v || "section is required"],
-    subjectRules: [v => !!v || "Subject is required"],
+    subjectRules: [(v) => !!v || "Subject is required"],
-    examRules: [v => !!v || "Exam is required"],
+    examRules: [(v) => !!v || "Exam is required"],
     headerOfMark: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
-        align: "center"
+        align: "center",
-      }
+      },
     ],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     examList: [],
     subjects: [],
     addMark: {},
     getMark: {},
     getScheduleData: {},
     markData: [],
     getStudentData: [],
     getStudentsList: [],
-    token: ""
+    token: "",
   }),
+  watch: {
+    addMarkDialog: function (val) {
+      if (!val) {
+        this.addMark = [];
+        this.getStudentData = [];
+      }
+    },
+  },
   methods: {
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .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;
         }
       }
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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
+              sectionId: this.addMark.sectionId,
-            }
+            },
           })
-          .then(response => {
+          .then((response) => {
             this.getStudentData = response.data.data;
             // this.showLoader = false;
             this.showLoader = true;
             http()
               .get("/getMarkDistributionsList", {
-                params: this.addMark
+                params: this.addMark,
               })
-              .then(response => {
+              .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"
+                    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
+                      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 => {
+              .catch((error) => {
                 this.showLoader = false;
               });
           })
-          .catch(error => {
+          .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
+          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()
+            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
+            sectionId: this.getMark.sectionId,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.getStudentsList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           console.log("err====>", error);
           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.getExamList();
-  }
+  },
 };
 </script>
 <style scoped>
 .markTable {
   max-width: 80px !important;
 }
 </style>

src/pages/News/news.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT NEWS  ****** -->
     <v-dialog v-model="editNewsDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit News</label>
             <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout row>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
               <input
                 type="file"
                 style="display: none"
                 ref="image"
                 accept="image/*"
                 multiple
                 @change="onFilePicked"
               />
               <v-layout justify-center>
                 <v-flex
                   xs12
                   sm12
                   md3
                   v-for="Image in editedItem.newsImageUrl"
                   :key="Image._id"
                   v-if="editedItem.newsImageUrl"
                   class="profile-image-wrapper"
                 >
                   <img
                     :src="Image.imageUrl"
                     height="100"
                     width="100"
                     alt="News"
                     class="pa-2 imgNews"
                   />
                   <v-icon
                     class="red edit-profile-icon"
                     dark
                     @click="deleteImage(Image._id,editedItem._id)"
                   >close</v-icon>
                 </v-flex>
                 <v-flex v-for="(file, index) in files" :key="index">
                   <img :src="file" height="100" width="100" class="pa-2" />
                 </v-flex>
                 <img
                   src="/static/icon/user.png"
                   v-if="files == '' && editedItem.newsImageUrl == ''"
                   height="100"
                   width="100"
                   alt="News"
                 />
               </v-layout>
             </v-flex>
           </v-layout>
           <!-- </v-layout> -->
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.title"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     required
                   ></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">Description:</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="editedItem.description"
                     type="text"
                     name="email"
                     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 hidden-xs-only hidden-sm-only">Add New Images:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickFile"
                     v-model="imageName"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only">
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
             <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only">
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE  NEWS  ******  -->
     <v-dialog v-model="dialog1" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View News</label>
             <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-flex align-center justify-center layout text-xs-center>
             <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2">
               <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" />
             </span>
             <img
               src="/static/icon/user.png"
               v-if="editedItem.newsImageUrl == ''"
               height="80"
               width="80"
               alt="News"
             />
           </v-flex>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USERS NEWS 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="addNewsDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addNewsDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add News
       </v-btn>
       <v-spacer></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-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"
     >
       <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">
             <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
               <img :src="image.imageUrl" alt="newsImage" width="40" height="40" />
             </span>
             <img
               src="/static/icon/user.png"
               v-if="props.item.newsImageUrl == ''"
               width="40"
               alt="News"
             />
           </td>
           <td class="td td-row text-xs-center">{{ props.item.title}}</td>
           <td class="td td-row text-xs-center">{{ props.item.description}}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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>
     <!-- ****** ADD  NEWS ****** -->
-    <v-dialog v-model="addNewsDialog" max-width="600px">
+    <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add News</label>
-            <v-icon size="24" class="right" @click="addNewsDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
                 <input
                   type="file"
                   style="display: none"
                   ref="image"
                   accept="image/*"
                   multiple
                   @change="onFilePicked"
                 />
                 <v-layout justify-center>
                   <v-flex v-for="(file,index) in files" :key="index" v-if="files">
                     <img :src="file" height="100" width="100;" class="imgNews" />
                   </v-flex>
                 </v-layout>
                 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" />
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 sm4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-text-field
                     v-model="addNews.title"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     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">Description:</label>
                 </v-flex>
                 <v-flex sm6 xs8 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="addNews.description"
                     type="text"
                     name="email"
                     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 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 sm6 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickFile"
                     v-model="imageName"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs11>
                 <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-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     color: "",
     text: "",
     loading: false,
     date: null,
     search: "",
     show: true,
     showSearch: false,
     showLoader: false,
     editNewsDialog: false,
     addNewsDialog: false,
     dialog1: false,
     valid: true,
     addclass: [],
     addSection: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageName: "",
     imageUrl: "",
     imageFile: "",
     image: [],
     upload: "",
     files: [],
-    titleRules: [v => !!v || " Tilte is required"],
+    titleRules: [(v) => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         align: "justify-center",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Image", vaue: "image", sortable: false, align: "center" },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "Description",
         value: "description",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     editedIndex: -1,
     addNews: {
       title: "",
-      description: ""
+      description: "",
     },
     editedItem: {
       title: "",
-      description: ""
+      description: "",
     },
     defaultItem: {
       title: "",
-      description: ""
+      description: "",
-    }
+    },
   }),
+  watch: {
+    addNewsDialog: function (val) {
+      if (!val) {
+        this.addNews = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+        this.files = [];
+      }
+    },
+  },
   methods: {
     getSections(_id) {
       var token = this.$store.state.token;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + token }
+            headers: { Authorization: "Bearer " + token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           console.log("err====>", err);
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         this.files = [];
         // console.log("files", this.files);
         /** Select many image and showing many image add to news card **/
         const test = Array.from(files).forEach((file, idx) => {
           const fr = new FileReader();
-          const getResult = new Promise(resolve => {
+          const getResult = new Promise((resolve) => {
-            fr.onload = e => {
+            fr.onload = (e) => {
               this.files.push(
                 // id: idx,
                 e.target.result
               );
             };
           });
           fr.readAsDataURL(file);
-          return getResult.then(file => {
+          return getResult.then((file) => {
             return file;
           });
         });
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageFile = files; // this is an image file that can be sent to server...
           // console.log("uploadImage=======>", this.imageFile );
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     getNewsList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getNewsList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.files = [];
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editNewsDialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteNews = {
-        newsId: item._id
+        newsId: item._id,
       };
       http()
         .delete(
           "/deleteNews",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteNews
+            params: deleteNews,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getNewsList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     deleteImage(imageId, newsId) {
       let deleteImages = {
         newsId: newsId,
-        imageId: imageId
+        imageId: imageId,
       };
       http()
         .put("/deleteImages", deleteImages)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.dialog = false;
     },
     close1() {
       this.dialog1 = false;
     },
+    closeAddNewsModel() {
+      this.addNewsDialog = false;
+      this.addNews = [];
+      this.imageName = "";
+      this.imageFile = "";
+      this.imageUrl = "";
+      this.files = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         let newsData = {
           title: this.addNews.title,
-          description: this.addNews.description
+          description: this.addNews.description,
         };
         if (this.files) {
           var ary = [];
           var imageData = [];
           ary = this.files;
           for (let i = 0; i < ary.length; i++) {
             const [baseUrl, imageUrl] = ary[i].split(/,/);
             imageData.push(imageUrl);
             newsData.upload = imageData;
           }
         }
         this.loading = true;
         http()
           .post("/createNews", newsData)
-          .then(response => {
+          .then((response) => {
             this.files = [];
             this.snackbar = true;
             this.text = response.data.message;
             this.getNewsList();
             this.color = "green";
             this.addNewsDialog = false;
             this.loading = false;
             this.clear();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.files = [];
     },
     save() {
       let editNews = {
         title: this.editedItem.title,
         description: this.editedItem.description,
-        newsId: this.editedItem._id
+        newsId: this.editedItem._id,
       };
       if (this.files) {
         var ary = [];
         var imageData = [];
         ary = this.files;
         for (let i = 0; i < ary.length; i++) {
           const [baseUrl, imageUrl] = ary[i].split(/,/);
           imageData.push(imageUrl);
           editNews.upload = imageData;
         }
       }
       http()
         .put("/updateNews", editNews)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully updated News";
           this.color = "green";
           this.editNewsDialog = false;
           this.getNewsList();
           this.close();
         })
-        .catch(error => {
+        .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() {
     this.getNewsList();
     this.editItem;
-  }
+  },
 };
 </script>

src/pages/NoticeBoard/noticeBoard.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit  Notice Board ****** -->
     <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Notice Board</label>
             <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
               <img
                 src="/static/icon/user.png"
                 v-if="!editedItem.eventImageUrl && !imageUrl"
                 width="100px"
               />
               <img
                 :src="editedItem.eventImageUrl"
                 height="150"
                 v-else-if="editedItem.eventImageUrl && !imageUrl"
                 width="150px"
               />
               <img
                 v-if="imageUrl"
                 :src="imageUrl"
                 height="150"
                 style="border-radius:50%; width:150px"
               />
               <input
                 type="file"
                 style="display: none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.title"
                     placeholder="fill your Title"
                     name="name"
                     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">Description:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="editedItem.description"
                     type="text"
                     name="email"
                     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 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 xs7 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>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Notice Board</label>
             <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout>
             <v-flex align-center justify-center layout text-xs-center>
               <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" />
               <img
                 :src="editedItem.eventImageUrl"
                 v-else-if="editedItem.eventImageUrl"
                 class="img"
                 width="200"
               />
             </v-flex>
           </v-layout>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING Notice Board 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="addNoticeBoardDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addNoticeBoardDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board
       </v-btn>
       <v-spacer></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-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="notices"
       :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.eventImageUrl" v-if="props.item.eventImageUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.title}}</td>
           <td class="text-xs-center td td-row">
             <v-btn
               class="add-button"
               @click="generatePDF2Canvas(props.item)"
               :loading="loadingPdf"
               dark
             >{{ props.item.fileType }}</v-btn>
           </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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @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>
     <!-- ****** ADD  Notice Board ****** -->
-    <v-dialog v-model="addNoticeBoardDialog" max-width="600px">
+    <v-dialog v-model="addNoticeBoardDialog" max-width="600px" v-if="addNoticeBoardDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Notice Board</label>
-            <v-icon size="24" class="right" @click="addNoticeBoardDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeNoticeBoardModel">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 xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                     <v-avatar size="80px" v-if="!imageUrl">
                       <img src="/static/icon/user.png" />
                     </v-avatar>
                     <input
                       type="file"
                       style="display: none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                     <v-avatar size="150px" v-if="imageUrl">
                       <img :src="imageUrl" height="150" />
                     </v-avatar>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Title:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="addNoticeBoard.title"
                       placeholder="fill your Title"
                       name="name"
                       type="text"
                       :rules="titleRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Description:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-text-field
                       v-model="addNoticeBoard.description"
                       placeholder="fill your Description"
                       name="name"
                       type="text"
                       :rules="descriptionRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <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 xs7 class="ml-3">
                     <v-text-field
                       label="Select Image"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12>
                     <v-card-actions>
                       <v-spacer></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-form>
             </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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     addNoticeBoardDialog: false,
     editNoticeBoardDialog: false,
     viewNoticeBoardDialog: false,
     valid: true,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageName: "",
     imageUrl: "",
     imageFile: "",
     upload: "",
     loadingPdf: false,
-    titleRules: [v => !!v || " Title is required"],
+    titleRules: [(v) => !!v || " Title is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Event Image",
         align: "center",
         sortable: false,
-        value: "eventImageUrl"
+        value: "eventImageUrl",
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "File",
         value: "eventImageUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     notices: [],
     editedIndex: -1,
     addNoticeBoard: {},
     editedItem: {
       title: "",
-      description: ""
+      description: "",
-    }
+    },
   }),
+  watch: {
+    addNoticeBoardDialog: function (val) {
+      if (!val) {
+        this.addNoticeBoard = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+  },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     getNoticeDataList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getEventsList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.notices = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.notices.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editNoticeBoardDialog = true;
     },
     profile(item) {
       this.editedIndex = this.notices.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewNoticeBoardDialog = true;
     },
     deleteItem(item) {
       let deleteEvent = {
-        eventId: item._id
+        eventId: item._id,
       };
       http()
         .delete(
           "/deleteEvent",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteEvent
+            params: deleteEvent,
           }
         )
-        .then(response => {
+        .then((response) => {
           // console.log("deleteUers",deleteEvent)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Notice Data";
           }
           this.snackbar = true;
           this.color = "green";
           this.getNoticeDataList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editNoticeBoardDialog = false;
     },
+    closeNoticeBoardModel() {
+      this.addNoticeBoardDialog = false;
+      this.addNoticeBoard = [];
+      this.imageName = "";
+      this.imageFile = "";
+      this.imageUrl = "";
+    },
     submit() {
       var signatures = {
         JVBERi0: "other",
         iVBORw0KGgo: "image",
         UEsDBBQ: "other",
         "/": "image",
         AAABAA: "image",
         IywiV2hhdC: "other",
-        bmFtZSxl: "other"
+        bmFtZSxl: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addNoticeBoard.upload = imageUrl;
           this.addNoticeBoard.fileType = detectMimeType(imageUrl);
-          this.addNoticeBoard.fileName = this.imageName
+          this.addNoticeBoard.fileName = this.imageName;
         }
         http()
           .post("/createEvent", this.addNoticeBoard)
-          .then(response => {
+          .then((response) => {
             this.imageUrl = "";
             this.snackbar = true;
             this.color = "green";
             this.text = response.data.message;
             this.getNoticeDataList();
             this.addNoticeBoardDialog = false;
             this.clear();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
       }
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.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 = "";
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       let editNoticeBoard = {
         eventId: this.editedItem._id,
         title: this.editedItem.title,
         description: this.editedItem.description,
-        fileName: this.imageName
+        fileName: this.imageName,
       };
       var signatures = {
         JVBERi0: "other",
         iVBORw0KGgo: "image",
         UEsDBBQ: "other",
         "/": "image",
         AAABAA: "image",
-        IywiV2hhdC: "other"
+        IywiV2hhdC: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editNoticeBoard.upload = imageUrl;
         editNoticeBoard.fileType = detectMimeType(imageUrl);
       }
       http()
         .put("/updateEvent", editNoticeBoard)
-        .then(response => {
+        .then((response) => {
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing Notice Data";
           }
           this.color = "green";
           this.snackbar = true;
           this.getNoticeDataList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     async generatePDF2Canvas(item) {
       var dataType = "";
       var type = "";
       if (item.fileType == "image") {
         dataType = "file.jpg";
       } else if (item.fileType == "other") {
         dataType = "file.pdf";
         type = "application/pdf";
       }
       var FileSaver = require("file-saver");
       FileSaver.saveAs(item.eventImageUrl, "image.jpg");
-    }
+    },
   },
   mounted() {
     this.getNoticeDataList();
-  }
+  },
 };
 </script>

src/pages/Notification/notification.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  NOTIFICATION DETAILS ****** -->
     <v-dialog v-model="editNotificationDialog" max-width="500px">
       <v-flex xs12 sm12>
         <v-card flat class="card-style pa-3" dark>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Notification</label>
               <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Title:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.title"
                   placeholder="fill your Title"
                   name="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">Description:</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   placeholder="fill your Description"
                   v-model="editedItem.description"
                   type="text"
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card>
       </v-flex>
     </v-dialog>
     <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ******  -->
     <v-dialog v-model="profileNotificationDialog" max-width="400px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Notification</label>
             <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-layout>
                 <v-flex xs4 sm6>
                   <h5 class="right my-1">
                     <b>Description:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs8>
                   <h5 class="my-1">{{ editedItem.description }}</h5>
                 </v-flex>
               </v-layout>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** NOTIFICATION 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="addNotificationDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addNotificationDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification
       </v-btn>
       <v-spacer></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-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-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="notifications"
       :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.title}}</td>
           <td class="td td-row text-xs-center">{{ props.item.description}}</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>
                 <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>
                 <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>
     <!-- ****** ADD MULTIPLE NOTIFICATION ****** -->
-    <v-dialog v-model="addNotificationDialog" max-width="480px">
+    <v-dialog v-model="addNotificationDialog" max-width="480px" v-if="addNotificationDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Notification</label>
-            <v-icon size="24" class="right" @click="addNotificationDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddNotificationModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid fill-height>
             <v-layout align-center wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Title:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addNotification.title"
                       placeholder="fill your Title"
                       type="text"
                       :rules="titleRules"
                       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">Description:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       placeholder="fill your Description"
                       :rules="descriptionRules"
                       v-model="addNotification.description"
                       type="text"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout class="hidden-xs-only hidden-sm-only right">
                     <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-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                     <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-spacer></v-spacer>
                   </v-card-actions>
                 </v-flex>
               </v-layout>
             </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 Util from "@/util";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     profileNotificationDialog: false,
     editNotificationDialog: false,
     valid: true,
     addNotificationDialog: false,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    titleRules: [v => !!v || " Tilte is required"],
+    titleRules: [(v) => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "Description",
         value: "description",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     notifications: [],
     editedIndex: -1,
     addNotification: {
       title: "",
-      description: ""
+      description: "",
     },
     editedItem: {
       title: "",
-      description: ""
+      description: "",
-    }
+    },
   }),
+  watch: {
+    addNotificationDialog: function (val) {
+      if (!val) {
+        this.addNotification = [];
+      }
+    },
+  },
   methods: {
     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 = "";
       }
     },
     getNotifications() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getNotificationsList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.notifications = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.notifications.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editNotificationDialog = true;
     },
     profile(item) {
       this.editedIndex = this.notifications.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileNotificationDialog = true;
     },
     deleteItem(item) {
       let deleteNotification = {
-        notificationId: item._id
+        notificationId: item._id,
       };
       http()
         .delete(
           "/deleteNotification",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteNotification
+            params: deleteNotification,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getNotifications();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editNotificationDialog = false;
     },
     closeNotificationDialog() {
       this.profileNotificationDialog = false;
     },
+    closeAddNotificationModel() {
+      this.addNotificationDialog = false;
+      this.addNotification = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         let imageData = new FormData();
         imageData.append("upload", this.imageFile);
         let create = {
           title: this.addNotification.title,
-          description: this.addNotification.description
+          description: this.addNotification.description,
         };
         this.loading = true;
         http()
           .post("/createNotification", create)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getNotifications();
             this.addNotificationDialog = false;
             this.clear();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       let imageData = new FormData();
       imageData.append("upload", this.imageFile);
       let editNotification = {
         notificationId: this.editedItem._id,
         title: this.editedItem.title,
-        description: this.editedItem.description
+        description: this.editedItem.description,
       };
       this.editLoading = true;
       http()
         .put("/updateNotification", editNotification)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getNotifications();
           this.close();
           this.editLoading = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.editLoading = 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.getNotifications();
-  }
+  },
 };
 </script>

src/pages/Parent/parents.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <v-dialog v-model="editParentDilaog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Parents Details</label>
             <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text class="hidden-xs-only hidden-sm-only">
           <v-form ref="editParentForm" v-model="validEditParent" lazy-validation>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Email ID:</label>
                 </v-flex>
                 <v-flex xs8 sm6 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>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Father Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.fatherName"
                     placeholder="fill your father Name"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Father Cell No:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.fatherCellNo"
                     placeholder="fill your father Cell Number"
                     :rules="editFatherNoRule"
                     type="number"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Father Profession:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.fatherProfession"
                     placeholder="fill your father Profession"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Mother Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.motherName"
                     placeholder="fill your Mother Name"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Mother Cell No:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.motherCellNo"
                     placeholder="fill your  Mother Cell Number"
                     type="number"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Mother Profession:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editedItem.motherProfession"
                     placeholder="fill your Mother Profession"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
               <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
                     v-model="editedItem.password"
                     placeholder="Enter Password"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn round dark @click="save" class="add-button">Save</v-btn>
                   <v-spacer></v-spacer>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-form>
         </v-card-text>
         <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only">
           <v-flex xs12>
             <v-layout wrap>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Email ID:</label>
               </v-flex>
               <v-flex xs12>
                 <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>
             <v-layout wrap>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Father Name:</label>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   v-model="editedItem.fatherName"
                   placeholder="fill your father Name"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12>
             <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="editedItem.fatherCellNo"
                   placeholder="fill your father Cell Number"
                   type="number"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12>
             <v-layout wrap>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Father Profession:</label>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   v-model="editedItem.fatherProfession"
                   placeholder="fill your father Profession"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12>
             <v-layout wrap>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Mother Name:</label>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   v-model="editedItem.motherName"
                   placeholder="fill your Mother Name"
                   type="text"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12>
             <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="editedItem.motherCellNo"
                   placeholder="fill your  Mother Cell Number"
                   type="number"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-flex xs12>
             <v-layout wrap>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Mother Profession:</label>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   v-model="editedItem.motherProfession"
                   placeholder="fill your Mother Profession"
                   type="text"
                   required
                 ></v-text-field>
               </v-flex>
               <v-flex xs12 class="pt-4 subheading">
                 <label>Password:</label>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   v-model="editedItem.password"
                   placeholder="Enter Password"
                   type="text"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** RESET Parents MPIN ******  -->
     <v-dialog v-model="resetParentMpin" max-width="500px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Reset Mpin</label>
             <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text class="hidden-xs-only hidden-sm-only">
           <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs3 sm4 class="pt-4 subheading">
                   <label class="right">Change Mpin:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="change mpin"
                     :rules="mPinRules"
                     v-model="editMpin.mPin"
                     type="number"
                     counter="4"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-form>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW Parents DEATILS ******  -->
     <v-dialog v-model="profileParentDialog" max-width="500px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Parent Details</label>
             <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <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>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs6>
                       <h5 class="right my-1">
                         <b>Email:</b>
                       </h5>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.email }}</h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1">
                           <b>Fahter Name:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1">
                           <b>Mother Name:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.motherName }}</h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex sm6 xs6>
                       <b>
                         <h5 class="right my-1">
                           <b>Father Cell No:</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>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1">
                           <b>Mother Cell No:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
                           <b>FatherProfession:</b>
                         </h5>
                         <h5 class="right my-1 hidden-sm-only hidden-xs-only">
                           <b>Father Profession:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.fatherProfession }}</h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12>
                   <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
                           <b>MotherProfession:</b>
                         </h5>
                         <h5 class="right my-1 hidden-sm-only hidden-xs-only">
                           <b>Mother Profession:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.motherProfession }}</h5>
                     </v-flex>
                   </v-layout>
                   <!-- <v-layout>
                     <v-flex xs6>
                       <b>
                         <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
                           <b>Password:</b>
                         </h5>
                         <h5 class="right my-1 hidden-sm-only hidden-xs-only">
                           <b>Password:</b>
                         </h5>
                       </b>
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="my-1">{{ editedItem.password }}</h5>
                     </v-flex>
                   </v-layout>-->
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USERS Parents 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="addParentDialog = 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="addParentDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent
       </v-btn>
       <v-spacer></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 md2 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
             ref="searchField"
             autofocus
             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>
     <v-data-table
       :headers="headers"
       :items="parentsList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">{{ props.item.email }}</td>
           <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td>
           <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
           <td class="text-xs-center td td-row">{{ props.item.motherName }}</td>
           <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</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; "
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                   class="mr-3"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <span v-if="role === 'ADMIN' ">
                 <i
                   class="material-icons md-18"
                   style="cursor:pointer; width:20px; height:18px;"
                   @click="resetParentMPIN(props.item)"
                 >vpn_key</i>
               </span>
             </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 BOX -  ADD PARENTS DETAILS****** -->
-    <v-dialog v-model="addParentDialog" max-width="1100px">
+    <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Parent</label>
-            <v-icon size="24" class="right" @click="$refs.parentForm.reset();addParentDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.parentForm.reset();addParentDialog = false"
+            >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12 sm12>
               <v-form ref="parentForm" v-model="valid" lazy-validation>
                 <v-container fluid class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Father Cell No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="parentData.fatherCellNo"
                             placeholder="fill your father Cell Number"
                             type="number"
                             :rules="fatheCellNoRules"
                             counter="10"
                             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">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>
                     <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">Father Profession:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="parentData.fatherProfession"
                             placeholder="fill your father Profession"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Mother 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-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"
                             counter="10"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Mother Profession:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="parentData.motherProfession"
                             placeholder="fill your Mother Profession"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Password:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="parentData.password"
                             :append-icon="e1 ? 'visibility_off' : 'visibility'"
                             :append-icon-cb="() => (e1 = !e1)"
                             :type="e1 ? 'password' : 'text'"
                             :rules="password"
                             placeholder="Enter Your Password"
                             :disabled="isFatherCellExists"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs12 sm12>
                         <v-btn
                           class="right add-button"
                           @click="submitParentDetails"
                           round
                           dark
                           :loading="loading"
                           v-show="showParent"
                         >Add</v-btn>
                         <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-container>
                 <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only">
                   <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="parentData.fatherCellNo"
                             :rules="fatheCellNoRules"
                             counter="10"
                             placeholder="fill your father 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>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>Father Profession:</label>
                         </v-flex>
                         <v-flex xs12>
                           <v-text-field
                             v-model="parentData.fatherProfession"
                             placeholder="fill your father Profession"
                             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 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-flex xs12 sm6>
                       <v-layout wrap>
                         <v-flex xs42 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-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"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs6 sm6 offset-sm1>
                         <v-btn @click="clear" class="clear-button" round dark>clear</v-btn>
                       </v-flex>
                       <v-flex xs6 sm6>
                         <v-btn
                           class="add-button"
                           @click="submitParentDetails"
                           round
                           dark
                           :loading="loading"
                           v-show="showParent"
                         >Add</v-btn>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-container>
               </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-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data: () => ({
     e1: true,
     showParent: true,
     snackbar: false,
     role: "",
     // TEACHER: "",
     y: "top",
     x: "right",
     color: "",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     password: "",
     addParentDialog: false,
     menu: false,
     menu1: false,
     editParentDilaog: false,
     profileParentDialog: false,
     resetParentMpin: false,
     viewProfileParentDialog: false,
     valid: true,
     validEditParent: true,
     validParentMpin: true,
     pagination: {
       rowsPerPage: 10,
     },
     fatherNameRules: [(v) => !!v || " Father Name 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 || 'Min 8 characters lower case symbol required'
     ],
     editFatherNoRule: [
       (v) => !!v || " father Cell Number  is required",
       (v) => v <= 10000000000 || "Max 10 characters is required",
     ],
     editfatherCellNo: [(v) => !!v || " Father Name is required"],
     errorMessages: "",
     emailRules: [
       (v) => !!v || "E-mail is required",
       (v) =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
         "E-mail must be valid",
     ],
     mPinRules: [
       (v) => !!v || "MPIN is required",
       (v) => v <= 10000 || "Max 4 numbers are required",
     ],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "No",
       },
       { text: "Email", value: "email", sortable: false, align: "center" },
       {
         text: "Father Name",
         value: "fatherName",
         sortable: false,
         align: "center",
       },
       {
         text: "Father Cell No",
         value: "fatherName",
         sortable: false,
         align: "center",
       },
       {
         text: "Mother Name",
         value: "motherName",
         sortable: false,
         align: "center",
       },
       {
         text: "Mother Cell No",
         value: "motherCellNo",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     parentsList: [],
     editedIndex: -1,
     parentData: {},
     max: 10,
     editedItem: {
       fatherName: "",
       fatherCellNo: "",
       motherName: "",
       motherCellNo: "",
       email: "",
       password: "",
     },
     editMpin: {
       mPin: "",
     },
     isFatherCellExists: false,
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
+    addParentDialog: function (val) {
+      if (!val) {
+        this.parentData = [];
+      }
+    },
   },
   methods: {
     editItem(item) {
       this.editedIndex = this.parentsList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editParentDilaog = true;
     },
     profile(item) {
       this.editedIndex = this.parentsList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileParentDialog = true;
     },
     resetParentMPIN(item) {
       this.editMpin = Object.assign({}, item);
       this.resetParentMpin = true;
     },
     close() {
       this.editParentDilaog = false;
     },
     closeProfile() {
       this.profileParentDialog = false;
     },
     closeReset() {
       this.resetParentMpin = false;
     },
     clear() {
       this.$refs.parentForm.reset();
     },
     save() {
       if (this.$refs.editParentForm.validate()) {
         this.editedItem.parentId = this.editedItem._id;
         http()
           .put("/updateParent", this.editedItem)
           .then((response) => {
             this.snackbar = true;
             this.color = "green";
             this.text = response.data.message;
             this.getParentDetails();
             this.close();
           })
           .catch((error) => {
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             if (error.response.data.statusText) {
               this.text = error.response.data.statusText;
             }
           });
       }
     },
     resetMpin() {
       if (this.$refs.resetParentMpinForm.validate()) {
         var changeMpin = {
           parentId: this.editMpin._id,
           mPin: this.editMpin.mPin,
         };
         http()
           .put("/resetMPin", changeMpin)
           .then((response) => {
             this.snackbar = true;
             this.color = "green";
             this.text = response.data.message;
             this.getParentDetails();
             this.resetParentMpin = false;
             this.closeReset();
           })
           .catch((error) => {
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             if (error.response.data.statusText) {
               this.text = error.response.data.statusText;
             }
           });
       }
     },
     async submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         this.parentData.role = "PARENT";
         this.loading = true;
         await http()
           .post("/createParent", this.parentData)
           .then((response) => {
             this.parentId = response.data.data.id;
             this.snackbar = true;
             this.color = "green";
             this.text = response.data.message;
             this.getParentDetails();
             this.clear();
             this.loading = false;
             this.isFatherCellExists = true;
             this.addParentDialog = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             if (error.response.data.statusText) {
               this.text = error.response.data.statusText;
             }
             this.loading = false;
           });
       }
     },
     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);
           }
         });
     },
     displaySearch() {
-      this.show = false
+      this.show = false;
       this.showSearch = true;
       // this.$refs.searchField.focus()
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.getParentDetails();
     // console.log("role", this.$store.state.role);
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Payroll/hourlyTemplate.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit  Hourly Template  ****** -->
     <v-dialog v-model="editHourDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Hourly Template</label>
             <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form">
           <v-container fluid>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs3 class="pt-4 subheading">
                   <label class="right">Hourly Grades:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-text-field
                     v-model="editedItem.hourlyGrades"
                     placeholder="please fill this field"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs3 class="pt-4 subheading">
                   <label class="right">Hourly Reates:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-text-field
                     v-model="editedItem.hourlyRate"
                     placeholder="please fill this field"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-layout>
                   <v-spacer></v-spacer>
                   <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>
                   <v-spacer></v-spacer>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <!-- **** HOURLY TEMPLATE **** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addHourDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addHourDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template
       </v-btn>
       <v-spacer></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-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="hourlyData"
       :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.hourlyGrades}}</td>
           <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>
           <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->
           <td class="td td-row text-xs-center">
             <span>
               <v-tooltip top>
                 <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>
                 <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>
     <!-- **** Add Hourly Template **** -->
-    <v-dialog v-model="addHourDialog" max-width="400px">
+    <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Hourly Template</label>
-            <v-icon size="24" class="right" @click="addHourDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddHourModel">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 xs4 class="pt-4 subheading">
                   <label class="right">Hourly Grades:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-text-field
                     placeholder="Please fill this field"
                     :rules="hourRules"
                     v-model="hourlyTypes.hourlyGrades"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Hourly Rate:</label>
                 </v-flex>
                 <v-flex xs8 sm7 class="ml-3">
                   <v-text-field
                     placeholder="Please fill this field"
                     :rules="hourRules"
                     v-model="hourlyTypes.hourlyRate"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout>
                   <v-spacer></v-spacer>
                   <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->
                   <v-btn
                     @click="submit"
                     round
                     dark
                     :loading="loading"
                     class="add-button"
                   >Add Hourly Template</v-btn>
                   <v-spacer></v-spacer>
                 </v-layout>
               </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,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     show: true,
     showSearch: false,
     addHourDialog: false,
     loading: false,
     loadingSearch: false,
     search: "",
     showLoader: false,
     editHourDialog: false,
     valid: true,
     disabled: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    hourRules: [v => !!v || "Field is required"],
+    hourRules: [(v) => !!v || "Field is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Hourly Grades",
         value: "hourlyGrades",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Hourly Rate",
         value: "hourlyRate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     hourlyTypes: [],
     hourlyData: [],
-    editedItem: {}
+    editedItem: {},
   }),
+  watch: {
+    addHourDialog: function (val) {
+      if (!val) {
+        this.hourlyTypes = [];
+      }
+    },
+  },
   methods: {
-      close() {
+    close() {
       this.editHourDialog = false;
     },
+    closeAddHourModel() {
+      this.addHourDialog = false;
+      this.hourlyData = [];
+      this.hourlyTypes = [];
+    },
     submit() {
       var Hour = {
         hourlyGrades: this.hourlyTypes.hourlyGrades,
-        hourlyRate: this.hourlyTypes.hourlyRate
+        hourlyRate: this.hourlyTypes.hourlyRate,
       };
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createHourly", Hour, {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           })
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.getHourlyList();
             this.color = "green";
             this.addHourDialog = false;
             // this.color = "success";
             this.clear();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             console.log("error", error);
             this.snackbar = true;
             this.color = "red";
             // this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     getHourlyList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getHourlyList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.hourlyData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.hourlyData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editHourDialog = true;
     },
     deleteItem(item) {
       let deleteGrade = {
-        hourlyId: item._id
+        hourlyId: item._id,
       };
       http()
         .delete(
           "/deleteHourly",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteGrade
+            params: deleteGrade,
           },
           {
             headers: {
-              Authorization: "Bearer " + this.token
+              Authorization: "Bearer " + this.token,
-            }
+            },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
-        //   this.text = "Successfully Delete Salary ";
+          //   this.text = "Successfully Delete Salary ";
           this.text = response.data.message;
           this.color = "green";
           this.getHourlyList();
         })
-        .catch(error => {
+        .catch((error) => {
           console.log("error", error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     save() {
-        var updateHourly = {
+      var updateHourly = {
-            hourlyId: this.editedItem._id,
+        hourlyId: this.editedItem._id,
-            hourlyGrades: this.editedItem.hourlyGrades,
+        hourlyGrades: this.editedItem.hourlyGrades,
-            hourlyRate: this.editedItem.hourlyRate,
+        hourlyRate: this.editedItem.hourlyRate,
-        };
+      };
       http()
         .put("/updateHourly", updateHourly, {
           headers: {
-            Authorization: "Bearer " + this.token
+            Authorization: "Bearer " + this.token,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
-        //   this.text = "Successfully Edit Notification";
+          //   this.text = "Successfully Edit Notification";
           this.getHourlyList();
           this.close();
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editHourDialog = false;
         })
-        .catch(error => {
+        .catch((error) => {
           console.log("error", error);
           this.snackbar = true;
-        //   this.text = error.response.data.message;
+          //   this.text = error.response.data.message;
           this.color = "red";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     clear() {
       this.$refs.form.reset();
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getHourlyList();
-  }
+  },
 };
 </script>
 <style scoped>
 </style>

src/pages/Payroll/salaryTemplate.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color" style="box-sizing: border-box;">
     <!-- ****** EDIT SALARY ****** -->
     <v-dialog v-model="editSalaryDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-style pa-2">
             <label class="title text-xs-center">Edit Salary</label>
             <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Salary Template</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only">Salary Grades :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Basic Salary :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Overtime Rate (Per Hour) :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                   </v-form>
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md5></v-flex> -->
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Allowances</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Allowances Label"
                         v-model="editedItem.allowancesName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         v-model="editedItem.allowancesValue"
                         label="Enter Allowances Value"
                         v-on:keyup="addAllowancesValue"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-btn
                         color="white"
                         round
                         class="right mt-3"
                         @click="deleteallowancesAdd(index)"
                         v-if="index != 0"
                       >
                         <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                       <v-btn color="white" round class="right mt-3" @click="allowancesAdd">
                         <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                     </v-flex>
                   </v-layout>
                   <!-- <v-flex xs12 sm12 md6> -->
                   <v-card flat>
                     <v-toolbar dark class="card-styles" flat>
                       <v-spacer></v-spacer>
                       <h3>Deduction</h3>
                       <v-spacer></v-spacer>
                     </v-toolbar>
                     <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
                       <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-text-field
                           solo
                           label="Enter Deduction Label"
                           v-model="editedItem.deductionName"
                         ></v-text-field>
                       </v-flex>
                       <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-text-field
                           solo
                           label="Enter Deduction Value"
                           v-model="editedItem.deductionValue"
                           v-on:keyup="addDeductionValue"
                         ></v-text-field>
                       </v-flex>
                       <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-btn
                           color="white"
                           round
                           class="right mt-3"
                           @click="deletedeductionAdd(index)"
                           v-if="index != 0"
                         >
                           <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                         </v-btn>
                         <v-btn color="white" round class="right mt-3" @click="deductionAdd">
                           <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                         </v-btn>
                       </v-flex>
                     </v-layout>
                   </v-card>
                   <!-- </v-flex> -->
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Deduction</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Label"
                         v-model="editedItem.deductionName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Value"
                         v-model="editedItem.deductionValue"
                         v-on:keyup="addDeductionValue"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-btn
                         color="white"
                         round
                         class="right mt-3"
                         @click="deletedeductionAdd(index)"
                         v-if="index != 0"
                       >
                         <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                       <v-btn color="white" round class="right mt-3" @click="deductionAdd">
                         <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                     </v-flex>
                   </v-layout>
                 </v-card>
               </v-flex>-->
               <!-- <v-flex xs12 sm12 md4></v-flex> -->
               <v-flex xs12 sm12 md12 style="padding-top: 1%;">
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Total Salary Details</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Gross Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Total Deduction"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Net Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                 </v-card>
                 <v-layout>
                   <v-flex xs12>
                     <v-card-actions>
                       <v-spacer class="hidden-xs-only"></v-spacer>
                       <v-btn
                         color="open-dialog-button"
                         dark
                         class="right mt-3"
                         @click="save"
                       >Update Salary Template</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW  ******  -->
     <v-dialog v-model="profileSalaryDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-style pa-2">
             <label class="title text-xs-center">View Salary</label>
             <v-icon
               size="24"
               color="white"
               class="right"
               @click="profileSalaryDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Salary Template</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only">Salary Grades :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field
                             :rules="salaryRules"
                             v-model="editedItem.salaryGrades"
                             readonly
                           ></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Basic Salary :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field
                             :rules="basicRules"
                             v-model="editedItem.basicSalary"
                             readonly
                           ></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Overtime Rate (Per Hour) :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field
                             :rules="overtimeRules"
                             v-model="editedItem.overtimeRate"
                             readonly
                           ></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                   </v-form>
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md5></v-flex> -->
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Allowances</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         readonly
                         label="Enter Allowances Label"
                         v-model="editedItem.allowancesName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         readonly
                         v-model="editedItem.allowancesValue"
                         label="Enter Allowances Value"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                   <!-- <v-flex xs12 sm12 md6> -->
-                    <v-card flat>
+                  <v-card flat>
-                      <v-toolbar dark class="card-styles" flat>
+                    <v-toolbar dark class="card-styles" flat>
-                        <v-spacer></v-spacer>
+                      <v-spacer></v-spacer>
-                        <h3>Deduction</h3>
+                      <h3>Deduction</h3>
-                        <v-spacer></v-spacer>
+                      <v-spacer></v-spacer>
-                      </v-toolbar>
+                    </v-toolbar>
-                      <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
+                    <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
-                        <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
-                          <v-text-field
+                        <v-text-field
-                            solo
+                          solo
-                            readonly
+                          readonly
-                            label="Enter Deduction Label"
+                          label="Enter Deduction Label"
-                            v-model="editedItem.deductionName"
+                          v-model="editedItem.deductionName"
-                          ></v-text-field>
+                        ></v-text-field>
-                        </v-flex>
+                      </v-flex>
-                        <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
-                          <v-text-field
+                        <v-text-field
-                            solo
+                          solo
-                            readonly
+                          readonly
-                            label="Enter Deduction Value"
+                          label="Enter Deduction Value"
-                            v-model="editedItem.deductionValue"
+                          v-model="editedItem.deductionValue"
-                          ></v-text-field>
+                        ></v-text-field>
-                        </v-flex>
+                      </v-flex>
-                      </v-layout>
+                    </v-layout>
-                    </v-card>
+                  </v-card>
                   <!-- </v-flex> -->
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Deduction</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Label"
                         v-model="editedItem.deductionName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Value"
                         v-model="editedItem.deductionValue"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-card>
               </v-flex>-->
               <v-flex xs12 sm12 md4></v-flex>
               <v-flex xs12 sm12 md12 style="padding-top: 1%;">
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Total Salary Details</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Gross Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Total Deduction"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field solo value="Net Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-flex xs8 sm7 class="ml-3">
-                       <b> <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field></b>
+                        <b>
+                          <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field>
+                        </b>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                 </v-card>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </v-card>
     </v-dialog>
     <!-- ****** EXAM 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="addSalaryDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addSalaryDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary
       </v-btn>
       <v-spacer></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-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="salaryData"
       :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.salaryGrades}}</td>
           <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td>
           <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</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>
                 <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>
                 <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>
     <!-- ****** ADD SALARY ****** -->
-    <v-dialog v-model="addSalaryDialog">
+    <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-style pa-2">
             <label class="title text-xs-center">Add Salary</label>
-            <v-icon size="24" color="white" class="right" @click="addSalaryDialog = false">cancel</v-icon>
+            <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Salary Template</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only">Salary Grades :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Basic Salary :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field
                             :rules="basicRules"
                             v-on:keyup="addSalary"
                             v-model="salaryType.basicSalary"
                           ></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Overtime Rate (Per Hour) :</label>
                       </v-flex>
                       <v-flex xs8 sm7 class="ml-3">
                         <v-flex xs8 sm7 class="ml-3">
                           <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field>
                         </v-flex>
                       </v-flex>
                     </v-layout>
                   </v-form>
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md5></v-flex> -->
               <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Allowances</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Allowances Label"
                         v-model="salaryType.allowancesName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         v-model="salaryType.allowancesValue"
                         label="Enter Allowances Value"
                         v-on:keyup="addAllowances"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-btn
                         color="white"
                         round
                         class="right mt-3"
                         @click="deleteSelectAllowances(index)"
                         v-if="index != 0"
                       >
                         <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                       <v-btn color="white" round class="right mt-3" @click="selectAllowances">
                         <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                     </v-flex>
                   </v-layout>
                   <!-- <v-flex xs12 sm12 md6> -->
                   <v-card flat>
                     <v-toolbar dark class="card-styles" flat>
                       <v-spacer></v-spacer>
                       <h3>Deduction</h3>
                       <v-spacer></v-spacer>
                     </v-toolbar>
                     <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
                       <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-text-field
                           solo
                           label="Enter Deduction Label"
                           v-model="salaryType.deductionName"
                         ></v-text-field>
                       </v-flex>
                       <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-text-field
                           solo
                           label="Enter Deduction Value"
                           v-model="salaryType.deductionValue"
                           v-on:keyup="addDeduction"
                         ></v-text-field>
                       </v-flex>
                       <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                         <v-btn
                           color="white"
                           round
                           class="right mt-3"
                           @click="deleteSelectDeduction(index)"
                           v-if="index != 0"
                         >
                           <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                         </v-btn>
                         <v-btn color="white" round class="right mt-3" @click="selectDeduction">
                           <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                         </v-btn>
                       </v-flex>
                     </v-layout>
                   </v-card>
                   <!-- </v-flex> -->
                 </v-card>
               </v-flex>
               <!-- <v-flex xs12 sm12 md6>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Deduction</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
                     <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Label"
                         v-model="salaryType.deductionName"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-text-field
                         solo
                         label="Enter Deduction Value"
                         v-model="salaryType.deductionValue"
                         v-on:keyup="addDeduction"
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
                       <v-btn
                         color="white"
                         round
                         class="right mt-3"
                         @click="deleteSelectDeduction(index)"
                         v-if="index != 0"
                       >
                         <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                       <v-btn color="white" round class="right mt-3" @click="selectDeduction">
                         <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
                       </v-btn>
                     </v-flex>
                   </v-layout>
                 </v-card>
               </v-flex>-->
               <!-- <v-flex xs12 sm12 md4></v-flex> -->
               <v-flex xs12 sm12 md12 style="padding-top: 1%;">
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Total Salary Details</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <v-text-field solo value="Gross Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="grossSalary" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <v-text-field solo value="Total Deduction"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="totalDeduction" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <v-text-field solo value="Net Salary"></v-text-field>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-flex xs8 sm7 class="ml-3">
                         <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field>
                       </v-flex>
                     </v-flex>
                   </v-layout>
                 </v-card>
                 <v-layout>
                   <v-flex xs12>
                     <v-card-actions>
                       <v-spacer class="hidden-xs-only"></v-spacer>
                       <v-btn
                         color="open-dialog-button"
                         dark
                         class="right mt-3"
                         @click="submit"
                       >Add Salary Template</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </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,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     show: true,
     showSearch: false,
     addSalaryDialog: false,
     loading: false,
     loadingSearch: false,
     search: "",
     showLoader: false,
     editSalaryDialog: false,
     profileSalaryDialog: false,
     valid: true,
     disabled: true,
     showAllowances: false,
     showDeduction: false,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     salaryTypes: [],
     salaryTypeData: [
       {
         allowancesValue: "",
         allowancesName: "House Rent",
-        totalAllowances: 0
+        totalAllowances: 0,
-      }
+      },
     ],
     salaryTypeDeductionData: [
       {
         deductionValue: "",
         deductionName: "Provident fund",
-        totalDeductions: 0
+        totalDeductions: 0,
-      }
+      },
     ],
     grossSalary: 0,
     totalDeduction: 0,
     salaryType: {
       netSalary: 0,
       salaryGrades: "",
       allowancesValue: "",
       deductionValue: "",
-      overtimeRate: ""
+      overtimeRate: "",
     },
-    basicRules: [v => !!v || " Basic Salary is required"],
+    basicRules: [(v) => !!v || " Basic Salary is required"],
-    salaryRules: [v => !!v || "Salary Grades is required"],
+    salaryRules: [(v) => !!v || "Salary Grades is required"],
-    overtimeRules: [v => !!v || "Overtime Rate is required"],
+    overtimeRules: [(v) => !!v || "Overtime Rate is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Salary Grades",
         value: "salaryGrades",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Basic Salary",
         value: "basicSalary",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Overtime Rate",
         value: "overtimeRate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     salaryData: [],
     editedItem: {},
-    token: ""
+    token: "",
   }),
+  watch: {
+    addSalaryDialog: function (val) {
+      if (!val) {
+        this.salaryType = [];
+        this.grossSalary = 0;
+        this.totalDeduction = 0;
+        (this.salaryTypeData = [
+          {
+            allowancesValue: "",
+            allowancesName: "",
+            totalAllowances: 0,
+          },
+        ]),
+          (this.salaryTypeDeductionData = [
+            {
+              deductionValue: "",
+              deductionName: "",
+              totalDeductions: 0,
+            },
+          ]);
+      }
+    },
+  },
   methods: {
     getSalaryList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getSalaryList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.salaryData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
-        .catch(error => {
+        .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);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.salaryData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.editSalaryDialog = true;
     },
     profile(item) {
       this.editedIndex = this.salaryData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileSalaryDialog = true;
     },
     deleteItem(item) {
       let Salary = {
-        salaryId: item._id
+        salaryId: item._id,
       };
       http()
         .delete(
           "/deleteSalary",
           confirm("Are you sure you want to Delete this?") && {
-            params: Salary
+            params: Salary,
           },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully Delete Salary ";
           this.text = response.data.message;
           this.color = "green";
           this.getSalaryList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     close() {
       this.editSalaryDialog = false;
     },
+    closeAddSalaryModel() {
+      this.addSalaryDialog = false;
+      this.salaryData = [];
+      this.salaryType = [];
+      this.grossSalary = 0;
+      this.totalDeduction = 0;
+      (this.salaryTypeData = [
+        {
+          allowancesValue: "",
+          allowancesName: "",
+          totalAllowances: 0,
+        },
+      ]),
+        (this.salaryTypeDeductionData = [
+          {
+            deductionValue: "",
+            deductionName: "",
+            totalDeductions: 0,
+          },
+        ]);
+    },
     submit() {
       var salary = {
         salaryGrades: this.salaryType.salaryGrades,
         basicSalary: this.salaryType.basicSalary,
         overtimeRate: this.salaryType.overtimeRate,
         allowances: this.salaryTypeData,
         deduction: this.salaryTypeDeductionData,
         grossSalary: this.grossSalary,
         totalDeduction: this.totalDeduction,
-        netSalary: this.salaryType.netSalary
+        netSalary: this.salaryType.netSalary,
       };
       if (this.$refs.form.validate()) {
         this.loading = true;
         //   console.log("api data", this.salaryType);
         http()
           .post("/createSalary", salary)
-          .then(response => {
+          .then((response) => {
             // console.log("response", response);
             this.snackbar = true;
             this.text = "Successfully Created Salary ";
             this.text = response.data.message;
             this.color = "green";
             this.addSalaryDialog = false;
             this.getSalaryList();
             this.color = "success";
             this.salaryTypeData = [];
             this.salaryTypeDeductionData = [];
             this.salaryType = "";
             this.grossSalary = "";
             this.totalDeduction = "";
             this.loading = false;
             this.clear();
           })
-          .catch(error => {
+          .catch((error) => {
             console.log("error", error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
             this.loading = false;
           });
       }
     },
     selectAllowances() {
       this.salaryTypeData.push({
-        allowancesValue: (this.salaryType.allowancesValue = "")
+        allowancesValue: (this.salaryType.allowancesValue = ""),
       });
       //   console.log("this.salaryTypeData", this.salaryTypeData);
       var totalAllowances = "";
-      this.salaryTypeData.forEach(allowancesValue_ => {
+      this.salaryTypeData.forEach((allowancesValue_) => {
         if (allowancesValue_.allowancesValue != "") {
           // console.log("allowances", allowancesValue_.allowancesValue);
           totalAllowances =
             Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
         }
         this.grossSalary =
           totalAllowances + Number(this.salaryType.basicSalary);
       });
     },
     allowancesAdd() {
       this.editedItem.allowances.push({
-        allowancesValue: (this.salaryType.allowancesValue = "")
+        allowancesValue: (this.salaryType.allowancesValue = ""),
       });
       var totalAllowances = "";
-      this.editedItem.allowances.forEach(allowancesValue_ => {
+      this.editedItem.allowances.forEach((allowancesValue_) => {
         if (allowancesValue_.allowancesValue != "") {
           //   console.log("allowances", allowancesValue_.allowancesValue);
           totalAllowances =
             Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
           console.log("totalAllowances", totalAllowances);
         }
         this.editedItem.grossSalary =
           totalAllowances + Number(this.editedItem.basicSalary);
-          console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
+        console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
       });
     },
     selectDeduction() {
       this.salaryTypeDeductionData.push({
-        deductionValue: (this.salaryType.deductionValue = "")
+        deductionValue: (this.salaryType.deductionValue = ""),
       });
       var totalDeductions = "";
-      this.salaryTypeDeductionData.forEach(deductionValue_ => {
+      this.salaryTypeDeductionData.forEach((deductionValue_) => {
         if (deductionValue_.deductionValue != "") {
           //   console.log("deduction", deductionValue_.deductionValue);
           totalDeductions =
             Number(totalDeductions) + Number(deductionValue_.deductionValue);
         }
       });
     },
     deductionAdd() {
       this.editedItem.deduction.push({
-        deductionValue: (this.salaryType.deductionValue = "")
+        deductionValue: (this.salaryType.deductionValue = ""),
       });
       var totalDeductions = "";
-      this.editedItem.deduction.forEach(deductionValue_ => {
+      this.editedItem.deduction.forEach((deductionValue_) => {
         if (deductionValue_.deductionValue != "") {
           //   console.log("deduction", deductionValue_.deductionValue);
           totalDeductions =
             Number(totalDeductions) + Number(deductionValue_.deductionValue);
           console.log("this.totalDeductions", totalDeductions);
         }
         // this.editedItem.totalDeduction = totalDeductions;
         // console.log("this.totalDeduction", this.editedItem.totalDeduction);
       });
     },
-    deleteSelectAllowances: function(index) {
+    deleteSelectAllowances: function (index) {
       this.salaryTypeData.splice(index, 1);
     },
-    deleteallowancesAdd: function(index) {
+    deleteallowancesAdd: function (index) {
       this.editedItem.allowances.splice(index, 1);
     },
-    deleteSelectDeduction: function(index) {
+    deleteSelectDeduction: function (index) {
       this.salaryTypeDeductionData.splice(index, 1);
     },
-    deletedeductionAdd: function(index) {
+    deletedeductionAdd: function (index) {
       this.editedItem.deduction.splice(index, 1);
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
     },
     save() {
       var updateSalary = {
         salaryId: this.editedItem._id,
         salaryGrades: this.editedItem.salaryGrades,
         basicSalary: this.editedItem.basicSalary,
         overtimeRate: this.editedItem.overtimeRate,
         allowances: this.salaryTypeData,
         deduction: this.salaryTypeDeductionData,
         grossSalary: this.editedItem.grossSalary,
         totalDeduction: this.editedItem.totalDeduction,
-        netSalary: this.editedItem.netSalary
+        netSalary: this.editedItem.netSalary,
       };
       http()
         .put("/updateSalary", updateSalary)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSalaryList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
-    addSalary: function() {
+    addSalary: function () {
       var showSalary = this.salaryType.basicSalary;
       this.grossSalary = showSalary;
       //   console.log("salary", this.grossSalary);
     },
-    addAllowances: function() {
+    addAllowances: function () {
       var totalAllowances = "";
-      this.salaryTypeData.forEach(allowancesValue_ => {
+      this.salaryTypeData.forEach((allowancesValue_) => {
         if (allowancesValue_.allowancesValue != "") {
           totalAllowances =
             Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
         }
         this.grossSalary =
           totalAllowances +
           Number(this.salaryType.basicSalary) +
           Number(this.salaryType.allowancesValue);
       });
     },
-    addAllowancesValue: function() {
+    addAllowancesValue: function () {
       var totalAllowances = "";
-      this.editedItem.allowances.forEach(allowancesValue_ => {
+      this.editedItem.allowances.forEach((allowancesValue_) => {
         if (allowancesValue_.allowancesValue != "") {
           totalAllowances =
             Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
         }
         this.grossSalary =
           totalAllowances +
           Number(this.editedItem.basicSalary) +
           Number(this.editedItem.allowancesValue);
       });
     },
-    addDeduction: function() {
+    addDeduction: function () {
       //   console.log(
       //     "this.salaryType.deductionValue",
       //     this.salaryType.deductionValue
       //   );
       var totalDeductions = "";
-      this.salaryTypeDeductionData.forEach(deductionValue_ => {
+      this.salaryTypeDeductionData.forEach((deductionValue_) => {
         if (deductionValue_.deductionValue != "") {
           totalDeductions =
             Number(totalDeductions) + Number(deductionValue_.deductionValue);
         }
       });
       //   console.log("deduction", totalDeductions);
       this.totalDeduction = totalDeductions;
       this.salaryType.netSalary = this.grossSalary - this.totalDeduction;
     },
-    addDeductionValue: function() {
+    addDeductionValue: function () {
       var totalDeductions = "";
-      this.editedItem.deduction.forEach(deductionValue_ => {
+      this.editedItem.deduction.forEach((deductionValue_) => {
         if (deductionValue_.deductionValue != "") {
           totalDeductions =
             Number(totalDeductions) + Number(deductionValue_.deductionValue);
         }
         // this.totalDeduction = totalDeductions;
         // console.log("this.totalDeductions", this.totalDeduction);
       });
       this.editedItem.totalDeduction = totalDeductions;
       this.editedItem.netSalary =
         this.editedItem.grossSalary - this.editedItem.totalDeduction;
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getSalaryList();
-  }
+  },
 };
 </script>
 <style scoped>
 </style>

src/pages/Section/section.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <v-dialog v-model="editSectionDialog" max-width="460px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Section</label>
             <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout wrap justify-center>
             <v-flex xs12 sm12>
               <v-form>
                 <v-layout>
                   <v-flex xs5 sm4 class="pt-4 subheading">
                     <label class="right">Class :</label>
                   </v-flex>
                   <v-flex xs7 sm8>
                     <v-autocomplete
                       :items="addclass"
                       :label="editedItem.classData.classNum"
                       v-model="editItem.classId"
                       item-text="classNum"
                       item-value="_id"
                       class="ml-2"
                     ></v-autocomplete>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm4 class="pt-4 subheading">
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>
                     <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>
                   </v-flex>
                   <v-flex xs7 sm8>
                     <v-autocomplete
                       v-model="editedItem.name"
                       placeholder="fill your Section Name"
                       :items="SectionName"
                       class="ml-2"
                     ></v-autocomplete>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm4 class="pt-4 subheading">
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>
                     <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>
                   </v-flex>
                   <v-flex xs7 sm8>
                     <v-select
                       :items="teacherList"
                       v-model="editedItem.classInchargeId"
                       :label="editedItem.teacherData[0].name"
                       item-text="name"
                       item-value="_id"
                       class="ml-2"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-flex xs12>
                   <v-card-actions>
                     <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                   </v-card-actions>
                 </v-flex>
               </v-form>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
     <v-dialog v-model="viewSectionDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Section</label>
             <v-icon size="24" class="right" @click="viewSectionDialog = 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 xs7 sm6>
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">
                       <b>Class Name :</b>
                     </h5>
                     <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
                       <b>Class :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs7 sm6>
                     <h5 class="right my-1">
                       <b>Section Name :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs7 sm6>
                     <h5 class="right my-1 hidden-xs-only hidden-sm-only">
                       <b>Class Incharge :</b>
                     </h5>
                     <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
                       <b>Incharge :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs7 sm6>
                     <h5 class="right my-1">
                       <b>Session :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.session }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Section 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="addSectionDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addSectionDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section
       </v-btn>
       <v-spacer></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 v-if="showSearch">
         <v-layout>
           <v-text-field
-          autofocus
+            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>
     <v-data-table
       :headers="headers"
       :items="sectionList"
       :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">{{ props.item.classData.classNum }}</td>
           <td class="text-xs-center td td-row">{{ props.item.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.session }}</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>
                 <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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                   class="mr-3"
                 />
                 <span>Delete</span>
-              </v-tooltip> -->
+              </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>
     <!-- </v-tab-item> -->
     <!-- DIALOG BOX - ADD Students Dialog box -->
-    <v-dialog v-model="addSectionDialog" max-width="400px">
+    <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Section</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addSectionDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addSectionDialog = false"
+            >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 class="pt-4 subheading">
                     <label class="right">Section :</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-autocomplete
                       v-model="sectionData.name"
                       placeholder="fill your Section Name"
                       :items="SectionName"
                       :rules="nameRules"
                       required
                     ></v-autocomplete>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Class :</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       :items="addclass"
                       label="Select Class"
                       v-model="sectionData.classNum"
                       item-text="classNum"
                       item-value="_id"
                       name="Select Class"
                       :rules="classRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Incharge :</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       :items="teacherList"
                       label="Select Incharge"
                       v-model="sectionData.sectionId"
                       item-text="name"
                       item-value="_id"
                       name="Select Class"
                       :rules="inchargeRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Session:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="sectionData.session"
                       placeholder="fill your Session"
                       name="name"
                       type="text"
                       :rules="sessionRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-btn @click="clear" class="add-button" round dark>Clear</v-btn>
                       <v-spacer></v-spacer>
                       <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </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 { apiCollection } from "@/schoolApi/apiCollection";
 // const getSectionData = apiCollection.get("posts");
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     editSectionDialog: false,
     viewSectionDialog: false,
     valid: true,
     validEdit: true,
     addSectionDialog: false,
     editLoading: false,
     details: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
-    nameRules: [v => !!v || " Section Name is required"],
+    nameRules: [(v) => !!v || " Section Name is required"],
-    classRules: [v => !!v || " Class Name is required"],
+    classRules: [(v) => !!v || " Class Name is required"],
-    sessionRules: [v => !!v || " Session is required"],
+    sessionRules: [(v) => !!v || " Session is required"],
-    inchargeRules: [v => !!v || " Incharge Name is required"],
+    inchargeRules: [(v) => !!v || " Incharge Name is required"],
     SectionName: ["A", "B", "C", "D", "E", "F"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Class Name",
         value: "classData.classNum",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Section Name", value: "name", sortable: false, align: "center" },
       { text: "Session", value: "session", sortable: false, align: "center" },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     sectionList: [],
     addclass: [],
     teacherList: [],
     select: "",
     selectId: "",
     token: "",
     editedIndex: -1,
     editedItem: {
       classData: {
-        classNum: ""
+        classNum: "",
       },
       teacherData: [
         {
-          name: ""
+          name: "",
-        }
+        },
-      ]
+      ],
       // name: "",
       // session: new Date().getFullYear()
     },
     sectionData: {
-      session: new Date().getFullYear()
+      session: new Date().getFullYear(),
-    }
+    },
   }),
+  watch: {
+    addSectionDialog: function (val) {
+      if (!val) {
+        this.sectionData = [];
+      }
+    },
+  },
   methods: {
     getSectionList() {
       // const { data } = await getSectionData.get();
       this.showLoader = true;
       http()
         .get("/getAllSections", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.sectionList = response.data.data;
           this.showLoader = false;
           // console.log("getAllSections=====>",response.data.data)
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.sectionList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editSectionDialog = true;
     },
     profile(item) {
       this.editedIndex = this.sectionList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewSectionDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
-        sectionId: item._id
+        sectionId: item._id,
       };
       http()
         .delete(
           "/deleteSection",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteStudent
+            params: deleteStudent,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSectionList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "green";
         });
     },
     closeSectionDialog() {
       this.editSectionDialog = false;
     },
     closeviewSectionDialog() {
       this.viewSectionDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addSection = {
           name: this.sectionData.name,
           classId: this.sectionData.classNum,
           session: this.sectionData.session,
-          classInchargeId: this.sectionData.sectionId
+          classInchargeId: this.sectionData.sectionId,
         };
         this.loading = true;
         http()
           .post("/createSection", addSection)
-          .then(response => {
+          .then((response) => {
             this.getSectionList();
             this.snackbar = true;
             this.color = "green";
             this.text = "New Section added successfully";
             this.clear();
             this.addSectionDialog = false;
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.editedItem.sectionId = this.editedItem._id;
       this.editLoading = true;
       http()
         .put("/updateSection", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.editLoading = false;
           this.snackbar = true;
           this.color = "green";
           this.text = response.data.message;
           this.getSectionList();
           this.closeSectionDialog();
         })
-        .catch(error => {
+        .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getAllTeacher() {
       http()
         .get("/getTeachersList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.teacherList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getSectionList();
     this.getAllClasses();
     this.getAllTeacher();
-  }
+  },
 };
 </script>

src/pages/Students/students.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  STUDENTS DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable>
       <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>
       <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 class="text-xs-center td td-row">{{ 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-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog">
       <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 = "";
+      }
+    },
   },
   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;
         });
     },
     getSections(_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;
         });
     },
     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;
 }
 </style>

src/pages/Teachers/teachers.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT TEACHERS DETAILS ****** -->
     <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable>
       <v-card flat class="card-style" dark>
         <v-card-text>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Teacher Details</label>
               <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
             </v-flex>
           </v-layout>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
                 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
                   <img src="/static/icon/user.png" />
                 </v-avatar>
                 <img
                   :src="editedItem.profilePicUrl"
                   v-else-if="editedItem.profilePicUrl && !imageUrl"
                   height="150"
                   style="border-radius:50%; width:150px"
                 />
                 <img
                   v-if="imageUrl"
                   :src="imageUrl"
                   height="150"
                   style="border-radius:50%; width:150px"
                 />
                 <input
                   type="file"
                   style="display:none"
                   ref="image"
                   accept="image/*"
                   @change="onFilePicked"
                 />
               </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">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"
                       type="text"
                       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 ID:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       placeholder="fill your email"
                       v-model="editedItem.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 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="menu2"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="editedItem.dob"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="editedItem.dob"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @input="menu2 = false"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">City:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="editedItem.city"
                       placeholder="fill your City Name"
                       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">State:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="editedItem.state"
                       placeholder="fill your State Name"
                       type="text"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">PinCode:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="editedItem.pincode"
                       placeholder="fill your pincode"
                       type="number"
                       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="editedItem.mobileNo"
                       placeholder="fill your MobileNo"
                       type="number"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right 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 sm8 class="ml-3">
                     <v-autocomplete
                       v-model="editedItem.country"
                       :items="countries"
                       placeholder="Select Country Name"
                       required
                     ></v-autocomplete>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Join Date:</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-menu
                       ref="menu"
                       :close-on-content-click="false"
                       v-model="menu3"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="editedItem.joinDate"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="editedItem.joinDate"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @input="menu3 = 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 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 sm8 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-layout>
             <v-layout class="hidden-xs-only hidden-sm-only" wrap>
               <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
                       name="input-4-3"
                       v-model="editedItem.presentAddress"
                       placeholder="fill Your present Address"
                       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">Permanent Address:</label>
                   </v-flex>
                   <v-flex xs12 sm8 class="ml-3">
                     <v-text-field
                       name="input-4-3"
                       v-model="editedItem.permanentAddress"
                       placeholder="fill Your Permanent Address"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout 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
                       name="input-4-3"
                       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 Address:</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-flex xs12 sm12>
                   <v-layout class="right">
                     <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
                   </v-layout>
                 </v-flex>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW TEACHERS DETAILS ******  -->
     <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Teacher</label>
             <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <v-avatar size="80">
                     <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                     <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                   </v-avatar>
                 </v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Full Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Email:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.email }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>City:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.city }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>State:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.state }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Country:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.country }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Pincode:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.pincode }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Mobile No:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Join Date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>D.O.B :</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>Permanent Address:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>present Address:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-Teachers TABLE DATA****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addTeacherDialog = 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="addTeacherDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher
       </v-btn>
       <v-spacer></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 md2 lg2 sm6 xs8 v-if="showSearch">
         <v-layout>
-          <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
+          <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"
     >
       <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.email }}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
           <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
           <td class="td td-row text-xs-center">
             <v-switch
               class="pl-3"
               v-model="props.item.status"
               @change="suspendStatus(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; "
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                   class="mr-3"
                 />
                 <span>Delete</span>
-              </v-tooltip> -->
+              </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 BOX - Add Teachers Data****** -->
-    <v-dialog v-model="addTeacherDialog" max-width="1160">
+    <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12 class="pa-0">
             <label class="title text-xs-center">Add Teacher</label>
-            <v-icon size="24" class="right" @click="$refs.form.reset();addTeacherDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="$refs.form.reset();addTeacherDialog = false"
+            >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
                 <v-avatar size="120px">
                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                 </v-avatar>
                 <img
                   :src="imageUrl"
                   height="150"
                   v-if="imageUrl"
                   style="border-radius:50%; width:150px"
                 />
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addTeachers.name"
                       placeholder="fill your full Name"
                       name="name"
                       type="text"
                       :rules="nameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Email ID:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       placeholder="fill your email"
                       v-model="addTeachers.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 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="addTeachers.date"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addTeachers.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="addTeachers.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="addTeachers.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="addTeachers.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="addTeachers.mobileNo"
                       placeholder="fill your Mobile No."
                       name="mobileNo"
                       type="number"
                       :rules="mobileNoRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right 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="addTeachers.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">Join Date:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
                       ref="menu1"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="joinDateRules"
                         v-model="addTeachers.joinDate"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addTeachers.joinDate"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @input="menu1 = false"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right 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>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </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 md4 class="pt-4 subheading">
                     <label class="right">Present Address:</label>
                   </v-flex>
                   <v-flex xs8 md8 class="ml-3">
                     <v-text-field
                       name="input-4-3"
                       v-model="addTeachers.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 md4 class="pt-4 subheading addressForm">
                     <label class="right">Permanent Address:</label>
                   </v-flex>
                   <v-flex xs12 md8 class="ml-3">
                     <v-switch
                       v-model="addTeachers.permanentAddress"
                       label="Select Permanent Address"
                       :value="addTeachers.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 md4 class="pt-4 subheading addressForm">
                     <label class="right">Permanent Address:</label>
                   </v-flex>
                   <v-flex xs12 md8 class="ml-3">
                     <v-text-field
                       name="input-4-3"
                       v-model="addTeachers.permanentAddress"
                       :rules="permanentAddress"
                       placeholder="fill Your Permanent Address"
                       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 sm12 class="pt-4 subheading text-xs-center">
                     <label class>Present Addres:</label>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-textarea
                       name="input-4-3"
                       v-model="addTeachers.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="addTeachers.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-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-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-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
 export default {
   data: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     role: "",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     show: true,
     showSearch: false,
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     editTeacherDialog: false,
     viewTeacherProfileDialog: false,
     addTeacherDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    nameRules: [v => !!v || " Full Name is required"],
+    nameRules: [(v) => !!v || " Full Name is required"],
-    dateRules: [v => !!v || " DOB is required"],
+    dateRules: [(v) => !!v || " DOB is required"],
-    cityRules: [v => !!v || " City Name is required"],
+    cityRules: [(v) => !!v || " City Name is required"],
-    pincode: [v => !!v || " Pincode is required"],
+    pincode: [(v) => !!v || " Pincode is required"],
-    country: [v => !!v || " Country Name is required"],
+    country: [(v) => !!v || " Country Name is required"],
-    permanentAddress: [v => !!v || " Permanent Address is required"],
+    permanentAddress: [(v) => !!v || " Permanent Address is required"],
-    presentAddress: [v => !!v || " Present Address  is required"],
+    presentAddress: [(v) => !!v || " Present Address  is required"],
-    mobileNoRules: [v => !!v || "Mobile Number is required"],
+    mobileNoRules: [(v) => !!v || "Mobile Number is required"],
-    stateRules: [v => !!v || "State Name is required"],
+    stateRules: [(v) => !!v || "State Name is required"],
-    joinDateRules: [v => !!v || " Join Date is required"],
+    joinDateRules: [(v) => !!v || " Join Date is required"],
     errorMessages: "",
     switch1: true,
     countries: [],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "DOB", value: "dob", sortable: false, align: "center" },
       {
         text: "Join Date",
         value: "joinDate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Mobile No",
         value: "mobileNo",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Status",
         value: "status",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     editedIndex: -1,
     upload: "",
     editedItem: {
       role: "TEACHER",
       name: "",
       email: "",
       date: null,
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobileNo: "",
       state: "",
-      joinDate: null
+      joinDate: null,
     },
     addTeachers: {
       role: "TEACHER",
       name: "",
       email: "",
       date: null,
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobileNo: "",
       state: "",
-      joinDate: null
+      joinDate: null,
     },
-    status: ""
+    status: "",
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
-    }
+    },
+    addTeacherDialog: function (val) {
+      if (!val) {
+        this.addTeachers = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.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...
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getTeacherList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.desserts)
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.editedItem.joinDate =
         this.editedItem.joinDate != undefined
           ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
               0,
               10
             ))
           : (this.editedItem.joinDate = "");
       this.editTeacherDialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewTeacherProfileDialog = true;
     },
     deleteItem(item) {
       let deleteTeachers = {
-        teacherId: item._id
+        teacherId: item._id,
       };
       http()
         .delete(
           "/deleteTeacher",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteTeachers
+            params: deleteTeachers,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Teacher";
           this.color = "green";
           this.getTeacherList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     closeEditTeacherDialog() {
       this.editTeacherDialog = false;
     },
     close1() {
       this.viewTeacherProfileDialog = false;
     },
     copyData() {
       this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addTeacher = {
           name: this.addTeachers.name,
           email: this.addTeachers.email,
           role: this.addTeachers.role,
           dob: this.addTeachers.date,
           city: this.addTeachers.city,
           pincode: this.addTeachers.pincode,
           country: this.addTeachers.country,
           permanentAddress: this.addTeachers.permanentAddress,
           presentAddress: this.addTeachers.presentAddress,
           mobileNo: this.addTeachers.mobileNo,
           state: this.addTeachers.state,
-          joinDate: this.addTeachers.joinDate
+          joinDate: this.addTeachers.joinDate,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addTeacher.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createTeacher", addTeacher)
-          .then(response => {
+          .then((response) => {
             this.imageUrl = "";
             this.getTeacherList();
             this.snackbar = true;
             this.text = "New Teacher added successfully";
             this.color = "green";
             this.clear();
             this.loading = false;
             this.addTeacherDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       this.loading = true;
       let editTeacher = {
         teacherId: 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,
         mobileNo: this.editedItem.mobileNo,
         state: this.editedItem.state,
-        joinDate: this.editedItem.joinDate
+        joinDate: this.editedItem.joinDate,
       };
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editTeacher.upload = imageUrl;
       }
       http()
         .put("/updateTeacher", editTeacher)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully Edit Existing Teacher";
           this.color = "green";
           this.loading = false;
           this.getTeacherList();
           this.closeEditTeacherDialog();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           this.loading = false;
         });
     },
     suspendStatus(suspendStatus, id) {
       let suspendStatusData = {
         teacherId: id,
-        status: suspendStatus
+        status: suspendStatus,
       };
       this.showLoader = true;
       http()
         .put("/suspendAccount", suspendStatusData)
-        .then(response => {
+        .then((response) => {
           this.getTeacherList();
           this.text = response.data.message;
           this.color = "green";
           this.snackbar = true;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     const getCountryList = countryList();
     this.countries = getCountryList;
     this.getTeacherList();
     this.role = this.$store.state.role;
-  }
+  },
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/pages/TimeTable/timeTable.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT TIME-TABLE****** -->
     <v-dialog v-model="dialog" max-width="600px">
       <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">
       <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">
       <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
+              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-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog">
       <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="addTimeTableDialog = false">cancel</v-icon>
+            <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
+      rowsPerPage: 15,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    timeInRules: [v => !!v || "Time In is required"],
+    timeInRules: [(v) => !!v || "Time In is required"],
-    timeOutRules: [v => !!v || "Time Out is required"],
+    timeOutRules: [(v) => !!v || "Time Out is required"],
-    lectureRules: [v => !!v || "Lecture No is required"],
+    lectureRules: [(v) => !!v || "Lecture No is required"],
-    subjectNameRules: [v => !!v || "Subject Name is required"],
+    subjectNameRules: [(v) => !!v || "Subject Name is required"],
-    classRules: [v => !!v || "Class Name is required"],
+    classRules: [(v) => !!v || "Class Name is required"],
-    sectionRules: [v => !!v || "Section Name is required"],
+    sectionRules: [(v) => !!v || "Section Name is required"],
-    sectionRules: [v => !!v || "Section Name is required"],
+    sectionRules: [(v) => !!v || "Section Name is required"],
-    teacherRules: [v => !!v || "Teacher Name is required"],
+    teacherRules: [(v) => !!v || "Teacher Name is required"],
-    selecDayRule: [v => !!v || "Day is required"],
+    selecDayRule: [(v) => !!v || "Day is required"],
-    dayRules: [v => !!v || "Day is required"],
+    dayRules: [(v) => !!v || "Day is required"],
     getParticulerLecture: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Class Name",
         value: "classData.classNum",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Section Name",
         value: "sectionData.name",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", 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"
+        align: "center",
       },
       { text: "Time In", value: "timeIn", sortable: false, align: "center" },
-      { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
+      { text: "Time Out", value: "timeOut", sortable: false, align: "center" },
     ],
     addOneDay: [
       "Monday",
       "Tuesday",
       "Wednesday",
       "Thursday",
       "Friday",
       "Saturday",
-      "Sunday"
+      "Sunday",
     ],
     schedule: {
-      selectDay: ""
+      selectDay: "",
     },
     desserts: [],
     timeTableList: [],
     editedIndex: -1,
     selectTimeTable: {
       select: "",
-      selectSection: ""
+      selectSection: "",
     },
     timeTable: {
       select: "",
       selectSection: "",
       selectDay: "",
       timeIn: null,
       timeOut: null,
       subjectName: "",
-      selectTeacher: ""
+      selectTeacher: "",
     },
     editedItem: {
       classNum: "",
-      selectSection: ""
+      selectSection: "",
     },
     addlectures: {
       timeIn: null,
       timeOut: null,
       subjectName: "",
       teacherId: "",
       scheduleId: "",
       timeTableId: "",
-      select: ""
+      select: "",
     },
     updateLectures: {
       timeIn: null,
       timeOut: null,
       subjectName: "",
       teacherId: "",
-      select: ""
+      select: "",
     },
     updateLecturesId: {
       lectureId: "",
-      scheduleId: ""
+      scheduleId: "",
     },
     menu1: false,
     menu2: false,
     menu3: false,
     menu4: false,
     menu5: false,
     menu6: false,
-    scheduleDayId: ""
+    scheduleDayId: "",
   }),
+  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
+            classId: this.selectTimeTable.select,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.loadingFindData = false;
         })
-        .catch(error => {
+        .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;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + token }
+            headers: { Authorization: "Bearer " + token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
         })
-        .catch(err => {
+        .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 }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .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 }
+            headers: { Authorization: "Bearer " + token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.timeTableList = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .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 => {
+          .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 }
+                  headers: { Authorization: "Bearer " + token },
                 }
               )
-              .then(response => {
+              .then((response) => {
                 this.timeTableList = response.data.data;
                 this.snackbar = true;
                 this.text = response.data.message;
                 this.color = "green";
                 this.showLoader = false;
               })
-              .catch(err => {
+              .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 => {
+          .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
+          teacherId: this.updateLectures.teacherId,
-        }
+        },
       };
       http()
         .put("/updateLecture", EditLecture)
-        .then(response => {
+        .then((response) => {
           console.log("updateLecture", EditLecture);
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.closeUpdateLectures();
         })
-        .catch(error => {
+        .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
+        timeTableId: item._id,
       };
       http()
         .delete(
           "/deleteTimeTable",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteTimeTable
+            params: deleteTimeTable,
           }
         )
-        .then(response => {
+        .then((response) => {
           // console.log("deleteUers",deleteTimeTable)
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.findTimeTable();
         })
-        .catch(error => {
+        .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
+                  teacherId: this.timeTable.selectTeacher,
-                }
+                },
-              ]
+              ],
-            }
+            },
-          ]
+          ],
         };
         this.loading = true;
         http()
           .post("/createTimeTable", addTimeTable)
-          .then(response => {
+          .then((response) => {
             // console.log("addTimeTable=====>", addTimeTable);
             if ((this.snackbar = true)) {
               this.text = "New Time Table added successfully";
             }
             this.color = "green";
             this.clear();
             this.addTimeTableDialog = false;
             this.loading = false;
           })
-          .catch(error => {
+          .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
+        sectionId: this.editedItem.selectSection,
         // imageData
       };
       http()
         .put("/updateTimeTable", editTimeTable)
-        .then(response => {
+        .then((response) => {
           console.log("editTimeTable", editTimeTable);
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing Time Table";
           }
           this.findTimeTable();
         })
-        .catch(error => {
+        .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
+        lectureId: timeToDelete._id,
       };
       http()
         .delete(
           "/deleteLecture",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteLecture
+            params: deleteLecture,
           }
         )
-        .then(response => {
+        .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 => {
+        .catch((error) => {
           console.log(error);
         });
     },
     addSchedule(id) {
       this.scheduleDayId = id;
       this.dialogSchedule = true;
     },
     submitSchedule() {
       if (this.$refs.formAddDay.validate()) {
         let scheduleDayData = {
           timeTableId: this.scheduleDayId,
-          day: this.schedule.selectDay
+          day: this.schedule.selectDay,
         };
         http()
           .post("/addSchedule", scheduleDayData)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = "New Schedule Day added successfully";
             this.dialogSchedule = false;
             this.loading = false;
             this.getTimeTableDayData();
           })
-          .catch(error => {
+          .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 }
+        headers: { Authorization: "Bearer " + token },
       })
-      .then(response => {
+      .then((response) => {
         this.addclass = response.data.data;
         // console.log("getClassesList=====>",this.addclass)
       })
-      .catch(error => {
+      .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 }
+        headers: { Authorization: "Bearer " + token },
       })
-      .then(response => {
+      .then((response) => {
         this.addTeachers = response.data.data;
         // console.log("getClassesList=====>",this.addTeachers)
       })
-      .catch(error => {
+      .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>

src/pages/User/user.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT USERS DETAILS ****** -->
     <v-dialog v-model="editUserDialog" max-width="1100px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit User</label>
             <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
               <v-avatar size="120px">
                 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
                 <img
                   :src="editedItem.profilePicUrl"
                   v-else-if="editedItem.profilePicUrl && !imageUrl"
                 />
                 <img
                   v-if="imageUrl"
                   :src="imageUrl"
                   height="150"
                   style="border-radius:50%; width:150px"
                 />
               </v-avatar>
               <input
                 type="file"
                 style="display:none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.name"
                     placeholder="fill your Name"
                     name="name"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Email ID:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     placeholder="fill your email"
                     v-model="editedItem.email"
                     type="text"
                     name="email"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <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="menu2"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.dob"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.dob"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @input="menu2 = 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">Gender:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-select
                     :items="gender"
                     v-model="editedItem.gender"
                     label="Select gender"
                     name="gender"
                     required
                   ></v-select>
                 </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">Religion:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.religion"
                     placeholder="fill your Religion"
                     name="religion"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">JoiningDate:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu3"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.joiningDate"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.joiningDate"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @input="menu3 = false"
                     ></v-date-picker>
                   </v-menu>
                 </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">Phone:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.phone"
                     placeholder="fill your MobileNo"
                     name="mobileNo"
                     type="number"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
                   <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-autocomplete
                     v-model="editedItem.role"
                     :label="editedItem.role"
                     :items="userRole"
                     item-text="name"
                     item-value="role"
                     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 hidden-sm-only hidden-xs-only">Uplaod Image:</label>
                   <label class="right hidden-lg-only hidden-xl-only hidden-md-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">Address:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     name="input-4-3"
                     v-model="editedItem.address"
                     placeholder="fill Your  Address"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions class="hidden-sm-only hidden-xs-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE User DETAILS ******  -->
     <v-dialog v-model="viewUserDialog" max-width="560px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View User</label>
             <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <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-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Email:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.email }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Gender:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.gender }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Religion:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.religion }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Role:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.role }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Phone:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.phone }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>JoiningDate:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <label class="right hidden-sm-only hidden-xs-only">
                         <b>Date of Birth:</b>
                       </label>
                       <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
                         <b>D.O.B:</b>
                       </label>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Address:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.address }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USER TABLE DATA****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addUserDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addUserDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add User
       </v-btn>
       <v-spacer></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 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-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="Users" :pagination.sync="pagination" :search="search">
       <template slot="items" slot-scope="props">
         <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="text-xs-center td td-row">{{ props.item.name}}</td>
         <td class="text-xs-center td td-row">{{ props.item.email }}</td>
         <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
         <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
         <td class="text-xs-center td td-row">{{ props.item.phone }}</td>
         <td class="text-xs-center td td-row">
           <v-switch
             class="pl-3"
             v-model="props.item.status"
             @change="suspendStatus(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>
               <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>
               <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>
       </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 BOX - Add User Data -->
-    <v-dialog v-model="addUserDialog" max-width="900px">
+    <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add User</label>
             <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex
                 xs12
                 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
               >
                 <v-avatar size="80px">
                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                 </v-avatar>
                 <img
                   :src="imageUrl"
                   height="150"
                   v-if="imageUrl"
                   style="border-radius:50%; width:150px"
                 />
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Name:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.name"
                       placeholder="fill your Name"
                       name="name"
                       type="text"
                       :rules="nameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Email ID:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       placeholder="fill your email"
                       :rules="emailRules"
                       v-model="addUser.email"
                       type="text"
                       name="email"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right 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="menu"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="dateRules"
                         v-model="addUser.dob"
                         placeholder="Select DOB"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addUser.dob"
                         :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">Gender:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       v-model="addUser.gender"
                       :items="gender"
                       label="Selct Gender "
                       :rules="genderRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Religion:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.religion"
                       placeholder="fill your Religion"
                       name="Religion"
                       type="text"
                       :rules="religionRules"
                       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">JoiningDate:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
                       ref="menu1"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="joinDateRules"
                         v-model="addUser.joinDate"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addUser.joinDate"
                         :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-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Phone :</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.mobileNo"
                       placeholder="fill your Phone Number"
                       name="mobileNo"
                       type="number"
                       :rules="mobileNoRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-autocomplete
                       v-model="addUser.role"
                       :rules="role"
                       :items="userRole"
                       item-text="name"
                       item-value="name"
                       placeholder="Select Role 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">Username:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.userName"
                       placeholder="fill your User Name"
                       type="text"
                       :rules="userNameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
-              </v-flex> -->
+              </v-flex>-->
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</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>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Address:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       name="input-4-3"
                       v-model="addUser.presentAddress"
                       :rules="presentAddress"
                       placeholder="fill Your present Address"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
                   <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-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";
 import moment from "moment";
-import _ from 'lodash';
+import _ from "lodash";
 export default {
   data: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     color: "",
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     addUserDialog: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     viewUserDialog: false,
     editUserDialog: false,
     valid: true,
     isActive: true,
     newActive: false,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    nameRules: [v => !!v || "Name is required"],
+    nameRules: [(v) => !!v || "Name is required"],
-    dateRules: [v => !!v || " DOB is required"],
+    dateRules: [(v) => !!v || " DOB is required"],
-    genderRules: [v => !!v || " Gender Name is required"],
+    genderRules: [(v) => !!v || " Gender Name is required"],
-    pincode: [v => !!v || " Pincode is required"],
+    pincode: [(v) => !!v || " Pincode is required"],
-    role: [v => !!v || "Role Name is required"],
+    role: [(v) => !!v || "Role Name is required"],
-    permanentAddress: [v => !!v || " Permanent Address is required"],
+    permanentAddress: [(v) => !!v || " Permanent Address is required"],
-    presentAddress: [v => !!v || " Present Address  is required"],
+    presentAddress: [(v) => !!v || " Present Address  is required"],
-    mobileNoRules: [v => !!v || "Phone Number is required"],
+    mobileNoRules: [(v) => !!v || "Phone Number is required"],
-    religionRules: [v => !!v || "Religion Name is required"],
+    religionRules: [(v) => !!v || "Religion Name is required"],
-    joinDateRules: [v => !!v || " Join Date is required"],
+    joinDateRules: [(v) => !!v || " Join Date is required"],
-    userNameRules: [v => !!v || " User Name is required"],
+    userNameRules: [(v) => !!v || " User Name is required"],
-    passwordRules: [v => !!v || " Password is required"],
+    passwordRules: [(v) => !!v || " Password is required"],
     errorMessages: "",
     userRole: [],
     emailRules: [
-      v => !!v || "E-mail is required",
+      (v) => !!v || "E-mail is required",
-      v =>
+      (v) =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-        "E-mail must be valid"
+        "E-mail must be valid",
     ],
     gender: ["Male", "Female"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "DOB", value: "dob", sortable: false, align: "center" },
       {
         text: "Joining Date",
         value: "joiningDate",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Phone",
         value: "phone",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Status",
         value: "status",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     Users: [],
     editedIndex: -1,
     upload: "",
     editedItem: {
       role: "",
       name: "",
       email: "",
       dob: null,
       gender: "",
       role: "",
       address: "",
       phone: "",
       religion: "",
-      joiningDate: null
+      joiningDate: null,
     },
     addUser: {
       role: "",
       name: "",
       email: "",
       dob: null,
       gender: "",
       pincode: "",
       role: "",
       permanentAddress: "",
       presentAddress: "",
       mobileNo: "",
       religion: "",
-      joiningDate: null
+      joiningDate: null,
-    }
+    },
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
-    }
+    },
+    addUserDialog: function (val) {
+      if (!val) {
+        this.addUser = [];
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.upload = e.target.files[0];
       console.log("imageData-upload========>", this.upload);
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
           // console.log("upload=======>", this.imageData.imageUrl);
           console.log("imageFile", this.imageUrl);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getUsersList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getUsersList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.Users = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.Users.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].role === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].name;
         }
       }
       this.editUserDialog = true;
     },
     profile(item) {
       this.editedIndex = this.Users.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewUserDialog = true;
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].role === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].name;
         }
       }
     },
     deleteItem(item) {
       let deleteUser = {
-        userId: item._id
+        userId: item._id,
       };
       http()
         .delete(
           "/deleteUser",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteUser
+            params: deleteUser,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getUsersList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editUserDialog = false;
     },
     closeProfileDialog() {
       this.viewUserDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addUserData = {
           name: this.addUser.name,
           email: this.addUser.email,
           dob: this.addUser.dob,
           gender: this.addUser.gender,
           religion: this.addUser.religion,
           role: this.addUser.role,
           address: this.addUser.presentAddress,
           phone: this.addUser.mobileNo,
           religion: this.addUser.religion,
-          joiningDate: this.addUser.joinDate
+          joiningDate: this.addUser.joinDate,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addUserData.profilePicUrl = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createUser", addUserData)
-          .then(response => {
+          .then((response) => {
             this.imageUrl = "";
             this.getUsersList();
             this.snackbar = true;
             this.addUserDialog = false;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.loading = false;
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       this.loading = true;
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].name === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].role;
         }
       }
       this.editedItem.userId = this.editedItem._id;
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         this.editedItem.upload = imageUrl;
       }
       http()
         .put("/updateUser", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.loading = false;
           this.getUsersList();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.loading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     getRole() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getRolesList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.userRole = response.data.data;
           this.showLoader = false;
           this.userRole = response.data.data;
-          var removedRoles = _.remove(this.userRole, function(c) {
+          var removedRoles = _.remove(this.userRole, function (c) {
             //remove if color is green or yellow
-            return c.name === "ADMIN" ||c.name === "SUPERADMIN" || c.name === "TEACHER" || c.name === "STUDENT" || c.name === "PARENT" ;
+            return (
-          });
+              c.name === "ADMIN" ||
+              c.name === "SUPERADMIN" ||
+              c.name === "TEACHER" ||
+              c.name === "STUDENT" ||
+              c.name === "PARENT"
+            );
+          });
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
         });
     },
     suspendStatus(suspendStatus, id) {
       let suspendStatusData = {
         userId: id,
-        status: suspendStatus
+        status: suspendStatus,
       };
       this.showLoader = true;
       http()
         .put("/suspendUserAccount", suspendStatusData)
-        .then(response => {
+        .then((response) => {
           this.getUsersList();
           this.text = response.data.message;
           this.snackbar = true;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error.response.data.data);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getUsersList();
     this.getRole();
-  }
+  },
 };

src/pages/meetingEvent/meetingEvent.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  EVENT  ****** -->
     <v-dialog v-model="editEventdialog" max-width="500px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Meeting Event</label>
             <v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-flex xs12 sm12>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Title:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-text-field v-model="editedItem.title" 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">Date:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-menu
                   ref="menu"
                   :close-on-content-click="false"
                   v-model="menuEditDate"
                   :nudge-right="40"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.dateOfEvent"
                     placeholder="Select date"
                   ></v-text-field>
                   <v-date-picker
                     color="info"
                     ref="picker"
                     v-model="editedItem.dateOfEvent"
                     @input="$refs.menu.save(editedItem.dateOfEvent)"
                   ></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">Start Time:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-menu
                   ref="menuEdit"
                   :close-on-content-click="false"
                   v-model="menuEditTime"
                   :nudge-right="40"
                   :return-value.sync="editedItem.startTime"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   max-width="290px"
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.startTime"
                     append-icon="access_time"
                     readonly
                   ></v-text-field>
                   <v-time-picker
                     v-model="editedItem.startTime"
                     format="24hr"
                     @change="$refs.menuEdit.save(editedItem.startTime)"
                   ></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">Duration:</label>
               </v-flex>
               <v-flex xs7 class="ml-3">
                 <v-text-field v-model="editedItem.duration" type="text"></v-text-field>
               </v-flex>
             </v-layout>
           </v-flex>
           <v-layout>
             <v-flex xs12>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW EVENT  ******  -->
     <v-dialog v-model="viewEventdialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Meeting Event</label>
             <v-icon size="24" class="right" @click="viewEventdialog = 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 xs4 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Date:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Start Time:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.startTime }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Type Of Event:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout v-if="editedItem.courseId">
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Course Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout v-if="editedItem.classId">
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Class:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.classId.classNum }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Duration:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.duration }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ******  EVENT 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="meetEventDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="meetEventDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
       </v-btn>
       <v-spacer></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-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="events" :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.classId ? props.item.classId.classNum : "-" }}</td>
           <td class="td td-row text-xs-center">{{ props.item.title }}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>
           <td class="td td-row text-xs-center">{{ props.item.startTime }}</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>
                 <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>
                 <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>
     <!-- ****** ADD MULTIPLE EVENT ****** -->
-    <v-dialog v-model="meetEventDialog" max-width="500px" persistent>
+    <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Meeting Event</label>
-            <v-icon size="24" class="right" @click="meetEventDialog = false; $refs.form.reset()">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="meetEventDialog = false; $refs.form.reset()"
+            >cancel</v-icon>
           </v-flex>
         </v-layout>
-        <v-form ref="form" v-model="valid" lazy-validation >
+        <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Title:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     v-model="meetEvent.title"
                     placeholder="fill your Title"
                     type="text"
                     :rules="titleRules"
                     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">Date:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-menu
                     ref="menu1"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="meetEvent.dateOfEvent"
                     app
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       :rules="dateRules"
                       v-model="meetEvent.dateOfEvent"
                       append-icon="event"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       color="info"
                       v-model="meetEvent.dateOfEvent"
                       @input="$refs.menu1.save(meetEvent.dateOfEvent)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Start Time:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-menu
                     ref="menuA"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="meetEvent.startTime"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="meetEvent.startTime"
                       placeholder="Select Start time"
                       append-icon="access_time"
                       :rules="startTimeRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="meetEvent.startTime"
                       format="24hr"
                       @change="$refs.menuA.save(meetEvent.startTime)"
                     ></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">Type Of Event:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-select
                     :items="typeOfEvent"
                     label="Select Type Of Event"
                     v-model="meetEvent.typeOfEvent"
                     :rules="typeOfEventRules"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 v-show="meetEvent.typeOfEvent">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-select
                     :items="addclass"
                     label="Select Class"
                     v-model="meetEvent.classId"
                     item-text="classNum"
                     item-value="_id"
                     @change="getCourses(meetEvent.classId)"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Courses:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-select
                     :items="courseData"
                     label="Select Course"
                     v-model="meetEvent.courseId"
                     item-text="courseName"
                     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">Duration</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="meetEvent.duration"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-layout class="right">
                   <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>
     <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,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     loading: false,
     date: null,
     search: "",
     color: "",
     show: true,
     meetEventDialog: false,
     showSearch: false,
     showLoader: false,
     editEventdialog: false,
     viewEventdialog: false,
     valid: true,
     addclass: [],
     courseData: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     date: null,
     menu1: false,
     menu: false,
     menuEditTime: false,
     menuEditDate: false,
-    titleRules: [v => !!v || " Tilte is required"],
+    titleRules: [(v) => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Discription is required"],
+    descriptionRules: [(v) => !!v || " Discription is required"],
-    dateRules: [v => !!v || "Date of event is required"],
+    dateRules: [(v) => !!v || "Date of event is required"],
-    startTimeRules: [v => !!v || "Start Time is required"],
+    startTimeRules: [(v) => !!v || "Start Time is required"],
-    typeOfEventRules: [v => !!v || "Type of event is required"],
+    typeOfEventRules: [(v) => !!v || "Type of event is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       {
         text: "Class",
         value: "classNum",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "Date Of Event",
         value: "dateOfEvent",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Start Time",
         value: "startTime",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     events: [],
     typeOfEvent: ["Class", "Course"],
     editedIndex: -1,
     meetEvent: {
-      startTime: null
+      startTime: null,
     },
     editedItem: {},
     menu1: false,
     menu2: false,
-    loginId: ""
+    loginId: "",
   }),
+  watch: {
+    meetEventDialog: function (val) {
+      if (!val) {
+        this.meetEvent = [];
+      }
+    },
+  },
   methods: {
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getEvents() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getMeetingEventesList", {
           params: { teacherId: this.loginId },
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.events = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.events.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.meetingEventId = item._id;
-      this.editedItem.startTime = moment(this.editedItem.startTime, ["h:mm A"]).format("HH:mm");
+      this.editedItem.startTime = moment(this.editedItem.startTime, [
+        "h:mm A",
+      ]).format("HH:mm");
       this.editEventdialog = true;
     },
     profile(item) {
       this.editedIndex = this.events.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewEventdialog = true;
     },
     deleteItem(item) {
       let deleteEvent = {
-        meetingEventId: item._id
+        meetingEventId: item._id,
       };
       http()
         .delete(
           "/deleteMeetingEvent",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteEvent
+            params: deleteEvent,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.getEvents();
           this.snackbar = true;
           this.color = "green";
           this.text = response.data.message;
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           this.loading = false;
         });
     },
     getAllClass() {
       http()
         .get("/getClassesList")
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getCourses(classId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
-            classId: classId
+            classId: classId,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.courseData = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     close() {
       this.editEventdialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
-        this.meetEvent.startTime = moment(this.meetEvent.startTime, "hh:mm").format("LT");
+        this.meetEvent.startTime = moment(
+          this.meetEvent.startTime,
+          "hh:mm"
+        ).format("LT");
         http()
           .post("/createMeetingEvent", this.meetEvent)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getEvents();
             this.clear();
             this.loading = false;
             this.meetEventDialog = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
-      console.log('=======this.editedItem=====', this.editedItem);
+      console.log("=======this.editedItem=====", this.editedItem);
       if (this.editedItem.courseId) {
         this.editedItem.courseId = this.editedItem.courseId._id;
       }
       delete this.editedItem.classId;
-      this.editedItem.startTime = moment(this.editedItem.startTime, "hh:mm").format("LT");
+      this.editedItem.startTime = moment(
+        this.editedItem.startTime,
+        "hh:mm"
+      ).format("LT");
       http()
         .put("/updateMeetingEvent", this.editedItem)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getEvents();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.loginId = this.$store.state.id;
     this.getEvents();
     this.getAllClass();
-  }
+  },
 };

src/pages/socialMedia/socialMedia.vue

Diff comments View file @8e8d142

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT Social Media ****** -->
     <v-dialog v-model="editSocialMediaDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Social Media</label>
             <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form">
           <v-container fluid>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Type:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-select
                     v-model="editedItem.type"
                     placeholder="fill your Title"
                     :items="socialLink"
                     item-text="name"
                     item-value="value"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Url lINK:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn round dark @click="save" class="add-button">Save</v-btn>
                   <v-spacer></v-spacer>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW Social ******  -->
     <v-dialog v-model="profileSocialMediaDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Social Media</label>
             <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout>
               <v-flex xs4 sm6>
                 <h5 class="right my-1">
                   <b>Title:</b>
                 </h5>
               </v-flex>
               <v-flex sm6 xs8>
                 <h5 class="my-1">{{ editedItem.type }}</h5>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 sm6>
                 <h5 class="right my-1">
                   <b>Description:</b>
                 </h5>
               </v-flex>
               <v-flex sm6 xs8>
                 <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Social 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="addSocialMediaDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addSocialMediaDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media
       </v-btn>
       <v-spacer></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-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-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"
     >
       <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.type}}</td>
           <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</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>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20 px; height:18px; "
                   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>
             </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 MULTIPLE REMINDER ****** -->
-    <v-dialog v-model="addSocialMediaDialog" max-width="400px">
+    <v-dialog v-model="addSocialMediaDialog" max-width="400px" v-if="addSocialMediaDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Social Media</label>
-            <v-icon size="24" class="right" @click="addSocialMediaDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddSocialMediaModel">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 xs4 class="pt-4 subheading">
                   <label class="right">Type:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-select
                     v-model="socialMedia.type"
                     :items="socialLink"
                     item-text="name"
                     item-value="value"
                     label="Selct Type"
                     type="text"
                     :rules="socialRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Link Url:</label>
                 </v-flex>
                 <v-flex xs8 sm8 class="ml-3">
                   <v-text-field
                     placeholder="fill your link url"
                     :rules="linkUrlnRules"
                     v-model="socialMedia.linkUrl"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
                   <v-spacer></v-spacer>
                   <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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     color: "",
     date: null,
     search: "",
     show: true,
     showSearch: false,
     addSocialMediaDialog: false,
     showLoader: false,
     editSocialMediaDialog: false,
     profileSocialMediaDialog: false,
     valid: true,
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    socialRules: [v => !!v || " Social media type is required"],
+    socialRules: [(v) => !!v || " Social media type is required"],
-    linkUrlnRules: [v => !!v || " Link Url is required"],
+    linkUrlnRules: [(v) => !!v || " Link Url is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
-        value: "No"
+        value: "No",
       },
       { text: "Type", value: "type", sortable: false, align: "center" },
       {
         text: "Link Url",
         value: "linkUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     desserts: [],
     editedIndex: -1,
     socialMedia: {},
     editedItem: {},
     socialLink: [
       {
         name: "Face Book",
-        value: "FACEBOOK"
+        value: "FACEBOOK",
       },
       {
         name: "You Tube",
-        value: "YOUTUBE"
+        value: "YOUTUBE",
-      }
+      },
     ],
-    userName: ""
+    userName: "",
   }),
+  watch: {
+    addSocialMediaDialog: function (val) {
+      if (!val) {
+        this.socialMedia = [];
+      }
+    },
+  },
   methods: {
     // pickFile() {
     //   this.$refs.image.click();
     // },
     // onFilePicked(e) {
     //   // console.log(e)
     //   const files = e.target.files;
     //   this.imageData.upload = e.target.files[0];
     //   if (files[0] !== undefined) {
     //     this.imageName = files[0].name;
     //     if (this.imageName.lastIndexOf(".") <= 0) {
     //       return;
     //     }
     //     const fr = new FileReader();
     //     fr.readAsDataURL(files[0]);
     //     fr.addEventListener("load", () => {
     //       this.imageUrl = fr.result;
     //       this.imageFile = files[0]; // this is an image file that can be sent to server...
     //       this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
     //       console.log("upload=======>", this.imageData.imageUrl);
     //       console.log("imageFile", this.imageFile);
     //     });
     //   } else {
     //     this.imageName = "";
     //     this.imageFile = "";
     //     this.imageUrl = "";
     //   }
     // },
     getSocialMedia() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getSocialList", {
-          headers: { Authorization: "Bearer " + token }
+          headers: { Authorization: "Bearer " + token },
         })
-        .then(response => {
+        .then((response) => {
           this.desserts = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editSocialMediaDialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileSocialMediaDialog = true;
     },
     deleteItem(item) {
       let deleteSocialMedia = {
-        socialId: item._id
+        socialId: item._id,
       };
       http()
         .delete(
           "/deleteSocial",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteSocialMedia
+            params: deleteSocialMedia,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSocialMedia();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editSocialMediaDialog = false;
     },
+    closeAddSocialMediaModel() {
+      this.addSocialMediaDialog = false;
+      this.socialMedia = [];
+    },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/addSocialLinks", this.socialMedia)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getSocialMedia();
             this.clear();
             this.addSocialMediaDialog = false;
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       (this.editedItem.socialId = this.editedItem._id),
         http()
           .put("/updateSocial", this.editedItem)
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.getSocialMedia();
             this.close();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.getSocialMedia();
-  }
+  },
 };
 </script>