viithiisys / School-Management-dashboard

Commit b039d39fb840c9c5ef7bb7bcf248f64ff4d51ccc

Authored by Shikha Mishra 2020-08-07 12:30:53 -0400

Exists in master and in 2 other branches

Hide Edit functionality in subject screen, Improve add and show functionality i…

…n syllabus screen, Hide Delete functionality in class screen, Improve add and show functionality in exam Attendence screen, Improve get exam schedule functionality in exam schedule screen, Fix issue while viewing marks in view mark screen, Hide Delete functionality in sectioin screen, Improve updateMeetingEvent api in meeting event screen, Improve add and show functionality in assignment screen

Showing 9 changed files with 94 additions and 37 deletions Show diff stats

src/pages/Academic/assignment.vue

Diff comments View file @b039d39

 <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>
-          <ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>
+          <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="pt-4 subheading">
+              <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(addAssignment.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(addAssignment.classId)"
+                  @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="addAssignment.classId"
+          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-show="showSearch">
         <v-layout>
           <v-text-field
             v-model="search"
             placeholder="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="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 != 'ADMIN' "
           >{{ props.item.teacherId.name }}</td>
           <td
             class="text-xs-center td td-row"
             v-if="role != 'TEACHER' "
           >{{ 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-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-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"]
   }),
   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;
     },
     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.addAssignment.classId }
+            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.editLoading = false;
             this.editAssignmentDialog = false;
             this.getAssignmentList();
           })
           .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/subject.vue

Diff comments View file @b039d39

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="editSubjectDialog" max-width="600px">	4	<v-dialog v-model="editSubjectDialog" max-width="600px">
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 Subject</label>	8	<label class="title text-xs-center">Edit Subject</label>
9	<v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editSubjectDialog = 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="formEditSubject" v-model="validEditSubject" lazy-validation>	13	<v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 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 class="ml-3">	18	<v-flex xs8 class="ml-3">
19	<v-select	19	<v-select
20	v-model="editedItem.classId"	20	v-model="editedItem.classId"
21	label="Select your class"	21	label="Select your class"
22	type="text"	22	type="text"
23	:items="classList"	23	:items="classList"
24	item-text="classNum"	24	item-text="classNum"
25	item-value="_id"	25	item-value="_id"
26	:rules="classRules"	26	:rules="classRules"
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 xs4 sm4 class="pt-4 subheading">	32	<v-flex xs4 sm4 class="pt-4 subheading">
33	<label class="right">Teacher Name :</label>	33	<label class="right">Teacher Name :</label>
34	</v-flex>	34	</v-flex>
35	<v-flex xs8 sm8 class="ml-3">	35	<v-flex xs8 sm8 class="ml-3">
36	<v-select	36	<v-select
37	v-model="editedItem.teacherId"	37	v-model="editedItem.teacherId"
38	label="Select your teacher"	38	label="Select your teacher"
39	type="text"	39	type="text"
40	:items="teacherList"	40	:items="teacherList"
41	item-text="name"	41	item-text="name"
42	item-value="_id"	42	item-value="_id"
43	:rules="teacherRules"	43	:rules="teacherRules"
44	required	44	required
45	></v-select>	45	></v-select>
46	</v-flex>	46	</v-flex>
47	</v-layout>	47	</v-layout>
48	<v-layout>	48	<v-layout>
49	<v-flex xs4 sm4 class="pt-4 sybheading">	49	<v-flex xs4 sm4 class="pt-4 sybheading">
50	<label class="right">Type :</label>	50	<label class="right">Type :</label>
51	</v-flex>	51	</v-flex>
52	<v-flex xs8 sm8 class="ml-3">	52	<v-flex xs8 sm8 class="ml-3">
53	<v-select	53	<v-select
54	v-model="editedItem.type"	54	v-model="editedItem.type"
55	:items="type"	55	:items="type"
56	label="Select your Type"	56	label="Select your Type"
57	:rules="typeRules"	57	:rules="typeRules"
58	required	58	required
59	></v-select>	59	></v-select>
60	</v-flex>	60	</v-flex>
61	</v-layout>	61	</v-layout>
62	<v-layout>	62	<v-layout>
63	<v-flex xs4 sm4 class="pt-4 subheading">	63	<v-flex xs4 sm4 class="pt-4 subheading">
64	<label class="right">Pass Mark :</label>	64	<label class="right">Pass Mark :</label>
65	</v-flex>	65	</v-flex>
66	<v-flex xs8 sm8 class="ml-3">	66	<v-flex xs8 sm8 class="ml-3">
67	<v-text-field	67	<v-text-field
68	label="Fill your Pass Mark"	68	label="Fill your Pass Mark"
69	name="name"	69	name="name"
70	type="text"	70	type="text"
71	:rules="markRules"	71	:rules="markRules"
72	v-model="editedItem.passMarks"	72	v-model="editedItem.passMarks"
73	required	73	required
74	></v-text-field>	74	></v-text-field>
75	</v-flex>	75	</v-flex>
76	</v-layout>	76	</v-layout>
77	<v-layout>	77	<v-layout>
78	<v-flex xs4 sm4 class="pt-4 subheading">	78	<v-flex xs4 sm4 class="pt-4 subheading">
79	<label class="right">Final Mark :</label>	79	<label class="right">Final Mark :</label>
80	</v-flex>	80	</v-flex>
81	<v-flex xs8 sm8 class="ml-3">	81	<v-flex xs8 sm8 class="ml-3">
82	<v-text-field	82	<v-text-field
83	label="Fill your final mark"	83	label="Fill your final mark"
84	name="name"	84	name="name"
85	type="text"	85	type="text"
86	:rules="finalRules"	86	:rules="finalRules"
87	v-model="editedItem.finalMarks"	87	v-model="editedItem.finalMarks"
88	required	88	required
89	></v-text-field>	89	></v-text-field>
90	</v-flex>	90	</v-flex>
91	</v-layout>	91	</v-layout>
92	<v-layout>	92	<v-layout>
93	<v-flex xs4 class="pt-4 subheading">	93	<v-flex xs4 class="pt-4 subheading">
94	<label class="right">Subject:</label>	94	<label class="right">Subject:</label>
95	</v-flex>	95	</v-flex>
96	<v-flex xs8 class="ml-3">	96	<v-flex xs8 class="ml-3">
97	<v-text-field	97	<v-text-field
98	placeholder="fill your Subject"	98	placeholder="fill your Subject"
99	v-model="editedItem.subjectName"	99	v-model="editedItem.subjectName"
100	:rules="subjectRules"	100	:rules="subjectRules"
101	type="text"	101	type="text"
102	name="email"	102	name="email"
103	required	103	required
104	></v-text-field>	104	></v-text-field>
105	</v-flex>	105	</v-flex>
106	</v-layout>	106	</v-layout>
107	<v-layout>	107	<v-layout>
108	<v-flex xs4 sm4 class="pt-4 subheading">	108	<v-flex xs4 sm4 class="pt-4 subheading">
109	<label class="right">Subject Author :</label>	109	<label class="right">Subject Author :</label>
110	</v-flex>	110	</v-flex>
111	<v-flex xs8 sm8 class="ml-3">	111	<v-flex xs8 sm8 class="ml-3">
112	<v-text-field	112	<v-text-field
113	v-model="editedItem.subjectAuthor"	113	v-model="editedItem.subjectAuthor"
114	placeholder="fill your Subject Author"	114	placeholder="fill your Subject Author"
115	name="name"	115	name="name"
116	type="text"	116	type="text"
117	></v-text-field>	117	></v-text-field>
118	</v-flex>	118	</v-flex>
119	</v-layout>	119	</v-layout>
120	<v-layout>	120	<v-layout>
121	<v-flex xs4 sm4 class="pt-4 subheading">	121	<v-flex xs4 sm4 class="pt-4 subheading">
122	<label class="right">Subject Code:</label>	122	<label class="right">Subject Code:</label>
123	</v-flex>	123	</v-flex>
124	<v-flex xs8 sm8 class="ml-3">	124	<v-flex xs8 sm8 class="ml-3">
125	<v-text-field	125	<v-text-field
126	v-model="editedItem.subjectCode"	126	v-model="editedItem.subjectCode"
127	placeholder="fill your Subject Code"	127	placeholder="fill your Subject Code"
128	name="name"	128	name="name"
129	type="text"	129	type="text"
130	></v-text-field>	130	></v-text-field>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	<v-flex xs12 sm12>	133	<v-flex xs12 sm12>
134	<v-card-actions>	134	<v-card-actions>
135	<v-spacer></v-spacer>	135	<v-spacer></v-spacer>
136	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Update Subject</v-btn>	136	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Update Subject</v-btn>
137	</v-card-actions>	137	</v-card-actions>
138	</v-flex>	138	</v-flex>
139	</v-form>	139	</v-form>
140	</v-container>	140	</v-container>
141	</v-card>	141	</v-card>
142	</v-dialog>	142	</v-dialog>
143		143
144	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	144	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
145		145
146	<v-dialog v-model="viewSubjectDialog" max-width="500px">	146	<v-dialog v-model="viewSubjectDialog" max-width="500px">
147	<v-card flat class="card-style pa-3" dark>	147	<v-card flat class="card-style pa-3" dark>
148	<v-layout>	148	<v-layout>
149	<v-flex xs12>	149	<v-flex xs12>
150	<label class="title text-xs-center">View Subject</label>	150	<label class="title text-xs-center">View Subject</label>
151	<v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>	151	<v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	<v-card-text>	154	<v-card-text>
155	<v-container grid-list-md>	155	<v-container grid-list-md>
156	<v-layout wrap>	156	<v-layout wrap>
157	<v-flex>	157	<v-flex>
158	<v-layout>	158	<v-layout>
159	<v-flex xs6 sm4>	159	<v-flex xs6 sm4>
160	<h5 class="right my-1">	160	<h5 class="right my-1">
161	<b>Subject Name:</b>	161	<b>Subject Name:</b>
162	</h5>	162	</h5>
163	</v-flex>	163	</v-flex>
164	<v-flex sm8 xs6>	164	<v-flex sm8 xs6>
165	<h5 class="my-1">{{ editedItem.subjectName }}</h5>	165	<h5 class="my-1">{{ editedItem.subjectName }}</h5>
166	</v-flex>	166	</v-flex>
167	</v-layout>	167	</v-layout>
168	<v-layout>	168	<v-layout>
169	<v-flex xs6 sm4>	169	<v-flex xs6 sm4>
170	<h5 class="right my-1">	170	<h5 class="right my-1">
171	<b>Subject Author:</b>	171	<b>Subject Author:</b>
172	</h5>	172	</h5>
173	</v-flex>	173	</v-flex>
174	<v-flex sm8 xs6>	174	<v-flex sm8 xs6>
175	<h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>	175	<h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
176	</v-flex>	176	</v-flex>
177	</v-layout>	177	</v-layout>
178	<v-layout>	178	<v-layout>
179	<v-flex xs6 sm4>	179	<v-flex xs6 sm4>
180	<h5 class="right my-1">	180	<h5 class="right my-1">
181	<b>Subject :</b>	181	<b>Subject :</b>
182	</h5>	182	</h5>
183	</v-flex>	183	</v-flex>
184	<v-flex sm8 xs6>	184	<v-flex sm8 xs6>
185	<h5 class="my-1">{{ editedItem.subjectCode }}</h5>	185	<h5 class="my-1">{{ editedItem.subjectCode }}</h5>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	<!-- <v-layout>	188	<!-- <v-layout>
189	<v-flex xs6 sm4>	189	<v-flex xs6 sm4>
190	<h5 class="right my-1">	190	<h5 class="right my-1">
191	<b>Teacher :</b>	191	<b>Teacher :</b>
192	</h5>	192	</h5>
193	</v-flex>	193	</v-flex>
194	<v-flex sm8 xs6>	194	<v-flex sm8 xs6>
195	<h5 class="my-1">{{ editedItem.teacherId }}</h5>	195	<h5 class="my-1">{{ editedItem.teacherId }}</h5>
196	</v-flex>	196	</v-flex>
197	</v-layout>-->	197	</v-layout>-->
198	<v-layout>	198	<v-layout>
199	<v-flex xs6 sm4>	199	<v-flex xs6 sm4>
200	<h5 class="right my-1">	200	<h5 class="right my-1">
201	<b>Pass Marks :</b>	201	<b>Pass Marks :</b>
202	</h5>	202	</h5>
203	</v-flex>	203	</v-flex>
204	<v-flex sm8 xs6>	204	<v-flex sm8 xs6>
205	<h5 class="my-1">{{ editedItem.passMarks }}</h5>	205	<h5 class="my-1">{{ editedItem.passMarks }}</h5>
206	</v-flex>	206	</v-flex>
207	</v-layout>	207	</v-layout>
208	<v-layout>	208	<v-layout>
209	<v-flex xs6 sm4>	209	<v-flex xs6 sm4>
210	<h5 class="right my-1">	210	<h5 class="right my-1">
211	<b>Final Marks :</b>	211	<b>Final Marks :</b>
212	</h5>	212	</h5>
213	</v-flex>	213	</v-flex>
214	<v-flex sm8 xs6>	214	<v-flex sm8 xs6>
215	<h5 class="my-1">{{ editedItem.finalMarks }}</h5>	215	<h5 class="my-1">{{ editedItem.finalMarks }}</h5>
216	</v-flex>	216	</v-flex>
217	</v-layout>	217	</v-layout>
218	<v-layout>	218	<v-layout>
219	<v-flex xs6 sm4>	219	<v-flex xs6 sm4>
220	<h5 class="right my-1">	220	<h5 class="right my-1">
221	<b>Type :</b>	221	<b>Type :</b>
222	</h5>	222	</h5>
223	</v-flex>	223	</v-flex>
224	<v-flex sm8 xs6>	224	<v-flex sm8 xs6>
225	<h5 class="my-1">{{ editedItem.type }}</h5>	225	<h5 class="my-1">{{ editedItem.type }}</h5>
226	</v-flex>	226	</v-flex>
227	</v-layout>	227	</v-layout>
228	</v-flex>	228	</v-flex>
229	</v-layout>	229	</v-layout>
230	</v-container>	230	</v-container>
231	</v-card-text>	231	</v-card-text>
232	</v-card>	232	</v-card>
233	</v-dialog>	233	</v-dialog>
234		234
235	<!-- **** EXISTING SUBJECTS TABLE **** -->	235	<!-- **** EXISTING SUBJECTS TABLE **** -->
236	<v-toolbar color="transparent" flat>	236	<v-toolbar color="transparent" flat>
237	<v-btn	237	<v-btn
238	fab	238	fab
239	dark	239	dark
240	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	240	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
241	small	241	small
242	@click="addSubjectDialog = true"	242	@click="addSubjectDialog = true"
243	>	243	>
244	<v-icon dark>add</v-icon>	244	<v-icon dark>add</v-icon>
245	</v-btn>	245	</v-btn>
246	<v-flex xs1 class="hidden-sm-only hidden-xs-only">	246	<v-flex xs1 class="hidden-sm-only hidden-xs-only">
247	<v-btn	247	<v-btn
248	round	248	round
249	class="open-dialog-button"	249	class="open-dialog-button"
250	dark	250	dark
251	@click="addSubjectDialog = true"	251	@click="addSubjectDialog = true"
252	v-if="role != 'TEACHER' "	252	v-if="role != 'TEACHER' "
253	>	253	>
254	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject	254	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
255	</v-btn>	255	</v-btn>
256	</v-flex>	256	</v-flex>
257	<v-spacer></v-spacer>	257	<v-spacer></v-spacer>
258	<v-flex lg2 md2 xs12 v-show="show">	258	<v-flex lg2 md2 xs12 v-show="show">
259	<v-select	259	<v-select
260	:items="classList"	260	:items="classList"
261	label="Select Your Class"	261	label="Select Your Class"
262	v-model="addSubject.classId"	262	v-model="addSubject.classId"
263	item-text="classNum"	263	item-text="classNum"
264	item-value="_id"	264	item-value="_id"
265	name="Select Class"	265	name="Select Class"
266	:rules="classRules"	266	:rules="classRules"
267	@change="getClassSubject"	267	@change="getClassSubject"
268	class="pl-2"	268	class="pl-2"
269	required	269	required
270	></v-select>	270	></v-select>
271	</v-flex>	271	</v-flex>
272	<v-card-title class="body-1" v-show="show">	272	<v-card-title class="body-1" v-show="show">
273	<v-btn icon flat @click="displaySearch">	273	<v-btn icon flat @click="displaySearch">
274	<v-avatar size="27">	274	<v-avatar size="27">
275	<img src="/static/icon/search.png" alt="icon" />	275	<img src="/static/icon/search.png" alt="icon" />
276	</v-avatar>	276	</v-avatar>
277	</v-btn>	277	</v-btn>
278	</v-card-title>	278	</v-card-title>
279	<v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">	279	<v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
280	<v-layout>	280	<v-layout>
281	<v-text-field	281	<v-text-field
282	v-model="search"	282	v-model="search"
283	label="Search"	283	label="Search"
284	prepend-inner-icon="search"	284	prepend-inner-icon="search"
285	color="primary"	285	color="primary"
286	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	286	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
287	></v-text-field>	287	></v-text-field>
288	<v-icon @click="closeSearch" color="error">close</v-icon>	288	<v-icon @click="closeSearch" color="error">close</v-icon>
289	</v-layout>	289	</v-layout>
290	</v-flex>	290	</v-flex>
291	</v-toolbar>	291	</v-toolbar>
292	<v-data-table	292	<v-data-table
293	:headers="headers"	293	:headers="headers"
294	:items="subjectList.subjects"	294	:items="subjectList.subjects"
295	:pagination.sync="pagination"	295	:pagination.sync="pagination"
296	:search="search"	296	:search="search"
297	>	297	>
298	<template slot="items" slot-scope="props">	298	<template slot="items" slot-scope="props">
299	<tr class="tr">	299	<tr class="tr">
300	<td class="td-row td">{{ props.index + 1 }}</td>	300	<td class="td-row td">{{ props.index + 1 }}</td>
301	<td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>	301	<td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
302	<td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>	302	<td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
303	<td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>	303	<td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
304	<!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->	304	<!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
305	<td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>	305	<td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
306	<td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>	306	<td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
307	<td class="text-xs-center td td-row">{{ props.item.type }}</td>	307	<td class="text-xs-center td td-row">{{ props.item.type }}</td>
308		308
309	<td class="text-xs-center td td-row">	309	<!-- <td class="text-xs-center td td-row">
310	<span>	310	<span>
311	<!-- <v-tooltip top>	311	<v-tooltip top>
312	<img	312	<img
313	slot="activator"	313	slot="activator"
314	style="cursor:pointer; width:25px; height:25px; "	314	style="cursor:pointer; width:25px; height:25px; "
315	class="mr-3"	315	class="mr-3"
316	@click="profile(props.item)"	316	@click="profile(props.item)"
317	src="/static/icon/view.png"	317	src="/static/icon/view.png"
318	/>	318	/>
319	<span>View</span>	319	<span>View</span>
320	</v-tooltip>-->	320	</v-tooltip>
321	<v-tooltip top>	321	<v-tooltip top>
322	<img	322	<img
323	slot="activator"	323	slot="activator"
324	style="cursor:pointer; width:20px; height:18px; "	324	style="cursor:pointer; width:20px; height:18px; "
325	class="mr-3"	325	class="mr-3"
326	@click="editItem(props.item)"	326	@click="editItem(props.item)"
327	src="/static/icon/edit.png"	327	src="/static/icon/edit.png"
328	/>	328	/>
329	<span>Edit</span>	329	<span>Edit</span>
330	</v-tooltip>	330	</v-tooltip>
331	<v-tooltip top>	331	<v-tooltip top>
332	<img	332	<img
333	slot="activator"	333	slot="activator"
334	style="cursor:pointer; width:20px; height:20px; "	334	style="cursor:pointer; width:20px; height:20px; "
335	class="mr-3"	335	class="mr-3"
336	@click="deleteItem(props.item)"	336	@click="deleteItem(props.item)"
337	src="/static/icon/delete.png"	337	src="/static/icon/delete.png"
338	/>	338	/>
339	<span>Delete</span>	339	<span>Delete</span>
340	</v-tooltip>	340	</v-tooltip>
341	</span>	341	</span>
342	</td>	342	</td> -->
343	</tr>	343	</tr>
344	</template>	344	</template>
345	<v-alert	345	<v-alert
346	slot="no-results"	346	slot="no-results"
347	:value="true"	347	:value="true"
348	color="error"	348	color="error"
349	icon="warning"	349	icon="warning"
350	>Your search for "{{ search }}" found no results.</v-alert>	350	>Your search for "{{ search }}" found no results.</v-alert>
351	</v-data-table>	351	</v-data-table>
352	<!-- **** ADD MULTIPLE Subject **** -->	352	<!-- **** ADD MULTIPLE Subject **** -->
353	<v-snackbar	353	<v-snackbar
354	:timeout="timeout"	354	:timeout="timeout"
355	:top="y === 'top'"	355	:top="y === 'top'"
356	:right="x === 'right'"	356	:right="x === 'right'"
357	:vertical="mode === 'vertical'"	357	:vertical="mode === 'vertical'"
358	v-model="snackbar"	358	v-model="snackbar"
359	:color="color"	359	:color="color"
360	>{{ text }}</v-snackbar>	360	>{{ text }}</v-snackbar>
361	<v-dialog v-model="addSubjectDialog" max-width="600px">	361	<v-dialog v-model="addSubjectDialog" max-width="600px">
362	<v-card flat class="card-style pa-2" dark>	362	<v-card flat class="card-style pa-2" dark>
363	<v-layout>	363	<v-layout>
364	<v-flex xs12>	364	<v-flex xs12>
365	<label class="title text-xs-center">Add Subject</label>	365	<label class="title text-xs-center">Add Subject</label>
366	<v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon>	366	<v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon>
367	</v-flex>	367	</v-flex>
368	</v-layout>	368	</v-layout>
369	<v-container fluid fill-height>	369	<v-container fluid fill-height>
370	<v-layout align-center>	370	<v-layout align-center>
371	<v-flex xs12>	371	<v-flex xs12>
372	<v-form ref="form" v-model="valid" lazy-validation>	372	<v-form ref="form" v-model="valid" lazy-validation>
373	<v-layout>	373	<v-layout>
374	<v-flex xs4 sm4 class="pt-4 subheading">	374	<v-flex xs4 sm4 class="pt-4 subheading">
375	<label class="right">Class Name :</label>	375	<label class="right">Class Name :</label>
376	</v-flex>	376	</v-flex>
377	<v-flex xs8 sm8 class="ml-3">	377	<v-flex xs8 sm8 class="ml-3">
378	<v-select	378	<v-select
379	v-model="addSubject.classId"	379	v-model="addSubject.classId"
380	label="Select your class"	380	label="Select your class"
381	type="text"	381	type="text"
382	:items="classList"	382	:items="classList"
383	item-text="classNum"	383	item-text="classNum"
384	item-value="_id"	384	item-value="_id"
385	:rules="classRules"	385	:rules="classRules"
386	required	386	required
387	></v-select>	387	></v-select>
388	</v-flex>	388	</v-flex>
389	</v-layout>	389	</v-layout>
390	<v-layout>	390	<v-layout>
391	<v-flex xs4 sm4 class="pt-4 subheading">	391	<v-flex xs4 sm4 class="pt-4 subheading">
392	<label class="right">Teacher Name :</label>	392	<label class="right">Teacher Name :</label>
393	</v-flex>	393	</v-flex>
394	<v-flex xs8 sm8 class="ml-3">	394	<v-flex xs8 sm8 class="ml-3">
395	<v-select	395	<v-select
396	v-model="addSubject.teacherId"	396	v-model="addSubject.teacherId"
397	label="Select your teacher"	397	label="Select your teacher"
398	type="text"	398	type="text"
399	:items="teacherList"	399	:items="teacherList"
400	item-text="name"	400	item-text="name"
401	item-value="_id"	401	item-value="_id"
402	:rules="teacherRules"	402	:rules="teacherRules"
403	required	403	required
404	></v-select>	404	></v-select>
405	</v-flex>	405	</v-flex>
406	</v-layout>	406	</v-layout>
407	<v-layout>	407	<v-layout>
408	<v-flex xs4 sm4 class="pt-4 sybheading">	408	<v-flex xs4 sm4 class="pt-4 sybheading">
409	<label class="right">Type :</label>	409	<label class="right">Type :</label>
410	</v-flex>	410	</v-flex>
411	<v-flex xs8 sm8 class="ml-3">	411	<v-flex xs8 sm8 class="ml-3">
412	<v-select	412	<v-select
413	v-model="addSubject.type"	413	v-model="addSubject.type"
414	:items="type"	414	:items="type"
415	label="Select your Type"	415	label="Select your Type"
416	:rules="typeRules"	416	:rules="typeRules"
417	required	417	required
418	></v-select>	418	></v-select>
419	</v-flex>	419	</v-flex>
420	</v-layout>	420	</v-layout>
421	<v-layout>	421	<v-layout>
422	<v-flex xs4 sm4 class="pt-4 subheading">	422	<v-flex xs4 sm4 class="pt-4 subheading">
423	<label class="right">Pass Mark :</label>	423	<label class="right">Pass Mark :</label>
424	</v-flex>	424	</v-flex>
425	<v-flex xs8 sm8 class="ml-3">	425	<v-flex xs8 sm8 class="ml-3">
426	<v-text-field	426	<v-text-field
427	label="Fill your Pass Mark"	427	label="Fill your Pass Mark"
428	name="name"	428	name="name"
429	type="text"	429	type="text"
430	:rules="markRules"	430	:rules="markRules"
431	v-model="addSubject.passMarks"	431	v-model="addSubject.passMarks"
432	required	432	required
433	></v-text-field>	433	></v-text-field>
434	</v-flex>	434	</v-flex>
435	</v-layout>	435	</v-layout>
436	<v-layout>	436	<v-layout>
437	<v-flex xs4 sm4 class="pt-4 subheading">	437	<v-flex xs4 sm4 class="pt-4 subheading">
438	<label class="right">Final Mark :</label>	438	<label class="right">Final Mark :</label>
439	</v-flex>	439	</v-flex>
440	<v-flex xs8 sm8 class="ml-3">	440	<v-flex xs8 sm8 class="ml-3">
441	<v-text-field	441	<v-text-field
442	label="Fill your final mark"	442	label="Fill your final mark"
443	name="name"	443	name="name"
444	type="text"	444	type="text"
445	:rules="finalRules"	445	:rules="finalRules"
446	v-model="addSubject.finalMarks"	446	v-model="addSubject.finalMarks"
447	required	447	required
448	></v-text-field>	448	></v-text-field>
449	</v-flex>	449	</v-flex>
450	</v-layout>	450	</v-layout>
451	<v-layout>	451	<v-layout>
452	<v-flex xs4 sm4 class="pt-4 subheading">	452	<v-flex xs4 sm4 class="pt-4 subheading">
453	<label class="right">Subject :</label>	453	<label class="right">Subject :</label>
454	</v-flex>	454	</v-flex>
455	<v-flex xs8 sm8 class="ml-3">	455	<v-flex xs8 sm8 class="ml-3">
456	<v-text-field	456	<v-text-field
457	v-model="addSubject.subjectName"	457	v-model="addSubject.subjectName"
458	placeholder="fill your Subject Name"	458	placeholder="fill your Subject Name"
459	name="name"	459	name="name"
460	type="text"	460	type="text"
461	:rules="subjectRules"	461	:rules="subjectRules"
462	required	462	required
463	></v-text-field>	463	></v-text-field>
464	</v-flex>	464	</v-flex>
465	</v-layout>	465	</v-layout>
466	<v-layout>	466	<v-layout>
467	<v-flex xs4 sm4 class="pt-4 subheading">	467	<v-flex xs4 sm4 class="pt-4 subheading">
468	<label class="right">Subject Author :</label>	468	<label class="right">Subject Author :</label>
469	</v-flex>	469	</v-flex>
470	<v-flex xs8 sm8 class="ml-3">	470	<v-flex xs8 sm8 class="ml-3">
471	<v-text-field	471	<v-text-field
472	v-model="addSubject.subjectAuthor"	472	v-model="addSubject.subjectAuthor"
473	placeholder="fill your Subject Author"	473	placeholder="fill your Subject Author"
474	name="name"	474	name="name"
475	type="text"	475	type="text"
476	></v-text-field>	476	></v-text-field>
477	</v-flex>	477	</v-flex>
478	</v-layout>	478	</v-layout>
479	<v-layout>	479	<v-layout>
480	<v-flex xs4 sm4 class="pt-4 subheading">	480	<v-flex xs4 sm4 class="pt-4 subheading">
481	<label class="right">Subject Code:</label>	481	<label class="right">Subject Code:</label>
482	</v-flex>	482	</v-flex>
483	<v-flex xs8 sm8 class="ml-3">	483	<v-flex xs8 sm8 class="ml-3">
484	<v-text-field	484	<v-text-field
485	v-model="addSubject.subjectCode"	485	v-model="addSubject.subjectCode"
486	placeholder="fill your Subject Code"	486	placeholder="fill your Subject Code"
487	name="name"	487	name="name"
488	type="text"	488	type="text"
489	></v-text-field>	489	></v-text-field>
490	</v-flex>	490	</v-flex>
491	</v-layout>	491	</v-layout>
492	<v-layout>	492	<v-layout>
493	<v-flex xs12 sm12>	493	<v-flex xs12 sm12>
494	<v-card-actions>	494	<v-card-actions>
495	<v-spacer></v-spacer>	495	<v-spacer></v-spacer>
496	<v-btn	496	<v-btn
497	@click="submit"	497	@click="submit"
498	round	498	round
499	dark	499	dark
500	:loading="addLoading"	500	:loading="addLoading"
501	class="add-button"	501	class="add-button"
502	>Add Subject</v-btn>	502	>Add Subject</v-btn>
503	</v-card-actions>	503	</v-card-actions>
504	</v-flex>	504	</v-flex>
505	</v-layout>	505	</v-layout>
506	</v-form>	506	</v-form>
507	</v-flex>	507	</v-flex>
508	</v-layout>	508	</v-layout>
509	</v-container>	509	</v-container>
510	</v-card>	510	</v-card>
511	</v-dialog>	511	</v-dialog>
512	<div class="loader" v-if="showLoader">	512	<div class="loader" v-if="showLoader">
513	<v-progress-circular indeterminate color="white"></v-progress-circular>	513	<v-progress-circular indeterminate color="white"></v-progress-circular>
514	</div>	514	</div>
515	</v-container>	515	</v-container>
516	</template>	516	</template>
517		517
518	<script>	518	<script>
519	import http from "@/Services/http.js";	519	import http from "@/Services/http.js";
520	import Util from "@/util";	520	import Util from "@/util";
521		521
522	export default {	522	export default {
523	data: () => ({	523	data: () => ({
524	snackbar: false,	524	snackbar: false,
525	y: "top",	525	y: "top",
526	x: "right",	526	x: "right",
527	role: "",	527	role: "",
528	mode: "",	528	mode: "",
529	timeout: 3000,	529	timeout: 3000,
530	text: "",	530	text: "",
531	color: "",	531	color: "",
532	show: true,	532	show: true,
533	showSearch: false,	533	showSearch: false,
534	showLoader: false,	534	showLoader: false,
535	loading: false,	535	loading: false,
536	editLoading: false,	536	editLoading: false,
537	addLoading: false,	537	addLoading: false,
538	date: null,	538	date: null,
539	search: "",	539	search: "",
540	viewSubjectDialog: false,	540	viewSubjectDialog: false,
541	editSubjectDialog: false,	541	editSubjectDialog: false,
542	valid: true,	542	valid: true,
543	validEditSubject: true,	543	validEditSubject: true,
544	addSubjectDialog: false,	544	addSubjectDialog: false,
545	// isActive: true,	545	// isActive: true,
546	// newActive: false,	546	// newActive: false,
547	type: ["Optional", "Mandatory"],	547	type: ["Optional", "Mandatory"],
548	pagination: {	548	pagination: {
549	rowsPerPage: 10	549	rowsPerPage: 10
550	},	550	},
551	token: "",	551	token: "",
552	classRules: [v => !!v \|\| " Class Name is required"],	552	classRules: [v => !!v \|\| " Class Name is required"],
553	teacherRules: [v => !!v \|\| " Teacher Name is required"],	553	teacherRules: [v => !!v \|\| " Teacher Name is required"],
554	typeRules: [v => !!v \|\| "Type is required"],	554	typeRules: [v => !!v \|\| "Type is required"],
555	markRules: [v => !!v \|\| " Pass Mark is required"],	555	markRules: [v => !!v \|\| " Pass Mark is required"],
556	finalRules: [v => !!v \|\| "Final MArk is required"],	556	finalRules: [v => !!v \|\| "Final MArk is required"],
557	subjectRules: [v => !!v \|\| " Subject Name is required"],	557	subjectRules: [v => !!v \|\| " Subject Name is required"],
558	headers: [	558	headers: [
559	{	559	{
560	text: "No",	560	text: "No",
561	align: "",	561	align: "",
562	sortable: false,	562	sortable: false,
563	value: "No"	563	value: "No"
564	},	564	},
565	{	565	{
566	text: "Subject Name",	566	text: "Subject Name",
567	value: "subjectName",	567	value: "subjectName",
568	sortable: false,	568	sortable: false,
569	align: "center"	569	align: "center"
570	},	570	},
571	{	571	{
572	text: "Subject Author",	572	text: "Subject Author",
573	value: "subjectAuthor",	573	value: "subjectAuthor",
574	sortable: false,	574	sortable: false,
575	align: "center"	575	align: "center"
576	},	576	},
577	{	577	{
578	text: "Subject Code",	578	text: "Subject Code",
579	value: "subjectCode",	579	value: "subjectCode",
580	sortable: false,	580	sortable: false,
581	align: "center"	581	align: "center"
582	},	582	},
583	// {	583	// {
584	// text: "Teacher",	584	// text: "Teacher",
585	// value: "teacherId",	585	// value: "teacherId",
586	// sortable: false,	586	// sortable: false,
587	// align: "center"	587	// align: "center"
588	// },	588	// },
589	{	589	{
590	text: "Pass Marks",	590	text: "Pass Marks",
591	value: "passMarks",	591	value: "passMarks",
592	sortable: false,	592	sortable: false,
593	align: "center"	593	align: "center"
594	},	594	},
595	{	595	{
596	text: "Final Marks",	596	text: "Final Marks",
597	value: "finalMarks",	597	value: "finalMarks",
598	sortable: false,	598	sortable: false,
599	align: "center"	599	align: "center"
600	},	600	},
601	{	601	{
602	text: "Type",	602	text: "Type",
603	value: "type",	603	value: "type",
604	sortable: false,	604	sortable: false,
605	align: "center"	605	align: "center"
606	},	606	},
607	{ text: "Action", value: "", sortable: false, align: "center" }	607	// { text: "Action", value: "", sortable: false, align: "center" }
608	],	608	],
609	subjectList: [],	609	subjectList: [],
610	classList: [],	610	classList: [],
611	teacherList: [],	611	teacherList: [],
612	editedIndex: -1,	612	editedIndex: -1,
613	addSubject: {},	613	addSubject: {},
614		614
615	editedItem: {	615	editedItem: {
616	// subjectName: "",	616	// subjectName: "",
617	// subjectAuthor: ""	617	// subjectAuthor: ""
618	}	618	}
619	}),	619	}),
620	methods: {	620	methods: {
621	pickFile() {	621	pickFile() {
622	this.$refs.image.click();	622	this.$refs.image.click();
623	},	623	},
624	editItem(item) {	624	editItem(item) {
625	this.editedIndex = this.subjectList.subjects;	625	this.editedIndex = this.subjectList.subjects;
626	this.editedItem = Object.assign({}, item);	626	this.editedItem = Object.assign({}, item);
627	this.dialog = true;	627	this.dialog = true;
628	this.editSubjectDialog = true;	628	this.editSubjectDialog = true;
629	},	629	},
630	profile(item) {	630	profile(item) {
631	this.editedIndex = this.subjectList.subjects;	631	this.editedIndex = this.subjectList.subjects;
632	this.editedItem = Object.assign({}, item);	632	this.editedItem = Object.assign({}, item);
633	this.dialog1 = true;	633	this.dialog1 = true;
634	this.viewSubjectDialog = true;	634	this.viewSubjectDialog = true;
635	},	635	},
636	deleteItem(item) {	636	deleteItem(item) {
637	let deleteSubject = {	637	let deleteSubject = {
638	classId: this.addSubject.classId,	638	classId: this.addSubject.classId,
639	subjectId: item._id	639	subjectId: item._id
640	};	640	};
641	http()	641	http()
642	.delete(	642	.delete(
643	"/deleteSubject",	643	"/deleteSubject",
644	confirm("Are you sure you want to delete this?") && {	644	confirm("Are you sure you want to delete this?") && {
645	params: deleteSubject	645	params: deleteSubject
646	}	646	}
647	)	647	)
648	.then(response => {	648	.then(response => {
649	this.snackbar = true;	649	this.snackbar = true;
650	this.color = "green";	650	this.color = "green";
651	this.text = "Successfully delete Existing Subject";	651	this.text = "Successfully delete Existing Subject";
652	this.getClassSubject(this.addSubject.classId);	652	this.getClassSubject(this.addSubject.classId);
653	})	653	})
654	.catch(error => {	654	.catch(error => {
655	// this.snackbar = true;	655	// this.snackbar = true;
656	// this.text = error.response.data.message;	656	// this.text = error.response.data.message;
657	// this.color = "error";	657	// this.color = "error";
658	console.log("error", error);	658	console.log("error", error);
659	});	659	});
660	},	660	},
661	close() {	661	close() {
662	this.editSubjectDialog = false;	662	this.editSubjectDialog = false;
663	},	663	},
664	close1() {	664	close1() {
665	this.viewSubjectDialog = false;	665	this.viewSubjectDialog = false;
666	},	666	},
667	submit() {	667	submit() {
668	if (this.$refs.form.validate()) {	668	if (this.$refs.form.validate()) {
669	this.addLoading = true;	669	this.addLoading = true;
670	http()	670	http()
671	.post("/addSubject", this.addSubject)	671	.post("/addSubject", this.addSubject)
672	.then(response => {	672	.then(response => {
673	this.snackbar = true;	673	this.snackbar = true;
674	this.text = "New Subject added successfully";	674	this.text = "New Subject added successfully";
675	this.color = "green";	675	this.color = "green";
676	this.addLoading = false;	676	this.addLoading = false;
677	this.addSubjectDialog = false;	677	this.addSubjectDialog = false;
678	this.getClassSubject(_id);	678	this.getClassSubject(_id);
679	})	679	})
680	.catch(error => {	680	.catch(error => {
681	this.addLoading = false;	681	this.addLoading = false;
682	});	682	});
683	}	683	}
684	},	684	},
685	clear() {	685	clear() {
686	this.$refs.form.reset();	686	this.$refs.form.reset();
687	},	687	},
688	save() {	688	save() {
689	if (this.$refs.formEditSubject.validate()) {	689	if (this.$refs.formEditSubject.validate()) {
690	let editSubject = {	690	let editSubject = {
691	classId: this.editedItem.classId,	691	classId: this.editedItem.classId,
692	subjectId: this.editedItem._id,	692	subjectId: this.editedItem._id,
693	teacherId: this.editedItem.teacherId,	693	teacherId: this.editedItem.teacherId,
694	type: this.editedItem.type,	694	type: this.editedItem.type,
695	passMarks: this.editedItem.passMarks,	695	passMarks: this.editedItem.passMarks,
696	finalMarks: this.editedItem.finalMarks,	696	finalMarks: this.editedItem.finalMarks,
697	subjectAuthor: this.editedItem.subjectAuthor,	697	subjectAuthor: this.editedItem.subjectAuthor,
698	subjectCode: this.editedItem.subjectCode,	698	subjectCode: this.editedItem.subjectCode,
699	subjectName: this.editedItem.subjectName	699	subjectName: this.editedItem.subjectName
700	};	700	};
701	this.editLoading = true;	701	this.editLoading = true;
702	http()	702	http()
703	.put("/updateSubject", editSubject)	703	.put("/updateSubject", editSubject)
704	.then(response => {	704	.then(response => {
705	this.snackbar = true;	705	this.snackbar = true;
706	this.text = "Successfully Edit Existing Subject";	706	this.text = "Successfully Edit Existing Subject";
707	this.color = "green";	707	this.color = "green";
708	this.editLoading = false;	708	this.editLoading = false;
709	this.editSubjectDialog = false;	709	this.editSubjectDialog = false;
710	this.getClassSubject(this.editedItem.classId);	710	this.getClassSubject(this.editedItem.classId);
711	})	711	})
712	.catch(error => {	712	.catch(error => {
713	this.editLoading = false;	713	this.editLoading = false;
714		714
715	// console.log(error);	715	// console.log(error);
716	});	716	});
717	}	717	}
718	},	718	},
719	getClassSubject(_id) {	719	getClassSubject(_id) {
720	this.showLoader = true;	720	this.showLoader = true;
721	console.log("class", _id);	721	console.log("class", _id);
722	// this.classId = this.classId;	722	// this.classId = this.classId;
723	http()	723	http()
724	.get(	724	.get(
725	"/getParticularClass",	725	"/getParticularClass",
726	{ params: { classId: _id } },	726	{ params: { classId: _id } },
727	{	727	{
728	headers: { Authorization: "Bearer " + this.token }	728	headers: { Authorization: "Bearer " + this.token }
729	}	729	}
730	)	730	)
731	.then(response => {	731	.then(response => {
732	this.subjectList = response.data.data;	732	this.subjectList = response.data.data;
733	this.showLoader = false;	733	this.showLoader = false;
734	})	734	})
735	.catch(err => {	735	.catch(err => {
736	this.showLoader = false;	736	this.showLoader = false;
737	});	737	});
738	},	738	},
739	getClass() {	739	getClass() {
740	http()	740	http()
741	.get("/getClassesList", {	741	.get("/getClassesList", {
742	headers: { Authorization: "Bearer " + this.token }	742	headers: { Authorization: "Bearer " + this.token }
743	})	743	})
744	.then(response => {	744	.then(response => {
745	this.classList = response.data.data;	745	this.classList = response.data.data;
746	})	746	})
747	.catch(error => {	747	.catch(error => {
748	if (error.response.status === 401) {	748	if (error.response.status === 401) {
749	this.$router.replace({ path: "/" });	749	this.$router.replace({ path: "/" });
750	this.$store.dispatch("setToken", null);	750	this.$store.dispatch("setToken", null);
751	this.$store.dispatch("Id", null);	751	this.$store.dispatch("Id", null);
752	}	752	}
753	});	753	});
754	},	754	},
755	getTeacherList() {	755	getTeacherList() {
756	this.showLoader = true;	756	this.showLoader = true;
757	var token = this.$store.state.token;	757	var token = this.$store.state.token;
758	http()	758	http()
759	.get("/getTeachersList", {	759	.get("/getTeachersList", {
760	headers: { Authorization: "Bearer " + token }	760	headers: { Authorization: "Bearer " + token }
761	})	761	})
762	.then(response => {	762	.then(response => {
763	this.teacherList = response.data.data;	763	this.teacherList = response.data.data;
764	this.showLoader = false;	764	this.showLoader = false;
765	// console.log("getTeacherList=====>",this.desserts)	765	// console.log("getTeacherList=====>",this.desserts)
766	})	766	})
767	.catch(error => {	767	.catch(error => {
768	this.showLoader = false;	768	this.showLoader = false;
769	if (error.response.status === 401) {	769	if (error.response.status === 401) {
770	this.$router.replace({ path: "/" });	770	this.$router.replace({ path: "/" });
771	this.$store.dispatch("setToken", null);	771	this.$store.dispatch("setToken", null);
772	this.$store.dispatch("Id", null);	772	this.$store.dispatch("Id", null);
773	}	773	}
774	});	774	});
775	},	775	},
776	displaySearch() {	776	displaySearch() {
777	(this.show = false), (this.showSearch = true);	777	(this.show = false), (this.showSearch = true);
778	},	778	},
779	closeSearch() {	779	closeSearch() {
780	this.showSearch = false;	780	this.showSearch = false;
781	this.show = true;	781	this.show = true;
782	this.search = "";	782	this.search = "";
783	}	783	}
784	},	784	},
785	mounted() {	785	mounted() {
786	this.token = this.$store.state.token;	786	this.token = this.$store.state.token;
787	// this.getNoticeDataList();	787	// this.getNoticeDataList();
788	this.getClass();	788	this.getClass();
789	this.getTeacherList();	789	this.getTeacherList();
790	this.role = this.$store.state.role;	790	this.role = this.$store.state.role;
791	}	791	}
792	};	792	};
793	</script>	793	</script>

src/pages/Academic/syllabus.vue

Diff comments View file @b039d39

 <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="addSyllabus.classId"
+          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-show="showSearch">
         <v-layout>
           <v-text-field
             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
             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-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-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
     },
     token: "",
     upload: "",
     titleRules: [v => !!v || " Title is required"],
     descriptionRules: [v => !!v || " Description is required"],
     classRules: [v => !!v || " Class Name is required"],
     fileRules: [v => !!v || " File is required"],
     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: "Date",
         value: "created",
         sortable: false,
         align: "center"
       },
       {
         text: "Uploader",
         value: "upload",
         sortable: false,
         align: "center"
       },
       {
         text: "File",
         value: "documentUrl",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     syllabusList: [],
     classList: [],
     addSection: [],
     editedIndex: -1,
     addSyllabus: {},
+    showSyllabus: {},
     editedItem: {
       subjectName: ""
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: ""
   }),
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     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
       };
       http()
         .delete(
           "/deleteSyallabus",
           confirm("Are you sure you want to delete this?") && {
             params: deleteSyallabus
           }
         )
         .then(response => {
           this.getSyallabusList();
           this.snackbar = true;
           this.color = "green";
           this.text = "Successfully delete Existing Syllabus";
         })
         .catch(error => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editSyllabusDialog = false;
     },
     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"
       };
       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 => {
             this.getSyallabusList();
             this.snackbar = true;
             this.text = "Syllabus added successfully";
             this.clear();
             this.color = "green";
             this.addSyllabusDialog = false;
           })
           .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
         };
         this.editLoading = true;
         var signatures = {
           JVBERi0: "other",
           iVBORw0KGgo: "image",
           UEsDBBQ: "other",
           "/": "image",
           AAABAA: "image",
           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 => {
             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 }
                 }
               )
               .then(response => {
                 this.syllabusList = response.data.data;
                 this.getSyallabusList();
                 this.snackbar = true;
                 this.color = "green";
                 this.close();
               })
               .catch(err => {
                 console.log("err====>", err);
                 this.text = error.response.data.message;
                 this.color = "error";
               });
           })
           .catch(error => {
             this.editLoading = false;
           });
       }
     },
     getSyallabusList() {
       this.showLoader = true;
       http()
         .get(
           "/getSyallabusList",
-          { params: { classId: this.addSyllabus.classId } },
+          { params: { classId: this.showSyllabus.classId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.syllabusList = 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);
           }
         });
     },
     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;
         });
     },
     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();
   }
 };
 </script>

src/pages/Class/addclass.vue

Diff comments View file @b039d39

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT ClASS **** -->	3	<!-- **** EDIT ClASS **** -->
4	<v-dialog v-model="editClassDialog" max-width="400px">	4	<v-dialog v-model="editClassDialog" max-width="400px">
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 Class</label>	8	<label class="title text-xs-center">Edit Class</label>
9	<v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editClassDialog = 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-layout justify-center>	13	<v-layout justify-center>
14	<v-flex xs12 sm12>	14	<v-flex xs12 sm12>
15	<v-flex xs12>	15	<v-flex xs12>
16	<v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field>	16	<v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field>
17	</v-flex>	17	</v-flex>
18	<v-card-actions>	18	<v-card-actions>
19	<v-spacer></v-spacer>	19	<v-spacer></v-spacer>
20	<v-btn round dark @click="save" class="add-button">Save</v-btn>	20	<v-btn round dark @click="save" class="add-button">Save</v-btn>
21	<v-spacer></v-spacer>	21	<v-spacer></v-spacer>
22	</v-card-actions>	22	</v-card-actions>
23	</v-flex>	23	</v-flex>
24	</v-layout>	24	</v-layout>
25	</v-container>	25	</v-container>
26	</v-card>	26	</v-card>
27	</v-dialog>	27	</v-dialog>
28		28
29	<!-- **** PROFILE VIEW STUDENTS **** -->	29	<!-- **** PROFILE VIEW STUDENTS **** -->
30	<v-dialog v-model="profileClassDialog" max-width="400px">	30	<v-dialog v-model="profileClassDialog" max-width="400px">
31	<v-card flat class="card-style pa-3" dark>	31	<v-card flat class="card-style pa-3" dark>
32	<v-layout>	32	<v-layout>
33	<v-flex xs12>	33	<v-flex xs12>
34	<label class="title text-xs-center">View Class</label>	34	<label class="title text-xs-center">View Class</label>
35	<v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon>	35	<v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon>
36	</v-flex>	36	</v-flex>
37	</v-layout>	37	</v-layout>
38	<v-card-text>	38	<v-card-text>
39	<v-container grid-list-md>	39	<v-container grid-list-md>
40	<v-layout wrap>	40	<v-layout wrap>
41	<v-flex xs6 sm6>	41	<v-flex xs6 sm6>
42	<h5 class="right my-1 subheading">	42	<h5 class="right my-1 subheading">
43	<b>Class Name:</b>	43	<b>Class Name:</b>
44	</h5>	44	</h5>
45	</v-flex>	45	</v-flex>
46	<v-flex sm6 xs6>	46	<v-flex sm6 xs6>
47	<h5 class="my-1">{{ editedItem.classNum }}</h5>	47	<h5 class="my-1">{{ editedItem.classNum }}</h5>
48	</v-flex>	48	</v-flex>
49	</v-layout>	49	</v-layout>
50	</v-container>	50	</v-container>
51	</v-card-text>	51	</v-card-text>
52	</v-card>	52	</v-card>
53	</v-dialog>	53	</v-dialog>
54		54
55	<!-- **** Class Table **** -->	55	<!-- **** Class Table **** -->
56		56
57	<v-toolbar color="transparent" flat>	57	<v-toolbar color="transparent" flat>
58	<v-btn	58	<v-btn
59	fab	59	fab
60	dark	60	dark
61	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	61	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
62	small	62	small
63	@click="addClassDialog = true"	63	@click="addClassDialog = true"
64	>	64	>
65	<v-icon dark>add</v-icon>	65	<v-icon dark>add</v-icon>
66	</v-btn>	66	</v-btn>
67	<v-btn	67	<v-btn
68	round	68	round
69	class="open-dialog-button hidden-sm-only hidden-xs-only"	69	class="open-dialog-button hidden-sm-only hidden-xs-only"
70	dark	70	dark
71	@click="addClassDialog = true"	71	@click="addClassDialog = true"
72	>	72	>
73	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Class	73	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Class
74	</v-btn>	74	</v-btn>
75	<v-spacer></v-spacer>	75	<v-spacer></v-spacer>
76	<v-card-title class="body-1" v-show="show">	76	<v-card-title class="body-1" v-show="show">
77	<v-btn icon large flat @click="displaySearch">	77	<v-btn icon large flat @click="displaySearch">
78	<v-avatar size="27">	78	<v-avatar size="27">
79	<img src="/static/icon/search.png" alt="icon" />	79	<img src="/static/icon/search.png" alt="icon" />
80	</v-avatar>	80	</v-avatar>
81	</v-btn>	81	</v-btn>
82	</v-card-title>	82	</v-card-title>
83	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	83	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
84	<v-layout>	84	<v-layout>
85	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	85	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
86	<v-icon @click="closeSearch" color="error">close</v-icon>	86	<v-icon @click="closeSearch" color="error">close</v-icon>
87	</v-layout>	87	</v-layout>
88	</v-flex>	88	</v-flex>
89	</v-toolbar>	89	</v-toolbar>
90	<v-data-table	90	<v-data-table
91	:headers="headers"	91	:headers="headers"
92	:items="classList"	92	:items="classList"
93	:pagination.sync="pagination"	93	:pagination.sync="pagination"
94	:search="search"	94	:search="search"
95	>	95	>
96	<template slot="items" slot-scope="props">	96	<template slot="items" slot-scope="props">
97	<tr class="tr">	97	<tr class="tr">
98	<td class="td td-row">{{ props.index + 1 }}</td>	98	<td class="td td-row">{{ props.index + 1 }}</td>
99	<td class="text-xs-center td td-row">{{ props.item.classNum}}</td>	99	<td class="text-xs-center td td-row">{{ props.item.classNum}}</td>
100	<td class="text-xs-center td td-row">	100	<td class="text-xs-center td td-row">
101	<span>	101	<span>
102	<v-tooltip top>	102	<v-tooltip top>
103	<img	103	<img
104	slot="activator"	104	slot="activator"
105	style="cursor:pointer; width:25px; height:25px; "	105	style="cursor:pointer; width:25px; height:25px; "
106	class="mr-3"	106	class="mr-3"
107	@click="profile(props.item)"	107	@click="profile(props.item)"
108	src="/static/icon/view.png"	108	src="/static/icon/view.png"
109	/>	109	/>
110	<span>View</span>	110	<span>View</span>
111	</v-tooltip>	111	</v-tooltip>
112	<v-tooltip top>	112	<v-tooltip top>
113	<img	113	<img
114	slot="activator"	114	slot="activator"
115	style="cursor:pointer; width:20px; height:18px; "	115	style="cursor:pointer; width:20px; height:18px; "
116	class="mr-3"	116	class="mr-3"
117	@click="editItem(props.item)"	117	@click="editItem(props.item)"
118	src="/static/icon/edit.png"	118	src="/static/icon/edit.png"
119	/>	119	/>
120	<span>Edit</span>	120	<span>Edit</span>
121	</v-tooltip>	121	</v-tooltip>
122	<v-tooltip top>	122	<!-- <v-tooltip top>
123	<img	123	<img
124	slot="activator"	124	slot="activator"
125	style="cursor:pointer; width:20px; height:20px; "	125	style="cursor:pointer; width:20px; height:20px; "
126	@click="deleteItem(props.item)"	126	@click="deleteItem(props.item)"
127	src="/static/icon/delete.png"	127	src="/static/icon/delete.png"
128	/>	128	/>
129	<span>Delete</span>	129	<span>Delete</span>
130	</v-tooltip>	130	</v-tooltip> -->
131	</span>	131	</span>
132	</td>	132	</td>
133	</tr>	133	</tr>
134	</template>	134	</template>
135	<v-alert	135	<v-alert
136	slot="no-results"	136	slot="no-results"
137	:value="true"	137	:value="true"
138	color="error"	138	color="error"
139	icon="warning"	139	icon="warning"
140	>Your search for "{{ search }}" found no results.</v-alert>	140	>Your search for "{{ search }}" found no results.</v-alert>
141	</v-data-table>	141	</v-data-table>
142		142
143	<!-- **** ADD Class **** -->	143	<!-- **** ADD Class **** -->
144	<v-dialog v-model="addClassDialog" max-width="400px">	144	<v-dialog v-model="addClassDialog" max-width="400px">
145	<v-card flat class="card-style pa-2" dark>	145	<v-card flat class="card-style pa-2" dark>
146	<v-layout>	146	<v-layout>
147	<v-flex xs12>	147	<v-flex xs12>
148	<label class="title text-xs-center">Add Class</label>	148	<label class="title text-xs-center">Add Class</label>
149	<v-icon size="24" class="right" @click="addClassDialog = false">cancel</v-icon>	149	<v-icon size="24" class="right" @click="addClassDialog = false">cancel</v-icon>
150	</v-flex>	150	</v-flex>
151	</v-layout>	151	</v-layout>
152	<v-container fluid fill-height>	152	<v-container fluid fill-height>
153	<v-layout align-center>	153	<v-layout align-center>
154	<v-flex xs12>	154	<v-flex xs12>
155	<v-form ref="form" v-model="valid" lazy-validation>	155	<v-form ref="form" v-model="valid" lazy-validation>
156	<v-flex xs12 class="headline text-xs-center">	156	<v-flex xs12 class="headline text-xs-center">
157	<label>Class</label>	157	<label>Class</label>
158	</v-flex>	158	</v-flex>
159	<v-flex xs12>	159	<v-flex xs12>
160	<v-text-field	160	<v-text-field
161	v-model="addclasses.classNum"	161	v-model="addclasses.classNum"
162	placeholder="fill your class Name"	162	placeholder="fill your class Name"
163	type="text"	163	type="text"
164	:rules="nameRules"	164	:rules="nameRules"
165	required	165	required
166	></v-text-field>	166	></v-text-field>
167	</v-flex>	167	</v-flex>
168	<v-layout>	168	<v-layout>
169	<v-flex xs12 sm12>	169	<v-flex xs12 sm12>
170	<v-card-actions>	170	<v-card-actions>
171	<v-spacer></v-spacer>	171	<v-spacer></v-spacer>
172	<v-btn	172	<v-btn
173	@click="submit"	173	@click="submit"
174	class="add-button"	174	class="add-button"
175	round	175	round
176	dark	176	dark
177	:loading="loading"	177	:loading="loading"
178	>Add Class</v-btn>	178	>Add Class</v-btn>
179	<v-spacer></v-spacer>	179	<v-spacer></v-spacer>
180	</v-card-actions>	180	</v-card-actions>
181	</v-flex>	181	</v-flex>
182	</v-layout>	182	</v-layout>
183	</v-form>	183	</v-form>
184	</v-flex>	184	</v-flex>
185	</v-layout>	185	</v-layout>
186	</v-container>	186	</v-container>
187	</v-card>	187	</v-card>
188	</v-dialog>	188	</v-dialog>
189	<div class="loader" v-if="showLoader">	189	<div class="loader" v-if="showLoader">
190	<v-progress-circular indeterminate color="white"></v-progress-circular>	190	<v-progress-circular indeterminate color="white"></v-progress-circular>
191	</div>	191	</div>
192	<v-snackbar	192	<v-snackbar
193	:timeout="timeout"	193	:timeout="timeout"
194	:top="y === 'top'"	194	:top="y === 'top'"
195	:right="x === 'right'"	195	:right="x === 'right'"
196	:vertical="mode === 'vertical'"	196	:vertical="mode === 'vertical'"
197	v-model="snackbar"	197	v-model="snackbar"
198	:color="color"	198	:color="color"
199	>{{ text }}</v-snackbar>	199	>{{ text }}</v-snackbar>
200	</v-container>	200	</v-container>
201	</template>	201	</template>
202		202
203	<script>	203	<script>
204	import http from "@/Services/http.js";	204	import http from "@/Services/http.js";
205		205
206	export default {	206	export default {
207	data: () => ({	207	data: () => ({
208	snackbar: false,	208	snackbar: false,
209	y: "top",	209	y: "top",
210	x: "right",	210	x: "right",
211	mode: "",	211	mode: "",
212	timeout: 5000,	212	timeout: 5000,
213	text: "",	213	text: "",
214	color: "",	214	color: "",
215	show: true,	215	show: true,
216	showSearch: false,	216	showSearch: false,
217	showLoader: false,	217	showLoader: false,
218	loading: false,	218	loading: false,
219	addClassDialog: false,	219	addClassDialog: false,
220	search: "",	220	search: "",
221	editClassDialog: false,	221	editClassDialog: false,
222	profileClassDialog: false,	222	profileClassDialog: false,
223	valid: true,	223	valid: true,
224	pagination: {	224	pagination: {
225	rowsPerPage: 10	225	rowsPerPage: 10
226	},	226	},
227	nameRules: [v => !!v \|\| " Class Name is required"],	227	nameRules: [v => !!v \|\| " Class Name is required"],
228	headers: [	228	headers: [
229	{	229	{
230	text: "No",	230	text: "No",
231	align: "left",	231	align: "left",
232	sortable: false,	232	sortable: false,
233	value: "No"	233	value: "No"
234	},	234	},
235	{ text: "Class No", value: "classNum", sortable: false, align: "center" },	235	{ text: "Class No", value: "classNum", sortable: false, align: "center" },
236		236
237	{ text: "Action", value: "", sortable: false, align: "center" }	237	{ text: "Action", value: "", sortable: false, align: "center" }
238	],	238	],
239	classList: [],	239	classList: [],
240	editedIndex: -1,	240	editedIndex: -1,
241	editedItem: {	241	editedItem: {
242	classNum: ""	242	classNum: ""
243	},	243	},
244	addclasses: {	244	addclasses: {
245	classNum: ""	245	classNum: ""
246	}	246	}
247	}),	247	}),
248	methods: {	248	methods: {
249	getClassList() {	249	getClassList() {
250	this.showLoader = true;	250	this.showLoader = true;
251	var token = this.$store.state.token;	251	var token = this.$store.state.token;
252	http()	252	http()
253	.get("/getClassesList")	253	.get("/getClassesList")
254	.then(response => {	254	.then(response => {
255	this.classList = response.data.data;	255	this.classList = response.data.data;
256	this.showLoader = false;	256	this.showLoader = false;
257	})	257	})
258	.catch(error => {	258	.catch(error => {
259	this.showLoader = false;	259	this.showLoader = false;
260	if (error.response.status === 401) {	260	if (error.response.status === 401) {
261	this.$router.replace({ path: "/" });	261	this.$router.replace({ path: "/" });
262	this.$store.dispatch("setToken", null);	262	this.$store.dispatch("setToken", null);
263	this.$store.dispatch("Id", null);	263	this.$store.dispatch("Id", null);
264	}	264	}
265	});	265	});
266	},	266	},
267	editItem(item) {	267	editItem(item) {
268	this.editedIndex = this.classList.indexOf(item);	268	this.editedIndex = this.classList.indexOf(item);
269	this.editedItem = Object.assign({}, item);	269	this.editedItem = Object.assign({}, item);
270	this.editClassDialog = true;	270	this.editClassDialog = true;
271	},	271	},
272	profile(item) {	272	profile(item) {
273	this.editedIndex = this.classList.indexOf(item);	273	this.editedIndex = this.classList.indexOf(item);
274	this.editedItem = Object.assign({}, item);	274	this.editedItem = Object.assign({}, item);
275	this.profileClassDialog = true;	275	this.profileClassDialog = true;
276	},	276	},
277	deleteItem(item) {	277	deleteItem(item) {
278	let deleteStudent = {	278	let deleteStudent = {
279	classId: item._id	279	classId: item._id
280	};	280	};
281	http()	281	http()
282	.delete(	282	.delete(
283	"/deleteClass",	283	"/deleteClass",
284	confirm("Are you sure you want to delete this?") && {	284	confirm("Are you sure you want to delete this?") && {
285	params: deleteStudent	285	params: deleteStudent
286	}	286	}
287	)	287	)
288	.then(response => {	288	.then(response => {
289	this.snackbar = true;	289	this.snackbar = true;
290	this.text = response.data.message;	290	this.text = response.data.message;
291	this.color = "green";	291	this.color = "green";
292	this.getClassList();	292	this.getClassList();
293	})	293	})
294	.catch(error => {	294	.catch(error => {
295	this.snackbar = true;	295	this.snackbar = true;
296	this.color = "error";	296	this.color = "error";
297	this.text = error.response.data.message;	297	this.text = error.response.data.message;
298	});	298	});
299	},	299	},
300	close() {	300	close() {
301	this.editClassDialog = false;	301	this.editClassDialog = false;
302	},	302	},
303	closeProfile() {	303	closeProfile() {
304	this.profileClassDialog = false;	304	this.profileClassDialog = false;
305	},	305	},
306	submit() {	306	submit() {
307	if (this.$refs.form.validate()) {	307	if (this.$refs.form.validate()) {
308	let addClass = {	308	let addClass = {
309	classNum: this.addclasses.classNum	309	classNum: this.addclasses.classNum
310	};	310	};
311	this.loading = true;	311	this.loading = true;
312	http()	312	http()
313	.post("/createClass", addClass)	313	.post("/createClass", addClass)
314	.then(response => {	314	.then(response => {
315	this.getClassList();	315	this.getClassList();
316	this.snackbar = true;	316	this.snackbar = true;
317	this.text = response.data.message;	317	this.text = response.data.message;
318	this.color = "green"	318	this.color = "green"
319	this.clear();	319	this.clear();
320	this.loading = false;	320	this.loading = false;
321	this.addClassDialog = false;	321	this.addClassDialog = false;
322	})	322	})
323	.catch(error => {	323	.catch(error => {
324	this.loading = false;	324	this.loading = false;
325	this.snackbar = true;	325	this.snackbar = true;
326	this.color = "error";	326	this.color = "error";
327	this.text = error.response.data.message;	327	this.text = error.response.data.message;
328	});	328	});
329	}	329	}
330	},	330	},
331	clear() {	331	clear() {
332	this.$refs.form.reset();	332	this.$refs.form.reset();
333	},	333	},
334	save() {	334	save() {
335	let editClass = {	335	let editClass = {
336	classId: this.editedItem._id,	336	classId: this.editedItem._id,
337	classNum: this.editedItem.classNum	337	classNum: this.editedItem.classNum
338	};	338	};
339	http()	339	http()
340	.put("/updateClass", editClass)	340	.put("/updateClass", editClass)
341	.then(response => {	341	.then(response => {
342	this.snackbar = true;	342	this.snackbar = true;
343	this.text = response.data.message;	343	this.text = response.data.message;
344	this.color = "green";	344	this.color = "green";
345	this.getClassList();	345	this.getClassList();
346	this.close();	346	this.close();
347	})	347	})
348	.catch(error => {	348	.catch(error => {
349	this.snackbar = true;	349	this.snackbar = true;
350	this.text = error.response.data.message;	350	this.text = error.response.data.message;
351	this.color = "error";	351	this.color = "error";
352	// console.log(error);	352	// console.log(error);
353	});	353	});
354	},	354	},
355	displaySearch() {	355	displaySearch() {
356	(this.show = false), (this.showSearch = true);	356	(this.show = false), (this.showSearch = true);
357	},	357	},
358	closeSearch() {	358	closeSearch() {
359	this.showSearch = false;	359	this.showSearch = false;
360	this.show = true;	360	this.show = true;
361	this.search = "";	361	this.search = "";
362	}	362	}
363	},	363	},
364	mounted() {	364	mounted() {
365	this.getClassList();	365	this.getClassList();
366	}	366	}
367	// created() {	367	// created() {
368	// this.$root.$on("app:search", search => {	368	// this.$root.$on("app:search", search => {
369	// this.search = search;	369	// this.search = search;
370	// });	370	// });
371	// },	371	// },
372	// beforeDestroy() {	372	// beforeDestroy() {
373	// // dont forget to remove the listener	373	// // dont forget to remove the listener
374	// this.$root.$off("app:search");	374	// this.$root.$off("app:search");
375	// }	375	// }
376	};	376	};
377	</script>	377	</script>
378	<style>	378	<style>
379	</style>	379	</style>

src/pages/Exam/examAttendence.vue

Diff comments View file @b039d39

 <template>
   <v-container fluid class="body-color">
     <!-- *****  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="addExamAttendenceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addExamAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence
       </v-btn>
       <v-spacer></v-spacer>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
-          v-model="addAttendence.examId"
+          v-model="getAttendence.examId"
           label="Select Exam"
           :rules="examRules"
           :items="examList"
           item-text="examName"
           item-value="_id"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
-          v-model="addAttendence.classId"
+          v-model="getAttendence.classId"
           label="Select your class"
           type="text"
           :items="classList"
           item-text="classNum"
           item-value="_id"
-          @change="getSections(addAttendence.classId)"
+          @change="getSections(getAttendence.classId)"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
-          v-model="addAttendence.sectionId"
+          v-model="getAttendence.sectionId"
           label="Select your section"
           type="text"
           :items="addSection"
           item-text="name"
           item-value="_id"
-          @change="getClassSubject(addAttendence.classId)"
+          @change="getClassSubject(getAttendence.classId)"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
-          v-model="addAttendence.subjectId"
+          v-model="getAttendence.subjectId"
           label="Select Subject"
           :rules="subjectRules"
           :items="subjectList.subjects"
           item-text="subjectName"
           item-value="_id"
           @change="getExamAttendenceList()"
           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-show="showSearch">
         <v-layout>
           <v-text-field 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.students"
       :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.studentId.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td>
           <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td>
           <td class="td td-row text-xs-center">
             <v-radio-group v-model="isPresent" row readonly>
               <v-radio
                 :value="props.item.isPresent"
               ></v-radio>
             </v-radio-group>
           </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 Attendence ****** -->
     <v-dialog v-model="addExamAttendenceDialog" max-width="800px">
       <v-card flat class="text-xs-center pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam Attendence</label>
             <v-icon size="24" class="right" @click="addExamAttendenceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">
           <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 Exam"
                     :rules="examRules"
                     :items="examList"
                     v-model="addAttendence.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="addAttendence.classId"
                     label="Select Class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(addAttendence.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="addAttendence.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     :rules="sectionRules"
                     @change="getClassSubject(addAttendence.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">Subject Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="subjectList.subjects"
                     label="Select Subject"
                     item-text="subjectName"
                     v-model="addAttendence.subjectId"
                     item-value="_id"
                     name="Select Subject"
                     :rules="subjectRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn
                     round
                     dark
                     @click="showTable"
                     :loading="loading"
                     class="add-button"
                   >Attendence</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
         <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="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-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-alert
               slot="no-results"
               :value="true"
               color="error"
               icon="warning"
             >Your search for "{{ search }}" found no results.</v-alert>
           </v-data-table>
           <v-flex xs12 sm12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn @click="submit()" round dark :loading="loading" class="add-button">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="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";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     editDate: false,
     menu1: false,
     menuB: false,
     menu2: false,
     menuEdit: false,
     timeToEdit: false,
     show: true,
     showSearch: false,
     addExamAttendenceDialog: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     search: "",
     showLoader: false,
     valid: true,
     role: "",
     pagination: {
       rowsPerPage: 10
     },
     attendeceTable: false,
     isPresent: true,
     examRules: [v => !!v || "Exam Name is required"],
     classRules: [v => !!v || "Class Name is required"],
     sectionRules: [v => !!v || "section is required"],
     subjectRules: [v => !!v || "Subject is required"],
     timeInRules: [v => !!v || "Time In is required"],
     timeOutRules: [v => !!v || "time Out s is required"],
     roomRules: [v => !!v || "Room is required"],
     examScheduleDateRules: [v => !!v || "Date is required"],
     studentsData: [],
     examData: [],
     students: [],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No"
       },
       {
         text: "Profile Pic",
         value: "profilprofilePicUrlePicUrl",
         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"
       }
     ],
     attendenceType: [
       {
         label: "",
         value: true
       }
     ],
     classList: [],
     addSection: [],
     examList: [],
     subjectList: [],
     subjects: [],
     addAttendence: {},
+    getAttendence: {},
     editedItem: {
       sectionId: {
         name: ""
       }
     },
     getScheduleData: {},
     ScheduleData: [],
     token: ""
   }),
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     getSchedulesList() {
       this.showLoader = true;
       http()
         .get("/getSchedulesList", {
           params: { classId: this.getScheduleData.classId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.ScheduleData = response.data.data;
           // console.log("this.ScheduleData", this.ScheduleData);
           this.showLoader = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     close() {
       this.dialog = false;
     },
     submit() {
       var examAttendence = {
         examId: this.addAttendence.examId,
         classId: this.addAttendence.classId,
         sectionId: this.addAttendence.sectionId,
         subjectId: this.addAttendence.subjectId,
         students: []
       };
       for (var j = 0; j < this.studentsData.length; j++) {
         console.log("studentdata", this.studentsData);
         examAttendence.students.push({
           studentId: this.studentsData[j]._id,
           isPresent: this.studentsData[j].attendence
         });
       }
       console.log("attendence", examAttendence);
       if (this.$refs.form.validate()) {
         http()
           .post("/createExamAttendance", examAttendence)
           .then(response => {
             this.snackbar = true;
             this.color = "success";
             this.text = "Successfully created exam attendence";
             this.addExamAttendenceDialog = false;
             // this.getExamAttendenceList();
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
       this.loading = false;
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       for (let i = 0; i < this.classList.length; i++) {
         if (_id == this.classList[i]._id) {
           // this.subjects = this.classList[i].subjects;
         }
       }
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
         })
         .catch(err => {});
     },
     getClassSubject(_id) {
       this.showLoader = true;
       // this.classId = this.classId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
         });
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch(error => {
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     showTable() {
       this.attendeceTable = true;
       this.getStudentList();
     },
     getStudentList() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.addAttendence.classId,
             sectionId: this.addAttendence.sectionId
           }
         })
         .then(response => {
           this.studentsData = response.data.data;
           this.showLoader = false;
           // this.addExamAttendenceDialog = false;
           var attendence = "";
           for (let i = 0; i < this.studentsData.length; i++) {
             this.studentsData[i].attendence = false;
           }
         })
         .catch(err => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getExamAttendenceList() {
       this.showLoader = true;
       http()
         .get("/getExamAttendenceList", {
           params: {
-            examId: this.addAttendence.examId,
+            examId: this.getAttendence.examId,
-            classId: this.addAttendence.classId,
+            classId: this.getAttendence.classId,
-            sectionId: this.addAttendence.sectionId,
+            sectionId: this.getAttendence.sectionId,
-            subjectId: this.addAttendence.subjectId
+            subjectId: this.getAttendence.subjectId
           }
         })
         .then(response => {
           this.examData = response.data.data[0];
           this.showLoader = false;
         })
         .catch(error => {
           console.log("error", 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();
     this.role = this.$store.state.role;
   }
 };
 </script>

src/pages/Exam/examSchedule.vue

Diff comments View file @b039d39

     <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="getSchedulesList()"
+          @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-show="showSearch">
         <v-layout>
           <v-text-field 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-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="addExamScheduleDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Exam Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     label="Select your Exam Name"
                     :rules="examRules"
                     :items="examList"
                     v-model="addSchedule.examId"
                     item-text="examName"
                     item-value="_id"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     v-model="addSchedule.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(addSchedule.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="addSection"
                     label="Select Section"
                     v-model="addSchedule.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Subject Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="subjects"
                     label="Select Subject"
                     v-model="addSchedule.subjectName"
                     item-text="subjectName"
                     item-value="subjectName"
                     name="Select Section"
                     :rules="subjectRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Date:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menu2"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.date"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.date"
                       :rules="examScheduleDateRules"
                       label="Select Date"
                       append-icon="event"
                       readonly
                     ></v-text-field>
                     <v-date-picker
                       v-model="addSchedule.date"
                       @input="$refs.menu2.save(addSchedule.date)"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Time From:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menuA"
                     :close-on-content-click="false"
                     v-model="menuB"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.timeFrom"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.timeIn"
                       label="Select your time From"
                       append-icon="access_time"
                       :rules="timeInRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="addSchedule.timeIn"
                       @change="$refs.menuA.save(addSchedule.timeIn)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Time To:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu1"
                     :nudge-right="40"
                     :return-value.sync="addSchedule.timeTo"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     max-width="290px"
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="addSchedule.timeTo"
                       label="Select your Time To"
                       append-icon="access_time"
                       :rules="timeOutRules"
                       readonly
                     ></v-text-field>
                     <v-time-picker
                       v-model="addSchedule.timeTo"
                       @change="$refs.menu.save(addSchedule.timeTo)"
                     ></v-time-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Room:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-text-field
                     placeholder="fill your room"
                     :rules="roomRules"
                     v-model="addSchedule.room"
                     @keyup.enter="submit"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     date: null,
     editDate: false,
     menu1: false,
     menuB: false,
     menu2: false,
     menuEdit: false,
     timeToEdit: false,
     show: true,
     showSearch: false,
     addExamScheduleDialog: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     date: null,
     search: "",
     showLoader: false,
     editExamScheduleDialog: false,
     profileExamScheduleDialog: false,
     valid: true,
     role: "",
     pagination: {
       rowsPerPage: 10
     },
     examRules: [v => !!v || "Exam Name is required"],
     classRules: [v => !!v || "Class Name is required"],
     sectionRules: [v => !!v || "section is required"],
     subjectRules: [v => !!v || "Subject is required"],
     timeInRules: [v => !!v || "Time In is required"],
     timeOutRules: [v => !!v || "time Out s is required"],
     roomRules: [v => !!v || "Room is required"],
     examScheduleDateRules: [v => !!v || "Date is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No"
       },
       {
         text: "Exam Name",
         vaue: "examId.examName",
         sortable: false,
         align: "center"
       },
       {
         text: "Class",
         value: "classId.classNum",
         sortable: false,
         align: "center"
       },
       // {
       //   text: "Section",
       //   value: "sectionId.name",
       //   sortable: false,
       //   align: "center"
       // },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
         align: "center"
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
         align: "center"
       },
       {
         text: "Time",
         value: "timeFrom",
         sortable: false,
         align: "center"
       },
       {
         text: "Room",
         value: "room",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     classList: [],
     addSection: [],
     examList: [],
     subjects: [],
     addSchedule: {},
     editedItem: {
       sectionId: {
         name: ""
       }
     },
     getScheduleData: {},
     ScheduleData: [],
     token: ""
   }),
   methods: {
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getSchedulesList() {
       if (this.addSchedule.classId) {
         this.getScheduleData.classId = this.addSchedule.classId;
       }
       this.showLoader = true;
       http()
         .get("/getSchedulesList", {
-          params: { classId: this.getScheduleData.classId },
+          params: {
+            classId: this.getScheduleData.classId,
+            sectionId: this.getScheduleData.sectionId
+          },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.ScheduleData = response.data.data;
           // console.log("this.ScheduleData", this.ScheduleData);
           this.showLoader = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
+          this.color = "error";
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       // console.log("item", item);
       this.editedIndex = this.ScheduleData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.examId = this.editedItem.examId._id;
       this.editedItem.classId = this.editedItem.classId._id;
-      this.editedItem.sectionId = this.editedItem.sectionId._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.name;
+      this.editedItem.sectionId =
+        this.editedItem.sectionId === null
+          ? (this.editedItem.sectionId = this.editedItem.sectionId = "")
+          : this.editedItem.sectionId.name;
       this.profileExamScheduleDialog = true;
     },
     deleteSchedule(item) {
       let deleteSchedule = {
         scheduleId: item._id
       };
       http()
         .delete(
           "/deleteSchedule",
           confirm("Are you sure you want to Delete this?") && {
             params: deleteSchedule
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getSchedulesList();
         })
         .catch(error => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.dialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createSchedule", this.addSchedule)
           .then(response => {
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.addExamScheduleDialog = false;
             this.getSchedulesList();
             this.clear();
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
       this.loading = false;
     },
     update() {
       this.editedItem.scheduleId = this.editedItem._id;
       http()
         .put("/updateSchedule", this.editedItem)
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully Edit Exam Schedule";
           this.color = "green";
           this.editExamScheduleDialog = false;
           this.getSchedulesList();
           this.close();
         })
         .catch(error => {
           this.snackbar = true;
-          this.text = error.response.data.message;
+          this.text = error.response.data.messages;
-          this.color = "red";
+          this.color = "error";
+          this.loading = false;
         });
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       for (let i = 0; i < this.classList.length; i++) {
         if (_id == this.classList[i]._id) {
           this.subjects = this.classList[i].subjects;
         }
       }
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
         })
         .catch(err => {});
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch(error => {
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getExamList();
     this.role = this.$store.state.role;
   }
 };
 </script>

src/pages/Mark/viewMark.vue

Diff comments View file @b039d39

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** PROFILE MARK  ****** -->
     <v-container fluid grid-list-md>
       <v-layout>
         <v-flex xs12 sm8 md10>
           <v-btn class="open-dialog-button mt-3" round dark @click="print()">
             Print
             <v-icon size="18" right dark>print</v-icon>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm4 md2 class="right">
           <v-select
             class
             :items="selectMark"
             label="Select"
             v-model="selectMarkList"
             @change="selectMarkData(selectMarkList)"
           ></v-select>
         </v-flex>
       </v-layout>
-      <v-flex xs12 sm12>
+      <v-flex xs12 sm12 v-if="showData">
         <!-- <v-layout wrap> -->
         <!-- ****** TABLE DATA MARK  ****** -->
         <v-flex xs12 sm12 md12>
           <v-layout>
             <v-flex xs12 sm12 md12 style="text-align:center">
               <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
               <v-avatar>
                 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
                 <img
                   src="/static/schoolIcons/INTRACK_White.png"
                   v-else-if="!userData.schoolLogoUrl"
                 />
               </v-avatar>
               <p
                 style="
                  font-size: 20px !important;
                  font-weight: 500;
                  line-height: 2 !important;
                  letter-spacing: 0.02em !important;"
               >{{ userData.name }}</p>
               <p style="margin-bottom: 16px;">{{ userData.address }}</p>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm12 md3>
               <v-card
                 style="
                margin:auto 4px;
                padding:20px;
                background-color: #fff;
                border-color: #fff;
                color: rgba(0,0,0,0.87);
                border: 1px solid rgb(226, 231, 235);
                -webkit-box-shadow:inherit !important;
                box-shadow: inherit !important;"
               >
                 <v-layout>
                   <v-flex xs12 style="text-align: center;">
                     <v-avatar size="80">
                       <img src="/static/icon/user.png" v-if="!markData[0].studentId.profilePicUrl" />
                       <img
                         :src="markData[0].studentId.profilePicUrl"
                         v-else-if="markData[0].studentId.profilePicUrl"
                       />
                     </v-avatar>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 style="text-align: center;">
                     <h4 style="margin: 4px 0px;font-weight: 400;">{{ markData[0].studentId.name }}</h4>
                     <p style="color: #999;">Student</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Class</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].classId.classNum }}</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Section</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].sectionId.name }}</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Roll No</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].studentId.rollNo }}</p>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
             <v-flex xs12 sm12 md9 v-show="showMark">
               <v-card
                 style="  margin:auto 14px;
                padding:0px 0px;
                background-color: #fff;
                border: 1px solid lightgrey;
                color: rgba(0,0,0,0.87);
                overflow: auto;
                display: block;
                border: 1px solid rgb(226, 231, 235);
                -webkit-box-shadow:inherit !important;
                box-shadow: inherit !important;"
               >
                 <div>
                   <table
                     v-for="(value, id) in filterData"
                     :key="id"
                     class="mb-5 tableRsponsive feeTypeTable subheading"
                     style="border: 1px solid black;
                       border-collapse: collapse;!important
                       table-layout: auto !important;
                       width: 100% !important;"
                   >
                     <thead style="border: 1px solid transparent !important;">
                       <td
                         colspan="4"
                         style="text-align: inherit !important;
                                 border-right: inherit;
                                 border-top: inherit;
                                 padding:8px;"
                       >{{value[0].examId.examName}}</td>
                       <tr style="border: 1px solid lightgrey !important;">
                         <td
                           rowspan="2"
                           style="border: 1px solid lightgrey !important;;padding:4px; text-align: left;"
                         >Subject</td>
                         <template v-for="(studentData,ind) in  value">
                           <td
                             v-if="ind == 0"
                             colspan="2"
                             v-for="studentMark in studentData.studentsMarks"
                             style="border: 1px solid lightgrey !important;padding:10px; text-align: left;"
                           >{{studentMark.markDistributionId.distributionType}}</td>
                           <td
                             v-if="ind == 0"
                             style="border: 1px solid lightgrey !important text-align: left;"
                           >Total Marks</td>
                         </template>
                       </tr>
                       <tr
                         v-for="(subject, ind) in value"
                         v-if="ind == 0"
                         style="border: 1px solid lightgrey !important;"
                       >
                         <template v-for="(exam, i) in subject.studentsMarks">
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >Marks</td>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >Highest Marks</td>
                         </template>
                       </tr>
                     </thead>
                     <tbody style="border: 1px solid lightgrey !important;">
                       <tr
                         v-for="subject in value"
                         style="border: 1px solid lightgrey !important;"
                         class="tr"
                       >
                         <td
                           style="border: 1px solid lightgrey !important;padding: 4px;"
                         >{{subject.subjectName}}</td>
                         <template v-for="(exam, i) in subject.studentsMarks">
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >{{exam.marksScored}}</td>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >{{exam.markDistributionId.markValue}}</td>
                         </template>
                         <td
                           style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                         >{{subject.totalMarks}}</td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
               </v-card>
             </v-flex>
             <!-- ****** TABLE GRADE MARK  ****** -->
             <v-flex xs12 sm12 md8 v-show="showGrade">
               <v-card
                 v-for="(value, id, index) in filterData"
                 :key="index"
                 flat
                 style="border: 1px solid lightgrey;margin-bottom:14px;"
               >
                 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
                 <table
                   class="mb-5 tableRsponsive feeTypeTable"
                   style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;"
                 >
                   <thead style="border: 1px solid lightgrey !important;">
                     <tr
                       class="info white--text"
                       style="border: 1px solid lightgrey !important;padding:4px;"
                     >
                       <td style="border: 1px solid lightgrey !important;padding: 4px;">Subject</td>
                       <td style="border: 1px solid lightgrey !important;padding: 4px;">Grade</td>
                     </tr>
                   </thead>
                   <tbody style="border: 1px solid lightgrey !important;">
                     <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
                       <td
                         style="border: 1px solid lightgrey !important;padding: 4px;"
                       >{{ subject.subjectName }}</td>
                       <td
                         style="border: 1px solid lightgrey !important;padding: 4px;"
                       >{{ subject.grade }}</td>
                     </tr>
                   </tbody>
                 </table>
               </v-card>
               <v-card v-if="markData.length == 0">
                 <v-layout>
                   <v-flex xs12>
                     <h5 class="text-xs-center pa-3">No Data Found</h5>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-flex>
       <!-- print Me -->
-      <v-flex xs12 sm12 id="printMe" v-show="hideViewMark">
+      <v-flex xs12 sm12 id="printMe" v-show="hideViewMark" v-if="showData">
         <!-- <v-layout wrap> -->
         <!-- ****** TABLE DATA MARK  ****** -->
         <v-flex xs12 sm12 md12>
           <v-layout>
             <v-flex xs12 sm12 md12 style="text-align:center">
               <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
               <v-avatar>
                 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
                 <img
                   src="/static/schoolIcons/INTRACK_White.png"
                   v-else-if="!userData.schoolLogoUrl"
                 />
               </v-avatar>
               <p
                 style="
                  font-size: 20px !important;
                  font-weight: 500;
                  line-height: 2 !important;
                  letter-spacing: 0.02em !important;"
               >{{ userData.name }}</p>
               <p style="margin-bottom: 16px;">{{ userData.address }}</p>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs3 sm3 md3>
               <v-card
                 style="
                margin:auto 4px;
                padding:20px;
                background-color: #fff;
                border-color: #fff;
                color: rgba(0,0,0,0.87);
                border: 1px solid rgb(226, 231, 235);
                -webkit-box-shadow:inherit !important;
                box-shadow: inherit !important;"
               >
                 <v-layout>
                   <v-flex xs12 style="text-align: center;">
                     <v-avatar size="80">
                       <img src="/static/icon/user.png" v-if="!markData[0].studentId.profilePicUrl" />
                       <img
                         :src="markData[0].studentId.profilePicUrl"
                         v-else-if="markData[0].studentId.profilePicUrl"
                       />
                     </v-avatar>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 style="text-align: center;">
                     <h4 style="margin: 4px 0px;font-weight: 400;">{{ markData[0].studentId.name }}</h4>
                     <p style="color: #999;margin-bottom: 16px;">Student</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Class</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].classId.classNum }}</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Section</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].sectionId.name }}</p>
                   </v-flex>
                 </v-layout>
                 <v-layout
                   style="
                     margin-bottom: -1px;
                     border: 1px solid #ddd;
                     margin: 0px;
                     padding: 4px;
                     color: #707478;
                     font-size: 16px;"
                 >
                   <v-flex xs6 sm6>
                     <p style="float:left;margin: 4px 0px;">
                       <b>Roll No</b>
                     </p>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <p style="float:right;margin: 4px 0px;">{{ markData[0].studentId.rollNo }}</p>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
             <v-flex xs9 sm9 md9 v-show="showMark">
               <v-card
                 style="  margin:auto 14px;
                padding:20px 0px;
                background-color: #fff;
                border: 1px solid lightgrey;
                color: rgba(0,0,0,0.87);
                border: 1px solid rgb(226, 231, 235);
                -webkit-box-shadow:inherit !important;
                box-shadow: inherit !important;"
               >
                 <div>
                   <table
                     v-for="(value, id) in filterData"
                     :key="id"
                     class="mb-5 tableRsponsive feeTypeTable subheading"
                     style="border: 1px solid black;
                       border-collapse: collapse;!important
                       table-layout: auto !important;
                       width: 100% !important;"
                   >
                     <thead style="border: 1px solid transparent !important;">
                       <td
                         colspan="4"
                         style="text-align: inherit !important;
                                 border-right: inherit;
                                 border-top: inherit;
                                 padding:14px;"
                       >{{value[0].examId.examName}}</td>
                       <tr style="border: 1px solid lightgrey !important;">
                         <td
                           rowspan="2"
                           style="border: 1px solid lightgrey !important;;padding:4px; text-align: left;"
                         >Subject</td>
                         <template v-for="(studentData,ind) in  value">
                           <td
                             v-if="ind == 0"
                             colspan="2"
                             v-for="studentMark in studentData.studentsMarks"
                             style="border: 1px solid lightgrey !important;padding:10px; text-align: left;"
                           >{{studentMark.markDistributionId.distributionType}}</td>
                           <td
                             v-if="ind == 0"
                             style="border: 1px solid lightgrey !important text-align: left;"
                           >Total Marks</td>
                         </template>
                       </tr>
                       <tr
                         v-for="(subject, ind) in value"
                         v-if="ind == 0"
                         style="border: 1px solid lightgrey !important;"
                       >
                         <template v-for="(exam, i) in subject.studentsMarks">
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >Marks</td>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >Highest Marks</td>
                         </template>
                       </tr>
                     </thead>
                     <tbody style="border: 1px solid lightgrey !important;">
                       <tr
                         v-for="subject in value"
                         style="border: 1px solid lightgrey !important;"
                         class="tr"
                       >
                         <td
                           style="border: 1px solid lightgrey !important;padding: 4px;"
                         >{{subject.subjectName}}</td>
                         <template v-for="(exam, i) in subject.studentsMarks">
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >{{exam.marksScored}}</td>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                           >{{exam.markDistributionId.markValue}}</td>
                         </template>
                         <td
                           style="border: 1px solid lightgrey !important;padding: 4px; text-align: left;"
                         >{{subject.totalMarks}}</td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
               </v-card>
             </v-flex>
             <!-- ****** TABLE GRADE MARK  ****** -->
             <v-flex xs9 sm9 md8 v-show="showGrade">
               <v-card
                 v-for="(value, id, index) in filterData"
                 :key="index"
                 flat
                 style="border: 1px solid lightgrey;margin-bottom:14px;"
               >
                 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
                 <table
                   class="mb-5 tableRsponsive feeTypeTable"
                   style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;"
                 >
                   <thead style="border: 1px solid lightgrey !important;">
                     <tr
                       class="info white--text"
                       style="border: 1px solid lightgrey !important;padding:4px;"
                     >
                       <td style="border: 1px solid lightgrey !important;padding: 4px;">Subject</td>
                       <td style="border: 1px solid lightgrey !important;padding: 4px;">Grade</td>
                     </tr>
                   </thead>
                   <tbody style="border: 1px solid lightgrey !important;">
                     <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
                       <td
                         style="border: 1px solid lightgrey !important;padding: 4px;"
                       >{{ subject.subjectName }}</td>
                       <td
                         style="border: 1px solid lightgrey !important;padding: 4px;"
                       >{{ subject.grade }}</td>
                     </tr>
                   </tbody>
                 </table>
               </v-card>
               <v-card v-if="markData.length == 0">
                 <v-layout>
                   <v-flex xs12>
                     <h5 class="text-xs-center pa-3">No Data Found</h5>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-flex>
     </v-container>
     <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-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: true,
     nameShow: false,
     showMark: true,
     showGrade: false,
     hideViewMark: false,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     filterData: [],
     output: null,
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
     selectMarkList: "Mark",
     selectMark: ["Mark", "Grade"],
     MarkData: "",
-    userData: {}
+    userData: {},
+    showData: false,
+    //SNACKBAR
+    snackbar: false,
+    color: "",
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 10000,
+    text: ""
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getMarkList();
     this.getUserData();
   },
   methods: {
     getMarkList() {
       this.showLoader = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.$route.params.markId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.markData = response.data.data;
+          // console.log("====this.markData===", this.markData);
+          if (this.markData.length === 0) {
+            this.showLoader = false;
+            this.snackbar = true;
+            this.text = "Data not found!";
+            this.color = "error";
+            return;
+          }
+          this.showData = true;
           let newData = response.data.data;
           // console.log("newData", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           // console.log("this.filterData", this.filterData);
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
                 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
                 //   .marksScored)
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     print() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     selectMarkData(select) {
       if (select == "Mark") {
         this.showMark = true;
         this.showGrade = false;
       } else if (select == "Grade") {
         this.showGrade = true;
         this.showMark = false;
       }
     }
   }
 };
 </script>
 <style scoped>
 .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
 }
 .open-dialog-button {
   background: #827bfa !important;
   border-color: #827bfa !important;
   text-transform: none !important;
 }
 /* table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 } */
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 .loader {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
 }
 /* .tr:nth-child(odd){background-color: #f2f2f2} */
 .loader > div {
   position: relative;
   top: calc(50% - 16px);
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style>

src/pages/Section/section.vue

Diff comments View file @b039d39

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<v-dialog v-model="editSectionDialog" max-width="460px">	3	<v-dialog v-model="editSectionDialog" max-width="460px">
4	<v-card flat class="card-style pa-2" dark>	4	<v-card flat class="card-style pa-2" dark>
5	<v-layout>	5	<v-layout>
6	<v-flex xs12>	6	<v-flex xs12>
7	<label class="title text-xs-center">Edit Section</label>	7	<label class="title text-xs-center">Edit Section</label>
8	<v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>	8	<v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>
9	</v-flex>	9	</v-flex>
10	</v-layout>	10	</v-layout>
11	<v-container fluid>	11	<v-container fluid>
12	<v-layout wrap justify-center>	12	<v-layout wrap justify-center>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-form>	14	<v-form>
15	<v-layout>	15	<v-layout>
16	<v-flex xs5 sm4 class="pt-4 subheading">	16	<v-flex xs5 sm4 class="pt-4 subheading">
17	<label class="right">Class :</label>	17	<label class="right">Class :</label>
18	</v-flex>	18	</v-flex>
19	<v-flex xs7 sm8>	19	<v-flex xs7 sm8>
20	<v-autocomplete	20	<v-autocomplete
21	:items="addclass"	21	:items="addclass"
22	:label="editedItem.classData.classNum"	22	:label="editedItem.classData.classNum"
23	v-model="editItem.classId"	23	v-model="editItem.classId"
24	item-text="classNum"	24	item-text="classNum"
25	item-value="_id"	25	item-value="_id"
26	class="ml-2"	26	class="ml-2"
27	></v-autocomplete>	27	></v-autocomplete>
28	</v-flex>	28	</v-flex>
29	</v-layout>	29	</v-layout>
30	<v-layout>	30	<v-layout>
31	<v-flex xs5 sm4 class="pt-4 subheading">	31	<v-flex xs5 sm4 class="pt-4 subheading">
32	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>	32	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>
33	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>	33	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>
34	</v-flex>	34	</v-flex>
35	<v-flex xs7 sm8>	35	<v-flex xs7 sm8>
36	<v-autocomplete	36	<v-autocomplete
37	v-model="editedItem.name"	37	v-model="editedItem.name"
38	placeholder="fill your Section Name"	38	placeholder="fill your Section Name"
39	:items="SectionName"	39	:items="SectionName"
40	class="ml-2"	40	class="ml-2"
41	></v-autocomplete>	41	></v-autocomplete>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	<v-layout>	44	<v-layout>
45	<v-flex xs5 sm4 class="pt-4 subheading">	45	<v-flex xs5 sm4 class="pt-4 subheading">
46	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>	46	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>
47	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>	47	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>
48	</v-flex>	48	</v-flex>
49	<v-flex xs7 sm8>	49	<v-flex xs7 sm8>
50	<v-select	50	<v-select
51	:items="teacherList"	51	:items="teacherList"
52	v-model="editedItem.classInchargeId"	52	v-model="editedItem.classInchargeId"
53	:label="editedItem.teacherData[0].name"	53	:label="editedItem.teacherData[0].name"
54	item-text="name"	54	item-text="name"
55	item-value="_id"	55	item-value="_id"
56	class="ml-2"	56	class="ml-2"
57	></v-select>	57	></v-select>
58	</v-flex>	58	</v-flex>
59	</v-layout>	59	</v-layout>
60	<v-flex xs12>	60	<v-flex xs12>
61	<v-card-actions>	61	<v-card-actions>
62	<v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>	62	<v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>
63	<v-spacer></v-spacer>	63	<v-spacer></v-spacer>
64	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>	64	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
65	</v-card-actions>	65	</v-card-actions>
66	</v-flex>	66	</v-flex>
67	</v-form>	67	</v-form>
68	</v-flex>	68	</v-flex>
69	</v-layout>	69	</v-layout>
70	</v-container>	70	</v-container>
71	</v-card>	71	</v-card>
72	</v-dialog>	72	</v-dialog>
73		73
74	<!-- **** PROFILE VIEW SECTION DATA **** -->	74	<!-- **** PROFILE VIEW SECTION DATA **** -->
75		75
76	<v-dialog v-model="viewSectionDialog" max-width="500px">	76	<v-dialog v-model="viewSectionDialog" max-width="500px">
77	<v-card flat class="card-style pa-3" dark>	77	<v-card flat class="card-style pa-3" dark>
78	<v-layout>	78	<v-layout>
79	<v-flex xs12>	79	<v-flex xs12>
80	<label class="title text-xs-center">View Section</label>	80	<label class="title text-xs-center">View Section</label>
81	<v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon>	81	<v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon>
82	</v-flex>	82	</v-flex>
83	</v-layout>	83	</v-layout>
84	<v-card-text>	84	<v-card-text>
85	<v-container grid-list-md>	85	<v-container grid-list-md>
86	<v-layout wrap>	86	<v-layout wrap>
87	<v-flex>	87	<v-flex>
88	<v-layout>	88	<v-layout>
89	<v-flex xs7 sm6>	89	<v-flex xs7 sm6>
90	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	90	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
91	<b>Class Name :</b>	91	<b>Class Name :</b>
92	</h5>	92	</h5>
93	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">	93	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
94	<b>Class :</b>	94	<b>Class :</b>
95	</h5>	95	</h5>
96	</v-flex>	96	</v-flex>
97	<v-flex sm6 xs5>	97	<v-flex sm6 xs5>
98	<h5 class="my-1">{{ editedItem.classData.classNum }}</h5>	98	<h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
99	</v-flex>	99	</v-flex>
100	</v-layout>	100	</v-layout>
101	<v-layout>	101	<v-layout>
102	<v-flex xs7 sm6>	102	<v-flex xs7 sm6>
103	<h5 class="right my-1">	103	<h5 class="right my-1">
104	<b>Section Name :</b>	104	<b>Section Name :</b>
105	</h5>	105	</h5>
106	</v-flex>	106	</v-flex>
107	<v-flex sm6 xs5>	107	<v-flex sm6 xs5>
108	<h5 class="my-1">{{ editedItem.name }}</h5>	108	<h5 class="my-1">{{ editedItem.name }}</h5>
109	</v-flex>	109	</v-flex>
110	</v-layout>	110	</v-layout>
111	<v-layout>	111	<v-layout>
112	<v-flex xs7 sm6>	112	<v-flex xs7 sm6>
113	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	113	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
114	<b>Class Incharge :</b>	114	<b>Class Incharge :</b>
115	</h5>	115	</h5>
116	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">	116	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
117	<b>Incharge :</b>	117	<b>Incharge :</b>
118	</h5>	118	</h5>
119	</v-flex>	119	</v-flex>
120	<v-flex sm6 xs5>	120	<v-flex sm6 xs5>
121	<h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>	121	<h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout>	124	<v-layout>
125	<v-flex xs7 sm6>	125	<v-flex xs7 sm6>
126	<h5 class="right my-1">	126	<h5 class="right my-1">
127	<b>Session :</b>	127	<b>Session :</b>
128	</h5>	128	</h5>
129	</v-flex>	129	</v-flex>
130	<v-flex sm6 xs5>	130	<v-flex sm6 xs5>
131	<h5 class="my-1">{{ editedItem.session }}</h5>	131	<h5 class="my-1">{{ editedItem.session }}</h5>
132	</v-flex>	132	</v-flex>
133	</v-layout>	133	</v-layout>
134	</v-flex>	134	</v-flex>
135	</v-layout>	135	</v-layout>
136	</v-container>	136	</v-container>
137	</v-card-text>	137	</v-card-text>
138	</v-card>	138	</v-card>
139	</v-dialog>	139	</v-dialog>
140	<!-- **** Section Table **** -->	140	<!-- **** Section Table **** -->
141	<v-toolbar color="transparent" flat>	141	<v-toolbar color="transparent" flat>
142	<v-btn	142	<v-btn
143	fab	143	fab
144	dark	144	dark
145	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	145	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
146	small	146	small
147	@click="addSectionDialog = true"	147	@click="addSectionDialog = true"
148	>	148	>
149	<v-icon dark>add</v-icon>	149	<v-icon dark>add</v-icon>
150	</v-btn>	150	</v-btn>
151	<v-btn	151	<v-btn
152	round	152	round
153	class="open-dialog-button hidden-sm-only hidden-xs-only"	153	class="open-dialog-button hidden-sm-only hidden-xs-only"
154	dark	154	dark
155	@click="addSectionDialog = true"	155	@click="addSectionDialog = true"
156	>	156	>
157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Section	157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Section
158	</v-btn>	158	</v-btn>
159	<v-spacer></v-spacer>	159	<v-spacer></v-spacer>
160	<v-card-title class="body-1" v-show="show">	160	<v-card-title class="body-1" v-show="show">
161	<v-btn icon large flat @click="displaySearch">	161	<v-btn icon large flat @click="displaySearch">
162	<v-avatar size="27">	162	<v-avatar size="27">
163	<img src="/static/icon/search.png" alt="icon" />	163	<img src="/static/icon/search.png" alt="icon" />
164	</v-avatar>	164	</v-avatar>
165	</v-btn>	165	</v-btn>
166	</v-card-title>	166	</v-card-title>
167	<v-flex xs8 v-show="showSearch">	167	<v-flex xs8 v-show="showSearch">
168	<v-layout>	168	<v-layout>
169	<v-text-field	169	<v-text-field
170	v-model="search"	170	v-model="search"
171	label="Search"	171	label="Search"
172	prepend-inner-icon="search"	172	prepend-inner-icon="search"
173	color="primary"	173	color="primary"
174	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	174	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
175	></v-text-field>	175	></v-text-field>
176	<v-icon @click="closeSearch" color="error">close</v-icon>	176	<v-icon @click="closeSearch" color="error">close</v-icon>
177	</v-layout>	177	</v-layout>
178	</v-flex>	178	</v-flex>
179	</v-toolbar>	179	</v-toolbar>
180	<v-data-table	180	<v-data-table
181	:headers="headers"	181	:headers="headers"
182	:items="sectionList"	182	:items="sectionList"
183	:pagination.sync="pagination"	183	:pagination.sync="pagination"
184	:search="search"	184	:search="search"
185	>	185	>
186	<template slot="items" slot-scope="props">	186	<template slot="items" slot-scope="props">
187	<tr class="tr">	187	<tr class="tr">
188	<td class="td td-row">{{ props.index + 1 }}</td>	188	<td class="td td-row">{{ props.index + 1 }}</td>
189	<td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td>	189	<td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td>
190	<td class="text-xs-center td td-row">{{ props.item.name }}</td>	190	<td class="text-xs-center td td-row">{{ props.item.name }}</td>
191	<td class="text-xs-center td td-row">{{ props.item.session }}</td>	191	<td class="text-xs-center td td-row">{{ props.item.session }}</td>
192	<td class="text-xs-center td td-row">	192	<td class="text-xs-center td td-row">
193	<span>	193	<span>
194	<v-tooltip top>	194	<v-tooltip top>
195	<img	195	<img
196	slot="activator"	196	slot="activator"
197	style="cursor:pointer; width:25px; height:25px;"	197	style="cursor:pointer; width:25px; height:25px;"
198	class="mr-3"	198	class="mr-3"
199	@click="profile(props.item)"	199	@click="profile(props.item)"
200	src="/static/icon/view.png"	200	src="/static/icon/view.png"
201	/>	201	/>
202	<span>View</span>	202	<span>View</span>
203	</v-tooltip>	203	</v-tooltip>
204	<v-tooltip top>	204	<v-tooltip top>
205	<img	205	<img
206	slot="activator"	206	slot="activator"
207	style="cursor:pointer; width:20px; height:18px; "	207	style="cursor:pointer; width:20px; height:18px; "
208	class="mr-3"	208	class="mr-3"
209	@click="editItem(props.item)"	209	@click="editItem(props.item)"
210	src="/static/icon/edit.png"	210	src="/static/icon/edit.png"
211	/>	211	/>
212	<span>Edit</span>	212	<span>Edit</span>
213	</v-tooltip>	213	</v-tooltip>
214	<v-tooltip top>	214	<!-- <v-tooltip top>
215	<img	215	<img
216	slot="activator"	216	slot="activator"
217	style="cursor:pointer; width:20px; height:20px; "	217	style="cursor:pointer; width:20px; height:20px; "
218	@click="deleteItem(props.item)"	218	@click="deleteItem(props.item)"
219	src="/static/icon/delete.png"	219	src="/static/icon/delete.png"
220	class="mr-3"	220	class="mr-3"
221	/>	221	/>
222	<span>Delete</span>	222	<span>Delete</span>
223	</v-tooltip>	223	</v-tooltip> -->
224	</span>	224	</span>
225	</td>	225	</td>
226	</tr>	226	</tr>
227	</template>	227	</template>
228	<v-alert	228	<v-alert
229	slot="no-results"	229	slot="no-results"
230	:value="true"	230	:value="true"
231	color="error"	231	color="error"
232	icon="warning"	232	icon="warning"
233	>Your search for "{{ search }}" found no results.</v-alert>	233	>Your search for "{{ search }}" found no results.</v-alert>
234	</v-data-table>	234	</v-data-table>
235	<!-- </v-tab-item> -->	235	<!-- </v-tab-item> -->
236		236
237	<!-- **** ADD Students Dialog box**** -->	237	<!-- **** ADD Students Dialog box**** -->
238	<v-dialog v-model="addSectionDialog" max-width="400px">	238	<v-dialog v-model="addSectionDialog" max-width="400px">
239	<v-card flat class="card-style pa-2" dark>	239	<v-card flat class="card-style pa-2" dark>
240	<v-layout>	240	<v-layout>
241	<v-flex xs12>	241	<v-flex xs12>
242	<label class="title text-xs-center">Add Section</label>	242	<label class="title text-xs-center">Add Section</label>
243	<v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon>	243	<v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon>
244	</v-flex>	244	</v-flex>
245	</v-layout>	245	</v-layout>
246	<v-container fluid fill-height>	246	<v-container fluid fill-height>
247	<v-layout align-center>	247	<v-layout align-center>
248	<v-flex xs12>	248	<v-flex xs12>
249	<v-form ref="form" v-model="valid" lazy-validation>	249	<v-form ref="form" v-model="valid" lazy-validation>
250	<v-layout>	250	<v-layout>
251	<v-flex xs4 class="pt-4 subheading">	251	<v-flex xs4 class="pt-4 subheading">
252	<label class="right">Section :</label>	252	<label class="right">Section :</label>
253	</v-flex>	253	</v-flex>
254	<v-flex xs8 class="ml-3">	254	<v-flex xs8 class="ml-3">
255	<v-autocomplete	255	<v-autocomplete
256	v-model="sectionData.name"	256	v-model="sectionData.name"
257	placeholder="fill your Section Name"	257	placeholder="fill your Section Name"
258	:items="SectionName"	258	:items="SectionName"
259	:rules="nameRules"	259	:rules="nameRules"
260	required	260	required
261	></v-autocomplete>	261	></v-autocomplete>
262	</v-flex>	262	</v-flex>
263	</v-layout>	263	</v-layout>
264	<v-layout>	264	<v-layout>
265	<v-flex xs4 class="pt-4 subheading">	265	<v-flex xs4 class="pt-4 subheading">
266	<label class="right">Class :</label>	266	<label class="right">Class :</label>
267	</v-flex>	267	</v-flex>
268	<v-flex xs8 class="ml-3">	268	<v-flex xs8 class="ml-3">
269	<v-select	269	<v-select
270	:items="addclass"	270	:items="addclass"
271	label="Select Class"	271	label="Select Class"
272	v-model="sectionData.classNum"	272	v-model="sectionData.classNum"
273	item-text="classNum"	273	item-text="classNum"
274	item-value="_id"	274	item-value="_id"
275	name="Select Class"	275	name="Select Class"
276	:rules="classRules"	276	:rules="classRules"
277	required	277	required
278	></v-select>	278	></v-select>
279	</v-flex>	279	</v-flex>
280	</v-layout>	280	</v-layout>
281	<v-layout>	281	<v-layout>
282	<v-flex xs4 class="pt-4 subheading">	282	<v-flex xs4 class="pt-4 subheading">
283	<label class="right">Incharge :</label>	283	<label class="right">Incharge :</label>
284	</v-flex>	284	</v-flex>
285	<v-flex xs8 class="ml-3">	285	<v-flex xs8 class="ml-3">
286	<v-select	286	<v-select
287	:items="teacherList"	287	:items="teacherList"
288	label="Select Incharge"	288	label="Select Incharge"
289	v-model="sectionData.sectionId"	289	v-model="sectionData.sectionId"
290	item-text="name"	290	item-text="name"
291	item-value="_id"	291	item-value="_id"
292	name="Select Class"	292	name="Select Class"
293	:rules="inchargeRules"	293	:rules="inchargeRules"
294	required	294	required
295	></v-select>	295	></v-select>
296	</v-flex>	296	</v-flex>
297	</v-layout>	297	</v-layout>
298	<v-layout>	298	<v-layout>
299	<v-flex xs4 class="pt-4 subheading">	299	<v-flex xs4 class="pt-4 subheading">
300	<label class="right">Session:</label>	300	<label class="right">Session:</label>
301	</v-flex>	301	</v-flex>
302	<v-flex xs8 class="ml-3">	302	<v-flex xs8 class="ml-3">
303	<v-text-field	303	<v-text-field
304	v-model="sectionData.session"	304	v-model="sectionData.session"
305	placeholder="fill your Session"	305	placeholder="fill your Session"
306	name="name"	306	name="name"
307	type="text"	307	type="text"
308	:rules="sessionRules"	308	:rules="sessionRules"
309	required	309	required
310	></v-text-field>	310	></v-text-field>
311	</v-flex>	311	</v-flex>
312	</v-layout>	312	</v-layout>
313	<v-layout>	313	<v-layout>
314	<v-flex xs12 sm12>	314	<v-flex xs12 sm12>
315	<v-card-actions>	315	<v-card-actions>
316	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>	316	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>
317	<v-spacer></v-spacer>	317	<v-spacer></v-spacer>
318	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>	318	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>
319	</v-card-actions>	319	</v-card-actions>
320	</v-flex>	320	</v-flex>
321	</v-layout>	321	</v-layout>
322	</v-form>	322	</v-form>
323	</v-flex>	323	</v-flex>
324	</v-layout>	324	</v-layout>
325	</v-container>	325	</v-container>
326	</v-card>	326	</v-card>
327	</v-dialog>	327	</v-dialog>
328	<v-snackbar	328	<v-snackbar
329	:timeout="timeout"	329	:timeout="timeout"
330	:top="y === 'top'"	330	:top="y === 'top'"
331	:right="x === 'right'"	331	:right="x === 'right'"
332	:vertical="mode === 'vertical'"	332	:vertical="mode === 'vertical'"
333	v-model="snackbar"	333	v-model="snackbar"
334	:color="color"	334	:color="color"
335	>{{ text }}</v-snackbar>	335	>{{ text }}</v-snackbar>
336	<div class="loader" v-if="showLoader">	336	<div class="loader" v-if="showLoader">
337	<v-progress-circular indeterminate color="white"></v-progress-circular>	337	<v-progress-circular indeterminate color="white"></v-progress-circular>
338	</div>	338	</div>
339	</v-container>	339	</v-container>
340	</template>	340	</template>
341		341
342	<script>	342	<script>
343	import http from "@/Services/http.js";	343	import http from "@/Services/http.js";
344	// import { apiCollection } from "@/schoolApi/apiCollection";	344	// import { apiCollection } from "@/schoolApi/apiCollection";
345	// const getSectionData = apiCollection.get("posts");	345	// const getSectionData = apiCollection.get("posts");
346		346
347	export default {	347	export default {
348	data: () => ({	348	data: () => ({
349	snackbar: false,	349	snackbar: false,
350	y: "top",	350	y: "top",
351	x: "right",	351	x: "right",
352	mode: "",	352	mode: "",
353	timeout: 5000,	353	timeout: 5000,
354	text: "",	354	text: "",
355	color: "",	355	color: "",
356	show: true,	356	show: true,
357	showSearch: false,	357	showSearch: false,
358	showLoader: false,	358	showLoader: false,
359	loading: false,	359	loading: false,
360	date: null,	360	date: null,
361	search: "",	361	search: "",
362	editSectionDialog: false,	362	editSectionDialog: false,
363	viewSectionDialog: false,	363	viewSectionDialog: false,
364	valid: true,	364	valid: true,
365	validEdit: true,	365	validEdit: true,
366	addSectionDialog: false,	366	addSectionDialog: false,
367	editLoading: false,	367	editLoading: false,
368	details: [],	368	details: [],
369	pagination: {	369	pagination: {
370	rowsPerPage: 10	370	rowsPerPage: 10
371	},	371	},
372	nameRules: [v => !!v \|\| " Section Name is required"],	372	nameRules: [v => !!v \|\| " Section Name is required"],
373	classRules: [v => !!v \|\| " Class Name is required"],	373	classRules: [v => !!v \|\| " Class Name is required"],
374	sessionRules: [v => !!v \|\| " Session is required"],	374	sessionRules: [v => !!v \|\| " Session is required"],
375	inchargeRules: [v => !!v \|\| " Incharge Name is required"],	375	inchargeRules: [v => !!v \|\| " Incharge Name is required"],
376	SectionName: ["A", "B", "C", "D", "E", "F"],	376	SectionName: ["A", "B", "C", "D", "E", "F"],
377	headers: [	377	headers: [
378	{	378	{
379	text: "No",	379	text: "No",
380	align: "",	380	align: "",
381	sortable: false,	381	sortable: false,
382	value: "No"	382	value: "No"
383	},	383	},
384	{	384	{
385	text: "Class Name",	385	text: "Class Name",
386	value: "classData.classNum",	386	value: "classData.classNum",
387	sortable: false,	387	sortable: false,
388	align: "center"	388	align: "center"
389	},	389	},
390	{ text: "Section Name", value: "name", sortable: false, align: "center" },	390	{ text: "Section Name", value: "name", sortable: false, align: "center" },
391	{ text: "Session", value: "session", sortable: false, align: "center" },	391	{ text: "Session", value: "session", sortable: false, align: "center" },
392	{ text: "Action", value: "", sortable: false, align: "center" }	392	{ text: "Action", value: "", sortable: false, align: "center" }
393	],	393	],
394	sectionList: [],	394	sectionList: [],
395	addclass: [],	395	addclass: [],
396	teacherList: [],	396	teacherList: [],
397	select: "",	397	select: "",
398	selectId: "",	398	selectId: "",
399	token: "",	399	token: "",
400	editedIndex: -1,	400	editedIndex: -1,
401	editedItem: {	401	editedItem: {
402	classData: {	402	classData: {
403	classNum: ""	403	classNum: ""
404	},	404	},
405	teacherData: [	405	teacherData: [
406	{	406	{
407	name: ""	407	name: ""
408	}	408	}
409	]	409	]
410	// name: "",	410	// name: "",
411	// session: new Date().getFullYear()	411	// session: new Date().getFullYear()
412	},	412	},
413	sectionData: {	413	sectionData: {
414	session: new Date().getFullYear()	414	session: new Date().getFullYear()
415	}	415	}
416	}),	416	}),
417	methods: {	417	methods: {
418	getSectionList() {	418	getSectionList() {
419	// const { data } = await getSectionData.get();	419	// const { data } = await getSectionData.get();
420	this.showLoader = true;	420	this.showLoader = true;
421	http()	421	http()
422	.get("/getAllSections", {	422	.get("/getAllSections", {
423	headers: { Authorization: "Bearer " + this.token }	423	headers: { Authorization: "Bearer " + this.token }
424	})	424	})
425	.then(response => {	425	.then(response => {
426	this.sectionList = response.data.data;	426	this.sectionList = response.data.data;
427	this.showLoader = false;	427	this.showLoader = false;
428	// console.log("getAllSections=====>",response.data.data)	428	// console.log("getAllSections=====>",response.data.data)
429	})	429	})
430	.catch(error => {	430	.catch(error => {
431	this.showLoader = false;	431	this.showLoader = false;
432	if (error.response.status === 401) {	432	if (error.response.status === 401) {
433	this.$router.replace({ path: "/" });	433	this.$router.replace({ path: "/" });
434	this.$store.dispatch("setToken", null);	434	this.$store.dispatch("setToken", null);
435	this.$store.dispatch("Id", null);	435	this.$store.dispatch("Id", null);
436	}	436	}
437	});	437	});
438	},	438	},
439	editItem(item) {	439	editItem(item) {
440	this.editedIndex = this.sectionList.indexOf(item);	440	this.editedIndex = this.sectionList.indexOf(item);
441	this.editedItem = Object.assign({}, item);	441	this.editedItem = Object.assign({}, item);
442	this.editSectionDialog = true;	442	this.editSectionDialog = true;
443	},	443	},
444	profile(item) {	444	profile(item) {
445	this.editedIndex = this.sectionList.indexOf(item);	445	this.editedIndex = this.sectionList.indexOf(item);
446	this.editedItem = Object.assign({}, item);	446	this.editedItem = Object.assign({}, item);
447	this.viewSectionDialog = true;	447	this.viewSectionDialog = true;
448	},	448	},
449	deleteItem(item) {	449	deleteItem(item) {
450	let deleteStudent = {	450	let deleteStudent = {
451	sectionId: item._id	451	sectionId: item._id
452	};	452	};
453	http()	453	http()
454	.delete(	454	.delete(
455	"/deleteSection",	455	"/deleteSection",
456	confirm("Are you sure you want to delete this?") && {	456	confirm("Are you sure you want to delete this?") && {
457	params: deleteStudent	457	params: deleteStudent
458	}	458	}
459	)	459	)
460	.then(response => {	460	.then(response => {
461	this.snackbar = true;	461	this.snackbar = true;
462	this.text = response.data.message;	462	this.text = response.data.message;
463	this.color = "green";	463	this.color = "green";
464	this.getSectionList();	464	this.getSectionList();
465	})	465	})
466	.catch(error => {	466	.catch(error => {
467	this.snackbar = true;	467	this.snackbar = true;
468	this.text = error.response.data.message;	468	this.text = error.response.data.message;
469	this.color = "green";	469	this.color = "green";
470	});	470	});
471	},	471	},
472	closeSectionDialog() {	472	closeSectionDialog() {
473	this.editSectionDialog = false;	473	this.editSectionDialog = false;
474	},	474	},
475	closeviewSectionDialog() {	475	closeviewSectionDialog() {
476	this.viewSectionDialog = false;	476	this.viewSectionDialog = false;
477	},	477	},
478	submit() {	478	submit() {
479	if (this.$refs.form.validate()) {	479	if (this.$refs.form.validate()) {
480	let addSection = {	480	let addSection = {
481	name: this.sectionData.name,	481	name: this.sectionData.name,
482	classId: this.sectionData.classNum,	482	classId: this.sectionData.classNum,
483	session: this.sectionData.session,	483	session: this.sectionData.session,
484	classInchargeId: this.sectionData.sectionId	484	classInchargeId: this.sectionData.sectionId
485	};	485	};
486	this.loading = true;	486	this.loading = true;
487	http()	487	http()
488	.post("/createSection", addSection)	488	.post("/createSection", addSection)
489	.then(response => {	489	.then(response => {
490	this.getSectionList();	490	this.getSectionList();
491	this.snackbar = true;	491	this.snackbar = true;
492	this.color = "green";	492	this.color = "green";
493	this.text = "New Section added successfully";	493	this.text = "New Section added successfully";
494	this.clear();	494	this.clear();
495	this.addSectionDialog = false;	495	this.addSectionDialog = false;
496	this.loading = false;	496	this.loading = false;
497	})	497	})
498	.catch(error => {	498	.catch(error => {
499	this.snackbar = true;	499	this.snackbar = true;
500	this.color = "error";	500	this.color = "error";
501	this.text = error.response.data.message;	501	this.text = error.response.data.message;
502	this.loading = false;	502	this.loading = false;
503	});	503	});
504	}	504	}
505	},	505	},
506	clear() {	506	clear() {
507	this.$refs.form.reset();	507	this.$refs.form.reset();
508	},	508	},
509	save() {	509	save() {
510	this.editedItem.sectionId = this.editedItem._id;	510	this.editedItem.sectionId = this.editedItem._id;
511	this.editLoading = true;	511	this.editLoading = true;
512	http()	512	http()
513	.put("/updateSection", this.editedItem)	513	.put("/updateSection", this.editedItem)
514	.then(response => {	514	.then(response => {
515	this.editLoading = false;	515	this.editLoading = false;
516	this.snackbar = true;	516	this.snackbar = true;
517	this.color = "green";	517	this.color = "green";
518	this.text = response.data.message;	518	this.text = response.data.message;
519	this.getSectionList();	519	this.getSectionList();
520	this.closeSectionDialog();	520	this.closeSectionDialog();
521	})	521	})
522	.catch(error => {	522	.catch(error => {
523	this.editLoading = false;	523	this.editLoading = false;
524	this.snackbar = true;	524	this.snackbar = true;
525	this.color = "error";	525	this.color = "error";
526	this.text = error.response.data.message;	526	this.text = error.response.data.message;
527	});	527	});
528	},	528	},
529	getAllTeacher() {	529	getAllTeacher() {
530	http()	530	http()
531	.get("/getTeachersList", {	531	.get("/getTeachersList", {
532	headers: { Authorization: "Bearer " + this.token }	532	headers: { Authorization: "Bearer " + this.token }
533	})	533	})
534	.then(response => {	534	.then(response => {
535	this.teacherList = response.data.data;	535	this.teacherList = response.data.data;
536	this.showLoader = false;	536	this.showLoader = false;
537	})	537	})
538	.catch(err => {	538	.catch(err => {
539	// console.log("err====>", err);	539	// console.log("err====>", err);
540	this.showLoader = false;	540	this.showLoader = false;
541	});	541	});
542	},	542	},
543	getAllClasses() {	543	getAllClasses() {
544	http()	544	http()
545	.get("/getClassesList", {	545	.get("/getClassesList", {
546	headers: { Authorization: "Bearer " + this.token }	546	headers: { Authorization: "Bearer " + this.token }
547	})	547	})
548	.then(response => {	548	.then(response => {
549	this.addclass = response.data.data;	549	this.addclass = response.data.data;
550	})	550	})
551	.catch(err => {	551	.catch(err => {
552	// console.log("err====>", err);	552	// console.log("err====>", err);
553	// this.$router.replace({ path: "/" });	553	// this.$router.replace({ path: "/" });
554	});	554	});
555	},	555	},
556	displaySearch() {	556	displaySearch() {
557	(this.show = false), (this.showSearch = true);	557	(this.show = false), (this.showSearch = true);
558	},	558	},
559	closeSearch() {	559	closeSearch() {
560	this.showSearch = false;	560	this.showSearch = false;
561	this.show = true;	561	this.show = true;
562	this.search = "";	562	this.search = "";
563	}	563	}
564	},	564	},
565	mounted() {	565	mounted() {
566	this.token = this.$store.state.token;	566	this.token = this.$store.state.token;
567	this.getSectionList();	567	this.getSectionList();
568	this.getAllClasses();	568	this.getAllClasses();
569	this.getAllTeacher();	569	this.getAllTeacher();
570	}	570	}
571	};	571	};
572	</script>	572	</script>
573		573

src/pages/meetingEvent/meetingEvent.vue

Diff comments View file @b039d39

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDITS EVENT **** -->	3	<!-- **** EDITS EVENT **** -->
4	<v-dialog v-model="editEventdialog" max-width="500px">	4	<v-dialog v-model="editEventdialog" max-width="500px">
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 Meeting Event</label>	8	<label class="title text-xs-center">Edit Meeting Event</label>
9	<v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editEventdialog = 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-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 class="pt-4 subheading">
16	<label class="right">Title:</label>	16	<label class="right">Title:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs7 class="ml-3">	18	<v-flex xs7 class="ml-3">
19	<v-text-field v-model="editedItem.title" type="text"></v-text-field>	19	<v-text-field v-model="editedItem.title" type="text"></v-text-field>
20	</v-flex>	20	</v-flex>
21	</v-layout>	21	</v-layout>
22	</v-flex>	22	</v-flex>
23	<v-flex xs12 sm12>	23	<v-flex xs12 sm12>
24	<v-layout>	24	<v-layout>
25	<v-flex xs4 class="pt-4 subheading">	25	<v-flex xs4 class="pt-4 subheading">
26	<label class="right">Date:</label>	26	<label class="right">Date:</label>
27	</v-flex>	27	</v-flex>
28	<v-flex xs7 class="ml-3">	28	<v-flex xs7 class="ml-3">
29	<v-menu	29	<v-menu
30	ref="menu"	30	ref="menu"
31	:close-on-content-click="false"	31	:close-on-content-click="false"
32	v-model="menuEditDate"	32	v-model="menuEditDate"
33	:nudge-right="40"	33	:nudge-right="40"
34	lazy	34	lazy
35	transition="scale-transition"	35	transition="scale-transition"
36	offset-y	36	offset-y
37	full-width	37	full-width
38	min-width="290px"	38	min-width="290px"
39	>	39	>
40	<v-text-field	40	<v-text-field
41	slot="activator"	41	slot="activator"
42	v-model="editedItem.dateOfEvent"	42	v-model="editedItem.dateOfEvent"
43	placeholder="Select date"	43	placeholder="Select date"
44	></v-text-field>	44	></v-text-field>
45	<v-date-picker	45	<v-date-picker
46	color="info"	46	color="info"
47	ref="picker"	47	ref="picker"
48	v-model="editedItem.dateOfEvent"	48	v-model="editedItem.dateOfEvent"
49	@input="$refs.menu.save(editedItem.dateOfEvent)"	49	@input="$refs.menu.save(editedItem.dateOfEvent)"
50	></v-date-picker>	50	></v-date-picker>
51	</v-menu>	51	</v-menu>
52	</v-flex>	52	</v-flex>
53	</v-layout>	53	</v-layout>
54	</v-flex>	54	</v-flex>
55	<v-flex xs12 sm12>	55	<v-flex xs12 sm12>
56	<v-layout>	56	<v-layout>
57	<v-flex xs4 class="pt-4 subheading">	57	<v-flex xs4 class="pt-4 subheading">
58	<label class="right">Start Time:</label>	58	<label class="right">Start Time:</label>
59	</v-flex>	59	</v-flex>
60	<v-flex xs7 class="ml-3">	60	<v-flex xs7 class="ml-3">
61	<v-menu	61	<v-menu
62	ref="menuEdit"	62	ref="menuEdit"
63	:close-on-content-click="false"	63	:close-on-content-click="false"
64	v-model="menuEditTime"	64	v-model="menuEditTime"
65	:nudge-right="40"	65	:nudge-right="40"
66	:return-value.sync="editedItem.startTime"	66	:return-value.sync="editedItem.startTime"
67	lazy	67	lazy
68	transition="scale-transition"	68	transition="scale-transition"
69	offset-y	69	offset-y
70	full-width	70	full-width
71	max-width="290px"	71	max-width="290px"
72	min-width="290px"	72	min-width="290px"
73	>	73	>
74	<v-text-field	74	<v-text-field
75	slot="activator"	75	slot="activator"
76	v-model="editedItem.startTime"	76	v-model="editedItem.startTime"
77	append-icon="access_time"	77	append-icon="access_time"
78	readonly	78	readonly
79	></v-text-field>	79	></v-text-field>
80	<v-time-picker	80	<v-time-picker
81	v-model="editedItem.startTime"	81	v-model="editedItem.startTime"
82	format="24hr"	82	format="24hr"
83	@change="$refs.menuEdit.save(editedItem.startTime)"	83	@change="$refs.menuEdit.save(editedItem.startTime)"
84	></v-time-picker>	84	></v-time-picker>
85	</v-menu>	85	</v-menu>
86	</v-flex>	86	</v-flex>
87	</v-layout>	87	</v-layout>
88	</v-flex>	88	</v-flex>
89	<v-flex xs12 sm12>	89	<v-flex xs12 sm12>
90	<v-layout>	90	<v-layout>
91	<v-flex xs4 class="pt-4 subheading">	91	<v-flex xs4 class="pt-4 subheading">
92	<label class="right">Duration:</label>	92	<label class="right">Duration:</label>
93	</v-flex>	93	</v-flex>
94	<v-flex xs7 class="ml-3">	94	<v-flex xs7 class="ml-3">
95	<v-text-field v-model="editedItem.duration" type="text"></v-text-field>	95	<v-text-field v-model="editedItem.duration" type="text"></v-text-field>
96	</v-flex>	96	</v-flex>
97	</v-layout>	97	</v-layout>
98	</v-flex>	98	</v-flex>
99	<v-layout>	99	<v-layout>
100	<v-flex xs12>	100	<v-flex xs12>
101	<v-card-actions class="hidden-xs-only hidden-sm-only">	101	<v-card-actions class="hidden-xs-only hidden-sm-only">
102	<v-spacer></v-spacer>	102	<v-spacer></v-spacer>
103	<v-btn round dark @click="save" class="add-button">Save</v-btn>	103	<v-btn round dark @click="save" class="add-button">Save</v-btn>
104	</v-card-actions>	104	</v-card-actions>
105	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	105	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
106	<v-spacer></v-spacer>	106	<v-spacer></v-spacer>
107	<v-btn round dark @click="save" class="add-button">Save</v-btn>	107	<v-btn round dark @click="save" class="add-button">Save</v-btn>
108	<v-spacer></v-spacer>	108	<v-spacer></v-spacer>
109	</v-card-actions>	109	</v-card-actions>
110	</v-flex>	110	</v-flex>
111	</v-layout>	111	</v-layout>
112	</v-container>	112	</v-container>
113	</v-card>	113	</v-card>
114	</v-dialog>	114	</v-dialog>
115	<!-- **** PROFILE VIEW EVENT **** -->	115	<!-- **** PROFILE VIEW EVENT **** -->
116	<v-dialog v-model="viewEventdialog" max-width="500px">	116	<v-dialog v-model="viewEventdialog" max-width="500px">
117	<v-card flat class="card-style pa-3" dark>	117	<v-card flat class="card-style pa-3" dark>
118	<v-layout>	118	<v-layout>
119	<v-flex xs12>	119	<v-flex xs12>
120	<label class="title text-xs-center">View Meeting Event</label>	120	<label class="title text-xs-center">View Meeting Event</label>
121	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>	121	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-card-text>	124	<v-card-text>
125	<v-container grid-list-md>	125	<v-container grid-list-md>
126	<v-layout wrap>	126	<v-layout wrap>
127	<v-flex>	127	<v-flex>
128	<v-layout>	128	<v-layout>
129	<v-flex xs4 sm6>	129	<v-flex xs4 sm6>
130	<h5 class="right my-1">	130	<h5 class="right my-1">
131	<b>Title:</b>	131	<b>Title:</b>
132	</h5>	132	</h5>
133	</v-flex>	133	</v-flex>
134	<v-flex sm6 xs8>	134	<v-flex sm6 xs8>
135	<h5 class="my-1">{{ editedItem.title }}</h5>	135	<h5 class="my-1">{{ editedItem.title }}</h5>
136	</v-flex>	136	</v-flex>
137	</v-layout>	137	</v-layout>
138	<v-layout>	138	<v-layout>
139	<v-flex xs4 sm6>	139	<v-flex xs4 sm6>
140	<h5 class="right my-1">	140	<h5 class="right my-1">
141	<b>Date:</b>	141	<b>Date:</b>
142	</h5>	142	</h5>
143	</v-flex>	143	</v-flex>
144	<v-flex sm6 xs8>	144	<v-flex sm6 xs8>
145	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>	145	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
146	</v-flex>	146	</v-flex>
147	</v-layout>	147	</v-layout>
148	<v-layout>	148	<v-layout>
149	<v-flex xs4 sm6>	149	<v-flex xs4 sm6>
150	<h5 class="right my-1">	150	<h5 class="right my-1">
151	<b>Start Time:</b>	151	<b>Start Time:</b>
152	</h5>	152	</h5>
153	</v-flex>	153	</v-flex>
154	<v-flex sm6 xs8>	154	<v-flex sm6 xs8>
155	<h5 class="my-1">{{ editedItem.startTime }}</h5>	155	<h5 class="my-1">{{ editedItem.startTime }}</h5>
156	</v-flex>	156	</v-flex>
157	</v-layout>	157	</v-layout>
158	<v-layout>	158	<v-layout>
159	<v-flex xs4 sm6>	159	<v-flex xs4 sm6>
160	<h5 class="right my-1">	160	<h5 class="right my-1">
161	<b>Type Of Event:</b>	161	<b>Type Of Event:</b>
162	</h5>	162	</h5>
163	</v-flex>	163	</v-flex>
164	<v-flex sm6 xs8>	164	<v-flex sm6 xs8>
165	<h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>	165	<h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
166	</v-flex>	166	</v-flex>
167	</v-layout>	167	</v-layout>
168	<v-layout v-if="editedItem.courseId">	168	<v-layout v-if="editedItem.courseId">
169	<v-flex xs4 sm6>	169	<v-flex xs4 sm6>
170	<h5 class="right my-1">	170	<h5 class="right my-1">
171	<b>Course Name:</b>	171	<b>Course Name:</b>
172	</h5>	172	</h5>
173	</v-flex>	173	</v-flex>
174	<v-flex sm6 xs8>	174	<v-flex sm6 xs8>
175	<h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>	175	<h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
176	</v-flex>	176	</v-flex>
177	</v-layout>	177	</v-layout>
178	<v-layout v-if="editedItem.classId">	178	<v-layout v-if="editedItem.classId">
179	<v-flex xs4 sm6>	179	<v-flex xs4 sm6>
180	<h5 class="right my-1">	180	<h5 class="right my-1">
181	<b>Class:</b>	181	<b>Class:</b>
182	</h5>	182	</h5>
183	</v-flex>	183	</v-flex>
184	<v-flex sm6 xs8>	184	<v-flex sm6 xs8>
185	<h5 class="my-1">{{ editedItem.classId.classNum }}</h5>	185	<h5 class="my-1">{{ editedItem.classId.classNum }}</h5>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	<v-layout>	188	<v-layout>
189	<v-flex xs4 sm6>	189	<v-flex xs4 sm6>
190	<h5 class="right my-1">	190	<h5 class="right my-1">
191	<b>Duration:</b>	191	<b>Duration:</b>
192	</h5>	192	</h5>
193	</v-flex>	193	</v-flex>
194	<v-flex sm6 xs8>	194	<v-flex sm6 xs8>
195	<h5 class="my-1">{{ editedItem.duration }}</h5>	195	<h5 class="my-1">{{ editedItem.duration }}</h5>
196	</v-flex>	196	</v-flex>
197	</v-layout>	197	</v-layout>
198	</v-flex>	198	</v-flex>
199	</v-layout>	199	</v-layout>
200	</v-container>	200	</v-container>
201	</v-card-text>	201	</v-card-text>
202	</v-card>	202	</v-card>
203	</v-dialog>	203	</v-dialog>
204		204
205	<!-- **** EVENT TABLE **** -->	205	<!-- **** EVENT TABLE **** -->
206		206
207	<v-toolbar color="transparent" flat>	207	<v-toolbar color="transparent" flat>
208	<v-btn	208	<v-btn
209	fab	209	fab
210	dark	210	dark
211	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	211	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
212	small	212	small
213	@click="meetEventDialog = true"	213	@click="meetEventDialog = true"
214	>	214	>
215	<v-icon dark>add</v-icon>	215	<v-icon dark>add</v-icon>
216	</v-btn>	216	</v-btn>
217	<v-btn	217	<v-btn
218	round	218	round
219	class="open-dialog-button hidden-sm-only hidden-xs-only"	219	class="open-dialog-button hidden-sm-only hidden-xs-only"
220	dark	220	dark
221	@click="meetEventDialog = true"	221	@click="meetEventDialog = true"
222	>	222	>
223	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event	223	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
224	</v-btn>	224	</v-btn>
225	<v-spacer></v-spacer>	225	<v-spacer></v-spacer>
226	<v-card-title class="body-1" v-show="show">	226	<v-card-title class="body-1" v-show="show">
227	<v-btn icon large flat @click="displaySearch">	227	<v-btn icon large flat @click="displaySearch">
228	<v-avatar size="27">	228	<v-avatar size="27">
229	<img src="/static/icon/search.png" alt="icon" />	229	<img src="/static/icon/search.png" alt="icon" />
230	</v-avatar>	230	</v-avatar>
231	</v-btn>	231	</v-btn>
232	</v-card-title>	232	</v-card-title>
233	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	233	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
234	<v-layout>	234	<v-layout>
235	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	235	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
236	<v-icon @click="closeSearch" color="error">close</v-icon>	236	<v-icon @click="closeSearch" color="error">close</v-icon>
237	</v-layout>	237	</v-layout>
238	</v-flex>	238	</v-flex>
239	</v-toolbar>	239	</v-toolbar>
240	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">	240	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">
241	<template slot="items" slot-scope="props">	241	<template slot="items" slot-scope="props">
242	<tr class="tr">	242	<tr class="tr">
243	<td class="td td-row">{{ props.index + 1}}</td>	243	<td class="td td-row">{{ props.index + 1}}</td>
244	<td	244	<td
245	class="td td-row text-xs-center"	245	class="td td-row text-xs-center"
246	>{{ props.item.classId ? props.item.classId.classNum : "-" }}</td>	246	>{{ props.item.classId ? props.item.classId.classNum : "-" }}</td>
247	<td class="td td-row text-xs-center">{{ props.item.title }}</td>	247	<td class="td td-row text-xs-center">{{ props.item.title }}</td>
248	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>	248	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>
249	<td class="td td-row text-xs-center">{{ props.item.startTime }}</td>	249	<td class="td td-row text-xs-center">{{ props.item.startTime }}</td>
250	<td class="td td-row text-xs-center">	250	<td class="td td-row text-xs-center">
251	<span>	251	<span>
252	<v-tooltip top>	252	<v-tooltip top>
253	<img	253	<img
254	slot="activator"	254	slot="activator"
255	style="cursor:pointer; width:25px; height:25px; "	255	style="cursor:pointer; width:25px; height:25px; "
256	class="mr-3"	256	class="mr-3"
257	@click="profile(props.item)"	257	@click="profile(props.item)"
258	src="/static/icon/view.png"	258	src="/static/icon/view.png"
259	/>	259	/>
260	<span>View</span>	260	<span>View</span>
261	</v-tooltip>	261	</v-tooltip>
262	<v-tooltip top>	262	<v-tooltip top>
263	<img	263	<img
264	slot="activator"	264	slot="activator"
265	style="cursor:pointer; width:20px; height:18px; "	265	style="cursor:pointer; width:20px; height:18px; "
266	class="mr-3"	266	class="mr-3"
267	@click="editItem(props.item)"	267	@click="editItem(props.item)"
268	src="/static/icon/edit.png"	268	src="/static/icon/edit.png"
269	/>	269	/>
270	<span>Edit</span>	270	<span>Edit</span>
271	</v-tooltip>	271	</v-tooltip>
272	<v-tooltip top>	272	<v-tooltip top>
273	<img	273	<img
274	slot="activator"	274	slot="activator"
275	style="cursor:pointer; width:20px; height:20px; "	275	style="cursor:pointer; width:20px; height:20px; "
276	class="mr-3"	276	class="mr-3"
277	@click="deleteItem(props.item)"	277	@click="deleteItem(props.item)"
278	src="/static/icon/delete.png"	278	src="/static/icon/delete.png"
279	/>	279	/>
280	<span>Delete</span>	280	<span>Delete</span>
281	</v-tooltip>	281	</v-tooltip>
282	</span>	282	</span>
283	</td>	283	</td>
284	</tr>	284	</tr>
285	</template>	285	</template>
286	<v-alert	286	<v-alert
287	slot="no-results"	287	slot="no-results"
288	:value="true"	288	:value="true"
289	color="error"	289	color="error"
290	icon="warning"	290	icon="warning"
291	>Your search for "{{ search }}" found no results.</v-alert>	291	>Your search for "{{ search }}" found no results.</v-alert>
292	</v-data-table>	292	</v-data-table>
293	<!-- **** ADD MULTIPLE EVENT **** -->	293	<!-- **** ADD MULTIPLE EVENT **** -->
294	<v-dialog v-model="meetEventDialog" max-width="500px" persistent>	294	<v-dialog v-model="meetEventDialog" max-width="500px" persistent>
295	<v-card flat class="card-style pa-2" dark>	295	<v-card flat class="card-style pa-2" dark>
296	<v-layout>	296	<v-layout>
297	<v-flex xs12>	297	<v-flex xs12>
298	<label class="title text-xs-center">Add Meeting Event</label>	298	<label class="title text-xs-center">Add Meeting Event</label>
299	<v-icon size="24" class="right" @click="meetEventDialog = false; $refs.form.reset()">cancel</v-icon>	299	<v-icon size="24" class="right" @click="meetEventDialog = false; $refs.form.reset()">cancel</v-icon>
300	</v-flex>	300	</v-flex>
301	</v-layout>	301	</v-layout>
302	<v-form ref="form" v-model="valid" lazy-validation >	302	<v-form ref="form" v-model="valid" lazy-validation >
303	<v-container fluid>	303	<v-container fluid>
304	<v-flex xs12>	304	<v-flex xs12>
305	<v-layout>	305	<v-layout>
306	<v-flex xs4 class="pt-4 subheading">	306	<v-flex xs4 class="pt-4 subheading">
307	<label class="right">Title:</label>	307	<label class="right">Title:</label>
308	</v-flex>	308	</v-flex>
309	<v-flex xs8 sm8 class="ml-3">	309	<v-flex xs8 sm8 class="ml-3">
310	<v-text-field	310	<v-text-field
311	v-model="meetEvent.title"	311	v-model="meetEvent.title"
312	placeholder="fill your Title"	312	placeholder="fill your Title"
313	type="text"	313	type="text"
314	:rules="titleRules"	314	:rules="titleRules"
315	required	315	required
316	></v-text-field>	316	></v-text-field>
317	</v-flex>	317	</v-flex>
318	</v-layout>	318	</v-layout>
319	</v-flex>	319	</v-flex>
320	<v-flex xs12>	320	<v-flex xs12>
321	<v-layout>	321	<v-layout>
322	<v-flex xs4 class="pt-4 subheading">	322	<v-flex xs4 class="pt-4 subheading">
323	<label class="right">Date:</label>	323	<label class="right">Date:</label>
324	</v-flex>	324	</v-flex>
325	<v-flex xs8 sm8 class="ml-3">	325	<v-flex xs8 sm8 class="ml-3">
326	<v-menu	326	<v-menu
327	ref="menu1"	327	ref="menu1"
328	:close-on-content-click="false"	328	:close-on-content-click="false"
329	v-model="menu1"	329	v-model="menu1"
330	:nudge-right="40"	330	:nudge-right="40"
331	:return-value.sync="meetEvent.dateOfEvent"	331	:return-value.sync="meetEvent.dateOfEvent"
332	app	332	app
333	lazy	333	lazy
334	transition="scale-transition"	334	transition="scale-transition"
335	offset-y	335	offset-y
336	full-width	336	full-width
337	min-width="290px"	337	min-width="290px"
338	>	338	>
339	<v-text-field	339	<v-text-field
340	slot="activator"	340	slot="activator"
341	:rules="dateRules"	341	:rules="dateRules"
342	v-model="meetEvent.dateOfEvent"	342	v-model="meetEvent.dateOfEvent"
343	append-icon="event"	343	append-icon="event"
344	placeholder="Select date"	344	placeholder="Select date"
345	></v-text-field>	345	></v-text-field>
346	<v-date-picker	346	<v-date-picker
347	color="info"	347	color="info"
348	v-model="meetEvent.dateOfEvent"	348	v-model="meetEvent.dateOfEvent"
349	@input="$refs.menu1.save(meetEvent.dateOfEvent)"	349	@input="$refs.menu1.save(meetEvent.dateOfEvent)"
350	></v-date-picker>	350	></v-date-picker>
351	</v-menu>	351	</v-menu>
352	</v-flex>	352	</v-flex>
353	</v-layout>	353	</v-layout>
354	</v-flex>	354	</v-flex>
355	<v-flex xs12>	355	<v-flex xs12>
356	<v-layout>	356	<v-layout>
357	<v-flex xs4 class="pt-4 subheading">	357	<v-flex xs4 class="pt-4 subheading">
358	<label class="right">Start Time:</label>	358	<label class="right">Start Time:</label>
359	</v-flex>	359	</v-flex>
360	<v-flex xs8 sm8 class="ml-3">	360	<v-flex xs8 sm8 class="ml-3">
361	<v-menu	361	<v-menu
362	ref="menuA"	362	ref="menuA"
363	:close-on-content-click="false"	363	:close-on-content-click="false"
364	v-model="menu2"	364	v-model="menu2"
365	:nudge-right="40"	365	:nudge-right="40"
366	:return-value.sync="meetEvent.startTime"	366	:return-value.sync="meetEvent.startTime"
367	lazy	367	lazy
368	transition="scale-transition"	368	transition="scale-transition"
369	offset-y	369	offset-y
370	full-width	370	full-width
371	max-width="290px"	371	max-width="290px"
372	min-width="290px"	372	min-width="290px"
373	>	373	>
374	<v-text-field	374	<v-text-field
375	slot="activator"	375	slot="activator"
376	v-model="meetEvent.startTime"	376	v-model="meetEvent.startTime"
377	placeholder="Select Start time"	377	placeholder="Select Start time"
378	append-icon="access_time"	378	append-icon="access_time"
379	:rules="startTimeRules"	379	:rules="startTimeRules"
380	readonly	380	readonly
381	></v-text-field>	381	></v-text-field>
382	<v-time-picker	382	<v-time-picker
383	v-model="meetEvent.startTime"	383	v-model="meetEvent.startTime"
384	format="24hr"	384	format="24hr"
385	@change="$refs.menuA.save(meetEvent.startTime)"	385	@change="$refs.menuA.save(meetEvent.startTime)"
386	></v-time-picker>	386	></v-time-picker>
387	</v-menu>	387	</v-menu>
388	</v-flex>	388	</v-flex>
389	</v-layout>	389	</v-layout>
390	</v-flex>	390	</v-flex>
391	<v-flex xs12>	391	<v-flex xs12>
392	<v-layout>	392	<v-layout>
393	<v-flex xs4 class="pt-4 subheading">	393	<v-flex xs4 class="pt-4 subheading">
394	<label class="right">Type Of Event:</label>	394	<label class="right">Type Of Event:</label>
395	</v-flex>	395	</v-flex>
396	<v-flex xs8 sm8 class="ml-3">	396	<v-flex xs8 sm8 class="ml-3">
397	<v-select	397	<v-select
398	:items="typeOfEvent"	398	:items="typeOfEvent"
399	label="Select Type Of Event"	399	label="Select Type Of Event"
400	v-model="meetEvent.typeOfEvent"	400	v-model="meetEvent.typeOfEvent"
401	:rules="typeOfEventRules"	401	:rules="typeOfEventRules"
402		402
403	></v-select>	403	></v-select>
404	</v-flex>	404	</v-flex>
405	</v-layout>	405	</v-layout>
406	</v-flex>	406	</v-flex>
407	<v-flex xs12 v-show="meetEvent.typeOfEvent">	407	<v-flex xs12 v-show="meetEvent.typeOfEvent">
408	<v-layout>	408	<v-layout>
409	<v-flex xs4 class="pt-4 subheading">	409	<v-flex xs4 class="pt-4 subheading">
410	<label class="right">Class:</label>	410	<label class="right">Class:</label>
411	</v-flex>	411	</v-flex>
412	<v-flex xs8 sm8 class="ml-3">	412	<v-flex xs8 sm8 class="ml-3">
413	<v-select	413	<v-select
414	:items="addclass"	414	:items="addclass"
415	label="Select Class"	415	label="Select Class"
416	v-model="meetEvent.classId"	416	v-model="meetEvent.classId"
417	item-text="classNum"	417	item-text="classNum"
418	item-value="_id"	418	item-value="_id"
419	@change="getCourses(meetEvent.classId)"	419	@change="getCourses(meetEvent.classId)"
420	></v-select>	420	></v-select>
421	</v-flex>	421	</v-flex>
422	</v-layout>	422	</v-layout>
423	</v-flex>	423	</v-flex>
424	<v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">	424	<v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
425	<v-layout>	425	<v-layout>
426	<v-flex xs4 class="pt-4 subheading">	426	<v-flex xs4 class="pt-4 subheading">
427	<label class="right">Courses:</label>	427	<label class="right">Courses:</label>
428	</v-flex>	428	</v-flex>
429	<v-flex xs8 sm8 class="ml-3">	429	<v-flex xs8 sm8 class="ml-3">
430	<v-select	430	<v-select
431	:items="courseData"	431	:items="courseData"
432	label="Select Course"	432	label="Select Course"
433	v-model="meetEvent.courseId"	433	v-model="meetEvent.courseId"
434	item-text="courseName"	434	item-text="courseName"
435	item-value="_id"	435	item-value="_id"
436	required	436	required
437	></v-select>	437	></v-select>
438	</v-flex>	438	</v-flex>
439	</v-layout>	439	</v-layout>
440	</v-flex>	440	</v-flex>
441	<v-flex xs12>	441	<v-flex xs12>
442	<v-layout>	442	<v-layout>
443	<v-flex xs4 class="pt-4 subheading">	443	<v-flex xs4 class="pt-4 subheading">
444	<label class="right">Duration</label>	444	<label class="right">Duration</label>
445	</v-flex>	445	</v-flex>
446	<v-flex xs8 sm8 class="ml-3">	446	<v-flex xs8 sm8 class="ml-3">
447	<v-text-field	447	<v-text-field
448	placeholder="fill your Description"	448	placeholder="fill your Description"
449	:rules="descriptionRules"	449	:rules="descriptionRules"
450	v-model="meetEvent.duration"	450	v-model="meetEvent.duration"
451	type="text"	451	type="text"
452	required	452	required
453	></v-text-field>	453	></v-text-field>
454	</v-flex>	454	</v-flex>
455	</v-layout>	455	</v-layout>
456	</v-flex>	456	</v-flex>
457	<v-layout>	457	<v-layout>
458	<v-flex xs12>	458	<v-flex xs12>
459	<v-layout class="right">	459	<v-layout class="right">
460	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>	460	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
461	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	461	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
462	</v-layout>	462	</v-layout>
463	</v-flex>	463	</v-flex>
464	</v-layout>	464	</v-layout>
465	</v-container>	465	</v-container>
466	</v-form>	466	</v-form>
467	</v-card>	467	</v-card>
468	</v-dialog>	468	</v-dialog>
469	<v-snackbar	469	<v-snackbar
470	:timeout="timeout"	470	:timeout="timeout"
471	:top="y === 'top'"	471	:top="y === 'top'"
472	:right="x === 'right'"	472	:right="x === 'right'"
473	:vertical="mode === 'vertical'"	473	:vertical="mode === 'vertical'"
474	v-model="snackbar"	474	v-model="snackbar"
475	:color="color"	475	:color="color"
476	>{{ text }}</v-snackbar>	476	>{{ text }}</v-snackbar>
477	<div class="loader" v-if="showLoader">	477	<div class="loader" v-if="showLoader">
478	<v-progress-circular indeterminate color="white"></v-progress-circular>	478	<v-progress-circular indeterminate color="white"></v-progress-circular>
479	</div>	479	</div>
480	</v-container>	480	</v-container>
481	</template>	481	</template>
482		482
483	<script>	483	<script>
484	import http from "@/Services/http.js";	484	import http from "@/Services/http.js";
485	import moment from "moment";	485	import moment from "moment";
486		486
487	export default {	487	export default {
488	data: () => ({	488	data: () => ({
489	snackbar: false,	489	snackbar: false,
490	y: "top",	490	y: "top",
491	x: "right",	491	x: "right",
492	mode: "",	492	mode: "",
493	timeout: 5000,	493	timeout: 5000,
494	text: "",	494	text: "",
495	color: "",	495	color: "",
496	loading: false,	496	loading: false,
497	date: null,	497	date: null,
498	search: "",	498	search: "",
499	color: "",	499	color: "",
500	show: true,	500	show: true,
501	meetEventDialog: false,	501	meetEventDialog: false,
502	showSearch: false,	502	showSearch: false,
503	showLoader: false,	503	showLoader: false,
504	editEventdialog: false,	504	editEventdialog: false,
505	viewEventdialog: false,	505	viewEventdialog: false,
506	valid: true,	506	valid: true,
507	addclass: [],	507	addclass: [],
508	courseData: [],	508	courseData: [],
509	pagination: {	509	pagination: {
510	rowsPerPage: 10	510	rowsPerPage: 10
511	},	511	},
512	date: null,	512	date: null,
513	menu1: false,	513	menu1: false,
514	menu: false,	514	menu: false,
515	menuEditTime: false,	515	menuEditTime: false,
516	menuEditDate: false,	516	menuEditDate: false,
517	titleRules: [v => !!v \|\| " Tilte is required"],	517	titleRules: [v => !!v \|\| " Tilte is required"],
518	descriptionRules: [v => !!v \|\| " Discription is required"],	518	descriptionRules: [v => !!v \|\| " Discription is required"],
519	dateRules: [v => !!v \|\| "Date of event is required"],	519	dateRules: [v => !!v \|\| "Date of event is required"],
520	startTimeRules: [v => !!v \|\| "Start Time is required"],	520	startTimeRules: [v => !!v \|\| "Start Time is required"],
521	typeOfEventRules: [v => !!v \|\| "Type of event is required"],	521	typeOfEventRules: [v => !!v \|\| "Type of event is required"],
522	headers: [	522	headers: [
523	{	523	{
524	text: "No",	524	text: "No",
525	align: "",	525	align: "",
526	sortable: false,	526	sortable: false,
527	value: "No"	527	value: "No"
528	},	528	},
529	{	529	{
530	text: "Class",	530	text: "Class",
531	value: "classNum",	531	value: "classNum",
532	sortable: false,	532	sortable: false,
533	align: "center"	533	align: "center"
534	},	534	},
535	{ text: "Title", value: "title", sortable: false, align: "center" },	535	{ text: "Title", value: "title", sortable: false, align: "center" },
536	{	536	{
537	text: "Date Of Event",	537	text: "Date Of Event",
538	value: "dateOfEvent",	538	value: "dateOfEvent",
539	sortable: false,	539	sortable: false,
540	align: "center"	540	align: "center"
541	},	541	},
542	{	542	{
543	text: "Start Time",	543	text: "Start Time",
544	value: "startTime",	544	value: "startTime",
545	sortable: false,	545	sortable: false,
546	align: "center"	546	align: "center"
547	},	547	},
548	{ text: "Action", value: "", sortable: false, align: "center" }	548	{ text: "Action", value: "", sortable: false, align: "center" }
549	],	549	],
550	events: [],	550	events: [],
551	typeOfEvent: ["Class", "Course"],	551	typeOfEvent: ["Class", "Course"],
552	editedIndex: -1,	552	editedIndex: -1,
553	meetEvent: {	553	meetEvent: {
554	startTime: null	554	startTime: null
555	},	555	},
556	editedItem: {},	556	editedItem: {},
557	menu1: false,	557	menu1: false,
558	menu2: false,	558	menu2: false,
559	loginId: ""	559	loginId: ""
560	}),	560	}),
561	methods: {	561	methods: {
562	dates: function(date) {	562	dates: function(date) {
563	return moment(date).format("MMMM DD, YYYY");	563	return moment(date).format("MMMM DD, YYYY");
564	},	564	},
565	getEvents() {	565	getEvents() {
566	this.showLoader = true;	566	this.showLoader = true;
567	var token = this.$store.state.token;	567	var token = this.$store.state.token;
568	http()	568	http()
569	.get("/getMeetingEventesList", {	569	.get("/getMeetingEventesList", {
570	params: { teacherId: this.loginId },	570	params: { teacherId: this.loginId },
571	headers: { Authorization: "Bearer " + token }	571	headers: { Authorization: "Bearer " + token }
572	})	572	})
573	.then(response => {	573	.then(response => {
574	this.events = response.data.data;	574	this.events = response.data.data;
575	this.showLoader = false;	575	this.showLoader = false;
576	})	576	})
577	.catch(error => {	577	.catch(error => {
578	// console.log("err====>", err);	578	// console.log("err====>", err);
579	this.showLoader = false;	579	this.showLoader = false;
580	if (error.response.status === 401) {	580	if (error.response.status === 401) {
581	this.$router.replace({ path: "/" });	581	this.$router.replace({ path: "/" });
582	this.$store.dispatch("setToken", null);	582	this.$store.dispatch("setToken", null);
583	this.$store.dispatch("Id", null);	583	this.$store.dispatch("Id", null);
584	}	584	}
585	});	585	});
586	},	586	},
587	editItem(item) {	587	editItem(item) {
588	this.editedIndex = this.events.indexOf(item);	588	this.editedIndex = this.events.indexOf(item);
589	this.editedItem = Object.assign({}, item);	589	this.editedItem = Object.assign({}, item);
590	this.editedItem.meetingEventId = item._id;	590	this.editedItem.meetingEventId = item._id;
591	this.editedItem.startTime = moment(this.editedItem.startTime, ["h:mm A"]).format("HH:mm");	591	this.editedItem.startTime = moment(this.editedItem.startTime, ["h:mm A"]).format("HH:mm");
592	this.editEventdialog = true;	592	this.editEventdialog = true;
593	},	593	},
594	profile(item) {	594	profile(item) {
595	this.editedIndex = this.events.indexOf(item);	595	this.editedIndex = this.events.indexOf(item);
596	this.editedItem = Object.assign({}, item);	596	this.editedItem = Object.assign({}, item);
597	this.viewEventdialog = true;	597	this.viewEventdialog = true;
598	},	598	},
599		599
600	deleteItem(item) {	600	deleteItem(item) {
601	let deleteEvent = {	601	let deleteEvent = {
602	meetingEventId: item._id	602	meetingEventId: item._id
603	};	603	};
604	http()	604	http()
605	.delete(	605	.delete(
606	"/deleteMeetingEvent",	606	"/deleteMeetingEvent",
607	confirm("Are you sure you want to delete this?") && {	607	confirm("Are you sure you want to delete this?") && {
608	params: deleteEvent	608	params: deleteEvent
609	}	609	}
610	)	610	)
611	.then(response => {	611	.then(response => {
612	this.snackbar = true;	612	this.snackbar = true;
613	this.text = response.data.message;	613	this.text = response.data.message;
614	this.getEvents();	614	this.getEvents();
615	this.snackbar = true;	615	this.snackbar = true;
616	this.color = "green";	616	this.color = "green";
617	this.text = response.data.message;	617	this.text = response.data.message;
618	})	618	})
619	.catch(error => {	619	.catch(error => {
620	this.snackbar = true;	620	this.snackbar = true;
621	this.text = error.response.data.message;	621	this.text = error.response.data.message;
622	this.color = "error";	622	this.color = "error";
623	this.loading = false;	623	this.loading = false;
624	});	624	});
625	},	625	},
626	getAllClass() {	626	getAllClass() {
627	http()	627	http()
628	.get("/getClassesList")	628	.get("/getClassesList")
629	.then(response => {	629	.then(response => {
630	this.addclass = response.data.data;	630	this.addclass = response.data.data;
631	})	631	})
632	.catch(error => {	632	.catch(error => {
633	// console.log("err====>", err);	633	// console.log("err====>", err);
634	// this.$router.replace({ path: "/" });	634	// this.$router.replace({ path: "/" });
635	});	635	});
636	},	636	},
637	getCourses(classId) {	637	getCourses(classId) {
638	this.showLoader = true;	638	this.showLoader = true;
639	http()	639	http()
640	.get("/getCourseesList", {	640	.get("/getCourseesList", {
641	params: {	641	params: {
642	classId: classId	642	classId: classId
643	}	643	}
644	})	644	})
645	.then(response => {	645	.then(response => {
646	this.courseData = response.data.data;	646	this.courseData = response.data.data;
647	this.showLoader = false;	647	this.showLoader = false;
648	})	648	})
649	.catch(err => {	649	.catch(err => {
650	console.log("err====>", err);	650	console.log("err====>", err);
651	this.showLoader = false;	651	this.showLoader = false;
652	});	652	});
653	},	653	},
654	close() {	654	close() {
655	this.editEventdialog = false;	655	this.editEventdialog = false;
656	},	656	},
657	submit() {	657	submit() {
658	if (this.$refs.form.validate()) {	658	if (this.$refs.form.validate()) {
659	this.loading = true;	659	this.loading = true;
660	this.meetEvent.startTime = moment(this.meetEvent.startTime, "hh:mm").format("LT");	660	this.meetEvent.startTime = moment(this.meetEvent.startTime, "hh:mm").format("LT");
661	http()	661	http()
662	.post("/createMeetingEvent", this.meetEvent)	662	.post("/createMeetingEvent", this.meetEvent)
663	.then(response => {	663	.then(response => {
664	this.snackbar = true;	664	this.snackbar = true;
665	this.text = response.data.message;	665	this.text = response.data.message;
666	this.color = "green";	666	this.color = "green";
667	this.getEvents();	667	this.getEvents();
668	this.clear();	668	this.clear();
669	this.loading = false;	669	this.loading = false;
670	this.meetEventDialog = false;	670	this.meetEventDialog = false;
671	})	671	})
672	.catch(error => {	672	.catch(error => {
673	this.snackbar = true;	673	this.snackbar = true;
674	this.text = error.response.data.message;	674	this.text = error.response.data.message;
675	this.color = "error";	675	this.color = "error";
676	this.loading = false;	676	this.loading = false;
677	});	677	});
678	}	678	}
679	},	679	},
680	clear() {	680	clear() {
681	this.$refs.form.reset();	681	this.$refs.form.reset();
682	},	682	},
683	save() {	683	save() {
		684	console.log('=======this.editedItem=====', this.editedItem);
		685	if (this.editedItem.courseId) {
		686	this.editedItem.courseId = this.editedItem.courseId._id;
		687	}
684	delete this.editedItem.classId;	688	delete this.editedItem.classId;
685	this.editedItem.courseId = this.editedItem.courseId._id;	689
686	this.editedItem.startTime = moment(this.editedItem.startTime, "hh:mm").format("LT");	690	this.editedItem.startTime = moment(this.editedItem.startTime, "hh:mm").format("LT");
687	http()	691	http()
688	.put("/updateMeetingEvent", this.editedItem)	692	.put("/updateMeetingEvent", this.editedItem)
689	.then(response => {	693	.then(response => {
690	this.snackbar = true;	694	this.snackbar = true;
691	this.text = response.data.message;	695	this.text = response.data.message;
692	this.color = "green";	696	this.color = "green";
693	this.getEvents();	697	this.getEvents();
694	this.close();	698	this.close();
695	})	699	})
696	.catch(error => {	700	.catch(error => {
697	this.snackbar = true;	701	this.snackbar = true;
698	this.text = error.response.data.message;	702	this.text = error.response.data.message;
699	this.color = "error";	703	this.color = "error";
700	});	704	});
701	},	705	},
702	displaySearch() {	706	displaySearch() {
703	(this.show = false), (this.showSearch = true);	707	(this.show = false), (this.showSearch = true);
704	},	708	},
705	closeSearch() {	709	closeSearch() {
706	this.showSearch = false;	710	this.showSearch = false;
707	this.show = true;	711	this.show = true;
708	this.search = "";	712	this.search = "";
709	}	713	}
710	},	714	},
711	mounted() {	715	mounted() {
712	this.loginId = this.$store.state.id;	716	this.loginId = this.$store.state.id;
713	this.getEvents();	717	this.getEvents();
714	this.getAllClass();	718	this.getAllClass();
715	}	719	}
716	};	720	};
717	</script>	721	</script>